/* ============================================================
   Frostbyte — arctic frosted-glass / cryogenic
   ============================================================ */
:root{
  /* --- arctic palette --- */
  --ink-900:#06121f;   /* deepest polar night */
  --ink-850:#0a1a2c;
  --ink-800:#0e2236;   /* card base */
  --ink-700:#143049;
  --frost-glass: rgba(196, 230, 255, 0.06);
  --frost-glass-2: rgba(220, 240, 255, 0.10);
  --rim: rgba(190, 226, 255, 0.55);     /* cold rim-light */
  --rim-soft: rgba(150, 205, 255, 0.22);

  --ice-100:#f2f9ff;   /* near-white snow */
  --ice-200:#dcefff;
  --ice-300:#b6e0ff;
  --ice-400:#8ccbff;   /* pale icy blue */
  --ice-500:#5fb0f2;
  --cyan:#7df2ff;      /* cryo highlight */
  --teal:#a8f0e6;

  --ink:#e8f5ff;       /* primary text */
  --ink-dim:#9fc1da;   /* muted text */
  --ink-faint:#5d7e98;

  --shadow-cold: 0 24px 60px -28px rgba(0,18,40,.85);
  --maxw:1120px;
  --r:18px;

  --display:"Fraunces",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--ink-900);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* ============================================================
   SIGNATURE BACKDROP — crystalline frost-fractal field
   ============================================================ */
.frost-field{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(125,242,255,.18), transparent 60%),
    radial-gradient(900px 800px at 8% 12%, rgba(90,176,242,.16), transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(20,48,73,.9), transparent 70%),
    linear-gradient(180deg, var(--ink-850), var(--ink-900) 55%, #04101b);
}
/* crystalline frost-fractal: overlapping conic + repeating gradients
   evoke ice crystals fanning across glass */
.crystal-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(60deg,  rgba(190,226,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-60deg, rgba(190,226,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,   rgba(140,203,255,.04) 0 1px, transparent 1px 52px),
    conic-gradient(from 30deg at 22% 30%, rgba(125,242,255,.10), transparent 18%, transparent 80%, rgba(125,242,255,.10)),
    conic-gradient(from 90deg at 80% 72%, rgba(168,240,230,.08), transparent 22%);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 30%, #000 30%, transparent 92%);
          mask-image:radial-gradient(120% 120% at 50% 30%, #000 30%, transparent 92%);
  animation:drift 38s linear infinite;
}
@keyframes drift{ from{background-position:0 0,0 0,0 0,0 0,0 0;} to{background-position:120px 60px,-120px 60px,0 120px,40px 0,-40px 0;} }

/* ============================================================
   FROSTED-GLASS CARD recipe (the core surface)
   ============================================================ */
.frost-panel,.tier,.dura-stat,.code-card,.quote,.cta-card,.frost-glass,
.freeze-steps li,.thaw-demo,.sdk-points{
  background:linear-gradient(160deg, var(--frost-glass-2), var(--frost-glass));
  border:1px solid var(--rim-soft);
  border-radius:var(--r);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 var(--rim),
    inset 0 0 22px -10px rgba(125,242,255,.4),
    var(--shadow-cold);
  position:relative;
}
/* cold rim-light glint on top corner */
.frost-panel::before,.tier::before,.cta-card::before,.code-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.16), transparent 30%);
  mix-blend-mode:screen;
}

