:root{
  --brand:#E82A60;
  --brand-light:#F27DA0;
  --brand-dark:#8E1436;
  --brand-darker:#6A0E27;
  --brand-glow:rgba(232,42,96,.14);
  --brand-gradient:linear-gradient(135deg,#F27DA0 0%,#E82A60 42%,#C4204D 72%,#8E1436 100%);
  --bg:#080809;
  --bg-elev:#111113;
  --bg-card:#15151A;
  --bg-card-2:#1A1A1F;
  --fg:#F2F2F0;
  --fg-dim:#8C8C88;
  --fg-faint:#3D3D3A;
  --line:rgba(255,255,255,.06);
  --line-bright:rgba(255,255,255,.12);
  --cyan:#4F8EF7;
  --green:#5FA776;
  --red:#E5544F;
  --grain-opacity:.022;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;font-optical-sizing:auto;background:var(--bg);color:var(--fg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scroll-indicator{position:fixed;top:0;left:0;height:2px;width:0;background:var(--brand-gradient);z-index:1000;transition:width .1s linear;box-shadow:0 0 12px var(--brand-glow)}
.display{font-family:"Syne",ui-sans-serif,sans-serif;font-weight:600;letter-spacing:-.035em;line-height:.92}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-feature-settings:"ss01","ss02","zero"}
.label{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
.label-bright{color:var(--brand)}
.container{max-width:1440px;margin:0 auto;padding:0 48px;position:relative}
@media (max-width:768px){.container{padding:0 24px}}

nav.top{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(20px) saturate(1.2);background:rgba(8,8,9,.74);border-bottom:1px solid var(--line)}
nav.top .container{height:58px;display:flex;align-items:center;justify-content:space-between}
nav.top .brand{font-family:"Syne",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:4px}
nav.top .brand .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand-glow);margin-right:6px}
nav.top .brand span.times{margin:0 .35em;color:var(--fg-faint);font-weight:400}
nav.top ul{list-style:none;display:flex;gap:28px}
nav.top ul a{color:var(--fg-dim);text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;transition:color .2s}
nav.top ul a:hover{color:var(--fg)}
nav.top ul a::before{content:"§" attr(data-n) " · ";color:var(--fg-faint);margin-right:2px}
nav.top ul a:hover::before{color:var(--brand)}
.lang-switch{display:flex;gap:2px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;border:1px solid var(--line-bright);border-radius:2px;overflow:hidden;margin-left:16px}
.lang-switch a{padding:5px 9px;color:var(--fg-dim);text-decoration:none;background:transparent;transition:all .15s}
.lang-switch a.on{background:var(--brand);color:#fff}
.lang-switch a:not(.on):hover{background:var(--bg-elev);color:var(--fg)}
@media (max-width:900px){nav.top ul{display:none}.lang-switch{margin-left:0}}

section.hero{min-height:100vh;padding:156px 0 96px;position:relative;overflow:hidden}
@keyframes mesh-drift{0%{background-position:50% 0%,80% 20%,20% 30%}33%{background-position:55% -5%,75% 25%,25% 25%}66%{background-position:45% 5%,85% 15%,15% 35%}100%{background-position:50% 0%,80% 20%,20% 30%}}
section.hero .mesh{position:absolute;inset:0;background:radial-gradient(ellipse 95% 65% at 50% -15%,rgba(232,42,96,.28) 0%,transparent 55%),radial-gradient(ellipse 55% 45% at 88% 18%,rgba(140,23,58,.22) 0%,transparent 55%),radial-gradient(ellipse 50% 40% at 12% 30%,rgba(232,42,96,.14) 0%,transparent 50%);background-size:100% 100%,100% 100%,100% 100%;animation:mesh-drift 16s ease-in-out infinite;pointer-events:none}
section.hero .bg-grid{position:absolute;inset:0;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 55% at 50% 45%,black 30%,transparent 78%);opacity:.5;pointer-events:none}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:80px;gap:32px;flex-wrap:wrap;position:relative}
.hero-meta .col{flex:1 1 240px}
.hero-meta .col-r{text-align:right}
.hero-meta h4{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:10px}
.hero-meta p{font-size:14px;color:var(--fg);line-height:1.5}
.hero-headline{font-size:clamp(52px,9.2vw,152px);position:relative}
.hero-headline .block{display:block}
.hero-headline em{font-style:normal;font-weight:500;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-sub{margin-top:56px;display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start;position:relative}
@media (max-width:768px){.hero-sub{grid-template-columns:1fr}}
.hero-sub .specno{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--fg-dim);letter-spacing:.1em;line-height:1.9}
.hero-sub .specno span{display:block}
.hero-sub .specno span:first-child{color:var(--brand)}
.hero-sub p{font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:var(--fg);max-width:62ch}
.hero-sub p em{font-style:normal;color:var(--brand-light);font-weight:500}
.hero-badges{margin-top:80px;display:flex;gap:10px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);position:relative}
.badge{font-family:"JetBrains Mono",monospace;font-size:11px;padding:6px 12px;border:1px solid var(--line-bright);border-radius:3px;color:var(--fg-dim);background:var(--bg-elev);letter-spacing:.04em;transition:all .2s}
.badge::before{content:"▸ ";color:var(--brand);margin-right:4px}
.badge:hover{color:var(--fg);border-color:var(--brand);background:var(--bg-card)}

