:root {
  --purple: #6F35F5;
  --black: #050505;
  --white: #F7F3EA;
  --muted: #AAA4B1;
  --line: rgba(247, 243, 234, .17);
  --panel: #0D0C0F;
  --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id], article[id] { scroll-margin-top: 92px; }
body { margin: 0; background: var(--black); color: var(--white); font-family: Inter, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; overflow-x: hidden; }
body.popup-open { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 30; background: var(--white); color: var(--black); padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-header { height: 78px; max-width: var(--max); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 164px; height: auto; }
.brand span { font-size: .62rem; font-weight: 900; letter-spacing: .25em; color: var(--white); border-left: 1px solid var(--line); padding-left: 12px; white-space: nowrap; }
nav { display: flex; align-items: center; gap: 25px; }
nav a { text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
nav a:hover, nav a:focus-visible { color: var(--white); }
nav .nav-cta { color: var(--white); border: 1px solid var(--purple); padding: 10px 14px; }
.cart-trigger { border: 1px solid var(--line); background: transparent; color: var(--white); padding: 9px 12px; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.cart-trigger span { display: inline-grid; min-width: 20px; height: 20px; margin-left: 6px; place-items: center; border-radius: 999px; background: var(--purple); }
.hero { max-width: var(--max); margin: 0 auto; padding: 72px 24px 88px; min-height: 650px; display: grid; grid-template-columns: 1.13fr .87fr; align-items: center; gap: 66px; }
.eyebrow { margin: 0 0 18px; color: var(--purple); font-size: .7rem; line-height: 1.3; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; letter-spacing: -.045em; line-height: .96; }
h1 { font-size: clamp(3.7rem, 6.5vw, 6.5rem); text-transform: uppercase; }
h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--purple); }
.lede { max-width: 610px; margin: 30px 0; color: #D4CFD7; font-size: clamp(1rem, 2vw, 1.24rem); }
.button { display: inline-block; background: var(--purple); color: var(--white); padding: 16px 22px; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 900; }
.hero-visual { min-height: 490px; margin: 0; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #101013; border: 1px solid var(--line); }
.hero-photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 50%; }
.hero-visual figcaption { position: relative; z-index: 2; border-top: 1px solid rgba(247,243,234,.35); background: #0B0A0D; padding: 15px 22px 18px; display: grid; gap: 4px; }
.hero-visual strong { font-size: .69rem; letter-spacing: .12em; }
.hero-visual span { color: #D7D1DB; font-size: .72rem; }
.section { max-width: var(--max); margin: 0 auto; padding: 102px 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 42px; }
h2 { font-size: clamp(2.8rem, 5.4vw, 5.2rem); text-transform: uppercase; }
.section-heading > p { color: var(--muted); max-width: 440px; margin: 0; }
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.collection-card { background: var(--panel); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease; }
.collection-card:hover { transform: translateY(-4px); border-color: rgba(111,53,245,.62); }
.product-gallery { background: #101013; border-bottom: 1px solid var(--line); }
.product-frame { aspect-ratio: 1/1; overflow: hidden; background: #8C8C89; }
.product-frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity .16s ease; }
.variant-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; padding: 10px; }
.variant-thumbs.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 160px; }
.variant-thumbs button { min-width: 0; aspect-ratio: 1/1; padding: 2px; overflow: hidden; border: 1px solid transparent; background: #18171A; cursor: pointer; }
.variant-thumbs button:hover, .variant-thumbs button:focus-visible { border-color: var(--white); outline: none; }
.variant-thumbs button[aria-pressed="true"] { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.variant-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.card-copy { padding: 20px; min-height: 285px; }
.card-copy p { color: var(--purple); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; }
.card-copy h3 { font-size: 1.55rem; margin: 10px 0 15px; }
.card-copy span { color: var(--muted); font-size: .77rem; }
.pricing-plan { margin: -20px 0 34px; padding: 14px 16px; border-left: 3px solid var(--purple); background: rgba(111,53,245,.09); color: #CFC9D4; font-size: .8rem; }
.pricing-plan strong { color: var(--white); }
.commerce-controls { display: grid; gap: 9px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.commerce-controls label { color: var(--muted); font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.commerce-controls select { width: 100%; border: 1px solid #3D3941; border-radius: 0; background: #0A090C; color: var(--white); padding: 11px; }
.buy-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.buy-row strong { color: var(--white); font-size: 1.05rem; white-space: nowrap; }
.buy-row button, .cart-summary > button { border: 0; background: var(--purple); color: var(--white); min-height: 43px; padding: 0 14px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.buy-row button:disabled, .cart-summary > button:disabled { cursor: not-allowed; opacity: .48; }
.product-status { min-height: 2.4em; margin: 0; color: #79737E; font-size: .67rem; line-height: 1.35; }
.drop-banner { min-height: 330px; margin-top: 72px; position: relative; overflow: hidden; border: 1px solid var(--line); background: #101013; }
.drop-banner:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.08) 0%, rgba(5,5,5,.7) 58%, rgba(5,5,5,.94) 100%); }
.drop-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 51%; }
.drop-banner-copy { position: relative; z-index: 1; min-height: 330px; width: 52%; margin-left: auto; padding: 54px; display: flex; flex-direction: column; justify-content: end; }
.drop-banner-copy h3 { max-width: 520px; font-size: clamp(2.2rem, 4vw, 4.6rem); text-transform: uppercase; }
.brand-details { margin-top: 92px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; padding: 48px; border: 1px solid var(--line); background: radial-gradient(circle at 84% 20%, rgba(111,53,245,.18), transparent 28%), linear-gradient(135deg, #0D0C0F 0%, #09080B 100%); }
.brand-details:after { content: ""; position: absolute; width: 220px; height: 220px; right: -95px; bottom: -105px; border: 1px solid rgba(111,53,245,.22); border-radius: 50%; box-shadow: 0 0 70px rgba(111,53,245,.12); pointer-events: none; }
.brand-details-copy { position: relative; z-index: 1; }
.brand-details-copy h2 { max-width: 560px; font-size: clamp(2.7rem, 4.4vw, 4.7rem); }
.brand-details-copy > p:last-child { max-width: 490px; margin: 25px 0 0; color: #C7C1CA; font-size: 1rem; line-height: 1.72; }
.brand-detail-images { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: center; }
.brand-detail-images figure { height: 360px; margin: 0; position: relative; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1px solid rgba(247,243,234,.2); background: linear-gradient(150deg, rgba(247,243,234,.07), rgba(111,53,245,.09)); box-shadow: 0 22px 45px rgba(0,0,0,.28); }
.brand-detail-images figure:last-child { transform: translateY(24px); }
.brand-detail-images img { width: 100%; height: 100%; min-height: 0; padding: 15px; object-fit: contain; object-position: center; opacity: .94; }
.brand-detail-images figcaption { padding: 13px 15px; border-top: 1px solid var(--line); background: rgba(5,5,5,.78); color: #D0CAD4; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.future-categories { margin-top: 70px; }
.future-label { color: var(--white); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; border-block: 1px solid var(--line); }
.category-grid article { min-height: 178px; padding: 25px 22px; border-right: 1px solid var(--line); }
.category-grid article:last-child { border-right: 0; }
.category-grid span { color: var(--purple); font-size: .67rem; font-weight: 900; }
.category-grid h3 { font-size: 1.45rem; margin: 28px 0 12px; }
.category-grid p, .future-note { color: var(--muted); font-size: .78rem; }
.future-note { margin-top: 12px; }
.early-access { max-width: none; background: var(--purple); padding-inline: max(24px, calc((100vw - var(--max)) / 2 + 24px)); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.early-access .eyebrow { color: var(--black); }
.early-access > div > p:last-child { max-width: 500px; }
.signup { background: var(--black); padding: 30px; }
.signup > label:first-child, .email-popup form > label { display: block; font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; margin-bottom: 9px; }
.input-row { display: grid; grid-template-columns: 1fr auto; }
input[type="email"] { min-width: 0; border: 1px solid #3D3941; background: #0C0B0E; color: var(--white); padding: 15px; }
.input-row input { border-right: 0; }
.input-row button, .email-popup form button { border: 0; background: var(--white); color: var(--black); padding: 0 18px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.consent { display: flex; gap: 10px; margin-top: 15px; color: var(--muted); font-size: .73rem; }
.consent input { accent-color: var(--purple); flex: 0 0 auto; margin-top: 4px; }
.form-note, .popup-note { color: #77717B; font-size: .69rem; margin: 12px 0 0; }
.form-note[data-state="notice"], .popup-note[data-state="notice"] { color: var(--white); }
.form-note[data-state="error"], .popup-note[data-state="error"] { color: #FFB0B0; }
.signup input:disabled, .signup button:disabled, .email-popup input:disabled, .email-popup button:disabled { cursor: not-allowed; opacity: .58; }
.about { display: grid; grid-template-columns: .42fr 1fr; gap: 60px; align-items: start; }
.about-number { color: var(--purple); font-weight: 900; letter-spacing: .15em; font-size: .72rem; padding-top: 8px; }
.about > div:last-child > p:last-child { max-width: 760px; color: var(--muted); font-size: 1.06rem; }
.faq { border-top: 1px solid var(--line); }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 23px 0; }
summary { list-style: none; cursor: pointer; font-weight: 900; font-size: 1.04rem; }
summary::after { content: "+"; float: right; color: var(--purple); }
details[open] summary::after { content: "–"; }
details p { max-width: 690px; color: var(--muted); }
footer { border-top: 1px solid var(--line); max-width: var(--max); margin: 0 auto; padding: 50px 24px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; }
footer strong { letter-spacing: .15em; }
footer div > p { color: var(--muted); font-size: .78rem; }
.footer-navigation { display: grid; justify-items: end; gap: 16px; }
.policy-links, .socials { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 21px; }
.policy-links a, .socials a { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.policy-links a:hover, .policy-links a:focus-visible, .socials a:hover, .socials a:focus-visible { color: var(--white); }
footer > p { grid-column: 1/-1; color: #706B73; font-size: .7rem; }
.popup-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(5,5,5,.76); backdrop-filter: blur(6px); }
.popup-backdrop[hidden] { display: none; }
.email-popup { width: min(470px, 100%); position: relative; padding: 38px; background: var(--panel); border: 1px solid rgba(111,53,245,.75); box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.email-popup:before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--purple); }
.popup-close { position: absolute; top: 10px; right: 12px; width: 42px; height: 42px; border: 0; background: transparent; color: var(--white); font-size: 1.8rem; cursor: pointer; }
.popup-close:hover, .popup-close:focus-visible { color: var(--purple); outline: 1px solid var(--purple); }
.email-popup h2 { font-size: clamp(2.4rem, 8vw, 3.8rem); }
.email-popup > p:not(.eyebrow) { color: var(--muted); margin: 20px 0 25px; }
.email-popup form { display: grid; }
.email-popup form input { width: 100%; }
.email-popup form button { min-height: 48px; margin-top: 10px; }
.cart-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(5,5,5,.72); backdrop-filter: blur(5px); }
.cart-backdrop[hidden] { display: none; }
.cart-drawer { width: min(470px, 100%); height: 100%; margin-left: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #0B0A0D; border-left: 1px solid rgba(111,53,245,.72); box-shadow: -22px 0 70px rgba(0,0,0,.55); }
.cart-header { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 28px; border-bottom: 1px solid var(--line); }
.cart-header .eyebrow { margin-bottom: 10px; }
.cart-header h2 { font-size: 2.65rem; }
.cart-close { width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; color: var(--white); font-size: 1.7rem; cursor: pointer; }
.cart-lines { overflow: auto; padding: 8px 28px; }
.cart-empty { color: var(--muted); }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-line h3 { margin-bottom: 6px; font-size: 1.06rem; letter-spacing: -.02em; }
.cart-line p { margin: 0; color: var(--muted); font-size: .76rem; }
.cart-line-actions { display: flex; align-items: center; gap: 8px; }
.cart-line-actions button { width: 30px; height: 30px; border: 1px solid var(--line); background: transparent; color: var(--white); cursor: pointer; }
.cart-line-actions button:disabled { cursor: wait; opacity: .45; }
.cart-line-actions button[data-remove-line] { width: auto; padding: 0 7px; color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.cart-summary { max-width: none; margin: 0; padding: 24px 28px 28px; display: grid; grid-template-columns: 1fr; gap: 13px; border-top: 1px solid var(--line); }
.cart-summary > div { display: flex; justify-content: space-between; gap: 20px; font-size: 1.08rem; }
.cart-promo, .cart-shipping, .cart-status { margin: 0; color: var(--muted); font-size: .72rem; }
.cart-status[data-state="error"] { color: #FF9C9C; }
.cart-status[data-state="notice"] { color: #D9CDFD; }
.policy-main { max-width: 920px; margin: 0 auto; padding: 72px 24px 110px; }
.policy-main .eyebrow { margin-bottom: 14px; }
.policy-main h1 { margin-bottom: 36px; font-size: clamp(3rem, 7vw, 5.7rem); }
.policy-body { color: #D4CFD7; }
.policy-body h2, .policy-body h3 { margin: 2.2rem 0 1rem; font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.1; text-transform: none; }
.policy-body p, .policy-body li { line-height: 1.72; }
.policy-body a { color: var(--white); text-decoration-color: var(--purple); }
.policy-loading { color: var(--muted); }
@media (max-width: 900px) {
  nav a:not(.nav-cta) { display: none; }
  .hero, .early-access { grid-template-columns: 1fr; }
  .hero { padding-top: 55px; gap: 42px; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid article:nth-child(2) { border-right: 0; }
  .category-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 22px; }
  .early-access { gap: 42px; }
  .brand-details { grid-template-columns: 1fr; padding: 38px; }
  .brand-details-copy h2 { max-width: 700px; }
  .brand-detail-images figure { height: 390px; }
  .drop-banner-copy { width: 65%; padding: 38px; }
}
@media (max-width: 600px) {
  .site-header { height: 68px; padding-inline: 18px; }
  .brand { gap: 7px; }
  .brand img { width: 112px; }
  .brand span { display: none; }
  .site-header nav { gap: 8px; }
  nav .nav-cta { white-space: nowrap; }
  nav .nav-cta { padding: 8px; font-size: .57rem; }
  .cart-trigger { padding: 7px; font-size: .57rem; }
  .hero, .section { padding-left: 18px; padding-right: 18px; }
  .hero { min-height: 0; padding-top: 50px; padding-bottom: 62px; }
  h1 { font-size: clamp(3.05rem, 14.5vw, 4rem); }
  h1 br { display: none; }
  .hero-visual { min-height: 460px; }
  .section { padding-top: 74px; padding-bottom: 74px; }
  .collection-grid, .category-grid, .about { grid-template-columns: 1fr; }
  .category-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .category-grid article:last-child { border-bottom: 0; }
  .early-access { padding-inline: 18px; }
  .input-row { grid-template-columns: 1fr; }
  .input-row input { border-right: 1px solid #3D3941; }
  .input-row button { min-height: 48px; }
  .signup, .email-popup { padding: 24px; }
  .buy-row { grid-template-columns: 1fr; }
  .cart-drawer { width: 100%; }
  .drop-banner { min-height: 430px; }
  .drop-banner:after { background: linear-gradient(180deg, rgba(5,5,5,.05) 25%, rgba(5,5,5,.92) 86%); }
  .drop-banner > img { object-position: 49% 50%; }
  .drop-banner-copy { width: 100%; min-height: 430px; padding: 28px; }
  .brand-details { padding: 28px 20px 44px; gap: 34px; }
  .brand-details-copy h2 { font-size: clamp(2.55rem, 12vw, 3.5rem); }
  .brand-detail-images { grid-template-columns: 1fr; }
  .brand-detail-images figure, .brand-detail-images figure:last-child { height: 350px; transform: none; }
  footer { grid-template-columns: 1fr; padding-inline: 18px; }
  .footer-navigation { justify-items: start; }
  .policy-links, .socials { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .collection-card, .product-frame img { transition: none; } }