/* ============================================================
   NAV
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:22px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(8,22,38,.55);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rim-soft);
}
.wordmark{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:1.32rem; letter-spacing:.3px; color:var(--ice-100);}
.wordmark b{color:var(--ice-400); font-weight:800;}
.wordmark .mono{width:26px; height:26px; color:var(--cyan); filter:drop-shadow(0 0 6px rgba(125,242,255,.6)); animation:spin 60s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.nav-links{display:flex; gap:22px; margin-left:auto; font-size:.92rem; color:var(--ink-dim);}
.nav-links a{position:relative; padding:4px 0;}
.nav-links a:hover{color:var(--ice-200);}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--cyan); transition:width .25s; box-shadow:0 0 6px var(--cyan);}
.nav-links a:hover::after{width:100%;}
.nav-cta{margin-left:4px;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; padding:11px 20px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .25s, background .25s; white-space:nowrap;}
.btn-solid{background:linear-gradient(180deg,var(--cyan),var(--ice-500)); color:#04263a; box-shadow:0 0 0 1px rgba(125,242,255,.4), 0 10px 30px -10px rgba(125,242,255,.7);}
.btn-solid:hover{transform:translateY(-2px); box-shadow:0 0 0 1px var(--cyan), 0 16px 40px -12px rgba(125,242,255,.9);}
.btn-ghost{background:var(--frost-glass-2); color:var(--ice-100); border-color:var(--rim-soft);}
.btn-ghost:hover{border-color:var(--rim); background:var(--frost-glass); transform:translateY(-2px);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7vw,84px) clamp(16px,4vw,40px) 30px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,52px); align-items:center;
}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.18em; color:var(--ice-300); padding:6px 12px; border:1px solid var(--rim-soft); border-radius:999px; background:var(--frost-glass);}
.dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:blip 2.4s ease-in-out infinite;}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(2.5rem,6vw,4.3rem); line-height:1.02; letter-spacing:-.02em; margin:.5em 0 .35em; color:var(--ice-100);}
.sheen{
  background:linear-gradient(100deg, var(--ice-300) 10%, #ffffff 35%, var(--cyan) 50%, var(--ice-400) 70%, var(--ice-300) 90%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 6s ease-in-out infinite;
  text-shadow:0 0 30px rgba(125,242,255,.25);
}
@keyframes sheen{0%,100%{background-position:160% 0}50%{background-position:-30% 0}}
.lede{font-size:1.08rem; color:var(--ink-dim); max-width:34em; margin:0 0 1.6em;}
.lede em{color:var(--ice-200); font-style:italic;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:30px; margin:34px 0 0; padding-top:24px; border-top:1px solid var(--rim-soft);}
.hero-stats dt{font-family:var(--display); font-weight:800; font-size:1.7rem; color:var(--ice-100);}
.hero-stats dd{margin:2px 0 0; font-size:.78rem; color:var(--ink-faint); max-width:11em;}

/* --- frost panel (freeze console) --- */
.frost-panel{padding:20px;}
.panel-head{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.78rem; color:var(--ice-300); letter-spacing:.04em;}
.led{width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:blip 1.8s infinite;}
.ice-grow{width:100%; max-height:220px; display:block; margin:6px auto;}
.ice-grow .flake path{stroke:var(--ice-300); stroke-width:2.4; filter:drop-shadow(0 0 4px rgba(125,242,255,.7));}
.ice-grow .arm{
  stroke-dasharray:120; stroke-dashoffset:120;
  animation:grow 5s ease-in-out infinite alternate;
  transform-origin:100px 100px;
}
.ice-grow .arm:nth-child(2){animation-delay:.15s}
.ice-grow .arm:nth-child(3){animation-delay:.3s}
.ice-grow .arm:nth-child(4){animation-delay:.45s}
.ice-grow .arm:nth-child(5){animation-delay:.6s}
.ice-grow .arm:nth-child(6){animation-delay:.75s}
@keyframes grow{0%{stroke-dashoffset:120; opacity:.2} 55%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:1}}
.ice-grow .flake{animation:flakespin 28s linear infinite; transform-origin:100px 100px;}
@keyframes flakespin{to{transform:rotate(360deg)}}