section.numbered{padding:128px 0;border-top:1px solid var(--line);position:relative}
.sec-header{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:end;margin-bottom:72px}
.sec-number{font-family:"Syne",sans-serif;font-size:clamp(96px,14vw,192px);font-weight:500;line-height:.85;color:var(--fg);letter-spacing:-.04em;text-shadow:0 0 120px var(--brand-glow)}
.sec-number sup{font-family:"JetBrains Mono",monospace;font-size:18px;font-weight:400;vertical-align:super;color:var(--brand);margin-left:6px;letter-spacing:.08em}
.sec-title{font-family:"Syne",sans-serif;font-size:clamp(32px,4.6vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em;padding-bottom:8px}
.sec-title em{font-style:normal;font-weight:500;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sec-meta{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--fg-dim);text-align:right;letter-spacing:.08em;line-height:1.85;padding-bottom:16px}
@media (max-width:768px){.sec-header{grid-template-columns:1fr;gap:16px}.sec-meta{text-align:left}}
.sec-lead{font-family:"DM Sans",sans-serif;font-size:clamp(20px,2vw,26px);line-height:1.35;font-weight:400;letter-spacing:-.01em;max-width:58ch;color:var(--fg)}
.sec-lead em{font-style:italic;color:var(--brand-light);font-weight:500}

.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;border:1px solid var(--line-bright);background:var(--bg-elev)}
@media (max-width:900px){.problem-grid{grid-template-columns:1fr}}
.problem{padding:40px;border-right:1px solid var(--line);position:relative;transition:background .2s}
.problem:last-child{border-right:none}
.problem:hover{background:var(--bg-card)}
@media (max-width:900px){.problem{border-right:none;border-bottom:1px solid var(--line)}.problem:last-child{border-bottom:none}}
.problem .idx{position:absolute;top:16px;right:20px;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--fg-faint);letter-spacing:.08em}
.problem h3{font-family:"Syne",sans-serif;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.02em;margin:40px 0 16px}
.problem p{font-size:14px;line-height:1.55;color:var(--fg-dim)}
.problem .metric{font-family:"Syne",sans-serif;font-size:72px;font-weight:600;letter-spacing:-.05em;line-height:.88;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.problem .metric small{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--fg-dim);display:block;margin-top:10px;letter-spacing:.06em;-webkit-text-fill-color:var(--fg-dim)}

