/* ============================================================
   RangerOS — shared styles
   Identity: "Operations console / decision feed"
   teal = running autonomously · amber = needs your decision
   ============================================================ */

:root{
  --ink:#0E141E;
  --ink-2:#18212E;
  --ink-3:#222C3B;
  --paper:#ECEFF1;
  --paper-2:#E3E7EB;
  --card:#FFFFFF;
  --flow:#10806C;          /* running / autonomous */
  --flow-soft:#DDEFE9;
  --flow-ink:#0B5C4E;
  --signal:#DF6A33;        /* needs you / decision */
  --signal-soft:#FAE7DB;
  --signal-ink:#A8491C;
  --line:#D8DDE3;
  --line-strong:#C3CAD2;
  --muted:#5B6573;
  --muted-2:#828C99;
  --on-dark:#E7EBEF;
  --on-dark-mute:#9AA6B4;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --maxw:1180px;
  --shadow-sm:0 1px 2px rgba(14,20,30,.06), 0 2px 6px rgba(14,20,30,.05);
  --shadow-md:0 10px 30px -12px rgba(14,20,30,.22);
  --shadow-lg:0 30px 70px -28px rgba(14,20,30,.40);

  --f-display:"Space Grotesk", system-ui, sans-serif;
  --f-body:"IBM Plex Sans", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:0;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
ul{margin:0; padding:0; list-style:none;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--line-strong);
  display:inline-block;
}
.section{padding:96px 0;}
.section-tight{padding:64px 0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-body); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--ink-2); box-shadow:var(--shadow-md);}
.btn-signal{background:var(--signal); color:#fff;}
.btn-signal:hover{background:#cc5d29; box-shadow:0 14px 30px -12px rgba(223,106,51,.6);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink); background:rgba(14,20,30,.03);}
.btn-light{background:#fff; color:var(--ink);}
.btn-light:hover{box-shadow:var(--shadow-md);}
.btn-arrow svg{transition:transform .2s ease;}
.btn-arrow:hover svg{transform:translateX(3px);}

/* status dot */
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none;}
.dot-flow{background:var(--flow); box-shadow:0 0 0 0 rgba(16,128,108,.5); animation:pulse 2.4s infinite;}
.dot-signal{background:var(--signal); box-shadow:0 0 0 0 rgba(223,106,51,.5); animation:pulse 1.6s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(16,128,108,.45);}
  70%{box-shadow:0 0 0 7px rgba(16,128,108,0);}
  100%{box-shadow:0 0 0 0 rgba(16,128,108,0);}
}
.dot-signal{animation-name:pulse-s;}
@keyframes pulse-s{
  0%{box-shadow:0 0 0 0 rgba(223,106,51,.5);}
  70%{box-shadow:0 0 0 7px rgba(223,106,51,0);}
  100%{box-shadow:0 0 0 0 rgba(223,106,51,0);}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(236,239,241,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:-.02em;}
.brand-mark{
  width:30px; height:30px; border-radius:9px; background:var(--ink);
  display:grid; place-items:center; position:relative; flex:none;
}
.brand-mark::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--flow);}
.brand-mark::after{content:""; position:absolute; right:6px; top:6px; width:5px; height:5px; border-radius:50%; background:var(--signal);}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{font-size:15px; color:var(--muted); font-weight:500; transition:color .15s;}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; transition:.2s;}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:70px 0 90px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center;}
.hero h1{
  font-size:clamp(38px, 5.4vw, 64px); margin:20px 0 0; max-width:14ch;
}
.hero h1 em{font-style:normal; color:var(--flow); position:relative;}
.hero-sub{font-size:clamp(16px,1.4vw,19px); color:var(--muted); max-width:46ch; margin-top:22px;}
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-trust{margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:14px;}
.hero-trust .tick{display:inline-flex; align-items:center; gap:7px;}
.hero-trust .tick svg{color:var(--flow);}
.hero-bg-rail{position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;}

