/* ─────────────────────────────────────────────────────────────
   DYNO PAGE — extends styles.css
   ───────────────────────────────────────────────────────────── */

.nav-links a.is-current{color:var(--dark)}
.nav-links a.is-current::after{content:'';display:block;height:2px;background:var(--blue);margin-top:4px}

/* ── HERO ───────────────────────────────────────────────────── */
.dp-hero{position:relative;min-height:88vh;display:flex;align-items:center;padding:8rem 2.5rem 5rem;overflow:hidden;background:var(--dark)}
.dp-hero-bg{position:absolute;inset:0;background:url('images/Dynojet.jpg') center 62%/cover;opacity:0.5}
.dp-hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,var(--dark) 12%,rgba(13,25,36,0.9) 42%,rgba(13,25,36,0.5) 78%,rgba(17,153,214,0.18) 100%)}
.dp-hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%}
.dp-hero h1{font-weight:900;font-size:clamp(2.4rem,6vw,4.6rem);line-height:0.98;letter-spacing:-1.5px;text-transform:uppercase;color:#fff;margin:0 0 1.5rem}
.dp-hero h1 .accent{color:var(--orange)}
.dp-hero h1 .outline{-webkit-text-stroke:1.5px rgba(255,255,255,0.65);color:transparent}
.dp-lede{color:rgba(255,255,255,0.72);font-size:1.04rem;line-height:1.75;max-width:620px;font-weight:400;margin-bottom:2.25rem}
.dp-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3.25rem}
.dp-hero .hero-stats{max-width:760px}
.dp-hero h1 .outline{-webkit-text-stroke-color:rgba(255,255,255,0.8)}

/* ── SECTION SHELLS ─────────────────────────────────────────── */
.dp-sec{padding:6rem 2.5rem;position:relative;overflow:hidden}
.dp-sec-inner{max-width:1200px;margin:0 auto}
.dp-dark{background:var(--dark2);color:#fff}
.dp-dark h2,.dp-darker h2{color:#fff}
.dp-dark .section-eyebrow,.dp-darker .section-eyebrow{color:var(--blue3)}
.dp-dark .section-desc,.dp-darker .section-desc{color:rgba(255,255,255,0.58)}
.dp-darker{background:var(--dark);color:#fff}
.dp-light{background:var(--offwhite)}
.dp-head{max-width:780px;margin-bottom:3rem}

/* ── SIGNATURE: THE PULL CHART ──────────────────────────────── */
.dp-chart-wrap{display:grid;grid-template-columns:1.55fr 1fr;gap:2.5rem;align-items:stretch}
.dp-screen{background:#070E15;border:1px solid rgba(17,153,214,0.22);border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,0.45)}
.dp-screen-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.02)}
.dp-screen-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,0.8);flex-shrink:0}
.dp-screen-title{font-size:9px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,255,255,0.45)}
.dp-screen-title b{color:var(--blue3);font-weight:700}
.dp-screen-body{padding:0.5rem 0.5rem 0.25rem}
.dp-chart{display:block;width:100%;height:auto}

