
:root{
  --navy:#06284e; --navy2:#0b3a6b; --blue:#23699f; --teal:#55c2c7;
  --ice:#f7fbff; --ice2:#eaf5fd; --ice3:#d7ebf8; --ink:#10283f;
  --muted:#657a8f; --gold:#c9a55e; --white:#fff; --line:#d7e7f2;
  --shadow:0 22px 60px rgba(6,40,78,.12);
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button{font:inherit}
.container{width:min(1180px,92%);margin:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.8rem;z-index:1000}
.topbar{background:var(--navy);color:#dcecf7;text-align:center;padding:.42rem 1rem;font-size:.78rem;letter-spacing:.05em}
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(215,231,242,.8)}
.nav{height:78px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;min-width:190px}
.brand img{width:54px;height:38px;object-fit:contain}
.brand-name{font-weight:800;letter-spacing:.08em;color:var(--navy);line-height:1}
.brand-name span{display:block;font-weight:500;font-size:.67rem;letter-spacing:.18em;margin-top:5px;color:#244964}
.navlinks{display:flex;align-items:center;gap:1.15rem;margin-left:auto;font-size:.86rem;color:#315069}
.navlinks a{position:relative;padding:.45rem 0}
.navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--blue);transition:right .25s ease}
.navlinks a:hover:after,.navlinks a.active:after{right:0}
.navlinks a.active{color:var(--navy);font-weight:700}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:999px;padding:.78rem 1.25rem;font-weight:750;font-size:.84rem;letter-spacing:.02em;border:1px solid transparent;transition:.2s ease}
.nav-cta,.btn-primary{background:var(--navy);color:#fff;box-shadow:0 10px 24px rgba(6,40,78,.16)}
.nav-cta:hover,.btn-primary:hover{transform:translateY(-1px);background:var(--navy2)}
.btn-secondary{background:#fff;color:var(--navy);border-color:#aacadd}
.menu-btn{display:none;margin-left:auto;border:0;background:transparent;font-size:1.45rem;color:var(--navy)}
.mobile-menu{display:none}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:800;color:var(--blue)}
h1,h2,h3{font-family:var(--serif);color:var(--navy);line-height:1.08;font-weight:500}
h1{font-size:clamp(2.75rem,6vw,5.6rem);margin:.9rem 0 1.2rem;letter-spacing:-.035em}
h2{font-size:clamp(2.05rem,4vw,3.45rem);margin:.7rem 0 1rem;letter-spacing:-.025em}
h3{font-size:1.45rem;margin:.3rem 0 .65rem}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:#4f687e;max-width:64ch}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero{position:relative;overflow:hidden;background:
 radial-gradient(circle at 85% 13%,rgba(85,194,199,.28),transparent 25%),
 radial-gradient(circle at 70% 72%,rgba(35,105,159,.12),transparent 28%),
 linear-gradient(135deg,#fff 0%,#f5fbff 52%,#dfedf8 100%);
 padding:6.2rem 0 5rem}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.45) 50%,transparent 57%);transform:translateX(-120%);animation:heroSweep 7s ease-in-out infinite}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:4rem;align-items:center;position:relative}
