:root{
      /* Warm + trustworthy palette */
      --bg: #FBF8F3;          /* warm ivory */
      --surface: #FFFFFF;     /* cards */
      --ink: #0F172A;         /* navy/ink */
      --muted: #475569;       /* slate */
      --primary: #0F766E;     /* teal 700 (trust) */
      --primary-dark: #0b5e58;
      --accent: #F59E0B;      /* amber 500 (warmth) */
      --line: #E5E7EB;        /* soft borders */
      --success: #059669;     /* signal green */
      --teal-50: #f0fdfa;
      --gray-light: #6B7280;
      --gray-lighter: #9CA3AF;
      --rose-400: #fb7185;
      --amber-400: #fbbf24;
      --emerald-600: #059669;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; 
      font-family: Inter, system-ui, -apple-system, sans-serif;
      color:var(--ink); 
      background:var(--bg);
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; height:auto; display:block}
    
    /* Decorative background */
    .decor{
      position:fixed; inset:0; z-index:-1;
      pointer-events:none; overflow:hidden;
    }
    .decor-circle-1{
      position:absolute; top:-96px; left:-96px;
      width:288px; height:288px; border-radius:50%;
      background:rgba(20,184,166,0.3); filter:blur(60px);
    }
    .decor-circle-2{
      position:absolute; bottom:-96px; right:-96px;
      width:288px; height:288px; border-radius:50%;
      background:rgba(245,158,11,0.4); filter:blur(60px);
    }
    
    /* Layout */
    .container{max-width:1280px; margin:0 auto; padding:0 24px}
    .content-container{max-width:900px;margin:0 auto;padding:32px 24px}
    
    /* Header */
    .header{ 
      position:sticky; top:0; z-index:40;
      backdrop-filter:saturate(140%) blur(10px);
      background:rgba(251,248,243,0.7);
      border-bottom:1px solid rgba(229,231,235,0.6);
    }
    .header-inner{ 
      display:flex; align-items:center; justify-content:space-between;
      height:72px;
    }
    .logo{
      display:flex; align-items:center; gap:8px;
    }
    .logo-icon{
      width:32px; height:32px; border-radius:12px;
      display:block; box-shadow:0 1px 3px rgba(0,0,0,0.12);
    }
    .logo-text{
      font-family:Manrope, Inter; font-weight:700;
      font-size:18px; letter-spacing:0.2px;
    }
    .nav{
      display:none; align-items:center; gap:28px;
    }
    .nav a{
      color:var(--muted); font-weight:500; font-size:14px;
    }
    .nav a:hover{
      color:var(--primary);
    }
    .nav-cta{
      display:flex; gap:12px; align-items:center;
    }
    
    /* Buttons */
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:8px; padding:12px 16px; border-radius:12px;
      font-weight:500; font-size:14px; transition:all .2s;
      cursor:pointer; border:none; font-family:inherit; line-height:1;
    }
    .btn-primary{
      background:var(--primary); color:white;
      box-shadow:0 4px 12px rgba(15,118,110,0.15);
    }
    .btn-primary:hover{
      background:var(--primary-dark);
      transform:translateY(-1px);
    }
    .btn:active{
      transform:translateY(0);
    }
    .btn-secondary{
      background:transparent; color:var(--ink);
      border:1px solid var(--line);
    }
    .btn-secondary:hover{
      background:rgba(0,0,0,0.05);
      box-shadow:0 2px 8px rgba(0,0,0,0.06);
    }
    .btn-ghost{
      background:transparent; color:var(--ink);
      border:1px solid var(--line);
    }
    .btn-ghost:hover{
      background:white;
      box-shadow:0 2px 8px rgba(0,0,0,0.06);
    }
    .icon-sm{width:16px;height:16px}
    
    /* Mobile menu styles */
    .menu-btn {
      display: none;
      background: none;
      border: none;
      padding: 8px;
      cursor: pointer;
      border-radius: 8px;
      transition: background .2s;
    }
    .menu-btn:hover { background: rgba(0,0,0,0.05); }
    .menu-icon { width: 24px; height: 24px; }

    .menu-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 998;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s, visibility .3s;
    }
    .menu-overlay[aria-hidden="false"] {
      opacity: 1;
      visibility: visible;
    }

    .menu-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      width: 280px;
      height: 100%;
      background: white;
      z-index: 999;
      transform: translateX(100%);
      transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow-y: auto;
      box-shadow: -4px 0 24px rgba(0,0,0,0.1);
    }
    .menu-sidebar[aria-hidden="false"] {
      transform: translateX(0);
    }

    .menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--line);
    }

    .menu-close {
      background: none;
      border: none;
      padding: 8px;
      cursor: pointer;
      border-radius: 8px;
      transition: background .2s;
    }
    .menu-close:hover { background: rgba(0,0,0,0.05); }
    .menu-close svg { width: 20px; height: 20px; }

    .menu-nav {
      padding: 20px;
    }
    .menu-nav a {
      display: block;
      padding: 12px 16px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 8px;
      transition: background .2s;
    }
    .menu-nav a:hover {
      background: rgba(0,0,0,0.05);
    }

    .menu-cta {
      padding: 0 20px 20px;
    }

    .btn-block {
      width: 100%;
    }
    
    /* Content */
    .section{padding:40px 0} 
    h1{font-family:Manrope, Inter; font-size:36px;margin:8px 0 12px;letter-spacing:-0.02em}
    h2{font-size:22px;margin:28px 0 12px} 
    p,li{color:var(--muted);line-height:1.7}
    .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
    .muted{color:var(--gray-light);font-size:14px} 
    .pill{display:inline-block;background:rgba(15,118,110,.1);color:var(--primary);padding:2px 8px;border-radius:999px;font-size:12px;margin-left:8px}
    ol{padding-left:18px}
    
    /* Footer */
    .footer{border-top:1px solid var(--line);background:rgba(255,255,255,0.6);padding:40px 0}
    .footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:32px}
    .footer-section h4{font-size:14px;font-weight:600;margin:0 0 12px}
    .footer-links{list-style:none;padding:0;margin:0}
    .footer-links li{margin-bottom:8px}
    .footer-links a{font-size:14px;color:var(--muted)}
    .footer-links a:hover{color:var(--primary)}
    .footer-desc{font-size:14px;color:var(--muted);line-height:1.6;margin-top:12px}
    .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--gray-light)}
    .footer-legal{display:flex;gap:16px}
    .footer-legal a:hover{color:var(--primary)}
    .footer-logo{width:28px;height:28px;display:block;border-radius:8px}
    
    /* Mobile menu styles - same as before */
    .menu-btn { display: none; }
    
    /* Responsive breakpoints */
    @media (max-width: 1024px) {
      .content-container { padding: 32px 20px; }
      h1 { font-size: 32px; }
      h2 { font-size: 20px; }
    }
    
    @media (max-width: 768px){
      .nav, .nav-cta{display:none !important}
      .menu-btn { display: block; }
      
      body { font-size: 15px; }
      h1 { font-size: 28px; }
      h2 { font-size: 18px; }
      
      .content-container { padding: 24px 24px; }
      .section { padding: 32px 0; }
      .card { padding: 20px; }
      
      .footer { padding: 32px 0; }
      .footer-grid { 
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .footer-bottom { 
        flex-direction: column; 
        gap: 12px;
        text-align: center;
      }
      .footer-legal {
        justify-content: center;
      }
    }
    
    @media (max-width: 480px) {
      h1 { font-size: 24px; }
      .pill { display: block; margin: 8px 0 0 0; font-size: 11px; }
      .content-container { padding: 20px 20px; }
    }
    
    @media (min-width: 769px){
      .nav{display:flex}
    }