/* ============================================================
   DEEP FORGE — design tokens
   ============================================================ */
:root{
  /* surfaces */
  --canvas:#0a1124;
  --secondary:#0f172a;
  --surface:#182241;
  --raised:#1f2a4d;
  --hairline:#243154;
  /* blue */
  --blue:#2563eb;
  --blue-bright:#3b82f6;
  --blue-soft:#93c5fd;
  /* live cyan — signature, reserved for live/dynamic data */
  --cyan:#22d3ee;
  --cyan-soft:#67e8f9;
  /* ink */
  --ink-0:#f1f5f9;
  --ink-1:#cbd5e1;
  --ink-2:#94a3b8;
  --ink-3:#64748b;
  /* status */
  --green:#4ade80;
  --amber:#fbbf24;
  --red:#f87171;
  /* type */
  --display:"Inter", ui-sans-serif, system-ui, sans-serif;
  --body:"Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* layout */
  --maxw:1240px;
  --gutter:clamp(20px, 5vw, 64px);
  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--body);
  color:var(--ink-1);
  background:var(--canvas);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ============================================================
   ATMOSPHERE — layered glows + masked dotted grid + grain
   ============================================================ */
.atmosphere{position:fixed; inset:0; z-index:-2; pointer-events:none; background:var(--canvas);}
.atmosphere::before{ /* radial blue + cyan glows */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(820px 520px at 82% -8%, rgba(37,99,235,.34), transparent 62%),
    radial-gradient(680px 560px at 6% 8%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(900px 700px at 70% 108%, rgba(37,99,235,.18), transparent 64%),
    linear-gradient(160deg, #0a1124, #0c1430 55%, #0a1124);
}
.atmosphere::after{ /* masked dotted grid */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(147,197,253,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147,197,253,.045) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 92% 70% at 50% 14%, #000 38%, transparent 88%);
  mask-image:radial-gradient(ellipse 92% 70% at 50% 14%, #000 38%, transparent 88%);
}
/* grain/noise overlay */
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent);}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px;}

/* wordmark + glyph */
.wordmark{font-family:var(--display); font-weight:700; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.5em; color:var(--ink-0); text-decoration:none; font-size:1.18rem;}
.wordmark b{font-weight:700}
.wordmark .crusher{color:var(--blue);}
.glyph{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2.5px; width:1.05em; height:1.05em; flex:none;}
.glyph i{border-radius:2.5px; border:1.4px solid var(--hairline);}
.glyph i:first-child{background:var(--blue); border-color:var(--blue); box-shadow:0 0 12px rgba(37,99,235,.6);}

/* buttons */
.btn{
  --pad:.95em 1.45em;
  font-family:var(--body); font-weight:600; font-size:1rem;
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  padding:var(--pad); border-radius:var(--r-md); cursor:pointer;
  border:1px solid transparent; text-decoration:none; min-height:48px;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s;
  will-change:transform;
}
.btn-primary{
  color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--blue-bright), var(--blue));
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 14px 34px -10px rgba(37,99,235,.7), 0 2px 8px rgba(0,0,0,.4);
}
.btn-primary::after{ /* sheen */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 20px 44px -10px rgba(37,99,235,.85), 0 4px 12px rgba(0,0,0,.5);}
.btn-primary:hover::after{transform:translateX(120%);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{
  color:var(--ink-0); background:rgba(255,255,255,.03);
  border-color:var(--hairline); backdrop-filter:blur(8px);
}
.btn-ghost:hover{border-color:var(--blue); color:#fff; background:rgba(37,99,235,.1); transform:translateY(-2px);}
.btn[aria-disabled="true"]{opacity:.58; cursor:not-allowed; pointer-events:none; filter:saturate(.7);}
.btn[aria-disabled="true"]:hover{transform:none;}

.kbd{font-family:var(--mono); font-size:.74rem; padding:.18em .5em; border:1px solid var(--hairline); border-radius:6px; color:var(--ink-2); background:rgba(255,255,255,.02);}

/* ============================================================
   HEADER
   ============================================================ */
header.site{position:sticky; top:0; z-index:60; transition:background .3s, border-color .3s, backdrop-filter .3s;}
header.site::after{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s;
  background:rgba(10,17,36,.72); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--hairline);}
header.site[data-stuck="true"]::after{opacity:1;}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:70px;}
.nav-links{display:flex; gap:30px; align-items:center; font-size:.92rem; color:var(--ink-2);}
.nav-links a{text-decoration:none; transition:color .2s; position:relative; padding:6px 0;}
.nav-links a:hover{color:var(--ink-0);}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--blue-bright); transition:width .25s var(--ease);}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex; gap:12px; align-items:center;}
@media (max-width:860px){ .nav-links{display:none} .nav-cta .btn-ghost{display:none} }