.insight{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center;margin-top:40px}
@media (max-width:900px){.insight{grid-template-columns:1fr;gap:40px}}
.insight-quote{font-family:"Syne",sans-serif;font-size:clamp(36px,5.2vw,68px);line-height:.98;font-weight:600;letter-spacing:-.035em}
.insight-quote em{font-style:normal;font-weight:500;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.insight-quote .strike{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px;color:var(--fg-dim)}
.insight-body{padding-left:32px;border-left:1px solid var(--line-bright)}
.insight-body p{font-size:17px;line-height:1.55;color:var(--fg);margin-bottom:20px}
.insight-body p em{color:var(--brand-light);font-style:italic;font-weight:500}

.layers-diagram{margin-top:56px;display:grid;grid-template-columns:88px 1fr}
.layer{display:contents}
.layer-id{padding:32px 16px 32px 0;border-right:1px solid var(--line-bright);border-top:1px solid var(--line);position:relative}
.layer-id .n{font-family:"Syne",sans-serif;font-size:36px;font-weight:500;letter-spacing:-.02em;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.layer-id .nn{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--fg-faint);margin-top:4px;letter-spacing:.1em}
.layer:first-child .layer-id,.layer:first-child .layer-body{border-top:none}
.layer-body{padding:32px 0 32px 32px;border-top:1px solid var(--line);position:relative;transition:background .2s}
.layer-body:hover{background:var(--bg-elev)}
.layer-body::before{content:"";position:absolute;left:-1px;top:50%;width:32px;height:2px;background:var(--brand);transform:translateY(-50%);opacity:0;transition:opacity .2s,width .2s;box-shadow:0 0 8px var(--brand-glow)}
.layer-body:hover::before{opacity:1;width:48px}
.layer-body .head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.layer-body h3{font-family:"Syne",sans-serif;font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.05}
.layer-body h3 em{font-style:normal;font-weight:500;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.layer-body .tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--fg-dim);padding:3px 8px;border:1px solid var(--line-bright);text-transform:uppercase;border-radius:2px}
.layer-body .tag.in{color:var(--green);border-color:rgba(95,167,118,.4)}
.layer-body .tag.out{color:var(--fg-faint)}
.layer-body .tag.future{color:var(--cyan);border-color:rgba(79,142,247,.4)}
.layer-body p{font-size:15px;line-height:1.55;color:var(--fg-dim);max-width:70ch}
.layer-body p em{color:var(--fg);font-style:normal;font-weight:500}

.demo-frame{margin-top:48px;border:1px solid var(--line-bright);background:var(--bg-elev);position:relative;box-shadow:0 40px 80px -32px rgba(232,42,96,.14)}
.demo-frame-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-family:"JetBrains Mono",monospace;font-size:11px}
.demo-frame-dots{display:flex;gap:6px}
.demo-frame-dots span{width:10px;height:10px;border-radius:50%;background:var(--line-bright)}
.demo-frame-dots span:first-child{background:var(--brand);box-shadow:0 0 6px var(--brand-glow)}
.demo-frame-url{color:var(--fg-dim);letter-spacing:.02em}
.demo-frame-url span{color:var(--brand)}
.demo-frame-live{display:flex;align-items:center;gap:6px;color:var(--green)}
.demo-frame-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.1)}}
.demo-app{display:grid;grid-template-columns:240px 1fr 340px;min-height:560px;background:var(--bg)}
@media (max-width:1100px){.demo-app{grid-template-columns:1fr;min-height:auto}}
.demo-sidebar{padding:24px 20px;border-right:1px solid var(--line);font-size:13px}
.demo-sidebar h4{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--fg-dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.demo-sidebar .cats{display:flex;flex-direction:column;gap:2px;margin-bottom:32px}
.demo-sidebar .cats a{color:var(--fg-dim);text-decoration:none;padding:8px 12px;font-size:13px;display:flex;justify-content:space-between;align-items:center;border-radius:3px;transition:all .15s;cursor:pointer}
.demo-sidebar .cats a:hover{color:var(--fg);background:var(--bg-elev)}
.demo-sidebar .cats a.active{color:var(--brand);background:rgba(232,42,96,.08);border-left:2px solid var(--brand);padding-left:10px}
.demo-sidebar .cats a small{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--fg-faint)}
.demo-filter{margin-bottom:24px}
.demo-filter label{display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--fg-dim);text-transform:uppercase;margin-bottom:8px}
.demo-filter label span{color:var(--brand)}
.demo-slider{height:4px;background:var(--line-bright);position:relative;border-radius:2px}
.demo-slider .track{position:absolute;left:15%;right:22%;top:0;bottom:0;background:var(--brand-gradient);border-radius:2px}
.demo-slider .thumb{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--fg);border:2px solid var(--brand);box-shadow:0 0 6px var(--brand-glow)}
.demo-slider .thumb.a{left:calc(15% - 6px)}
.demo-slider .thumb.b{right:calc(22% - 6px)}
.demo-chips{display:flex;flex-wrap:wrap;gap:4px}
.demo-chips span{font-size:11px;padding:3px 8px;border:1px solid var(--line-bright);color:var(--fg-dim);border-radius:2px;font-family:"JetBrains Mono",monospace;cursor:pointer;transition:all .15s;user-select:none}
.demo-chips span.on{color:#fff;background:var(--brand);border-color:var(--brand)}
.demo-chips span:hover{color:var(--fg)}
.demo-results{padding:24px}
.demo-results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.demo-results-head .count{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--fg-dim);letter-spacing:.08em}
.demo-results-head .count b{color:var(--brand)}
.demo-table{width:100%;border-collapse:collapse;font-size:12px;font-family:"JetBrains Mono",monospace}
.demo-table thead tr{border-bottom:1px solid var(--line-bright)}
.demo-table th{text-align:left;padding:8px 10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);font-weight:500}
.demo-table td{padding:10px;border-bottom:1px solid var(--line);color:var(--fg)}
.demo-table tbody tr{cursor:pointer;transition:background .12s}
.demo-table tbody tr:hover{background:var(--bg-elev)}
.demo-table tbody tr.selected{background:rgba(232,42,96,.08);box-shadow:inset 2px 0 0 var(--brand)}
.demo-table .pn{color:var(--brand)}
.demo-table .stock{color:var(--green)}
.demo-detail{padding:24px;border-left:1px solid var(--line);background:var(--bg)}
.demo-detail-pn{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--brand);letter-spacing:.04em;margin-bottom:4px}
.demo-detail h5{font-family:"Syne",sans-serif;font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:20px}
.demo-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.demo-tabs a{padding:8px 0;font-size:11px;font-family:"JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .15s}
.demo-tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.chart{height:140px;position:relative;border:1px solid var(--line);background:var(--bg-elev);margin-bottom:20px;padding:8px;border-radius:2px}
.chart-title{position:absolute;top:8px;left:12px;font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase}
.chart-axis{position:absolute;bottom:6px;left:12px;right:12px;display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--fg-faint)}
.chart svg{width:100%;height:100%;display:block}
.chart .line{fill:none;stroke:var(--brand);stroke-width:1.6;filter:drop-shadow(0 0 4px var(--brand-glow))}
.chart .line-2{fill:none;stroke:var(--cyan);stroke-width:1.2;stroke-dasharray:2 3;opacity:.7}
.chart .grid-line{stroke:var(--line);stroke-width:1}
.chart .area{fill:var(--brand);opacity:.05}
.demo-specs{display:grid;grid-template-columns:1fr 1fr;font-family:"JetBrains Mono",monospace;font-size:11px;gap:2px 20px}
.demo-specs dt{color:var(--fg-dim);letter-spacing:.04em}
.demo-specs dd{color:var(--fg);text-align:right}

