/* ==========================================================================
   MAGIC SWELL — Design System
   Dark, ocean-native, editorial. Typography: Unbounded + DM Sans.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap");

:root {
  /* —— palette —— */
  --abyss:      #04070C;
  --deep:       #07101A;
  --surface:    #0C1723;
  --surface-2:  #122132;
  --line:       #1E3148;
  --line-soft:  rgba(255, 255, 255, 0.08);
  --foam:       #F4F7FB;
  --mist:       #A6B4C6;
  --ink:        #6A7A90;

  --wave:       #00D4FF;      /* electric-cyan wave crest */
  --tide:       #00F0B5;      /* turquoise tide */
  --sunset:     #FF8A3C;      /* primary CTA */
  --sunset-deep:#E46A1A;

  /* —— type —— */
  --f-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --f-body:    "DM Sans", system-ui, -apple-system, sans-serif;

  /* —— spacing scale —— */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;

  /* —— layout —— */
  --maxw: 1280px;
  --radius-s: 6px;
  --radius:   14px;
  --radius-l: 26px;

  --shadow-crest: 0 40px 80px -30px rgba(0, 212, 255, 0.35);
  --shadow-deep:  0 28px 64px -24px rgba(0, 0, 0, 0.6);
}

/* —— reset —— */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--abyss);color:var(--foam);-webkit-text-size-adjust:100%}
body{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,212,255,.07), transparent 70%),
    radial-gradient(1000px 500px at -10% 30%, rgba(0,240,181,.05), transparent 70%),
    var(--abyss);
  color: var(--foam);
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul{list-style:none}

::selection{background:var(--wave);color:var(--abyss)}

/* —— typography —— */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;letter-spacing:-.01em;line-height:1.02}
h1{font-size:clamp(2.5rem, 6vw + .5rem, 5.75rem);letter-spacing:-.025em}
h2{font-size:clamp(2rem, 3.5vw + .5rem, 3.75rem);letter-spacing:-.02em}
h3{font-size:clamp(1.5rem, 2vw + .5rem, 2.25rem)}
h4{font-size:1.25rem;font-weight:600}

.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--f-body);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  font-size:.72rem;color:var(--wave);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--wave)}

.lead{font-size:1.15rem;color:var(--mist);max-width:56ch}
.tiny{font-size:.8rem;color:var(--ink);letter-spacing:.04em}

/* —— layout primitives —— */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-5)}
.section{padding:var(--s-9) 0}
.section-sm{padding:var(--s-8) 0}
.grid{display:grid;gap:var(--s-6)}

/* —— buttons —— */
.btn{
  --bg: var(--sunset);
  --fg: #0A0F17;
  display:inline-flex;align-items:center;gap:.55rem;
  padding: .95rem 1.65rem;
  font-family: var(--f-display);
  font-weight: 600; font-size: .88rem; letter-spacing:.04em;
  background: var(--bg); color: var(--fg);
  border-radius: 999px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s;
  position: relative;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 35px -18px rgba(255,138,60,.9)}
.btn:active{transform:translateY(0)}
.btn .arrow{transition:transform .3s}
.btn:hover .arrow{transform:translateX(4px)}

.btn-ghost{
  --bg: transparent; --fg: var(--foam);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover{border-color:var(--wave);color:var(--wave);box-shadow:none;transform:translateY(-2px)}

.btn-lg{padding:1.1rem 2rem;font-size:.95rem}

/* —— header —— */
.site-header{
  position:sticky;top:0;z-index:50;
  padding: var(--s-4) 0;
  background: rgba(4,7,12,.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}
.logo{display:inline-flex;align-items:center;gap:.75rem}
.logo img{
  height:38px;width:auto;
  /* invert source artwork (black text → white) */
  filter: invert(1) brightness(1.05);
}
.nav{display:flex;align-items:center;gap:var(--s-6)}
.nav a{
  font-family:var(--f-body);font-weight:500;font-size:.92rem;
  color:var(--mist);transition:color .2s;
  position:relative;
}
.nav a:hover{color:var(--foam)}
.nav a.active{color:var(--foam)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--wave)}

.hamburger{display:none;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px}
.hamburger span{display:block;width:16px;height:1.5px;background:var(--foam);position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--foam)}
.hamburger span::before{top:-5px}
.hamburger span::after{top:5px}