.dp-grid-line{stroke:rgba(255,255,255,0.07);stroke-width:1}
.dp-axis-line{stroke:rgba(255,255,255,0.22);stroke-width:1.2}
.dp-tick{fill:rgba(255,255,255,0.38);font-size:11px;font-weight:600;letter-spacing:0.5px}
.dp-axis-label{fill:rgba(255,255,255,0.5);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.dp-curve{fill:none;stroke-linecap:round;stroke-linejoin:round}
.dp-base{stroke-width:2;stroke-dasharray:5 6;opacity:0.5}
.dp-final{stroke-width:3.5}
.dp-hp{stroke:var(--blue2)}
.dp-tq{stroke:var(--orange)}
.dp-band{fill:url(#gainFade);opacity:0}
.dp-anno{stroke:rgba(255,255,255,0.3);stroke-width:1;stroke-dasharray:3 4}
.dp-anno-txt{fill:rgba(255,255,255,0.72);font-size:11px;font-weight:700;letter-spacing:0.6px}

/* draw-on */
.dp-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s cubic-bezier(0.33,1,0.68,1)}
.dp-draw.run{stroke-dashoffset:0}
.dp-base.dp-draw{stroke-dasharray:0.012 0.014;stroke-dashoffset:0;opacity:0;transition:opacity 0.9s ease}
.dp-base.dp-draw.run{opacity:0.5}
.dp-band{transition:opacity 1s ease 0.9s}
.dp-band.run{opacity:1}
.dp-anno-g{opacity:0;transition:opacity 0.7s ease 1.5s}
.dp-anno-g.run{opacity:1}

.dp-legend{display:flex;gap:1.5rem;flex-wrap:wrap;padding:0.85rem 1.1rem 1.1rem}
.dp-leg{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.dp-leg i{width:18px;height:3px;border-radius:2px;flex-shrink:0;display:block}
.dp-leg.base i{opacity:0.45;background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px)}

.dp-readouts{display:flex;flex-direction:column;gap:1rem}
.dp-readout{background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.09);border-left:3px solid var(--blue);border-radius:10px;padding:1.35rem 1.4rem;flex:1;display:flex;flex-direction:column;justify-content:center}
.dp-readout:nth-child(2){border-left-color:var(--orange)}
.dp-readout:nth-child(3){border-left-color:var(--blue3)}
.dp-readout h4{font-size:0.82rem;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;color:#fff;margin-bottom:6px}
.dp-readout p{font-size:12.5px;line-height:1.65;color:rgba(255,255,255,0.55);font-weight:400}
.dp-caption{margin-top:1.5rem;font-size:11.5px;line-height:1.7;color:rgba(255,255,255,0.4);font-weight:500;max-width:760px}

/* ── BENEFIT CARDS ──────────────────────────────────────────── */
.dp-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.dp-benefit{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:12px;padding:1.75rem;transition:box-shadow 0.25s ease,transform 0.25s ease}
.dp-benefit:hover{box-shadow:0 16px 44px rgba(13,25,36,0.1);transform:translateY(-2px)}
.dp-benefit-k{font-size:9px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--blue);margin-bottom:0.7rem;display:block}
.dp-benefit h3{font-size:1.02rem;font-weight:800;letter-spacing:-0.1px;text-transform:uppercase;color:var(--dark);line-height:1.2;margin-bottom:0.6rem}
.dp-benefit p{font-size:13.5px;line-height:1.7;color:var(--muted);font-weight:400}

/* ── LOAD CONTROL EXPLAINER ─────────────────────────────────── */
.dp-two{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.dp-body-copy p{color:rgba(255,255,255,0.62);font-size:0.97rem;line-height:1.8;font-weight:400;margin-bottom:1.1rem}
.dp-body-copy strong{color:#fff;font-weight:700}
.dp-modes{display:grid;grid-template-columns:1fr;gap:1.25rem}
.dp-mode{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:12px;padding:1.4rem}
.dp-mode svg{display:block;width:100%;height:auto;margin-bottom:1rem}
.dp-mode h4{font-size:0.8rem;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:#fff;margin-bottom:5px}
.dp-mode p{font-size:12px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:400}
.dp-specs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}

/* ── PROCESS TIMELINE ───────────────────────────────────────── */
.dp-steps{position:relative;max-width:820px;margin:0 auto}
.dp-steps::before{content:'';position:absolute;left:23px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--blue) 0%,rgba(17,153,214,0.12) 100%)}
.dp-step{position:relative;display:flex;gap:1.6rem;padding-bottom:2.4rem}
.dp-step:last-child{padding-bottom:0}
.dp-step-n{position:relative;z-index:2;flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--dark);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.95rem;color:var(--blue3)}
.dp-step h4{font-size:0.98rem;font-weight:800;letter-spacing:0.2px;text-transform:uppercase;color:#fff;margin-bottom:0.45rem;padding-top:0.7rem}
.dp-step p{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,0.55);font-weight:400}

/* ── COMPARISON TABLE ───────────────────────────────────────── */
.dp-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--white)}
.dp-table{width:100%;border-collapse:collapse;min-width:620px}
.dp-table th,.dp-table td{text-align:left;padding:1.05rem 1.35rem;border-bottom:1px solid var(--border)}
.dp-table thead th{font-size:9.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);background:var(--offwhite)}
.dp-table thead th:nth-child(2){color:var(--blue)}
.dp-table tbody th{font-size:13px;font-weight:700;color:var(--dark);width:34%}
.dp-table td{font-size:13px;color:var(--muted);line-height:1.6;font-weight:400}
.dp-table td.yes{color:var(--dark);font-weight:600}
.dp-table tbody tr:last-child th,.dp-table tbody tr:last-child td{border-bottom:none}

/* ── CLOSING CTA ────────────────────────────────────────────── */
.dp-cta{background:linear-gradient(135deg,var(--dark) 0%,var(--teal) 180%);padding:5.5rem 2.5rem;text-align:center}
.dp-cta h2{color:#fff;margin-bottom:1rem}
.dp-cta p{color:rgba(255,255,255,0.62);font-size:0.98rem;line-height:1.7;max-width:540px;margin:0 auto 2.25rem;font-weight:400}
.dp-cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1024px){
  .dp-chart-wrap,.dp-two{grid-template-columns:1fr;gap:2rem}
  .dp-benefits{grid-template-columns:repeat(2,1fr)}
  .dp-hero{min-height:auto;padding-top:7rem}
}
@media(max-width:768px){
  .dp-sec,.dp-hero,.dp-cta{padding-left:1.25rem;padding-right:1.25rem}
  .dp-benefits,.dp-modes,.dp-specs{grid-template-columns:1fr}
  .dp-hero h1{font-size:clamp(2rem,9vw,2.8rem)}
  .dp-step{gap:1.1rem}
  .dp-steps::before{left:19px}
  .dp-step-n{width:40px;height:40px;font-size:0.85rem}
}
@media(prefers-reduced-motion:reduce){
  .dp-draw,.dp-band,.dp-anno-g{transition:none!important;stroke-dashoffset:0!important;opacity:1!important}
  .dp-base.dp-draw{opacity:0.5!important}
  .dp-benefit{transition:none}
}