.pricing-table{margin-top:56px;border:1px solid var(--line-bright);background:var(--bg-elev)}
.pricing-row{display:grid;grid-template-columns:2fr repeat(3,1fr);border-bottom:1px solid var(--line)}
.pricing-row:last-child{border-bottom:none}
.pricing-row > *{padding:16px 20px;border-right:1px solid var(--line)}
.pricing-row > *:last-child{border-right:none}
.pricing-row.header > *{background:var(--bg-card);border-bottom:1px solid var(--line-bright)}
.pricing-row.header h3{font-family:"Syne",sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.pricing-row.header h3 em{font-style:normal;font-weight:500;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pricing-row.header .label-bright{display:inline-block;margin-top:6px;font-size:10px;letter-spacing:.12em}
.pricing-row.header .recommended{display:inline-block;padding:3px 8px;background:var(--brand-gradient);color:#fff;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;border-radius:2px;font-weight:600;box-shadow:0 4px 12px var(--brand-glow)}
.pricing-row.row .cell{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--fg-dim)}
.pricing-row.row .feat{font-family:"DM Sans",sans-serif;font-size:14px;color:var(--fg);font-weight:500}
.pricing-row.row .feat small{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--fg-dim);font-weight:400;letter-spacing:.06em;margin-top:2px}
.pricing-row.row .cell.yes{color:var(--fg)}
.pricing-row.row .cell.yes::before{content:"▪ ";color:var(--brand);margin-right:2px}
.pricing-row.row .cell.no{color:var(--fg-faint)}
.pricing-row.row .cell.no::before{content:"—";margin-right:2px}
.pricing-row.price .cell{font-family:"Syne",sans-serif;font-size:28px;font-weight:600;color:var(--fg);line-height:1;letter-spacing:-.02em}
.pricing-row.price .cell small{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--fg-dim);letter-spacing:.06em;margin-top:6px;font-weight:500}
.pricing-row.price .feat{font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;font-style:italic;color:var(--fg-dim)}
@media (max-width:1000px){.pricing-table{border:none}.pricing-row{grid-template-columns:1fr 1fr;border:none}.pricing-row > *{border:1px solid var(--line);padding:12px}.pricing-row.header{grid-template-columns:1fr}.pricing-row.header > *{grid-column:1/-1}}

