/* ==========================================================
   blinkitambulance.in — components
   Hero, ambulance art, mockups, cards, figures, form, FAQ.
   ========================================================== */

/* ================= HERO ================= */
.hero{position:relative; background:var(--yellow); padding:132px 0 0; overflow:hidden}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 84% 6%, rgba(255,255,255,.42), transparent 46%),
    radial-gradient(circle at 6% 92%, rgba(10,92,54,.10), transparent 46%);
}
.hero-inner{position:relative; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:52px; align-items:center; padding-bottom:34px}

.badge{
  display:inline-flex; align-items:center; gap:10px; padding:9px 18px 9px 14px;
  border-radius:999px; background:var(--ink); color:var(--yellow);
  font-family:var(--display); font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.badge .dot{width:8px; height:8px; border-radius:50%; background:var(--yellow); flex:0 0 auto; animation:pulse-y 2.1s infinite}
@keyframes pulse-y{
  0%{box-shadow:0 0 0 0 rgba(255,212,38,.7)}
  70%{box-shadow:0 0 0 9px rgba(255,212,38,0)}
  100%{box-shadow:0 0 0 0 rgba(255,212,38,0)}
}

.hero h1{margin-top:24px; font-size:clamp(38px,6.4vw,74px); font-weight:800; letter-spacing:-.045em; line-height:.98}
.hero h1 .dom{font-family:var(--mono); letter-spacing:-.055em; word-break:break-word; display:block}
.hero h1 .dom .tld{color:var(--green)}
.hero-tagline{
  margin-top:20px; display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--display); font-weight:800; font-size:clamp(17px,2.1vw,23px); letter-spacing:-.02em; color:var(--green);
}
.hero-tagline .chip{
  background:rgba(10,92,54,.10); border-radius:8px; padding:3px 11px; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--green);
}
.hero-lede{margin-top:20px; max-width:50ch; font-size:17.5px; color:rgba(11,18,32,.74); line-height:1.6}
.hero-actions{display:flex; flex-wrap:wrap; gap:13px; margin-top:32px}

.hero-facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px}
.hero-facts li{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:rgba(11,18,32,.72)}
.hero-facts svg{width:17px; height:17px; flex:0 0 auto; fill:none; stroke:var(--green); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

/* independence disclosure — visible, not hidden */
.disclosure{
  position:relative; margin:6px 0 0; padding:16px 20px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.62); border:1.5px solid rgba(11,18,32,.14);
  display:flex; gap:12px; align-items:flex-start; max-width:none;
}
.disclosure svg{width:18px; height:18px; flex:0 0 auto; margin-top:2px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round}
.disclosure p{font-size:13.5px; line-height:1.55; color:rgba(11,18,32,.82)}
.disclosure strong{font-weight:700; color:var(--ink)}
.hero .disclosure{margin-top:30px}

/* hero ambulance art */
.hero-art{position:relative}
.hero-art .amb{width:100%; height:auto; display:block; overflow:visible}

/* wide city band under the hero */
.hero-band{position:relative; margin-top:8px}
.hero-band svg{width:100%; height:auto; display:block}