/* console panel */
.console{
  background:var(--ink); border-radius:var(--r-xl); padding:18px;
  box-shadow:var(--shadow-lg); color:var(--on-dark); position:relative; z-index:1;
}
.console-top{display:flex; align-items:center; gap:8px; padding:6px 8px 14px;}
.console-top .tl{width:11px; height:11px; border-radius:50%; background:#2d3947;}
.console-title{margin-left:8px; font-family:var(--f-mono); font-size:12px; color:var(--on-dark-mute); letter-spacing:.04em;}
.console-title b{color:var(--on-dark); font-weight:500;}
.feed{display:flex; flex-direction:column; gap:10px;}
.feed-row{
  background:var(--ink-2); border:1px solid #2a3543; border-radius:var(--r-md);
  padding:13px 14px; display:flex; gap:12px; align-items:flex-start;
}
.feed-row .meta{flex:1; min-width:0;}
.feed-row .who{font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; color:var(--on-dark-mute); text-transform:uppercase;}
.feed-row .msg{font-size:14px; margin-top:3px; color:var(--on-dark);}
.feed-row.is-running{opacity:.78;}
.feed-row .stat-chip{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; align-self:center; white-space:nowrap;
}
.chip-run{background:rgba(16,128,108,.18); color:#5fd3bb;}
.chip-done{background:rgba(255,255,255,.08); color:var(--on-dark-mute);}
.decision{border-color:rgba(223,106,51,.55); background:linear-gradient(180deg, rgba(223,106,51,.10), rgba(223,106,51,.02));}
.decision .actions{display:flex; gap:8px; margin-top:11px;}
.decision .actions button{
  font-family:var(--f-mono); font-size:12px; cursor:pointer;
  padding:6px 12px; border-radius:8px; border:1px solid #36424f; background:#222c3b; color:var(--on-dark);
  transition:.15s;
}
.decision .actions button.go{background:var(--signal); border-color:var(--signal); color:#fff;}
.decision .actions button:hover{transform:translateY(-1px);}
.console-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 8px 4px; font-family:var(--f-mono); font-size:11px; color:var(--on-dark-mute);
}

/* ============================================================
   LOGO / STAT STRIP
   ============================================================ */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2);}
.strip-inner{display:flex; align-items:center; justify-content:space-between; gap:30px; padding:26px 0; flex-wrap:wrap;}
.strip-label{font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);}
.strip-stats{display:flex; gap:48px; flex-wrap:wrap;}
.strip-stats .s{display:flex; flex-direction:column;}
.strip-stats .n{font-family:var(--f-display); font-size:30px; font-weight:600; letter-spacing:-.02em;}
.strip-stats .l{font-size:13px; color:var(--muted);}

/* section heading block */
.shead{max-width:680px;}
.shead h2{font-size:clamp(28px,3.6vw,42px); margin-top:14px;}
.shead p{color:var(--muted); margin-top:16px; font-size:17px;}
.shead.center{margin:0 auto; text-align:center;}
.shead.center .eyebrow{justify-content:center;}

/* ============================================================
   PAIN POINTS
   ============================================================ */