.why-list{margin-top:56px;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-bright);border:1px solid var(--line-bright)}
.why-item{padding:36px;background:var(--bg);display:grid;grid-template-columns:88px 200px 1fr auto;gap:32px;align-items:baseline;transition:background .2s}
.why-item:hover{background:var(--bg-elev)}
@media (max-width:900px){.why-item{grid-template-columns:72px 1fr;gap:16px}.why-item .why-metric{grid-column:1/-1;text-align:left;padding-top:8px}}
.why-idx{font-family:"Syne",sans-serif;font-size:36px;font-weight:500;letter-spacing:-.02em;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.why-title{font-family:"Syne",sans-serif;font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.why-body{font-size:14px;line-height:1.55;color:var(--fg-dim);max-width:60ch}
.why-body em{color:var(--fg);font-style:normal;font-weight:500}
.why-metric{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--fg-dim);letter-spacing:.08em;text-align:right}
.why-metric b{display:block;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-size:24px;font-weight:600;font-family:"Syne",sans-serif;letter-spacing:-.015em;margin-bottom:2px}

.gantt{margin-top:56px;border:1px solid var(--line-bright);background:var(--bg-elev);padding:32px}
.gantt-head{display:grid;grid-template-columns:220px repeat(6,1fr);font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--fg-dim);letter-spacing:.1em;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.gantt-row{display:grid;grid-template-columns:220px repeat(6,1fr);align-items:center;gap:0;padding:12px 0;position:relative}
.gantt-row::after{content:"";position:absolute;left:220px;right:0;top:50%;height:1px;background:var(--line);z-index:0}
.gantt-label{font-size:13px;color:var(--fg);padding-right:24px;z-index:1;background:var(--bg-elev)}
.gantt-label small{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--fg-dim);letter-spacing:.06em}
.gantt-bar-wrap{grid-column:2 / -1;position:relative;height:22px;z-index:1}
.gantt-bar{position:absolute;top:0;bottom:0;background:var(--brand-gradient);border-radius:3px;display:flex;align-items:center;padding:0 10px;font-family:"JetBrains Mono",monospace;font-size:10px;color:#fff;font-weight:600;letter-spacing:.04em;box-shadow:0 4px 16px var(--brand-glow)}
.gantt-bar.alt{background:var(--bg-card);color:var(--fg-dim);border:1px solid var(--line-bright);box-shadow:none}
.gantt-bar.cyan{background:var(--cyan);color:#fff;box-shadow:0 4px 16px rgba(79,142,247,.2)}

section.cta{padding:160px 0 128px;border-top:1px solid var(--line);position:relative;overflow:hidden}
section.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(232,42,96,.12) 0%,transparent 60%);pointer-events:none}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;position:relative}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr;gap:48px}}
.cta-headline{font-family:"Syne",sans-serif;font-size:clamp(44px,6.5vw,92px);line-height:.98;font-weight:600;letter-spacing:-.035em}
.cta-headline em{font-style:normal;font-weight:500;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cta-panel{border:1px solid var(--line-bright);padding:36px;background:var(--bg-elev);box-shadow:0 40px 80px -32px rgba(232,42,96,.18)}
.cta-panel dl{display:grid;grid-template-columns:auto 1fr;row-gap:10px;column-gap:24px;font-family:"JetBrains Mono",monospace;font-size:12px}
.cta-panel dt{color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.cta-panel dd{color:var(--fg)}
.cta-panel dd a{color:var(--brand);text-decoration:none;border-bottom:1px dotted var(--brand)}
.cta-actions{margin-top:32px;padding-top:32px;border-top:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line-bright);background:transparent;color:var(--fg);transition:all .2s;cursor:pointer;border-radius:2px;font-weight:600}
.btn::after{content:"↗";transition:transform .2s}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:hover::after{transform:translate(2px,-2px)}
.btn.primary{background:var(--brand-gradient);color:#fff;border-color:transparent;box-shadow:0 8px 24px var(--brand-glow)}
.btn.primary:hover{background:var(--brand-gradient);opacity:.92;transform:translateY(-1px);box-shadow:0 12px 32px rgba(232,42,96,.32)}

footer{padding:32px 0;border-top:1px solid var(--line);font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--fg-dim);letter-spacing:.08em}
footer .inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
footer .rev{color:var(--brand)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.25,.1,.25,1),transform .9s cubic-bezier(.25,.1,.25,1)}
.reveal.in{opacity:1;transform:translateY(0)}
@keyframes staggerIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.stagger > *{opacity:0;animation:staggerIn .95s cubic-bezier(.25,.1,.25,1) forwards}
.stagger > *:nth-child(1){animation-delay:.08s}
.stagger > *:nth-child(2){animation-delay:.22s}
.stagger > *:nth-child(3){animation-delay:.36s}
.stagger > *:nth-child(4){animation-delay:.5s}
.stagger > *:nth-child(5){animation-delay:.64s}
::selection{background:rgba(232,42,96,.4);color:var(--fg)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ========================================================================
   Page-specific additions
   ======================================================================== */

/* Comparison table (vs-simsurfing) */
.compare-grid{margin-top:56px;border:1px solid var(--line-bright);background:var(--bg-elev)}
.compare-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;border-bottom:1px solid var(--line)}
.compare-row:last-child{border-bottom:none}
.compare-row > *{padding:16px 20px;border-right:1px solid var(--line);font-size:13px}
.compare-row > *:last-child{border-right:none}
.compare-row.head > *{background:var(--bg-card);border-bottom:1px solid var(--line-bright);font-family:"Syne",sans-serif;font-size:16px;font-weight:600;letter-spacing:-.01em}
.compare-row.head .c-murata{color:var(--fg-dim)}
.compare-row.head .c-yageo{color:var(--fg-dim)}
.compare-row.head .c-us{color:var(--brand)}
.compare-row .feat{font-family:"DM Sans",sans-serif;font-size:14px;color:var(--fg);font-weight:500}
.compare-row .feat small{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--fg-dim);font-weight:400;letter-spacing:.06em;margin-top:2px}
.compare-row .v{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--fg-dim)}
.compare-row .v.yes{color:var(--fg)}
.compare-row .v.yes::before{content:"▪ ";color:var(--green);margin-right:2px}
.compare-row .v.partial{color:var(--fg-dim)}
.compare-row .v.partial::before{content:"◐ ";color:var(--cyan);margin-right:2px}
.compare-row .v.no{color:var(--fg-faint)}
.compare-row .v.no::before{content:"—";margin-right:2px}
.compare-row .v.win{color:var(--brand)}
.compare-row .v.win::before{content:"★ ";color:var(--brand);margin-right:2px}
@media (max-width:900px){.compare-row{grid-template-columns:1fr 1fr}.compare-row.head{grid-template-columns:1fr}.compare-row.head > *{grid-column:1/-1}}

