/* ============ Homepage — Section 1: Kinetic Hero ============ */

.hero-haul{
  position:relative;
  padding: calc(var(--header-h) + 38px) 0 56px;
  overflow:hidden;
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(255,230,109,.32), transparent 70%),
    radial-gradient(900px 700px at 85% 15%, rgba(16,185,129,.20), transparent 70%);
}
.hero-inner{
  display:grid; grid-template-columns: 1.2fr .9fr; gap:40px; align-items:center;
}
.hero-title{
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3rem);
  line-height:1.1; margin:0 0 12px; letter-spacing:.2px;
  background: linear-gradient(135deg, #083344 0%, #0E9F6E 35%, #FFD642 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lede{ color:var(--muted); margin:0 0 14px; max-width: 60ch; }
.hero-highlights{ margin:0 0 18px 1rem; color:#0f2f27; }
.hero-highlights li{ padding:.12rem 0; }

.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* Non-card ribbon */
.hero-ribbon{
  display:grid; gap:14px;
  grid-template-columns: 1fr;
  justify-items:start;
  transform:rotate(-2deg);
}
.ribbon-item{
  display:grid; gap:8px; justify-items:start;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.08));
  transition: transform .25s ease, filter .25s ease;
}
.ribbon-item:hover{ transform: translateY(-4px) rotate(1deg); filter: drop-shadow(0 18px 28px rgba(0,0,0,.12)); }
.ribbon-item figcaption{
  font-size:.9rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.55), rgba(16,185,129,.22));
  padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* Kinetic route motif (CSS-only) */
.kinetic-route{
  pointer-events:none;
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1100px 1100px at 110% 110%, rgba(255,214,66,.25), transparent 60%),
    radial-gradient(900px 900px at -20% 90%, rgba(16,185,129,.18), transparent 60%);
}
/* dashed path */
.kinetic-route::before{
  content:"";
  position:absolute; left:-20%; right:-20%; top:28%;
  height:2px; background:
    repeating-linear-gradient(90deg, rgba(14,159,110,.0) 0 28px, rgba(14,159,110,.95) 28px 48px);
  transform:rotate(8deg);
  animation: pathSlide 10s linear infinite;
  opacity:.9;
}
@keyframes pathSlide { to{ background-position-x:-480px; } }

/* moving van dot */
.kinetic-route .van{
  position:absolute; top:26%; left:-10%;
  width:14px; height:14px; border-radius:4px;
  background: linear-gradient(135deg, var(--g2), var(--y2));
  box-shadow: 0 0 0 4px rgba(16,185,129,.15), 0 0 0 8px rgba(255,230,109,.18);
  animation: vanRun 7.6s cubic-bezier(.4,.0,.2,1) infinite;
}
@keyframes vanRun{
  0%   { transform: translate(0, 0) rotate(0deg); }
  35%  { transform: translate(55vw, -4vh) rotate(10deg); }
  60%  { transform: translate(78vw, 1vh) rotate(-6deg); }
  100% { transform: translate(110vw, -2vh) rotate(0deg); }
}

/* waypoint nodes */
.kinetic-route .node{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:#0E9F6E; box-shadow: 0 0 0 6px rgba(14,159,110,.15);
  opacity:.85; transform:scale(.95);
}
.kinetic-route .n1{ top:32%; left:12%; }
.kinetic-route .n2{ top:22%; left:38%; }
.kinetic-route .n3{ top:34%; left:66%; }
.kinetic-route .n4{ top:28%; left:84%; }

/* ===== Responsive for Hero ===== */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; gap:28px; }
  .hero-ribbon{ transform: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-ribbon .ribbon-item{ justify-items: start; }
}
@media (max-width: 680px){
  .hero-ribbon{ grid-template-columns: 1fr; }
}
/* скрыть на узких экранах */
@media (max-width: 900px){
  .kinetic-route .node{ display:none; }
}

/* полностью убрать везде (если не нужны) */
/* .kinetic-route .node{ display:none !important; } */
/* ============ Section 2: Route Planner Timeline ============ */
.route-planner{ padding:56px 0; position:relative; }
.rp-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.rp-lede{ color:var(--muted); max-width:70ch; }