@media (max-width: 860px){
  .nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;padding:var(--s-4);background:var(--deep);border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:var(--s-3) 0;width:100%;border-bottom:1px solid var(--line-soft)}
  .hamburger{display:inline-flex}
}

/* —— hero —— */
.hero{
  position:relative;
  min-height: min(92vh, 820px);
  display:flex;align-items:end;
  padding: var(--s-9) 0 var(--s-8);
  overflow:hidden;isolation:isolate;
}
.hero__media{
  position:absolute;inset:0;z-index:-2;
}
.hero__media::after{
  /* darkening vignette so the text pops */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 70% at 50% 85%, rgba(4,7,12,0) 0%, rgba(4,7,12,.6) 55%, rgba(4,7,12,.95) 100%),
    linear-gradient(180deg, rgba(4,7,12,.55) 0%, rgba(4,7,12,.25) 40%, rgba(4,7,12,.95) 100%);
  pointer-events:none;
}
.hero__media svg{width:100%;height:100%;display:block}
.hero__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

.hero__content{position:relative;z-index:1;max-width:880px}
.hero__kicker{margin-bottom:var(--s-5)}
.hero h1{margin-bottom:var(--s-5)}
.hero h1 .accent{
  background: linear-gradient(100deg, var(--foam) 0%, var(--wave) 55%, var(--tide) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{font-size:clamp(1.05rem, 1vw + .8rem, 1.3rem);color:var(--mist);max-width:62ch;margin-bottom:var(--s-6)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--s-6);
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line-soft);
}
.hero__meta .cell{min-width:130px}
.hero__meta strong{
  display:block;font-family:var(--f-display);font-weight:600;font-size:1.45rem;color:var(--foam);
  letter-spacing:-.01em;
}
.hero__meta span{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink)}

/* —— marquee / scrolling tagline —— */
.marquee{
  overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding: var(--s-5) 0; background: linear-gradient(90deg, rgba(0,212,255,.04), transparent 30%, transparent 70%, rgba(0,240,181,.04));
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{display:flex;gap:var(--s-7);animation:scroll 38s linear infinite;width:max-content}
.marquee__item{
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem, 2vw, 1.75rem);
  color:var(--mist);text-transform:uppercase;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:var(--s-5);
}
.marquee__item::after{content:"~";color:var(--wave);font-style:italic;margin-left:var(--s-5)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* —— feature grid —— */
.features{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-5)}
.feature{
  grid-column: span 4;
  padding: var(--s-6);
  background: linear-gradient(165deg, var(--surface) 0%, var(--deep) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position:relative;overflow:hidden;
  transition: transform .4s, border-color .4s;
}
.feature:hover{transform:translateY(-4px);border-color:var(--wave)}
.feature .num{
  font-family:var(--f-display);font-weight:800;font-size:3.25rem;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.18);
  line-height:1;margin-bottom:var(--s-5);
}
.feature h3{margin-bottom:var(--s-3);font-size:1.5rem;color:var(--foam)}
.feature p{color:var(--mist);font-size:.97rem}
@media (max-width:900px){
  .feature{grid-column:span 12}
}

/* —— quote / tagline block —— */
.tagline{
  padding: var(--s-9) 0;
  text-align:center;
  background:
    radial-gradient(900px 300px at 50% 50%, rgba(0,212,255,.08), transparent 70%);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.tagline h2{max-width:22ch;margin:0 auto var(--s-5)}
.tagline p{max-width:58ch;margin:0 auto;color:var(--mist);font-size:1.1rem}

/* —— product showcase (home) —— */
.showcase{
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-7);align-items:center;
}
.showcase__media{
  aspect-ratio: 4/5;
  position:relative; overflow:hidden; border-radius:var(--radius-l);
  background:
    conic-gradient(from 180deg at 50% 60%, #04070C 0%, #0A1526 30%, #0F2638 55%, #05080E 100%),
    var(--deep);
  border:1px solid var(--line);
}
.showcase__media::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(50% 80% at 50% 55%, rgba(0,212,255,.22), transparent 70%),
    radial-gradient(80% 40% at 50% 0%, rgba(0,240,181,.10), transparent 70%);
  pointer-events:none;
}
.showcase__media svg{position:absolute;inset:0;width:100%;height:100%}