/* Executive one-pager */
.exec-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border:1px solid var(--line-bright)}
@media (max-width:900px){.exec-summary{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.exec-summary{grid-template-columns:1fr}}
.exec-kpi{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.exec-kpi:last-child{border-right:none}
.exec-kpi .big{font-family:"Syne",sans-serif;font-size:44px;font-weight:600;line-height:.95;letter-spacing:-.03em;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.exec-kpi .lbl{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-top:6px}
.exec-kpi p{font-size:13px;color:var(--fg-dim);margin-top:10px;line-height:1.5}

/* Interactive demo tweaks */
.demo-live{margin-top:0;border:none;background:transparent;box-shadow:none}
.demo-live .demo-app{border:1px solid var(--line-bright);min-height:640px}

/* ========================================================================
   Flow stepper (top) + page-nav (bottom)
   ======================================================================== */

.flow-nav{position:sticky;top:58px;z-index:40;backdrop-filter:blur(20px) saturate(1.2);background:rgba(8,8,9,.82);border-bottom:1px solid var(--line)}
.flow-nav .container{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;padding-top:0;padding-bottom:0}
.flow-nav .container::-webkit-scrollbar{display:none}
.flow-nav .step{flex:1;min-width:140px;padding:14px 20px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);text-decoration:none;border-right:1px solid var(--line);position:relative;transition:color .2s,background .2s}
.flow-nav .step:last-child{border-right:none}
.flow-nav .step .n{color:var(--fg-faint);font-size:9px;display:block;margin-bottom:4px;letter-spacing:.14em}
.flow-nav .step .t{display:block;line-height:1.2}
.flow-nav .step.done{color:var(--fg-dim)}
.flow-nav .step.done .n{color:var(--brand);opacity:.6}
.flow-nav .step.active{color:var(--fg);background:rgba(232,42,96,.06)}
.flow-nav .step.active .n{color:var(--brand)}
.flow-nav .step.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand);box-shadow:0 0 8px var(--brand-glow)}
.flow-nav .step:hover:not(.active){color:var(--fg);background:var(--bg-elev)}
@media (max-width:700px){
  .flow-nav .step{min-width:110px;padding:10px 14px}
  .flow-nav .step .t{font-size:9px}
}

