:root{
      --bg:#f7f4ef;
      --surface:#ffffff;
      --surface-2:#f1ece3;
      --text:#2e2a26;
      --muted:#6d655d;
      --primary:#8b5e3c;
      --primary-dark:#6d4528;
      --accent:#caa676;
      --border:#e7ded2;
      --success:#2d6a4f;
      --shadow:0 18px 40px rgba(46, 42, 38, 0.08);
      --radius:22px;
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(202,166,118,.18), transparent 26%),
        linear-gradient(180deg, #fbf8f3 0%, var(--bg) 100%);
      color:var(--text);
      line-height:1.6;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{width:min(calc(100% - 32px), var(--max)); margin:0 auto}
    .section{padding:72px 0}
    .section-tight{padding:56px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 16px;
      background:rgba(139,94,60,.08);
      border:1px solid rgba(139,94,60,.12);
      border-radius:999px;
      color:var(--primary-dark);
      font-weight:700;
      font-size:.92rem;
      letter-spacing:.01em;
    }

    .topbar{
      position:sticky;
      top:0;
      z-index:40;
      backdrop-filter: blur(12px);
      background:rgba(251,248,243,.86);
      border-bottom:1px solid rgba(231,222,210,.9);
    }
    .topbar-inner{
      min-height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand{
      font-size:1.35rem;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--primary-dark);
    }
    .nav{
      display:flex;
      gap:20px;
      align-items:center;
      flex-wrap:wrap;
    }
    .nav a{
      color:var(--muted);
      font-weight:600;
      font-size:.96rem;
    }
    .nav a:hover{color:var(--primary-dark)}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border:none;
      border-radius:999px;
      padding:14px 22px;
      font-weight:800;
      transition:.2s ease;
      cursor:pointer;
    }
    .btn-primary{
      background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
      color:#fff;
      box-shadow:0 12px 24px rgba(109,69,40,.18);
    }
    .btn-primary:hover{transform:translateY(-1px)}
    .btn-secondary{
      background:#fff;
      color:var(--primary-dark);
      border:1px solid var(--border);
    }

    .hero{
      padding:84px 0 56px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:28px;
      align-items:stretch;
    }
    .hero-copy, .hero-card{
      background:rgba(255,255,255,.8);
      border:1px solid rgba(231,222,210,.9);
      border-radius:30px;
      box-shadow:var(--shadow);
    }
    .hero-copy{
      padding:44px;
    }
    .hero-card{
      padding:30px;
      background:
        linear-gradient(180deg, rgba(139,94,60,.08), rgba(255,255,255,.95)),
        #fff;
    }
    h1{
      margin:18px 0 18px;
      font-size:clamp(2.4rem, 5vw, 4.4rem);
      line-height:1.05;
      letter-spacing:-.03em;
    }
    .lead{
      font-size:1.12rem;
      color:var(--muted);
      max-width:62ch;
    }
    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-top:28px;
    }
    .hero-note{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
      margin-top:24px;
    }
    .mini{
      padding:16px 18px;
      background:#fff;
      border:1px solid var(--border);
      border-radius:18px;
    }
    .mini strong{
      display:block;
      font-size:1.2rem;
      color:var(--primary-dark);
    }
    .mini span{
      color:var(--muted);
      font-size:.95rem;
    }

    .hero-card h2{
      margin:0 0 14px;
      font-size:1.35rem;
      color:var(--primary-dark);
    }
    .check-list{
      display:grid;
      gap:14px;
      padding:0;
      list-style:none;
      margin:22px 0 0;
    }
    .check-list li{
      background:#fff;
      border:1px solid var(--border);
      border-radius:18px;
      padding:16px 18px;
      color:var(--text);
    }
    .check-list strong{
      display:block;
      margin-bottom:4px;
      color:var(--primary-dark);
    }

    .section-title{
      max-width:840px;
      margin:0 auto 20px;
      text-align:center;
    }
    .section-title h2{
      margin:16px 0 12px;
      font-size:clamp(1.9rem, 3vw, 3rem);
      line-height:1.1;
      letter-spacing:-.025em;
    }
    .section-title p{
      margin:0;
      color:var(--muted);
      font-size:1.05rem;
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
      margin-top:36px;
    }
    .card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:28px;
      box-shadow:var(--shadow);
    }
    .card-icon{
      width:52px;height:52px;
      display:grid;place-items:center;
      border-radius:16px;
      font-size:1.5rem;
      background:rgba(139,94,60,.1);
      margin-bottom:18px;
    }
    .card h3{
      margin:0 0 12px;
      font-size:1.2rem;
      color:var(--primary-dark);
    }
    .card p{
      margin:0;
      color:var(--muted);
    }

    .split{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:24px;
      align-items:start;
    }
    .panel{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:28px;
      padding:32px;
      box-shadow:var(--shadow);
    }
    .panel h3{
      margin:0 0 14px;
      font-size:1.5rem;
      color:var(--primary-dark);
    }
    .panel p{color:var(--muted); margin:0 0 14px}
    .bullet-list{
      list-style:none;
      padding:0;
      margin:18px 0 0;
      display:grid;
      gap:12px;
    }
    .bullet-list li{
      position:relative;
      padding-left:30px;
      color:var(--text);
    }
    .bullet-list li::before{
      content:"✔";
      position:absolute;
      left:0; top:0;
      color:var(--success);
      font-weight:900;
    }

    .highlight{
      background:linear-gradient(180deg, rgba(202,166,118,.18), rgba(255,255,255,1));
    }

    .metric-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:22px;
    }
    .metric{
      background:#fff;
      border:1px solid var(--border);
      border-radius:20px;
      padding:20px;
      text-align:center;
    }
    .metric strong{
      display:block;
      font-size:1.9rem;
      color:var(--primary-dark);
      line-height:1.1;
    }
    .metric span{
      color:var(--muted);
      font-size:.95rem;
    }

    .tag-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
      margin-top:18px;
    }
    .tag{
      background:var(--surface-2);
      border:1px solid var(--border);
      border-radius:16px;
      padding:14px 16px;
      font-weight:700;
      color:var(--primary-dark);
    }

    .cta{
      padding:26px;
      border-radius:30px;
      background:linear-gradient(135deg, #6d4528 0%, #8b5e3c 55%, #b98956 100%);
      color:#fff;
      box-shadow:0 20px 40px rgba(109,69,40,.2);
    }
    .cta h2{
      margin:0 0 12px;
      font-size:clamp(2rem, 3.2vw, 3rem);
      line-height:1.08;
      letter-spacing:-.02em;
    }
    .cta p{
      margin:0 0 22px;
      color:rgba(255,255,255,.88);
      max-width:60ch;
      font-size:1.05rem;
    }
    .cta .actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }
    .cta .btn-secondary{
      background:rgba(255,255,255,.14);
      color:#fff;
      border-color:rgba(255,255,255,.25);
    }

    footer{
      padding:30px 0 54px;
      color:var(--muted);
    }
    .footer-inner{
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:flex-start;
      border-top:1px solid var(--border);
      padding-top:26px;
    }
    .footer-brand{
      font-weight:800;
      color:var(--primary-dark);
      margin-bottom:4px;
    }

    @media (max-width: 980px){
      .hero-grid,.cards,.split,.metric-grid{grid-template-columns:1fr}
      .tag-grid,.hero-note{grid-template-columns:1fr}
      .hero-copy,.hero-card,.panel,.card,.cta{padding:24px}
      .topbar-inner{padding:10px 0}
      .nav{display:none}
      .hero{padding-top:48px}
    }

    @media (max-width: 640px){
      .section{padding:56px 0}
      h1{font-size:2.3rem}
      .btn{width:100%}
      .hero-actions,.cta .actions{flex-direction:column}
      .footer-inner{flex-direction:column}
    }