/* ============================================================
   HERO — asymmetric, grid-breaking
   ============================================================ */
.hero{position:relative; padding:clamp(48px,8vh,104px) 0 clamp(60px,9vh,120px);}
.hero-grid{
  display:grid; gap:clamp(36px,5vw,64px); align-items:center;
  grid-template-columns:minmax(0, 1.02fr) minmax(0, 1.18fr);
}
@media (max-width:980px){ .hero-grid{grid-template-columns:minmax(0,1fr); gap:48px} }

.hero-copy{position:relative; z-index:2;}
.hero h1{
  font-family:var(--display); color:var(--ink-0);
  font-weight:800; letter-spacing:-.035em; line-height:.92;
  font-size:clamp(3.1rem, 9vw, 6.6rem); margin:.5rem 0 0;
}
.hero h1 .crush{ position:relative; display:inline-block; color:var(--blue-bright); }
.hero h1 .crush::after{ /* underline mark */
  content:""; position:absolute; left:-.02em; right:-.02em; bottom:.04em; height:.085em;
  background:linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius:4px; transform:scaleX(var(--mark,0)); transform-origin:left; transition:transform .9s var(--ease) .35s;
}
.hero.is-in h1 .crush::after{ --mark:1; }
.hero h1 .stack{display:block;}
.hero .lede{font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--ink-1); max-width:30ch; margin:1.6rem 0 0;}
.hero .lede b{color:var(--ink-0); font-weight:600;}
.tagline-mono{font-family:var(--mono); color:var(--cyan); font-size:.84rem; letter-spacing:.04em; margin-top:1.5rem; display:flex; align-items:center; gap:.7em;}
.tagline-mono .dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse 2.4s var(--ease) infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.78)}}

.hero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:2.1rem;}
.trust{display:flex; align-items:center; gap:18px; margin-top:1.5rem; flex-wrap:wrap; color:var(--ink-2); font-size:.84rem;}
.trust .pill{display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.76rem;}
.trust .pill svg{width:15px; height:15px; color:var(--green);}
.trust .sep{width:1px; height:14px; background:var(--hairline);}

/* big editorial index numeral floating behind hero copy */
.hero-index{position:absolute; left:-3vw; top:-6vh; font-family:var(--mono); font-weight:700; font-size:min(20vw,200px); color:rgba(147,197,253,.05); z-index:0; user-select:none; pointer-events:none; letter-spacing:-.05em;}

/* ============================================================
   LIVE DASHBOARD MOCKUP — the signature
   ============================================================ */
.mock-stage{position:relative; perspective:1600px; z-index:1;}
.mock-glow{position:absolute; inset:-12% -8% -18% -8%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 60% at 60% 40%, rgba(37,99,235,.35), transparent 70%), radial-gradient(50% 50% at 30% 80%, rgba(34,211,238,.18), transparent 72%);
  filter:blur(8px);}
.board{min-width:0; 
  position:relative; z-index:1;
  border-radius:var(--r-lg); border:1px solid var(--hairline);
  background:linear-gradient(180deg, rgba(24,34,65,.96), rgba(15,23,42,.97));
  box-shadow:0 50px 90px -30px rgba(0,0,0,.85), 0 16px 40px -16px rgba(37,99,235,.4), 0 1px 0 rgba(147,197,253,.08) inset;
  transform:rotateX(7deg) rotateY(-11deg) rotateZ(1.5deg);
  transform-style:preserve-3d; overflow:hidden;
  transition:transform .5s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .mock-stage:hover .board{min-width:0;  transform:rotateX(3deg) rotateY(-5deg) rotateZ(.5deg);} }
@media (max-width:980px){ .board{min-width:0; transform:rotateX(3deg) rotateY(0) rotateZ(0);} }
@media (max-width:560px){ .board{min-width:0; transform:none} }