.pains{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px;}
.pain{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.pain:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.pain .num{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(40px,4.4vw,54px); color:var(--signal); line-height:1;
}
.pain .num .u{font-size:.5em; color:var(--signal-ink); margin-left:2px;}
.pain h3{font-size:18px; margin-top:14px;}
.pain p{color:var(--muted); font-size:14.5px; margin-top:8px;}
.pain .src{font-family:var(--f-mono); font-size:10.5px; color:var(--muted-2); margin-top:14px; letter-spacing:.03em;}

/* ============================================================
   SOLUTIONS (pain -> fix)
   ============================================================ */
.sols{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px;}
.sol{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; display:flex; flex-direction:column; gap:14px;
  transition:transform .2s, box-shadow .2s; box-shadow:var(--shadow-sm);
}
.sol:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.sol-head{display:flex; align-items:center; gap:14px;}
.sol-ic{
  width:46px; height:46px; border-radius:13px; background:var(--flow-soft);
  display:grid; place-items:center; color:var(--flow-ink); flex:none;
}
.sol-ic svg{width:23px; height:23px;}
.sol h3{font-size:19px;}
.sol .from{font-family:var(--f-mono); font-size:12px; color:var(--signal-ink); letter-spacing:.02em;}
.sol-list{display:flex; flex-direction:column; gap:9px; margin-top:2px;}
.sol-list li{display:flex; gap:10px; font-size:14.5px; color:var(--ink-3); align-items:flex-start;}
.sol-list li svg{color:var(--flow); flex:none; margin-top:3px;}
.sol-note{
  margin-top:auto; font-family:var(--f-mono); font-size:12.5px; color:var(--on-dark);
  background:var(--ink); border-radius:var(--r-md); padding:12px 14px;
  display:flex; align-items:center; gap:10px;
}
.sol-note .lbl{color:var(--on-dark-mute);}
.sol-result{font-size:13.5px; color:var(--flow-ink); font-weight:600; display:flex; gap:7px; align-items:center;}

/* ============================================================
   HOW IT WORKS (timeline)
   ============================================================ */
.flowsec{background:var(--ink); color:var(--on-dark);}
.flowsec .eyebrow{color:var(--on-dark-mute);}
.flowsec .eyebrow::before{background:#39434f;}
.flowsec .shead h2{color:#fff;}
.flowsec .shead p{color:var(--on-dark-mute);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:50px;}
.step{position:relative; padding:0 22px;}
.step:not(:last-child)::after{
  content:""; position:absolute; top:13px; left:50%; right:-50%; height:1px;
  background:linear-gradient(90deg, #39434f, #39434f 70%, transparent);
}
.step .k{
  width:28px; height:28px; border-radius:50%; background:var(--ink-3); border:1px solid #3b4654;
  display:grid; place-items:center; font-family:var(--f-mono); font-size:12px; color:#fff;
  position:relative; z-index:1;
}
.step h3{font-size:18px; color:#fff; margin-top:22px;}
.step p{color:var(--on-dark-mute); font-size:14.5px; margin-top:9px;}
.step .tag{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-top:12px; display:inline-flex; gap:7px; align-items:center;}
.tag-flow{color:#5fd3bb;}
.tag-signal{color:#f0a279;}

/* ============================================================
   SPECIALISTS
   ============================================================ */
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:46px;}
.member{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; transition:transform .2s, box-shadow .2s; box-shadow:var(--shadow-sm);
}
.member:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.member .av{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:600; font-size:20px; color:#fff;
}
.member h3{font-size:17px; margin-top:16px;}
.member .role{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-top:4px;}
.member p{color:var(--muted); font-size:14px; margin-top:11px;}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cmp{margin-top:44px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--card); box-shadow:var(--shadow-sm);}
.cmp table{width:100%; border-collapse:collapse;}
.cmp th, .cmp td{padding:18px 20px; text-align:left; font-size:15px; border-bottom:1px solid var(--line);}
.cmp thead th{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--paper-2);}
.cmp thead th.us{color:var(--flow-ink); background:var(--flow-soft);}
.cmp td.us{background:rgba(16,128,108,.05); font-weight:600;}
.cmp tbody tr:last-child td{border-bottom:0;}
.cmp .yes{color:var(--flow); font-weight:600;}
.cmp .no{color:var(--muted-2);}
.cmp .mid{color:var(--signal-ink);}
.cmp td:first-child{font-weight:500;}

/* ============================================================
   TESTIMONIALS (marquee)
   ============================================================ */
.marquee{overflow:hidden; position:relative; margin-top:46px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.marquee-track{display:flex; gap:18px; width:max-content; animation:scroll 46s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee + .marquee{margin-top:18px;}
.marquee.rev .marquee-track{animation-direction:reverse; animation-duration:54s;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.tcard{
  width:340px; flex:none; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--shadow-sm);
}
.tcard .stars{color:var(--signal); font-size:13px; letter-spacing:2px;}
.tcard p{font-size:14.5px; color:var(--ink-3); margin-top:12px;}
.tcard .who{display:flex; align-items:center; gap:11px; margin-top:16px;}
.tcard .who .av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:14px; color:#fff;}
.tcard .who .nm{font-size:14px; font-weight:600;}
.tcard .who .rl{font-size:12px; color:var(--muted);}

/* ============================================================
   PRICING
   ============================================================ */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; align-items:stretch;}
.tier{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.tier.feat{background:var(--ink); color:var(--on-dark); border-color:var(--ink); box-shadow:var(--shadow-lg); transform:translateY(-8px);}
.tier .pname{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.tier.feat .pname{color:#f0a279;}
.tier .price{font-family:var(--f-display); font-weight:600; font-size:46px; letter-spacing:-.03em; margin-top:14px; display:flex; align-items:baseline; gap:6px;}
.tier .price span{font-family:var(--f-body); font-size:15px; font-weight:500; color:var(--muted);}
.tier.feat .price span{color:var(--on-dark-mute);}
.tier .ptag{font-size:14px; color:var(--muted); margin-top:6px;}
.tier.feat .ptag{color:var(--on-dark-mute);}
.tier ul{display:flex; flex-direction:column; gap:11px; margin:24px 0;}
.tier li{display:flex; gap:10px; font-size:14.5px; align-items:flex-start;}
.tier li svg{color:var(--flow); flex:none; margin-top:3px;}
.tier.feat li svg{color:#5fd3bb;}
.tier .btn{margin-top:auto; justify-content:center;}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px; margin:44px auto 0;}
.qa{border-bottom:1px solid var(--line);}
.qa summary{
  width:100%; list-style:none; cursor:pointer; text-align:left;
  padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--f-display); font-weight:500; font-size:18px; color:var(--ink); letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{display:none;}
.qa .ic{flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; transition:.2s; color:var(--muted);}
.qa[open] .ic{background:var(--ink); color:#fff; border-color:var(--ink); transform:rotate(45deg);}
.qa .a{padding:0 0 22px; color:var(--muted); font-size:15.5px; max-width:70ch;}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta{background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:64px 56px; position:relative; overflow:hidden;}
.cta h2{font-size:clamp(28px,3.6vw,44px); max-width:18ch;}
.cta p{color:var(--on-dark-mute); margin-top:16px; max-width:52ch; font-size:17px;}
.cta-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.cta .glow{position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(223,106,51,.35), transparent 70%); pointer-events:none;}
.cta .glow.two{left:-60px; bottom:-120px; top:auto; right:auto; background:radial-gradient(circle, rgba(16,128,108,.35), transparent 70%);}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; margin-top:48px; align-items:start;}
.cinfo .ci{display:flex; gap:14px; padding:20px 0; border-bottom:1px solid var(--line);}
.cinfo .ci:first-child{padding-top:0;}
.cinfo .ci .ic{width:42px; height:42px; border-radius:12px; background:var(--flow-soft); color:var(--flow-ink); display:grid; place-items:center; flex:none;}
.cinfo .ci h4{font-family:var(--f-display); font-size:16px;}
.cinfo .ci p{color:var(--muted); font-size:14.5px; margin-top:4px;}
.form{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-sm);}
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:7px; font-family:var(--f-mono); letter-spacing:.03em; text-transform:uppercase; color:var(--muted);}
.field input, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line-strong); border-radius:var(--r-md);
  font-family:var(--f-body); font-size:15px; background:var(--paper); color:var(--ink); transition:.15s;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--flow); box-shadow:0 0 0 3px rgba(16,128,108,.12); background:#fff;}
.field textarea{resize:vertical; min-height:120px;}
.form-note{font-size:13px; color:var(--muted); margin-top:6px;}

/* page hero (sub-pages) */
.phead{padding:72px 0 20px;}
.phead h1{font-size:clamp(34px,5vw,56px); max-width:18ch; margin-top:18px;}
.phead p{color:var(--muted); font-size:18px; max-width:56ch; margin-top:18px;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink); color:var(--on-dark); padding:70px 0 34px; margin-top:0;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
.footer .brand{color:#fff;}
.footer .fdesc{color:var(--on-dark-mute); font-size:14.5px; margin-top:16px; max-width:34ch;}
.footer h5{font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-mute); margin-bottom:16px;}
.footer ul li{margin-bottom:11px;}
.footer ul a{color:var(--on-dark); font-size:14.5px; opacity:.85; transition:.15s;}
.footer ul a:hover{opacity:1; color:#5fd3bb;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:48px; padding-top:24px; border-top:1px solid #2a3543; color:var(--on-dark-mute); font-size:13px;}
.footer-bottom .socs{display:flex; gap:14px;}
.footer-bottom .socs a{width:34px; height:34px; border-radius:9px; border:1px solid #2a3543; display:grid; place-items:center; transition:.15s;}
.footer-bottom .socs a:hover{background:var(--ink-3); border-color:var(--ink-3);}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .pains{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr); gap:34px 20px;}
  .step:not(:last-child)::after{display:none;}
  .team{grid-template-columns:repeat(2,1fr);}
  .tiers{grid-template-columns:1fr;}
  .tier.feat{transform:none;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .section{padding:64px 0;}
  .nav-links, .nav-cta .btn-trial{display:none;}
  .nav-toggle{display:block;}
  .nav.open .nav-links{
    display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column;
    background:var(--paper); border-bottom:1px solid var(--line); padding:18px 24px; gap:16px;
  }
  .sols{grid-template-columns:1fr;}
  .pains{grid-template-columns:1fr;}
  .strip-stats{gap:28px;}
  .cta{padding:44px 28px;}
  .cmp{overflow-x:auto;}
  .footer-top{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none;}
}