/* ============================================================
   OUTMATE STUDIO — page styles
   Loads AFTER outmate.css / home.css / vid.css / home2.css and reuses
   their tokens (--paper, --ink, --accent, --mono, --sans, --body …).
   Prefix: st-
   ============================================================ */


/* ---------- shared section-header + button variants ----------
   (copied from home2.css so /studio doesn't load that 41KB sheet; values identical) */
.h-head{ text-align:center; max-width:60ch; margin:0 auto clamp(30px,4vw,56px); display:flex; flex-direction:column; align-items:center; gap:18px; }
.h-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:30px; padding:7px 15px; background:var(--paper); }
.h-eyebrow.on-dark{ color:#a9a9f6; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04); }
.h-title{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.035em; line-height:.96; font-size:clamp(32px,5vw,76px); text-wrap:balance; }
.btn.white{ background:#fff; color:var(--ink); }
.btn.white:hover{ background:var(--accent); color:#fff; }
.btn.ghost-d{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); }
.btn.ghost-d:hover{ background:#fff; color:var(--ink); }

/* hidden-by-config elements (JS removes [hidden] only when a value exists) */
[data-cfg][hidden], .st-page [hidden]{ display:none !important; }

.st-sec{ margin-top:var(--pad); scroll-margin-top:128px; }
.st-card{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.st-pad{ padding:clamp(28px,4.4vw,72px) clamp(18px,3.4vw,48px); }
.st-note{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#5d5d63; line-height:1.5; margin:0; }
.st-skip{ position:absolute; left:-9999px; top:8px; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; font-family:var(--mono); font-size:12px; }
.st-skip:focus{ left:8px; }

/* focus visibility everywhere on this page */
.st-page a:focus-visible, .st-page button:focus-visible, .st-page input:focus-visible,
.st-page select:focus-visible, .st-page textarea:focus-visible, .st-page summary:focus-visible,
.st-page [role="tab"]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.st-dark a:focus-visible, .st-dark button:focus-visible{ outline-color:#fff; }
.st-page .btn{ min-height:46px; }

/* ---------- sub-nav (Services · Industries · …) ---------- */
.st-subnav{ position:sticky; top:112px; z-index:60; margin:0 0 var(--pad); }
.st-subnav-in{ display:flex; align-items:center; gap:4px; padding:6px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border:1px solid var(--line-soft); border-radius:40px; overflow-x:auto; scrollbar-width:none; }
.st-subnav-in::-webkit-scrollbar{ display:none; }
.st-subnav a{ flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:30px; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.st-subnav a:hover{ background:rgba(0,0,0,.06); }
.st-subnav a.st-subnav-cta{ margin-left:auto; background:var(--accent); color:#fff; }
.st-subnav a.st-subnav-cta:hover{ background:var(--ink); }
@media (max-width:680px){ .st-subnav{ top:104px; } }

/* ---------- 1 · HERO ---------- */
.st-hero{ background:var(--dark); color:#fff; border-radius:var(--radius); overflow:hidden; position:relative; }
.st-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 20% 0%, rgba(80,70,230,.22), transparent 70%); pointer-events:none; }
.st-hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); padding:clamp(36px,5.6vw,88px) clamp(20px,4vw,56px); align-items:center; }
.st-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#cfcff8; border:1px solid var(--line-dark); border-radius:30px; padding:8px 15px; background:rgba(255,255,255,.04); }
.st-hero h1{ margin:clamp(18px,2.4vw,28px) 0 0; font-family:var(--sans); font-weight:700; letter-spacing:-.04em; line-height:.95; font-size:clamp(36px,4.7vw,70px); text-wrap:balance; }
.st-hero h1 .dim{ color:#6e6e78; }
.st-hero-sub{ margin:clamp(16px,2vw,24px) 0 0; font-family:var(--body); font-size:clamp(16px,1.45vw,20px); line-height:1.5; color:#b7b7be; max-width:56ch; text-wrap:pretty; }
.st-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,2.8vw,34px); }
.st-tech-link{ display:inline-flex; align-items:center; min-height:44px; margin-top:6px; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:#a9a9f6; border-bottom:1px solid rgba(169,169,246,.35); align-self:flex-start; }
.st-tech-link:hover{ color:#fff; border-bottom-color:#fff; }
.st-trust{ margin:clamp(14px,1.8vw,22px) 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#9a9aa2; line-height:1.6; }

/* hero visual: lead-flow diagram */
.st-flow{ background:#0f0f11; border:1px solid var(--line-dark); border-radius:12px; font-family:var(--mono); box-shadow:0 30px 60px -24px rgba(0,0,0,.7); overflow:hidden; }
.st-flow-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line-dark); font-size:11px; color:#cfcfcf; letter-spacing:.04em; }
.st-flow-bar .live{ display:inline-flex; align-items:center; gap:7px; }
.st-flow-bar .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:stpulse 1.8s infinite; }
@keyframes stpulse{ 0%{ box-shadow:0 0 0 0 rgba(80,70,230,.5);} 70%{ box-shadow:0 0 0 7px rgba(80,70,230,0);} 100%{ box-shadow:0 0 0 0 rgba(80,70,230,0);} }
.st-flow ol{ list-style:none; margin:0; padding:10px 0; position:relative; }
.st-flow li{ position:relative; display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:11px 16px; opacity:.72; transition:opacity .4s, background .4s; }
.st-flow li::before{ content:""; position:absolute; left:32px; top:-50%; bottom:50%; width:1px; background:rgba(255,255,255,.12); }
.st-flow li:first-child::before{ display:none; }
.st-fn{ position:relative; z-index:1; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:#0f0f11; display:grid; place-items:center; font-size:11px; color:#9a9aa2; transition:.4s; }
.st-ft{ color:#f1f1f1; font-size:12.5px; letter-spacing:.01em; }
.st-fm{ color:#9a9aa2; font-size:10.5px; margin-top:3px; line-height:1.35; }
.st-fs{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#9a9aa2; }
.st-flow li.on{ opacity:1; background:rgba(80,70,230,.07); }
.st-flow li.on .st-fn{ background:var(--accent); border-color:var(--accent); color:#fff; }
.st-flow li.on .st-fs{ color:#a9a9f6; }
.st-flow li.done{ opacity:.9; }
.st-flow li.done .st-fn{ border-color:var(--accent); color:#a9a9f6; }
.st-flow-foot{ padding:10px 16px 14px; border-top:1px solid var(--line-dark); font-size:10px; letter-spacing:.06em; color:#9a9aa2; text-transform:uppercase; }

/* ---------- 2 · PROOF ---------- */
.st-proof{ display:flex; flex-direction:column; gap:16px; padding:clamp(22px,3vw,36px) clamp(18px,3vw,40px); }
.st-proof h2{ margin:0; font-family:var(--mono); font-weight:400; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.st-proof-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; list-style:none; margin:0; padding:0; }
.st-proof-list li{ background:var(--paper-2); padding:16px 18px; font-family:var(--sans); font-weight:700; letter-spacing:-.01em; font-size:15px; line-height:1.25; display:flex; gap:10px; align-items:flex-start; }
.st-proof-list li::before{ content:"✳"; color:var(--accent); font-family:var(--mono); }

/* ---------- 3 · PROBLEM ---------- */
.st-problems{ display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line); }
.st-prob{ grid-column:span 2; padding:clamp(22px,2.4vw,34px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.st-prob:nth-child(3n){ border-right:0; }
.st-prob:nth-child(4), .st-prob:nth-child(5){ grid-column:span 3; }
.st-prob:nth-child(4){ border-right:1px solid var(--line); }
.st-prob:nth-child(5){ border-right:0; }
.st-prob .idx{ color:var(--accent); font-weight:700; }
.st-prob h3{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.02em; font-size:clamp(20px,2vw,26px); line-height:1.08; }
.st-prob p{ margin:0; font-size:15.5px; line-height:1.5; color:#4a4a50; }
.st-closer{ margin:0; padding:clamp(22px,3vw,40px); text-align:center; font-family:var(--sans); font-weight:700; letter-spacing:-.02em; font-size:clamp(18px,2.2vw,28px); line-height:1.25; text-wrap:balance; }
@media (max-width:900px){
  .st-problems{ grid-template-columns:1fr 1fr; }
  .st-prob, .st-prob:nth-child(4), .st-prob:nth-child(5){ grid-column:auto; border-right:1px solid var(--line); }
  .st-prob:nth-child(2n){ border-right:0; }
  .st-prob:nth-child(5){ grid-column:1 / -1; border-right:0; }
}
@media (max-width:560px){ .st-problems{ grid-template-columns:1fr; } .st-prob, .st-prob:nth-child(n){ grid-column:auto; border-right:0; } }

/* ---------- 4 · SERVICES ---------- */
.st-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pad); }
.st-svc{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); padding:clamp(22px,2.6vw,36px); display:flex; flex-direction:column; gap:16px; position:relative; }
.st-svc .ico{ font-family:var(--mono); font-size:22px; color:var(--accent); }
.st-svc h3{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.025em; font-size:clamp(24px,2.4vw,34px); line-height:1.02; }
.st-svc > p{ margin:0; font-size:16px; line-height:1.5; color:#3d3d43; }
.st-svc ul{ list-style:none; margin:6px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.st-svc li{ display:flex; gap:10px; font-size:14.5px; line-height:1.4; }
.st-svc li::before{ content:"✓"; color:var(--accent); font-family:var(--mono); flex:0 0 auto; }
.st-svc.hl{ background:var(--dark); color:#fff; border-color:var(--dark); }
.st-svc.hl > p{ color:#c7c7cd; }
.st-svc.hl ul{ border-top-color:var(--line-dark); }
.st-svc.hl .ico{ color:#a9a9f6; }
.st-svc.hl li::before{ color:#a9a9f6; }
.st-svc-badge{ align-self:flex-start; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; background:var(--accent); color:#fff; border-radius:30px; padding:6px 12px; }
.st-svc .btn{ align-self:flex-start; margin-top:4px; }
@media (max-width:1000px){ .st-services{ grid-template-columns:1fr; } .st-svc.hl{ order:-1; } }

/* ---------- 5 · LEAD ENGINE ---------- */
.st-dark{ background:var(--dark); color:#fff; border-radius:var(--radius); overflow:hidden; }
.st-engine-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; list-style:none; margin:0; padding:0; counter-reset:none; border-top:1px solid var(--line-dark); }
.st-es{ padding:clamp(20px,2.2vw,30px); border-right:1px solid var(--line-dark); position:relative; display:flex; flex-direction:column; gap:12px; }
.st-es:last-child{ border-right:0; }
.st-es .n{ font-family:var(--mono); font-weight:700; font-size:clamp(26px,2.8vw,40px); letter-spacing:-.02em; color:#6f6f78; transition:color .4s; }
.st-es.on .n{ color:var(--accent); }
.st-es h3{ margin:0; font-family:var(--sans); font-weight:700; font-size:clamp(18px,1.7vw,22px); letter-spacing:-.015em; }
.st-es p{ margin:0; font-size:14.5px; line-height:1.5; color:#b0b0b8; }
.st-es::after{ content:""; position:absolute; top:clamp(34px,3.6vw,50px); right:-1px; width:8px; height:8px; border-top:1px solid #6a6a72; border-right:1px solid #6a6a72; transform:translateX(50%) rotate(45deg); background:var(--dark); }
.st-es:last-child::after{ display:none; }
.st-es.on::after{ border-color:var(--accent); }
.st-engine-foot{ padding:clamp(22px,3vw,36px); text-align:center; border-top:1px solid var(--line-dark); font-family:var(--sans); font-weight:700; font-size:clamp(18px,2vw,26px); letter-spacing:-.02em; }
@media (max-width:1000px){
  .st-engine-steps{ grid-template-columns:1fr; }
  .st-es{ border-right:0; border-bottom:1px solid var(--line-dark); display:grid; grid-template-columns:64px 1fr; column-gap:14px; row-gap:6px; }
  .st-es .n{ grid-row:span 2; }
  .st-es::after{ display:none; }
  .st-es:last-child{ border-bottom:0; }
}

/* ---------- 6 · INDUSTRIES ---------- */
.st-tabs{ display:flex; gap:8px; padding:0 clamp(18px,3vw,40px) 18px; overflow-x:auto; scrollbar-width:none; }
.st-tabs::-webkit-scrollbar{ display:none; }
.st-tab{ flex:0 0 auto; min-height:44px; padding:0 18px; border-radius:30px; border:1px solid var(--line); background:var(--paper); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); cursor:pointer; }
.st-tab:hover{ background:var(--paper-2); }
.st-tab[aria-selected="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.st-tabpanel{ padding:0 clamp(18px,3vw,40px) clamp(24px,3vw,40px); }
.st-tabpanel[hidden]{ display:none; }
.st-tp-grid{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.st-tp-col{ padding:clamp(20px,2.4vw,32px); display:flex; flex-direction:column; gap:10px; }
.st-tp-col + .st-tp-col{ border-left:1px solid var(--line); }
.st-tp-col h3{ margin:0; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.st-tp-col p{ margin:0; font-size:16.5px; line-height:1.5; }
.st-tp-flow{ margin-top:14px; padding:clamp(16px,2vw,24px); background:var(--dark); color:#fff; border-radius:12px; }
.st-tp-flow h3{ margin:0 0 14px; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#a9a9f6; }
.st-steps{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.st-steps li{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; padding:9px 13px; border:1px solid var(--line-dark); border-radius:30px; background:rgba(255,255,255,.04); }
.st-steps li + li::before{ content:"→"; color:#a9a9f6; margin-right:10px; }
.st-steps li{ display:inline-flex; }
.st-tp-note{ margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--ink); border:1px dashed var(--line); border-radius:10px; padding:12px 14px; background:var(--paper-2); }
.st-caption{ padding:0 clamp(18px,3vw,40px) clamp(22px,2.6vw,32px); }
@media (max-width:760px){ .st-tp-grid{ grid-template-columns:1fr; } .st-tp-col + .st-tp-col{ border-left:0; border-top:1px solid var(--line); } }

/* ---------- 7 · ENGINEERING ---------- */
.st-eng{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border-top:1px solid var(--line-dark); }
.st-eng > div{ background:var(--dark); padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; gap:10px; }
.st-eng .ico{ font-family:var(--mono); color:#a9a9f6; font-size:20px; }
.st-eng h3{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.015em; font-size:clamp(19px,1.8vw,24px); }
.st-eng p{ margin:0; font-size:14.5px; line-height:1.5; color:#b0b0b8; }
.st-eng-foot{ padding:clamp(20px,2.6vw,32px); display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between; border-top:1px solid var(--line-dark); }
@media (max-width:1000px){ .st-eng{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .st-eng{ grid-template-columns:1fr; } }

/* ---------- 8 · DEMO ---------- */
.st-demo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(28px,4vw,64px) clamp(18px,3.4vw,48px); }
.st-demo.single{ grid-template-columns:1fr; max-width:760px; margin:0 auto; text-align:center; justify-items:center; }
.st-demo h2{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.035em; line-height:.98; font-size:clamp(30px,4.4vw,62px); text-wrap:balance; }
.st-demo p{ margin:16px 0 0; font-size:clamp(15px,1.4vw,18px); line-height:1.55; color:#3d3d43; max-width:52ch; }
.st-demo .st-cta{ margin-top:22px; }
.st-demo.single .st-cta{ justify-content:center; }
.st-qr{ display:none; margin-top:20px; align-items:center; gap:14px; }
.st-qr img{ width:112px; height:112px; border:1px solid var(--line); border-radius:10px; padding:6px; background:#fff; }
@media (min-width:1025px){ .st-qr:not([hidden]){ display:flex; } }
.st-video{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--dark); border:1px solid var(--line-dark); width:100%; }
.st-video button{ position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--dark); color:#fff; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.st-video .play{ width:64px; height:64px; border-radius:50%; background:var(--accent); display:grid; place-items:center; font-size:20px; }
.st-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:860px){ .st-demo{ grid-template-columns:1fr; } }

/* ---------- 9 · PROCESS ---------- */
.st-pipe{ display:grid; grid-template-columns:repeat(5,1fr); list-style:none; margin:0; padding:0; border-top:1px solid var(--line); position:relative; }
.st-ps{ padding:clamp(20px,2.2vw,30px); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:10px; position:relative; }
.st-ps:last-child{ border-right:0; }
.st-ps .n{ font-family:var(--mono); font-weight:700; font-size:clamp(24px,2.6vw,36px); color:var(--accent); letter-spacing:-.02em; }
.st-ps h3{ margin:0; font-family:var(--sans); font-weight:700; font-size:clamp(18px,1.7vw,22px); letter-spacing:-.015em; }
.st-ps p{ margin:0; font-size:14.5px; line-height:1.5; color:#4a4a50; }
.st-ps::before{ content:""; position:absolute; top:0; left:0; height:3px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .7s ease; }
.reveal.in .st-ps::before, .st-pipe.in .st-ps::before{ transform:scaleX(1); }
.st-ps:nth-child(2)::before{ transition-delay:.12s } .st-ps:nth-child(3)::before{ transition-delay:.24s } .st-ps:nth-child(4)::before{ transition-delay:.36s } .st-ps:nth-child(5)::before{ transition-delay:.48s }
@media (max-width:1000px){
  .st-pipe{ grid-template-columns:1fr; }
  .st-ps{ border-right:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:56px 1fr; column-gap:14px; row-gap:6px; }
  .st-ps .n{ grid-row:span 2; }
  .st-ps:last-child{ border-bottom:0; }
}

/* ---------- 10 · WHY ---------- */
.st-why{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,64px); padding:clamp(28px,4vw,64px) clamp(18px,3.4vw,48px); }
.st-why p{ margin:0 0 16px; font-size:clamp(16px,1.4vw,18px); line-height:1.6; color:#3d3d43; max-width:60ch; }
.st-links{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; align-self:start; }
.st-links a{ display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:0 20px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--line); background:var(--paper); }
.st-links a:last-child{ border-bottom:0; }
.st-links a:hover{ background:var(--ink); color:#fff; }
.st-founders{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--pad); }
.st-founder{ border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; gap:14px; align-items:flex-start; }
.st-founder img{ width:72px; height:72px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
.st-founder b{ font-family:var(--sans); font-size:18px; display:block; }
.st-founder span{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#5d5d63; display:block; margin-top:4px; }
.st-founder p{ font-size:14px; margin:8px 0 0; }
@media (max-width:860px){ .st-why{ grid-template-columns:1fr; } }

/* ---------- 12 · INTEGRATIONS ---------- */
.st-int{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0 clamp(18px,3vw,40px); list-style:none; margin:0; }
.st-int li{ display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:30px; background:var(--paper-2); font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.st-int li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ---------- 13 · PRICING ---------- */
.st-price{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pad); }
.st-pc{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); padding:clamp(22px,2.6vw,36px); display:flex; flex-direction:column; gap:14px; }
.st-pc.hl{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.st-pc h3{ line-height:1.05; margin:0; font-family:var(--sans); font-weight:700; font-size:clamp(26px,2.6vw,36px); letter-spacing:-.025em; }
.st-pc .for{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.st-pc p{ margin:0; font-size:15.5px; line-height:1.5; color:#3d3d43; }
.st-pc ul{ list-style:none; margin:0; padding:14px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.st-pc li{ display:flex; gap:10px; font-size:14.5px; line-height:1.4; }
.st-pc li::before{ content:"✳"; color:var(--accent); font-family:var(--mono); }
.st-pc .price{ font-family:var(--sans); font-weight:700; font-size:clamp(28px,3vw,40px); letter-spacing:-.03em; }
.st-pc .price small{ display:block; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#5d5d63; margin-bottom:4px; }
.st-pc .btn{ align-self:flex-start; margin-top:auto; }
.st-pc ul + .btn{ margin-top:8px; }
.st-promises{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:var(--pad); }
.st-promises > div{ background:var(--paper); padding:18px 20px; font-size:14.5px; line-height:1.45; }
.st-promises b{ display:block; font-family:var(--sans); font-size:17px; letter-spacing:-.01em; margin-bottom:4px; }
@media (max-width:1000px){ .st-price{ grid-template-columns:1fr; } }

/* ---------- 14 · FAQ ---------- */
.st-faq{ max-width:860px; margin:0 auto; padding:0 clamp(18px,3vw,40px) clamp(28px,4vw,56px); }
.st-faq details{ border-top:1px solid var(--line); }
.st-faq details:last-child{ border-bottom:1px solid var(--line); }
.st-faq summary{ list-style:none; cursor:pointer; min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 2px; font-family:var(--sans); font-weight:700; letter-spacing:-.015em; font-size:clamp(17px,1.7vw,21px); }
.st-faq summary::-webkit-details-marker{ display:none; }
.st-faq summary::after{ content:"+"; font-family:var(--mono); font-size:22px; color:var(--accent); flex:0 0 auto; transition:transform .25s; }
.st-faq details[open] summary::after{ transform:rotate(45deg); }
.st-faq .ans{ padding:0 2px 20px; font-size:16px; line-height:1.6; color:#3d3d43; max-width:68ch; }
.st-faq .ans a{ color:var(--accent); border-bottom:1px solid rgba(80,70,230,.3); }

/* ---------- 15 · FINAL CTA + FORM ---------- */
.st-final{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(24px,4vw,64px); padding:clamp(28px,4.4vw,72px) clamp(18px,3.6vw,52px); align-items:start; }
.st-final h2{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.035em; line-height:.98; font-size:clamp(32px,4.6vw,66px); text-wrap:balance; }
.st-final .lead{ margin:18px 0 0; font-size:clamp(15px,1.4vw,18px); line-height:1.55; color:#c0c0c7; max-width:46ch; }
.st-alt{ display:flex; flex-direction:column; gap:12px; margin-top:24px; align-items:flex-start; }
.st-micro{ margin-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#8e8e96; line-height:1.6; }
.st-form{ background:var(--paper); color:var(--ink); border-radius:14px; padding:clamp(18px,2.4vw,32px); }
.st-steps-ind{ display:flex; gap:10px; margin:0 0 18px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#5d5d63; align-items:center; }
.st-steps-ind i{ flex:1; height:3px; background:var(--line); border-radius:2px; position:relative; overflow:hidden; }
.st-steps-ind i.on::after{ content:""; position:absolute; inset:0; background:var(--accent); }
.st-fs-step[hidden]{ display:none; }
.st-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; border:0; padding:0; min-width:0; }
.st-field > label, .st-field > legend{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); padding:0; }
.st-field .opt{ color:#5d5d63; text-transform:none; letter-spacing:0; }
.st-field input[type=text], .st-field input[type=tel], .st-field input[type=email], .st-field input[type=url], .st-field select, .st-field textarea{
  width:100%; min-height:48px; padding:12px 14px; border:1px solid rgba(0,0,0,.28); border-radius:10px; background:#fff; font-family:var(--body); font-size:16px; color:var(--ink); }
.st-field textarea{ min-height:96px; resize:vertical; }
.st-field input:focus, .st-field select:focus, .st-field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.st-field [aria-invalid="true"]{ border-color:#c8261c; }
.st-err{ font-family:var(--body); font-size:13.5px; color:#b3201a; margin:0; }
.st-err:empty{ display:none; }
.st-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.st-chip{ position:relative; }
.st-chip input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.st-chip span{ display:inline-flex; align-items:center; min-height:44px; padding:0 15px; border:1px solid rgba(0,0,0,.28); border-radius:30px; font-size:14.5px; background:#fff; }
.st-chip input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }
.st-chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.st-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.st-consent{ display:flex; gap:12px; align-items:flex-start; margin:4px 0 16px; font-size:14.5px; line-height:1.45; }
.st-consent input{ width:24px; height:24px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--accent); }
.st-consent a{ color:var(--accent); border-bottom:1px solid rgba(80,70,230,.3); }
.st-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.st-actions .btn{ cursor:pointer; border:0; }
.st-actions .btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.st-actions .btn[disabled]{ opacity:.6; cursor:progress; }
.st-summary{ border:1px solid #c8261c; border-radius:10px; background:#fff4f3; color:#8a1812; padding:12px 14px; margin-bottom:16px; font-size:14.5px; }
.st-summary[hidden]{ display:none; }
.st-summary ul{ margin:6px 0 0; padding-left:18px; }
.st-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:900px){ .st-final{ grid-template-columns:1fr; } }
@media (max-width:520px){ .st-row2{ grid-template-columns:1fr; } }

/* ---------- floating WhatsApp ---------- */
.st-wa{ position:fixed; right:16px; bottom:16px; z-index:70; min-height:52px; padding:0 20px; border-radius:40px; background:#128c4a; color:#fff; display:none; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; box-shadow:0 10px 30px -8px rgba(0,0,0,.45); }
.st-wa:not([hidden]){ display:inline-flex; }
.st-wa.away{ opacity:0; pointer-events:none; }
.st-page ~ .omcc.show ~ .st-wa, body:has(.omcc.show) .st-wa{ bottom:112px; }
@media (min-width:1025px){ .st-wa{ display:none !important; } }

/* ---------- thank-you ---------- */
.st-thanks{ max-width:760px; margin:0 auto; padding:clamp(32px,6vw,88px) clamp(18px,4vw,48px); }
.st-thanks h1{ margin:18px 0 0; font-family:var(--sans); font-weight:700; letter-spacing:-.04em; line-height:.95; font-size:clamp(44px,8vw,104px); }
.st-thanks ol{ margin:26px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.st-thanks li{ display:grid; grid-template-columns:44px 1fr; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); font-size:16.5px; line-height:1.5; }
.st-thanks li b{ font-family:var(--mono); color:var(--accent); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .st-flow .dot{ animation:none; }
  .st-flow li, .st-fn, .st-es .n, .st-ps::before{ transition:none; }
}

/* ---------- mobile tuning ---------- */
@media (max-width:1000px){
  .st-hero-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .st-cta .btn, .st-alt .btn{ width:100%; justify-content:center; }
  .st-subnav a{ padding:0 13px; }
}

/* keep focused/scrolled-to fields clear of the fixed nav + sticky sub-nav */
.st-field, .st-summary, .st-consent, .st-form{ scroll-margin-top:200px; scroll-margin-bottom:120px; }

/* ---------- experience highlight ---------- */
.st-exp{ background:var(--accent); color:#fff; border-radius:var(--radius); overflow:hidden; position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(20px,4vw,64px); padding:clamp(24px,3.6vw,52px) clamp(20px,4vw,64px); }
.st-exp::after{ content:"✳"; position:absolute; right:-1%; top:-30%; font-size:clamp(200px,28vw,380px); line-height:1; color:rgba(255,255,255,.07); pointer-events:none; }
.st-exp-num{ font-family:var(--sans); font-weight:700; letter-spacing:-.04em; line-height:.8; font-size:clamp(96px,14vw,200px); display:flex; align-items:flex-start; position:relative; z-index:1; }
.st-exp-num i{ font-style:normal; font-weight:600; color:#d7d4ff; font-size:.46em; line-height:1; letter-spacing:0; margin:.04em 0 0 .05em; }
.st-exp-txt{ position:relative; z-index:1; }
.st-exp-k{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#e0deff; }
.st-exp h2{ margin:10px 0 0; font-family:var(--sans); font-weight:700; letter-spacing:-.03em; line-height:1; font-size:clamp(26px,3.6vw,52px); text-wrap:balance; }
.st-exp p{ margin:14px 0 0; font-size:clamp(15px,1.4vw,18px); line-height:1.5; color:#e6e6ff; max-width:48ch; }
.st-exp[hidden]{ display:none !important; }
@media (max-width:640px){ .st-exp{ grid-template-columns:1fr; gap:14px; } .st-exp-num{ font-size:clamp(88px,30vw,130px); } }