.board-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--hairline); background:rgba(10,17,36,.5);}
.dots{display:flex; gap:7px}
.dots i{width:10px; height:10px; border-radius:50%; background:var(--hairline)}
.board-tabs{display:flex; gap:6px; margin-left:6px; flex:1; overflow:hidden;}
.board-tabs .tab{font-family:var(--mono); font-size:.72rem; color:var(--ink-2); padding:.34em .7em; border-radius:8px; border:1px solid transparent; white-space:nowrap;}
.board-tabs .tab.on{color:var(--ink-0); background:var(--surface); border-color:var(--hairline);}
.board-clockmini{font-family:var(--mono); font-size:.74rem; color:var(--cyan); letter-spacing:.06em; display:flex; align-items:center; gap:.5em;}
.board-clockmini .lv{font-size:.58rem; color:var(--ink-3); letter-spacing:.18em;}

.board-search{display:flex; gap:10px; padding:16px; align-items:center;}
.search-field{flex:1; display:flex; align-items:center; gap:10px; background:rgba(10,17,36,.6); border:1px solid var(--hairline); border-radius:var(--r-md); padding:.7em .9em; color:var(--ink-3); font-size:.86rem; min-height:44px;}
.search-field svg{width:16px; height:16px; color:var(--ink-3)}
.search-field .ph{flex:1}
.search-field .car{width:1.5px; height:1em; background:var(--cyan); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.crush-btn{font-family:var(--display); font-weight:700; letter-spacing:.01em; color:#fff; background:linear-gradient(180deg,var(--blue-bright),var(--blue)); border:none; border-radius:var(--r-md); padding:0 1.05em; min-height:44px; font-size:.92rem; box-shadow:0 8px 22px -8px rgba(37,99,235,.8), 0 1px 0 rgba(255,255,255,.2) inset; display:inline-flex; align-items:center; gap:.4em;}

.board-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:4px 16px 18px;}
.tile{min-width:0; overflow:hidden; border:1px solid var(--hairline); border-radius:var(--r-md); background:linear-gradient(180deg, rgba(31,42,77,.55), rgba(24,34,65,.4)); padding:13px 12px; display:flex; flex-direction:column; gap:9px; min-height:78px; transition:border-color .25s, transform .25s, background .25s;}
.tile:hover{border-color:var(--cyan); transform:translateY(-2px); background:linear-gradient(180deg, rgba(34,211,238,.07), rgba(24,34,65,.5));}
.tile .fav{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:.82rem; color:#fff;}
.tile .nm{font-size:.78rem; color:var(--ink-1); font-weight:500;}
.tile .ur{font-family:var(--mono); font-size:.62rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* widget tiles inside the board */
.tile.widget{grid-column:span 2; min-height:0;}
.wclock{display:flex; align-items:baseline; gap:.5em;}
.wclock .t{font-family:var(--mono); font-weight:700; font-size:1.85rem; color:var(--cyan); letter-spacing:.02em; line-height:1; text-shadow:0 0 24px rgba(34,211,238,.4);}
.wclock .t .sec{color:var(--cyan-soft); font-size:1.1rem;}
.wclock .meta{font-family:var(--mono); font-size:.64rem; color:var(--ink-2); letter-spacing:.1em; text-transform:uppercase;}
.wlabel{font-family:var(--mono); font-size:.6rem; color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:.5em;}
.wlabel .lvdot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

.spark{display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:2px;}
.spark i{flex:1; background:linear-gradient(180deg,var(--blue-bright),rgba(37,99,235,.25)); border-radius:2px 2px 0 0; min-height:4px;}
.spark i.hi{background:linear-gradient(180deg,var(--cyan),rgba(34,211,238,.3));}

.countrow{display:flex; gap:14px; margin-top:2px;}
.countrow .c{display:flex; flex-direction:column; gap:1px;}
.countrow .c b{font-family:var(--mono); font-size:1.15rem; color:var(--cyan); font-weight:700; line-height:1;}
.countrow .c span{font-family:var(--mono); font-size:.56rem; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase;}

/* floating chips around board */
.chip{position:absolute; z-index:3; font-family:var(--mono); font-size:.72rem; color:var(--ink-0);
  background:rgba(15,23,42,.86); border:1px solid var(--hairline); border-radius:12px; padding:.6em .85em;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8); backdrop-filter:blur(10px); display:flex; align-items:center; gap:.6em; white-space:nowrap;}
.chip svg{width:15px; height:15px}
.chip.c1{top:-16px; right:6%; animation:float1 6s var(--ease) infinite;}
.chip.c2{bottom:8%; left:-22px; animation:float2 7s var(--ease) infinite;}
.chip .accent{color:var(--cyan)}
@keyframes float1{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
@keyframes float2{0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)}}
@media (max-width:560px){ .chip{display:none} }

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.strip{border-block:1px solid var(--hairline); background:rgba(10,17,36,.4); overflow:hidden; padding:18px 0;}
.marquee{display:flex; gap:48px; width:max-content; animation:marq 32s linear infinite;}
.marquee span{font-family:var(--mono); font-size:.84rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); display:inline-flex; align-items:center; gap:48px;}
.marquee span::after{content:"◆"; color:var(--blue); font-size:.6rem;}
.marquee b{color:var(--ink-0); font-weight:600}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee{animation:none} .chip{animation:none!important} .search-field .car{animation:none} .tagline-mono .dot{animation:none} }

