/* Slake "Night shift" — extracted from the design handoff.
   tokens + shared interaction rules + deduped styles (s1..s397) */

/* Slake "Night shift" design tokens
   Pulled from the design-source files. Use these instead of the raw hex values
   when you port the inline styles. */

:root {
  /* ---------- surfaces (darkest → lightest) ---------- */
  --bg:            #070B14;  /* page background */
  --bg-deep:       #091020;  /* inset panels, card footers */
  --surface:       #0C1424;  /* cards, panels */
  --surface-2:     #0F1A2E;  /* nested surfaces, mock UI */
  --surface-hi:    #16223A;  /* selected tab / chip */
  --line:          #141E30;  /* section dividers */
  --border:        #1C2A42;  /* card borders */
  --border-hi:     #233150;  /* inputs, dashed placeholders */
  --border-strong: #33425E;  /* ghost buttons */
  --skeleton:      #2A3B5C;  /* mock-UI blocks, outline text stroke */

  /* ---------- text ---------- */
  --text-strong:   #FFFFFF;
  --text:          #E6EDF5;
  --text-2:        #C3CEDD;
  --text-muted:    #AEBACB;
  --text-subtle:   #8B99AE;
  --text-faint:    #6B7A92;  /* timestamps only, never body copy */
  --outline-text:  #5B6E8C;  /* stroke color for outlined headline lines */

  /* ---------- brand accent: cyan (from the logo) ---------- */
  --cyan:          #22C3DD;  /* primary buttons (dark text on it) */
  --cyan-hover:    #5CD6EA;
  --cyan-text:     #7DE0EF;  /* links / accents as text on dark */
  --cyan-deep:     #0369A1;  /* glow partner */

  /* ---------- emergency: orange ---------- */
  --orange:        #FB923C;  /* dots, highlights, headline accent */
  --orange-text:   #FDBA74;
  --orange-btn:    #C2410C;  /* white text on it passes 4.5:1 */
  --orange-btn-hi: #9A3412;
  --rescue-bg:     #120C0A;  /* rescue panels */
  --rescue-bg-2:   #0F0A08;
  --rescue-border: #3A2414;
  --rescue-border-hi: #4A2E1C;
  --rescue-text:   #D6C3B8;
  --rescue-text-2: #F5E6DC;
  --rescue-muted:  #B89A88;

  /* ---------- status / categories ---------- */
  --green:         #34D399;  /* live dots, "resolved" */
  --green-text:    #6EE7B7;
  --red-text:      #FCA5A5;
  --red-bar:       #F87171;
  --sky-text:      #7DD3FC;
  --violet:        #C4B5FD;  /* mobile / app category */

  /* ---------- type ---------- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; /* 700 / 800 */
  --font-body:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; /* 400 / 500 / 600 */
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace; /* 400 / 500 */

  --h1:        clamp(3.2rem, 8vw, 7.4rem);   /* home hero; inner pages use clamp(3rem, 7vw, 6.4rem) */
  --h2:        clamp(2.4rem, 5vw, 4.4rem);
  --h1-lh: 0.9;  --h2-lh: 0.95;
  --h-tracking: -0.04em;                      /* h1 uses -0.045em */
  --lead:      19px;   /* hero paragraph, line-height 1.55 */
  --body:      16px;   /* line-height 1.55–1.6 */
  --small:     15px;
  --eyebrow:   13px;   /* mono, e.g. "// what we do" */

  /* ---------- layout ---------- */
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-gap: 128px;  /* homepage; inner pages use 120px */

  /* ---------- radii ---------- */
  --r-pill: 999px;
  --r-btn: 12px;   /* nav buttons use 10px */
  --r-input: 12px;
  --r-card: 22px;
  --r-panel: 28px;

  /* ---------- effects ---------- */
  --shadow-panel: 0 50px 100px rgba(0, 0, 0, 0.6);
  --glow-cyan: radial-gradient(circle, rgba(34,195,221,0.22), rgba(34,195,221,0) 62%);
  --glow-orange: radial-gradient(circle, rgba(234,88,12,0.28), rgba(234,88,12,0) 62%);
  --grid-bg: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); /* size 64px 64px */
  --stripes-orange: repeating-linear-gradient(135deg, rgba(251,146,60,0.05) 0 2px, transparent 2px 18px);
}


/* ---------- shared rules (hover states, keyframes) ---------- */

