/* Generated by tools/build_from_mockup.py from
   "Phone mockup product roadmap/Scorpio Studio Standalone.dc.html".
   Do not hand-edit the generated parts: re-run the script instead. */

/* ---- mockup <style> block, verbatim ---- */
html { background: #000; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: transparent; color: #fff; font-family: 'Space Grotesk', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #fff; text-decoration: none; }
a:hover { color: #FF1F1F; }
* { box-sizing: border-box; }
@property --beam { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes beamspin { to { --beam: 360deg; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dash { to { background-position: 0 -24px; } }
@keyframes orbdrift { 0% { transform: translate3d(-2%,1%,0) scale(1); } 50% { transform: translate3d(2%,-2%,0) scale(1.06); } 100% { transform: translate3d(-2%,1%,0) scale(1); } }
@keyframes sheen { to { transform: rotate(360deg); } }
@keyframes beampulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 110% 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 -10% 0); } }
@keyframes grainShift { 0% { transform: translate3d(0,0,0); } 20% { transform: translate3d(-3%,2%,0); } 40% { transform: translate3d(2%,-3%,0); } 60% { transform: translate3d(-2%,-2%,0); } 80% { transform: translate3d(3%,1%,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes heroImgIn { from { opacity: 0; } to { opacity: .58; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 8px 0 rgba(255,18,18,.55); transform: scale(1); } 50% { box-shadow: 0 0 16px 3px rgba(255,18,18,.85); transform: scale(1.18); } }
@keyframes labelIn { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes bgDriftA { 0% { transform: translate3d(-6%,-4%,0) scale(1.1); } 50% { transform: translate3d(5%,6%,0) scale(1.25); } 100% { transform: translate3d(-6%,-4%,0) scale(1.1); } }
@keyframes bgDriftB { 0% { transform: translate3d(8%,10%,0) scale(1.2); } 50% { transform: translate3d(-7%,-6%,0) scale(1.05); } 100% { transform: translate3d(8%,10%,0) scale(1.2); } }
@keyframes scanline { to { transform: translateY(100%); } }
@media (max-width: 900px) {
  section { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 92px !important; padding-bottom: 78px !important; }
  section > div { width: 100%; }
  [data-m="phone"] { width: min(198px, 47vw) !important; }
  [data-m="fgrid"] { gap: 34px !important; }
  [data-m="libgrid"] { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  [data-m="libcol"] { gap: 20px !important; }
  [data-m="libcol"] [data-m="phone"] { width: 100% !important; }
  [data-m="wgrid"] { grid-template-columns: 1fr 1fr !important; }
  [data-m="wcard"] { padding: 22px 18px 24px !important; }
  [data-m="wcard"] > div:nth-child(3) { font-size: 13px !important; }
  [data-m="h2tight"] { margin-bottom: 30px !important; }
  [data-m="pricegrid"] { grid-template-columns: 1fr !important; }
  [data-m="rmgrid"] { grid-template-columns: 1fr !important; }
  [data-m="rmgrid"] > div { padding: 34px 26px !important; }
  [data-m="nav"] { display: none !important; }
  [data-m="burger"] { display: flex !important; }
  [data-m="logotext"] { font-size: 15px !important; }
  [data-m="logomark"] { width: 26px !important; height: 26px !important; }
  [data-m="hdrinner"] { padding: 11px 16px !important; gap: 10px !important; }
  [data-m="cta"] { padding: 9px 12px !important; font-size: 13px !important; }
  [data-m="langbtn"] { padding: 9px 11px !important; font-size: 13px !important; }
  [data-m="hero"] { min-height: 100svh !important; padding: 128px 20px 120px !important; }
  [data-m="labeltop"] { top: 84px !important; left: 20px !important; right: 20px !important; font-size: 9.5px !important; }
  [data-m="labelbottom"] { bottom: 26px !important; left: 20px !important; right: 20px !important; font-size: 9.5px !important; gap: 12px !important; }
  [data-m="labelcenter"] { display: none !important; }
  [data-m="herostack"] { gap: 22px !important; }
  [data-m="herofg"] { display: none !important; }
}
@media (max-width: 420px) {
  [data-m="cta"] { display: none !important; }
  [data-m="langfull"] { display: none !important; }
  [data-m="langshort"] { display: inline !important; }
  [data-m="langcaret"] { display: none !important; }
  [data-m="langbtn"] { padding: 9px 10px !important; gap: 6px !important; }
  [data-m="logotext"] { font-size: 12.5px !important; }
  [data-m="logomark"] { width: 22px !important; height: 22px !important; }
  [data-m="menucta"] { display: block !important; }
  [data-m="hdrinner"] { padding: 11px 14px !important; }
}
@media (max-width: 560px) {
  [data-m="logotext"] { font-size: 13.5px !important; }
  [data-m="labeltop"] { top: 78px !important; }
  [data-m="hero"] { padding: 122px 18px 116px !important; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- one class per inline style from the mockup ---- */
.m-1{max-width:100vw;overflow-x:clip;position:relative}
.m-2{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.m-3{position:absolute;top:-20%;left:-15%;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(255,18,18,.055),transparent 68%);filter:blur(40px);animation:bgDriftA 46s ease-in-out infinite}
.m-4{position:absolute;bottom:-25%;right:-15%;width:75vw;height:75vw;border-radius:50%;background:radial-gradient(circle,rgba(255,18,18,.04),transparent 70%);filter:blur(50px);animation:bgDriftB 62s ease-in-out infinite}
.m-5{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.012) 48%,transparent);height:60%;animation:scanline 18s linear infinite}
.m-6{position:fixed;inset:-12%;z-index:70;pointer-events:none;opacity:.75;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4'/><feColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0 1'/></filter><rect width='140' height='140' filter='url(%23g)'/></svg>");background-size:140px 140px;animation:grainShift .6s steps(2) infinite}
.m-7{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 55%,rgba(0,0,0,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 40px -20px rgba(0,0,0,.9)}
.m-8{position:relative;max-width:1280px;width:100%;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
.m-9{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.m-10{width:30px;height:30px;border-radius:7px;display:block;object-fit:cover}
.m-11{font-family:'Archivo Black','Space Grotesk',Helvetica,sans-serif;font-size:19px;font-weight:400;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.m-11:hover{color:#fff}
.m-12{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:clamp(14px,2vw,30px);justify-content:center;font-size:14px;color:#A0A0A0;letter-spacing:.02em;white-space:nowrap;min-width:0;overflow:hidden}
.m-12:hover{color:#A0A0A0}
.m-13{color:#A0A0A0;transition:color .35s ease,opacity .35s ease}
.m-13:hover{color:#FFFFFF}
.m-14{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:auto}
.m-15{position:relative;flex:0 0 auto}
.m-16{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',Helvetica,sans-serif;font-size:14px;font-weight:500;line-height:1.2;padding:10px 16px;border:0;border-radius:6px;cursor:pointer;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#fff;transition:background .35s ease}
.m-16:hover{background:rgba(255,255,255,.12);color:#fff}
.m-17{display:block;width:13px;height:13px;border-radius:50%;border:1px solid #A0A0A0;position:relative;flex:0 0 auto}
.m-18{position:absolute;top:50%;left:0;right:0;height:1px;background:#A0A0A0;transform:translateY(-50%)}
.m-19{position:absolute;top:0;bottom:0;left:50%;width:5px;border-left:1px solid #A0A0A0;border-right:1px solid #A0A0A0;transform:translateX(-50%);border-radius:50%}
.m-20{display:none;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em}
.m-21{display:block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4.5px solid #A0A0A0}
.m-22{display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:100%;padding:6px;border-radius:10px;background:rgba(10,10,10,.86);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 50px -20px rgba(0,0,0,.95);z-index:60}
.m-23{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-align:left;padding:10px 11px;border:0;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.08);color:#fff;transition:background .3s ease}
.m-23:hover{background:rgba(255,255,255,.16);color:#fff}
.m-24{color:#FF1F1F}
.m-24:hover{color:#FF1F1F}
.m-25{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-align:left;padding:10px 11px;border:0;border-radius:8px;cursor:pointer;background:transparent;color:#A0A0A0;transition:background .3s ease,color .3s ease}
.m-25:hover{background:rgba(255,255,255,.1);color:#fff}
.m-26{color:transparent}
.m-26:hover{color:transparent}
.m-27{font-size:14px;font-weight:500;color:#000;background:#FF1414;padding:10px 16px;border-radius:6px;white-space:nowrap;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.m-27:hover{transform:translateY(-1px);box-shadow:0 8px 26px -10px rgba(255,18,18,.9);color:#000}
.m-28{display:none;flex:0 0 auto;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;padding:0 10px;border:0;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.m-29{display:block;height:1.5px;background:#fff;border-radius:2px}
.m-30{display:none;padding:6px 16px 16px;flex-direction:column;gap:2px}
.m-31{font-size:15px;color:#fff;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.m-31:hover{color:#fff}
.m-32{font-size:15px;color:#fff;padding:13px 4px}
.m-32:hover{color:#fff}
.m-33{display:none;margin-top:10px;text-align:center;font-size:15px;font-weight:500;color:#000;background:#FF1414;padding:14px 16px;border-radius:6px}
.m-33:hover{color:#000}
.m-34{height:1px;background:rgba(255,255,255,.07)}
.m-35{height:1px;width:0%;background:linear-gradient(90deg,rgba(255,18,18,.2),#FF1F1F);box-shadow:0 0 12px 0 rgba(255,18,18,.8)}
.m-36{position:absolute;top:50%;left:50%;width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);background-image:url('/site-assets/texture-red.webp');background-size:cover;background-position:50% 50%;filter:saturate(.9) contrast(1.05) brightness(.34)}
.m-37{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 80% at 50% 30%,rgba(0,0,0,.42),rgba(0,0,0,.8) 70%)}
.m-38{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;padding:190px 32px 150px;overflow:hidden}
.m-39{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0;opacity:.55;transition:opacity .4s ease;filter:saturate(.85) contrast(1.05)}
.m-40{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:1;opacity:.55;filter:saturate(.85) contrast(1.05)}
.m-41{position:absolute;inset:-12%;z-index:1;pointer-events:none;opacity:.42;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='0.6'/></svg>");background-size:180px 180px;animation:grainShift .9s steps(3) infinite}
.m-42{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 20%,rgba(0,0,0,.3) 46%,rgba(0,0,0,.72) 82%,#000 100%)}
.m-43{position:absolute;inset:0;z-index:1;opacity:.2;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");background-size:160px 160px;pointer-events:none}
.m-44{position:absolute;top:132px;left:40px;right:40px;z-index:2;display:flex;justify-content:space-between;gap:24px;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.6;letter-spacing:.04em;color:#FF1414;pointer-events:none;animation:labelIn 1.4s ease .6s both}
.m-44:hover{color:#FF1414}
.m-45{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}
.m-46{text-align:right}
.m-47{position:absolute;bottom:52px;left:40px;right:40px;z-index:2;display:flex;justify-content:space-between;gap:24px;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.6;letter-spacing:.04em;color:#FF1414;pointer-events:none;animation:labelIn 1.4s ease .8s both}
.m-47:hover{color:#FF1414}
.m-48{position:relative;max-width:1080px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:30px}
.m-49{position:relative;z-index:2;margin:0;font-size:clamp(42px,7.9vw,120px);line-height:.9;font-weight:700;letter-spacing:-.045em;text-transform:uppercase;color:#FF1414;text-wrap:balance;animation:heroRise 1.2s cubic-bezier(.22,1,.36,1) both}
.m-49:hover{color:#FF1414}
.m-50{position:relative;z-index:4;margin-top:-14px;font-size:clamp(21px,3.8vw,58px);line-height:1;font-weight:600;letter-spacing:-.02em;color:#fff;animation:heroRise 1.2s cubic-bezier(.22,1,.36,1) .1s both}
.m-50:hover{color:#fff}
.m-51{position:relative;z-index:4;margin:0;max-width:560px;font-size:clamp(15px,1.25vw,17px);line-height:1.65;color:#A0A0A0;text-wrap:pretty;animation:fadeUp 1s cubic-bezier(.22,1,.36,1) .25s both}
.m-51:hover{color:#A0A0A0}
.m-52{position:relative;z-index:4;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:6px;animation:fadeUp 1s cubic-bezier(.22,1,.36,1) .45s both}
.m-53{position:relative;padding:1px;border-radius:8px;background:conic-gradient(from var(--beam),transparent 0 80%,#FF1F1F 92%,transparent 100%);animation:beamspin 7.5s linear infinite}
.m-54{display:block;background:#1a1a1a;color:#fff;font-size:15px;font-weight:500;padding:15px 30px;border-radius:7px;transition:background .35s ease,color .35s ease,transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
.m-54:hover{background:#262626;transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(255,18,18,.8);color:#fff}
.m-55{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-top:1px solid #141414;padding:100px 32px}
.m-56{max-width:1240px;width:100%;margin:0 auto}
.m-57{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.3em;color:#FF1F1F;text-transform:uppercase;margin-bottom:26px}
.m-57:hover{color:#FF1F1F}
.m-58{margin:0 0 70px;font-size:clamp(32px,4.6vw,64px);line-height:1.04;font-weight:600;letter-spacing:-.03em;max-width:820px}
.m-59{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:#171717;border:1px solid #171717}
.m-60{background:#0A0A0A;padding:38px 30px 42px;transition:background .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.m-60:hover{background:#111111;transform:translateY(-4px)}
.m-61{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#FF1F1F;letter-spacing:.2em;margin-bottom:26px}
.m-61:hover{color:#FF1F1F}
.m-62{font-size:24px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.m-63{font-size:14px;line-height:1.6;color:#A0A0A0}
.m-63:hover{color:#A0A0A0}
.m-64{max-width:1240px;width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:60px;align-items:center}
.m-65{display:inline-flex;align-items:center;gap:9px;margin-bottom:30px}
.m-66{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.26em;color:#FF1F1F}
.m-66:hover{color:#FF1F1F}
.m-67{margin:0 0 26px;font-size:clamp(34px,4.4vw,60px);line-height:1.04;font-weight:600;letter-spacing:-.03em}
.m-68{margin:0 0 18px;font-size:17px;line-height:1.65;color:#A0A0A0;max-width:480px}
.m-68:hover{color:#A0A0A0}
.m-69{margin:0;font-size:17px;line-height:1.65;color:#A0A0A0;max-width:480px}
.m-69:hover{color:#A0A0A0}
.m-70{justify-self:center}
.m-71{width:min(320px,72vw,30svh);transform-style:preserve-3d}
.m-72{width:100%;aspect-ratio:0.4615;background:linear-gradient(160deg,#1c1c1c,#050505 40%,#0d0d0d);border-radius:11.5%/5.4%;padding:2.8%;box-shadow:0 2px 0 rgba(255,255,255,.06) inset,0 0 0 1px #2a2a2a,0 40px 80px -20px rgba(0,0,0,.9),0 0 90px -30px rgba(255,18,18,.28);position:relative;animation:floaty 8s ease-in-out infinite}
.m-73{position:absolute;left:-1.1%;top:15.4%;width:1.2%;height:4.2%;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#2e2e2e,#121212)}
.m-74{position:absolute;left:-1.1%;top:22.6%;width:1.2%;height:7.4%;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#2e2e2e,#121212)}
.m-75{position:absolute;left:-1.1%;top:32%;width:1.2%;height:7.4%;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#2e2e2e,#121212)}
.m-76{position:absolute;right:-1.1%;top:26.5%;width:1.2%;height:11.6%;border-radius:0 2px 2px 0;background:linear-gradient(270deg,#2e2e2e,#121212)}
.m-77{position:absolute;top:3.1%;left:50%;transform:translateX(-50%);width:31%;aspect-ratio:125/37;background:#000;border-radius:999px;box-shadow:0 0 0 1px rgba(255,255,255,.04);z-index:3}
.m-78{width:100%;height:100%;border-radius:9.6%/4.5%;overflow:hidden;background:#0A0A0A;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:0 12%}
.m-79{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-80{margin:0 0 34px;font-size:17px;line-height:1.65;color:#A0A0A0;max-width:480px}
.m-80:hover{color:#A0A0A0}
.m-81{display:flex;flex-wrap:wrap;gap:10px;max-width:470px}
.m-82{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:#A0A0A0;border:1px solid #1f1f1f;padding:9px 13px}
.m-82:hover{color:#A0A0A0}
.m-83{max-width:1240px;width:100%;margin:0 auto;text-align:center}
.m-84{margin:0 auto 48px;font-size:clamp(34px,4.4vw,60px);line-height:1.04;font-weight:600;letter-spacing:-.03em;max-width:760px}
.m-85{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:start}
.m-86{display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.m-87{width:min(280px,66vw,24svh)}
.m-88{font-size:22px;font-weight:600;margin-bottom:10px}
.m-89{font-size:15px;line-height:1.6;color:#A0A0A0;max-width:300px}
.m-89:hover{color:#A0A0A0}
.m-90{margin:44px auto 0;font-size:17px;line-height:1.65;color:#A0A0A0;max-width:520px;text-align:center}
.m-90:hover{color:#A0A0A0}
.m-91{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-top:1px solid #141414;padding:104px 32px 40px;overflow:hidden}
.m-92{margin:0 0 24px;font-size:clamp(34px,5vw,72px);line-height:1.02;font-weight:600;letter-spacing:-.035em}
.m-93{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.26em;color:#A0A0A0;margin-bottom:52px}
.m-93:hover{color:#A0A0A0}
.m-94{display:flex;justify-content:center;align-items:flex-end;gap:min(3vw,34px);padding-bottom:60px}
.m-95{width:min(240px,26vw,22svh);opacity:.86;margin-bottom:-38px}
.m-96{width:min(300px,32vw,26svh);position:relative;z-index:2}
.m-97{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-top:1px solid #141414;padding:120px 32px 100px;position:relative;overflow:hidden}
.m-98{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(700px,90vw);height:1px;background:linear-gradient(90deg,transparent,#FF1414,transparent)}
.m-99{position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:900px;height:520px;background:none;pointer-events:none}
.m-100{max-width:1000px;width:100%;margin:0 auto;text-align:center;position:relative}
.m-101{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.34em;color:#FF1F1F;margin-bottom:36px}
.m-101:hover{color:#FF1F1F}
.m-102{margin:0 0 28px;font-size:clamp(32px,4.8vw,66px);line-height:1.05;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.m-103{margin:0 auto;max-width:600px;font-size:17px;line-height:1.65;color:#A0A0A0}
.m-103:hover{color:#A0A0A0}
.m-104{display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;border:1px solid rgba(255,18,18,.35);background:rgba(255,18,18,.07);padding:8px 13px;border-radius:4px}
.m-105{margin:0 0 40px;font-size:17px;line-height:1.65;color:#A0A0A0;max-width:490px}
.m-105:hover{color:#A0A0A0}
.m-106{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:34px;min-width:0;font-family:'IBM Plex Mono',monospace;font-size:clamp(8px,0.72vw,10px);letter-spacing:.14em;color:#fff}
.m-106:hover{color:#fff}
.m-107{margin:0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:#6b6b6b}
.m-107:hover{color:#6b6b6b}
.m-108{width:min(310px,70vw,30svh);opacity:.72;filter:saturate(.9)}
.m-109{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#0d0d0d 0 8px,#0A0A0A 8px 16px)}
.m-110{position:relative;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.4em;color:#6b6b6b;text-transform:uppercase}
.m-110:hover{color:#6b6b6b}
.m-111{justify-self:center;order:2}
.m-112{width:min(310px,70vw,30svh);opacity:.72}
.m-113{margin:0 0 34px;font-size:17px;line-height:1.65;color:#A0A0A0;max-width:470px}
.m-113:hover{color:#A0A0A0}
.m-114{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:#171717;border:1px solid #171717;max-width:470px;margin-bottom:34px}
.m-115{background:#111111;padding:20px 18px;font-size:15px;color:#fff;transition:background .4s ease}
.m-115:hover{background:#1a1a1a;color:#fff}
.m-116{background:#111111;padding:20px 18px;font-size:15px;color:#A0A0A0}
.m-116:hover{color:#A0A0A0}
.m-117{margin:0 0 14px;font-size:18px;line-height:1.5;color:#fff;max-width:430px}
.m-117:hover{color:#fff}
.m-118{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-top:1px solid #141414;padding:104px 32px}
.m-119{max-width:1080px;width:100%;margin:0 auto}
.m-120{text-align:center;margin-bottom:64px}
.m-121{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.3em;color:#FF1F1F;margin-bottom:26px}
.m-121:hover{color:#FF1F1F}
.m-122{margin:0 auto;font-size:clamp(32px,4.4vw,58px);line-height:1.05;font-weight:600;letter-spacing:-.03em;max-width:820px;text-wrap:pretty}
.m-123{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07)}
.m-124{background:rgba(8,8,8,.72);padding:46px 44px}
.m-125{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:#fff;margin-bottom:38px}
.m-125:hover{color:#fff}
.m-126{display:flex;flex-direction:column;gap:30px}
.m-127{display:flex;flex-direction:column;gap:5px}
.m-128{font-size:17px;font-weight:600;letter-spacing:.02em}
.m-129{font-size:14px;line-height:1.55;color:#A0A0A0}
.m-129:hover{color:#A0A0A0}
.m-130{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:#FF1F1F;margin-bottom:38px}
.m-130:hover{color:#FF1F1F}
.m-131{font-size:17px;font-weight:600;letter-spacing:.02em;color:#A0A0A0}
.m-131:hover{color:#A0A0A0}
.m-132{font-size:14px;line-height:1.55;color:#6b6b6b}
.m-132:hover{color:#6b6b6b}
.m-133{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-top:1px solid #141414;padding:48px 32px}
.m-134{max-width:1180px;width:100%;margin:0 auto}
.m-135{text-align:center;margin-bottom:30px}
.m-136{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.3em;color:#FF1F1F;margin-bottom:16px}
.m-136:hover{color:#FF1F1F}
.m-137{margin:0 auto 14px;font-size:clamp(28px,3.4vw,44px);line-height:1.05;font-weight:600;letter-spacing:-.03em;max-width:760px}
.m-138{margin:0 auto;font-size:16px;color:#A0A0A0;max-width:380px}
.m-138:hover{color:#A0A0A0}
.m-139{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.m-140{border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(10,10,10,.72);padding:24px 24px;display:flex;flex-direction:column}
.m-141{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.26em;color:#A0A0A0;margin-bottom:16px}
.m-141:hover{color:#A0A0A0}
.m-142{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.m-143{font-size:34px;font-weight:600;letter-spacing:-.04em}
.m-144{font-size:15px;color:#A0A0A0}
.m-144:hover{color:#A0A0A0}
.m-145{font-size:14px;color:#6b6b6b;margin-bottom:16px}
.m-145:hover{color:#6b6b6b}
.m-146{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.m-147{display:flex;gap:12px;align-items:center;font-size:13px;color:#fff}
.m-147:hover{color:#fff}
.m-148{width:5px;height:5px;background:#FF1414;border-radius:50%}
.m-149{display:flex;gap:12px;align-items:center;font-size:13px;color:#6b6b6b}
.m-149:hover{color:#6b6b6b}
.m-150{width:5px;height:5px;background:#3a3a3a;border-radius:50%}
.m-151{margin-top:auto;display:block;text-align:center;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px;font-weight:600;padding:11px 24px;border-radius:7px;transition:background .35s ease,border-color .35s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.m-151:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);transform:translateY(-2px);color:#fff}
.m-152{position:relative;padding:1px;border-radius:4px;background:conic-gradient(from var(--beam),rgba(255,255,255,.07) 0 74%,#FF1F1F 88%,rgba(255,255,255,.07) 100%);animation:beamspin 9s linear infinite}
.m-153{background:#0A0A0A;border-radius:3px;padding:24px 24px;height:100%;box-sizing:border-box;display:flex;flex-direction:column}
.m-154{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.m-155{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.26em;color:#A0A0A0}
.m-155:hover{color:#A0A0A0}
.m-156{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;color:#FF1F1F;border:1px solid rgba(255,31,31,.4);border-radius:999px;padding:4px 10px}
.m-156:hover{color:#FF1F1F}
.m-157{margin-top:auto;position:relative;padding:1px;border-radius:8px;background:conic-gradient(from var(--beam),transparent 0 78%,#FF1F1F 90%,#fff 94%,transparent 100%);animation:beamspin 6s linear infinite;box-shadow:0 0 26px -8px rgba(255,18,18,.55)}
.m-158{display:block;text-align:center;background:#FF1414;color:#000;font-size:14px;font-weight:600;padding:11px 24px;border-radius:7px;transition:background .35s ease,color .35s ease,transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
.m-158:hover{background:#FF2A2A;transform:translateY(-2px);box-shadow:0 16px 38px -16px rgba(255,18,18,.95);color:#000}
.m-159{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;color:#A0A0A0;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 10px}
.m-159:hover{color:#A0A0A0}
.m-160{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-top:1px solid #141414;position:relative;padding:130px 32px;overflow:hidden;text-align:center}
.m-161{position:relative;z-index:2;max-width:860px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px}
.m-162{margin:0;font-size:clamp(34px,5.2vw,74px);line-height:1.02;font-weight:600;letter-spacing:-.035em}
.m-163{margin:0;font-size:17px;color:#A0A0A0}
.m-163:hover{color:#A0A0A0}
.m-164{position:relative;padding:1px;border-radius:8px;background:conic-gradient(from var(--beam),transparent 0 76%,#FF1F1F 90%,#fff 95%,transparent 100%);animation:beamspin 5s linear infinite;box-shadow:0 0 30px -8px rgba(255,18,18,.6);margin-top:8px}
.m-165{display:block;background:#FF1414;color:#000;font-size:16px;font-weight:600;padding:17px 36px;border-radius:7px;transition:background .35s ease,color .35s ease,transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
.m-165:hover{background:#FF2A2A;transform:translateY(-2px);box-shadow:0 18px 44px -16px rgba(255,18,18,.95);color:#000}
.m-166{border-top:1px solid #171717;background:transparent;padding:70px 32px 60px}
.m-167{max-width:1240px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:space-between}
.m-168{display:flex;align-items:center;gap:10px}
.m-169{width:26px;height:26px;border-radius:6px;display:block;object-fit:cover}
.m-170{font-family:'Archivo Black','Space Grotesk',Helvetica,sans-serif;font-size:17px;font-weight:400;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.m-170:hover{color:#fff}
.m-171{display:flex;flex-wrap:wrap;gap:28px;font-size:14px;color:#A0A0A0}
.m-171:hover{color:#A0A0A0}
.m-172{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:#6b6b6b}
.m-172:hover{color:#6b6b6b}

/* ---- site additions (not part of the mockup) ---- */
/* Film grain: the mockup sets opacity .75 with mix-blend-mode:screen, which in
   a browser lifts every black on the page to grey.  Switched off — the owner
   wants the deep black of the reference build back. */
[data-layer="grain"]{display:none}

/* Footer: the owner's four-column layout in the mockup's typography. */
.site-footer{border-top:1px solid #171717;background:transparent;padding:84px 32px 44px}
.site-footer__grid{width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(280px,1.6fr) repeat(2,minmax(150px,.9fr)) minmax(215px,1.05fr);gap:52px}
.site-footer__brand,.site-footer__column{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.site-footer__identity{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.site-footer__identity img{width:26px;height:26px;border-radius:6px;display:block;object-fit:cover}
.site-footer__identity strong{font-family:'Archivo Black','Space Grotesk',Helvetica,sans-serif;font-size:17px;font-weight:400;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.site-footer__brand p{max-width:360px;margin:0;color:#A0A0A0;font-size:15px;line-height:1.65}
.site-footer__column>strong{margin-bottom:6px;color:#FF1F1F;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;line-height:1.4;letter-spacing:.3em;text-transform:uppercase}
.site-footer__column a,.site-footer__column span{color:#A0A0A0;font-size:15px;line-height:1.45;transition:color .3s ease}
.site-footer__column a:hover{color:#fff}
.site-footer__column a.site-footer__accent{color:#FF1414;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.5;letter-spacing:.04em;overflow-wrap:break-word;word-break:normal}
.site-footer__column a.site-footer__accent:hover{color:#fff}
.site-footer__bottom{width:100%;max-width:1240px;margin:64px auto 0;padding-top:28px;border-top:1px solid #171717;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:#6b6b6b;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:900px){.site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}}
@media (max-width:560px){.site-footer{padding:60px 20px 36px}.site-footer__grid{grid-template-columns:1fr;gap:38px}.site-footer__brand p{max-width:100%}.site-footer__bottom{margin-top:44px;flex-direction:column;gap:10px}}

/* Google branding block: the mockup's #next intro typography, verbatim. */
.about-section{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-top:1px solid #141414;padding:110px 32px;position:relative;overflow:hidden}
.about-section__inner{max-width:1000px;width:100%;margin:0 auto;text-align:center;position:relative}
.about-section__eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.34em;color:#FF1F1F;margin-bottom:36px;text-transform:uppercase}
.about-section__title{margin:0 0 28px;font-size:clamp(32px,4.8vw,66px);line-height:1.05;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.about-section__text{margin:0 auto 18px;max-width:640px;font-size:17px;line-height:1.65;color:#A0A0A0}
.about-section__text:last-child{margin-bottom:0}
@media (max-width:900px){.about-section{padding:92px 20px!important}}


/* Scroll reveal: hidden only after the script confirms it can show it again. */
html[data-reveal-ready] [data-reveal]{opacity:0;transform:translateY(16px)}
html[data-reveal-ready] [data-reveal][data-revealed]{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){html[data-reveal-ready] [data-reveal]{opacity:1;transform:none}}

/* Weak devices (html[data-perf="lite"]): keep layout and artwork, drop cost. */
html[data-perf="lite"] [data-layer="grain"],html[data-perf="lite"] [data-layer="scanline"]{display:none}
html[data-perf="lite"] [data-reveal]{opacity:1;transform:none}

[data-language-menu][hidden],[data-mobile-menu][hidden]{display:none!important}
[data-language-menu]:not([hidden]){display:block!important}
[data-mobile-menu]:not([hidden]){display:flex!important}
[data-language-menu] button[aria-checked="true"]{background:rgba(255,255,255,.16);color:#fff}

/* -------------------------------------------------------- document pages */
.page-shell{position:relative;z-index:1;width:min(1240px,calc(100% - 64px));margin:0 auto;padding:150px 0 120px;display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:1px;align-items:start}
.document-head{grid-column:1/-1;max-width:820px;margin:0 0 58px}
.document-head .eyebrow{margin:0 0 22px;color:#FF1F1F;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.4;letter-spacing:.3em;text-transform:uppercase}
.document-head h1{margin:0 0 22px;color:#fff;font-size:clamp(38px,4.6vw,64px);font-weight:600;line-height:1.04;letter-spacing:-.03em}
.document-head>p:last-child{max-width:720px;margin:0;color:#a0a0a0;font-size:17px;line-height:1.7}
.doc-nav{grid-column:1;grid-row:2;position:sticky;top:96px;display:flex;flex-direction:column;width:100%;margin:0;border:1px solid #171717;background:#080808;overflow:hidden}
.doc-nav::before{content:attr(aria-label);padding:22px 24px;border-bottom:1px solid #171717;color:#FF1F1F;font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.4;letter-spacing:.3em;text-transform:uppercase}
.doc-nav a{padding:17px 24px;border-bottom:1px solid #171717;color:#a0a0a0;font-size:14px;line-height:1.4;transition:background .3s ease,color .3s ease}
.doc-nav a:last-child{border-bottom:0}
.doc-nav a:hover{background:#101010;color:#fff}
.doc-nav a[aria-current="page"]{background:#101010;color:#fff;box-shadow:inset 2px 0 0 #FF1F1F}
.document{grid-column:2;grid-row:2;width:100%;padding:54px clamp(30px,5vw,72px);border:1px solid #171717;background:#0a0a0a;color:#b3b3b3;font-size:16px;line-height:1.75}
.document[hidden]{display:none}
.document h2{display:none}
.document .meta{margin:0 0 48px;color:#6b6b6b;font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.7;letter-spacing:.05em;text-transform:uppercase}
.document h3{margin:48px 0 14px;color:#fff;font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.015em}
.document h3:first-of-type{margin-top:0}
.document strong{color:#fff;font-weight:600}
.document a{color:#ff5353;text-decoration:underline;text-decoration-color:rgba(255,83,83,.5);text-underline-offset:3px}
.document a:hover{color:#fff;text-decoration-color:#FF1F1F}
.document ul,.document ol{padding-left:24px}
.document li+li{margin-top:10px}
.document .callout{margin:34px 0;padding:22px 24px;border:1px solid #2a2020;border-left:2px solid #FF1F1F;background:#0d0a0a;color:#c4c4c4}
@media (max-width:900px){.page-shell{grid-template-columns:210px minmax(0,1fr)}.document-head h1{font-size:clamp(38px,8vw,60px)}}
@media (max-width:700px){
  .page-shell{width:calc(100% - 32px);padding:104px 0 82px;display:block}
  .document-head{margin-bottom:34px}
  .document-head h1{font-size:clamp(36px,12vw,52px)}
  .document-head>p:last-child{font-size:15px}
  .doc-nav{position:static;display:grid;grid-template-columns:1fr 1fr;margin-bottom:1px}
  .doc-nav::before{grid-column:1/-1;padding:18px 20px}
  .doc-nav a{min-width:0;padding:15px 18px;border-right:1px solid #171717;overflow-wrap:anywhere}
  .doc-nav a:nth-child(2n){border-right:0}
  .doc-nav a:last-child{grid-column:1/-1;border-right:0}
  .document{padding:38px 24px;font-size:15px;line-height:1.7;overflow-wrap:anywhere}
  .document h3{margin-top:40px;font-size:20px}
}

/* Hero: one full screen, and no page texture showing through the clip.
   The mockup sizes the hero as min-height:92vh plus a fixed 190px/150px
   padding, so on a short window (laptop at ~600-700px) it grew to ~800px and
   the first screen was cut off.  Padding and headline now scale with the
   shorter axis as well; on tall viewports the computed values are the
   mockup's own, so desktop and phone are unchanged.

   background:#000 puts an opaque plate under the clip.  The poster and the
   video both carry opacity .55 from the mockup, and the fixed red texture
   sits behind them, so the hero read as a double exposure. */
#top{min-height:100svh;background:#000;padding:clamp(96px,19vh,190px) 32px clamp(72px,15vh,150px)}
#top h1{font-size:clamp(42px,min(7.9vw,12.5vh),120px)}

/* Phones: two places where fixed minimums from the mockup pushed content past
   the viewport edge.  Measured at 360x640 before the fix: the hero's own
   scrollWidth was 380 against a 360 client width, and every feature grid
   overflowed its container by 34px.

   1. The feature grids ask for a 330px column (`minmax(330px,1fr)`), which
      stops fitting below a ~394px viewport, so the right side of each feature
      block was cut off.  `min(330px,100%)` keeps the desktop behaviour and lets
      the column shrink on a phone.
   2. The hero's corner labels are a flex row whose two columns cannot shrink
      below their longest word, so the right-hand one ran past the edge and
      "scorpiostudio.app" was clipped.

   Class names here come from the generated mockup stylesheet; see the note in
   CLAUDE_HANDOVER.md about not re-running tools/build_from_mockup.py. */
.m-64{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
@media (max-width:600px){
  #top .m-44,#top .m-47{width:auto;max-width:calc(100% - 40px);gap:12px}
  #top .m-44>*,#top .m-47>*{min-width:0;overflow-wrap:anywhere}
}

/* Footer on phones: the mockup's blanket rule
       @media (max-width:900px){ section{ min-height:100svh;
           padding-top:92px!important; padding-bottom:78px!important } }
   is meant for the full-screen content sections, but the footer's brand and
   contacts blocks are <section> too, so each grew to a whole screen with the
   content centred in it.  The footer came out 2262px tall at a 414px viewport
   and read as a series of empty panels while scrolling.

   Reset that for the footer and match the metrics of the document pages, whose
   footer is built from its own mockup and stacks tightly: 32px side padding,
   48px between blocks, 12px between links, 14px type.  Desktop is untouched -
   everything here is inside the same max-width:900px query. */
@media (max-width:900px){
  .site-footer section{min-height:0;padding-top:0!important;padding-bottom:0!important;justify-content:flex-start}
  .site-footer{padding:56px 32px 40px}
  .site-footer__grid{grid-template-columns:1fr;gap:48px}
  .site-footer__brand,.site-footer__column{gap:12px}
  .site-footer__column a,.site-footer__column span{font-size:14px}
  .site-footer__brand p{font-size:14px}
  .site-footer__bottom{margin-top:48px;padding-top:24px}
}