/* ── HERO ─────────────────────────────────────────────────────── */
.spd-hero{background:var(--dark-bg);padding:90px 0 80px;position:relative;overflow:hidden}
.spd-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(30,177,180,.07),transparent 60%);pointer-events:none}

.spd-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3);border-radius:50px;padding:6px 18px;font-size:.78rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:24px}
.spd-hero-badge i{font-size:.75rem}

.spd-hero h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--txt-light);line-height:1.2;margin-bottom:16px;text-align:left}

/* ── FORM CARD ───────────────────────────────────────────────── */
.spd-form-card{background:#fff;border-radius:20px;padding:28px 28px 20px;margin-top:28px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.spd-group{margin-bottom:16px}
.spd-group label{display:block;font-size:.82rem;font-weight:600;color:var(--txt-dark);margin-bottom:6px}
.spd-group input{width:100%;padding:11px 16px;border:1.5px solid var(--border);border-radius:10px;font-size:.9rem;color:var(--txt-dark);background:#fff;transition:border-color .2s;font-family:inherit;outline:none}
.spd-group input:focus{border-color:var(--accent)}
.btn-spd-submit{width:100%;background:var(--accent);color:var(--dark-bg);border:none;border-radius:10px;padding:13px;font-size:.95rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .3s;margin-top:4px;margin-bottom:12px}
.btn-spd-submit:hover{background:var(--accent-dark);transform:translateY(-2px)}
.spd-form-note{font-size:.73rem;color:var(--txt-muted);text-align:center;line-height:1.5;margin:0}

/* ── TTFB CARD ───────────────────────────────────────────────── */
.spd-ttfb-card{background:#0f1525;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.spd-ttfb-header h5{font-size:1.05rem;font-weight:700;color:var(--txt-light);margin-bottom:4px}
.spd-ttfb-header p{font-size:.8rem;color:rgba(255,255,255,.4);margin-bottom:24px}

.spd-bars{display:flex;flex-direction:column;gap:14px}
.spd-bar-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.spd-bar-name{font-size:.82rem;color:rgba(255,255,255,.6);font-weight:500}
.spd-bar-val{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.8);font-family:'Space Grotesk',sans-serif}
.spd-bar-row.spd-bar-jdm .spd-bar-name{color:var(--accent);font-weight:700}
.spd-bar-row.spd-bar-jdm .spd-bar-val{color:var(--accent)}
.spd-bar-track{height:8px;background:rgba(255,255,255,.07);border-radius:50px;overflow:hidden}
.spd-bar{height:100%;border-radius:50px;transition:width .8s ease}
.spd-bar--jdm{background:var(--accent)}
.spd-bar--1{background:#f97316}
.spd-bar--2{background:#3b82f6}
.spd-bar--3{background:#a855f7}

.spd-ttfb-note{font-size:.72rem;color:rgba(255,255,255,.3);line-height:1.6;margin:20px 0 16px}
.spd-cwv-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(30,177,180,.1);border:1px solid rgba(30,177,180,.25);color:var(--accent);border-radius:8px;padding:8px 16px;font-size:.78rem;font-weight:600}
.spd-cwv-badge i{font-size:.85rem}

/* ── HOW SECTION ─────────────────────────────────────────────── */
.spd-how-sec{padding:80px 0;background:#f8fafc}
.spd-step{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px 28px;height:100%;text-align:center;transition:all .3s}
.spd-step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.spd-step-icon{width:56px;height:56px;border-radius:16px;background:rgba(30,177,180,.1);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 20px}
.spd-step h5{font-size:1rem;font-weight:700;color:var(--txt-dark);margin-bottom:10px}
.spd-step p{font-size:.88rem;color:var(--txt-body);line-height:1.7;margin:0}

/* ── WHY SECTION ─────────────────────────────────────────────── */
.spd-why-sec{padding:80px 0;background:var(--dark-bg);position:relative;overflow:hidden}
.spd-why-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(30,177,180,.06),transparent 60%);pointer-events:none}
.spd-why-list{display:flex;flex-direction:column;gap:24px;margin-top:36px}
.spd-why-point{display:flex;gap:16px;align-items:flex-start}
.spd-why-num{width:36px;height:36px;border-radius:50%;background:rgba(30,177,180,.15);border:1px solid rgba(30,177,180,.3);color:var(--accent);font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Space Grotesk',sans-serif}
.spd-why-point strong{display:block;font-size:.95rem;font-weight:700;color:var(--txt-light);margin-bottom:4px}
.spd-why-point p{font-size:.85rem;color:var(--txt-muted);line-height:1.7;margin:0}

/* ── FAQ CARD (dark) ─────────────────────────────────────────── */
.spd-faq-card{background:#0f1525;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.spd-faq-card h5{font-size:1rem;font-weight:700;color:var(--txt-light);margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.07)}
.spd-faq-item{border-bottom:1px solid rgba(255,255,255,.06)}
.spd-faq-item:last-child{border-bottom:none}
.spd-faq-item summary{padding:14px 0;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.7);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:color .2s}
.spd-faq-item summary::-webkit-details-marker{display:none}
.spd-faq-item summary::after{content:'+';font-size:1.2rem;font-weight:300;color:rgba(255,255,255,.3);flex-shrink:0;transition:transform .25s}
.spd-faq-item[open] summary{color:var(--accent)}
.spd-faq-item[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.spd-faq-body{padding:0 0 16px}
.spd-faq-body p{font-size:.83rem;color:rgba(255,255,255,.45);line-height:1.7;margin:0}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:991px){
  .spd-hero{padding:70px 0 60px}
  .spd-hero h1{font-size:2rem}
}
@media(max-width:768px){
  .spd-hero h1{font-size:1.8rem}
  .spd-form-card{padding:20px}
  .spd-ttfb-card{padding:20px}
}