:root{
  --cream:#F3EFE6;
  --cream-2:#EAE3D4;
  --copper:#C17A4E;
  --copper-dark:#A46842;
  --copper-cta:#96603A;
  --copper-cta-dark:#7C4E2E;
  --teal-navbar:#16302C;
  --teal-accent:#1F8F7D;
  --teal-accent-dark:#1A7A6A;
  --charcoal:#453F38;
  --charcoal-dark:#3B3630;
  --offwhite:#F5F2EC;
  --muted:#9C988E;
  --ink:#453F38;
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* ---------- MOTION: scroll reveal + stagger ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.stagger>.reveal:nth-child(1){transition-delay:0ms;}
.stagger>.reveal:nth-child(2){transition-delay:70ms;}
.stagger>.reveal:nth-child(3){transition-delay:140ms;}
.stagger>.reveal:nth-child(4){transition-delay:210ms;}
.stagger>.reveal:nth-child(5){transition-delay:280ms;}
.stagger>.reveal:nth-child(6){transition-delay:350ms;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Karla', sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3,.display{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  letter-spacing:0.01em;
  margin:0;
  color:var(--ink);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section[id],footer[id]{scroll-margin-top:84px;}
section{padding:96px 0;}
@media (max-width:720px){ section{padding:64px 0;} }

/* ---------- NAV ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(22,48,44,0.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(245,242,236,0.12);
  transition:box-shadow .3s ease;
}
header.scrolled{box-shadow:0 10px 28px rgba(20,18,15,0.22);}
nav.wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
}
.logo{height:28px;}
.logo img{height:100%;display:block;}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-links{display:flex;gap:24px;align-items:center;}
.nav-links a{font-size:15px;color:var(--offwhite);position:relative;padding-bottom:2px;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--copper);transition:right .25s cubic-bezier(.16,1,.3,1);}
.nav-links a:hover{color:var(--copper);}
.nav-links a:hover::after{right:0;}
.lang-toggle{
  font-family:'Karla',sans-serif;font-size:13px;font-weight:600;color:var(--offwhite);
  border:1px solid rgba(245,242,236,0.4);border-radius:20px;
  padding:5px 13px;background:none;cursor:pointer;line-height:1;
  transition:background .2s ease, border-color .2s ease;
}
.lang-toggle:hover{background:rgba(245,242,236,0.12);border-color:var(--offwhite);}
.nav-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:0;width:32px;height:32px;position:relative;}
.nav-menu-btn span{position:absolute;left:5px;right:5px;height:2px;background:var(--offwhite);border-radius:2px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, top .3s cubic-bezier(.16,1,.3,1);}
.nav-menu-btn span:nth-child(1){top:10px;}
.nav-menu-btn span:nth-child(2){top:16px;}
.nav-menu-btn span:nth-child(3){top:22px;}
.nav-menu-btn.open span:nth-child(1){top:16px;transform:rotate(45deg);}
.nav-menu-btn.open span:nth-child(2){opacity:0;}
.nav-menu-btn.open span:nth-child(3){top:16px;transform:rotate(-45deg);}
@media (max-width:720px){
  .nav-links{position:absolute;top:100%;left:0;right:0;background:var(--teal-navbar);flex-direction:column;
    align-items:flex-start;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease;
    border-bottom:1px solid rgba(245,242,236,0.12);}
  .nav-links.open{max-height:320px;}
  .nav-links a{padding:16px 28px;width:100%;border-top:1px solid rgba(245,242,236,0.12);}
  .nav-links a::after{display:none;}
  .nav-menu-btn{display:block;}
}
@media (prefers-reduced-motion: reduce){
  .nav-menu-btn span{transition:none;}
}

/* ---------- SHARED SECTION WATERMARK (why + preorder bands) ---------- */
.section-watermark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:0;overflow:hidden;
}
.section-watermark img{width:65%;max-width:820px;height:auto;opacity:0.07;}

/* ---------- HERO ---------- */
.hero{position:relative;}
.hero-watermark{
  position:fixed;inset:0;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:10vh;
  pointer-events:none;z-index:0;overflow:hidden;
}
.hero-watermark img{
  width:100%;max-width:1300px;height:auto;object-fit:contain;opacity:0.09;
}
.hero .wrap{position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;
  padding-top:64px;padding-bottom:32px;
}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr;padding-top:36px;} }
.hero h1{font-size:52px;line-height:1.08;}
@media (max-width:560px){ .hero h1{font-size:38px;} }
.hero .sub{margin-top:20px;font-size:19px;color:var(--ink);max-width:46ch;}