.page-nav{margin-top:72px;padding:32px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.page-nav .btn.back::before{content:"←";margin-right:8px;transition:transform .2s}
.page-nav .btn.back::after{content:""}
.page-nav .btn.back:hover::before{transform:translateX(-2px)}
.page-nav .meta{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--fg-dim);letter-spacing:.1em}
.page-nav .meta b{color:var(--brand)}

/* ========================================================================
   Mobile refinements (≤600px)
   ======================================================================== */
@media (max-width:600px){
  .container{padding:0 18px}
  /* Hero meta — tighter on phones */
  .hero-meta{gap:24px;margin-bottom:56px}
  .hero-meta .col,.hero-meta .col-r{text-align:left;flex:1 1 45%}
  section.hero{padding:120px 0 64px}
  section.numbered{padding:80px 0}
  /* Smaller problem metric on phone */
  .problem .metric{font-size:52px}
  .problem{padding:28px}
  /* Shrink section numbers */
  .sec-header{margin-bottom:48px}
  /* Gantt on mobile — scroll horizontally if needed */
  .gantt{padding:20px 16px;overflow-x:auto}
  .gantt-head,.gantt-row{grid-template-columns:140px repeat(6,minmax(36px,1fr));min-width:520px}
  .gantt-label{padding-right:12px;font-size:12px}
  .gantt-row::after{left:140px}
  .gantt-bar{font-size:9px;padding:0 6px}
  /* Flow-nav shrinks further on phones */
  .flow-nav .container{overflow-x:auto}
  .flow-nav .step{min-width:98px;padding:8px 10px}
  .flow-nav .step .n{font-size:8px}
  .flow-nav .step .t{font-size:9px;letter-spacing:.04em}
  /* Compare table — single column on tiny screens */
  .compare-row{grid-template-columns:1fr !important}
  .compare-row > *{border-right:none;border-bottom:1px solid var(--line);padding:12px 16px}
  .compare-row > *:last-child{border-bottom:none}
  .compare-row .v::before{opacity:.7}
  /* Pricing — stack fully */
  .pricing-row{grid-template-columns:1fr !important}
  /* CTA panel — smaller pad */
  .cta-panel{padding:24px}
  .cta-panel dl{grid-template-columns:1fr;row-gap:4px}
  .cta-panel dd{margin-bottom:8px}
  /* Badges — better wrap */
  .hero-badges{gap:6px}
  .badge{font-size:10px;padding:5px 10px}
  /* Demo app on mobile — details collapsed by default feel */
  .demo-frame-url{display:none}
  .demo-frame-header{padding:10px 14px}
  .demo-sidebar{padding:20px 16px}
  .demo-results,.demo-detail{padding:20px 16px}
  .demo-table th{font-size:9px;padding:6px 6px}
  .demo-table td{padding:8px 6px;font-size:11px}
  .chart{height:120px}
}
@media (max-width:420px){
  .container{padding:0 14px}
  .hero-headline{font-size:46px !important}
  .hero-meta .col,.hero-meta .col-r{flex:1 1 100%}
  .problem .metric{font-size:44px}
  .flow-nav .step{min-width:84px}
  .cta-headline{font-size:40px !important}
}