/* ============================================================
   PITCH SECTION — editorial big statement
   ============================================================ */
section{position:relative}
.pitch{padding:clamp(80px,12vh,150px) 0;}
.pitch-grid{display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:clamp(30px,5vw,72px); align-items:start;}
@media (max-width:880px){ .pitch-grid{grid-template-columns:minmax(0,1fr); gap:32px} }
.pitch-grid .side{position:sticky; top:120px;}
@media (max-width:880px){ .pitch-grid .side{position:static} }
.pitch h2{font-family:var(--display); color:var(--ink-0); font-weight:700; letter-spacing:-.03em; line-height:1.02; font-size:clamp(2.2rem,5vw,3.7rem); margin:.6rem 0 0;}
.pitch h2 em{font-style:normal; color:var(--blue-bright);}
.pitch .big{font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.28; letter-spacing:-.015em; color:var(--ink-1);}
.pitch .big b{color:var(--ink-0); font-weight:700;}
.pitch .big .cy{color:var(--cyan); font-weight:600;}
.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; border-top:1px solid var(--hairline); padding-top:34px;}
@media (max-width:560px){ .statgrid{grid-template-columns:1fr; gap:18px} }
.stat .n{font-family:var(--mono); font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); color:var(--ink-0); letter-spacing:-.02em; line-height:1;}
.stat .n .u{color:var(--cyan); }
.stat .l{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-top:10px;}

/* ============================================================
   FEATURES — asymmetric editorial moments
   ============================================================ */
.features{padding:clamp(40px,6vh,72px) 0 clamp(80px,12vh,150px);}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px,6vh,68px);}
.section-head h2{font-family:var(--display); color:var(--ink-0); font-weight:700; letter-spacing:-.03em; line-height:1; font-size:clamp(2rem,4.4vw,3.2rem); margin:.5rem 0 0; max-width:16ch;}
.section-head .meta{font-family:var(--mono); font-size:.78rem; color:var(--ink-2); text-align:right;}

.feat{display:grid; gap:clamp(28px,4vw,56px); align-items:center; padding:clamp(40px,6vh,72px) 0; border-top:1px solid var(--hairline);}
.feat-grid-a{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
.feat-grid-b{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);}
.feat-grid-b .feat-text{order:2}
@media (max-width:900px){ .feat{grid-template-columns:minmax(0,1fr)!important; gap:30px} .feat-grid-b .feat-text{order:0} }

.feat-num{font-family:var(--mono); font-weight:700; font-size:.82rem; color:var(--blue-soft); letter-spacing:.1em;}
.feat h3{font-family:var(--display); color:var(--ink-0); font-weight:700; letter-spacing:-.025em; line-height:1.04; font-size:clamp(1.7rem,3.4vw,2.5rem); margin:.7rem 0 .9rem;}
.feat h3 em{font-style:normal; color:var(--blue-soft);}
.feat p{font-size:1.04rem; color:var(--ink-1); max-width:42ch;}
.feat p em{font-style:normal; color:var(--ink-0); font-weight:600;}
.feat .pts{list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-direction:column; gap:.7em;}
.feat .pts li{display:flex; gap:.7em; align-items:flex-start; font-size:.95rem; color:var(--ink-1);}
.feat .pts svg{width:18px; height:18px; color:var(--cyan); flex:none; margin-top:2px;}