.email-form{margin-top:34px;display:flex;flex-wrap:wrap;gap:0;max-width:440px;border:1px solid var(--charcoal);border-radius:6px;overflow:hidden;}
.email-form input[type="email"]{
  flex:1 1 200px;border:none;padding:15px 16px;font-family:'Karla',sans-serif;font-size:15px;
  background:var(--offwhite);color:var(--ink);min-width:0;
}
.email-form input[type="email"]:focus{outline:none;}
.email-form button{
  border:none;background:var(--copper-cta);color:var(--offwhite);
  font-family:'Karla',sans-serif;font-weight:700;font-size:15px;
  padding:0 24px;cursor:pointer;transition:background .15s, transform .15s;
}
.email-form button:hover{background:var(--copper-cta-dark);}
.email-form button:active{transform:scale(.97);}
.email-form.on-accent{border-color:var(--offwhite);}
.form-msg{margin-top:10px;font-size:14px;min-height:20px;}
.form-msg.ok{color:var(--teal-accent-dark);font-weight:600;}
.form-msg.on-accent.ok{color:var(--offwhite);}
.hero-note{margin-top:10px;font-size:13.5px;color:var(--muted);}
.form-label{margin-top:26px;margin-bottom:0;font-weight:600;font-size:15.5px;color:var(--ink);}
.form-label+.email-form{margin-top:14px;}
.consent-note{margin-top:9px;font-size:12px;color:var(--muted);max-width:440px;}
.consent-note.on-accent{color:rgba(245,242,236,0.7);}
.hero-img{position:relative;display:flex;align-items:center;justify-content:center;padding:28px;}
.hero-img::before{
  content:"";position:absolute;inset:6% 10%;
  background:radial-gradient(closest-side, rgba(193,122,78,0.28), rgba(31,143,125,0.12) 60%, transparent 75%);
  filter:blur(28px);z-index:0;
}
.hero-img img{position:relative;z-index:1;margin:0 auto;filter:drop-shadow(0 24px 34px rgba(69,63,56,0.28));}

