*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:    #0F1F3D;
      --navy-mid: #1B3360;
      --navy-dark: #080F1E;
      --gold:    #7C2D12;
      --gold-cta: #FBBF24;
      --gold-light: #FDF0D9;
      --canvas-warm: #F5F0E7;
      --canvas-cool: #EEF3F9;
      --canvas-cream: #F8F3EA;
      --surface: rgba(255,255,255,0.74);
      --surface-strong: rgba(255,255,255,0.86);
      --surface-soft: rgba(246,249,253,0.72);
      --line-soft: rgba(15,31,61,0.08);
      --deep: #0C1830;
      --deep-mid: #122849;
      --deep-soft: #1A345D;
      --success: #059669;
      --danger:  #dc2626;
      --warning: #7C2D12;
      --bg:      #FAFAF9;
      --bg-card: #FFFFFF;
      --text:    #1a202c;
      --text-2:  #374151;
      --muted:   #475569;
      --border:  #e5e7eb;
      --shadow:  0 1px 6px rgba(0,0,0,0.07);
      --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
      --radius:  14px;
      --radius-sm: 8px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--estmate-font-body);
      background: linear-gradient(180deg, var(--canvas-warm) 0%, var(--canvas-cool) 42%, var(--canvas-cream) 100%);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 { font-family: var(--estmate-font-heading); line-height: 1.2; }

    /* ── NAV ── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(246,243,238,0.86);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(15,31,61,0.08);
      transition: box-shadow .2s;
    }
    nav.scrolled { box-shadow: 0 8px 28px rgba(12,24,48,0.08); }
    .nav-inner {
      max-width: 1120px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 24px; height: 64px;
    }
    .nav-logo {
      font-size: 1.35rem; font-weight: 850;
      color: var(--navy); text-decoration: none;
      display: flex; align-items: center; gap: 8px;
      letter-spacing: -0.03em;
      min-height: 44px;
    }
    .nav-logo img { width: 28px; height: 28px; display: block; }
    .nav-links {
      display: flex; align-items: center; gap: 32px;
      list-style: none;
    }
    .nav-right {
      display: flex; align-items: center; gap: 14px;
    }
    .nav-language {
      flex: 0 0 auto;
      margin-left: -8px;
    }
    .nav-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      font-size: 0.88rem; font-weight: 500;
      color: var(--text-2); text-decoration: none;
      transition: color .15s;
    }
    .nav-links a:hover { color: var(--navy); }
    .nav-cta {
      background: var(--gold-cta); color: var(--navy) !important;
      padding: 9px 20px; border-radius: var(--radius-sm);
      min-height: 44px;
      font-weight: 700 !important; font-size: 0.85rem !important;
      transition: opacity .15s !important;
    }
    .nav-cta:hover { opacity: .96; }
    .nav-hamburger {
      display: none; background: none; border: none;
      cursor: pointer; padding: 8px; color: var(--navy); font-size: 1.4rem;
      min-width: 44px; min-height: 44px;
    }
    @media (max-width: 768px) {
      .nav-inner { position: relative; }
      .nav-links {
        position: absolute;
        top: 64px;
        left: 18px;
        right: 18px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid rgba(15,31,61,0.1);
        border-radius: 14px;
        background: rgba(255,255,255,0.96);
        box-shadow: 0 18px 42px rgba(12,24,48,0.16);
      }
      .nav-links.is-open { display: flex; }
      .nav-links li { width: 100%; }
      .nav-links a {
        display: flex;
        justify-content: space-between;
        padding: 12px 14px;
        border-radius: 10px;
        font-size: 0.95rem;
      }
      .nav-links a:hover { background: rgba(15,31,61,0.06); }
      .nav-links .nav-cta {
        margin-top: 6px;
        justify-content: center;
        text-align: center;
      }
      .nav-hamburger { display: block; }
      .nav-right { gap: 10px; }
      .nav-language .estmate-language-switcher {
        padding: 3px;
      }
    }

    /* ── SECTION WRAPPER ── */
    .section { max-width: 1120px; margin: 0 auto; padding: 80px 24px; }
    .section-label {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
    }
    .section-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--navy); margin-bottom: 16px; }
    .section-sub { font-size: 1.05rem; color: var(--text-2); max-width: 560px; line-height: 1.7; }
    .svg-symbols {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .delay-06 { transition-delay: .06s; }
    .delay-08 { transition-delay: .08s; }
    .delay-10 { transition-delay: .1s; }
    .delay-12 { transition-delay: .12s; }
    .delay-15 { transition-delay: .15s; }
    .delay-16 { transition-delay: .16s; }
    .delay-18 { transition-delay: .18s; }
    .delay-20 { transition-delay: .2s; }
    .delay-24 { transition-delay: .24s; }
    .delay-32 { transition-delay: .32s; }
    .delay-40 { transition-delay: .4s; }
    .text-success { color: var(--success); }
    .text-accent { color: var(--gold); }
    .btn-offset-top { margin-top: 8px; }
    .btn-full-center {
      width: 100%;
      justify-content: center;
    }
    .section-sub--narrow {
      max-width: 520px;
      margin-top: 16px;
    }

    .site-flow-wrap {
      position: relative;
      z-index: 2;
      margin-top: -24px;
      padding: 0 24px 30px;
      background: linear-gradient(180deg, var(--deep) 0%, var(--deep-mid) 7%, var(--canvas-warm) 7%, var(--canvas-cool) 54%, var(--canvas-cream) 100%);
    }
    .site-flow-shell {
      max-width: 1120px;
      margin: 0 auto;
      border-radius: 34px;
      border: 1px solid var(--line-soft);
      background:
        radial-gradient(circle at top right, rgba(217,119,6,0.09), transparent 24%),
        radial-gradient(circle at 12% 100%, rgba(27,51,96,0.08), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(247,244,237,0.88) 52%, rgba(245,248,252,0.9) 100%);
      box-shadow: 0 34px 90px rgba(8,17,36,0.14);
      backdrop-filter: blur(10px);
      overflow: hidden;
    }
    .flow-section {
      padding: 64px 36px;
      position: relative;
    }
    .flow-section + .flow-section {
      border-top: 1px solid rgba(15,31,61,0.07);
    }
    .flow-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
      gap: 36px;
      align-items: end;
      margin-bottom: 44px;
    }
    .flow-header .section-title {
      margin-bottom: 0;
    }
    .flow-header-simple {
      grid-template-columns: 1fr;
      margin-bottom: 34px;
    }
    .flow-note {
      font-size: 1rem;
      color: var(--text-2);
      line-height: 1.75;
      max-width: 420px;
    }
    .mail-flow-section .flow-header {
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
      gap: 40px;
    }
    .mail-flow-section .flow-note {
      max-width: 100%;
    }
    .flow-section-price {
      padding-bottom: 72px;
    }
    @media (max-width: 900px) {
      .site-flow-wrap {
        padding: 0 18px 22px;
      }
      .site-flow-shell {
        border-radius: 26px;
      }
      .flow-section {
        padding: 52px 24px;
      }
      .flow-header {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
      }
      .flow-note {
        max-width: none;
      }
      .mail-flow-section .flow-header {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }
    @media (max-width: 640px) {
      .site-flow-wrap {
        margin-top: -18px;
        padding: 0 14px 18px;
      }
      .site-flow-shell {
        border-radius: 22px;
      }
      .flow-section {
        padding: 40px 18px;
      }
    }

    /* ── ANIMATE IN ── */
    .animate-in {
      opacity: 0; transform: translateY(24px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .animate-in.visible { opacity: 1; transform: translateY(0); }

    /* ══════════════ HERO ══════════════ */
    .hero-wrap {
      background:
        radial-gradient(circle at top left, rgba(217,119,6,0.08), transparent 22%),
        linear-gradient(135deg, var(--canvas-warm) 0%, var(--canvas-cool) 58%, #F3ECE1 100%);
      overflow: hidden;
    }
    .hero {
      max-width: 1180px; margin: 0 auto;
      min-height: calc(100svh - 64px);
      padding: clamp(68px, 9vh, 86px) 30px clamp(58px, 8vh, 76px);
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
      gap: clamp(46px, 6vw, 78px);
      align-items: center;
    }
    .hero-content {
      max-width: 520px;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: #5C2E00;
      background: var(--gold-light); padding: 6px 14px;
      border-radius: 20px; margin-bottom: 24px;
    }
    .hero h1 {
      font-size: clamp(2.7rem, 5.15vw, 4.35rem);
      color: var(--navy); margin-bottom: 22px;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }
    .hero h1 em { font-style: normal; color: var(--gold); }
    .hero-sub {
      font-size: clamp(1.02rem, 1.35vw, 1.15rem); color: var(--text-2);
      line-height: 1.72; margin-bottom: 34px; max-width: 500px;
    }
    .hero-ctas {
      display: grid;
      grid-template-columns: minmax(0, 360px);
      gap: 12px;
      align-items: stretch;
    }
    .hero-ctas .btn-primary,
    .hero-ctas .btn-secondary {
      width: 100%;
      min-height: 54px;
      justify-content: center;
      text-align: center;
      padding: 0 24px;
    }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--navy); color: #fff;
      padding: 14px 28px; border-radius: var(--radius-sm);
      font-size: 0.95rem; font-weight: 700;
      text-decoration: none; transition: background .15s, transform .1s;
      border: none; cursor: pointer;
    }
    .btn-primary:hover { background: var(--navy-dark); transform: translateY(-1px); }
    .btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; color: var(--navy);
      padding: 13px 24px; border-radius: var(--radius-sm);
      font-size: 0.95rem; font-weight: 600;
      text-decoration: none; transition: all .15s;
      border: 1.5px solid var(--navy);
    }
    .btn-secondary:hover { background: var(--navy); color: #fff; }

    /* HERO MOCKUP */
    .hero-mockup {
      position: relative;
      width: min(100%, 540px);
      justify-self: end;
      transform: translateY(10px);
    }
    .mockup-window {
      background: rgba(255,255,255,0.88);
      border-radius: var(--radius);
      box-shadow: 0 24px 60px rgba(12,24,48,0.14);
      border: 1px solid rgba(15,31,61,0.08);
      overflow: hidden;
    }
    .mockup-bar {
      background: rgba(242,244,248,0.92); padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      border-bottom: 1px solid rgba(15,31,61,0.08);
    }
    .mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mockup-title { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 8px; }
    .mockup-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
    .prop-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(247,249,252,0.86) 100%);
      border: 1px solid rgba(15,31,61,0.08);
      border-radius: 10px;
      padding: 14px 16px;
      border-left: 5px solid var(--success);
      animation: float 4s ease-in-out infinite;
    }
    .prop-card:nth-child(2) { border-left-color: var(--warning); animation-delay: -2s; }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-4px); }
    }
    .prop-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
    .prop-addr { font-size: 14px; font-weight: 700; color: var(--navy); }
    .prop-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
    .prop-badge {
      font-size: 10px; font-weight: 700; padding: 2px 8px;
      border-radius: 20px; white-space: nowrap;
    }
    .badge-green { background: #dcfce7; color: #15803d; }
    .badge-orange { background: #fff7ed; color: #c2410c; }
    .prop-stats { display: flex; gap: 26px; }
    .prop-stat { font-size: 11px; color: #374151; }
    .prop-stat strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
    .prop-bar-wrap { height: 4px; background: #e5e7eb; border-radius: 2px; margin-top: 12px; }
    .prop-bar { height: 100%; border-radius: 2px; }
    .prop-bar--success { background: var(--success); }
    .prop-bar--accent { background: var(--gold); }
    .prop-bar--85 { width: 85%; }
    .prop-bar--64 { width: 64%; }
    .mockup-dot--red { background: #ff5f57; }
    .mockup-dot--yellow { background: #febc2e; }
    .mockup-dot--green { background: #28c840; }
    .mockup-insights {
      display: flex;
      gap: 8px;
      padding: 4px 0 2px;
    }
    .mockup-insight {
      flex: 1;
      border-radius: 8px;
      padding: 10px;
      text-align: center;
    }
    .mockup-insight--success {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }
    .mockup-insight--warning {
      background: #fffbeb;
      border: 1px solid #fde68a;
    }
    .mockup-insight-icon {
      font-size: 18px;
      margin-bottom: 4px;
    }
    .mockup-insight-icon--success,
    .mockup-insight-title--success {
      color: #064E3B;
    }
    .mockup-insight-icon--warning,
    .mockup-insight-title--warning {
      color: #713F12;
    }
    .mockup-insight-title {
      font-size: 10px;
      font-weight: 700;
    }
    .mockup-insight-meta {
      color: var(--text-2);
      font-size: 9px;
      margin-top: 2px;
    }

    @media (max-width: 900px) {
      .hero {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 60px 24px 60px;
      }
      .hero-content {
        max-width: 640px;
      }
      .hero-mockup {
        max-width: 560px;
        width: 100%;
        justify-self: start;
        transform: none;
      }
    }
    @media (max-width: 640px) {
      .hero { gap: 30px; padding: 56px 24px 52px; }
      .hero-mockup { max-width: 100%; }
      .hero h1 { font-size: clamp(2.55rem, 12.2vw, 3.6rem); }
      .mockup-window { border-radius: 12px; }
      .mockup-body { padding: 12px; gap: 8px; }
      .prop-card { padding: 10px 11px; }
      .prop-card:nth-child(2) { display: none; }
      .prop-stats { gap: 10px; justify-content: space-between; }
      .prop-addr { font-size: 12px; }
      .prop-meta { font-size: 10px; }
      .prop-badge { font-size: 9px; padding: 2px 6px; }
      .prop-stat { font-size: 10px; }
      .prop-stat strong { font-size: 12px; }
    }

    /* ══════════════ TRUST STRIP ══════════════ */
    .trust-strip {
      position: relative;
      background: linear-gradient(180deg, rgba(15,31,61,0.18) 0%, rgba(12,24,48,0.68) 18%, rgba(10,20,40,0.96) 56%, var(--deep) 100%);
      padding: 24px 24px 0;
    }
    .trust-shell {
      max-width: 1120px;
      margin: 0 auto;
      color: #fff;
      position: relative;
      z-index: 2;
      background-color: #0A1427;
      background:
        radial-gradient(circle at top right, rgba(217,119,6,0.1), transparent 28%),
        linear-gradient(180deg, rgba(11,22,43,0.94) 0%, rgba(10,20,40,0.98) 100%);
      border: 1px solid rgba(255,255,255,0.08);
      border-bottom: none;
      border-radius: 30px 30px 0 0;
      box-shadow: 0 26px 70px rgba(4,9,20,0.34);
      padding: 28px 28px 0;
    }
    .trust-head {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      justify-items: center;
      text-align: center;
      margin-bottom: 28px;
    }
    .trust-kicker {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #FDE7BF;
      margin-bottom: 12px;
    }
    .trust-title {
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      line-height: 1.02;
      letter-spacing: -0.03em;
      color: rgba(255,255,255,0.98);
      max-width: 720px;
      text-shadow: 0 1px 0 rgba(0,0,0,0.18);
    }
    .trust-caption {
      margin: 0;
      font-size: 1rem;
      color: rgba(255,255,255,0.9);
      line-height: 1.7;
      max-width: 680px;
    }
    .trust-rail {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 26px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
        radial-gradient(circle at top left, rgba(253,240,217,0.08), transparent 34%),
        linear-gradient(180deg, rgba(15,29,56,0.94) 0%, rgba(10,20,40,0.98) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 54px rgba(5,10,22,0.2);
      backdrop-filter: blur(10px);
    }
    .trust-item {
      min-height: 188px;
      padding: 26px 22px 24px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 20px;
      text-align: center;
    }
    .trust-item + .trust-item {
      border-left: 1px solid rgba(255,255,255,0.08);
    }
    .trust-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-width: 38px;
      height: 38px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.96);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .trust-label {
      font-size: 1.04rem;
      font-weight: 700;
      color: rgba(255,255,255,0.98);
      line-height: 1.28;
      max-width: 18ch;
      margin-bottom: 8px;
    }
    .trust-detail {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.72);
      line-height: 1.55;
      max-width: 24ch;
    }
    @media (max-width: 1100px) {
      .trust-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .trust-item:nth-child(4),
      .trust-item:nth-child(5) {
        border-top: 1px solid rgba(255,255,255,0.08);
      }
      .trust-item:nth-child(4) {
        border-left: none;
      }
    }
    @media (max-width: 980px) {
      .trust-shell {
        padding: 24px 22px 0;
      }
      .trust-title {
        max-width: none;
      }
      .trust-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .trust-item:nth-child(3),
      .trust-item:nth-child(5) {
        border-left: none;
      }
      .trust-item:nth-child(n + 3) {
        border-top: 1px solid rgba(255,255,255,0.08);
      }
    }
    @media (max-width: 640px) {
      .trust-strip {
        padding: 18px 18px 0;
      }
      .trust-shell {
        border-radius: 22px 22px 0 0;
        padding: 20px 16px 0;
      }
      .trust-rail {
        grid-template-columns: 1fr;
        border-radius: 20px;
      }
      .trust-item {
        min-height: auto;
        padding: 18px;
      }
      .trust-item + .trust-item {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.08);
      }
      .trust-item:nth-child(n + 3) {
        border-top: 1px solid rgba(255,255,255,0.08);
      }
    }

    /* ══════════════ FIRST SUCCESS ══════════════ */
    .first-success-wrap {
      background: var(--deep);
      padding: 0 24px;
    }
    .first-success {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
      gap: 28px;
      align-items: stretch;
      padding: 34px 0 24px;
      color: #fff;
    }
    .first-success-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }
    .first-success-kicker {
      color: rgba(253,240,217,0.86);
      font-size: 0.76rem;
      font-weight: 850;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .first-success h2 {
      max-width: 480px;
      margin: 0;
      font-size: clamp(1.65rem, 3vw, 2.25rem);
      line-height: 1.06;
      letter-spacing: -0.03em;
    }
    .first-success-copy p {
      max-width: 520px;
      margin: 0;
      color: rgba(255,255,255,0.72);
      line-height: 1.65;
    }
    .first-success-link {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 44px;
      margin-top: 4px;
      color: #fff;
      font-weight: 800;
      text-decoration: none;
      border-bottom: 2px solid rgba(217,119,6,0.82);
    }
    .first-success-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 24px;
      background: rgba(255,255,255,0.12);
      box-shadow: 0 22px 56px rgba(0,0,0,0.18);
    }
    .first-success-step {
      min-height: 180px;
      padding: 22px 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    }
    .first-success-step__marker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      margin-bottom: 18px;
      background:
        linear-gradient(180deg, rgba(253,240,217,0.18), rgba(217,119,6,0.12));
      border: 1px solid rgba(253,240,217,0.22);
      color: #FDF0D9;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .first-success-step__marker svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
    .first-success-step strong {
      display: block;
      margin-bottom: 8px;
      color: #fff;
      line-height: 1.25;
    }
    .first-success-step small {
      display: block;
      color: rgba(255,255,255,0.82);
      line-height: 1.55;
      font-size: 0.84rem;
    }
    @media (max-width: 980px) {
      .first-success {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 760px) {
      .first-success-wrap {
        padding: 0 18px;
      }
      .first-success {
        padding-top: 28px;
      }
      .first-success-steps {
        grid-template-columns: 1fr;
        border-radius: 20px;
      }
      .first-success-step {
        min-height: auto;
        padding: 18px;
      }
      .first-success-step__marker {
        margin-bottom: 12px;
      }
    }

    /* ══════════════ PROBLEEM ══════════════ */
    .problem-wrap {
      background:
        radial-gradient(circle at top center, rgba(217,119,6,0.08), transparent 24%),
        linear-gradient(180deg, var(--deep) 0%, var(--deep-mid) 100%);
    }
    .problem {
      max-width: 1120px; margin: 0 auto;
      padding: 58px 24px 80px;
      text-align: center;
    }
    .problem .section-label { color: rgba(255,255,255,0.86); }
    .problem .section-title { color: #fff; margin-bottom: 40px; }
    .pain-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px; text-align: left;
    }
    .pain-card {
      position: relative;
      overflow: hidden;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--radius);
      padding: 30px 24px 24px;
      min-height: 190px;
    }
    .pain-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(217,119,6,0.15), transparent 42%);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }
    .pain-card:hover::after { opacity: 1; }
    .pain-icon {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 46px; height: 46px;
      border-radius: 12px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.9);
      display: flex; align-items: center; justify-content: center;
      margin: 0;
    }
    .pain-icon svg { width: 23px; height: 23px; stroke-width: 1.8; }
    .pain-title { font-size: 0.95rem; font-weight: 700; color: #fff; margin: 8px 60px 8px 0; }
    .pain-text { font-size: 0.85rem; color: rgba(255,255,255,0.82); line-height: 1.6; }
    @media (max-width: 768px) {
      .pain-grid { grid-template-columns: 1fr; }
    }

    /* ══════════════ FUNCTIES ══════════════ */
    .features-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .feature-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, var(--surface-strong) 0%, rgba(244,247,251,0.82) 100%);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      padding: 30px 26px 28px;
      min-height: 290px;
      box-shadow: 0 14px 30px rgba(15,31,61,0.05);
      transition: box-shadow .2s, transform .2s;
    }
    .feature-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), rgba(217,119,6,0.18));
      opacity: 0.85;
    }
    .feature-card::after {
      content: '';
      position: absolute;
      top: -56px; right: -56px;
      width: 150px; height: 150px;
      border-radius: 50%;
      background: rgba(217,119,6,0.07);
      pointer-events: none;
    }
    .feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    .feature-icon {
      position: absolute;
      top: 24px;
      right: 24px;
      margin: 0;
      width: 56px; height: 56px;
      background: var(--gold-light);
      color: var(--navy);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      z-index: 1;
    }
    .feature-icon svg { width: 27px; height: 27px; stroke-width: 1.75; }
    .feature-name {
      font-family: var(--estmate-font-heading);
      font-size: 1.15rem; color: var(--navy);
      margin: 8px 76px 10px 0;
      position: relative;
      z-index: 1;
    }
    .feature-text { font-size: 0.88rem; color: var(--text-2); line-height: 1.65; margin-bottom: 14px; position: relative; z-index: 1; }
    .feature-result { font-size: 0.82rem; font-weight: 600; color: var(--success); font-style: italic; position: relative; z-index: 1; }
    @media (max-width: 900px) {
      .features-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .features-grid { grid-template-columns: 1fr; }
    }

    /* ══════════════ MAIL-INBOX ══════════════ */
    .mail-flow {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
      gap: 40px;
      align-items: center;
    }
    .mail-flow-panel {
      border: 1px solid var(--line-soft);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(246,248,252,0.88) 0%, rgba(255,255,255,0.8) 100%);
      padding: 28px;
      box-shadow: 0 16px 36px rgba(15,31,61,0.06);
    }
    .mail-address-preview {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid rgba(15,31,61,.12);
      border-radius: 18px;
      background: rgba(255,255,255,0.9);
      padding: 14px 16px;
      margin: 18px 0 22px;
      color: var(--navy);
      font-weight: 800;
      overflow-wrap: anywhere;
    }
    .mail-address-preview span:last-child {
      color: var(--gold);
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .mail-flow-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .mail-flow-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: var(--text-2);
      font-size: .9rem;
      line-height: 1.55;
    }
    .mail-flow-list svg {
      width: 20px;
      height: 20px;
      color: var(--success);
      flex: 0 0 auto;
      margin-top: 1px;
    }
    .mail-flow-steps {
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr;
    }
    .mail-flow-step {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 16px;
      align-items: center;
      border: 1px solid var(--line-soft);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(245,248,252,0.66) 100%);
      padding: 18px 20px;
    }
    .mail-flow-step strong {
      display: block;
      color: var(--navy);
      margin-bottom: 4px;
    }
    .mail-flow-step p {
      margin: 0;
      color: var(--text-2);
      font-size: .88rem;
      line-height: 1.55;
      max-width: 440px;
    }
    .mail-flow-step-number {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: var(--navy);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 800;
    }
    @media (max-width: 900px) {
      .mail-flow { grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
    }
    @media (max-width: 560px) {
      .mail-address-preview {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    /* ══════════════ STAPPEN ══════════════ */
    .steps-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 18px; position: relative;
    }
    .step {
      text-align: left;
      padding: 26px 24px 24px;
      position: relative;
      z-index: 1;
      border-radius: 22px;
      border: 1px solid var(--line-soft);
      background: linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(246,248,252,0.68) 100%);
      box-shadow: 0 14px 30px rgba(15,31,61,0.05);
    }
    .step-num {
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--navy); color: #fff;
      font-family: var(--estmate-font-heading);
      font-size: 1.4rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      margin: 0 0 20px;
      border: 4px solid rgba(255,255,255,0.78);
      box-shadow: 0 0 0 2px var(--gold);
    }
    .step-title { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
    .step-text { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }
    @media (max-width: 700px) {
      .steps-grid { grid-template-columns: 1fr; gap: 18px; }
    }

    /* ══════════════ WAAROM ══════════════ */
    .why-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 60px; align-items: center; margin-top: 48px;
    }
    .why-text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy); margin-bottom: 16px; }
    .why-text p { font-size: 0.95rem; color: var(--text-2); line-height: 1.8; margin-bottom: 20px; }
    .why-points { display: flex; flex-direction: column; gap: 16px; }
    .why-point {
      position: relative;
      display: block;
      background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(246,248,252,0.72) 100%);
      border: 1px solid var(--line-soft);
      border-radius: 22px; padding: 20px 74px 20px 20px;
      box-shadow: 0 14px 30px rgba(15,31,61,0.05);
      min-height: 112px;
    }
    .why-point-icon {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 38px; height: 38px;
      border-radius: 10px;
      background: var(--gold-light);
      color: var(--navy);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .why-point-icon svg { width: 20px; height: 20px; stroke-width: 1.85; }
    .why-point-title { font-size: 0.9rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
    .why-point-text { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; }
    @media (max-width: 800px) {
      .why-grid { grid-template-columns: 1fr; gap: 32px; }
    }

    /* ══════════════ PROOF + GIDSEN ══════════════ */
    .proof-guide {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 28px;
      align-items: stretch;
      margin-top: 48px;
    }
    .proof-panel,
    .guide-panel {
      border: 1px solid var(--line-soft);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(246,248,252,0.74) 100%);
      box-shadow: 0 16px 34px rgba(15,31,61,0.06);
      padding: 26px;
    }
    .proof-panel h3,
    .guide-panel h3 {
      color: var(--navy);
      font-size: 1.15rem;
      margin-bottom: 12px;
    }
    .proof-list,
    .guide-list {
      list-style: none;
      display: grid;
      gap: 12px;
    }
    .proof-list li {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      color: var(--text-2);
      font-size: .9rem;
      line-height: 1.55;
    }
    .proof-mark {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(22,163,74,0.10);
      color: var(--success);
      display: grid;
      place-items: center;
      font-weight: 800;
    }
    .proof-list strong {
      display: block;
      color: var(--navy);
      margin-bottom: 2px;
    }
    .guide-list a {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
      color: var(--navy);
      text-decoration: none;
      font-weight: 750;
      transition: color .16s ease, transform .16s ease;
    }
    .guide-list a:hover {
      color: var(--gold);
      transform: translateX(2px);
    }
    .guide-list li:last-child a { border-bottom: 0; }
    .guide-icon {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(253,240,217,0.95) 0%, rgba(255,255,255,0.86) 100%);
      border: 1px solid rgba(217,119,6,0.18);
      color: var(--gold);
      box-shadow: 0 8px 18px rgba(15,31,61,0.06);
    }
    .guide-icon svg {
      width: 21px;
      height: 21px;
      stroke-width: 1.9;
    }
    .guide-text {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .guide-title {
      color: var(--navy);
      font-weight: 820;
      line-height: 1.2;
    }
    .guide-tag {
      width: fit-content;
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 4px 9px;
      border-radius: 999px;
      background: var(--navy-soft);
      color: var(--text-2);
      font-size: .73rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .guide-arrow {
      color: rgba(15,31,61,0.36);
      font-size: 1.25rem;
      font-weight: 800;
      transition: color .16s ease, transform .16s ease;
    }
    .guide-list a:hover .guide-arrow {
      color: var(--gold);
      transform: translateX(3px);
    }
    @media (max-width: 560px) {
      .guide-list a {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 12px;
      }
      .guide-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
      }
    }
    @media (max-width: 860px) {
      .proof-guide { grid-template-columns: 1fr; }
    }

    /* ══════════════ PRIJS ══════════════ */
    .price-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
      gap: 44px;
      align-items: center;
    }
    .price-card-wrap { max-width: 480px; margin: 0 0 0 auto; }
    .price-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(251,247,238,0.98) 100%);
      border: 2px solid var(--gold);
      border-radius: 24px;
      padding: 40px 36px;
      box-shadow: 0 20px 46px rgba(15,31,61,0.1);
      text-align: center;
    }
    .price-badge {
      display: inline-block;
      background: var(--gold-cta); color: var(--navy);
      font-size: 0.72rem; font-weight: 800;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 4px 14px; border-radius: 20px;
      margin-bottom: 20px;
    }
    .price-num {
      font-family: var(--estmate-font-heading);
      font-size: 3.5rem; font-weight: 800;
      color: var(--navy); line-height: 1;
    }
    .price-teaser-title {
      font-size: 2rem;
      color: var(--navy);
      margin-bottom: 10px;
    }
    .price-period { font-size: 1rem; color: var(--muted); margin-bottom: 8px; }
    .price-trial { font-size: 0.85rem; color: var(--success); font-weight: 600; margin-bottom: 28px; }
    .price-features { list-style: none; text-align: left; margin-bottom: 28px; }
    .price-features li {
      padding: 8px 0; border-bottom: 1px solid var(--border);
      font-size: 0.88rem; color: var(--text-2);
      display: flex; align-items: center; gap: 10px;
    }
    .price-features li:last-child { border-bottom: none; }
    .price-features li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; }
    @media (max-width: 900px) {
      .price-layout {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .price-card-wrap {
        margin: 0;
        max-width: none;
      }
    }

    /* ══════════════ CTA FINAAL ══════════════ */
    .final-cta-wrap {
      background:
        radial-gradient(circle at top center, rgba(217,119,6,0.08), transparent 24%),
        linear-gradient(180deg, var(--deep-mid) 0%, var(--deep) 100%);
    }
    .final-cta {
      max-width: 1120px; margin: 0 auto;
      padding: 100px 24px; text-align: center;
    }
    .final-cta h2 {
      font-size: clamp(1.8rem, 4vw, 3rem);
      color: #fff; margin-bottom: 16px;
    }
    .final-cta p { font-size: 1.05rem; color: rgba(255,255,255,0.75); margin-bottom: 40px; max-width: 520px; margin-left: auto; margin-right: auto; }
    .final-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn-white {
      background: #fff; color: var(--navy);
      padding: 14px 32px; border-radius: var(--radius-sm);
      font-size: 0.95rem; font-weight: 700;
      text-decoration: none; transition: opacity .15s;
      border: none; cursor: pointer; display: inline-block;
    }
    .btn-white:hover { opacity: .9; }
    .btn-outline-white {
      background: transparent; color: #fff;
      padding: 13px 28px; border-radius: var(--radius-sm);
      font-size: 0.95rem; font-weight: 600;
      text-decoration: none; transition: background .15s;
      border: 1.5px solid rgba(255,255,255,0.5);
      display: inline-block;
    }
    .btn-outline-white:hover { background: rgba(255,255,255,0.1); }

    /* ══════════════ FOOTER ══════════════ */
    footer {
      background: linear-gradient(180deg, var(--deep) 0%, #0A1427 100%);
      padding: 40px 24px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .footer-inner {
      max-width: 1120px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 20px;
    }
    .footer-logo {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 1.15rem; font-weight: 850;
      color: #fff; text-decoration: none;
      letter-spacing: -0.03em;
      min-height: 44px;
    }
    .footer-logo img { width: 26px; height: 26px; display: block; }
    .footer-tagline { font-size: 0.8rem; color: rgba(255,255,255,0.76); margin-top: 4px; }
    .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
    .footer-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 0.82rem; color: rgba(255,255,255,0.82); text-decoration: none; transition: color .15s; }
    .footer-links a:hover { color: #fff; }
    .footer-copy { font-size: 0.78rem; color: rgba(255,255,255,0.76); }