/* ---- ambulance animation ---- */
.amb .wheel-spin{transform-box:fill-box; transform-origin:center; animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.amb .beacon{animation:beacon 1s steps(1) infinite}
.amb .beacon-b{animation:beacon 1s steps(1) .5s infinite}
@keyframes beacon{0%,49%{opacity:1} 50%,100%{opacity:.18}}
.amb .body-bob{transform-box:fill-box; animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
.amb .speed{stroke:var(--green); stroke-width:4; stroke-linecap:round; opacity:0}
.amb .speed-1{animation:whoosh 1.5s ease-out infinite}
.amb .speed-2{animation:whoosh 1.5s ease-out .18s infinite}
.amb .speed-3{animation:whoosh 1.5s ease-out .36s infinite}
@keyframes whoosh{0%{opacity:0; transform:translateX(28px)} 35%{opacity:.6} 100%{opacity:0; transform:translateX(-36px)}}

/* ================= TRUST STRIP ================= */
.strip{background:var(--ink); color:#fff; padding:22px 0; overflow:hidden}
.strip-inner{display:flex; gap:0; width:max-content; animation:slide 44s linear infinite}
.strip span{font-family:var(--mono); font-size:13.5px; font-weight:500; color:rgba(255,255,255,.72); white-space:nowrap; padding:0 22px}
.strip i{color:var(--yellow); font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ================= USE CASES ================= */
.uses{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.use{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:26px 22px 28px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.use:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--green)}
.use .ico{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--yellow); margin-bottom:16px;
}
.use .ico svg{width:23px; height:23px; fill:none; stroke:var(--ink); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.use h3{font-size:17.5px; font-weight:800; margin-bottom:8px}
.use p{font-size:14.5px; color:var(--slate); line-height:1.55}

/* ================= MARKETING / MOCKUPS ================= */
.market-stage{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:center}

.city{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg)}
.city svg{width:100%; height:auto; display:block}

.phone{
  width:300px; justify-self:center; border-radius:40px; padding:10px;
  background:linear-gradient(160deg,#2B3446,#0E1524);
  box-shadow:0 46px 80px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.10);
}
.phone-screen{position:relative; background:#0B1220; border-radius:31px; overflow:hidden}
.phone-notch{position:absolute; top:0; left:50%; transform:translateX(-50%); width:104px; height:22px; background:#0E1524; border-radius:0 0 13px 13px; z-index:3}
.ph-status{display:flex; justify-content:space-between; align-items:center; padding:9px 18px 5px; font-size:11px; font-weight:600; color:#C8D0DC; font-family:var(--mono)}
.ph-status .sig{display:flex; gap:3px; align-items:flex-end}
.ph-status .sig i{width:3px; background:#C8D0DC; border-radius:1px; display:block}
.ph-status .sig i:nth-child(1){height:4px}
.ph-status .sig i:nth-child(2){height:6px}
.ph-status .sig i:nth-child(3){height:9px}
.ph-status .sig i:nth-child(4){height:11px}

.ph-head{padding:10px 18px 12px; display:flex; align-items:center; gap:9px}
.ph-head .m-mark{width:26px; height:26px; border-radius:8px; background:var(--yellow); display:grid; place-items:center; flex:0 0 auto}
.ph-head .m-mark svg{width:14px; height:14px; stroke:var(--ink); stroke-width:3; fill:none; stroke-linecap:round}
.ph-head b{font-family:var(--display); font-size:13px; font-weight:800; letter-spacing:-.02em; color:#fff}
.ph-concept{
  margin-left:auto; font-size:9px; font-weight:800; letter-spacing:.11em; padding:4px 8px;
  border-radius:5px; background:rgba(255,212,38,.18); color:var(--yellow);
}

.ph-map{position:relative; height:196px; background:#101A2B; overflow:hidden}
.ph-map .roads{position:absolute; inset:0; width:100%; height:100%}
.ph-map .roads path{stroke:rgba(255,255,255,.07); stroke-width:6; fill:none; stroke-linecap:round}
.ph-map .roads .major{stroke:rgba(255,255,255,.12); stroke-width:8}
.ph-route{stroke:var(--yellow); stroke-width:4; fill:none; stroke-linecap:round; stroke-dasharray:210; stroke-dashoffset:210; animation:route 3.6s var(--ease) infinite}
@keyframes route{0%{stroke-dashoffset:210} 45%,80%{stroke-dashoffset:0} 100%{stroke-dashoffset:0; opacity:.3}}
.ph-pin{position:absolute; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; animation:pulse-y 2.1s infinite}
.ph-pin svg{width:15px; height:15px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ph-pin-a{left:20px; top:126px; background:var(--yellow)}
.ph-pin-a svg{stroke:var(--ink)}
.ph-pin-b{right:24px; top:32px; background:var(--green)}
.ph-pin-b svg{stroke:#fff}

.ph-body{padding:14px 14px 16px}
.ph-row{display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.ph-row:last-of-type{border-bottom:0}
.ph-dot{width:9px; height:9px; border-radius:50%; margin-top:6px; flex:0 0 auto}
.ph-dot.y{background:var(--yellow)}
.ph-dot.g{background:var(--green-mid)}
.ph-k{font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:#7E8AA0; font-weight:700}
.ph-v{font-size:13px; color:#fff; font-weight:600; margin-top:2px; line-height:1.4}
.ph-eta{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:13px; background:rgba(255,212,38,.12); border:1px solid rgba(255,212,38,.28); margin-bottom:12px}
.ph-eta b{font-family:var(--display); font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--yellow)}
.ph-eta span{font-size:11px; color:#9AA5B6; text-align:right; line-height:1.4}
.ph-cta{margin-top:13px; padding:14px; border-radius:13px; background:var(--yellow); text-align:center; font-family:var(--display); font-weight:800; font-size:14px; color:var(--ink)}

.mock-caption{
  margin-top:22px; display:flex; align-items:flex-start; gap:11px; padding:16px 20px;
  border-radius:var(--radius-sm); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.74);
}
.mock-caption svg{width:17px; height:17px; flex:0 0 auto; margin-top:3px; fill:none; stroke:var(--yellow); stroke-width:2; stroke-linecap:round}
.mock-caption strong{color:#fff; font-weight:700}

/* ================= WHY THIS DOMAIN ================= */
.whys{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.why{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:32px 30px 34px; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why::before{content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--yellow); transform:scaleY(0); transform-origin:50% 0; transition:transform .4s var(--ease)}
.why:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.why:hover::before{transform:scaleY(1)}
.why-n{font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--green); letter-spacing:.08em}
.why h3{margin:12px 0 10px; font-size:22px; font-weight:800; letter-spacing:-.03em}
.why p{color:var(--slate); font-size:15.5px; line-height:1.6}

/* ================= DOMAIN VALUE VISUAL ================= */
.value-viz{text-align:center}
.vv-domain{
  display:inline-block; font-family:var(--mono); font-weight:700;
  font-size:clamp(22px,3.6vw,40px); letter-spacing:-.05em; padding:20px 34px;
  border-radius:var(--radius); background:var(--ink); color:#fff; box-shadow:var(--shadow-lg);
  word-break:break-word; max-width:100%;
}
.vv-domain .tld{color:var(--yellow)}
.vv-arrow{display:block; margin:24px auto; width:26px; height:46px; stroke:var(--green); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.vv-parts{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin:0 auto}
.vv-part{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:26px 18px;
  transition:transform .3s var(--ease), border-color .3s ease, box-shadow .3s var(--ease);
}
.vv-part:hover{transform:translateY(-5px); border-color:var(--green); box-shadow:var(--shadow-md)}
.vv-part .ico{width:46px; height:46px; margin:0 auto 14px; border-radius:14px; background:var(--yellow); display:grid; place-items:center}
.vv-part .ico svg{width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.vv-part b{display:block; font-family:var(--display); font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.vv-part span{display:block; margin-top:6px; font-size:13px; color:var(--slate); line-height:1.5}
.vv-plus{display:none}

/* ================= CATEGORY / DATA ================= */
.data-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:20px; align-items:stretch}
.panel{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:28px 26px 26px}
.section-green .panel,.section-ink .panel{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14)}
.panel-h{font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.025em}
.panel-sub{margin-top:6px; font-size:13px; color:var(--slate-2)}
.section-green .panel-h,.section-ink .panel-h{color:#fff}
.section-green .panel-sub,.section-ink .panel-sub{color:rgba(255,255,255,.6)}
.stack{display:grid; gap:20px}

table.barchart{width:100%; border-collapse:collapse; margin-top:24px}
table.barchart caption{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
table.barchart th{text-align:left; font-weight:500; font-size:13.5px; color:var(--slate); padding:0 18px 16px 0; vertical-align:middle; transition:color .18s ease}
table.barchart td{padding:0 0 16px; vertical-align:middle; width:100%}
table.barchart tr:last-child th,table.barchart tr:last-child td{padding-bottom:0}
.section-green table.barchart th{color:rgba(255,255,255,.7)}
.bar-row{display:flex; align-items:center; gap:12px}
.bar-track{flex:1 1 auto; height:14px; background:var(--line-2); border-radius:0 5px 5px 0; overflow:hidden}
.section-green .bar-track{background:rgba(255,255,255,.12)}
.bar-fill{display:block; height:100%; width:0; background:var(--green); border-radius:0 5px 5px 0; transition:width 1s var(--ease), background .18s ease}
.section-green .bar-fill{background:var(--yellow)}
.bar-val{flex:0 0 auto; font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.02em; min-width:46px; text-align:right}
.section-green .bar-val{color:#fff}
tr.barline{cursor:default}
tr.barline:hover .bar-fill{filter:brightness(1.12)}

.prop{margin-top:20px}
.prop-num{font-family:var(--display); font-weight:800; font-size:clamp(44px,6vw,62px); letter-spacing:-.045em; line-height:1; color:var(--green)}
.section-green .prop-num{color:var(--yellow)}
.prop-bar{margin-top:16px; height:14px; background:var(--line-2); border-radius:7px; overflow:hidden}
.section-green .prop-bar{background:rgba(255,255,255,.12)}
.prop-fill{display:block; height:100%; width:0; background:var(--green); border-radius:7px; transition:width 1.1s var(--ease)}
.section-green .prop-fill{background:var(--yellow)}
.prop-legend{display:flex; justify-content:space-between; margin-top:10px; font-size:12.5px; color:var(--slate-2)}
.section-green .prop-legend{color:rgba(255,255,255,.6)}

.growth{display:flex; align-items:flex-end; gap:18px; margin-top:24px; height:120px}
.gcol{flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:10px; height:100%}
.gbar{width:100%; max-width:68px; border-radius:7px 7px 0 0; height:0; transition:height 1s var(--ease)}
.gbar-1{background:rgba(10,92,54,.3)}
.gbar-2{background:var(--green)}
.section-green .gbar-1{background:rgba(255,212,38,.32)}
.section-green .gbar-2{background:var(--yellow)}
.gval{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.03em}
.glab{font-size:12px; color:var(--slate-2); text-align:center; line-height:1.35}
.section-green .glab{color:rgba(255,255,255,.6)}

.figcap{margin-top:16px; font-size:12.5px; color:var(--slate-2); line-height:1.6}
.section-green .figcap{color:rgba(255,255,255,.55)}
.figcap strong{color:var(--slate)}
.section-green .figcap strong{color:rgba(255,255,255,.8)}

.chart-tip{
  position:fixed; z-index:150; pointer-events:none; opacity:0; background:var(--ink); color:#fff;
  padding:9px 13px; border-radius:9px; font-size:12.5px; line-height:1.45;
  box-shadow:var(--shadow-lg); transform:translate(-50%,-118%); transition:opacity .14s ease; max-width:230px;
}
.chart-tip.is-on{opacity:1}

.press{margin-top:48px; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px}
.section-green .press{border-top-color:rgba(255,255,255,.16)}
.press-l{font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--slate-2)}
.section-green .press-l{color:rgba(255,255,255,.5)}
.press a{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.02em; color:var(--slate); text-decoration:none; opacity:.75; transition:opacity .2s ease, color .2s ease}
.section-green .press a{color:#fff}
.press a:hover{opacity:1; color:var(--green)}
.section-green .press a:hover{color:var(--yellow)}

/* ================= QC -> HEALTHCARE ================= */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.flow-step{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:24px 18px;
  text-align:center; transition:transform .3s var(--ease), border-color .3s ease;
}
.flow-step:hover{transform:translateY(-4px); border-color:var(--green)}
.flow-step .ico{width:46px; height:46px; margin:0 auto 14px; border-radius:50%; background:var(--green-tint); display:grid; place-items:center}
.flow-step .ico svg{width:21px; height:21px; fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.flow-step b{display:block; font-family:var(--display); font-size:15px; font-weight:800; letter-spacing:-.02em}
.flow-step span{display:block; margin-top:6px; font-size:13px; color:var(--slate); line-height:1.5}

/* ================= SALE / OFFER ================= */
.sale-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px}
.sale-fact{
  background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.16);
  border-radius:var(--radius); padding:24px 22px;
}
.sale-fact .k{font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.sale-fact .v{margin-top:9px; font-family:var(--mono); font-weight:700; font-size:19px; letter-spacing:-.035em; color:#fff; word-break:break-word}
.sale-fact .v.avail{color:var(--yellow); font-family:var(--display); letter-spacing:-.01em; font-size:18px}

.contact{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:24px; align-items:start}
.offer-form{background:#fff; border-radius:var(--radius); padding:32px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{margin-bottom:16px; display:flex; flex-direction:column}
.field label{font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--ink)}
.field .opt{color:var(--slate-2); font-weight:400}
.field input,.field textarea{
  font:inherit; font-size:15.5px; padding:14px 16px; border:1.5px solid var(--line);
  border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); width:100%; resize:vertical;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#A3ACBA}
.field input:focus,.field textarea:focus{outline:none; background:#fff; border-color:var(--green); box-shadow:0 0 0 4px rgba(10,92,54,.12)}
.field input.invalid,.field textarea.invalid{border-color:#C62828; background:#FDF2F2}
.form-actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:6px}
.form-note{margin-top:16px; font-size:13.5px; color:var(--slate-2); line-height:1.55}
.form-note.ok{color:var(--green); font-weight:600}
.form-note.err{color:#C62828; font-weight:600}

.contact-card{background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:32px; color:#fff}
.cc-label{font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.cc-name{font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.03em; margin-top:8px}
.cc-sub{font-size:14.5px; color:rgba(255,255,255,.65); margin-top:4px}
.cc-list{margin:26px 0 0; display:grid; gap:2px}
.cc-list li{display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12)}
.cc-list li:last-child{border-bottom:0}
.cc-list li > span:nth-child(2){flex:1 1 auto; min-width:0}
.cc-ico{width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:rgba(255,212,38,.16)}
.cc-ico svg{width:18px; height:18px; fill:none; stroke:var(--yellow); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.cc-k{display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:700}
.cc-v{display:block; font-size:15.5px; font-weight:700; text-decoration:none; word-break:break-word; margin-top:3px; color:#fff}
a.cc-v:hover{color:var(--yellow)}
.copy-btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px; cursor:pointer;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); border-radius:9px;
  font-size:12px; font-weight:700; color:rgba(255,255,255,.8); transition:background .18s ease, color .18s ease;
}
.copy-btn:hover{background:rgba(255,255,255,.18); color:#fff}
.cc-hours{margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12)}
.cc-hours p{font-size:13.5px; color:rgba(255,255,255,.65); margin-bottom:7px}
.cc-hours strong{color:#fff; font-weight:700}

/* ================= FAQ ================= */
.accordion{border-top:1.5px solid var(--line)}
.acc-item{border-bottom:1.5px solid var(--line)}
.acc-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:22px;
  background:none; border:0; padding:26px 2px; cursor:pointer; text-align:left;
  font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.025em; transition:color .18s ease;
}
.acc-q:hover{color:var(--green)}
.acc-ico{position:relative; width:20px; height:20px; flex:0 0 auto}
.acc-ico::before,.acc-ico::after{content:''; position:absolute; left:50%; top:50%; background:var(--green); border-radius:2px; transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .2s ease}
.acc-ico::before{width:15px; height:2.5px}
.acc-ico::after{width:2.5px; height:15px}
.acc-q[aria-expanded="true"] .acc-ico::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.acc-a{overflow:hidden; height:0; transition:height .38s var(--ease)}
.acc-a-inner{padding:0 60px 28px 2px}
.acc-a p{color:var(--slate); font-size:16px; line-height:1.65}
.acc-a strong{color:var(--ink); font-weight:700}

/* ================= FINAL CTA ================= */
.cta-final{background:var(--yellow); padding:92px 0; text-align:center; position:relative; overflow:hidden}
.cta-final::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 120%, rgba(10,92,54,.16), transparent 58%)}
.cta-final .wrap{position:relative}
.cta-final h2{font-size:clamp(30px,4.6vw,50px); font-weight:800; max-width:19ch; margin:0 auto; color:var(--ink)}
.cta-final p{margin-top:18px; color:rgba(11,18,32,.72); font-size:17.5px}
.cta-actions{display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:32px}

/* ================= RESPONSIVE ================= */
@media (max-width:1040px){
  .uses{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .hero{padding-top:112px}
  .hero-inner{grid-template-columns:1fr; gap:36px; padding-bottom:20px}
  .hero-art{max-width:560px}
  .market-stage{grid-template-columns:1fr; gap:36px; justify-items:center}
  .city{width:100%}
  .data-grid{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .vv-parts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .uses{grid-template-columns:1fr}
  .whys{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .sale-facts{grid-template-columns:1fr}
  .growth{height:104px}
  .acc-q{font-size:16.5px; padding:22px 2px}
  .acc-a-inner{padding-right:10px}
  .press a{font-size:13.5px}
}
@media (max-width:540px){
  .phone{width:260px}
  .field-row{grid-template-columns:1fr; gap:0}
  .offer-form,.contact-card{padding:24px}
  .vv-parts{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 100%}
  .cta-actions .btn{flex:1 1 100%}
  table.barchart,table.barchart tbody,table.barchart tr,
  table.barchart th,table.barchart td{display:block; width:auto}
  table.barchart th{padding:0 0 8px}
  table.barchart td{padding:0 0 18px}
  table.barchart tr:last-child td{padding-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .amb .wheel-spin,.amb .beacon,.amb .beacon-b,.amb .body-bob,
  .ph-route,.strip-inner,.badge .dot,.ph-pin{animation:none}
  .amb .speed{animation:none; opacity:.35}
}
@media print{
  .phone,.strip{display:none !important}
}