@media (prefers-reduced-motion: no-preference){
  .hero h1,.hero .sub,.hero .form-label,.hero .email-form,.hero .consent-note,.hero .form-msg,.hero .hero-note{
    opacity:0;transform:translateY(20px);
    animation:heroIn .8s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero h1{animation-delay:.05s;}
  .hero .sub{animation-delay:.18s;}
  .hero .form-label{animation-delay:.26s;}
  .hero .email-form{animation-delay:.34s;}
  .hero .consent-note{animation-delay:.38s;}
  .hero .form-msg{animation-delay:.42s;}
  .hero .hero-note{animation-delay:.48s;}
  @keyframes heroIn{to{opacity:1;transform:translateY(0);}}

  .hero-img img{animation:heroFloat 6s ease-in-out infinite;}
  @keyframes heroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
  .hero-img::before{animation:glowPulse 8s ease-in-out infinite;}
  @keyframes glowPulse{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
}

/* ---------- WHY (dark band) ---------- */
.why{
  background:var(--charcoal);color:var(--offwhite);position:relative;
  clip-path:polygon(0 32px, 100% 0, 100% calc(100% - 32px), 0 100%);
}
.why .wrap{position:relative;z-index:1;}
.why h2{color:var(--offwhite);font-size:34px;max-width:20ch;}
.why-grid{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;}
@media (max-width:640px){ .why-grid{grid-template-columns:1fr;} }
.why-item{display:flex;gap:16px;align-items:flex-start;border-top:1px solid rgba(251,249,244,0.18);padding-top:18px;}
.why-item .mark{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal-accent);
  display:flex;align-items:center;justify-content:center;color:var(--offwhite);font-size:14px;font-weight:700;
}
.why-item p{margin:0;font-size:16.5px;color:rgba(245,242,236,0.85);}

/* ---------- HOW IT WORKS ---------- */
.how h2{font-size:34px;}
.how .lead{color:var(--ink);margin-top:12px;max-width:52ch;font-size:17.5px;}
.steps{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
@media (max-width:800px){ .steps{grid-template-columns:1fr;} }
.step{position:relative;padding-left:52px;}
.step .num{position:absolute;left:0;top:0;font-family:'Oswald',sans-serif;font-weight:700;font-size:28px;color:var(--teal-accent);}
.step h3{font-size:19px;margin-bottom:8px;}
.step p{margin:0;color:var(--ink);font-size:15.5px;}

/* ---------- GALLERY ---------- */
.gallery{background:var(--cream-2);}
.gallery .wrap>h2{font-size:34px;margin-bottom:44px;}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:800px){ .gallery-grid{grid-template-columns:1fr;} }
.gallery-item{background:var(--offwhite);border-radius:8px;overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;}
.gallery-item:hover{transform:translateY(-6px);box-shadow:0 20px 36px rgba(69,63,56,0.18);}
.gallery-item .img-box{height:280px;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;}
.gallery-item img{max-height:100%;width:auto;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.gallery-item:hover img{transform:scale(1.05);}
.gallery-item .cap{padding:14px 16px;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:0.03em;color:var(--muted);}

/* ---------- SPECS ---------- */
.specs h2{font-size:34px;}
.specs-body{
  margin-top:40px;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;row-gap:0;
  grid-template-areas:"title title" "table notes";
}
.specs-body h2{grid-area:title;}
.specs-body .spec-table{grid-area:table;margin-top:40px;}
.specs-body .specs-notes{grid-area:notes;margin-top:40px;}
@media (max-width:800px){
  .specs-body{grid-template-columns:1fr;grid-template-areas:"title" "table" "notes";}
}
.spec-table{border-top:1px solid rgba(51,42,33,0.15);}
.spec-row{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid rgba(51,42,33,0.15);}
.spec-row .k{color:var(--muted);font-size:15px;}
.spec-row .v{font-weight:600;text-align:right;}
.specs-note{color:var(--ink);font-size:16px;}
.specs-note strong{color:var(--copper-dark);}

/* ---------- PREORDER BANNER ---------- */
.preorder{
  background:linear-gradient(155deg, var(--teal-accent) 0%, var(--teal-accent-dark) 100%);
  color:var(--offwhite);position:relative;
  clip-path:polygon(0 32px, 100% 0, 100% calc(100% - 32px), 0 100%);
}
.preorder .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
.preorder h2{color:var(--offwhite);font-size:32px;max-width:24ch;}
.preorder p{margin:0;color:rgba(245,242,236,0.88);max-width:48ch;font-size:16.5px;}
.preorder p a{color:var(--offwhite);text-decoration:underline;text-underline-offset:2px;}
.preorder p a:hover{color:var(--copper);}
.preorder .email-form{max-width:440px;width:100%;}

/* ---------- ABOUT CREATOR ---------- */
.about .wrap{display:grid;grid-template-columns:0.8fr 1.2fr;gap:52px;align-items:center;}
@media (max-width:800px){ .about .wrap{grid-template-columns:1fr;} }
.about-photo{
  aspect-ratio:1/1;border-radius:8px;overflow:hidden;
  background:linear-gradient(145deg, var(--cream-2), var(--copper) 220%);
  display:flex;align-items:center;justify-content:center;color:var(--offwhite);
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;text-align:center;padding:20px;
}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about h2{font-size:30px;}
.about p{color:var(--ink);margin-top:16px;font-size:17px;max-width:56ch;}
.about .sign{margin-top:20px;font-family:'Oswald',sans-serif;font-weight:600;color:var(--copper-dark);}

/* ---------- SUPPORT ---------- */
.support{background:var(--cream-2);}
.support-body{
  display:grid;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:0;align-items:start;
  grid-template-areas:"title title" "main list";
}
.support-body h2{grid-area:title;}
.support-body .support-main{grid-area:main;margin-top:40px;}
.support-main>p:first-child{margin-top:0;}
.support-body .support-list{grid-area:list;margin-top:40px;}
@media (max-width:800px){
  .support-body{grid-template-columns:1fr;grid-template-areas:"title" "main" "list";}
}
.support h2{font-size:30px;}
.support p{color:var(--ink);margin-top:16px;font-size:16.5px;}
.support-btn{
  display:inline-block;margin-top:22px;background:var(--charcoal);color:var(--offwhite);
  padding:14px 28px;border-radius:6px;font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;
  border:none;cursor:pointer;transition:background .15s, transform .15s;
}
.support-btn:hover{background:var(--charcoal-dark);}
.support-btn:active{transform:scale(.97);}
.support-note{margin-top:12px;font-size:11px;color:var(--muted);}
.support-list{border-top:1px solid rgba(51,42,33,0.15);}
.support-list .row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(51,42,33,0.15);align-items:baseline;}
.support-list .row span{color:var(--copper-dark);font-weight:700;line-height:inherit;}
.support-list .row p{margin:0;}

/* ---------- FAQ ---------- */
.faq h2{font-size:34px;margin-bottom:40px;}
.faq-item{border-top:1px solid rgba(51,42,33,0.15);}
.faq-item:last-child{border-bottom:1px solid rgba(51,42,33,0.15);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;color:var(--ink);
}
.faq-q .plus{font-size:20px;color:var(--teal-accent);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.16,1,.3,1);}
.faq-a p{margin:0 0 22px;color:var(--ink);max-width:64ch;font-size:16px;}
.faq-q{transition:color .2s ease;}
.faq-q:hover{color:var(--copper-cta-dark);}

/* ---------- FOOTER ---------- */
footer{background:var(--charcoal);color:var(--offwhite);}
footer .wrap{padding-top:64px;padding-bottom:36px;}
.footer-top{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;}
@media (max-width:720px){ .footer-top{grid-template-columns:1fr;} }
footer .foot-logo{height:30px;margin-bottom:14px;}
footer .foot-logo img{height:100%;display:block;}
.foot-lead{color:rgba(245,242,236,0.8);margin-top:12px;max-width:40ch;font-size:15.5px;}
.foot-contact{font-size:15px;color:var(--muted);}
.foot-contact div{padding:8px 0;}
.foot-contact a:hover{color:var(--offwhite);}
.foot-social{display:flex;gap:16px;margin-top:18px;}
.foot-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(245,242,236,0.3);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  transition:background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.foot-social a img{display:block;}
.foot-social a:hover{background:var(--teal-accent);border-color:var(--teal-accent);transform:translateY(-3px);}
.foot-bottom{
  margin-top:52px;padding-top:22px;border-top:1px solid rgba(245,242,236,0.15);
  font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}