.route-timeline{
  position:relative; margin:28px 0 0; padding:0; list-style:none;
  border-left:3px dashed rgba(14,159,110,.45);
  counter-reset: rt;
}
.rt-step{ position:relative; padding:0 0 28px 26px; }
.rt-step:last-child{ padding-bottom:0; }
.rt-step .rt-bullet{
  position:absolute; left:-7px; top:2px; width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg, var(--g2), var(--y2));
  box-shadow:0 0 0 6px rgba(16,185,129,.18);
}
.rt-body h3{ margin:0 0 6px; font-size:1.1rem; }
.rt-body p{ margin:0 0 10px; color:#10302a; }
.rt-fig{ display:grid; gap:6px; justify-items:start; }
.rt-fig figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* animated fill along the dashed spine */
.route-timeline::after{
  content:""; position:absolute; left:-3px; top:0; width:3px; height:0;
  background:linear-gradient(180deg, var(--g2), var(--y2));
  border-radius:3px;
  box-shadow:0 0 10px rgba(16,185,129,.3);
  transition: height 1.6s cubic-bezier(.25,.9,.23,.99);
}
.route-timeline.is-on::after{ height:100%; }

/* ============ Section 3: Load Engineering ============ */
.load-engineering{ padding:64px 0; position:relative; }
.le-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.le-lede{ color:var(--muted); max-width:72ch; }
.le-grid{
  margin-top:20px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
  background-image:
    linear-gradient(90deg, rgba(14,159,110,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(14,159,110,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius:18px; padding:18px;
}
.le-card{
  background:rgba(255,255,255,.7);
  border:1px solid var(--line); border-radius:16px; padding:14px;
  box-shadow:var(--shadow);
}
.le-card h3{ margin:0 0 6px; font-size:1.05rem; }
.le-card p{ margin:0 0 10px; color:#0e2f27; }

.tilt-card{
  display:grid; gap:6px; justify-items:start;
  transform: perspective(800px) rotateX(0) rotateY(0);
  transition: transform .25s ease, filter .25s ease;
}
.tilt-card:hover{ transform: perspective(800px) rotateX(3deg) rotateY(-3deg); filter:saturate(1.05); }

.le-hook{
  position:absolute; right:6%; top:-12px; width:120px; height:160px; pointer-events:none;
}
.hook-line{
  position:absolute; left:50%; width:2px; height:130px; background:rgba(14,159,110,.6);
  transform-origin: top center;
  animation: hookSwing 3.4s ease-in-out infinite;
}
.hook-head{
  position:absolute; left:50%; top:130px; width:18px; height:18px; border-radius:4px;
  background:linear-gradient(135deg, var(--g2), var(--y2));
  transform:translateX(-50%);
  animation: hookSwing 3.4s ease-in-out infinite;
}
@keyframes hookSwing{
  0%,100%{ transform:translateX(-50%) rotate(-6deg); }
  50%{ transform:translateX(-50%) rotate(6deg); }
}

/* ============ Section 4: Access Playbook (Tabs) ============ */
.access-playbook{ padding:64px 0; }
.ap-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.ap-lede{ color:var(--muted); max-width:70ch; }

.ap-tabs{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
  background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:14px; padding:8px;
}
.ap-tab{
  appearance:none; border:0; cursor:pointer; padding:.55rem .9rem; font-weight:700;
  border-radius:12px;
  background:transparent; color:#0b3b2f;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ap-tab.is-active, .ap-tab:focus-visible{
  background:linear-gradient(135deg, var(--g2), var(--y1));
  box-shadow:var(--shadow);
}
.ap-panels{ margin-top:18px; }
.ap-panel[hidden]{ display:none; }

.ap-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:start; }
.ap-copy h3{ margin:0 0 6px; font-size:1.1rem; }
.ap-copy p{ margin:0 0 10px; color:#0e2f27; }
.ap-fig figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* ===== Responsive for new sections ===== */
@media (max-width: 1024px){
  .le-grid{ grid-template-columns: 1fr; }
  .ap-grid{ grid-template-columns: 1fr; }
  .le-hook{ display:none; }
}
/* ============ Section 5: Fleet Mix Rail ============ */
.fleet-rail-block{ padding:64px 0; }
.fr-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.fr-lede{ color:var(--muted); max-width:70ch; }

.fleet-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns: minmax(280px, 1fr);
  gap:18px; margin-top:18px; align-items:stretch;
  animation: railMove 22s linear infinite;
  will-change: transform;
}
.fleet-rail:hover{ animation-play-state: paused; }
@keyframes railMove{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
/* allow wrap on small screens instead of animation */
@media (max-width: 900px){
  .fleet-rail{ animation:none; grid-auto-flow: row; }
}

.fleet-item{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:18px; padding:14px;
  box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fleet-item:hover{ transform: translateY(-4px); box-shadow:var(--shadow-lg); }
.fleet-item figure{ display:grid; gap:8px; justify-items:start; }
.fleet-item figcaption{ font-weight:700; color:#0b3b2f; display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  font-weight:700; font-size:.8rem;
  background:linear-gradient(135deg, rgba(16,185,129,.15), rgba(255,214,66,.25));
  border:1px solid rgba(14,159,110,.25);
  border-radius:999px; padding:.2rem .5rem;
}
.fleet-copy{ margin:.2rem 0 0; color:#0f2f27; }

/* ============ Section 6: Packing Materials Lab ============ */
.pack-lab{ padding:64px 0; }
.pl-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.pl-lede{ color:var(--muted); max-width:72ch; }

.pl-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:18px; }
@media (max-width: 1024px){ .pl-grid{ grid-template-columns:1fr; } }

.pl-card{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line); border-radius:18px; padding:14px;
  box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pl-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-lg); }
.pl-card h3{ margin:0 0 6px; font-size:1.05rem; }
.pl-card p{ margin:0 0 12px; color:#0e2f27; }

.pl-meters{ display:grid; gap:8px; margin:0 0 10px; }
.meter{ display:grid; grid-template-columns: 80px 1fr; gap:8px; align-items:center; }
.meter .label{ font-size:.85rem; color:#0b3b2f; }
.meter .bar{
  display:block; height:8px; border-radius:999px;
  background:linear-gradient(90deg, rgba(14,159,110,.2), rgba(255,214,66,.25));
  position:relative; overflow:hidden;
}
.meter .bar::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, var(--g2), var(--y2));
  border-radius:999px; box-shadow:0 0 10px rgba(16,185,129,.25);
  transition: width 1.2s cubic-bezier(.25,.9,.23,1);
}

/* ============ Section 7: Energy-Safe Routing ============ */
.energy-routing{ padding:64px 0; position:relative; overflow:hidden; }
.er-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.er-lede{ color:var(--muted); max-width:72ch; }
.er-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:18px; }
@media (max-width: 1024px){ .er-grid{ grid-template-columns:1fr; } }

.er-card{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line); border-radius:18px; padding:14px;
  box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.er-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-lg); }
.er-card h3{ margin:0 0 6px; font-size:1.05rem; }
.er-card p{ margin:0 0 10px; color:#0e2f27; }

.er-stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
  margin-top:22px; background:rgba(255,255,255,.6);
  border:1px solid var(--line); border-radius:18px; padding:14px;
}
@media (max-width: 900px){ .er-stats{ grid-template-columns:1fr; } }
.stat{ text-align:center; }
.stat-num{
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.2rem);
  margin:.2rem 0;
  background: linear-gradient(135deg, #0E9F6E, #FFD642);
  background-clip: text;           /* ← стандарт */
  -webkit-background-clip: text;   /* ← вендор для Safari */
  color: transparent;
}

.stat-label{ color:#0f2f27; margin:0; }

/* decorative looped path */
.er-loop{
  position:absolute; right:-12%; bottom:-36%; width:600px; height:600px; border-radius:50%;
  border: 2px dashed rgba(14,159,110,.45);
  filter: blur(.2px);
  animation: loopSpin 24s linear infinite;
}
@keyframes loopSpin { to{ transform: rotate(360deg); } }

/* when visible: fill meters in pack-lab */
.pl-card.is-on .meter .bar::after{ width: var(--w, 0%); }
/* --- OVERRIDE: Fleet rail static layout --- */
.fleet-rail{
  /* убираем авто-анимацию и «конвейер» */
  animation: none !important;
  grid-auto-flow: initial;
  grid-auto-columns: initial;

  /* делаем обычную сетку */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* адаптив: 2 колонки на планшете, 1 — на мобилке */
@media (max-width: 1100px){
  .fleet-rail{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .fleet-rail{ grid-template-columns: 1fr; }
}

/* бонус: лёгкое выравнивание содержимого внутри карточек */
.fleet-item figure{ align-items: start; }
/* ============ Section 8: Crew Choreography Grid ============ */
.crew-grid{ padding:64px 0; }
.cg-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.cg-lede{ color:var(--muted); max-width:72ch; }
.cg-grid{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
@media (max-width: 1024px){ .cg-grid{ grid-template-columns: 1fr; } }

.lane{
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:18px; padding:14px; box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.lane:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.lane h3{ margin:0 0 6px; font-size:1.05rem; }
.lane p{ margin:0 10px 12px 0; color:#0e2f27; }

.lane-rail{
  position:relative; height:14px; margin:0 0 12px; border-radius:999px;
  background: repeating-linear-gradient(90deg, rgba(14,159,110,.18) 0 28px, rgba(14,159,110,.45) 28px 44px, rgba(14,159,110,.18) 44px 60px);
  overflow:hidden;
}
.lane-rail .runner{
  position:absolute; left:-10%; top:3px; width:18px; height:8px; border-radius:999px;
  background:linear-gradient(90deg, var(--g2), var(--y2));
  animation: runnerMove 4.6s linear infinite;
  box-shadow:0 0 10px rgba(16,185,129,.25);
}
.lane-rail .node{
  position:absolute; top:3px; width:8px; height:8px; border-radius:50%; background:#0E9F6E;
  box-shadow:0 0 0 6px rgba(14,159,110,.12);
}
.lane-rail .node:nth-of-type(2){ left:36%; animation: nodePulse 3s ease-in-out infinite; }
.lane-rail .node:nth-of-type(3){ left:64%; animation: nodePulse 3.4s ease-in-out infinite; }
.lane-rail .node:nth-of-type(4){ left:88%; animation: nodePulse 3.2s ease-in-out infinite; }
@keyframes runnerMove{ to{ transform: translateX(130%); } }
@keyframes nodePulse{
  0%,100%{ transform:scale(.9); box-shadow:0 0 0 6px rgba(14,159,110,.12); }
  50%{ transform:scale(1.2); box-shadow:0 0 0 10px rgba(14,159,110,.2); }
}

/* ============ Section 9: Stairway Physics ============ */
.stair-physics{ padding:64px 0; position:relative; overflow:hidden; }
.sp-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.sp-lede{ color:var(--muted); max-width:72ch; }
.sp-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:18px; }
@media (max-width: 1024px){ .sp-grid{ grid-template-columns: 1fr; } }

.sp-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.sp-copy p{ margin:0 0 12px; color:#0e2f27; }

.sp-visual{ position:relative; background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:var(--shadow); }
.sp-visual .layer{
  position:absolute; inset:0; border-radius:18px; pointer-events:none;
  mask-image: linear-gradient(180deg, #000, transparent 90%);
}
.sp-visual .layer.slow{ background: repeating-linear-gradient(135deg, rgba(14,159,110,.08) 0 18px, rgba(14,159,110,.16) 18px 36px); }
.sp-visual .layer.mid { background: radial-gradient(400px 220px at 20% 20%, rgba(255,214,66,.22), transparent 70%); }
.sp-visual .layer.fast{ background: radial-gradient(260px 260px at 80% 30%, rgba(16,185,129,.22), transparent 70%); }

/* ============ Section 10: Client Prep Guide (Accordion) ============ */
.client-prep{ padding:64px 0; }
.cp-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.cp-lede{ color:var(--muted); max-width:72ch; }

.cp-layout{ display:grid; grid-template-columns: .9fr 1.1fr; gap:18px; margin-top:18px; }
@media (max-width: 1024px){ .cp-layout{ grid-template-columns: 1fr; } }

.cp-side{ display:grid; gap:12px; align-content:start; }
.cp-side figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

.cp-accordion{ background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:18px; padding:8px; box-shadow:var(--shadow); }
.cp-item + .cp-item{ border-top:1px dashed rgba(14,159,110,.25); }
.cp-btn{
  appearance:none; border:0; width:100%; text-align:left; padding:.9rem 1rem; background:transparent; font-weight:700; color:#0b3b2f; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cp-btn::after{
  content:"▾"; transition: transform .25s ease;
}
.cp-btn[aria-expanded="true"]::after{ transform: rotate(180deg); }
.cp-panel{ padding:0 1rem .9rem; color:#0e2f27; }
/* ============ Section 11: Quality Assurance Log ============ */
.qa-log{ padding:64px 0; }
.qa-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.qa-lede{ color:var(--muted); max-width:72ch; }

.qa-grid{
  margin-top:18px;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;
}
@media (max-width: 1024px){ .qa-grid{ grid-template-columns:1fr; } }

.qa-list{
  margin:0; padding:0; list-style:none;
  border-left:3px dashed rgba(14,159,110,.45);
}
.qa-item{
  position:relative; padding:0 0 18px 18px;
}
.qa-item:last-child{ padding-bottom:0; }

.qa-item h3{ margin:0 0 6px; font-size:1.05rem; }
.qa-item p{ margin:0; color:#0e2f27; }

/* stamp bullets on reveal */
.reveal.is-visible .qa-item::before{
  content:"✓"; position:absolute; left:-10px; top:2px;
  width:16px; height:16px; display:grid; place-items:center;
  font-weight:700; font-size:.8rem; color:#063a2f;
  background:linear-gradient(135deg, var(--g2), var(--y2));
  border-radius:50%; box-shadow:0 0 0 6px rgba(16,185,129,.18);
  transform: scale(0); animation: qaStamp .42s cubic-bezier(.2,.7,.2,1) forwards;
}
.reveal.is-visible .qa-item:nth-child(1)::before{ animation-delay:.05s; }
.reveal.is-visible .qa-item:nth-child(2)::before{ animation-delay:.15s; }
.reveal.is-visible .qa-item:nth-child(3)::before{ animation-delay:.25s; }
.reveal.is-visible .qa-item:nth-child(4)::before{ animation-delay:.35s; }
.reveal.is-visible .qa-item:nth-child(5)::before{ animation-delay:.45s; }
.reveal.is-visible .qa-item:nth-child(6)::before{ animation-delay:.55s; }

@keyframes qaStamp{
  0%{ transform: scale(0); opacity:.6; }
  80%{ transform: scale(1.2); }
  100%{ transform: scale(1); opacity:1; }
}

.qa-side{ display:grid; gap:12px; align-content:start; }
.qa-side figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* ============ Section 12: Neighbourhood Courtesy Code ============ */
.courtesy-code{ padding:64px 0; }
.cc-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.cc-lede{ color:var(--muted); max-width:72ch; }

.code-grid{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(2, 1fr); gap:18px;
}
@media (max-width: 900px){ .code-grid{ grid-template-columns:1fr; } }

.code-card{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:18px; padding:16px;
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.code-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-lg); }
.code-card::after{
  content:""; position:absolute; inset:-40% -10%; transform: rotate(8deg);
  background: radial-gradient(220px 120px at 30% 50%, rgba(255,214,66,.28), transparent 70%),
              radial-gradient(240px 160px at 80% 40%, rgba(16,185,129,.20), transparent 70%);
  opacity:0; transition: opacity .3s ease;
}
.code-card:hover::after{ opacity:1; }

.cc-figs{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.cc-figs figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* ============ Section 13: Night Move Protocol ============ */
.night-move{ padding:64px 0; position:relative; overflow:hidden; }
.nm-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.nm-lede{ color:var(--muted); max-width:72ch; }

.nm-grid{
  margin-top:18px;
  display:grid; grid-template-columns: 1fr 1fr; gap:18px;
}
@media (max-width: 1024px){ .nm-grid{ grid-template-columns:1fr; } }

.nm-card{
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:18px; padding:14px; box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.nm-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-lg); }
.nm-card h3{ margin:0 0 6px; font-size:1.05rem; }
.nm-card p{ margin:0 0 10px; color:#0e2f27; }

/* decorative starfield */
.nm-sky{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(16,185,129,.10), transparent 60%),
    radial-gradient(900px 900px at 10% 110%, rgba(255,214,66,.12), transparent 60%);
}
.nm-sky .star{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background: #fff; opacity:.8;
  animation: twinkle 2.4s ease-in-out infinite;
}
.nm-sky .s1{ top:12%; left:18%; animation-delay:.2s; }
.nm-sky .s2{ top:22%; left:64%; animation-delay:.6s; }
.nm-sky .s3{ top:36%; left:38%; animation-delay:1s; }
.nm-sky .s4{ top:44%; left:86%; animation-delay:1.4s; }
.nm-sky .s5{ top:18%; left:82%; animation-delay:.9s; }
@keyframes twinkle{
  0%,100%{ transform:scale(.8); opacity:.5; }
  50%{ transform:scale(1); opacity:1; }
}
.nm-sky .moon{
  position:absolute; top:10%; left:-8%;
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 40%, #ffd 40% 70%, transparent 70%);
  box-shadow:0 0 12px rgba(255,255,200,.6);
  animation: moonGlide 18s linear infinite;
}
@keyframes moonGlide{
  0%{ transform: translate(0, 0); }
  50%{ transform: translate(70vw, 8vh); }
  100%{ transform: translate(110vw, 0); }
}
/* ============ Section 14: Specialty Move Scenarios ============ */
.specialty-moves{ padding:64px 0; }
.sm-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.sm-lede{ color:var(--muted); max-width:72ch; }
.sm-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:18px; }
@media (max-width: 1024px){ .sm-grid{ grid-template-columns:1fr; } }

.sm-card{
  position:relative; background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:18px; padding:14px; box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.sm-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.sm-card h3{ margin:0 0 6px; font-size:1.05rem; }
.sm-card p{ margin:0 0 10px; color:#0e2f27; }
.sm-steps{ margin:0 0 12px 1rem; }
.sm-steps li{ padding:.15rem 0; }

/* dashed path overlay per card */
.sm-path{
  position:absolute; inset:auto 6% 6% 6%; height:2px; background:
    repeating-linear-gradient(90deg, rgba(14,159,110,.0) 0 28px, rgba(14,159,110,.8) 28px 46px);
  transform: translateY(-4px) rotate(6deg); opacity:.7;
  transition: filter .25s ease, opacity .25s ease;
}
.sm-card:hover .sm-path{ filter:saturate(1.1); opacity:.95; }

/* ============ Section 15: Compliance & Insurance ============ */
.compliance-docs{ padding:64px 0; }
.cd-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.cd-lede{ color:var(--muted); max-width:72ch; }

.cd-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; margin-top:18px; }
@media (max-width: 1024px){ .cd-grid{ grid-template-columns:1fr; } }

.cd-copy{
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:18px; padding:16px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.cd-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.cd-copy p{ margin:0 0 12px; color:#0e2f27; }

/* stamp animation */
.doc-stamp{
  position:absolute; right:12px; bottom:12px; padding:.35rem .6rem; border:2px solid #0E9F6E;
  color:#0E9F6E; font-weight:800; border-radius:6px; letter-spacing:2px;
  transform: rotate(-8deg) scale(.6); opacity:0;
  animation: stampIn .9s cubic-bezier(.2,.9,.2,1) .4s forwards;
}
.reveal.is-visible .doc-stamp{ animation-play-state: running; }
@keyframes stampIn{
  0%{ transform: translateY(-20px) rotate(-8deg) scale(.6); opacity:0; }
  70%{ transform: translateY(2px) rotate(-6deg) scale(1.05); opacity:.9; }
  100%{ transform: translateY(0) rotate(-6deg) scale(1); opacity:1; }
}

/* ============ Section 16: Service Footprint ============ */
.footprint{ padding:64px 0; position:relative; overflow:hidden; }
.fp-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.fp-lede{ color:var(--muted); max-width:72ch; }
.fp-grid{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; align-items:start; margin-top:18px;
}
@media (max-width: 1024px){ .fp-grid{ grid-template-columns:1fr; } }

.fp-map{
  position:relative; height:240px; border-radius:18px; border:1px solid var(--line);
  background:
    radial-gradient(600px 400px at 85% -10%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(500px 300px at 10% 110%, rgba(255,214,66,.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(14,159,110,.08) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(90deg, rgba(14,159,110,.08) 0 22px, transparent 22px 44px);
  overflow:hidden; box-shadow:var(--shadow);
}

/* bouncing pins (play when section is visible) */
.pin{
  --c: #0E9F6E;
  position:absolute; width:8px; height:8px; border-radius:50%; background:var(--c);
  box-shadow:0 0 0 6px rgba(14,159,110,.18);
  transform-origin: center bottom; transform: translateY(6px) scale(.9);
  animation: pinPop 1.2s ease-out paused, pinPulse 2.4s ease-in-out infinite paused;
}
@keyframes pinPop{
  0%{ transform: translateY(16px) scale(.2); opacity:0; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes pinPulse{
  0%,100%{ box-shadow:0 0 0 6px rgba(14,159,110,.18); }
  50%{ box-shadow:0 0 0 10px rgba(14,159,110,.26); }
}
/* positions (approximate India outline) */
.p1{ top:36%; left:16%; } /* Mumbai */
.p2{ top:44%; left:22%; } /* Pune */
.p3{ top:40%; left:42%; } /* Nagpur */
.p4{ top:55%; left:46%; } /* Hyderabad */
.p5{ top:70%; left:38%; } /* Bengaluru */

.reveal.is-visible .pin{ animation-play-state: running; }
.reveal.is-visible .pin:nth-child(1){ animation-delay:.2s, .2s; }
.reveal.is-visible .pin:nth-child(2){ animation-delay:.35s, .35s; }
.reveal.is-visible .pin:nth-child(3){ animation-delay:.5s, .5s; }
.reveal.is-visible .pin:nth-child(4){ animation-delay:.65s, .65s; }
.reveal.is-visible .pin:nth-child(5){ animation-delay:.8s, .8s; }

.fp-list p{ margin:0 0 10px; color:#0e2f27; }
.fp-fig figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}
/* ===== Contact Form ===== */
.contact-form{ position:relative; padding:64px 0; }
.cf-inner{
  position:relative;
  display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow);
}
@media (max-width: 980px){ .cf-inner{ grid-template-columns:1fr; } }

.contact-header h2{ margin:0 0 8px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.contact-header p{ color:var(--muted); margin:0 0 10px; }
.cf-points{ margin:0; padding-left:1rem; color:#0e2f27; }
.cf-points li{ padding:.15rem 0; }

/* форма */
.form-wrapper{
  display:grid; gap:12px;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="email"],
.form-wrapper textarea{
  width:100%;
  border:2px solid rgba(14,159,110,.25);
  background:#fff;
  border-radius:14px;
  padding:.85rem 1rem;
  font:inherit; color:#0b3b2f;
  transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  outline: none;
}
.form-wrapper textarea{ min-height:130px; resize:vertical; }

.form-wrapper input:focus,
.form-wrapper textarea:focus{
  border-color: var(--g2);
  box-shadow: 0 0 0 6px rgba(16,185,129,.15);
  transform: translateY(-1px);
}

/* чекбокс */
.form-checkbox{
  display:flex; align-items:center; gap:10px; user-select:none;
}
.form-checkbox input{
  appearance:none; width:18px; height:18px; border:2px solid rgba(14,159,110,.6);
  border-radius:5px; display:inline-block; position:relative; cursor:pointer; background:#fff;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.form-checkbox input:checked{
  background:linear-gradient(135deg, var(--g2), var(--y2));
  border-color:transparent;
}
.form-checkbox input:checked::after{
  content:""; position:absolute; inset:3px; background:#063a2f; border-radius:3px;
}
.form-checkbox span{ color:#0e2f27; }
.form-checkbox a{ text-decoration:underline; }

.cta-button{
  appearance:none; border:0; cursor:pointer; justify-self:start;
  background:linear-gradient(135deg, var(--g2), var(--y2));
  color:#04241d; font-weight:800; letter-spacing:.2px;
  padding:.9rem 1.1rem; border-radius:14px; box-shadow:var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cta-button:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); filter:saturate(1.05); }

/* живой хинт */
.cf-hint{ margin:4px 0 0; color:#0e2f27; min-height:1.2em; }

/* декоративная «светящаяся» подложка */
.cf-glow{
  position:absolute; inset:-2px; border-radius:20px; z-index:-1;
  background:
    radial-gradient(500px 220px at 20% 10%, rgba(255,230,109,.35), transparent 70%),
    radial-gradient(480px 280px at 80% 90%, rgba(16,185,129,.28), transparent 70%);
  filter: blur(20px);
  opacity:.65; pointer-events:none;
  animation: cfGlow 6s ease-in-out infinite alternate;
}
@keyframes cfGlow{
  0%{ transform:translateY(0); opacity:.55; }
  100%{ transform:translateY(6px); opacity:.8; }
}

/* состояния ошибок (добавляет JS, но и нативная валидация работает) */
.is-invalid{ border-color:#b91c1c !important; box-shadow:0 0 0 6px rgba(185,28,28,.15) !important; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ============ Section 7: Lift Slotting & Buffer Math ============ */
.svc-slotting{ padding:64px 0; position:relative; overflow:hidden; }
.slot-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.slot-lede{ color:var(--muted); max-width:72ch; }

.slot-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; }
@media (max-width: 1024px){ .slot-grid{ grid-template-columns:1fr; } }

.slot-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.slot-copy p{ margin:0 0 12px; color:#0e2f27; }

.slot-rail{ display:grid; gap:12px; align-content:start; }

/* moving slot belt */
.slot-belt{
  position:relative; height:42px; border-radius:999px; overflow:hidden;
  background: repeating-linear-gradient(90deg, rgba(14,159,110,.14) 0 60px, rgba(14,159,110,.24) 60px 120px);
  border:1px solid rgba(14,159,110,.25);
}
.slot-belt::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,214,66,.0) 0%, rgba(255,214,66,.35) 50%, rgba(255,214,66,.0) 100%);
  animation: slotSweep 4.5s linear infinite;
}
@keyframes slotSweep{ to{ transform: translateX(100%); } }
.slot{ position:relative; z-index:1; display:inline-block; margin:10px 14px; font-weight:700; color:#0b3b2f; }

/* ============ Section 8: Local Permits & Society NOCs ============ */
.svc-permits{ padding:64px 0; position:relative; overflow:hidden; }
.perm-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.perm-lede{ color:var(--muted); max-width:72ch; }

.perm-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; }
@media (max-width: 1024px){ .perm-grid{ grid-template-columns:1fr; } }

.perm-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.perm-copy p{ margin:0 0 12px; color:#0e2f27; }

.perm-visual{ display:grid; gap:12px; align-content:start; }

/* animated paper stack + stamp */
.perm-stack{
  position:relative; height:120px; border-radius:14px; overflow:visible;
}
.perm-stack .sheet{
  position:absolute; inset:10px 14px; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow);
  transform-origin: center center;
}
.perm-stack .sheet.a{ transform: rotate(-3deg) translateY(0); }
.perm-stack .sheet.b{ transform: rotate(3deg) translateY(6px); }
.perm-stack .sheet.c{ transform: rotate(-1deg) translateY(12px); }
.perm-stack .stamp{
  position:absolute; right:22px; bottom:10px; padding:.25rem .5rem; border:2px solid #0E9F6E;
  color:#0E9F6E; font-weight:800; border-radius:6px; letter-spacing:2px;
  transform: rotate(-6deg) scale(.6); opacity:0;
  animation: stampIn 1s cubic-bezier(.2,.9,.2,1) .4s forwards;
}
.reveal.is-visible .perm-stack .stamp{ animation-play-state: running; }

/* ============ Section 9: Rural Feeders & City Handoffs ============ */
.svc-feeders{ padding:64px 0; position:relative; overflow:hidden; }
.feed-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.feed-lede{ color:var(--muted); max-width:72ch; }

.feed-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; }
@media (max-width: 1024px){ .feed-grid{ grid-template-columns:1fr; } }

.feed-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.feed-copy p{ margin:0 0 12px; color:#0e2f27; }

.feed-visual{ display:grid; gap:12px; align-content:start; }

/* mini-truck path (contained; no horizontal overflow) */
.handoff-path{
  position:relative; height:44px; border-radius:999px; overflow:hidden;
  background: repeating-linear-gradient(90deg, rgba(14,159,110,.18) 0 28px, rgba(14,159,110,.4) 28px 46px, rgba(14,159,110,.18) 46px 64px);
  border:1px solid rgba(14,159,110,.25);
}
.handoff-path .mini{
  position:absolute; top:8px; left:-6%;
  width:24px; height:10px; border-radius:6px;
  background: linear-gradient(135deg, var(--g2), var(--y2));
  box-shadow: 0 0 0 4px rgba(16,185,129,.12);
  animation: miniRun 6s linear infinite;
}
.handoff-path .node{
  position:absolute; top:12px; width:8px; height:8px; border-radius:50%;
  background:#0E9F6E; box-shadow:0 0 0 6px rgba(14,159,110,.12);
}
.handoff-path .n1{ left:22%; }
.handoff-path .n2{ left:54%; }
.handoff-path .n3{ left:82%; }
@keyframes miniRun{ to{ transform: translateX(120%); } }