@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/bebas-neue-latin-400.woff2') format('woff2'); }
@font-face { font-family:'Knewave'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/knewave-latin-400.woff2') format('woff2'); }
body[data-page='home'] { --container:1120px; --bg:#0c0e12; --brand-cutout:polygon(0 0,100% 0,100% 32%,35% 32%,74% 100%,34% 100%); --brand-face:linear-gradient(145deg,#b2f8ff 0%,#63dcea 40%,#2e8eab 100%); background:var(--bg); }
body[data-page='home'] .site-header { border:0; background:#0c0e12f5; }
body[data-page='home'] .site-header:empty { min-height:76px; }
body[data-page='home'] .header-inner { min-height:76px; gap:28px; }
body[data-page='home'] .site-nav { gap:24px; }
body[data-page='home'] .site-nav a { padding-block:24px; }
.landing-page { padding-bottom:72px; overflow-x:clip; }
/* Shape language for the feature previews and the closing invitation. */
.landing-shape { position:absolute; z-index:-1; pointer-events:none; transform:translate3d(0,var(--section-drift,0px),0) rotate(var(--shape-turn,0deg)); filter:drop-shadow(0 12px 30px #38c5da20); }
.landing-shape::before { content:''; position:absolute; inset:0; border-radius:32px; clip-path:var(--brand-cutout); background:var(--shape-face,var(--brand-face)); }
.landing-shape::after { content:''; position:absolute; inset:0; clip-path:polygon(35% 32%,47% 32%,86% 100%,74% 100%); background:linear-gradient(150deg,#58d3e466,#123a4d); }
.landing-page .btn { border-radius:999px; min-height:48px; padding:11px 24px; font-size:12px; gap:20px; }
/* Keep the gradient and opaque base in both states; only interpolate the color. */
.landing-page .btn-primary { border-color:#a5f3fc; background-color:var(--cyan); background-image:linear-gradient(180deg,#ffffff40,#ffffff00); box-shadow:inset 0 1px 0 #e4fdff80,0 0 18px #4ddcf226; transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s; }
.landing-page .btn-primary:is(:hover,:focus-visible) { background-color:#a5f3fc; box-shadow:inset 0 1px 0 #fff9,0 0 24px #4ddcf24d; }
.landing-page .btn-secondary:is(:hover,:focus-visible) { border-color:#6cdfed; box-shadow:0 0 14px #4ddcf21a; }
.landing-page .overline { font-size:10px; letter-spacing:.13em; }
.landing-page .overline::before { content:''; display:inline-block; width:6px; height:6px; margin-right:9px; vertical-align:1px; background:var(--cyan); border-radius:50%; }
.landing-page .overline::before { box-shadow:0 0 9px #61dbea70; }

/* One silhouette, one graphic shape, one shared baseline. */
.store-hero { position:relative; isolation:isolate; overflow:hidden; height:600px; background:#0e1116; border-radius:6px; }
.store-hero::before { content:''; position:absolute; inset:0 0 0 42%; background:radial-gradient(ellipse at 58% 40%,#319eaf1c,transparent 68%); pointer-events:none; }
.hero-copy { position:relative; z-index:3; width:44%; padding:80px 0 0 40px; }
.hero-copy>.eyebrow { color:var(--muted); font-size:9px; letter-spacing:.15em; }
.hero-copy h1 { margin-top:24px; font-family:'Bebas Neue',var(--display); font-weight:400; font-size:132px; line-height:.83; text-wrap:nowrap; letter-spacing:-.025em; }
.hero-title-brand { display:block; }
.hero-title-row { display:flex; align-items:center; gap:20px; margin-top:5px; }
.hero-title-accent { position:relative; z-index:1; display:block; font:400 43px/.97 'Knewave',var(--display); color:#80effb; letter-spacing:-.045em; transform:rotate(-7deg); transform-origin:center; text-shadow:0 0 18px #4ddcf238; }
.hero-title-store { font-size:116px; letter-spacing:-.03em; }
.hero-copy>p { max-width:300px; margin-top:26px; font-size:13px; line-height:1.75; }
.hero-copy .hero-actions { margin-top:26px; }
.hero-copy .btn { min-width:174px; }
.hero-story-link { display:inline-flex; align-items:center; gap:12px; min-height:48px; font-size:12px; color:var(--soft); }
.hero-story-link:hover { color:var(--cyan); }
.hero-art { position:absolute; z-index:1; inset:0 0 0 44%; }
.hero-brand-shape { position:absolute; top:93px; left:54px; width:710px; height:430px; transform:rotate(13deg); filter:drop-shadow(0 0 26px #4edbed3d); }
.hero-brand-shape::before { content:''; display:block; width:100%; height:100%; border-radius:58px; background:var(--brand-face); clip-path:var(--brand-cutout); }
.hero-character { position:absolute; width:625px; max-width:none; left:-24px; bottom:-95px; filter:saturate(.65); }
.hero-art-label { position:absolute; right:24px; bottom:18px; z-index:2; color:#c2c9cf; font-size:9px; letter-spacing:.16em; }
.hero-art::after { content:''; position:absolute; inset:82% 0 0; background:linear-gradient(transparent,#0e1116); pointer-events:none; }
.landing-index { display:flex; align-items:center; gap:28px; padding:22px 0; border-bottom:1px solid #20252c; }
.index-label { margin-right:auto; color:var(--muted); font-size:9px; letter-spacing:.14em; }
.landing-index a { display:inline-flex; align-items:center; gap:9px; min-height:48px; font-size:12px; color:var(--soft); }
.landing-index a>span { color:var(--cyan); font-size:10px; }
.landing-index a:hover { color:var(--text); }

/* A short introduction gives the collection a story before the product details. */
.landing-intro { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:96px; padding-block:96px; border-bottom:1px solid #20252c; }
.landing-intro h2 { margin-top:20px; font-size:72px; line-height:.98; }
.landing-intro h2>span { color:var(--cyan); }
.intro-copy { max-width:450px; }
.intro-copy p { font-size:15px; line-height:1.85; }
.intro-copy>span { display:block; margin-top:24px; font-size:11px; letter-spacing:.06em; color:var(--text); }

/* Each featured product has its own composition, with a shared copy rhythm. */
.landing-collection { padding-top:80px; }
.collection-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:56px; }
.collection-heading h2 { margin-top:12px; font-size:54px; }
.collection-heading>p { max-width:330px; font-size:13px; line-height:1.8; }
.featured-index { color:var(--muted); font-size:10px; letter-spacing:.14em; }
.featured-buy { display:flex; align-items:center; gap:28px; margin-top:28px; }
.featured-buy strong { display:block; color:var(--text); font-size:24px; font-weight:500; letter-spacing:-.035em; line-height:1.2; }
.featured-buy small { display:block; margin-top:5px; font-size:9px; color:var(--muted); }
.featured-docs { display:inline-flex; align-items:center; gap:10px; min-height:48px; margin-top:10px; font-size:11px; color:var(--soft); }
.featured-docs:hover { color:var(--cyan); }

/* The poster can overlap. The purchase information has its own space. */
.landing-subscription { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); margin-top:24px; padding:0; overflow:hidden; border-radius:8px; background:#161b22; }
.subscription-poster { position:relative; isolation:isolate; min-height:580px; overflow:hidden; }
.subscription-poster h2 { position:relative; z-index:2; max-width:320px; margin:32px 32px 0; font-size:78px; line-height:.96; letter-spacing:-.02em; }
.subscription-poster h2>span { display:block; color:var(--cyan); }
.subscription-poster h2>span,.faq-poster h2>span { text-shadow:0 0 20px #4ddcf224; }
.subscription-poster::before,.subscription-poster::after { content:''; position:absolute; z-index:-1; top:12px; width:145px; height:4px; border-radius:50%; background:#a3f3ff; box-shadow:0 0 14px #68e7ff99,0 0 40px 10px #4dc9e02e; pointer-events:none; }
.subscription-poster::before { left:-34px; transform:rotate(12deg); }
.subscription-poster::after { right:-34px; transform:rotate(-12deg); }
.subscription-scene { position:absolute; inset:auto 0 0; height:330px; }
.subscription-scene>img { position:absolute; width:600px; max-width:none; left:50%; bottom:0; transform:translateX(-50%); filter:saturate(.55); }
.subscription-offer { position:relative; align-self:center; padding:48px 56px; background:#161b22; }
.subscription-offer>.overline { color:var(--soft); font-size:9px; }
.subscription-offer>h3 { margin-top:18px; font:700 56px/1 var(--display); text-transform:uppercase; }
.subscription-offer>p { max-width:420px; margin-top:18px; font-size:14px; line-height:1.8; }
.subscription-offer .included-products { margin-top:20px; }
.subscription-offer .included-products>a { gap:12px; padding-block:10px; font-size:12px; border-color:#2a323b; }
.subscription-offer .included-products>a>span:last-child { font-size:16px; }
.subscription-buy { margin-top:22px; }
.subscription-buy .subscription-price { display:block; margin:0; font-size:38px; letter-spacing:-.04em; }
.subscription-buy>p { margin-top:4px; font-size:10px; }
.subscription-buy>.btn { min-width:240px; margin-top:24px; padding-inline:24px; }
.subscription-offer>.purchase-footnote { display:block; margin-top:12px; font-size:9px; text-align:left; }

/* The same sidebar and content columns carry through the FAQ. */
.landing-help { padding:96px 0 0; }
.landing-help .faq-preview-grid { grid-template-columns:320px minmax(0,1fr); gap:24px; }
.faq-poster { position:relative; isolation:isolate; overflow:hidden; min-height:478px; border:1px solid #303d46; border-radius:8px; background:radial-gradient(ellipse at 87% 78%,#4baebe32,transparent 49%),linear-gradient(155deg,#202932 0%,#171e26 46%,#11161c 100%); }
.faq-poster::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(125deg,transparent 37%,#9deff00b 37.2% 55%,transparent 55.2%),radial-gradient(ellipse at 12% 4%,#9be7f00e,transparent 52%); pointer-events:none; }
.faq-poster h2 { position:relative; z-index:2; padding:24px; font-size:65px; line-height:.97; text-wrap:nowrap; letter-spacing:-.02em; }
.faq-poster h2>span { display:block; color:var(--cyan); }
.faq-poster>img { position:absolute; z-index:3; width:226px; max-width:none; right:-7px; top:183px; filter:saturate(.78) brightness(1.08) drop-shadow(-12px 14px 24px #071b2580); }
.faq-poster::after { content:''; position:absolute; z-index:4; inset:auto 0 0; height:90px; background:linear-gradient(transparent,#11161c); pointer-events:none; }
.landing-help .faq-list { display:grid; gap:8px; margin:0; border:0; }
.landing-help .faq-item { border:0; background:#12151b; border-radius:5px; }
.landing-help .faq-item summary { min-height:59px; padding:16px 18px; font-size:13px; gap:16px; }
.landing-help .faq-item summary::before { content:'?'; display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; font-size:10px; font-weight:600; color:var(--cyan); border-radius:50%; background:#25333e; }
.landing-help .faq-item summary>span { margin-left:auto; }
.landing-help .faq-item[open]:not(.is-closing) { box-shadow:inset 2px 0 #61dbea,0 0 16px #4ddcf210; }
.landing-help .faq-item p { margin:0; padding:0 20px 20px 52px; font-size:12px; }
.faq-support { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:20px; }
.faq-support>p { max-width:240px; font-size:12px; }
.faq-support-links { display:flex; align-items:center; gap:16px; }
.faq-support-links .text-link { font-size:11px; gap:8px; }
.faq-support-links .btn { padding-inline:18px; font-size:11px; }
.landing-outro { position:relative; isolation:isolate; overflow:hidden; margin-top:80px; padding:72px 40px; text-align:center; border-top:1px solid #20252c; }
.outro-shape-left { --shape-turn:16deg; width:590px; height:340px; left:-300px; top:26px; opacity:.85; mask-image:linear-gradient(to right,#000 35%,transparent 95%); }
.outro-shape-right { --shape-turn:196deg; width:590px; height:340px; right:-300px; bottom:0; opacity:.8; mask-image:linear-gradient(to left,#000 35%,transparent 95%); }
.landing-outro h2 { margin-top:22px; font-size:100px; line-height:.9; }
.landing-outro h2>span { color:var(--cyan); }
.landing-outro>p { margin-top:24px; font-size:14px; }
.outro-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px 28px; margin-top:28px; }
.outro-contact { display:inline-flex; align-items:center; min-height:48px; max-width:100%; font-size:12px; color:var(--soft); overflow-wrap:anywhere; }
.outro-contact:hover { color:var(--cyan); }
body[data-page='home'] .site-footer { border:0; background:var(--bg); }
body[data-page='home'] .footer-main { border-top:1px solid #20252c; padding-block:40px; gap:40px; }
body[data-page='home'] .footer-bottom { border-color:#20252c; }
.landing-page .reveal.is-visible { animation:landing-arrive .55s var(--ease) both; }
@keyframes landing-arrive { from { opacity:.94; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

@media(max-width:1150px) {
  body[data-page='home'] .header-inner { gap:20px; }
  body[data-page='home'] .site-nav { gap:18px; }
  .hero-copy { padding-left:32px; }
  .hero-copy h1 { font-size:118px; }
  .hero-title-store { font-size:102px; }
  .hero-title-accent { font-size:38px; }
  .hero-character { left:-50px; }
  .landing-intro { gap:48px; }
  .landing-intro h2 { font-size:64px; }
  .featured-buy { gap:20px; }
  .subscription-offer { padding:40px 36px; }
  .subscription-offer>h3 { font-size:48px; }
  .landing-help .faq-preview-grid { grid-template-columns:290px minmax(0,1fr); gap:20px; }
  .subscription-poster h2 { font-size:60px; }
  .faq-poster h2 { font-size:58px; }
  .faq-support { align-items:start; flex-direction:column; gap:8px; }
  .faq-support>p { max-width:none; }
}
@media(max-width:900px) {
  body[data-page='home'] .site-header:empty { min-height:72px; }
  body[data-page='home'] .header-inner { min-height:72px; }
  body[data-page='home'] .site-nav { gap:0; }
  body[data-page='home'] .site-nav a { padding-block:16px; }
  .store-hero { height:540px; }
  .hero-copy { padding:70px 0 0 28px; width:48%; }
  .hero-copy h1 { font-size:104px; }
  .hero-title-row { gap:14px; }
  .hero-title-accent { font-size:32px; }
  .hero-title-store { font-size:87px; }
  .hero-copy>p { max-width:245px; font-size:12px; }
  .hero-art { left:45%; }
  .hero-character { width:530px; left:-72px; bottom:-45px; }
  .hero-brand-shape { left:20px; top:100px; width:580px; height:370px; }
  .hero-art-label { display:none; }
  .hero-copy .hero-actions { gap:8px 20px; }
  .landing-intro { padding-block:72px; gap:36px; }
  .landing-intro h2 { font-size:56px; }
  .intro-copy p { font-size:13px; }
  .collection-heading { align-items:start; flex-direction:column; gap:12px; }
  .collection-heading>p { max-width:none; }
  .collection-heading { margin-bottom:40px; }
  .landing-subscription { grid-template-columns:1fr 1fr; }
  .subscription-poster { min-height:540px; }
  .subscription-poster h2 { font-size:60px; }
  .subscription-scene>img { width:450px; }
  .subscription-offer { padding:32px 24px; align-self:center; }
  .subscription-offer>h3 { font-size:40px; }
  .subscription-offer>p { font-size:12px; }
  .subscription-buy .subscription-price { font-size:30px; }
  .subscription-buy>.btn { min-width:0; width:100%; }
  .landing-help .faq-preview-grid { grid-template-columns:240px minmax(0,1fr); gap:20px; }
  .faq-poster { min-height:490px; }
  .faq-poster h2 { font-size:48px; padding:22px 18px; }
  .faq-poster>img { width:225px; right:-18px; top:156px; }
  .landing-help .faq-item summary { font-size:12px; padding-inline:14px; gap:10px; }
  .landing-help .faq-item p { padding-left:18px; }
  .faq-support-links { flex-wrap:wrap; gap:4px 16px; }
}
@media(max-width:600px) {
  body[data-page='home'] .site-header:empty { min-height:68px; }
  .outro-shape-left { width:470px; height:290px; left:-340px; top:34px; opacity:.5; }
  .outro-shape-right { width:470px; height:290px; right:-330px; bottom:-16px; opacity:.45; }
  body[data-page='home'] .header-inner { min-height:68px; }
  .landing-page { padding-bottom:40px; }
  .store-hero { height:820px; }
  .hero-copy { width:100%; padding:38px 24px 0; }
  .hero-copy>.eyebrow { font-size:8px; }
  .hero-copy h1 { font-size:112px; margin-top:22px; }
  .hero-title-row { gap:16px; }
  .hero-title-accent { font-size:34px; }
  .hero-title-store { font-size:94px; }
  .hero-copy>p { max-width:260px; margin-top:20px; font-size:12px; }
  .hero-copy .hero-actions { margin-top:20px; }
  .hero-story-link { font-size:11px; gap:8px; }
  .hero-copy .hero-actions { gap:4px 16px; }
  .hero-art { inset:446px 0 0; }
  .hero-character { width:440px; left:calc(50% - 220px); bottom:-91px; }
  .hero-brand-shape { top:78px; left:40px; width:460px; height:270px; filter:drop-shadow(0 0 18px #4edbed38); }
  .hero-brand-shape::before { border-radius:32px; }
  .landing-index { padding:12px 0; gap:20px; justify-content:space-between; }
  .index-label { display:none; }
  .landing-index a { font-size:11px; gap:6px; }
  .landing-intro { grid-template-columns:1fr; gap:24px; padding-block:56px; }
  .landing-intro h2 { font-size:56px; margin-top:16px; }
  .intro-copy>span { margin-top:20px; font-size:10px; }
  .landing-collection { padding-top:56px; }
  .collection-heading { gap:12px; margin-bottom:36px; }
  .collection-heading h2 { font-size:40px; }
  .collection-heading>p { max-width:290px; font-size:12px; }
  .featured-index { font-size:9px; }
  .featured-buy { gap:24px; margin-top:24px; }
  .landing-subscription { grid-template-columns:1fr; }
  .subscription-poster { min-height:460px; }
  .subscription-poster h2 { max-width:260px; font-size:60px; margin:28px 24px; }
  .subscription-scene>img { width:450px; bottom:0; }
  .subscription-offer { padding:32px 24px; }
  .subscription-offer>h3 { font-size:44px; }
  .subscription-offer>p { max-width:300px; }
  .subscription-buy .subscription-price { font-size:34px; }
  .landing-help { padding-top:64px; }
  .landing-help .faq-preview-grid { grid-template-columns:1fr; gap:20px; }
  .faq-poster { min-height:360px; }
  .faq-poster h2 { font-size:56px; padding:24px; }
  .faq-poster>img { width:175px; top:180px; right:-8px; }
  .landing-help .faq-item summary { min-height:62px; padding-inline:14px; font-size:12px; }
  .faq-support { margin-top:20px; gap:12px; }
  .faq-support-links { width:100%; justify-content:space-between; }
  .landing-outro { margin-top:56px; padding:56px 16px 32px; }
  .landing-outro h2 { font-size:76px; }
  .landing-outro>p { font-size:12px; }
  .outro-actions { flex-direction:column; gap:12px; }
  .outro-contact { font-size:11px; }
  body[data-page='home'] .footer-main { gap:28px; }
}
@media(max-width:359px) {
  .hero-copy { padding-inline:20px; }
  .hero-copy h1 { font-size:96px; }
  .hero-title-accent { font-size:28px; }
  .hero-title-store { font-size:78px; }
  .landing-intro h2 { font-size:50px; }
  .featured-buy { gap:16px; }
  .featured-buy .btn { padding-inline:20px; gap:14px; }
  .subscription-poster h2 { font-size:60px; }
  .faq-poster h2 { font-size:48px; }
}
@media(prefers-reduced-motion:reduce) {
  .landing-page .reveal.is-visible { animation:none; }
  .landing-shape { transform:rotate(var(--shape-turn,0deg)); }
}