/* ── HERO ───────────────────────────────────────────────── */
    .yb-hero {
      background: linear-gradient(135deg, #030712 0%, #0a1628 45%, #0d2b3e 100%);
      padding: 88px 0 72px;
      position: relative;
      overflow: hidden;
    }
    .yb-hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 55% 55% at 15% 40%, rgba(37,99,235,.13) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 85% 65%, rgba(6,182,212,.1) 0%, transparent 65%);
    }
    .yb-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(6,182,212,.12);
      border: 1px solid rgba(34,211,238,.22);
      border-radius: 20px; padding: 6px 16px;
      font-size: .72rem; font-weight: 700;
      color: #67e8f9; letter-spacing: .08em;
      text-transform: uppercase; margin-bottom: 18px;
    }
    .yb-hero h1 {
      font-size: clamp(2rem, 4.5vw, 3rem);
      font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 18px;
    }
    .yb-hero h1 span {
      background: linear-gradient(90deg, #38bdf8, #67e8f9);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .yb-hero .lead { font-size: 1rem; color: rgba(255,255,255,.62); line-height: 1.75; max-width: 600px; }
    .btn-yb-primary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 26px;
      background: linear-gradient(135deg, #0891b2, #0e7490);
      color: #fff; border: none; border-radius: 12px;
      font-size: .9rem; font-weight: 700; text-decoration: none;
      transition: all .2s; font-family: inherit;
    }
    .btn-yb-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(8,145,178,.45); color: #fff; }
    .btn-yb-ghost {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 26px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.18);
      color: rgba(255,255,255,.87); border-radius: 12px;
      font-size: .9rem; font-weight: 600; text-decoration: none;
      transition: all .2s; font-family: inherit;
    }
    .btn-yb-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

    /* ── HERO WIDGET ─────────────────────────────────────────── */
    .yb-widget {
      background: linear-gradient(160deg, #0f2540, #081929);
      border: 1px solid rgba(56,189,248,.18);
      border-radius: 20px;
      padding: 0;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(0,0,0,.5);
    }
    .yb-widget-top {
      background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.07);
      padding: 12px 20px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .yb-widget-dots { display: flex; gap: 6px; }
    .yb-widget-dot { width: 10px; height: 10px; border-radius: 50%; }
    .yb-widget-dot--r { background: #ef4444; }
    .yb-widget-dot--y { background: #f59e0b; }
    .yb-widget-dot--g { background: #22c55e; }
    .yb-widget-title { font-size: .72rem; color: rgba(255,255,255,.4); font-family: monospace; letter-spacing:.04em; }
    .yb-widget-badge {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25);
      color: #86efac; font-size: .65rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
    }
    .yb-widget-badge i { font-size: .55rem; animation: blink 1.8s infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .yb-widget-body { padding: 20px; }
    .yb-progress-block { margin-bottom: 20px; }
    .yb-progress-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
    .yb-progress-label { font-size: .73rem; color: rgba(255,255,255,.6); }
    .yb-progress-pct { font-size: .73rem; font-weight: 700; color: #38bdf8; }
    .yb-progress-track { background: rgba(255,255,255,.08); border-radius: 999px; height: 6px; overflow: hidden; }
    .yb-progress-fill {
      height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, #0891b2, #38bdf8);
      animation: yb-progress-anim 2.4s ease-out forwards;
    }
    @keyframes yb-progress-anim { from { width: 0 } }
    .yb-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .yb-info-cell {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px; padding: 10px 12px;
    }
    .yb-info-cell-label { font-size: .62rem; color: rgba(255,255,255,.35); margin-bottom: 3px; text-transform: uppercase; letter-spacing:.06em; }
    .yb-info-cell-val { font-size: .82rem; font-weight: 700; color: #e2e8f0; }
    .yb-log { display: flex; flex-direction: column; gap: 7px; }
    .yb-log-row { display: flex; align-items: center; gap: 8px; font-size: .7rem; color: rgba(255,255,255,.5); }
    .yb-log-time { font-family: monospace; color: rgba(255,255,255,.28); font-size: .65rem; }
    .yb-log-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .yb-log-dot--g { background: #22c55e; }
    .yb-log-dot--b { background: #38bdf8; }
    .yb-log-dot--y { background: #f59e0b; }

    /* ── TRUST BAR ───────────────────────────────────────────── */
    .yb-trust {
      background: rgba(255,255,255,.03);
      border-top: 1px solid rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.06);
      padding: 18px 0;
    }
    .yb-trust-inner {
      display: flex; flex-wrap: wrap; gap: 0;
      justify-content: center; align-items: center;
    }
    .yb-trust-item { display: flex; align-items: center; gap: 8px; padding: 8px 28px; font-size: .8rem; color: rgba(255,255,255,.62); }
    .yb-trust-item i { color: #38bdf8; font-size: .85rem; }
    .yb-trust-div { width: 1px; height: 28px; background: rgba(255,255,255,.08); }

    /* ── SECTION COMMON ─────────────────────────────────────── */
    .yb-section { padding: 80px 0; }
    .yb-section--dark { background: #070e1a; }
    .yb-section--navy { background: #0a1628; }
    .yb-section--light { background: #f8fafc; }
    .yb-section--white { background: #fff; }
    .yb-eyebrow-sm {
      display: inline-block;
      font-size: .68rem; font-weight: 800; letter-spacing: .1em;
      text-transform: uppercase; color: #38bdf8; margin-bottom: 12px;
    }
    .yb-section-title {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 14px;
    }
    .yb-section-title.light { color: #0f172a; }
    .yb-section-sub { font-size: .92rem; color: rgba(255,255,255,.52); line-height: 1.75; max-width: 640px; }
    .yb-section-sub.light { color: #64748b; }

    /* ── THREAT CARDS ────────────────────────────────────────── */
    .yb-threat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    @media (max-width: 991px) { .yb-threat-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 575px)  { .yb-threat-grid { grid-template-columns: 1fr; } }
    .yb-threat-card {
      position: relative;
      background: linear-gradient(145deg, #0d1f3c, #0a1628);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 20px; padding: 28px 24px;
      overflow: hidden; transition: all .25s;
    }
    .yb-threat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.35); border-color: rgba(56,189,248,.2); }
    .yb-threat-glow {
      position: absolute; width: 150px; height: 150px;
      border-radius: 50%; top: -40px; right: -40px;
      pointer-events: none; opacity: .1; transition: opacity .3s;
    }
    .yb-threat-card:hover .yb-threat-glow { opacity: .18; }
    .yb-threat-icon {
      width: 48px; height: 48px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px; font-size: 1.2rem;
    }
    .yb-icon--red    { background: rgba(239,68,68,.18);   color: #fca5a5; }
    .yb-icon--amber  { background: rgba(245,158,11,.18);  color: #fcd34d; }
    .yb-icon--purple { background: rgba(139,92,246,.18);  color: #c4b5fd; }
    .yb-icon--cyan   { background: rgba(6,182,212,.18);   color: #67e8f9; }
    .yb-icon--rose   { background: rgba(244,63,94,.18);   color: #fda4af; }
    .yb-icon--blue   { background: rgba(37,99,235,.2);    color: #93c5fd; }
    .yb-threat-card h4 { font-size: .98rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
    .yb-threat-card p  { font-size: .83rem; color: rgba(255,255,255,.48); line-height: 1.7; margin: 0; }

    /* ── FEATURE BENTO ───────────────────────────────────────── */
    .yb-feature-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    @media (max-width: 767px) { .yb-feature-grid { grid-template-columns: 1fr; } }
    .yb-feature-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 32px 28px;
      display: flex; gap: 20px; align-items: flex-start;
      transition: all .2s;
    }
    .yb-feature-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15,23,42,.1); border-color: #bfdbfe; }
    .yb-feature-icon {
      width: 52px; height: 52px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem; flex-shrink: 0;
    }
    .yb-feature-icon--cyan   { background: rgba(6,182,212,.1);   color: #0891b2; }
    .yb-feature-icon--blue   { background: rgba(37,99,235,.1);   color: #2563eb; }
    .yb-feature-icon--green  { background: rgba(16,185,129,.1);  color: #059669; }
    .yb-feature-icon--amber  { background: rgba(245,158,11,.12); color: #d97706; }
    .yb-feature-text h4 { font-size: 1rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
    .yb-feature-text p  { font-size: .85rem; color: #64748b; line-height: 1.65; margin: 0; }

    /* ── VDS UPSELL STRIP ────────────────────────────────────── */
    .yb-upsell {
      background: linear-gradient(135deg, #0c1f4a, #0e3352);
      border: 1px solid rgba(56,189,248,.2);
      border-radius: 24px;
      padding: 40px 48px;
      display: flex; align-items: center; justify-content: space-between; gap: 32px;
      flex-wrap: wrap;
    }
    .yb-upsell-icon {
      width: 64px; height: 64px; border-radius: 18px;
      background: rgba(56,189,248,.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; color: #38bdf8; flex-shrink: 0;
    }
    .yb-upsell h3 { font-size: 1.3rem; font-weight: 900; color: #fff; margin-bottom: 6px; }
    .yb-upsell p  { font-size: .875rem; color: rgba(255,255,255,.58); margin: 0; line-height: 1.65; max-width: 520px; }

    /* ── HOW IT WORKS ────────────────────────────────────────── */
    .yb-steps { display: flex; flex-direction: column; gap: 0; position: relative; }
    .yb-steps::before {
      content: '';
      position: absolute; left: 23px; top: 24px; bottom: 24px;
      width: 2px; background: rgba(56,189,248,.15);
    }
    .yb-step { display: flex; gap: 20px; align-items: flex-start; padding: 0 0 32px; }
    .yb-step:last-child { padding-bottom: 0; }
    .yb-step-num {
      width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, #0891b2, #38bdf8);
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 900; color: #fff;
      position: relative; z-index: 1;
    }
    .yb-step-body h4 { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 6px; padding-top: 10px; }
    .yb-step-body p  { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.7; margin: 0; }

    /* ── FAQ ─────────────────────────────────────────────────── */
    .yb-faq-item {
      border-bottom: 1px solid rgba(255,255,255,.07);
      padding: 20px 0;
    }
    .yb-faq-q {
      display: flex; justify-content: space-between; align-items: center;
      cursor: pointer; gap: 16px;
    }
    .yb-faq-q span { font-size: .95rem; font-weight: 700; color: #e2e8f0; }
    .yb-faq-q i { color: #38bdf8; transition: transform .2s; flex-shrink: 0; }
    .yb-faq-item.open .yb-faq-q i { transform: rotate(45deg); }
    .yb-faq-a {
      font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.8;
      max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s;
    }
    .yb-faq-item.open .yb-faq-a { max-height: 200px; padding-top: 12px; }

    /* ── CTA STRIP ───────────────────────────────────────────── */
    .yb-cta {
      background: linear-gradient(135deg, #030712, #0c2340);
      padding: 72px 0;
      text-align: center;
    }
    .yb-cta h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; color: #fff; margin-bottom: 14px; }
    .yb-cta p  { font-size: .95rem; color: rgba(255,255,255,.55); max-width: 540px; margin: 0 auto 32px; line-height: 1.75; }