/* ====== Base / Reset ====== */
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color:#0e0e0e; background:#ffffff; line-height:1.6}
    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}
    :root{
      --bg:#ffffff;
      --fg:#0f172a; /* slate-900 */
      --muted:#475569; /* slate-600 */
      --brand:#cc0000; /* Canada red */
      --brand-dark:#990000;
      --light:#f8fafc;
      --border:#e2e8f0;
      --shadow:0 8px 30px rgba(2,6,23,.08);
      --radius:14px;
      --radius-sm:10px;
      --maxw:1128px;
    }

    .container{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
    .grid{display:grid; gap:24px}

    /* ====== Header / Nav ====== */
    header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border)}
    .nav{display:flex; align-items:center; justify-content:space-between; height:68px}
    .brand{display:flex; align-items:center; gap:12px}
    .brand .flag{width:28px; height:20px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; background:linear-gradient(90deg, var(--brand) 0 33.333%, #fff 33.333% 66.666%, var(--brand) 66.666%)}
    .brand h1{font-size:18px; margin:0; letter-spacing:.2px}
    nav ul{display:flex; list-style:none; gap:10px; margin:0; padding:0; align-items:center}
    nav a{font-weight:600; color:#0f172a}
    .btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:999px; font-weight:700; border:1px solid transparent; transition:transform .04s ease, box-shadow .2s ease, background .2s ease}
    .btn:active{transform:translateY(1px)}
    .btn.primary{background:var(--brand); color:white; box-shadow:var(--shadow)}
    .btn.primary:hover{background:var(--brand-dark)}
    .btn.ghost{border-color:var(--border); background:#fff}

    /* ====== Hero ====== */
    .hero{padding:64px 0 40px; background:
      radial-gradient(1200px 600px at 80% -10%, rgba(204,0,0,.09), transparent 60%),
      radial-gradient(800px 400px at 10% 0%, rgba(2,6,23,.06), transparent 50%),
      var(--bg);
    }
    .hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
    .eyebrow{display:inline-flex; gap:8px; align-items:center; font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; background:#fff; border:1px solid var(--border); padding:6px 10px; border-radius:999px; color:var(--muted)}
    .hero h2{font-size:42px; line-height:1.1; margin:16px 0 12px}
    .hero p{font-size:18px; color:var(--muted); margin:0 0 22px}
    .hero .cta{display:flex; gap:12px; flex-wrap:wrap}
    .hero .card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    .hero .card strong{display:block; font-size:14px}

    /* ====== Value Props ====== */
    .props{padding:40px 0}
    .props .grid{grid-template-columns:repeat(3,1fr)}
    .prop{background:var(--light); border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px}
    .prop h3{margin:0 0 6px; font-size:18px}
    .prop p{margin:0; color:var(--muted)}

    /* ====== Pricing ====== */
    .pricing{padding:56px 0; background:linear-gradient(#fff, #fff), radial-gradient(600px 220px at 15% -20%, rgba(204,0,0,.06), transparent 60%), radial-gradient(700px 240px at 85% -10%, rgba(2,6,23,.05), transparent 60%)}
    .pricing h2{text-align:center; font-size:34px; margin:0 0 10px}
    .pricing p.lead{text-align:center; color:var(--muted); margin:0 0 28px}
    .tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
    .tier{border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); padding:22px; display:flex; flex-direction:column}
    .tier h3{margin:0 0 8px}
    .price{font-size:34px; font-weight:800; margin:6px 0 12px}
    .features{margin:0 0 18px; padding:0; list-style:none}
    .features li{display:flex; gap:10px; align-items:flex-start; margin:8px 0; color:#0f172a}
    .features li::before{content:"✓"; font-weight:900; color:var(--brand)}
    .tier .btn{margin-top:auto}
    .badge{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--brand); color:#fff; padding:4px 8px; border-radius:999px}

    /* ====== Testimonial ====== */
    .testi{padding:54px 0}
    .quote{border:1px solid var(--border); border-radius:var(--radius); padding:22px; background:#fff; box-shadow:var(--shadow)}
    .quote p{margin:0 0 10px}
    .quote .who{font-weight:700; color:#111827}

    /* ====== Contact / Footer ====== */
    .contact{padding:56px 0; background:var(--light); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
    .contact .grid{grid-template-columns:1.1fr .9fr}
    form{display:grid; gap:12px}
    label{font-size:12px; font-weight:700; color:var(--muted)}
    input, textarea{width:100%; border:1px solid var(--border); border-radius:10px; padding:12px 14px; font:inherit}
    textarea{min-height:120px; resize:vertical}

    footer{padding:26px 0; color:var(--muted)}
    .footgrid{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
    .social{display:flex; gap:12px}
    .social a{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; border:1px solid var(--border)}

    /* ====== Responsive ====== */
    @media (max-width: 980px){
      .hero .wrap{grid-template-columns:1fr}
      .props .grid{grid-template-columns:1fr}
      .tiers{grid-template-columns:1fr}
      .contact .grid{grid-template-columns:1fr}
      .hero{padding:44px 0 24px}
    }