/* PcBrain Red — red.pcbrain.in
   Idea: every app has a surface and an underneath. The site lets you look underneath.
   Dark page, one hot red, white for "sealed". No scroll-locking. */

:root {
  --bg: #08040a;
  --bg-2: #100a10;
  --fg: #f7f1f2;
  --muted: rgba(247, 241, 242, .62);
  --faint: rgba(247, 241, 242, .38);
  --line: rgba(255, 255, 255, .09);
  --red: #ff2a44;
  --red-glow: rgba(255, 42, 68, .45);
  --amber: #ffad3b;
  --navy: #0a1033;
  --navy-glow: rgba(52, 78, 210, .16);
  --web-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M400 0L400 420M400 0L318.1 411.9M400 0L239.3 388M400 0L166.7 349.2M400 0L103 297M400 0L50.8 233.3M400 0L12 160.7M400 0L-11.9 81.9M400 0L-20 0M400 45Q396 40.3 391.2 44.1M391.2 44.1Q388.2 38.8 382.8 41.6M382.8 41.6Q380.9 35.7 375 37.4M375 37.4Q374.3 31.3 368.2 31.8M368.2 31.8Q368.7 25.7 362.6 25M362.6 25Q364.3 19.1 358.4 17.2M358.4 17.2Q361.2 11.8 355.9 8.8M355.9 8.8Q359.7 4 355 0M400 90Q392.1 80.6 382.4 88.3M382.4 88.3Q376.5 77.5 365.6 83.1M365.6 83.1Q361.8 71.4 350 74.8M350 74.8Q348.6 62.6 336.4 63.6M336.4 63.6Q337.4 51.4 325.2 50M325.2 50Q328.6 38.2 316.9 34.4M316.9 34.4Q322.5 23.5 311.7 17.6M311.7 17.6Q319.4 7.9 310 0M400 140Q387.6 125.4 372.7 137.3M372.7 137.3Q363.4 120.6 346.4 129.3M346.4 129.3Q340.6 111.1 322.2 116.4M322.2 116.4Q320.1 97.4 301 99M301 99Q302.6 79.9 283.6 77.8M283.6 77.8Q288.9 59.4 270.7 53.6M270.7 53.6Q279.4 36.6 262.7 27.3M262.7 27.3Q274.6 12.4 260 0M400 195Q382.8 174.7 362 191.3M362 191.3Q349.1 167.9 325.4 180.2M325.4 180.2Q317.3 154.8 291.7 162.1M291.7 162.1Q288.7 135.7 262.1 137.9M262.1 137.9Q264.3 111.3 237.9 108.3M237.9 108.3Q245.2 82.7 219.8 74.6M219.8 74.6Q232.1 50.9 208.7 38M208.7 38Q225.3 17.2 205 0M400 255Q377.5 228.4 350.3 250.1M350.3 250.1Q333.4 219.6 302.4 235.6M302.4 235.6Q291.8 202.4 258.3 212M258.3 212Q254.4 177.4 219.7 180.3M219.7 180.3Q222.6 145.6 188 141.7M188 141.7Q197.6 108.2 164.4 97.6M164.4 97.6Q180.4 66.6 149.9 49.7M149.9 49.7Q171.6 22.5 145 0M400 320Q371.8 286.6 337.6 313.9M337.6 313.9Q316.4 275.6 277.5 295.6M277.5 295.6Q264.2 254 222.2 266.1M222.2 266.1Q217.3 222.6 173.7 226.3M173.7 226.3Q177.4 182.7 133.9 177.8M133.9 177.8Q146 135.8 104.4 122.5M104.4 122.5Q124.4 83.6 86.1 62.4M86.1 62.4Q113.4 28.2 80 0M400 390Q365.6 349.3 323.9 382.5M323.9 382.5Q298.1 335.9 250.8 360.3M250.8 360.3Q234.5 309.6 183.3 324.3M183.3 324.3Q177.3 271.3 124.2 275.8M124.2 275.8Q128.7 222.7 75.7 216.7M75.7 216.7Q90.4 165.5 39.7 149.2M39.7 149.2Q64.1 101.9 17.5 76.1M17.5 76.1Q50.7 34.4 10 0' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
  --web-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 500L1000 500M500 500L969.8 671M500 500L883 821.4M500 500L750 933M500 500L586.8 992.4M500 500L413.2 992.4M500 500L250 933M500 500L117 821.4M500 500L30.2 671M500 500L0 500M500 500L30.2 329M500 500L117 178.6M500 500L250 67M500 500L413.2 7.6M500 500L586.8 7.6M500 500L750 67M500 500L883 178.6M500 500L969.8 329M540 500Q536.2 506.4 537.6 513.7M537.6 513.7Q531.9 518.4 530.6 525.7M530.6 525.7Q523.7 528.2 520 534.6M520 534.6Q512.6 534.6 506.9 539.4M506.9 539.4Q500 536.8 493.1 539.4M493.1 539.4Q487.4 534.6 480 534.6M480 534.6Q476.3 528.2 469.4 525.7M469.4 525.7Q468.1 518.4 462.4 513.7M462.4 513.7Q463.8 506.4 460 500M460 500Q463.8 493.6 462.4 486.3M462.4 486.3Q468.1 481.6 469.4 474.3M469.4 474.3Q476.3 471.8 480 465.4M480 465.4Q487.4 465.4 493.1 460.6M493.1 460.6Q500 463.2 506.9 460.6M506.9 460.6Q512.6 465.4 520 465.4M520 465.4Q523.7 471.8 530.6 474.3M530.6 474.3Q531.9 481.6 537.6 486.3M537.6 486.3Q536.2 493.6 540 500M585 500Q577 513.6 579.9 529.1M579.9 529.1Q567.7 539.1 565.1 554.6M565.1 554.6Q550.3 559.9 542.5 573.6M542.5 573.6Q526.7 573.5 514.8 583.7M514.8 583.7Q500 578.2 485.2 583.7M485.2 583.7Q473.3 573.5 457.5 573.6M457.5 573.6Q449.7 559.9 434.9 554.6M434.9 554.6Q432.3 539.1 420.1 529.1M420.1 529.1Q423 513.6 415 500M415 500Q423 486.4 420.1 470.9M420.1 470.9Q432.3 460.9 434.9 445.4M434.9 445.4Q449.7 440.1 457.5 426.4M457.5 426.4Q473.3 426.5 485.2 416.3M485.2 416.3Q500 421.8 514.8 416.3M514.8 416.3Q526.7 426.5 542.5 426.4M542.5 426.4Q550.3 440.1 565.1 445.4M565.1 445.4Q567.7 460.9 579.9 470.9M579.9 470.9Q577 486.4 585 500M635 500Q622.3 521.6 626.9 546.2M626.9 546.2Q607.6 562.1 603.4 586.8M603.4 586.8Q579.8 595.1 567.5 616.9M567.5 616.9Q542.5 616.7 523.4 632.9M523.4 632.9Q500 624.2 476.6 632.9M476.6 632.9Q457.5 616.7 432.5 616.9M432.5 616.9Q420.2 595.1 396.6 586.8M396.6 586.8Q392.4 562.1 373.1 546.2M373.1 546.2Q377.7 521.6 365 500M365 500Q377.7 478.4 373.1 453.8M373.1 453.8Q392.4 437.9 396.6 413.2M396.6 413.2Q420.2 404.9 432.5 383.1M432.5 383.1Q457.5 383.3 476.6 367.1M476.6 367.1Q500 375.8 523.4 367.1M523.4 367.1Q542.5 383.3 567.5 383.1M567.5 383.1Q579.8 404.9 603.4 413.2M603.4 413.2Q607.6 437.9 626.9 453.8M626.9 453.8Q622.3 478.4 635 500M690 500Q672.1 530.4 678.5 565M678.5 565Q651.4 587.4 645.5 622.1M645.5 622.1Q612.4 633.9 595 664.5M595 664.5Q559.8 664.3 533 687.1M533 687.1Q500 674.8 467 687.1M467 687.1Q440.2 664.3 405 664.5M405 664.5Q387.6 633.9 354.5 622.1M354.5 622.1Q348.6 587.4 321.5 565M321.5 565Q327.9 530.4 310 500M310 500Q327.9 469.6 321.5 435M321.5 435Q348.6 412.6 354.5 377.9M354.5 377.9Q387.6 366.1 405 335.5M405 335.5Q440.2 335.7 467 312.9M467 312.9Q500 325.2 533 312.9M533 312.9Q559.8 335.7 595 335.5M595 335.5Q612.4 366.1 645.5 377.9M645.5 377.9Q651.4 412.6 678.5 435M678.5 435Q672.1 469.6 690 500M750 500Q726.5 539.9 734.9 585.5M734.9 585.5Q699.2 615 691.5 660.7M691.5 660.7Q647.8 676.2 625 716.5M625 716.5Q578.7 716.1 543.4 746.2M543.4 746.2Q500 730 456.6 746.2M456.6 746.2Q421.3 716.1 375 716.5M375 716.5Q352.2 676.2 308.5 660.7M308.5 660.7Q300.8 615 265.1 585.5M265.1 585.5Q273.5 539.9 250 500M250 500Q273.5 460.1 265.1 414.5M265.1 414.5Q300.8 385 308.5 339.3M308.5 339.3Q352.2 323.8 375 283.5M375 283.5Q421.3 283.9 456.6 253.8M456.6 253.8Q500 270 543.4 253.8M543.4 253.8Q578.7 283.9 625 283.5M625 283.5Q647.8 323.8 691.5 339.3M691.5 339.3Q699.2 385 734.9 414.5M734.9 414.5Q726.5 460.1 750 500M815 500Q785.4 550.3 796 607.7M796 607.7Q751 644.9 741.3 702.5M741.3 702.5Q686.3 722 657.5 772.8M657.5 772.8Q599.1 772.3 554.7 810.2M554.7 810.2Q500 789.8 445.3 810.2M445.3 810.2Q400.9 772.3 342.5 772.8M342.5 772.8Q313.7 722 258.7 702.5M258.7 702.5Q249 644.9 204 607.7M204 607.7Q214.6 550.3 185 500M185 500Q214.6 449.7 204 392.3M204 392.3Q249 355.1 258.7 297.5M258.7 297.5Q313.7 278 342.5 227.2M342.5 227.2Q400.9 227.7 445.3 189.8M445.3 189.8Q500 210.2 554.7 189.8M554.7 189.8Q599.1 227.7 657.5 227.2M657.5 227.2Q686.3 278 741.3 297.5M741.3 297.5Q751 355.1 796 392.3M796 392.3Q785.4 449.7 815 500M885 500Q848.8 561.5 861.8 631.7M861.8 631.7Q806.7 677.1 794.9 747.5M794.9 747.5Q727.7 771.3 692.5 833.4M692.5 833.4Q621.1 832.8 566.9 879.2M566.9 879.2Q500 854.2 433.1 879.2M433.1 879.2Q378.9 832.8 307.5 833.4M307.5 833.4Q272.3 771.3 205.1 747.5M205.1 747.5Q193.3 677.1 138.2 631.7M138.2 631.7Q151.2 561.5 115 500M115 500Q151.2 438.5 138.2 368.3M138.2 368.3Q193.3 322.9 205.1 252.5M205.1 252.5Q272.3 228.7 307.5 166.6M307.5 166.6Q378.9 167.2 433.1 120.8M433.1 120.8Q500 145.8 566.9 120.8M566.9 120.8Q621.1 167.2 692.5 166.6M692.5 166.6Q727.7 228.7 794.9 252.5M794.9 252.5Q806.7 322.9 861.8 368.3M861.8 368.3Q848.8 438.5 885 500M960 500Q916.8 573.5 932.3 657.3M932.3 657.3Q866.5 711.6 852.4 795.7M852.4 795.7Q772 824.2 730 898.4M730 898.4Q644.7 897.7 579.9 953M579.9 953Q500 923.2 420.1 953M420.1 953Q355.3 897.7 270 898.4M270 898.4Q228 824.2 147.6 795.7M147.6 795.7Q133.5 711.6 67.7 657.3M67.7 657.3Q83.2 573.5 40 500M40 500Q83.2 426.5 67.7 342.7M67.7 342.7Q133.5 288.4 147.6 204.3M147.6 204.3Q228 175.8 270 101.6M270 101.6Q355.3 102.3 420.1 47M420.1 47Q500 76.8 579.9 47M579.9 47Q644.7 102.3 730 101.6M730 101.6Q772 175.8 852.4 204.3M852.4 204.3Q866.5 288.4 932.3 342.7M932.3 342.7Q916.8 426.5 960 500' fill='none' stroke='white' stroke-opacity='.09' stroke-width='1.2'/%3E%3C/svg%3E");
  --sense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 68'%3E%3Cpath d='M30 8l-6 6 6 6-6 6M34 34l-8 2 4 6-8 2M30 60l-6-6 6-6-6-6' fill='none' stroke='%23ff2a44' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::after { /* faint film grain */
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3, h4, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.r { color: var(--red); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--red); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- Buttons: chunky, they press down ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--red); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 0 #9c0d20, 0 14px 34px -10px var(--red-glow);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #9c0d20, 0 18px 40px -10px rgba(255, 42, 68, .6); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #9c0d20, 0 8px 20px -10px var(--red-glow); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 11px; }
.btn--ghost { background: transparent; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .3) inset; }
.btn--ghost:hover, .btn--ghost:active { box-shadow: 0 0 0 1.5px #fff inset; }
.btn--big { min-height: 66px; padding: 0 34px; font-size: 18px; border-radius: 18px; }
.wa__icon { fill: currentColor !important; stroke: none !important; width: 22px !important; height: 22px !important; }
.btn--big:hover .wa__icon { transform: none; }

/* ---------- Header ---------- */

.top { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.top.is-solid { background: rgba(8, 4, 10, .8); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-color: var(--line); }
.top__in { display: flex; align-items: center; gap: 28px; height: 66px; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__logo { display: block; height: 34px; width: auto; }
.top__nav { display: flex; gap: 4px; margin-left: auto; }
.top__nav a { padding: 8px 13px; border-radius: 10px; font-size: 14px; text-decoration: none; color: var(--muted); transition: color .2s, background .2s; }
.top__nav a:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }

/* ---------- Hero ---------- */

.hero { position: relative; padding: 100px var(--gutter) 64px; isolation: isolate; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 50% 68%, rgba(255, 42, 68, .2), transparent 70%); }
.hero__head { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; }
.hero__title { font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -.02em; font-variation-settings: 'wdth' 92; font-size: clamp(54px, 6.4vw, 104px); }
@media (min-width: 901px) {
  .hero__head { flex-wrap: nowrap; }
  .hero__title { flex: none; }
}
.hero__title span { display: block; }
.hero__title .r { display: inline-block; text-shadow: 0 0 50px rgba(255, 42, 68, .5); animation: glitch 5s infinite steps(1); }
@keyframes glitch {
  0%, 92%, 100% { transform: none; clip-path: none; }
  93% { transform: translate(-4px, 1px); clip-path: inset(10% 0 55% 0); }
  95% { transform: translate(5px, -2px); clip-path: inset(50% 0 12% 0); }
  97% { transform: translate(-2px, 0); clip-path: inset(30% 0 30% 0); }
}
.hero__side { max-width: 360px; padding-bottom: 6px; }
.hero__lead { color: var(--muted); font-size: 16.5px; }
.hero__lead b { color: var(--fg); font-weight: 650; }
.hud { margin-top: 16px; display: flex; gap: 10px; }
.hud span { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--line) inset; }
.hud__found b { color: var(--red); font-size: 15px; }
.hud__time { color: var(--muted); font-variant-numeric: tabular-nums; }
.hud .is-bump { animation: bump .5s var(--pop); }
@keyframes bump { 40% { transform: scale(1.18); } }