.showcase__body h2{margin-bottom:var(--s-5)}
.spec-list{margin-top:var(--s-6);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-5)}
.spec-list div{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--s-3);border-bottom:1px solid var(--line-soft)}
.spec-list span{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink)}
.spec-list strong{font-family:var(--f-display);font-weight:600;color:var(--foam);font-size:1.15rem}

@media (max-width:900px){
  .showcase{grid-template-columns:1fr}
}

/* —— footer —— */
.site-footer{
  background: linear-gradient(180deg, var(--deep), var(--abyss));
  border-top: 1px solid var(--line-soft);
  padding: var(--s-8) 0 var(--s-5);
  margin-top: var(--s-8);
}
.site-footer .cols{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:var(--s-6)}
.site-footer h5{
  font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--wave);margin-bottom:var(--s-4)
}
.site-footer a{display:block;color:var(--mist);font-size:.92rem;padding:4px 0;transition:color .2s}
.site-footer a:hover{color:var(--foam)}
.site-footer .logo img{height:32px;filter:invert(1) brightness(1.05)}
.site-footer .claim{color:var(--ink);font-size:.88rem;margin-top:var(--s-4);max-width:32ch}
.site-footer .bottom{
  margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-4);
  font-size:.82rem;color:var(--ink)
}
@media (max-width:800px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.site-footer .cols{grid-template-columns:1fr}}

/* —— page header (for non-home pages) —— */
.page-head{
  padding: calc(var(--s-8) + 40px) 0 var(--s-7);
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(0,212,255,.08), transparent 70%);
  text-align:center;
}
.page-head .eyebrow{margin-bottom:var(--s-4)}
.page-head h1{font-size:clamp(2.25rem, 4vw + .5rem, 4rem)}
.breadcrumb{margin-top:var(--s-5);font-size:.85rem;color:var(--ink);display:flex;justify-content:center;gap:.55rem}
.breadcrumb a:hover{color:var(--foam)}
.breadcrumb span{color:var(--line)}

/* —— product page —— */
.product{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s-8);padding-top:var(--s-7)}
.product__gallery{position:sticky;top:100px;align-self:start}
.product__frame{
  aspect-ratio: 1/1; width:100%;
  border-radius:var(--radius-l); border:1px solid var(--line);
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(0,212,255,.18), transparent 70%),
    linear-gradient(160deg, var(--deep), var(--surface-2));
  position:relative;overflow:hidden;
}
.product__frame svg{position:absolute;inset:0;width:100%;height:100%}
.product__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.product__thumbs button{
  aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--radius-s);
  background:var(--surface);
  transition:border-color .2s;
}
.product__thumbs button:hover,.product__thumbs button.active{border-color:var(--wave)}

.product__info h1{font-size:clamp(2rem,3vw+.5rem,2.75rem);margin-bottom:var(--s-4)}
.price{
  display:flex;align-items:baseline;gap:var(--s-3);
  margin:var(--s-5) 0 var(--s-3);
  font-family:var(--f-display);font-weight:800;
}
.price .amt{font-size:3rem;letter-spacing:-.02em;color:var(--foam)}
.price .tax{font-size:.8rem;font-weight:400;color:var(--ink);font-family:var(--f-body);letter-spacing:0}

.stock{display:inline-flex;align-items:center;gap:.55rem;color:var(--tide);font-size:.85rem;margin-bottom:var(--s-5)}
.stock::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--tide);box-shadow:0 0 12px var(--tide)}

.config{margin:var(--s-5) 0;padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.config h4{margin-bottom:var(--s-3);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.option-row{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4)}
.option{
  padding:.7rem 1.05rem;border:1px solid var(--line);border-radius:999px;
  font-size:.88rem;color:var(--mist);cursor:pointer;transition:all .2s;
}
.option:hover{border-color:var(--wave);color:var(--foam)}
.option.selected{background:var(--wave);color:var(--abyss);border-color:var(--wave)}

.buy-row{display:flex;gap:var(--s-3);margin:var(--s-5) 0}
.buy-row .btn{flex:1;justify-content:center}

.payments{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  padding: var(--s-4) 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  color:var(--ink);font-size:.8rem;
}
.pay-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .8rem;border:1px solid var(--line);border-radius:8px;
  font-size:.78rem;color:var(--mist);letter-spacing:.05em;
  background:var(--surface);
}
.pay-badge svg{width:18px;height:12px}