body{margin:0;background:#070B14;color:#E6EDF5;font-family:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:#7DE0EF}a:hover{color:#FFFFFF}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
.nav-link{color:#AEBACB;text-decoration:none;font-weight:500}.nav-link:hover{color:#FFFFFF}
.btn-cyan{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:12px;background:#22C3DD;color:#070B14;font-weight:600;font-size:15.5px;text-decoration:none;transition:transform 160ms,box-shadow 160ms}
.btn-cyan:hover{transform:translateY(-1px);box-shadow:0 0 0 6px rgba(34,195,221,0.18),0 12px 32px rgba(34,195,221,0.35) !important;color:#070B14 !important}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:12px;border:1px solid #1C2A42;background:rgba(12,20,36,.5);color:#FDBA74;font-weight:600;font-size:15.5px;text-decoration:none;transition:background 160ms,color 160ms}
.btn-ghost:hover{background:rgba(255,255,255,0.06) !important;color:#FFFFFF !important}
.btn-orange:hover{background:#9A3412 !important;color:#FFFFFF !important}
.tab{transition:background 160ms,border-color 160ms,color 160ms}
.tab:hover{border-color:#3B4C6B !important}
.lift{transition:transform 220ms,border-color 220ms}
.lift:hover{transform:translateY(-4px);border-color:#2E4466 !important}
.card-link{color:#7DE0EF;text-decoration:none;font-weight:600}.card-link:hover{color:#FFFFFF;text-decoration:underline}
.foot-link{color:#8B99AE;text-decoration:none}.foot-link:hover{color:#FFFFFF}
details summary{list-style:none;cursor:pointer}details summary::-webkit-details-marker{display:none}
details[open] .faq-plus{transform:rotate(45deg)}
input,select,textarea{font:inherit}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid #22C3DD;outline-offset:2px}

@keyframes l1{0%,2%{opacity:0;transform:translateY(6px)}5%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes l2{0%,10%{opacity:0;transform:translateY(6px)}13%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes l3{0%,20%{opacity:0;transform:translateY(6px)}23%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes l4{0%,30%{opacity:0;transform:translateY(6px)}33%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes l5{0%,40%{opacity:0;transform:translateY(6px)}43%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes l6{0%,50%{opacity:0;transform:translateY(6px)}53%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pillA{0%,51%{opacity:1}53%,100%{opacity:0}}
@keyframes pillB{0%,51%{opacity:0}53%,96%{opacity:1}100%{opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,146,60,0.55)}70%{box-shadow:0 0 0 12px rgba(251,146,60,0)}100%{box-shadow:0 0 0 0 rgba(251,146,60,0)}}
@keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(52,211,153,0.55)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,40px) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes fill{0%{width:6%}80%,100%{width:100%}}
@keyframes rise{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
.a-l1{animation:l1 12s infinite}.a-l2{animation:l2 12s infinite}.a-l3{animation:l3 12s infinite}
.a-l4{animation:l4 12s infinite}.a-l5{animation:l5 12s infinite}.a-l6{animation:l6 12s infinite}
.a-pillA{animation:pillA 12s infinite}.a-pillB{animation:pillB 12s infinite}
.a-pulse{animation:pulse 1.8s infinite}.a-pulseG{animation:pulseG 2.2s infinite}
.a-marquee{animation:marquee 38s linear infinite}
.a-drift{animation:drift 18s ease-in-out infinite}
.a-blink{animation:blink 1.1s steps(1) infinite}
.a-fill{animation:fill 6s ease-in-out infinite}
.a-rise{animation:rise 6s ease-in-out infinite}
.still .a-l1,.still .a-l2,.still .a-l3,.still .a-l4,.still .a-l5,.still .a-l6,.still .a-pillB,.still .a-pulse,.still .a-pulseG,.still .a-marquee,.still .a-drift,.still .a-blink,.still .a-fill,.still .a-rise{animation:none !important}
.still .a-pillA{display:none}
@media (prefers-reduced-motion: reduce){.a-l1,.a-l2,.a-l3,.a-l4,.a-l5,.a-l6,.a-pillB,.a-pulse,.a-pulseG,.a-marquee,.a-drift,.a-blink,.a-fill,.a-rise{animation:none !important}.a-pillA{display:none}}

.s1 { width: 100%; background: #070B14; color: #E6EDF5; font-family: 'Geist', system-ui, sans-serif; overflow: hidden }
.s2 { position: relative; overflow: hidden; border-bottom: 1px solid #141E30 }
.s3 { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 64px 64px }
.s4 { position: absolute; width: 900px; height: 900px; right: -260px; top: -340px; border-radius: 50%; background: radial-gradient(circle, rgba(34,195,221,0.22), rgba(34,195,221,0) 62%) }
.s5 { position: absolute; width: 640px; height: 640px; left: -280px; bottom: -360px; border-radius: 50%; background: radial-gradient(circle, rgba(3,105,161,0.28), rgba(3,105,161,0) 65%) }
.s6 { position: relative; max-width: 1440px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px }
.s7 { display: flex; align-items: center }
.s8 { height: 34px; width: auto; display: block }
.s9 { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid #1C2A42; border-radius: 999px; background: rgba(14,22,38,0.7); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; color: #AEBACB }
.s10 { width: 7px; height: 7px; border-radius: 50%; background: #34D399 }
.s11 { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-left: auto; font-size: 15px }
.s12 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.s13 { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; color: #FDBA74; text-decoration: none; font-size: 14px; font-weight: 600 }
.s14 { width: 8px; height: 8px; border-radius: 50%; background: #FB923C }
.s15 { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 10px; background: #22C3DD; color: #070B14; text-decoration: none; font-size: 15px; font-weight: 600 }
.s16 { position: relative; max-width: 1440px; margin: 0 auto; padding: 64px clamp(16px, 4vw, 40px) 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px 64px }
.s17 { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 30px }
.s18 { margin: 0; display: flex; flex-direction: column; font-family: 'Bricolage Grotesque', 'Segoe UI', sans-serif; font-weight: 800; font-size: clamp(3.2rem, 8vw, 7.4rem); line-height: 0.9; letter-spacing: -0.045em }
.s19 { color: #FB923C; -webkit-text-stroke: 2px #FB923C; transition: color 240ms }
.s20 { color: transparent; -webkit-text-stroke: 2px #5B6E8C; transition: color 240ms }
.s21 { margin: 0; max-width: 33rem; font-size: 19px; line-height: 1.55; color: #AEBACB }
.s22 { display: flex; flex-direction: column; gap: 12px }
.s23 { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #8B99AE }
.s24 { display: flex; flex-wrap: wrap; gap: 8px }
.s25 { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid #FB923C; background: #16223A; color: #FFFFFF; font-size: 15px; font-weight: 600; cursor: pointer }
.s26 { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid #233150; background: rgba(12,20,36,0.6); color: #AEBACB; font-size: 15px; font-weight: 600; cursor: pointer }
.s27 { width: 8px; height: 8px; border-radius: 50%; background: #22C3DD }
.s28 { width: 8px; height: 8px; border-radius: 50%; background: #C4B5FD }
.s29 { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px }
.s30 { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 12px; background: #FB923C; color: #070B14; text-decoration: none; font-size: 16px; font-weight: 600 }
.s31 { font-size: 14px; color: #8B99AE }
.s32 { flex: 1 1 460px; min-width: 0; position: relative }
.s33 { position: absolute; inset: -1px; border-radius: 20px; background: linear-gradient(140deg, rgba(251,146,60,0.55), rgba(34,195,221,0) 45%) }
.s34 { position: relative; background: #0C1424; border: 1px solid #1C2A42; border-radius: 20px; box-shadow: 0 50px 100px rgba(0,0,0,0.6); overflow: hidden }
.s35 { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #1C2A42; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #8B99AE }
.s36 { display: flex; gap: 6px }
.s37 { width: 10px; height: 10px; border-radius: 50%; background: #233150 }
.s38 { margin-left: auto; position: relative; display: inline-grid }
.s39 { grid-area: 1 / 1; padding: 3px 10px; border-radius: 999px; background: rgba(248,113,113,0.14); color: #FCA5A5 }
.s40 { grid-area: 1 / 1; padding: 3px 10px; border-radius: 999px; background: rgba(52,211,153,0.14); color: #6EE7B7 }
.s41 { padding: 12px 20px 8px; display: flex; flex-direction: column; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; min-height: 330px; box-sizing: border-box }
.s42 { display: grid; grid-template-columns: 52px 60px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dashed #1A2640 }
.s43 { color: #6B7A92 }
.s44 { color: #FCA5A5 }
.s45 { color: #FDBA74 }
.s46 { color: #7DD3FC }
.s47 { color: #C4B5FD }
.s48 { display: grid; grid-template-columns: 52px 60px 1fr; gap: 12px; padding: 12px 0 }
.s49 { color: #6EE7B7 }
.s50 { color: #FFFFFF }
.s51 { display: inline-block; width: 8px; height: 16px; margin-left: 6px; vertical-align: -3px; background: #6EE7B7 }
.s52 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 14px 20px; background: #091020; border-top: 1px solid #1C2A42; font-size: 13px; color: #8B99AE }
.s53 { position: relative; border-top: 1px solid #141E30; overflow: hidden; padding: 18px 0; background: rgba(9,16,32,0.6) }
.s54 { display: flex; width: max-content; gap: 48px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; color: #8B99AE; white-space: nowrap }
.s55 { color: #2A3B5C }
.s56 { border-bottom: 1px solid #141E30 }
.s57 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) }
.s58 { padding: 44px 28px 44px 0; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid #141E30 }
.s59 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 60px; line-height: 1; letter-spacing: -0.04em; color: #FFFFFF }
.s60 { color: #22C3DD }
.s61 { font-size: 15px; color: #8B99AE }
.s62 { padding: 44px 28px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid #141E30 }
.s63 { padding: 44px 0 44px 28px; display: flex; flex-direction: column; gap: 8px }
.s64 { font-size: 15px }
.s65 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px }
.s66 { font-family: 'Geist Mono', monospace; font-size: 13px; color: #6B7A92 }
.s67 { flex: 1 1 600px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px }
.s68 { height: 52px; border: 1px dashed #233150; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #8B99AE }
.s69 { padding: 112px 0 0 }
.s70 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) }
.s71 { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid #3A2414; background: #120C0A; padding: clamp(28px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 48px }
.s72 { position: absolute; width: 700px; height: 700px; left: -220px; top: -380px; border-radius: 50%; background: radial-gradient(circle, rgba(234,88,12,0.28), rgba(234,88,12,0) 62%) }
.s73 { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(251,146,60,0.05) 0 2px, transparent 2px 18px) }
.s74 { position: relative; flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px }
.s75 { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(251,146,60,0.12); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #FDBA74 }
.s76 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 0.95; letter-spacing: -0.04em; color: #FFFFFF }
.s77 { color: #FB923C }
.s78 { margin: 0; max-width: 32rem; font-size: 18px; line-height: 1.6; color: #D6C3B8 }
.s79 { display: flex; flex-wrap: wrap; gap: 12px }
.s80 { display: inline-flex; align-items: center; min-height: 54px; padding: 0 26px; border-radius: 12px; background: #C2410C; color: #FFFFFF; text-decoration: none; font-size: 16px; font-weight: 600 }
.s81 { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 22px; border-radius: 12px; border: 1px solid #4A2E1C; color: #F5E6DC; text-decoration: none; font-size: 16px; font-weight: 500 }
.s82 { position: relative; flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px }
.s83 { font-family: 'Geist Mono', monospace; font-size: 13px; color: #B89A88 }
.s84 { padding: 10px 14px; border-radius: 999px; border: 1px solid #4A2E1C; background: rgba(18,12,10,0.8); font-size: 15px; color: #F5E6DC }
.s85 { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid #3A2414 }
.s86 { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #3A2414 }
.s87 { font-family: 'Geist Mono', monospace; color: #FB923C; font-size: 14px }
.s88 { font-size: 16px; color: #F5E6DC }
.s89 { display: flex; gap: 16px; padding: 16px 0 }
.s90 { padding: 128px 0 0 }
.s91 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 48px }
.s92 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 48px }
.s93 { flex: 1 1 520px; display: flex; flex-direction: column; gap: 16px }
.s94 { font-family: 'Geist Mono', monospace; font-size: 13px; color: #22C3DD }
.s95 { color: transparent; -webkit-text-stroke: 1.5px #5B6E8C }
.s96 { flex: 1 1 340px; margin: 0; font-size: 18px; line-height: 1.6; color: #AEBACB }
.s97 { display: flex; flex-direction: column; gap: 16px }
.s98 { display: flex; flex-wrap: wrap; gap: 16px }
.s99 { flex: 1.35 1 440px; min-width: 0; background: #0C1424; border: 1px solid #1C2A42; border-radius: 22px; padding: 30px; display: flex; flex-wrap: wrap; gap: 28px }
.s100 { flex: 1 1 240px; display: flex; flex-direction: column; gap: 14px }
.s101 { font-family: 'Geist Mono', monospace; font-size: 13px; color: #FDBA74 }
.s102 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -0.02em; color: #FFFFFF }
.s103 { margin: 0; font-size: 16px; line-height: 1.55; color: #AEBACB }
.s104 { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid #1C2A42; font-size: 15px }
.s105 { color: #8B99AE }
.s106 { flex: 1 1 220px; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 22px; border-radius: 16px; background: #091020; border: 1px solid #1A2640; font-family: 'Geist Mono', monospace; font-size: 13px }
.s107 { display: flex; flex-direction: column; gap: 6px }
.s108 { display: flex; justify-content: space-between; color: #FCA5A5 }
.s109 { height: 10px; border-radius: 999px; background: #F87171; width: 100% }
.s110 { display: flex; justify-content: space-between; color: #6EE7B7 }
.s111 { height: 10px; border-radius: 999px; background: #34D399; width: 15% }
.s112 { display: flex; flex-direction: column; gap: 6px; color: #AEBACB }
.s113 { flex: 1 1 340px; min-width: 0; background: #0C1424; border: 1px solid #1C2A42; border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 14px }
.s114 { font-family: 'Geist Mono', monospace; font-size: 13px; color: #7DE0EF }
.s115 { margin-top: 8px; border: 1px solid #1A2640; border-radius: 12px; overflow: hidden; background: #091020 }
.s116 { display: flex; gap: 5px; padding: 9px 12px; border-bottom: 1px solid #1A2640 }
.s117 { width: 8px; height: 8px; border-radius: 50%; background: #233150 }
.s118 { padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.s119 { grid-column: 1 / -1; height: 40px; border-radius: 6px; background: linear-gradient(90deg, #1B3354, #12223C) }
.s120 { height: 52px; border-radius: 6px; background: #1C2A42 }
.s121 { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-family: 'Geist Mono', monospace; font-size: 12.5px }
.s122 { padding: 10px 12px; border: 1px solid #1A2640; border-radius: 10px; background: #091020 }
.s123 { color: #7DE0EF }
.s124 { font-family: 'Geist Mono', monospace; font-size: 13px; color: #C4B5FD }
.s125 { flex: 1 1 200px; display: flex; justify-content: center; align-items: flex-end; gap: 14px; padding: 20px; border-radius: 16px; background: #091020; border: 1px solid #1A2640 }
.s126 { width: 84px; height: 168px; border-radius: 18px; border: 2px solid #2A3B5C; padding: 10px 8px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px }
.s127 { height: 44px; border-radius: 8px; background: #1B3354 }
.s128 { height: 7px; width: 70%; border-radius: 4px; background: #2A3B5C }
.s129 { height: 20px; border-radius: 6px; background: #1C2A42 }
.s130 { margin-top: auto; height: 18px; border-radius: 6px; background: #C4B5FD }
.s131 { width: 84px; height: 168px; border-radius: 14px; border: 2px solid #2A3B5C; padding: 10px 8px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; transform: translateY(-16px) }
.s132 { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 26px 30px; border-radius: 22px; border: 1px solid #1C3A4E; background: linear-gradient(100deg, #0B2132, #0C1424 60%) }
.s133 { flex: 1 1 420px; display: flex; flex-direction: column; gap: 4px }
.s134 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; color: #FFFFFF }
.s135 { font-size: 16px; color: #AEBACB }
.s136 { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 12px; background: #22C3DD; color: #070B14; text-decoration: none; font-size: 15px; font-weight: 600 }
.s137 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 44px }
.s138 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px }
.s139 { font-size: 16px }
.s140 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 16px }
.s141 { background: #0C1424; border: 1px solid #1C2A42; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column }
.s142 { position: relative; aspect-ratio: 4 / 5; overflow: hidden }
.s143 { width: 100%; height: 100%; object-fit: cover; display: block }
.s144 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,20,0) 45%, rgba(12,20,36,0.95) 100%) }
.s145 { position: absolute; left: 18px; top: 18px; padding: 5px 11px; border-radius: 999px; background: rgba(7,11,20,0.78); font-family: 'Geist Mono', monospace; font-size: 12.5px; color: #7DE0EF }
.s146 { position: absolute; left: 22px; right: 22px; bottom: 16px; margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: #FFFFFF }
.s147 { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1 }
.s148 { margin: 0; font-size: 15px; line-height: 1.55; color: #AEBACB }
.s149 { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px }
.s150 { padding: 5px 10px; border-radius: 999px; background: #141E30; color: #C3CEDD }
.s151 { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block }
.s152 { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #111 }
.s153 { position: absolute; left: 18px; top: 18px; padding: 5px 11px; border-radius: 999px; background: rgba(7,11,20,0.78); font-family: 'Geist Mono', monospace; font-size: 12.5px; color: #C4B5FD }
.s154 { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding: 26px 30px; border-radius: 22px; border: 1px dashed #2E4466 }
.s155 { flex: 1 1 420px; margin: 0; font-size: 17px; line-height: 1.5; color: #C3CEDD }
.s156 { position: relative }
.s157 { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: linear-gradient(90deg, #22C3DD, #34D399) }
.s158 { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 32px 24px }
.s159 { display: flex; flex-direction: column; gap: 14px }
.s160 { width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; border: 2px solid #22C3DD; background: #070B14 }
.s161 { font-family: 'Geist Mono', monospace; font-size: 14px; color: #22C3DD }
.s162 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 24px; color: #FFFFFF }
.s163 { width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; border: 2px solid #7DD3FC; background: #070B14 }
.s164 { font-family: 'Geist Mono', monospace; font-size: 14px; color: #7DD3FC }
.s165 { width: 24px; height: 24px; border-radius: 50%; background: #34D399 }
.s166 { font-family: 'Geist Mono', monospace; font-size: 14px; color: #6EE7B7 }
.s167 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: stretch }
.s168 { background: #0C1424; border: 1px solid #1C2A42; border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 20px }
.s169 { display: flex; align-items: baseline; gap: 8px }
.s170 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 52px; letter-spacing: -0.04em; color: #FFFFFF }
.s171 { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #C3CEDD }
.s172 { margin-top: auto }
.s173 { position: relative; border-radius: 22px; padding: 1px; background: linear-gradient(160deg, #22C3DD, #1C2A42 55%) }
.s174 { height: 100%; box-sizing: border-box; background: #0C1A2C; border-radius: 21px; padding: 32px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 30px 80px rgba(34,195,221,0.12) }
.s175 { display: flex; justify-content: space-between; align-items: center; gap: 12px }
.s176 { padding: 4px 10px; border-radius: 999px; background: rgba(34,195,221,0.14); font-size: 12px; color: #7DE0EF }
.s177 { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 12px; background: #22C3DD; color: #070B14; text-decoration: none; font-size: 15px; font-weight: 600 }
.s178 { margin: 0; font-size: 15px; color: #8B99AE }
.s179 { margin: 0; display: flex; flex-direction: column; gap: 32px; padding-top: 40px; border-top: 1px solid #1C2A42 }
.s180 { margin: 0; max-width: 62rem; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em; color: #FFFFFF }
.s181 { display: flex; align-items: center; gap: 14px }
.s182 { width: 52px; height: 52px; border-radius: 50%; background: #141E30; border: 1px dashed #2A3B5C }
.s183 { display: flex; flex-direction: column; gap: 2px }
.s184 { font-weight: 600; font-size: 16px; color: #FFFFFF }
.s185 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 40px 64px }
.s186 { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px }
.s187 { margin: 0; font-size: 17px; line-height: 1.6; color: #AEBACB }
.s188 { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid #1C2A42 }
.s189 { border-bottom: 1px solid #1C2A42 }
.s190 { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding: 22px 0; font-size: 19px; font-weight: 600; color: #FFFFFF }
.s191 { font-size: 28px; font-weight: 400; color: #22C3DD; transition: transform 160ms }
.s192 { margin: 0 0 24px; max-width: 44rem; font-size: 16px; line-height: 1.6; color: #AEBACB }
.s193 { padding: 128px 0 96px }
.s194 { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid #1C2A42; background: #0C1424; padding: clamp(28px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 48px }
.s195 { position: absolute; width: 760px; height: 760px; right: -300px; bottom: -420px; border-radius: 50%; background: radial-gradient(circle, rgba(34,195,221,0.16), rgba(34,195,221,0) 62%) }
.s196 { position: relative; flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 22px }
.s197 { margin: 0; font-size: 18px; line-height: 1.6; color: #AEBACB }
.s198 { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; font-size: 16px }
.s199 { text-decoration: none }
.s200 { position: relative; flex: 1.3 1 440px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px }
.s201 { display: flex; flex-direction: column; gap: 8px }
.s202 { font-size: 14px; font-weight: 500; color: #C3CEDD }
.s203 { min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid #233150; background: #070B14; color: #FFFFFF; font-size: 16px; box-sizing: border-box }
.s204 { min-height: 50px; padding: 0 12px; border-radius: 12px; border: 1px solid #233150; background: #070B14; color: #FFFFFF; font-size: 16px }
.s205 { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px }
.s206 { padding: 12px 14px; border-radius: 12px; border: 1px solid #233150; background: #070B14; color: #FFFFFF; font-size: 16px; resize: vertical; box-sizing: border-box }
.s207 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px }
.s208 { min-height: 54px; padding: 0 30px; border: 0; border-radius: 12px; background: #22C3DD; color: #070B14; font-size: 16px; font-weight: 600; cursor: pointer }
.s209 { position: relative; border-top: 1px solid #141E30; overflow: hidden }
.s210 { max-width: 1440px; margin: 0 auto; padding: 64px clamp(16px, 4vw, 40px) 0; display: flex; flex-wrap: wrap; gap: 40px 56px; color: #8B99AE }
.s211 { flex: 1.4 1 260px; display: flex; flex-direction: column; gap: 16px }
.s212 { height: 30px; width: auto; align-self: flex-start }
.s213 { margin: 0; max-width: 22rem; font-size: 15px; line-height: 1.6 }
.s214 { flex: 1 1 140px; display: flex; flex-direction: column; gap: 12px; font-size: 15px }
.s215 { font-family: 'Geist Mono', monospace; font-size: 13px; color: #E6EDF5 }
.s216 { max-width: 1440px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 40px) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: #6B7A92 }
.s217 { display: flex; gap: 20px }
.s218 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); height: clamp(110px, 19vw, 260px); overflow: hidden; display: flex; align-items: flex-start }
.s219 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(8rem, 26vw, 22rem); line-height: 0.8; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px #1F3150; white-space: nowrap }
.s220 { position: relative; overflow: hidden; border-bottom: 1px solid #2A1A10; background: #0B0807 }
.s221 { position: absolute; top: 0; right: 0; bottom: 0; width: 62% }
.s222 { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; opacity: 0.75 }
.s223 { position: absolute; inset: 0; background: linear-gradient(90deg, #0B0807 0%, rgba(11,8,7,0.85) 30%, rgba(11,8,7,0.2) 70%, rgba(11,8,7,0.5) 100%) }
.s224 { position: absolute; inset: 0; background: linear-gradient(0deg, #0B0807 0%, rgba(11,8,7,0) 30%) }
.s225 { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(251,146,60,0) 0%, rgba(251,146,60,0.07) 90%, rgba(251,146,60,0.18) 100%) }
.s226 { position: absolute; width: 760px; height: 760px; left: -300px; top: -360px; border-radius: 50%; background: radial-gradient(circle, rgba(234,88,12,0.25), rgba(234,88,12,0) 62%) }
.s227 { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; background: rgba(251,146,60,0.12); color: #FDBA74; text-decoration: none; font-size: 14px; font-weight: 600 }
.s228 { position: relative; max-width: 1440px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 40px) 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px }
.s229 { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 26px }
.s230 { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(251,146,60,0.12); border: 1px solid #4A2E1C; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #FDBA74 }
.s231 { margin: 0; font-family: 'Bricolage Grotesque', 'Segoe UI', sans-serif; font-weight: 800; font-size: clamp(3rem, 7vw, 6.4rem); line-height: 0.9; letter-spacing: -0.045em; color: #FFFFFF }
.s232 { margin: 0; max-width: 32rem; font-size: 19px; line-height: 1.55; color: #D6C3B8 }
.s233 { display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13.5px; color: #B89A88 }
.s234 { flex: 1 1 420px; min-width: 0; max-width: 520px; background: rgba(18,12,10,0.92); border: 1px solid #4A2E1C; border-radius: 22px; box-shadow: 0 40px 100px rgba(0,0,0,0.6); overflow: hidden }
.s235 { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #3A2414; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #B89A88 }
.s236 { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #6EE7B7 }
.s237 { padding: 22px; display: flex; flex-direction: column; gap: 18px }
.s238 { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px }
.s239 { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #F5E6DC }
.s240 { font-weight: 400; color: #B89A88 }
.s241 { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #FB923C; background: rgba(251,146,60,0.18); color: #FFFFFF; font-size: 14px; font-weight: 500; cursor: pointer }
.s242 { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #4A2E1C; background: transparent; color: #D6C3B8; font-size: 14px; font-weight: 500; cursor: pointer }
.s243 { font-size: 14px; font-weight: 600; color: #F5E6DC }
.s244 { min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid #4A2E1C; background: #0B0807; color: #FFFFFF; font-size: 16px; box-sizing: border-box }
.s245 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px }
.s246 { min-height: 56px; border: 0; border-radius: 12px; background: #C2410C; color: #FFFFFF; font-size: 17px; font-weight: 600; cursor: pointer }
.s247 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; color: #B89A88 }
.s248 { font-weight: 600; text-decoration: none }
.s249 { position: relative; border-top: 1px solid #2A1A10; overflow: hidden; padding: 16px 0; background: rgba(18,12,10,0.8) }
.s250 { display: flex; width: max-content; gap: 40px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; color: #B89A88; white-space: nowrap }
.s251 { color: #4A2E1C }
.s252 { padding: 120px 0 110px }
@media (max-width: 768px) { .s252 { padding: 84px 0 72px } }
.s253 { font-family: 'Geist Mono', monospace; font-size: 13px; color: #FB923C }
.s254 { color: transparent; -webkit-text-stroke: 1.5px #7C5A44 }
.s255 { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: linear-gradient(90deg, #FB923C, #34D399) }
.s256 { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 32px 24px }
.s257 { width: 24px; height: 24px; border-radius: 50%; background: #FB923C }
.s258 { font-family: 'Geist Mono', monospace; font-size: 14px; color: #FB923C }
.s259 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; color: #FFFFFF }
.s260 { width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; border: 2px solid #FB923C; background: #070B14 }
.s261 { width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; border: 2px solid #FDBA74; background: #070B14 }
.s262 { font-family: 'Geist Mono', monospace; font-size: 14px; color: #FDBA74 }
.s263 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px }
.s264 { background: #0F0A08; border: 1px solid #3A2414; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px }
.s265 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 23px; color: #FFFFFF }
.s266 { margin: 0; font-size: 15px; line-height: 1.6; color: #C9B6AA }
.s267 { display: flex; flex-wrap: wrap; gap: 20px }
.s268 { flex: 1 1 460px; min-width: 0; background: #0C1424; border: 1px solid #1C2A42; border-radius: 22px; overflow: hidden }
.s269 { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #1C2A42; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #8B99AE }
.s270 { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: rgba(52,211,153,0.14); color: #6EE7B7 }
.s271 { padding: 10px 20px 12px; display: flex; flex-direction: column; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px }
.s272 { flex: 1 1 360px; min-width: 0; background: #0C1424; border: 1px solid #1C2A42; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 22px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px }
.s273 { height: 12px; border-radius: 999px; background: #F87171; width: 100% }
.s274 { height: 12px; border-radius: 999px; background: #34D399; width: 15% }
.s275 { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid #1C2A42; color: #C3CEDD }
.s276 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 40px }
.s277 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px }
.s278 { position: relative; border-radius: 22px; padding: 1px; background: linear-gradient(160deg, #FB923C, #3A2414 60%) }
.s279 { height: 100%; box-sizing: border-box; border-radius: 21px; background: #140D0A; padding: 30px; display: flex; flex-direction: column; gap: 18px }
.s280 { font-size: 15px; color: #B89A88 }
.s281 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 50px; letter-spacing: -0.04em; color: #FFFFFF }
.s282 { margin: 0; font-size: 15px; line-height: 1.55; color: #D6C3B8 }
.s283 { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 12px; background: #C2410C; color: #FFFFFF; text-decoration: none; font-size: 15px; font-weight: 600 }
.s284 { background: #0C1424; border: 1px solid #1C2A42; border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 18px }
.s285 { margin-top: auto; color: #7DE0EF; text-decoration: none; font-weight: 600 }
.s286 { font-family: 'Geist Mono', monospace; font-size: 13px; color: #6EE7B7 }
.s287 { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid #2A1A10 }
.s288 { border-bottom: 1px solid #2A1A10 }
.s289 { font-size: 28px; font-weight: 400; color: #FB923C; transition: transform 160ms }
.s290 { padding: 120px 0 96px }
.s291 { position: relative; overflow: hidden; border-radius: 28px; background: #C2410C; padding: clamp(32px, 6vw, 72px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px }
.s292 { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 22px) }
.s293 { position: relative; display: flex; flex-direction: column; gap: 10px }
.s294 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 0.95; letter-spacing: -0.04em; color: #FFFFFF }
.s295 { margin: 0; font-size: 18px; color: #FFEDE3 }
.s296 { position: relative; display: flex; flex-wrap: wrap; gap: 12px }
.s297 { display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px; border-radius: 12px; background: #FFFFFF; color: #9A3412; text-decoration: none; font-size: 16px; font-weight: 700 }
.s298 { display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.7); color: #FFFFFF; text-decoration: none; font-size: 16px; font-weight: 600 }
.s299 { border-top: 1px solid #141E30 }
.s300 { max-width: 1440px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: #8B99AE }
.s301 { height: 26px; width: auto }
.s302 { position: absolute; width: 900px; height: 900px; left: 30%; top: -520px; border-radius: 50%; background: radial-gradient(circle, rgba(34,195,221,0.2), rgba(34,195,221,0) 62%) }
.s303 { position: relative; max-width: 1440px; margin: 0 auto; padding: 72px clamp(16px, 4vw, 40px) 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px }
.s304 { color: transparent; -webkit-text-stroke: 2px #5B6E8C }
.s305 { margin: 0; max-width: 36rem; font-size: 19px; line-height: 1.55; color: #AEBACB }
.s306 { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 56px; display: flex; justify-content: center }
.s307 { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px; border: 1px solid #1C2A42; border-radius: 18px; background: rgba(12,20,36,0.8) }
.s308 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; min-width: 150px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: #AEBACB; cursor: pointer; text-align: left }
.s309 { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600 }
.s310 { font-family: 'Geist Mono', monospace; font-size: 12px; color: #6B7A92 }
.s311 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; min-width: 150px; padding: 10px 18px; border-radius: 12px; border: 1px solid #22C3DD; background: #16223A; color: #FFFFFF; cursor: pointer; text-align: left }
.s312 { font-family: 'Geist Mono', monospace; font-size: 12px; color: #AEBACB }
.s313 { width: 8px; height: 8px; border-radius: 50%; background: #34D399 }
.s314 { padding: 56px 0 0 }
.s315 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 24px }
.s316 { margin: 0; text-align: center; font-size: 17px; color: #AEBACB }
.s317 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: stretch }
.s318 { border-radius: 22px; padding: 1px; background: #1C2A42; animation-delay: 0ms }
.s319 { height: 100%; box-sizing: border-box; border-radius: 21px; background: #0C1424; padding: 32px; display: flex; flex-direction: column; gap: 20px; box-shadow: none }
.s320 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: #FFFFFF }
.s321 { margin: 0; padding: 18px 0 0; border-top: 1px solid #1C2A42; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #C3CEDD }
.s322 { display: flex; gap: 10px }
.s323 { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 12px; border: 1px solid #33425E; background: transparent; color: #E6EDF5; text-decoration: none; font-size: 15px; font-weight: 600 }
.s324 { border-radius: 22px; padding: 1px; background: linear-gradient(160deg, #22C3DD, #1C2A42 55%); animation-delay: 80ms }
.s325 { height: 100%; box-sizing: border-box; border-radius: 21px; background: #0C1A2C; padding: 32px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 30px 80px rgba(34,195,221,0.12) }
.s326 { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 12px; border: 1px solid #22C3DD; background: #22C3DD; color: #070B14; text-decoration: none; font-size: 15px; font-weight: 600 }
.s327 { border-radius: 22px; padding: 1px; background: #1C2A42; animation-delay: 160ms }
.s328 { margin: 0; text-align: center; font-size: 14px; color: #8B99AE }
.s329 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1px; background: #1C2A42; border: 1px solid #1C2A42; border-radius: 22px; overflow: hidden }
.s330 { background: #0C1424; padding: 28px; display: flex; flex-direction: column; gap: 10px }
.s331 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 21px; color: #FFFFFF }
.s332 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 32px }
.s333 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 0.95; letter-spacing: -0.04em; color: #FFFFFF }
.s334 { overflow-x: auto; border: 1px solid #1C2A42; border-radius: 22px; background: #0C1424 }
.s335 { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px }
.s336 { text-align: left; padding: 22px 24px; font-weight: 500; color: #8B99AE }
.s337 { text-align: center; padding: 22px 16px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; color: #FFFFFF }
.s338 { font-family: 'Geist Mono', monospace; font-size: 12.5px; font-weight: 400; color: #8B99AE; margin-top: 4px }
.s339 { text-align: center; padding: 22px 16px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; color: #7DE0EF; background: rgba(34,195,221,0.06) }
@media (max-width: 640px) {
  .s335 { min-width: 600px; font-size: 13.5px; }
  .s336, .s341 { position: sticky; left: 0; z-index: 2; background: #0C1424; padding-left: 14px; padding-right: 12px; box-shadow: 1px 0 0 #1C2A42; }
  .s336 { padding-top: 16px; padding-bottom: 16px; }
  .s337, .s339 { padding: 16px 12px; font-size: 16px; }
  .s342, .s343 { padding-left: 10px; padding-right: 10px; }
}
.s340 { color: #C3CEDD }
.s341 { text-align: left; padding: 16px 24px; font-weight: 400 }
.s342 { text-align: center; color: #6EE7B7 }
.s343 { text-align: center; color: #6EE7B7; background: rgba(34,195,221,0.06) }
.s344 { text-align: center; color: #5B6E8C }
.s345 { text-align: center; background: rgba(34,195,221,0.06) }
.s346 { text-align: center }
.s347 { text-align: center; color: #5B6E8C; background: rgba(34,195,221,0.06) }
.s348 { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid #1C2A42; background: #0C1424; display: flex; flex-wrap: wrap }
.s349 { flex: 1 1 420px; min-width: 0; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; gap: 20px }
.s350 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px }
.s351 { display: inline-flex; align-items: center; min-height: 54px; padding: 0 26px; border-radius: 12px; background: #22C3DD; color: #070B14; text-decoration: none; font-size: 16px; font-weight: 600 }
.s352 { display: inline-flex; align-items: center; min-height: 54px; padding: 0 22px; border-radius: 12px; border: 1px solid #33425E; color: #E6EDF5; text-decoration: none; font-size: 16px }
.s353 { flex: 1 1 380px; min-height: 320px; position: relative }
.s354 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.s355 { position: absolute; inset: 0; background: linear-gradient(90deg, #0C1424 0%, rgba(12,20,36,0.2) 45%, rgba(12,20,36,0) 100%) }
.s356 { position: relative; overflow: hidden; min-height: 760px; display: flex; flex-direction: column; border-bottom: 1px solid #141E30 }
.s357 { position: absolute; inset: 0; overflow: hidden }
.s358 { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block }
.s359 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,20,0.85) 0%, rgba(7,11,20,0.25) 38%, rgba(7,11,20,0.35) 62%, #070B14 100%) }
.s360 { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px }
.s361 { position: relative; width: 100%; max-width: 1440px; margin: auto auto 0; padding: 160px clamp(16px, 4vw, 40px) 72px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px }
.s362 { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 22px }
.s363 { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid #2A3B5C; border-radius: 999px; background: rgba(7,11,20,0.7); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #C3CEDD }
.s364 { margin: 0; font-family: 'Bricolage Grotesque', 'Segoe UI', sans-serif; font-weight: 800; font-size: clamp(3.2rem, 8vw, 7.4rem); line-height: 0.88; letter-spacing: -0.045em; color: #FFFFFF }
.s365 { flex: 0 1 380px; margin: 0; font-size: 18px; line-height: 1.6; color: #C3CEDD }
.s366 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px }
.s367 { flex: 0 1 420px; min-width: 0; width: 100%; position: relative }
.s368 { aspect-ratio: 4 / 5; border-radius: 24px; border: 1px dashed #2E4466; background: radial-gradient(circle at 30% 25%, #16304F, #0C1424 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #8B99AE; font-size: 15px }
.s369 { position: absolute; right: -20px; bottom: 28px; padding: 14px 18px; border-radius: 14px; background: #0C1424; border: 1px solid #1C2A42; box-shadow: 0 20px 50px rgba(0,0,0,0.5); font-family: 'Geist Mono', monospace; font-size: 13px; color: #AEBACB }
.s370 { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px }
.s371 { margin: 0; font-size: 19px; line-height: 1.6; color: #C3CEDD }
.s372 { margin: 0; font-size: 17px; line-height: 1.65; color: #AEBACB }
.s373 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.s374 { padding: 7px 12px; border-radius: 999px; background: #141E30; font-size: 14px; color: #C3CEDD }
.s375 { background: #0C1424; border: 1px solid #1C2A42; border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 14px; min-height: 260px; box-sizing: border-box }
.s376 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 64px; line-height: 0.9; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px #22C3DD }
.s377 { margin: 0; margin-top: auto; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 24px; color: #FFFFFF }
.s378 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); border-top: 1px solid #1C2A42; border-bottom: 1px solid #1C2A42 }
.s379 { padding: 40px 24px 40px 0; display: flex; flex-direction: column; gap: 8px }
.s380 { padding: 40px 24px; display: flex; flex-direction: column; gap: 8px }
.s381 { padding: 40px 0 40px 24px; display: flex; flex-direction: column; gap: 8px }
.s382 { flex: 1 1 400px; min-height: 360px; position: relative }
.s383 { position: absolute; inset: 0; background: linear-gradient(270deg, #0C1424 0%, rgba(12,20,36,0.15) 45%, rgba(12,20,36,0) 100%) }
.s384 { flex: 1.2 1 460px; min-width: 0; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; gap: 22px }
.s385 { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; font-size: 15px; color: #C3CEDD }
.s386 { display: flex; gap: 10px; padding: 14px 16px; border: 1px solid #1C2A42; border-radius: 12px }
.s387 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px }
.s388 { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end }
.s389 { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; color: #AEBACB }
.s390 { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #1C2A42 }
.s391 { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0 }
.s392 { display: inline-flex; align-items: center; gap: 8px; color: #6EE7B7 }
.s393 { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid #1C3A4E; background: linear-gradient(110deg, #0B2132, #0C1424 65%); padding: clamp(32px, 6vw, 72px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px }
.s394 { display: flex; flex-direction: column; gap: 10px }
.s395 { margin: 0; font-size: 18px; color: #AEBACB }
.s396 { display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px; border-radius: 12px; background: #22C3DD; color: #070B14; text-decoration: none; font-size: 16px; font-weight: 600 }
.s397 { display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border-radius: 12px; border: 1px solid #33425E; color: #E6EDF5; text-decoration: none; font-size: 16px }

/* =====================================================================
   patch layer — components, interactions and production fixes (BRIEF §7)
   ===================================================================== */

/* --- utilities --- */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
img { height: auto; }
::selection { background: rgba(34,195,221,.3); }

/* --- missing keyframes (pricing card-in, about zoom, rescue scan) --- */
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.a-in { animation: cardIn 380ms ease-out both; }
@keyframes zoom { 0% { transform: scale(1.04) } 50% { transform: scale(1.1) } 100% { transform: scale(1.04) } }
.a-zoom { animation: zoom 30s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateY(-100%) } 100% { transform: translateY(100%) } }
.a-scan { animation: scan 5s linear infinite; }
.a-marquee--fast { animation-duration: 30s; }
.still .a-in, .still .a-zoom, .still .a-scan { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .a-in, .a-zoom, .a-scan { animation: none !important; }
}

/* --- outlined-headline artifact fix (variable-font stroke contours) ---
   stroke behind fill; fill painted in --bg masks interior contour strokes */
.s20, .s101, .s219, .s304, .hw {
  paint-order: stroke fill;
}
.hw { color: var(--bg); -webkit-text-stroke: 2px var(--outline-text); transition: color 240ms; }
.hw.is-sel { -webkit-text-stroke-color: transparent; }
.hw--fix.is-sel { color: #FB923C; }
.hw--site.is-sel { color: #22C3DD; }
.hw--app.is-sel { color: #C4B5FD; }
/* outlined section-head second lines: fill in bg color so stray contour
   strokes are covered instead of showing as ghost lines */
.s20, .s101, .s304 { color: var(--bg); }
.s219 { color: var(--bg); }

/* --- shared nav --- */
.nav { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px); box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px 28px; align-self: stretch; }
.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 58px; width: auto; display: block; }
.nav__pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(14,22,38,.7); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.nav__pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; }
.nav__pill b { font-weight: 500; color: var(--text-2); }
.nav__links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-left: auto; font-size: 16.5px; }
.nav__links .nav-link { padding: 6px 2px; }
.nav__links .nav-link[aria-current="page"] { color: #FFFFFF; }
.nav__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; flex: none; }
.nav-urgent { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 10px; color: #FDBA74; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav-urgent:hover { color: #FFF; }
.nav-urgent__dot { width: 8px; height: 8px; border-radius: 50%; background: #FB923C; }
.nav__cta { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 12px; background: var(--cyan); color: #070B14; text-decoration: none; font-size: 16px; font-weight: 600; white-space: nowrap; }
.nav__burger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--border); background: rgba(12,20,36,.7); color: var(--text); cursor: pointer; }
.nav__burger-close { display: none; }
.nav.menu-open .nav__burger-open { display: none; }
.nav.menu-open .nav__burger-close { display: block; }
.nav-link--urgent, .nav-link--cta { display: none; }

@media (max-width: 1100px) {
  .nav__links { gap: 6px 20px; font-size: 15.5px; }
  .nav__pill { display: none; }
}
@media (max-width: 860px) {
  .nav { gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .nav__links { position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; z-index: 60; display: none; flex-direction: column; gap: 2px; margin: 0; padding: 12px; background: #0C1424; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,.55); font-size: 16px; }
  .nav__links.open { display: flex; }
  .nav__links .nav-link { padding: 12px 12px; border-radius: 10px; }
  .nav__links .nav-link:hover { background: rgba(255,255,255,.05); }
  .nav__burger { display: inline-flex; }
  .nav__pill { display: none; }
  .nav__actions { margin-left: auto; }
  .nav-urgent, .nav__cta { display: none; }
  .nav-link--urgent { display: flex; align-items: center; gap: 8px; color: #FDBA74; font-weight: 600; }
  .nav-link--urgent::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FB923C; flex: none; }
  .nav-link--cta { display: flex; justify-content: center; margin-top: 10px; padding: 14px 12px !important; background: var(--cyan); color: #070B14; font-weight: 700; }
  .nav-link--cta:hover { background: var(--cyan) !important; }
}
@media (max-width: 480px) {
  .nav__cta { padding: 0 14px; font-size: 14px; min-height: 46px; }
  .nav-urgent { padding: 0 10px; font-size: 13px; min-height: 44px; }
  .nav__logo img { height: 44px; }
}

/* --- hero switcher (homepage) --- */
.htab { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid #233150; background: rgba(12,20,36,.6); color: #AEBACB; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 160ms, border-color 160ms, color 160ms; font-family: 'Geist', sans-serif; }
.htab:hover { border-color: #3B4C6B; }
.htab[aria-pressed="true"] { background: #16223A; color: #FFFFFF; }
.htab[data-p="fix"][aria-pressed="true"] { border-color: #FB923C; }
.htab[data-p="site"][aria-pressed="true"] { border-color: #22C3DD; }
.htab[data-p="app"][aria-pressed="true"] { border-color: #C4B5FD; }
@media (max-width: 480px) {
  .htab { flex: 1 1 100%; justify-content: center; }
}

.hcta { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 12px; text-decoration: none; font-size: 16px; font-weight: 600; color: #070B14; transition: transform 160ms, box-shadow 160ms, background 200ms; }
.hcta--fix { background: #FB923C; }
.hcta--site { background: #22C3DD; }
.hcta--app { background: #C4B5FD; }
.hcta:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(34,195,221,.25); }
.hcta--fix:hover { box-shadow: 0 12px 32px rgba(251,146,60,.3); }
.hcta--app:hover { box-shadow: 0 12px 32px rgba(196,181,253,.3); }

.pglow { position: absolute; inset: -1px; border-radius: 20px; transition: background 300ms; }
.pglow--fix { background: linear-gradient(140deg, rgba(251,146,60,.55), rgba(34,195,221,0) 45%); }
.pglow--site { background: linear-gradient(140deg, rgba(34,195,221,.55), rgba(34,195,221,0) 45%); }
.pglow--app { background: linear-gradient(140deg, rgba(196,181,253,.55), rgba(34,195,221,0) 45%); }

.hpill { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 13px; }
.hpill--site { background: rgba(34,195,221,.14); color: #7DE0EF; }
.hpill--app { background: rgba(196,181,253,.14); color: #C4B5FD; }

/* hero "site" panel: staging browser mock */
.site-body { gap: 16px; padding-top: 20px !important; }
.mockb { border: 1px solid #1C2A42; border-radius: 12px; overflow: hidden; background: #0F1A2E; }
.mockb__bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #1C2A42; font-family: 'Geist Mono', monospace; font-size: 12px; color: #6B7A92; }
.mockb__url { flex: 1; padding: 4px 10px; border-radius: 6px; background: #0A1222; }
.mockb__body { padding: 16px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.mockb__col { display: flex; flex-direction: column; gap: 8px; }
.mockb__col i, .mb-h, .mb-l, .mb-btn { display: block; border-radius: 4px; }
.mb-h { height: 14px; width: 80%; background: #2A3B5C; }
.mb-h.w60 { width: 60%; }
.mb-l { height: 8px; width: 90%; background: #1C2A42; }
.mb-l.w70 { width: 70%; }
.mb-l.w90 { margin-top: 6px; }
.mb-btn { height: 26px; width: 96px; border-radius: 6px; background: #22C3DD; margin-top: 8px; }
.mockb__hero { border-radius: 8px; background: linear-gradient(160deg, #1B3354, #0F1A2E); min-height: 120px; }
.buildlist { display: flex; flex-direction: column; gap: 10px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13.5px; }
.buildlist__row { display: flex; justify-content: space-between; }
.buildlist__row span:first-child { color: #AEBACB; }
.buildlist__row .ok { color: #6EE7B7; }
.buildlist__row .lit { color: #FFF; }
.buildlist__row .run { color: #7DE0EF; }
.buildlist__track { height: 6px; border-radius: 999px; background: #1C2A42; overflow: hidden; }
.buildlist__bar { height: 100%; width: 70%; border-radius: 999px; background: #22C3DD; }

/* hero "app" panel: two phone mockups */
.app-body { flex-direction: row !important; justify-content: center; align-items: flex-end; gap: 22px; padding-top: 24px !important; }
.appph { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.appph--up { transform: translateY(-22px); }
.appph__frame { width: 138px; height: 262px; border-radius: 28px; border: 2px solid #2A3B5C; background: #0F1A2E; padding: 14px 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.appph__frame--and { border-radius: 22px; }
.appph__frame i { display: block; border-radius: 4px; }
.appph__n1 { height: 6px; width: 40px; background: #2A3B5C; align-self: center; }
.appph__n2 { height: 6px; width: 6px; border-radius: 50%; background: #2A3B5C; align-self: center; }
.appph__hero { height: 70px; border-radius: 12px; background: linear-gradient(160deg, #1B3354, #12223C); margin-top: 6px; }
.appph__l { height: 10px; width: 80%; background: #2A3B5C; }
.appph__l.dim { height: 8px; width: 60%; background: #1C2A42; }
.appph__blk { height: 34px; border-radius: 10px; background: #1C2A42; }
.appph__cta { margin-top: auto; height: 28px; border-radius: 10px; background: #C4B5FD; }
.appph__lbl { font-family: 'Geist Mono', monospace; font-size: 12.5px; color: #AEBACB; }

/* --- emergency chips (aria-pressed driven) --- */
.rchip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #4A2E1C; background: transparent; color: #D6C3B8; font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'Geist', sans-serif; transition: border-color 160ms, background 160ms, color 160ms; }
.rchip:hover { border-color: #FB923C; }
.rchip[aria-pressed="true"] { border-color: #FB923C; background: rgba(251,146,60,.18); color: #FFF; }

/* --- rescue confirmation --- */
.rescue-done { padding: 26px 22px; display: flex; flex-direction: column; gap: 18px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; }
.rescue-done__row { display: flex; gap: 12px; }
.rescue-done__row .ok { color: #6EE7B7; }
.rescue-done__row .hl { color: #FDBA74; }
.rescue-done__reset { align-self: flex-start; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #4A2E1C; background: transparent; color: #F5E6DC; font-family: 'Geist', sans-serif; font-size: 14px; cursor: pointer; }
.rescue-done__reset:hover { border-color: #FB923C; color: #FFF; }

/* --- form status messages --- */
.form-status { margin: 4px 0 0; font-size: 14px; color: #6EE7B7; }
.form-status--err { color: #FCA5A5; }

/* --- pricing tabs (ARIA) --- */
.ptab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; min-width: 150px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: #AEBACB; cursor: pointer; text-align: left; font-family: 'Geist', sans-serif; transition: border-color 160ms, background 160ms, color 160ms; }
.ptab:hover { border-color: #3B4C6B; }
.ptab[aria-selected="true"] { background: #16223A; color: #FFF; }
.ptab[data-tab="fix"][aria-selected="true"] { border-color: #FB923C; }
.ptab[data-tab="sites"][aria-selected="true"] { border-color: #22C3DD; }
.ptab[data-tab="apps"][aria-selected="true"] { border-color: #C4B5FD; }
.ptab[data-tab="care"][aria-selected="true"] { border-color: #34D399; }
@media (max-width: 560px) {
  .ptab { min-width: 0; flex: 1 1 44%; }
}

/* plan accents follow the active tab (dc spec: featured frame + kicker + btn take the tab color) */
#plans-grid[data-tab="fix"] .pl-kicker { color: #FB923C; }
#plans-grid[data-tab="apps"] .pl-kicker { color: #C4B5FD; }
#plans-grid[data-tab="care"] .pl-kicker { color: #34D399; }
#plans-grid .pl-frame--feat.fix-f { background: linear-gradient(160deg, #FB923C, #1C2A42 55%); }
#plans-grid .pl-frame--feat.apps-f { background: linear-gradient(160deg, #C4B5FD, #1C2A42 55%); }
#plans-grid .pl-frame--feat.care-f { background: linear-gradient(160deg, #34D399, #1C2A42 55%); }
#plans-grid .pbtn--feat.fix-f { background: #FB923C; border-color: #FB923C; }
#plans-grid .pbtn--feat.apps-f { background: #C4B5FD; border-color: #C4B5FD; }
#plans-grid .pbtn--feat.care-f { background: #34D399; border-color: #34D399; }
#plans-grid .pl-badge.fix-f { background: rgba(251,146,60,.14); color: #FDBA74; }
#plans-grid .pl-badge.apps-f { background: rgba(196,181,253,.14); color: #C4B5FD; }
#plans-grid .pl-badge.care-f { background: rgba(52,211,153,.14); color: #6EE7B7; }

/* --- §7.3: "always included" grid -> 3 / 2 / 1 --- */
@media (min-width: 1025px) { .s329 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 641px) and (max-width: 1024px) { .s329 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .s329 { grid-template-columns: 1fr; } }

/* ============ INNER PAGES (services / case-studies / faq / mobile-apps / book-call) ============ */
.ih1 { max-width: 20ch; }
.igroup { padding-top: 88px; }
.igroup__h { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.igrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 16px; }
.igrid--2 { grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); }
.icard { padding: 28px; gap: 12px; transition: border-color 160ms, transform 160ms; }
.icard:hover { border-color: #2B4060; transform: translateY(-2px); }
.icard__t { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.015em; color: #FFF; }
.cscard { gap: 14px; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid #1C2A42; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 12px; color: #7DE0EF; background: rgba(34,195,221,.06); }
.chip--dim { color: #8B99AE; background: rgba(139,153,174,.05); }
.cs-stat { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; background: #091020; border: 1px solid #141E30; border-radius: 12px; }
.cs-stat b { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: #22C3DD; }
.cs-stat span { font-size: 13px; color: #8B99AE; }
.cs-quote { margin: 4px 0 0; padding-left: 16px; border-left: 2px solid #22C3DD; font-size: 15px; line-height: 1.6; color: #C3CEDD; font-style: italic; }
.cs-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: #8B99AE; }
.faqwrap { max-width: 780px; margin: 0 auto; }
.chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.calwrap { background: #0C1424; border: 1px solid #1C2A42; border-radius: 22px; overflow: hidden; }
.calalt { margin: 20px 0 0; font-size: 15px; color: #8B99AE; text-align: center; }
.calalt a { color: #22C3DD; }
.icta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding: 48px 44px; background: linear-gradient(135deg, rgba(34,195,221,.07), rgba(196,181,253,.05)); border: 1px solid #1C2A42; border-radius: 24px; }
.icta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) { .icta { padding: 28px 22px; } }

/* --- inner hero photo strip --- */
.ihero-media { max-width: 1440px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 64px; }
.ihero-media__in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.iph { position: relative; margin: 0; height: 220px; border-radius: 18px; overflow: hidden; border: 1px solid #1C2A42; }
.iph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92); transition: transform 500ms ease; }
.iph:hover img { transform: scale(1.04); }
.iph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,11,20,.82) 100%); }
.iph__cap { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-family: 'Geist Mono', monospace; font-size: 11.5px; color: #AEBACB; letter-spacing: .04em; }
@media (max-width: 720px) { .ihero-media__in { grid-template-columns: 1fr 1fr; } .iph { height: 150px; } .iph:last-child { display: none; } }

/* --- service card icons --- */
.icard__ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.045); border: 1px solid #1C2A42; margin-bottom: 4px; }
.icard:hover .icard__ic { border-color: currentColor; }

/* ============ decorative shapes (handoff update 1) ============ */
:root {
  --sphere-cyan: radial-gradient(circle at 34% 30%, #7DE0EF 0%, #22C3DD 22%, #0369A1 58%, #0B2132 100%);
  --sphere-orange: radial-gradient(circle at 34% 30%, #FDBA74 0%, #FB923C 25%, #C2410C 60%, #3A1406 100%);
  --sphere-violet: radial-gradient(circle at 34% 30%, #E4DCFF 0%, #C4B5FD 25%, #6D5BD0 65%, #1A1440 100%);
  --sphere-warm: radial-gradient(circle at 34% 30%, #FFF1E6 0%, #FDBA74 28%, #EA580C 62%, #3A1406 100%);
}
.s1 { position: relative; z-index: 0; }
.s56, .s69, .s90, .s193, .s252, .s290, .s314 { position: relative; }
.shp { position: absolute; border-radius: 50%; pointer-events: none; }
.shp-behind { z-index: -1; }
.shp-dots { border-radius: 0; background-image: radial-gradient(#2A3B5C 1.2px, transparent 1.6px); background-size: 14px 14px; opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinR { to { transform: rotate(-360deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes ripple { 0% { transform: translate(-50%,-50%) scale(.15); opacity: .8; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
.a-spin { animation: spin 90s linear infinite; will-change: transform; }
.a-spinR { animation: spinR 140s linear infinite; will-change: transform; }
.a-floaty { animation: floaty 8s ease-in-out infinite; }
.a-ripple { animation: ripple 4.5s ease-out infinite; }
.still .a-spin, .still .a-spinR, .still .a-floaty, .still .a-ripple { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .a-spin, .a-spinR, .a-floaty, .a-ripple { animation: none !important; } }

/* mobile: shrink, dim, hide the busiest decorations */
@media (max-width: 768px) {
  .shp { scale: .55; }
}
@media (max-width: 640px) {
  .shp-triad, .shp-orbsys { display: none; }
  .shp-behind { opacity: .6; }
}

/* ============ shared footer (update 2) ============ */
.foot { position: relative; overflow: hidden; background: #05080F; border-top: 1px solid #141E30; }
.foot__edge { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, rgba(34,195,221,0) 0%, #22C3DD 30%, #C4B5FD 60%, #FB923C 85%, rgba(251,146,60,0) 100%); }
.foot__grid { position: relative; max-width: 1440px; margin: 0 auto; padding: 80px clamp(16px,4vw,40px) 0; display: flex; flex-wrap: wrap; gap: 48px 56px; }
.foot__brand { flex: 1.2 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.foot__logo { align-self: flex-start; }
.foot__logo img { height: 32px; width: auto; display: block; }
.foot__tag { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -0.025em; color: #FFF; }
.foot__tag span { color: #5B6E8C; }
.foot__desc { margin: 0; max-width: 24rem; font-size: 15px; line-height: 1.6; color: #8B99AE; }
.foot__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #1C2A42; background: #0C1424; color: #E6EDF5; text-decoration: none; font-size: 14px; transition: border-color 160ms; }
.foot-pill:hover { border-color: #33425E; color: #FFF; }
.foot__cols { flex: 1.6 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px,100%), 1fr)); gap: 32px 20px; align-content: start; }
.foot__col { display: flex; flex-direction: column; gap: 13px; font-size: 15px; }
.foot__col-h { font-family: 'Geist Mono', monospace; font-size: 13px; }
.foot__cols .foot-link { transition: padding-left 160ms, color 160ms; }
.foot__cols .foot-link:hover { color: #FFF; padding-left: 6px; }
.foot__status { flex: 1 1 280px; min-width: 0; max-width: 400px; align-self: flex-start; background: #0C1424; border: 1px solid #1C2A42; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.foot__status-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-family: 'Geist Mono', monospace; font-size: 13px; color: #8B99AE; }
.foot__live { display: inline-flex; align-items: center; gap: 8px; color: #6EE7B7; }
.foot__status-rows { display: flex; flex-direction: column; font-family: 'Geist Mono', monospace; font-size: 13.5px; }
.foot__row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 18px; border-top: 1px dashed #1A2640; }
.foot__row-k { display: inline-flex; align-items: center; gap: 10px; color: #AEBACB; }
.foot__status-f { padding: 16px 18px 18px; border-top: 1px solid #1C2A42; }
.foot__book { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; border-radius: 12px; background: #22C3DD; color: #070B14; text-decoration: none; font-size: 15px; font-weight: 600; }
.foot__bar { position: relative; max-width: 1440px; margin: 0 auto; padding: 88px clamp(16px,4vw,40px) 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; font-size: 14px; color: #6B7A92; }
.foot__bar::before { content: ''; position: absolute; top: 64px; left: clamp(16px,4vw,40px); right: clamp(16px,4vw,40px); height: 1px; background: #141E30; }
.foot__coords { font-family: 'Geist Mono', monospace; font-size: 12.5px; color: #4E5C73; }
.foot__bar-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.foot-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #1C2A42; color: #AEBACB; transition: border-color 160ms, color 160ms; }
.foot-icon:hover { border-color: #33425E; color: #FFF; }
.foot__topwrap { display: flex; }
.foot-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #1C2A42; color: #C3CEDD; text-decoration: none; font-size: 14px; transition: border-color 160ms, color 160ms; }
.foot-top:hover { border-color: #33425E; color: #FFF; }
@media (max-width: 640px) {
  .foot__topwrap { flex-basis: 100%; justify-content: flex-end; }
  .shp-mhide { display: none; }
}

/* legal pages */
.ilegal { max-width: 46rem; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.ilegal h3 { margin: 26px 0 2px; font-size: 19px; color: #FFF; }
.ilegal p { margin: 0; line-height: 1.65; color: #AEBACB; }
.ilegal a { color: #7DE0EF; }