/* feature visual panel */
.panel{border:1px solid var(--hairline); border-radius:var(--r-lg); background:linear-gradient(180deg, rgba(24,34,65,.65), rgba(15,23,42,.55)); box-shadow:0 30px 70px -34px rgba(0,0,0,.7), 0 1px 0 rgba(147,197,253,.06) inset; overflow:hidden; position:relative;}
.panel-glow{position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 60% at 70% 0%, rgba(37,99,235,.16), transparent 65%);}
.panel-pad{padding:22px; position:relative;}

/* feat 1: boards/tabs visual */
.tabset{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.tabset .t{font-family:var(--mono); font-size:.74rem; color:var(--ink-2); padding:.46em .85em; border-radius:9px; border:1px solid var(--hairline); background:rgba(10,17,36,.4); display:flex; align-items:center; gap:.5em;}
.tabset .t.on{color:var(--ink-0); background:var(--surface); border-color:var(--blue);}
.tabset .t .ct{font-size:.62rem; color:var(--cyan);}
.tabset .add{color:var(--ink-3); border-style:dashed;}
.boardmini{display:grid; grid-template-columns:repeat(3,1fr); gap:9px;}
.boardmini .m{height:46px; border:1px solid var(--hairline); border-radius:10px; background:rgba(31,42,77,.4); display:flex; align-items:center; gap:8px; padding:0 10px;}
.boardmini .m .sq{width:20px;height:20px;border-radius:6px;flex:none}
.boardmini .m .ln{height:6px;border-radius:4px;background:var(--hairline);flex:1}
.boardmini .m.drag{border-color:var(--cyan); border-style:dashed; background:rgba(34,211,238,.06);}

/* feat 2: widgets visual */
.wgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.wmock{border:1px solid var(--hairline); border-radius:12px; background:rgba(10,17,36,.4); padding:14px; min-height:104px; display:flex; flex-direction:column; gap:8px;}
.wmock .wbig{font-family:var(--mono); font-weight:700; font-size:1.5rem; color:var(--cyan); line-height:1; text-shadow:0 0 20px rgba(34,211,238,.35);}
.wmock.todo .row{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--ink-1);}
.wmock.todo .row .ck{width:15px; height:15px; border-radius:4px; border:1.5px solid var(--hairline); flex:none;}
.wmock.todo .row.done .ck{background:var(--cyan); border-color:var(--cyan);}
.wmock.todo .row.done span{color:var(--ink-3); text-decoration:line-through;}
.wmono{font-family:var(--mono); font-size:.6rem; color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase;}

/* feat 3: theming visual — swatch grid */
.swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
.swatch{aspect-ratio:1; border-radius:10px; border:1px solid rgba(255,255,255,.07); cursor:pointer; position:relative; transition:transform .2s, box-shadow .25s; padding:0;}
.swatch:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 10px 24px -8px rgba(0,0,0,.6);}
.swatch.on::after{content:""; position:absolute; inset:-4px; border:2px solid var(--cyan); border-radius:13px;}
.theme-preview{margin-top:16px; border:1px solid var(--hairline); border-radius:12px; overflow:hidden;}
.theme-preview .bar{height:8px; transition:background .4s var(--ease);}
.theme-preview .body{padding:14px; display:flex; gap:10px; align-items:center; transition:background .4s var(--ease);}
.theme-preview .body .av{width:34px;height:34px;border-radius:9px;flex:none; transition:background .4s var(--ease);}
.theme-preview .body .lines{flex:1; display:flex; flex-direction:column; gap:6px;}
.theme-preview .body .lines i{height:7px; border-radius:4px; display:block; transition:background .4s var(--ease);}

/* feat 4: privacy visual */
.privacy-vis{display:flex; flex-direction:column; gap:14px;}
.lockbox{display:flex; align-items:center; gap:16px; padding:18px; border:1px solid var(--hairline); border-radius:14px; background:radial-gradient(120% 120% at 0% 0%, rgba(74,222,128,.08), transparent 60%);}
.lockbox .ic{width:48px; height:48px; border-radius:13px; flex:none; display:grid; place-items:center; background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); color:var(--green);}
.lockbox .ic svg{width:24px; height:24px;}
.lockbox .tx b{display:block; color:var(--ink-0); font-size:1rem; font-weight:600;}
.lockbox .tx span{font-size:.85rem; color:var(--ink-2);}
.flowrow{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.74rem; color:var(--ink-2);}
.flowrow .node{padding:.55em .8em; border:1px solid var(--hairline); border-radius:9px; background:rgba(10,17,36,.5); color:var(--ink-1); display:flex; align-items:center; gap:.5em;}
.flowrow .node.cloud{border-color:var(--blue); color:var(--blue-soft);}
.flowrow .node.bad{border-color:var(--red); color:var(--red);}
.flowrow .arr{color:var(--ink-3); flex:none}
.flowrow .arr.x{color:var(--red); text-decoration:line-through;}