.panel-readout{font-family:var(--mono); font-size:.78rem; margin-top:8px;}
.panel-readout .row{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px dashed rgba(159,193,218,.18);}
.panel-readout .row span{color:var(--ink-faint);}
.panel-readout .row b{color:var(--ice-200); font-weight:500;}
.panel-readout .cold{color:var(--cyan);}
.panel-readout .sealed{color:var(--teal);}
.panel-readout .tiny{font-size:.72rem;}
.freeze-bar{height:7px; border-radius:999px; background:rgba(10,26,44,.8); overflow:hidden; margin:9px 0; border:1px solid var(--rim-soft);}
.freeze-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--ice-500),var(--cyan)); box-shadow:0 0 12px var(--cyan); transition:width .2s linear;}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{overflow:hidden; border-top:1px solid var(--rim-soft); border-bottom:1px solid var(--rim-soft); background:rgba(8,22,38,.4); padding:11px 0; margin-top:18px;}
.ticker-track{display:flex; gap:26px; white-space:nowrap; width:max-content; animation:scroll 34s linear infinite; font-family:var(--mono); font-size:.8rem; color:var(--ice-300);}
.ticker-track span{opacity:.85;}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{max-width:var(--maxw); margin:0 auto; padding:clamp(54px,8vw,92px) clamp(16px,4vw,40px);}
.sec-head{max-width:42em; margin-bottom:36px;}
.kicker{font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ice-400);}
.sec-head h2{font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.08; letter-spacing:-.015em; margin:.35em 0 .3em; color:var(--ice-100);}
.sec-head p{color:var(--ink-dim); font-size:1.02rem;}
.sec-head em{color:var(--ice-200); font-style:italic;}