.hero-media{position:relative}
.product-stage{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);padding:16px;border-radius:28px;box-shadow:var(--shadow);transform:perspective(900px) rotateY(-2deg) rotateX(1deg);animation:float 5.5s ease-in-out infinite}
.product-stage img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:20px}
.floating-chip{position:absolute;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 12px 30px rgba(6,40,78,.13);border-radius:14px;padding:.75rem .9rem;font-size:.76rem;font-weight:750;color:var(--navy)}
.chip-1{left:-7%;bottom:12%}.chip-2{right:-5%;top:10%}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:2.2rem}
.trust{background:#fff;border:1px solid var(--line);border-radius:15px;padding:1rem .9rem;font-size:.79rem;font-weight:750;color:var(--navy);text-align:center}
.section{padding:5.8rem 0}
.section-soft{background:linear-gradient(180deg,#f8fcff,#eef7fd)}
.section-navy{background:var(--navy);color:#dcebf7}
.section-navy h2,.section-navy h3{color:#fff}.section-navy .lead{color:#c5d8e8}.section-navy .eyebrow{color:#7ed4d7}
.section-head{max-width:750px;margin-bottom:2.7rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.65rem;box-shadow:0 10px 30px rgba(6,40,78,.055);transition:.25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(6,40,78,.1);border-color:#bad7e8}
.card p{color:var(--muted);font-size:.94rem}
.card-link{display:inline-flex;margin-top:.7rem;color:var(--blue);font-weight:800;font-size:.85rem}
.icon-round{width:44px;height:44px;border-radius:50%;background:var(--ice2);display:grid;place-items:center;color:var(--navy);margin-bottom:1rem;font-size:1.15rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.image-card{background:#fff;border:1px solid var(--line);padding:14px;border-radius:24px;box-shadow:var(--shadow)}
.image-card img{border-radius:18px;width:100%;object-fit:cover}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:1.4rem 0}
.spec{padding:.85rem 0;border-bottom:1px solid var(--line)}
.spec b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue)}
.pill-row{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.2rem 0}
.pill{background:var(--ice2);color:var(--navy);padding:.5rem .75rem;border-radius:999px;font-size:.78rem;font-weight:700}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.4rem}
.step-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;margin-bottom:.8rem}
.step p{color:var(--muted);font-size:.9rem}
.band{background:linear-gradient(135deg,var(--navy),#0f4e82);border-radius:26px;padding:2.4rem;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:2rem;overflow:hidden;position:relative}
.band:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-90px;top:-130px;border:1px solid rgba(255,255,255,.15)}
.band h2{color:#fff;margin-top:0}.band p{color:#cfe1ee;max-width:60ch}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin:.75rem 0}
summary{font-weight:800;color:var(--navy);cursor:pointer}
details p{color:var(--muted);margin:.7rem 0 0}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:2rem}
.kpi div{background:#fff;padding:1.35rem;text-align:center}.kpi b{display:block;color:var(--navy);font-family:var(--serif);font-size:1.55rem}.kpi span{font-size:.78rem;color:var(--muted)}
.watch-teaser{background:linear-gradient(135deg,#061a32,#0c3158);border-radius:26px;padding:2.2rem;color:#ddecf7;display:grid;grid-template-columns:1fr .65fr;gap:2rem;align-items:center}
.watch-teaser h2{color:#fff}.watch-orbit{min-height:230px;display:grid;place-items:center}
.watch-orbit svg{max-width:230px}
.footer{background:#061c36;color:#c9d9e6;padding:3.8rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,.7fr);gap:2rem}
.footer .brand-name{color:#fff}.footer h4{color:#fff;margin:0 0 .8rem;font-size:.88rem}
.footer a{display:block;color:#bed0dd;font-size:.84rem;margin:.45rem 0}
.footer a:hover{color:#fff}.footer p{font-size:.84rem;color:#9fb4c5}.footer-fine{border-top:1px solid rgba(255,255,255,.12);margin-top:2.3rem;padding-top:1.4rem;font-size:.72rem;color:#8da4b7}
.fab{position:fixed;right:1.2rem;bottom:1.2rem;z-index:70;background:var(--navy);color:#fff;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 28px rgba(6,40,78,.25);font-weight:800}

/* Intro reveal */
.intro{position:fixed;inset:0;background:
 radial-gradient(circle at 50% 35%,rgba(85,194,199,.18),transparent 30%),
 linear-gradient(145deg,#fff,#eaf5fd);z-index:999;display:grid;place-items:center;transition:opacity .65s ease,visibility .65s ease}
.intro.hide{opacity:0;visibility:hidden}
.intro-inner{text-align:center;position:relative;width:min(520px,85vw)}
.intro-logo{width:min(310px,70vw);margin:auto;opacity:0;transform:translateY(14px) scale(.96);animation:introLogo .8s .12s cubic-bezier(.2,.8,.2,1) forwards}
.intro-line{height:1px;background:linear-gradient(90deg,transparent,var(--blue),var(--teal),transparent);width:0;margin:1.1rem auto;animation:lineGrow .75s .45s ease forwards}
.intro-copy{font-family:var(--serif);color:var(--navy);letter-spacing:.08em;opacity:0;animation:fadeUp .7s .72s ease forwards}
.intro-spark{position:absolute;width:8px;height:8px;right:18%;top:16%;background:#fff;transform:rotate(45deg);box-shadow:0 0 18px 5px rgba(85,194,199,.6);animation:spark 1.2s .35s ease both}
.page-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}.page-reveal.visible{opacity:1;transform:none}

@keyframes introLogo{to{opacity:1;transform:none}}
@keyframes lineGrow{to{width:82%}}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes spark{0%{opacity:0;transform:translate(-20px,20px) rotate(45deg) scale(.5)}50%{opacity:1}100%{opacity:0;transform:translate(65px,-65px) rotate(45deg) scale(1.15)}}
@keyframes float{50%{transform:perspective(900px) rotateY(1deg) rotateX(-1deg) translateY(-8px)}}
@keyframes heroSweep{0%,45%{transform:translateX(-120%)}65%,100%{transform:translateX(120%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{50%{opacity:.45}}
@media(max-width:980px){
 .navlinks,.nav-cta{display:none}.menu-btn{display:block}
 .mobile-menu.open{display:grid;position:absolute;top:78px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:1rem 4%;gap:.65rem}
 .mobile-menu a{padding:.65rem;color:var(--navy);font-weight:700}
 .hero-grid,.split{grid-template-columns:1fr}.hero-media{max-width:680px;margin:auto}
 .cards{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}
 .chip-1{left:2%}.chip-2{right:2%}
}
@media(max-width:640px){
 .hero{padding:4.8rem 0 3.8rem}.cards,.steps,.trust-row,.spec-grid,.kpi{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr}.band{display:block}.band .btn{margin-top:1rem}
 .watch-teaser{grid-template-columns:1fr}.floating-chip{display:none}
 h1{font-size:2.9rem}.brand img{width:46px}.brand{min-width:auto}
}
@media(prefers-reduced-motion:reduce){
 *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
 .intro{display:none}.page-reveal{opacity:1;transform:none}
}


/* Etsy collection + product pages */
.collection-hero{position:relative;overflow:hidden;padding:6rem 0 5.2rem;background:radial-gradient(circle at 82% 18%,rgba(85,194,199,.25),transparent 25%),linear-gradient(135deg,#fff,#f4fbff 58%,#dfeef8)}
.collection-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 41%,rgba(255,255,255,.52) 50%,transparent 59%);transform:translateX(-120%);animation:heroSweep 8s ease-in-out infinite;pointer-events:none}
.collection-hero-grid{display:grid;grid-template-columns:1fr .92fr;gap:4rem;align-items:center;position:relative;z-index:1}
.editorial-stack{height:560px;position:relative;perspective:1100px}
.editorial-card{position:absolute;display:block;overflow:hidden;border-radius:24px;background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 28px 70px rgba(6,40,78,.16)}
.editorial-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.editorial-card:hover img{transform:scale(1.035)}
.editorial-main{inset:5% 12% 8% 4%;transform:rotate(-2deg);animation:editorialFloat 6s ease-in-out infinite}
.editorial-main span{position:absolute;left:1.2rem;bottom:1.2rem;background:rgba(6,40,78,.88);color:#fff;padding:.55rem .75rem;border-radius:999px;font-size:.7rem;letter-spacing:.12em}
.editorial-small{width:34%;height:34%;border-radius:18px}.editorial-small.one{right:0;top:1%;transform:rotate(4deg)}.editorial-small.two{right:-2%;bottom:0;transform:rotate(-4deg)}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.collection-grid.four-grid{grid-template-columns:repeat(4,1fr);gap:18px}
.collection-grid.four-grid .collection-body{padding:1.15rem}
.collection-grid.four-grid .collection-body h3{font-size:1.08rem}
.collection-card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 14px 38px rgba(6,40,78,.07);transition:transform .3s ease,box-shadow .3s ease}
.collection-card:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(6,40,78,.13)}
.collection-image{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ice2)}
.collection-image:after{content:"";position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.45) 50%,transparent 58%);transform:translateX(-90%) rotate(8deg);transition:transform .8s ease}
.collection-card:hover .collection-image:after{transform:translateX(90%) rotate(8deg)}
.collection-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.collection-card:hover .collection-image img{transform:scale(1.025)}
.collection-badge{position:absolute;z-index:2;top:1rem;left:1rem;background:rgba(255,255,255,.92);border:1px solid rgba(215,231,242,.9);color:var(--navy);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.5rem .7rem;border-radius:999px;backdrop-filter:blur(7px)}
.collection-body{padding:1.45rem}.collection-body h3{font-size:1.34rem}.collection-body p{color:var(--muted);font-size:.91rem}
.keyword-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 1.15rem}.keyword-chips span{font-size:.69rem;border:1px solid var(--line);color:#527089;padding:.34rem .5rem;border-radius:999px;background:var(--ice)}
.product-actions{display:flex;align-items:center;justify-content:space-between;gap:.9rem}.product-actions .btn{padding:.65rem .9rem;font-size:.76rem}.text-link{font-size:.78rem;font-weight:800;color:var(--blue)}
.product-detail-hero{padding:5.5rem 0 4.8rem;background:linear-gradient(135deg,#fff 0%,#f5fbff 60%,#e3f1f9 100%);overflow:hidden}
.product-detail-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:4rem;align-items:center}
.product-gallery{position:relative}.product-detail-image{padding:14px;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}.product-detail-image img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:20px}
.detail-watermark{text-align:center;letter-spacing:.24em;color:#7f9bb0;font-family:var(--serif);font-size:.73rem;margin-top:1rem}
.product-copy h1{font-size:clamp(2.45rem,4.7vw,4.7rem)}.product-copy>p:not(.lead):not(.market-note){color:#5f7589;max-width:62ch}.market-note{margin-top:1rem;font-size:.78rem;color:#71879a}
.detail-specs .spec{padding:1rem 0}.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.mini-product{display:grid;grid-template-columns:150px 1fr;gap:1.2rem;align-items:center;border:1px solid var(--line);border-radius:20px;padding:.8rem;background:#fff;transition:.25s ease}.mini-product:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(6,40,78,.08)}.mini-product img{width:150px;height:120px;object-fit:cover;border-radius:14px}.mini-product span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:800;display:block;margin-bottom:.35rem}.mini-product strong{font-family:var(--serif);font-size:1.05rem;color:var(--navy);line-height:1.25;display:block}
.home-products .collection-body{padding:1.2rem}.home-products .collection-body h3{font-size:1.18rem}
@keyframes editorialFloat{50%{transform:rotate(.5deg) translateY(-9px)}}
@media(max-width:980px){.collection-hero-grid,.product-detail-grid{grid-template-columns:1fr}.editorial-stack{height:500px;max-width:700px;width:100%;margin:auto}.collection-grid{grid-template-columns:1fr 1fr}.mini-grid{grid-template-columns:1fr}}
@media(max-width:640px){.collection-grid{grid-template-columns:1fr}.editorial-stack{height:390px}.editorial-main{inset:3% 8% 5% 0}.editorial-small{width:32%;height:30%}.product-actions{align-items:flex-start;flex-direction:column}.mini-product{grid-template-columns:105px 1fr}.mini-product img{width:105px;height:96px}}

@media(max-width:1100px){.collection-grid.four-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.collection-grid.four-grid{grid-template-columns:1fr}}

/* V7 premium motion polish — layout and content unchanged */
.site-header{animation:headerSettle .7s cubic-bezier(.2,.75,.25,1) both}
.brand img{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.brand:hover img{transform:translateY(-1px) scale(1.025);filter:drop-shadow(0 8px 18px rgba(9,62,110,.14))}
.intro-logo{filter:drop-shadow(0 18px 42px rgba(6,40,78,.12));will-change:transform,opacity}
.intro-inner:after{content:"";position:absolute;inset:7% 12% 28%;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.78) 49%,transparent 60%);transform:translateX(-125%) skewX(-8deg);animation:introGlint 1.15s .5s cubic-bezier(.25,.65,.3,1) both}
.page-reveal{transform:translateY(18px) scale(.995);filter:blur(2px);transition:opacity .72s ease,transform .78s cubic-bezier(.2,.75,.2,1),filter .72s ease}
.page-reveal.visible{transform:none;filter:none}
.product-stage,.image-card,.collection-card,.editorial-card{will-change:transform}
.product-stage:hover{transform:perspective(900px) translateY(-5px) rotateX(.6deg);transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.btn{position:relative;overflow:hidden;isolation:isolate}.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 50%,transparent 75%);transform:translateX(-145%);transition:transform .65s ease;pointer-events:none}.btn:hover:after{transform:translateX(145%)}
@keyframes headerSettle{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes introGlint{0%{opacity:0;transform:translateX(-125%) skewX(-8deg)}25%{opacity:.72}100%{opacity:0;transform:translateX(125%) skewX(-8deg)}}
@media(prefers-reduced-motion:reduce){.site-header,.intro-inner:after{animation:none!important}.page-reveal{filter:none!important}.brand img,.product-stage,.btn:after{transition:none!important}}