/* widget wall */
.widget-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:34px;}
.wcard{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:16px 16px 14px;}
.wcard h4{margin:0 0 6px; font-family:var(--body); font-weight:600; font-size:1rem; color:var(--ink-0); display:flex; align-items:center; gap:.55em;}
.wcard p{margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.5;}
.wcard .live-dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px rgba(34,211,238,.8); flex:none;}
.wcard .live-tag{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; color:var(--cyan); margin-left:auto;}

/* ============================================================
   PRICING / PRO
   ============================================================ */
section.pro{padding:clamp(70px,10vh,130px) 0;}
.pro-card{position:relative; border:1px solid var(--hairline); border-radius:calc(var(--r-lg) + 6px); overflow:hidden;
  background:linear-gradient(180deg, rgba(24,34,65,.7), rgba(15,23,42,.85));
  box-shadow:0 40px 90px -34px rgba(0,0,0,.8);}
.pro-card::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 90% at 88% 0%, rgba(37,99,235,.22), transparent 60%), radial-gradient(60% 80% at 10% 100%, rgba(34,211,238,.12), transparent 60%);}
.pro-inner{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:0; max-width:600px; margin-inline:auto;}
@media (max-width:820px){ .pro-inner{grid-template-columns:minmax(0,1fr)} }
.plan{padding:clamp(30px,4vw,48px); position:relative;}
.plan + .plan{border-left:1px solid var(--hairline);}
@media (max-width:820px){ .plan + .plan{border-left:none; border-top:1px solid var(--hairline);} }
.plan .tag{font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);}
.plan.pro-plan .tag{color:var(--cyan);}
.plan .price{font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,5vw,3.6rem); color:var(--ink-0); letter-spacing:-.03em; line-height:1; margin:.5rem 0 .2rem; display:flex; align-items:baseline; gap:.3rem;}
.plan .price small{font-family:var(--mono); font-size:.9rem; color:var(--ink-2); font-weight:500;}
.plan .desc{color:var(--ink-1); font-size:.96rem; margin:.4rem 0 1.4rem; max-width:34ch;}
.plan ul{list-style:none; padding:0; margin:0 0 1.6rem; display:flex; flex-direction:column; gap:.75em;}
.plan ul li{display:flex; gap:.65em; align-items:flex-start; font-size:.94rem; color:var(--ink-1);}
.plan ul li svg{width:17px; height:17px; flex:none; margin-top:2px;}
.plan ul li.free svg{color:var(--green)}
.plan ul li.pro svg{color:var(--cyan)}
.ribbon{position:absolute; top:18px; right:-34px; transform:rotate(45deg); background:linear-gradient(90deg,var(--blue-bright),var(--blue)); color:#fff; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; padding:.4em 3em; box-shadow:0 6px 18px -6px rgba(37,99,235,.7);}
/* pro pricing block */
.tag-soon{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-2); font-weight:400; margin-left:.6em; text-transform:none;}
.pro-price-block{display:flex; flex-direction:column; gap:2px; margin:.5rem 0 .2rem;}
.trial{font-weight:600; color:var(--ink-0); font-size:1rem;}
.price-row{display:flex; align-items:baseline; gap:.3rem; flex-wrap:wrap;}
.price-row .amt{font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,5vw,3.6rem); color:var(--ink-0); letter-spacing:-.03em; line-height:1;}
.price-row .per{font-family:var(--mono); font-size:.9rem; color:var(--ink-2); font-weight:500;}
.price-row .alt{color:var(--ink-2); font-size:1rem; margin-left:.6em; font-family:var(--mono);}
.save{font-family:var(--mono); font-size:.7rem; color:var(--cyan); letter-spacing:.08em; margin-top:4px;}
/* store coming-soon state */

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.finale{padding:clamp(80px,13vh,170px) 0 clamp(50px,7vh,90px); text-align:center; position:relative;}
.finale .kick{font-family:var(--mono); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:1.4rem;}
.finale h2{font-family:var(--display); font-weight:800; letter-spacing:-.04em; line-height:.92; font-size:clamp(2.8rem,9vw,7rem); color:var(--ink-0); margin:0 auto; max-width:14ch;}
.finale h2 .b{color:var(--blue-bright);}
.finale .sub{color:var(--ink-1); font-size:1.15rem; margin:1.6rem auto 0; max-width:40ch;}
.finale .acts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:2.4rem;}
.finale .fine{font-family:var(--mono); font-size:.74rem; color:var(--ink-3); margin-top:1.4rem;}