/* The example app: designed at 760×500 and scaled to fit */
.stage {
  position: relative; width: min(1000px, 100%, calc((100svh - 300px) * 1.52)); min-width: min(100%, 560px);
  aspect-ratio: 760 / 500; margin: 28px auto 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 120px -40px rgba(255, 42, 68, .5), 0 30px 60px -30px #000;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.stage__scale { position: absolute; left: 0; top: 0; width: 760px; height: 500px; transform-origin: 0 0; }
.stage__hint { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 14px; border-radius: 10px; background: var(--red); color: #fff; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; pointer-events: none; transition: opacity .3s; white-space: nowrap; }
.smsg { position: absolute; z-index: 7; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); padding: 18px 20px; border-radius: 16px; text-align: center; background: rgba(12, 5, 9, .92); box-shadow: 0 0 0 1px rgba(255, 42, 68, .5), 0 20px 50px -10px #000; animation: vpop .45s var(--pop); cursor: auto; }
.smsg p { font-size: 17px; color: var(--muted); }
.smsg p b { color: #fff; }
.smsg .vact { margin-top: 14px; }

/* Hero: crack it, then shatter it */
.shat { cursor: crosshair; overflow: visible; }
.shat .xray { border-radius: 18px; }
.shat__cracks { position: absolute; inset: 0; width: 760px; height: 500px; overflow: hidden; border-radius: 18px; pointer-events: none; }
.shat__cracks path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5)); transition: stroke-dashoffset .35s var(--ease); }
.shat__cracks path.thin { stroke-width: 1; opacity: .8; }
.shat__cracks circle { fill: #fff; filter: drop-shadow(0 0 6px #fff); }
.shat__shards { position: absolute; inset: 0; perspective: 1400px; pointer-events: none; }
.shard { position: absolute; inset: 0; will-change: transform; }
.is-shake { animation: jolt .32s; }
@keyframes jolt { 20% { translate: -7px 3px; } 45% { translate: 6px -4px; } 70% { translate: -3px 2px; } } /* translate, not transform, so it never undoes a scale */
.shat::after { content: ''; position: absolute; inset: 0; border-radius: 18px; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.shat.is-flash::after { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .75; } 100% { opacity: 0; } }

.layer { position: absolute; inset: 0; }
.b { position: absolute; border-radius: 14px; }
.b-chrome { left: 0; top: 0; width: 760px; height: 40px; border-radius: 0; display: flex; align-items: center; gap: 7px; padding: 0 16px; }
.b-chrome i { width: 10px; height: 10px; border-radius: 50%; }
.b-chrome .url { margin-left: 18px; flex: 1; height: 24px; border-radius: 7px; display: flex; align-items: center; padding: 0 12px; font-size: 11.5px; }
.b-login { left: 24px; top: 60px; width: 300px; height: 200px; padding: 16px; }
.b-team { left: 24px; top: 276px; width: 300px; height: 200px; padding: 16px; }
.b-prod { left: 348px; top: 60px; width: 388px; height: 200px; padding: 16px; display: flex; gap: 16px; }
.b-chat { left: 348px; top: 276px; width: 388px; height: 200px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.b h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.b-chat h4 { margin-bottom: 2px; }
.b h4 small { font-size: 10.5px; font-weight: 500; opacity: .6; }
.fld { height: 42px; border-radius: 9px; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 8px; }
.fld small { font-size: 9.5px; letter-spacing: .02em; }
.fld span { font-size: 12.5px; }
.cta { height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; margin-top: 10px; }
.row { height: 46px; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 0 8px; border-radius: 9px; margin-bottom: 6px; }
.row .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.row span { font-size: 12.5px; font-weight: 600; display: flex; flex-direction: column; line-height: 1.25; }
.row small { font-size: 10px; font-weight: 500; opacity: .65; }
.row em { font-style: normal; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.b-prod .img { flex: none; width: 150px; height: 168px; border-radius: 10px; }
.b-prod .info { display: flex; flex-direction: column; padding-top: 4px; flex: 1; }
.b-prod .info p { font-size: 11.5px; opacity: .65; margin-top: -6px; }
.b-prod .price { margin-top: auto; font-size: 28px; font-weight: 850; letter-spacing: -.02em; }
.b-prod .cta { margin-top: 8px; }
.msg { max-width: 84%; padding: 7px 11px; border-radius: 12px; font-size: 11.5px; line-height: 1.35; }
.msg.you { align-self: flex-end; }
.inp { margin-top: auto; height: 32px; flex: none; border-radius: 9px; display: flex; align-items: center; padding: 0 12px; font-size: 11.5px; }

/* surface: a tidy, friendly app */
.surf { background: #f4f1ee; color: #1b1418; }
.surf .b-chrome { background: #e7e2de; }
.surf .b-chrome i:nth-child(1) { background: #f26b5b; } .surf .b-chrome i:nth-child(2) { background: #f6c34a; } .surf .b-chrome i:nth-child(3) { background: #5fc76b; }
.surf .url { background: #fff; color: #6b6266; }
.surf .b:not(.b-chrome) { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 30px -18px rgba(40, 20, 30, .35); }
.surf .fld { background: #f4f1ee; } .surf .fld small { color: #8a8084; }
.surf .cta { background: #1b1418; color: #fff; }
.surf .row { background: #faf8f6; } .surf .av { background: #e9e0e3; color: #5a4a50; }
.surf .row em { background: #e3f5e6; color: #1f7a35; }
.surf .img { background: radial-gradient(circle at 35% 30%, #d9a37a, #8b5434 60%, #5c321c); }
.surf .msg.bot { background: #f1ece9; } .surf .msg.you { background: #1b1418; color: #fff; }
.surf .inp { background: #f4f1ee; color: #8a8084; }

/* x-ray: the same app, seen from underneath */
.xray {
  background-color: #14060b; color: #ffb3bd; font-family: var(--mono);
  background-image: linear-gradient(rgba(255, 42, 68, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 42, 68, .1) 1px, transparent 1px);
  background-size: 20px 20px;
}
.xray .b { border: 1.5px dashed rgba(255, 90, 110, .55); }
.xray .b-chrome { border-width: 0 0 1.5px; background: rgba(255, 42, 68, .08); }
.xray .b-chrome i { border: 1.5px solid rgba(255, 90, 110, .6); }
.xray .url { background: rgba(0, 0, 0, .35); color: #ff8494; gap: 10px; }
.xray .url em { font-style: normal; font-size: 10px; color: #fff; background: var(--red); padding: 2px 6px; border-radius: 4px; }
.xray .b h4 { font-weight: 500; font-size: 12.5px; color: #ff6b7e; }
.xray .fld, .xray .row, .xray .inp, .xray .msg.bot { border: 1px solid rgba(255, 90, 110, .35); }
.xray .cta { border: 1px dashed rgba(255, 90, 110, .6); color: #ff8494; font-weight: 500; }
.xray .av { border: 1px solid rgba(255, 90, 110, .5); }
.xray .row em { border: 1px solid rgba(255, 90, 110, .5); }
.xray .img { border: 1px dashed rgba(255, 90, 110, .4); background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255, 42, 68, .1) 8px 9px); }
.xray .msg.you { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.xray .price s { font-size: 16px; opacity: .6; margin-right: 6px; }
.xray .hot { background: rgba(255, 42, 68, .9) !important; color: #fff !important; border-color: #fff !important; box-shadow: 0 0 24px rgba(255, 42, 68, .6); }
.xray .price.hot { background: none !important; box-shadow: none; color: #fff !important; text-shadow: 0 0 18px var(--red); }
.xray .row.hot em { color: var(--red); background: #fff; }

/* ---------- Shared section bits ---------- */

.label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 12px; }
.label::before { content: ''; width: 24px; height: 1px; background: currentColor; }
.h2 { margin-top: 18px; font-weight: 900; text-transform: uppercase; text-wrap: balance; font-size: clamp(34px, 4.6vw, 66px); line-height: .9; letter-spacing: -.015em; font-variation-settings: 'wdth' 96; }
.lead { margin-top: 18px; color: var(--muted); font-size: 18px; max-width: 44ch; }

/* ---------- AI-built apps: a paper report card ---------- */

.score { padding: clamp(80px, 10vw, 140px) 0; }
.score__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.score__points { margin: 26px 0 30px; display: grid; gap: 12px; }
.score__points li { display: flex; align-items: center; gap: 12px; color: rgba(247, 241, 242, .85); font-size: 16px; }
.score__points li::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 42, 68, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff2a44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }

.card { position: relative; background: #f4efe9; color: #1b1418; border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); transform: rotate(1.2deg); box-shadow: 0 40px 90px -40px rgba(255, 42, 68, .55), 0 20px 40px -20px #000; transition: transform .5s var(--ease); }
.card:hover { transform: rotate(0); }
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(transparent 0 31px, rgba(27, 20, 24, .05) 31px 32px); }
.card > * { position: relative; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card__title { font-weight: 800; font-size: 17px; }
.card__title em { font-style: normal; margin-left: 8px; padding: 2px 6px; border: 1px solid rgba(27, 20, 24, .25); border-radius: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6b6266; vertical-align: 2px; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: rgba(27, 20, 24, .08); }
.seg button { border: 0; background: none; cursor: pointer; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: #6b6266; transition: background .2s, color .2s; }
.seg button.is-on { background: #1b1418; color: #fff; }
.card__top { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.stamp {
  flex: none; width: 118px; height: 118px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  border: 4px solid var(--red); color: var(--red); transform: rotate(-10deg);
  box-shadow: 0 0 0 3px #f4efe9, 0 0 0 5px rgba(255, 42, 68, .5);
}
.stamp b { font-size: 58px; line-height: .9; font-weight: 900; }
.stamp span { font: 600 11px var(--mono); }
.stamp i { font-style: normal; }
.stamp.is-mid { border-color: #c56a00; color: #c56a00; box-shadow: 0 0 0 3px #f4efe9, 0 0 0 5px rgba(197, 106, 0, .45); }
.stamp.is-good { border-color: #1f7a35; color: #1f7a35; box-shadow: 0 0 0 3px #f4efe9, 0 0 0 5px rgba(31, 122, 53, .45); }
.stamp.is-thunk { animation: thunk .55s var(--pop); }
@keyframes thunk { 0% { transform: rotate(-30deg) scale(1.9); opacity: 0; } 60% { transform: rotate(-8deg) scale(.94); opacity: 1; } 100% { transform: rotate(-10deg) scale(1); } }
.grade { display: inline-block; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: rgba(255, 42, 68, .14); color: #c4142b; }
.grade.is-mid { background: rgba(255, 173, 59, .2); color: #8f4d00; }
.grade.is-good { background: rgba(31, 122, 53, .14); color: #1f7a35; }
.card__sum p { margin-top: 10px; color: #5a5054; font-size: 15px; max-width: 34ch; }
.areas { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.area { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; text-align: left; padding: 11px 13px; border-radius: 12px; border: 0; cursor: pointer; background: #fff; box-shadow: 0 0 0 1px rgba(27, 20, 24, .08); transition: box-shadow .2s, transform .2s var(--pop); }
.area:hover { transform: translateY(-2px); }
.area.is-on { box-shadow: 0 0 0 2px #1b1418; }
.area__name { font-size: 14px; font-weight: 700; }
.area__val { display: inline-flex; align-items: baseline; gap: 6px; font: 600 12px var(--mono); color: #6b6266; }
.area__val b { font: 900 20px var(--sans); color: var(--red); }
.area__val i { font-style: normal; }
.area[data-band="mid"] .area__val b { color: #c56a00; }
.area[data-band="good"] .area__val b { color: #1f7a35; }
.area__bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(27, 20, 24, .08); overflow: hidden; }
.area__bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--red); transition: width 1s var(--ease), background .4s; }
.area[data-band="mid"] .area__bar i { background: #e08a12; }
.area[data-band="good"] .area__bar i { background: #2a9a48; }
.card__detail { margin-top: 16px; padding-top: 16px; border-top: 1.5px dashed rgba(27, 20, 24, .2); min-height: 124px; }
.card__detail h3 { font-size: 17px; font-weight: 800; }
.card__detail dl { margin: 10px 0 0; display: grid; gap: 8px; }
.card__detail dl div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.card__detail dt { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #c4142b; padding-top: 3px; }
.card.is-after .card__detail dt { color: #1f7a35; }
.card__detail dd { margin: 0; font-size: 15px; color: #2b2226; line-height: 1.45; }
.card__detail.is-swap { animation: swap .4s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }

/* ---------- How it works: the padlock ---------- */

.how { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--line); }
.how__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.steps { margin-top: 36px; display: grid; gap: 8px; }
.steps button {
  width: 100%; text-align: left; border: 0; cursor: pointer; background: rgba(255, 255, 255, .03); border-radius: 16px; padding: 16px 18px;
  display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center;
  box-shadow: 0 0 0 1px var(--line) inset; transition: background .3s, box-shadow .3s;
}
.steps button:hover { background: rgba(255, 255, 255, .06); }
.steps__n { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 600 14px var(--mono); color: var(--faint); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset; transition: all .3s; }
.steps__t { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.steps__d { grid-column: 2; color: var(--muted); font-size: 15.5px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.steps button.is-on { background: rgba(255, 42, 68, .08); box-shadow: 0 0 0 1.5px rgba(255, 42, 68, .55) inset; }
.steps button.is-on .steps__n { background: var(--red); color: #fff; box-shadow: 0 8px 24px -8px var(--red-glow); }
.steps button.is-on .steps__d { max-height: 120px; opacity: 1; margin-top: 6px; }
.steps li:last-child button.is-on { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6) inset; }
.steps li:last-child button.is-on .steps__n { background: #fff; color: #120d0f; }

.lock { position: relative; width: min(100%, 400px); margin: 0 auto; padding-bottom: 30px; }
.lock::before { content: ''; position: absolute; inset: 15% -10% 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 42, 68, .35), transparent 65%); transition: background .6s; z-index: -1; }
.lock svg { width: 100%; height: auto; overflow: visible; }
.lock__shackle { fill: none; stroke: #ff6b7e; stroke-width: 16; stroke-linecap: round; transform: translateY(-30px) rotate(-14deg); transform-origin: 168px 134px; transform-box: view-box; transition: transform .7s var(--pop), stroke .5s; }
.lock__body { stroke: var(--red); stroke-width: 3; transition: stroke .5s, fill .5s; }
.lock__crack path { fill: none; stroke: #ff2a44; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease), opacity .4s; }
.lock__key { fill: none; stroke: #ff8494; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.lock__ok path { fill: none; stroke: #120d0f; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset .7s .25s var(--ease); }
.lock__tag {
  position: absolute; right: -2%; top: 50%; width: 46%; padding: 12px 14px; border-radius: 10px; background: #f4efe9; color: #1b1418; font-size: 13px; font-weight: 650; line-height: 1.3;
  transform: rotate(8deg) translateY(20px); opacity: 0; transition: transform .6s var(--pop), opacity .4s; box-shadow: 0 20px 40px -14px #000;
}
.lock__tag b { display: block; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #c4142b; margin-bottom: 4px; }
.lock__cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red); transition: color .4s; }
.lock[data-state="1"] .lock__crack path { stroke-dashoffset: 220; opacity: .4; }
.lock[data-state="1"] .lock__key { opacity: 1; }
.lock[data-state="1"] .lock__tag { opacity: 1; transform: rotate(6deg); }
.lock[data-state="2"] .lock__shackle { transform: none; stroke: #fff; }
.lock[data-state="2"] .lock__body { stroke: #fff; fill: #f4efe9; }
.lock[data-state="2"] .lock__crack path { stroke-dashoffset: 220; opacity: 0; }
.lock[data-state="2"] .lock__ok path { stroke-dashoffset: 0; }
.lock[data-state="2"]::before { background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 65%); }
.lock[data-state="2"] .lock__cap { color: #fff; }
.lock.is-shake svg { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-8px) rotate(-2deg); } 40% { transform: translateX(7px) rotate(2deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* ---------- FAQ ---------- */

.faq { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--line); }
.faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__list { display: grid; gap: 8px; }
.faq details { border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: 0 0 0 1px var(--line) inset; transition: background .3s, box-shadow .3s; }
.faq details[open] { background: rgba(255, 42, 68, .06); box-shadow: 0 0 0 1px rgba(255, 42, 68, .4) inset; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; font-size: 17.5px; font-weight: 700; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset; font-size: 20px; line-height: 1; transition: transform .3s var(--pop), background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--red); box-shadow: none; }
.faq details p { padding: 0 20px 20px; color: var(--muted); font-size: 16.5px; max-width: 62ch; }

/* ---------- Closing ---------- */

.end { position: relative; overflow: hidden; text-align: center; padding: clamp(100px, 13vw, 180px) 0; isolation: isolate; }
.end::before { content: ''; position: absolute; left: 50%; top: 60%; width: min(1100px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(circle, rgba(255, 42, 68, .3), rgba(255, 42, 68, .07) 40%, transparent 65%); }
.end__title { font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 7vw, 110px); line-height: .88; letter-spacing: -.02em; font-variation-settings: 'wdth' 92; text-wrap: balance; max-width: 14ch; margin: 0 auto; }
.end p { margin: 26px auto 34px; color: var(--muted); font-size: 19px; }
.end .end__note { margin: 18px 0 0; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.end__mail { display: inline-block; margin-top: 10px; color: var(--faint); font-size: 15px; text-underline-offset: 4px; }
.end__mail:hover { color: var(--fg); }

/* ---------- Footer, dock ---------- */

.foot { border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot__in { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 28px; }
.brand--foot .brand__logo { height: 30px; }
.foot a { color: var(--fg); text-underline-offset: 3px; }
.foot__copy { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.dock { display: none; }

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .score__in, .how__in, .faq__in { grid-template-columns: minmax(0, 1fr); }
  .lock { width: min(100%, 320px); }
}

@media (max-width: 760px) {
  .top__nav { display: none; }
  .top .btn--sm { margin-left: auto; }
  .hero { padding-top: 90px; }
  .stage { width: 100%; min-width: 0; border-radius: 14px; }
  .card { transform: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .top__in { height: 60px; }
  .top .btn--sm { display: none; }
  .hero { padding-bottom: 48px; }
  .hero__side { max-width: none; }
  .stage__hint { font-size: 10.5px; bottom: 10px; }
  .smsg { bottom: 8px; padding: 10px 12px; }
  .smsg p { font-size: 13px; }
  .smsg .vact { margin-top: 8px; gap: 8px; }
  .smsg .btn { min-height: 38px; font-size: 13px; padding: 0 12px; flex: 1; }
  .card__top { gap: 16px; }
  .stamp { width: 96px; height: 96px; }
  .stamp b { font-size: 46px; }
  .seg { width: 100%; }
  .seg button { flex: 1; }
  .areas { grid-template-columns: minmax(0, 1fr); }
  .card__detail dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .score__copy .btn { width: 100%; }
  .faq summary { font-size: 16.5px; }
  .btn--big { width: 100%; padding: 0 20px; font-size: 17px; }
  .foot__copy { margin-left: 0; }
  .dock {
    display: block; position: fixed; inset: auto 0 0; z-index: 60;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(8, 4, 10, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .35s var(--ease);
  }
  .dock.is-on { transform: none; }
  .dock .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- AI helper: talk to the app's assistant ---------- */

.aisec { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--line); }
.aisec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 48px; max-width: 1000px; margin: 0 auto; }
.aisec__side { max-width: 400px; }
.aisec__side .lead { margin-top: 0; font-size: 17px; }
.aisec__side .lead b { color: var(--fg); font-weight: 650; }
.hseg { display: inline-flex; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--line) inset; }
.hseg button { border: 0; background: none; cursor: pointer; padding: 8px 13px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s; }
.hseg button.is-on { background: var(--fg); color: #140a0e; }
.vact { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.vend { max-width: 1000px; margin: 24px auto 0; padding: 22px 24px; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; background: rgba(255, 42, 68, .1); box-shadow: 0 0 0 1px rgba(255, 42, 68, .35) inset; animation: vpop .45s var(--pop); }
.vend p { font-size: 17px; max-width: 560px; color: var(--muted); }
.vend p b { color: var(--fg); }
.vend .vact { margin-top: 0; }
@keyframes vpop { from { transform: scale(.92); opacity: 0; } }

.ai { max-width: 1000px; margin: 40px auto 0; border-radius: 22px; overflow: hidden; background: #f6f2ef; color: #1b1418; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 120px -40px rgba(255, 42, 68, .5), 0 30px 60px -30px #000; }
.ai__top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-bottom: 1px solid #ebe3df; }
.ai__av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #1b1418; color: #fff; font-weight: 800; }
.ai__who { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.ai__who small { color: #1f7a35; font-size: 12.5px; }
.ai .hseg { background: #f1ebe8; box-shadow: none; }
.ai .hseg button { color: #6b6266; }
.ai .hseg button.is-on { background: #1b1418; color: #fff; }
.ai__log { height: 380px; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.bub { max-width: 78%; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-line; animation: vpop .3s var(--ease); }
.bub--bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.bub--you { align-self: flex-end; background: #1b1418; color: #fff; border-bottom-right-radius: 5px; }
.bub--bad { background: #fff0f2; box-shadow: 0 0 0 2px var(--red); }
.bub--typing { display: flex; gap: 5px; padding: 15px; }
.bub--typing i { width: 7px; height: 7px; border-radius: 50%; background: #b3a8ac; animation: dot 1s infinite; }
.bub--typing i:nth-child(2) { animation-delay: .15s; } .bub--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .5; } }
.flag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: -2px 0 4px; padding: 6px 11px; border-radius: 8px; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; background: var(--red); color: #fff; transform: rotate(-1.5deg); animation: stamp .45s var(--pop); }
.flag--ok { background: #1b1418; transform: none; }
@keyframes stamp { from { transform: scale(1.6) rotate(-6deg); opacity: 0; } }
.ai__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 18px; background: #fff; border-top: 1px solid #ebe3df; }
.ai__chips button { border: 1.5px solid #e2d9d5; background: #fff; color: #1b1418; cursor: pointer; padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: border-color .2s, background .2s, opacity .2s; }
.ai__chips button:hover { border-color: var(--red); }
.ai__chips button:disabled { opacity: .4; cursor: default; border-color: #e2d9d5; }
.ai__chips button.is-used { text-decoration: line-through; }
@media (max-width: 560px) {
  .ai__top { flex-wrap: wrap; }
  .ai .hseg { width: 100%; } .ai .hseg button { flex: 1; }
  .ai__log { height: 340px; padding: 14px 12px; }
  .bub { max-width: 90%; font-size: 14px; }
  .ai__chips { padding: 12px; }
  .ai__chips button { font-size: 13px; padding: 8px 12px; }
  .vend .btn, .vact .btn { flex: 1; }
}

/* ---------- Spot the impostor ---------- */

.lineup { position: relative; max-width: 1080px; margin: 30px auto 0; padding: 20px; border-radius: 22px; background: #120a0f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset; }
.lineup__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.lineup__round { display: flex; flex-direction: column; }
.lineup__round b { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.lineup__round span { font-size: 22px; font-weight: 800; }
.lineup__score { font: 500 14px var(--mono); color: var(--muted); }
.lineup__score b { color: #fff; }
.lineup__wall { padding: 26px 18px 18px; border-radius: 14px; background: repeating-linear-gradient(transparent 0 39px, rgba(255, 255, 255, .08) 39px 40px), #1a1016; }
.lineup__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.suspect { position: relative; border: 0; padding: 0; background: none; color: inherit; text-align: left; cursor: pointer; perspective: 900px; min-height: 230px; font: inherit; display: grid; min-width: 0; }
.suspect__in { position: relative; display: grid; transform-style: preserve-3d; transition: transform .55s var(--ease); }
.suspect.is-flip .suspect__in { transform: rotateY(180deg); }
.suspect__front, .suspect__back { position: relative; grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.suspect__front { background: #f6f1ee; color: #1b1418; box-shadow: 0 10px 24px -10px #000; transition: transform .2s var(--ease), box-shadow .2s; }
.suspect:hover .suspect__front, .suspect:focus-visible .suspect__front { transform: translateY(-4px); box-shadow: 0 0 0 3px #fff, 0 16px 30px -10px #000; }
.suspect__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #e9e0e3; font-size: 18px; margin-bottom: 4px; }
.suspect__front strong { font-size: 17px; line-height: 1.15; }
.suspect__front small { font: 500 11.5px var(--mono); color: #6b6266; word-break: break-all; }
.suspect__front em { font-style: normal; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.35; padding: 6px 8px; border-radius: 8px; background: #fff; }
.suspect__back { transform: rotateY(180deg); background: #f6f1ee; color: #1b1418; justify-content: center; text-align: center; }
.suspect__back b { font: 900 24px var(--sans); text-transform: uppercase; letter-spacing: .02em; }
.suspect__back span { font-size: 14px; line-height: 1.4; }
.suspect.is-caught .suspect__back { background: var(--red); color: #fff; box-shadow: 0 0 40px rgba(255, 42, 68, .7); }
.suspect.is-dim { opacity: .35; pointer-events: none; }
.suspect.is-wrong { animation: suspectshake .4s; }
@keyframes suspectshake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.suspect__sense { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; z-index: 2; }
.suspect__sense path { vector-effect: non-scaling-stroke; }
.lineup.is-sense .suspect:not(.is-flip) .suspect__sense, .suspect:hover .suspect__sense { opacity: calc(var(--s) * 1); animation: suspectbuzz .09s infinite; }
.lineup.is-sense .suspect:not(.is-flip) { animation: none; }
@keyframes suspectbuzz { 50% { transform: translate(1.5px, -1px); } }
.lineup__note { margin-top: 16px; min-height: 1.6em; color: var(--muted); font-size: 16px; }
.lineup__note b { color: #fff; }
.lineup__bar { margin-top: 12px; display: flex; gap: 10px; }


.imp { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--line); }
.imp__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 48px; max-width: 1080px; margin: 0 auto; }
.imp__head .lead { margin-top: 0; max-width: 420px; font-size: 17px; }
.imp__head .lead b { color: var(--fg); font-weight: 650; }
@media (max-width: 640px) {
  .lineup { padding: 12px; }
  .lineup__wall { padding: 14px 10px; }
  .lineup__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .suspect { min-height: 200px; }
  .suspect__front, .suspect__back { padding: 12px; gap: 5px; }
  .suspect__av { width: 36px; height: 36px; font-size: 15px; }
  .suspect__front strong { font-size: 15.5px; }
  .suspect__front em { font-size: 12.5px; padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .lineup.is-sense .suspect__sense, .suspect:hover .suspect__sense { animation: none; }
}

/* ---------- Theme: silk, danger sense and a hero navy (kept quiet on purpose) ---------- */

/* faint webs in the corners of the dark sections */
.hero, .imp, .score, .aisec, .how, .faq { position: relative; isolation: isolate; }
.imp::before, .score::before, .aisec::before, .how::before, .faq::before { content: ''; position: absolute; z-index: -1; top: 0; width: min(420px, 60vw); aspect-ratio: 1; pointer-events: none; background: var(--web-corner) no-repeat top right / contain; opacity: .7; }
.imp::before, .aisec::before, .faq::before { right: 0; }
.score::before, .how::before { left: 0; transform: scaleX(-1); }
.hero::after { content: ''; position: absolute; z-index: -1; right: 0; top: 0; width: min(560px, 70vw); aspect-ratio: 1; pointer-events: none; background: var(--web-corner) no-repeat top right / contain; opacity: .8; }
.hero::before { background: radial-gradient(60% 50% at 50% 68%, rgba(255, 42, 68, .2), transparent 70%), radial-gradient(45% 55% at 8% 6%, var(--navy-glow), transparent 70%); }

/* a little navy in the quieter sections */
.imp, .faq { background: radial-gradient(70% 60% at 100% 0%, var(--navy-glow), transparent 70%); }
.foot { background: linear-gradient(var(--bg), var(--navy)); }
.top.is-solid { background: rgba(8, 6, 22, .82); }

/* section labels start with a small silk thread and a knot */
.label::before { width: 28px; height: 1px; background: radial-gradient(circle at 2px 50%, currentColor 2px, transparent 2.5px) no-repeat, linear-gradient(90deg, transparent 3px, currentColor 3px); background-size: 6px 6px, 100% 1px; background-position: left center, left center; background-repeat: no-repeat; height: 6px; }

/* danger sense: warning flickers beside "Hit it." in time with its glitch */
.hero__title .r { position: relative; }
.hero__title .r::before, .hero__title .r::after { content: ''; position: absolute; top: 12%; width: .32em; height: .62em; background: var(--sense) no-repeat center / contain; opacity: 0; pointer-events: none; animation: sense 5s infinite steps(1); }
.hero__title .r::before { right: 100%; margin-right: .08em; transform: scaleX(-1); }
.hero__title .r::after { left: 100%; margin-left: .06em; }
@keyframes sense { 0%, 90%, 100% { opacity: 0; } 91%, 97% { opacity: 1; } }

/* the closing call sits on a large, barely-there web */
.end::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 55%; width: min(1100px, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; background: var(--web-full) no-repeat center / contain; }


.foot__tag { color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .hero__title .r::before, .hero__title .r::after { animation: none; } }

/* ---------- Apple-style scroll ---------- */

/* the scroll story: the scene stays put while you scroll through three beats */
.story { position: relative; height: 360vh; }
.story__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(55% 50% at 50% 42%, rgba(255, 42, 68, .12), transparent 70%), radial-gradient(60% 60% at 50% 100%, var(--navy-glow), transparent 70%); }
.story__thread { position: absolute; left: 50%; top: 0; width: 1px; height: calc(42% - min(33vh, 34vw) * .1); background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .7)); transform-origin: top; transform: scaleY(0); z-index: 1; }
.story__web { position: absolute; left: 50%; top: 42%; width: min(80vh, 94vw); aspect-ratio: 1; translate: -50% -50%; overflow: visible; will-change: transform; }
.story__web > path { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.story__web > path.is-torn { stroke: var(--red); stroke-width: 2; filter: drop-shadow(0 0 6px var(--red)); }
.story__web > path.is-fixed { stroke: #fff; stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85)); }
.story__sense { opacity: 0; }
.story__sense polyline { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 42, 68, .8)); }
.story__core circle { fill: #1b0e15; stroke: rgba(255, 255, 255, .6); stroke-width: 3; transition: fill .3s, stroke .3s; }
.story__core .ok { fill: none; stroke: #1b1418; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.story__core text { font: 600 22px var(--mono); fill: rgba(255, 255, 255, .7); text-anchor: middle; letter-spacing: .12em; }
.story__core.is-danger circle { stroke: var(--red); fill: #3a0f1a; filter: drop-shadow(0 0 16px var(--red)); }
.story__core.is-safe circle { stroke: #fff; fill: #f6f1ee; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .6)); }
.story__core.is-safe .ok { opacity: 1; }
.story__lines { position: relative; z-index: 2; align-self: end; margin-bottom: max(64px, 11vh); width: min(1100px, 92vw); display: grid; text-align: center; }
.story__line { grid-area: 1 / 1; opacity: 0; font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 6.2vw, 100px); line-height: .92; letter-spacing: -.015em; font-variation-settings: 'wdth' 92; text-wrap: balance; text-shadow: 0 0 40px rgba(8, 4, 10, .9), 0 0 12px rgba(8, 4, 10, .9); will-change: transform, opacity; }
.story__line .w { opacity: .16; }
.story__dots { position: absolute; z-index: 2; left: 50%; bottom: 28px; translate: -50% 0; display: flex; gap: 8px; }
.story__dots i { width: 26px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .2); transition: background .3s, width .3s; }
.story__dots i.is-on { width: 42px; background: var(--red); }
/* without motion: show it as a simple, readable block */
.story.is-static { height: auto; }
.story.is-static .story__stick { position: relative; height: auto; padding: 120px 0; gap: 40px; }
.story.is-static .story__web { position: relative; left: auto; top: auto; translate: none; width: min(420px, 80vw); }
.story.is-static .story__web > path { stroke-dashoffset: 0; }
.story.is-static .story__lines { gap: 18px; margin: 0; }
.story.is-static .story__line { grid-area: auto; opacity: 1; }
.story.is-static .story__line .w { opacity: 1; }
.story.is-static .story__thread, .story.is-static .story__dots { display: none; }
@media (max-width: 760px) { .story { height: 300vh; } }

/* the corner webs drift a little slower than the page */
.imp::before, .score::before, .aisec::before, .how::before, .faq::before { translate: 0 calc(var(--drift, 0) * 120px - 40px); }

/* scroll-driven elements: no CSS transitions fighting the scroll */
.scrolly .card { transition: transform .12s linear, opacity .12s linear; }
.scrolly .lock svg { transform-origin: 50% 60%; }
.scrolly .end__title { transform-origin: 50% 70%; }
.scrolly .hero .hero__head, .scrolly #shat { will-change: transform, opacity; }

/* scroll-driven tilts and scales must never widen the page */
.imp, .score, .aisec, .how, .faq { overflow-x: clip; }

/* ---------- Scroll, round two: momentum, stretch, pins, zip-lines ---------- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* big type stretches a touch with scroll speed, like silk being pulled */
.scrolly .h2, .scrolly .hero__title, .scrolly .end__title, .scrolly .story__lines { scale: 1 calc(1 + var(--stretch, 0) * .14); transform-origin: 50% 100%; }

/* the elastic silk thread */
.silk { position: fixed; z-index: 40; right: 2px; top: 0; width: 40px; height: 100vh; pointer-events: none; overflow: visible; }
.silk path { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.silk circle { fill: var(--red); filter: drop-shadow(0 0 6px var(--red)); }
@media (max-width: 1100px) { .silk { display: none; } }

/* a silk zip-line draws across the top of each section */
.imp, .score, .aisec, .how, .faq { border-top: 0; }
.zip { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .35) 60%, rgba(255, 42, 68, .9)); transform-origin: left; transform: scaleX(var(--zip, 0)); }
.zip::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); transform: scaleX(calc(1 / max(var(--zip, 0), .01))); opacity: calc(var(--zip, 0) * 2); }

/* the closing web starts close up and pulls back */
.scrolly .end::after { transform: translate(-50%, -50%) scale(var(--zoom, 1)); opacity: var(--wo, 1); }

/* report card: a fix bar the scroll fills */

/* on big screens, two sections hold in place while the scroll plays them through */
@media (min-width: 1001px) {
  .scrolly .steps { position: relative; }
  .scrolly .steps::before { content: ''; position: absolute; left: -18px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: linear-gradient(var(--red), var(--red)) no-repeat top / 100% calc(var(--sp, 0) * 100%), rgba(255, 255, 255, .08); }
}

/* ---------- Motion, round three: living silk, masked text ---------- */

/* the living silk web sits behind everything */
.silkbg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* headlines rise line by line from behind a mask */
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .03em .12em; margin: -.04em -.03em -.12em; }
.mi { display: inline-block; will-change: transform; }
.hero__title .mw, .hero__title .mi { display: inline-block; }
.rw { will-change: opacity; }

/* the bar slides away when you scroll down, back when you scroll up */
.top { transition: background .3s, border-color .3s, transform .6s var(--ease); }
.top.is-hidden { transform: translateY(-100%); }

/* scrubbed elements: GSAP moves them, so no CSS transitions in the way */
.scrolly .card { transition: none; }

/* the impostor cards deal in like a hand */
.scrolly .lineup:not(.is-live) .suspect { opacity: 0; }
.lineup.is-live .suspect { animation: deal .95s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 95ms); }
.suspect:nth-child(odd) { --rot: -9deg; }
.suspect:nth-child(even) { --rot: 9deg; }
@keyframes deal { from { transform: translateY(140px) rotate(var(--rot)); opacity: 0; } }


/* "Try it" prompts at every place there is something to play with */
.tryit { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255, 42, 68, .1); box-shadow: 0 0 0 1px rgba(255, 42, 68, .45) inset; font-size: 14px; color: var(--fg); transition: opacity .4s, transform .4s var(--ease); }
.tryit i { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--red); flex: none; }
.tryit i::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.tryit i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--red); animation: tryping 1.6s ease-out infinite; }
@keyframes tryping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.tryit b { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
.tryit.is-done { opacity: 0; transform: scale(.9); pointer-events: none; }
.imp__head + .tryit, .aisec__head + .tryit { display: flex; width: max-content; max-width: 100%; margin: 26px auto 0; }
.steps + .tryit, .tryit + .steps { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .tryit i::after { animation: none; } }

/* ---------- Round four: no default scroll bar, the symbiote, the coach, fewer collisions ---------- */

/* the default scroll bar is gone; the silk thread on the right is the scroll bar */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.silkbar { position: fixed; z-index: 41; right: 0; top: 0; bottom: 0; width: 26px; cursor: grab; touch-action: none; }
.silk.is-drag ~ .silkbar, .silkbar:active { cursor: grabbing; }
.silk path { transition: stroke .3s, stroke-width .3s; }
.silk circle { transition: r .2s; }
.silk.is-hover path, .silk.is-drag path { stroke: rgba(255, 255, 255, .8); stroke-width: 2; }
.silk.is-hover circle, .silk.is-drag circle { r: 7px; }
@media (max-width: 1100px) { .silk { display: block; } }
@media (max-width: 760px), (hover: none) { .silk, .silkbar { display: none; } }

/* zip-lines keep their sweep, but no knot crowding the thread at the right edge */
.zip::after { display: none; }

.story__lines { z-index: 2; }

/* the "Try it" coach, in front of the screen */
.coach { position: fixed; z-index: 70; left: 50%; bottom: 26px; translate: -50% 0; display: none; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 12px; border-radius: 18px;
  background: rgba(14, 7, 12, .9); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 0 0 1px rgba(255, 42, 68, .5), 0 24px 60px -16px #000, 0 0 40px -10px rgba(255, 42, 68, .5); }
.coach.is-on { display: flex; }
.coach__icon { position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--red); }
.coach__icon i { width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.coach__icon::after { content: ''; position: absolute; inset: -5px; border-radius: 15px; border: 2px solid var(--red); animation: coachping 1.6s ease-out infinite; }
@keyframes coachping { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.coach__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.coach__text b { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--red); }
.coach__text span { font-size: 15px; font-weight: 600; color: #fff; }
.coach button { border: 0; cursor: pointer; font: 700 14px var(--sans); border-radius: 11px; }
.coach__show { margin-left: 6px; padding: 10px 14px; background: var(--red); color: #fff; box-shadow: 0 3px 0 #9c0d20; }
.coach__show:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c0d20; }
.coach__skip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; background: rgba(255, 255, 255, .07); color: var(--muted); }
.coach__skip:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.coach__skip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.coach__x { width: 32px; height: 32px; padding: 0; background: none; color: var(--faint); font-size: 22px !important; line-height: 1; }
.coach__x:hover { color: #fff; }
/* the spotlight: everything else dims, the spot to try glows */
.spot { position: fixed; z-index: 69; pointer-events: none; border-radius: 20px; opacity: 0; transition: opacity .35s; box-shadow: 0 0 0 3px var(--red), 0 0 0 200vmax rgba(5, 2, 7, .72), 0 0 50px 6px rgba(255, 42, 68, .6); }
.spot.is-on { opacity: 1; animation: spotpulse 1.4s ease-in-out infinite; }
@keyframes spotpulse { 50% { box-shadow: 0 0 0 6px var(--red), 0 0 0 200vmax rgba(5, 2, 7, .72), 0 0 70px 12px rgba(255, 42, 68, .7); } }
@media (max-width: 560px) {
  /* on phones the coach takes the dock's place instead of stacking on top of it */
  .coach { bottom: calc(10px + env(safe-area-inset-bottom)); gap: 8px; padding: 10px; flex-wrap: wrap; width: calc(100vw - 24px); }
  .coach__icon { display: none; }
  .coach__text { flex: 1 1 100%; padding-right: 30px; }
  .coach__text span { font-size: 14px; }
  .coach__show, .coach__skip { flex: 1; justify-content: center; margin-left: 0; padding: 9px 12px; }
  .coach__x { position: absolute; right: 4px; top: 4px; }
  body:has(.coach.is-on) .dock { transform: translateY(110%); }
  .end__title { max-width: 100%; font-size: clamp(34px, 10.5vw, 44px); }
}
@media (prefers-reduced-motion: reduce) { .coach__icon::after, .spot.is-on { animation: none; } }

/* ---------- Hero: a clear "Tap to hit it" button on the app ---------- */
.hero .stage__hint { bottom: 22px; padding: 12px 20px 12px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; font: 800 15px var(--sans); text-transform: none; letter-spacing: 0;
  box-shadow: 0 4px 0 #9c0d20, 0 14px 34px -8px var(--red-glow), 0 0 0 6px rgba(255, 42, 68, .18); animation: hintpulse 1.8s ease-in-out infinite; }
.hero .stage__hint::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
@keyframes hintpulse { 50% { box-shadow: 0 4px 0 #9c0d20, 0 14px 34px -8px var(--red-glow), 0 0 0 14px rgba(255, 42, 68, 0); } }
@media (max-width: 560px) { .hero .stage__hint { bottom: 12px; font-size: 13px; padding: 9px 14px 9px 11px; } }
@media (prefers-reduced-motion: reduce) { .hero .stage__hint { animation: none; } }

/* hero comes to the front on scroll */
.scrolly .hero { min-height: 100vh; min-height: 100svh; }
.hero #shat { z-index: 3; transform-origin: 50% 50%; will-change: transform; }
.hero .stage__hint { transform-origin: 50% 100%; }

/* ---------- Report card: the fix runs as you scroll ---------- */
.card__fix { display: none; align-items: center; gap: 12px; margin: 14px 0 4px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #8a7f82; }
.card__fixlabel { min-width: 190px; }
.card__fixbar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(27, 20, 24, .1); overflow: hidden; }
.card__fixbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #2a9a48); }
.card__fix.is-done { color: #1f7a35; }
.card__fix.is-done .card__fixbar i { background: #2a9a48; }
@media (min-width: 1001px) { .scrolly .card__fix { display: flex; } }
.card > .card__scan { position: absolute; left: 14px; right: 14px; height: 3px; top: 0; opacity: 0; pointer-events: none; border-radius: 2px; background: #2a9a48; box-shadow: 0 0 16px 4px rgba(42, 154, 72, .55), 0 -30px 40px -10px rgba(42, 154, 72, .18); }
.area { transition: box-shadow .25s, background .25s; }
.area.is-fixing { box-shadow: 0 0 0 2px var(--red), 0 0 18px rgba(255, 42, 68, .35); animation: fixpulse .3s ease-in-out; }
.area.is-fixed { box-shadow: 0 0 0 2px #2a9a48; }
@keyframes fixpulse { 50% { transform: scale(1.03); } }
.card.is-sealed { box-shadow: 0 0 0 3px rgba(42, 154, 72, .45), 0 40px 90px -40px rgba(42, 154, 72, .5), 0 20px 40px -20px #000; transition: box-shadow .6s; }

/* the chat's result card sits on the chat itself */
.ai { position: relative; }
.ai .ai__end { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; max-width: none; margin: 0; padding: 16px 18px; gap: 10px 20px;
  background: rgba(14, 7, 12, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(255, 42, 68, .5), 0 20px 50px -10px rgba(0, 0, 0, .6); }
.ai .ai__end p { font-size: 15.5px; }
@media (max-width: 560px) { .ai .ai__end { left: 8px; right: 8px; bottom: 8px; padding: 12px; } .ai .ai__end p { font-size: 13.5px; } }