.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin:var(--s-5) 0}
.perks li{
  display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--mist);
  padding:var(--s-3);background:var(--surface);border-radius:var(--radius-s);border:1px solid var(--line-soft);
}
.perks strong{color:var(--foam);font-size:.9rem;font-family:var(--f-display);font-weight:600}
@media (max-width:900px){
  .product{grid-template-columns:1fr}
  .product__gallery{position:static}
  .perks{grid-template-columns:1fr}
}

/* —— tabbed section —— */
.tabs{display:flex;gap:var(--s-4);border-bottom:1px solid var(--line);margin:var(--s-6) 0 var(--s-5);overflow-x:auto}
.tabs button{
  padding:var(--s-3) 0;position:relative;color:var(--mist);font-family:var(--f-display);
  font-weight:500;font-size:.92rem;letter-spacing:.04em;white-space:nowrap;
}
.tabs button.active{color:var(--foam)}
.tabs button.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--wave)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeIn .4s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-4)}
.specs-grid > div{padding:var(--s-4) 0;border-top:1px solid var(--line-soft)}
.specs-grid span{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink);display:block;margin-bottom:6px}
.specs-grid strong{color:var(--foam);font-family:var(--f-display);font-weight:600;font-size:1.08rem}
@media (max-width:800px){.specs-grid{grid-template-columns:1fr 1fr}}

/* —— forms —— */
.form{display:grid;gap:var(--s-4);max-width:640px;margin:0 auto}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink)}
.field input,.field textarea,.field select{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);
  padding: .95rem 1.1rem;
  color:var(--foam);font-size:.98rem;
  transition:border-color .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--wave)}
.field textarea{resize:vertical;min-height:160px;font-family:var(--f-body)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media (max-width:600px){.two-col{grid-template-columns:1fr}}
.consent{display:flex;gap:var(--s-3);align-items:flex-start;color:var(--mist);font-size:.88rem;line-height:1.5}
.consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--wave)}
.form-status{padding:var(--s-3);border-radius:var(--radius-s);margin-bottom:var(--s-3);display:none}
.form-status.ok{display:block;background:rgba(0,240,181,.1);border:1px solid var(--tide);color:var(--tide)}
.form-status.err{display:block;background:rgba(255,80,80,.1);border:1px solid #ff6a6a;color:#ff9a9a}

/* —— legal pages prose —— */
.prose{max-width:760px;margin:0 auto;color:var(--mist);font-size:1rem;line-height:1.75}
.prose h2{margin:var(--s-7) 0 var(--s-4);font-size:1.6rem;color:var(--foam)}
.prose h3{margin:var(--s-5) 0 var(--s-3);font-size:1.18rem;color:var(--foam);font-family:var(--f-display);font-weight:600}
.prose p{margin-bottom:var(--s-4)}
.prose ul,.prose ol{margin: 0 0 var(--s-4) var(--s-5)}
.prose li{margin-bottom:var(--s-2);list-style:disc}
.prose ol li{list-style:decimal}
.prose a{color:var(--wave);border-bottom:1px solid rgba(0,212,255,.4)}
.prose a:hover{color:var(--tide);border-color:var(--tide)}
.prose strong{color:var(--foam)}

/* —— wave animation (hero SVG) —— */
.hero__media svg .wave{transform-origin:50% 100%;animation:waveRoll 14s ease-in-out infinite}
.hero__media svg .wave-1{animation-delay:-2s}
.hero__media svg .wave-2{animation-delay:-6s;animation-duration:18s}
.hero__media svg .wave-3{animation-delay:-11s;animation-duration:22s}
@keyframes waveRoll{
  0%,100%{transform:translateX(0) translateY(0) scaleY(1)}
  50%{transform:translateX(-12px) translateY(-6px) scaleY(1.01)}
}
.hero__media svg .swell{animation:swellGlow 6s ease-in-out infinite alternate}
@keyframes swellGlow{from{opacity:.15}to{opacity:.32}}

/* subtle caustic shimmer on the barrel line */
@keyframes shimmer{
  0%,100%{stroke-opacity:.45}
  50%{stroke-opacity:.9}
}
.hero__media svg .wave-1 path[stroke]{animation:shimmer 3.2s ease-in-out infinite}

/* —— motion fallbacks —— */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}