footer.site{border-top:1px solid var(--hairline); background:rgba(10,17,36,.5); padding:56px 0 40px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr; gap:30px} }
@media (max-width:460px){ .foot-grid{grid-template-columns:1fr} }
.foot-brand .tag{color:var(--ink-2); font-size:.92rem; margin:1rem 0 1.3rem; max-width:30ch;}
.foot-col h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 1.1rem;}
.foot-col a{display:block; color:var(--ink-1); text-decoration:none; font-size:.92rem; padding:.32em 0; transition:color .2s;}
.foot-col a:hover{color:var(--cyan);}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:48px; padding-top:26px; border-top:1px solid var(--hairline); color:var(--ink-3); font-family:var(--mono); font-size:.76rem;}
.foot-bottom .soc{display:flex; gap:10px;}
.foot-bottom .soc a{width:34px; height:34px; border:1px solid var(--hairline); border-radius:9px; display:grid; place-items:center; color:var(--ink-2); transition:color .2s, border-color .2s, background .2s;}
.foot-bottom .soc a:hover{color:var(--ink-0); border-color:var(--blue); background:rgba(37,99,235,.1);}
.foot-bottom .soc svg{width:16px;height:16px}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important; transform:none!important; transition:none!important} }

/* subtle scrollbar */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--canvas)}
::-webkit-scrollbar-thumb{background:var(--hairline); border-radius:8px; border:3px solid var(--canvas)}
::-webkit-scrollbar-thumb:hover{background:var(--raised)}
::selection{background:rgba(37,99,235,.4); color:#fff}

/* ============================================================
   PRIVACY PAGE
   ============================================================ */
.privacy-back{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink-2); text-decoration:none; margin-left:auto;}
.privacy-back:hover{color:var(--ink-0);}

.policy{max-width:760px; margin-inline:auto; padding:48px var(--gutter) 96px;}
.policy h1{font-family:var(--display); color:var(--ink-0); font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-.02em; margin:0 0 4px;}
.policy .date{font-family:var(--mono); font-size:.75rem; color:var(--ink-3); letter-spacing:.1em; margin-bottom:34px;}
.policy h2{font-family:var(--display); color:var(--ink-0); font-size:1.25rem; margin:38px 0 10px;}
.policy p, .policy li{color:var(--ink-1); font-size:.98rem;}
.policy strong{color:var(--ink-0);}
.policy table{width:100%; border-collapse:collapse; font-size:.9rem; margin:14px 0;}
.policy th{text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); padding:8px 10px; border-bottom:1px solid var(--hairline);}
.policy td{padding:9px 10px; border-bottom:1px solid var(--hairline); color:var(--ink-1); vertical-align:top;}
.policy td:first-child{color:var(--ink-0); white-space:nowrap;}
@media (max-width:480px){ .policy td:first-child{white-space:normal} .policy table{font-size:.82rem} }

@media (max-width:560px){ .mock-glow{inset:-12% 0 -18% 0} }
@media (max-width:560px){ .nav-cta [data-store-link]{display:none} }

/* screenshots */
.shots-sec{padding:clamp(54px,8vh,100px) 0;}
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:20px; margin-top:34px;}
.shot{margin:0; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:10px; box-shadow:0 30px 80px -30px rgba(0,0,0,.6);}
.shot img{display:block; width:100%; height:auto; border-radius:calc(var(--r-lg) - 6px); border:1px solid var(--hairline);}
.shot figcaption{font-size:.86rem; color:var(--ink-2); padding:12px 6px 6px; line-height:1.5;}