/* --------- RESET ------------------------------------------------------------------------------------------------ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    a { text-decoration: none; color: inherit; }

    /* --------- TOKENS (identical to vendors page) ------ */
    :root {
      --bg:    #f4f2ee;
      --bg2:   #e8e5de;
      --bg3:   #dedad2;
      --text:  #1d1b18;
      --sub:   #2e2c29;
      --dim:   #6d6960;
      --ink:   #0c0b09;
      --border:  rgba(0,0,0,0.07);
      --border2: rgba(0,0,0,0.13);
      --sans:  'Urbanist', sans-serif;
      --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    html, body {
      width:100%; overflow-x:hidden;
      background:var(--bg); color:var(--text);
      font-family:var(--sans); -webkit-font-smoothing:antialiased;
    }

    /* Grain overlay */
    body::after {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.028;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* --------- HEADER --------------------------------------------------------------------------------------------- */
    .header {
      position:fixed; top:0; left:0; width:100%; height:72px;
      display:flex; align-items:center; justify-content:center;
      z-index:1000; background:rgba(244,242,238,0.88); backdrop-filter:blur(12px);
      border-bottom:1px solid var(--border);
    }
    .nav-logo { font-weight:800; font-size:12px; letter-spacing:0.35em; text-transform:uppercase; color:var(--ink); }
    .nav-logo span { border-bottom:2px solid var(--ink); padding-bottom:2px; }

    /* --------- HERO --------------------------------------------------------------------------------------------------- */
    .hero {
      min-height:60vh; display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      padding:180px 48px 60px; text-align:center;
    }
    
    /* --------- AVAARA BACKGROUND --------------------------------------------------------------------- */
    .bg-float-wrap { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; opacity:0.04; user-select:none; display:flex; flex-direction:column; justify-content:center; }
    .bg-float-track { display:flex; gap:60px; white-space:nowrap; animation:bgMarquee 25s linear infinite; }
    .bg-float-track--reverse { animation-direction:reverse; animation-duration:35s; }
    .bg-float-word { font-family:'Urbanist', sans-serif; font-size:160px; font-weight:900; letter-spacing:-0.04em; color:var(--ink); line-height:1; }
    @keyframes bgMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
    .hero-pre {
      font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
      color:var(--dim); margin-bottom:28px; display:block;
      opacity:0; animation:fadeUp .7s var(--ease) .2s both;
    }
    .hero-h1 {
      font-size:clamp(48px, 7.5vw, 108px); font-weight:800; letter-spacing:-.04em;
      color:var(--ink); line-height:.98; margin-bottom:28px;
      opacity:0; animation:fadeUp .9s var(--ease) .35s both;
    }
    .hero-h1 em { font-style:italic; font-weight:300; color:var(--sub); }
    .hero-sub {
      font-size:clamp(16px,1.6vw,21px); color:var(--dim); max-width:540px;
      line-height:1.7; margin-bottom:48px;
      opacity:0; animation:fadeUp .9s var(--ease) .5s both;
    }
    .hero-cta {
      display:inline-flex; align-items:center; gap:10px;
      padding:16px 40px; border-radius:100px;
      background:var(--ink); color:var(--bg); font-weight:600; font-size:15px;
      transition:transform .35s var(--ease), box-shadow .35s;
      opacity:0; animation:fadeUp .9s var(--ease) .65s both;
    }
    .hero-cta:hover { transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,0.18); }
    @keyframes fadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

    /* --------- SCROLL REVEAL --------------------------------------------------------------------- */
    .reveal { opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* --------- TESTIMONIALS --------------------------------------------------------------------------- */
    .reviews-section { background:var(--bg2); border-top:1px solid var(--border2); border-bottom:1px solid var(--border2); padding:80px 80px 60px; }
    .reviews-inner { max-width:860px; margin:0 auto; }
    .review-mark {
      font-size:clamp(100px,14vw,180px); line-height:.6; font-weight:800;
      color:var(--ink); opacity:.09; user-select:none;
      margin-bottom:-36px;
    }
    .review-stage { position:relative; width:100%; min-height:200px; }
    .review-slide {
      position:absolute; inset:0;
      display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
      opacity:0; transform:translateY(18px);
      transition:opacity .75s cubic-bezier(0.22,1,0.36,1), transform .75s cubic-bezier(0.22,1,0.36,1);
      pointer-events:none;
    }
    .review-slide.active { opacity:1; transform:translateY(0); pointer-events:auto; }
    .review-text {
      font-size:clamp(20px,2.4vw,34px); font-weight:400; font-style:italic;
      color:var(--ink); line-height:1.45; letter-spacing:-.01em;
    }
    .review-text::before { content:'\201C'; }
    .review-text::after  { content:'\201D'; }
    .review-underline {
      display:block; height:1.5px; background:var(--ink); opacity:.22;
      margin:22px 0 18px;
      width:0; transition:width 1s cubic-bezier(0.22,1,0.36,1) .3s;
    }
    .review-slide.active .review-underline { width:60px; }
    .review-author { font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
    .review-dots { display:flex; gap:10px; margin-top:44px; }
    .rdot {
      width:6px; height:6px; border-radius:50%;
      background:var(--dim); opacity:.25;
      border:none; cursor:pointer; padding:0;
      transition:opacity .3s, transform .3s;
    }
    .rdot.active { opacity:1; background:var(--ink); transform:scale(1.4); }

    /* --------- EMOJI MARQUEE --------------------------------------------------------------------- */
    .emoji-section {
      overflow:hidden; padding:30px 0;
      background:var(--bg3); border-bottom:1px solid var(--border2);
    }
    .emoji-track-wrap {
      display:flex; align-items:center; gap:40px;
      animation:marqueeFwd 22s linear infinite;
      white-space:nowrap; width:max-content;
    }
    .emoji-item { font-size:34px; line-height:1; flex-shrink:0; }
    @keyframes marqueeFwd { from{transform:translateX(0);} to{transform:translateX(-50%);} }

    /* --------- IMPACT SECTION --------------------------------------------------------------- */
    .impact-section { padding:50px 48px; background:var(--ink); color:var(--bg); }
    .impact-inner { max-width:1200px; margin:0 auto; text-align:center; }
    .impact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-bottom:56px; }
    .impact-item { display:flex; flex-direction:column; align-items:center; justify-content:center; }
    .impact-num { font-size:clamp(40px,5vw,72px); font-weight:800; color:var(--bg); line-height:1; letter-spacing:-.03em; margin-bottom:12px; }
    .impact-num sup { font-size:0.5em; vertical-align:top; top:-0.2em; position:relative; }
    .impact-txt { font-size:13px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:0.12em; max-width:180px; line-height:1.4; opacity:0.8; }
    @media (max-width:900px) { .impact-grid { grid-template-columns:repeat(2,1fr); gap:32px; } }
    @media (max-width:500px) { .impact-grid { grid-template-columns:1fr; } }

    /* --------- SPLIT SECTION --------------------------------------------------------------------- */
    .split-section { display:flex; align-items:stretch; border-bottom:1px solid var(--border2); }
    .split-copy {
      flex:0 0 50%; padding:100px 80px;
      display:flex; flex-direction:column; justify-content:center;
    }
    .label { font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:24px; }
    .feat-hl {
      font-size:clamp(32px,4vw,56px); font-weight:800; letter-spacing:-.03em;
      color:var(--ink); line-height:1.07; margin-bottom:24px;
    }
    .feat-body { font-size:clamp(16px,1.5vw,20px); color:var(--sub); line-height:1.75; max-width:420px; }
    .split-pill-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
    .split-pill {
      font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
      padding:8px 18px; border:1.5px solid var(--ink); border-radius:100px; color:var(--ink);
    }

    /* --------- SCROLLING MASONRY PHOTOS --------------------------------------- */
    .split-visual {
      flex:0 0 50%; background:var(--bg2); display:flex; align-items:center;
      justify-content:center; padding:60px 40px; border-left:1px solid var(--border2);
      overflow:hidden;
    }
    .photo-scroll-outer {
      width:100%; height:min(500px, 62vh); overflow:hidden;
      display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-radius:8px;
    }
    .photo-scroll-col { display:flex; flex-direction:column; gap:10px; will-change:transform; }
    .photo-scroll-col--up   { animation:photoUp 18s linear infinite; }
    .photo-scroll-col--down { animation:photoDown 22s linear infinite; }
    @keyframes photoUp   { from{transform:translateY(0);} to{transform:translateY(-50%);} }
    @keyframes photoDown { from{transform:translateY(-50%);} to{transform:translateY(0);} }
    .photo-scroll-img {
      width:100%; height:180px; object-fit:cover; object-position:center;
      border-radius:6px; display:block; flex-shrink:0; background:var(--bg3);
    }
    .food-card-img { width:100%; height:200px; object-fit:cover; background:var(--bg2); font-size:88px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .food-card-body { padding:20px 22px; flex:1; }
    .food-card-name { font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin-bottom:6px; }
    .food-card-desc { font-size:13px; color:var(--dim); line-height:1.55; margin-bottom:12px; }
    .food-card-pills { display:flex; gap:6px; flex-wrap:wrap; }
    .food-card-pill { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:100px; background:var(--bg3); color:var(--dim); }
    .food-card-price { font-size:16px; font-weight:800; color:var(--ink); margin-top:10px; }

    /* --------- FEATURES LIST --------------------------------------------------------------------- */
    .features-section { padding:120px 80px; max-width:1100px; margin:0 auto; }
    .feat-eyebrow { font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:24px; text-align:center; }
    .feat-hl-main {
      font-size:clamp(32px,4.5vw,64px); font-weight:800; letter-spacing:-.04em; color:var(--ink);
      line-height:1.05; text-align:center; margin-bottom:72px;
    }
    .feat-list { list-style:none; width:100%; }
    .feat-item {
      display:flex; align-items:center; gap:20px;
      padding:22px 0; border-bottom:1px solid var(--border);
      opacity:0; transform:translateX(-30px);
      transition:opacity .5s ease, transform .5s ease;
    }
    .feat-item:first-child { border-top:1px solid var(--border); }
    .feat-item.visible { opacity:1; transform:translateX(0); }
    .feat-item-num { font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--dim); min-width:28px; flex-shrink:0; }
    .feat-item-bar { width:0; height:1px; background:var(--ink); flex-shrink:0; transition:width .6s ease; }
    .feat-item.visible .feat-item-bar { width:40px; }
    .feat-item-text { font-size:clamp(18px,2.2vw,28px); font-weight:400; color:var(--text); letter-spacing:-.01em; line-height:1.2; }
    .feat-item-tag {
      margin-left:auto; flex-shrink:0;
      font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
      color:var(--dim); background:var(--bg2); border:1px solid var(--border2);
      padding:5px 12px; border-radius:100px;
      opacity:0; transition:opacity .4s ease .2s;
    }
    .feat-item.visible .feat-item-tag { opacity:1; }
    .feat-cta-row { margin-top:56px; text-align:center; }
    .feat-cta {
      display:inline-flex; align-items:center; gap:12px;
      padding:16px 40px; border-radius:100px;
      background:var(--ink); color:var(--bg); font-weight:600; font-size:16px;
      text-decoration:none; transition:transform .3s var(--ease);
    }
    .feat-cta:hover { transform:translateY(-4px); }

    /* --------- CONTACT FORM --------------------------------------------------------------------------- */
    .contact-section { padding:120px 48px 100px; background:var(--bg); border-top:1px solid var(--border); scroll-snap-align: start; }
    .contact-inner { max-width:800px; margin:0 auto; }
    .contact-eyebrow { font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:20px; }
    .contact-headline { font-size:clamp(36px,5vw,72px); font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:1.0; margin-bottom:16px; }
    .contact-sub { font-size:17px; color:var(--sub); line-height:1.7; margin-bottom:64px; max-width:480px; }
    .contact-form { display:flex; flex-direction:column; }
    .cf-field { position:relative; border-bottom:1.5px solid var(--ink); margin-bottom:40px; }
    .cf-field::after {
      content:''; position:absolute; bottom:-1.5px; left:0;
      width:0; height:2px; background:var(--ink);
      transition:width .45s cubic-bezier(0.22,1,0.36,1);
    }
    .cf-field:focus-within::after { width:100%; }
    .cf-field input, .cf-field textarea {
      width:100%; background:transparent; border:none; outline:none;
      padding:22px 0 8px; font-size:18px; font-weight:400; color:var(--ink);
      font-family:var(--sans); line-height:1.4; resize:none;
    }
    .cf-field textarea { min-height:120px; }
    .cf-label {
      position:absolute; top:22px; left:0;
      font-size:14px; font-weight:500; color:var(--dim); pointer-events:none;
      transition:top .3s var(--ease), font-size .3s var(--ease), color .3s;
    }
    .cf-field input:focus ~ .cf-label,
    .cf-field input:not(:placeholder-shown) ~ .cf-label,
    .cf-field textarea:focus ~ .cf-label,
    .cf-field textarea:not(:placeholder-shown) ~ .cf-label {
      top:4px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
    }
    .cf-row { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
    .cf-submit {
      display:inline-flex; align-items:center; gap:12px;
      margin-top:8px; padding:18px 48px;
      background:var(--ink); color:var(--bg);
      border:none; border-radius:100px;
      font-size:15px; font-weight:600; font-family:var(--sans); cursor:pointer; align-self:flex-start;
      transition:transform .35s var(--ease), box-shadow .35s;
    }
    .cf-submit:hover { transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,0.18); }
    .cf-submit-arrow { transition:transform .3s; }
    .cf-submit:hover .cf-submit-arrow { transform:translateX(5px); }
    .cf-sent-msg {
      display:none; margin-top:32px; font-size:15px; font-weight:500; color:var(--ink);
      padding:20px 28px; border:1px solid var(--border2); border-radius:12px; background:var(--bg2);
    }
    .cf-sent-msg.visible { display:block; }

    /* --------- FOOTER --------------------------------------------------------------------------------------------- */
    .site-footer { padding:80px 48px 60px; background:var(--bg); border-top:1px solid var(--border); scroll-snap-align: start; }
    .footer-tagline { font-size:18px; font-weight:400; color:var(--sub); text-align:center; margin-bottom:24px; }
    .footer-brand { font-weight:800; font-size:clamp(60px,10vw,140px); letter-spacing:0.06em; line-height:1; color:var(--ink); margin-bottom:60px; user-select:none; text-align:center; }
    .footer-bottom { display:flex; justify-content:space-between; align-items:flex-start; padding-top:40px; border-top:1px solid var(--border2); }
    .footer-logo-mark { font-weight:800; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; line-height:1.4; color:var(--ink); }
    .footer-columns { display:flex; gap:80px; }
    .footer-col h4 { font-weight:700; font-size:13px; color:var(--ink); margin-bottom:16px; }
    .footer-col a { display:block; font-size:14px; font-weight:400; color:var(--sub); margin-bottom:10px; text-decoration:none; transition:color .2s; }
    .footer-col a:hover { color:var(--ink); }
    .footer-copy { font-size:12px; color:var(--dim); text-align:center; padding:24px 48px 40px; background:var(--bg); scroll-snap-align: start; }

    /* --------- RESPONSIVE --------------------------------------------------------------------------------- */
    @media (max-width:900px) {
      .split-section { flex-direction:column; }
      .split-copy { padding:60px 32px; }
      .split-visual { border-left:none; border-top:1px solid var(--border2); padding:60px 32px; }
      .features-section { padding:80px 32px; }
      .reviews-section { padding:60px 24px 48px; }
      .cf-row { grid-template-columns:1fr; gap:0; }
      .footer-bottom { flex-direction:column; gap:32px; }
      .footer-columns { flex-direction:column; gap:24px; }
      .contact-section { padding:80px 24px 60px; }
      .site-footer { padding:60px 24px 40px; }
    }
    @media (max-width:600px) {
      .hero { padding:120px 24px 60px; }
      .card-stack { width:260px; height:340px; }
      .hero-h1 { font-size:clamp(40px,12vw,72px); }
    }
  
        .lang-switcher {
            display: flex;
            gap: 6px;
        }

        .lang-btn {
            background: none;
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            padding: 4px 8px;
            border-radius: 6px;
            text-decoration: none;
            transition: all .2s;
        }

        .lang-btn:hover,
        .lang-btn.active {
            background: var(--off-white);
            color: var(--black);
        }

    
    /* Back Button Style */
    .back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--black, #000);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        margin-right: 12px;
        z-index: 1001;
    }
    .back-btn:hover {
        background: rgba(0,0,0,0.05);
    }
    .back-btn svg {
        width: 20px;
        height: 20px;
    }

    
    /* Beautiful Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #f9f9f9;
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background: #d1d1d1;
        border-radius: 10px;
        border: 2px solid #f9f9f9;
        transition: all 0.3s ease;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #000;
    }
        /* --- ACCESSIBILITY --- */
    :focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }

    html {
        scroll-behavior: smooth;
    }

    
    /* ===================================
       MOBILE RESPONSIVE --- Global Block
       Targets: 768px and below
    =================================== */

    /* NAV: Global Mobile */
    @media (max-width: 768px) {
      .nav {
        padding: 0 20px !important;
        height: 52px !important;
      }
      .nav-logo, .nav-logo-line {
        font-size: 10px !important;
        letter-spacing: 0.25em !important;
      }
      .nav-right .lang-switcher {
        display: none !important;
      }
      .nav-right .nav-link:not(:last-child) {
        display: none !important;
      }
    }

    /* HERO: index.html */
    @media (max-width: 768px) {
      .hero {
        padding: 80px 24px 60px !important;
        text-align: center !important;
      }
      .hero h1 {
        font-size: clamp(44px, 12vw, 80px) !important;
        letter-spacing: -2px !important;
      }
      .hero-sub {
        font-size: 16px !important;
        max-width: 100% !important;
      }
      .hero-cta {
        width: 100% !important;
        justify-content: center !important;
        padding: 16px 24px !important;
      }
      .hero-letters { opacity: 0.4 !important; }
    }

    /* PRODUCT PAGES: Feature Sections */
    @media (max-width: 768px) {
      .feat-inner {
        flex-direction: column !important;
        gap: 32px !important;
        padding: 48px 24px !important;
      }
      .feat-hl {
        font-size: clamp(30px, 9vw, 52px) !important;
        letter-spacing: -1px !important;
      }
      .feat-body {
        font-size: 16px !important;
      }
      .feat-visual-box {
        width: 100% !important;
        max-width: 100% !important;
      }
      .feat-phone, .feat-phone-img {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
      }
    }

    /* WHO WE SERVE / Serve Grid */
    @media (max-width: 768px) {
      .serve-section { padding: 60px 24px !important; }
      .serve-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .serve-intro h2 {
        font-size: clamp(28px, 8vw, 42px) !important;
      }
    }

    /* STATEMENT */
    @media (max-width: 768px) {
      .statement {
        padding: 60px 24px !important;
        font-size: clamp(22px, 7vw, 36px) !important;
      }
      .statement h2 {
        font-size: clamp(22px, 7vw, 36px) !important;
      }
    }

    /* PRICING PAGES */
    @media (max-width: 768px) {
      .pricing-grid, .plans-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }
      .pricing-card, .plan-card {
        padding: 32px 24px !important;
      }
      .gateway-card {
        padding: 40px 24px !important;
      }
      .gateway-card h2 {
        font-size: clamp(28px, 8vw, 48px) !important;
      }
    }

    /* BLOG GRID */
    @media (max-width: 768px) {
      .blog-grid, .posts-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .blog-hero, .blog-header {
        padding: 60px 24px 32px !important;
      }
      .blog-hero h1, .blog-header h1 {
        font-size: clamp(32px, 9vw, 56px) !important;
      }
    }

    /* BLOG POST / ARTICLE */
    @media (max-width: 768px) {
      .post-hero {
        padding: 60px 24px 32px !important;
      }
      .post-hero h1, .post-title {
        font-size: clamp(26px, 7vw, 44px) !important;
        letter-spacing: -0.5px !important;
      }
      .post-body {
        padding: 32px 24px !important;
        font-size: 16px !important;
        line-height: 1.75 !important;
      }
      .related-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
    }

    /* AUTH PAGES (Signup / Login) */
    @media (max-width: 768px) {
      .auth-form-wrapper {
        padding: 48px 20px 32px !important;
      }
      .auth-header h1 {
        font-size: 28px !important;
      }
      .form-row {
        flex-direction: column !important;
        gap: 0 !important;
      }
      .back-btn {
        top: 14px !important;
        left: 16px !important;
        font-size: 13px !important;
      }
      .auth-nav {
        font-size: 13px !important;
        top: 16px !important;
        right: 16px !important;
      }
    }

    /* ABOUT PAGE */
    @media (max-width: 768px) {
      .about-hero {
        padding: 80px 24px 48px !important;
      }
      .about-hero h1 {
        font-size: clamp(36px, 10vw, 64px) !important;
      }
      .about-grid, .values-grid, .team-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .about-section, .values-section {
        padding: 60px 24px !important;
      }
    }

    /* LEGAL PAGES (Terms / Privacy) */
    @media (max-width: 768px) {
      .legal-hero {
        padding: 60px 24px 32px !important;
      }
      .legal-body, .doc-body, .legal-content {
        padding: 32px 24px !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
      }
    }

    /* CONTACT FORM (index.html) */
    @media (max-width: 768px) {
      .contact-section, .cf-section {
        padding: 60px 24px !important;
      }
      .cf-grid, .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
      }
    }

    /* FOOTER */
    @media (max-width: 768px) {
      .footer-section {
        padding: 60px 24px 40px !important;
      }
      .footer-columns {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
      }
      .footer-brand {
        font-size: clamp(40px, 14vw, 80px) !important;
      }
      .footer-tagline {
        font-size: 14px !important;
      }
    }

    /* 404 PAGE */
    @media (max-width: 768px) {
      .error-page, .not-found {
        padding: 80px 24px !important;
        text-align: center !important;
      }
    }

    /* ACCOUNT PAGE */
    @media (max-width: 768px) {
      .account-layout, .dashboard-layout {
        flex-direction: column !important;
        gap: 24px !important;
      }
      .account-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--gray-200) !important;
      }
    }

    /* Very small phones */
    @media (max-width: 400px) {
      .hero h1 {
        font-size: 38px !important;
      }
      .nav-right .nav-link {
        font-size: 13px !important;
      }
      .footer-columns {
        grid-template-columns: 1fr !important;
      }
    }