/* --- how it freezes --- */
.freeze-steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.freeze-steps li{padding:24px;}
.step-no{font-family:var(--display); font-weight:800; font-size:1.1rem; color:#04263a; background:linear-gradient(180deg,var(--cyan),var(--ice-500)); width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; box-shadow:0 0 18px -4px var(--cyan);}
.freeze-steps h3{font-family:var(--display); font-size:1.2rem; margin:14px 0 6px; color:var(--ice-100);}
.freeze-steps p{margin:0; color:var(--ink-dim); font-size:.95rem;}
.freeze-steps b{color:var(--cyan);}
.freeze-steps code{font-family:var(--mono); color:var(--teal); font-size:.88em;}

/* --- tiers --- */
.tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.tier{padding:28px 24px; display:flex; flex-direction:column;}
.tier header{display:flex; align-items:baseline; justify-content:space-between;}
.tier h3{font-family:var(--display); font-weight:800; font-size:1.5rem; margin:0; color:var(--ice-100);}
.tier-temp{font-family:var(--mono); font-size:.82rem; color:var(--ice-400);}
.tier-pop{border-color:var(--rim); box-shadow:inset 0 1px 0 var(--rim), inset 0 0 30px -8px rgba(125,242,255,.55), 0 30px 70px -30px rgba(125,242,255,.4);}
.badge{align-self:flex-start; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:#04263a; background:var(--cyan); padding:3px 9px; border-radius:999px; margin:10px 0 0;}
.price{margin:16px 0 14px;}
.price b{font-family:var(--display); font-weight:800; font-size:2.3rem; color:var(--ice-100);}
.price span{color:var(--ink-faint); font-size:.85rem; margin-left:6px;}
.tier ul{list-style:none; padding:0; margin:0 0 22px; flex:1;}
.tier li{padding:8px 0 8px 22px; position:relative; font-size:.92rem; color:var(--ink-dim); border-bottom:1px dashed rgba(159,193,218,.14);}
.tier li::before{content:"❄"; position:absolute; left:0; color:var(--ice-400); font-size:.8rem;}
.tier-note{margin-top:22px; font-size:.9rem; color:var(--ink-faint); text-align:center;}
.tier-note a{color:var(--ice-300);}

/* --- durability --- */
.dura-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.dura-stat{padding:26px 22px;}
.dura-stat b{display:block; font-family:var(--display); font-weight:800; font-size:1.9rem; color:var(--cyan); text-shadow:0 0 22px rgba(125,242,255,.3); line-height:1.1;}
.dura-stat span{display:block; margin-top:8px; color:var(--ink-dim); font-size:.92rem;}

/* --- sdk --- */
.sdk-wrap{display:grid; grid-template-columns:1.3fr .9fr; gap:22px; align-items:start;}
.code-card{padding:0; overflow:hidden;}
.code-tabs{display:flex; gap:4px; padding:12px 16px 0; font-family:var(--mono); font-size:.78rem;}
.code-tabs span{padding:6px 12px; border-radius:8px 8px 0 0; color:var(--ink-faint);}
.code-tabs .on{background:rgba(10,26,44,.7); color:var(--cyan); border:1px solid var(--rim-soft); border-bottom:none;}
.code-card pre{margin:0; padding:18px 20px; background:rgba(6,18,31,.6); font-family:var(--mono); font-size:.84rem; line-height:1.7; overflow-x:auto; color:var(--ice-200);}
.c-key{color:var(--ice-400);} .c-str{color:var(--teal);} .c-fn{color:var(--cyan);} .c-com{color:var(--ink-faint); font-style:italic;}
.sdk-points{list-style:none; padding:24px; margin:0;}
.sdk-points li{padding:11px 0; border-bottom:1px dashed rgba(159,193,218,.16); font-size:.94rem; color:var(--ink-dim);}
.sdk-points li:last-child{border-bottom:none;}
.sdk-points b{color:var(--ice-100);}
.sdk-points code{font-family:var(--mono); color:var(--teal); font-size:.88em;}

.thaw-demo{margin-top:22px; padding:20px 24px;}
.thaw-head{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.8rem; color:var(--ice-300);}
.thaw-head code{color:var(--teal);}
.led-warm{background:#ffd27d; box-shadow:0 0 12px #ffd27d;}
.thaw-bar{height:9px; border-radius:999px; background:rgba(10,26,44,.8); overflow:hidden; margin:12px 0 8px; border:1px solid var(--rim-soft);}
.thaw-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#7df2ff,#a8f0e6); box-shadow:0 0 14px var(--cyan); transition:width .18s linear;}
.thaw-meta{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.8rem; color:var(--ink-dim);}
.thaw-meta #thaw-pct{color:var(--cyan);}

/* --- voices --- */
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.quote{padding:26px 24px;}
.quote blockquote{margin:0 0 18px; font-family:var(--display); font-size:1.05rem; font-style:italic; color:var(--ice-100); line-height:1.5;}
.quote figcaption b{display:block; color:var(--ice-200); font-style:normal;}
.quote figcaption span{font-size:.82rem; color:var(--ink-faint);}

/* --- cta --- */
.sec-cta{padding-top:20px;}
.cta-card{padding:clamp(34px,5vw,56px); text-align:center; overflow:hidden;}
.cta-card h2{font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3.6vw,2.5rem); margin:0 0 .3em; color:var(--ice-100);}
.cta-card>p{color:var(--ink-dim); margin:0 0 26px;}
.freeze-form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:460px; margin:0 auto;}
.freeze-form input{flex:1; min-width:220px; padding:12px 16px; border-radius:999px; border:1px solid var(--rim-soft); background:rgba(6,18,31,.6); color:var(--ice-100); font-family:var(--body); font-size:.95rem;}
.freeze-form input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(125,242,255,.18);}
.form-note{margin:16px 0 0; font-size:.84rem; color:var(--ink-faint);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{max-width:var(--maxw); margin:40px auto 0; padding:48px clamp(16px,4vw,40px) 40px; border-top:1px solid var(--rim-soft);}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px;}
.foot-brand .wordmark{font-size:1.2rem; margin-bottom:12px;}
.foot-brand p{color:var(--ink-dim); font-size:.9rem; max-width:24em; margin:.4em 0;}
.foot-brand .copy{color:var(--ink-faint); font-family:var(--mono); font-size:.78rem;}
.foot-col h4{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ice-400); margin:0 0 12px;}
.foot-col a{display:block; color:var(--ink-dim); font-size:.9rem; padding:5px 0;}
.foot-col a:hover{color:var(--ice-200);}
.foot-rule{display:flex; align-items:center; margin:34px 0 18px; color:var(--ice-400);}
.foot-rule::before,.foot-rule::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--rim-soft),transparent);}
.foot-rule span{padding:0 14px; filter:drop-shadow(0 0 6px var(--cyan));}
.foot-fine{text-align:center; color:var(--ink-faint); font-size:.82rem; margin:0;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; }
  .frost-panel{order:-1;}
  .nav-links{display:none;}
  .sdk-wrap{grid-template-columns:1fr;}
  .tier-grid,.dura-grid,.quote-grid,.freeze-steps{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .tier-grid,.dura-grid,.quote-grid,.freeze-steps,.foot-grid{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap; gap:18px;}
  .nav-cta{display:none;}
  .hero h1{font-size:2.4rem;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
}