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

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

    /* --------- BASE --------------------------------------------------------------------------------------------------------------------------------------- */
    html, body { width:100%; height:100%; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; scroll-behavior: smooth; scroll-snap-type: y mandatory; scroll-padding-top: 80px; }

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

    /* --------- GRAIN ------------------------------------------------------------------------------------------------------------------------------------ */
    body::after {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
      opacity:.022; mix-blend-mode:multiply;
      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");
    }

    /* --------- CURSOR REMOVED ------------------------------------------------------------------------------------------------------ */

    /* --------- DECK / SECTIONS ------------------------------------------------------------------------------------------------------ */
    .deck { display: block; }

    /* --------- SLIDES as SECTIONS ------------------------------------------------------------------------------------------ */
    .slide { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:120px 48px; scroll-snap-align: start; border-bottom:1px solid var(--border); opacity:1; transform:none; }
    .parallax { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

    /* --------- TEXT ANIMATIONS ------------------------------------------------------------------------------------------------------ */
    [data-a] { opacity:0; transform:translateY(24px); }
    .reveal [data-a] { animation:fadeUp .88s var(--ease) both; }
    .reveal [data-a="1"] { animation-delay:.1s; }
    .reveal [data-a="2"] { animation-delay:.24s; }
    .reveal [data-a="3"] { animation-delay:.38s; }
    .reveal [data-a="4"] { animation-delay:.52s; }
    .reveal [data-a="5"] { animation-delay:.66s; }
    .reveal [data-a="6"] { animation-delay:.80s; }
    .reveal [data-a="7"] { animation-delay:.94s; }
    .reveal [data-a="8"] { animation-delay:1.08s; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

    /* --------- PRICING CTA ------------------------------------------------------------------------------------------------------------------ */
    .cta-p { display:inline-flex; align-items:center; gap:12px; margin-top:32px; padding:16px 40px; border-radius:100px; background:var(--ink); color:var(--bg); font-weight:600; font-size:16px; text-decoration:none; transition:transform 0.3s var(--ease); }
    .cta-p:hover { transform:translateY(-4px); }

    /* --------- SHARED --------------------------------------------------------------------------------------------------------------------------------- */
    .label { font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:20px; }
    .feat-hl { font-size:clamp(38px,5vw,72px); font-weight:400; line-height:1.1; letter-spacing:-.03em; color:var(--ink); margin-bottom:24px; }
    .feat-body { font-size:clamp(17px,1.6vw,22px); font-weight:400; color:var(--sub); line-height:1.72; }
    .feat-inner { display:grid; grid-template-columns:2fr 3fr; gap:72px; width:100%; max-width:1180px; align-items:center; }

    /* ======================================================
       01 --- COVER
    ====================================================== */
    .s-cover .parallax { flex-direction:column; text-align:center; }
    .cover-brand { font-size:clamp(96px,16vw,210px); font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:.88; margin-bottom:30px; }
    .cover-tag { font-size:clamp(15px,1.5vw,20px); font-weight:300; color:var(--sub); letter-spacing:.1em; margin-bottom:36px; }
    .cover-rule { width:1px; height:44px; background:var(--border2); margin:0 auto 26px; }
    .cover-domain { font-size:12px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); }

    /* ======================================================
       02 --- STATEMENT  (iPod principle: lead with outcome)
    ====================================================== */
    .s-stmt { min-height:55vh !important; padding-top:180px !important; padding-bottom:60px !important; }
    .s-stmt .parallax { justify-content:center; flex-direction:column; align-items:center; gap:0; }
    .stmt-block { text-align:center; max-width:960px; }
    .stmt-line { display:block; font-family:'Urbanist', sans-serif; font-size:clamp(32px,5.5vw,72px); line-height:1.05; letter-spacing:-.04em; }
    .stmt-line--bold { font-weight:800; color:var(--ink); }

    /* --------- AVAARA BACKGROUND --------------------------------------------------------------------- */
    .bg-float-wrap { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; 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%); } }
    
    .stmt-bettter-wrap { display:inline-flex; flex-direction:column; align-items:center; vertical-align:top; }
    .stmt-bettter { display:block; line-height:1; }
    .stmt-subtext { display:block; font-size:clamp(12px, 1.4vw, 18px); font-weight:400; color:var(--dim); letter-spacing:0.02em; margin-top:-2px; text-transform:none; }
    
    .stmt-sub { font-size:clamp(18px,1.8vw,22px); color:var(--sub); line-height:1.6; margin:40px auto 48px; max-width:540px; font-weight:400; }
    
    .stmt-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; }
    .stmt-cta:hover { transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,0.18); }

    /* ======================================================
       02.5 --- IMPACT DATA
    ====================================================== */
    .impact-section { padding:50px 48px; background:var(--ink); color:var(--bg); border-top:1px solid var(--border); }
    .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; } }

    /* ======================================================
       TESTIMONIALS (Headline Style)
    ====================================================== */
    .s-reviews { background:var(--bg2); border-bottom:1px solid var(--border2); display:flex; align-items:center; min-height:auto !important; padding:0 !important; }
    .s-reviews .parallax { flex-direction:column; align-items:flex-start; justify-content:center; padding:80px 48px 60px; width:100%; max-width:1200px; margin:0 auto; }
    
    .review-stage { position:relative; width:100%; min-height:220px; }
    .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;
      position:relative; z-index:1; max-width:900px; margin:0;
    }
    .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); font-family:var(--sans);
    }
    
    .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); }

    /* ======================================================
       03 --- AVATAR LIBRARY
    ====================================================== */
    .s-av { padding:0; }
    .s-av .parallax { position:absolute; top:0; left:0; right:0; height:54%; padding:72px 110px; align-items:flex-start; justify-content:flex-start; }
    .av-copy { max-width:660px; }
    .av-marquee-outer {
      position:absolute; bottom:0; left:0; right:0; height:48%;
      overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:14px; padding-bottom:36px;
      -webkit-mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);
      mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);
    }
    .marquee-row { display:flex; gap:12px; width:max-content; flex-shrink:0; will-change:transform; }
    .marquee-row--fwd { animation:marqueeFwd 55s linear infinite; }
    .marquee-row--rev { animation:marqueeRev 48s linear infinite; }
    @keyframes marqueeFwd { from{transform:translateX(0);} to{transform:translateX(-50%);} }
    @keyframes marqueeRev { from{transform:translateX(-50%);} to{transform:translateX(0);} }
    .av-img { width:88px; height:88px; border-radius:50%; object-fit:cover; object-position:top; border:1.5px solid var(--border2); flex-shrink:0; display:block; }

    /* ======================================================
       04 --- MULTILINGUAL  (word flood --- all words at once)
    ====================================================== */
    .word-flood { display:flex; flex-wrap:wrap; gap:10px 20px; align-content:center; padding:8px 0; }
    .wf-item { font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.1; animation:wfPulse var(--d,3s) var(--dl,0s) cubic-bezier(0.16, 1, 0.3, 1) infinite alternate; }
    .wf-item--lg { font-size:clamp(28px,3.8vw,54px); }
    .wf-item--md { font-size:clamp(20px,2.5vw,36px); }
    .wf-item--sm { font-size:clamp(14px,1.6vw,22px); opacity:.55; }
    @keyframes wfPulse { from{opacity:.22;} to{opacity:1;} }

    /* ======================================================
       05 --- HIGH-END VISUALS  (3-col vertical scroll)
    ====================================================== */
    .photo-scroll-outer {
      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(--bg2);
    }

    /* ======================================================
       06 --- ALLERGEN FILTERING
    ====================================================== */
    .allergen-grid { display:flex; flex-wrap:wrap; gap:10px; }
    .allergen-badge {
      font-size:clamp(13px,1.1vw,16px); font-weight:500; color:var(--text);
      background:var(--bg2); border:1px solid var(--border2);
      border-radius:100px; padding:10px 22px; white-space:nowrap;
    }
    .allergen-badge--on { background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:600; }

    /* ======================================================
       07 --- QR & NFC
    ====================================================== */
    .qr-wrap { display:flex; flex-direction:column; align-items:center; gap:24px; }
    .qr-container { position:relative; display:inline-block; }
    .qr-svg { width:clamp(180px,22vw,256px); height:auto; color:var(--ink); display:block; }
    .qr-svg .qr-bg { fill:var(--bg); }
    .qr-scanline {
      position:absolute; left:8%; right:8%; height:2px;
      background:linear-gradient(to right,transparent,rgba(0,0,0,.25),transparent);
      animation:qrScan 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
      border-radius:1px;
    }
    @keyframes qrScan { 0%{top:8%;opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{top:92%;opacity:0;} }
    .qr-url { font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
    .nfc-badge { display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px solid var(--border2); border-radius:100px; padding:11px 22px; }
    .nfc-icon { width:18px; height:18px; color:var(--sub); }
    .nfc-label { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sub); }

    /* ======================================================
       08 --- WEB & SOCIAL EMBED
    ====================================================== */
    .embed-visual { display:flex; flex-direction:column; gap:12px; }
    .browser-chrome { background:var(--bg2); border:1px solid var(--border2); border-radius:8px; overflow:hidden; }
    .browser-bar { background:var(--bg3); border-bottom:1px solid var(--border); padding:10px 14px; display:flex; align-items:center; gap:7px; }
    .browser-dot { width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0; }
    .browser-url { font-size:11px; font-weight:400; color:var(--dim); margin-left:8px; letter-spacing:.02em; }
    .browser-content { padding:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .mini-item { background:var(--bg3); border-radius:5px; padding:10px 12px; font-size:11px; font-weight:500; color:var(--sub); }
    .code-block { background:var(--bg2); border:1px solid var(--border2); border-radius:6px; padding:16px 20px; font-family:'Courier New',monospace; font-size:13px; color:var(--sub); line-height:1.85; }
    .cm-tag { color:var(--dim); } .cm-attr { color:var(--text); font-weight:600; } .cm-val { color:var(--sub); }

    /* ======================================================
       08 --- FEATURES SHOWCASE
    ====================================================== */
    .s-features .parallax { flex-direction:column; align-items:center; }
    .feat-showcase { width:100%; max-width:900px; }
    .feat-showcase-label { font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:24px; text-align:center; }
    .feat-showcase-hl {
      font-size:clamp(28px,4.5vw,64px); font-weight:800; letter-spacing:-.04em; color:var(--ink);
      line-height:1.05; text-align:center; margin-bottom:64px;
    }
    .feat-list { list-style:none; width:100%; }
    .feat-item {
      display:flex; align-items:center; gap:20px;
      padding:20px 0;
      border-bottom:1px solid var(--border);
      opacity:0; transform:translateX(-30px);
      transition: opacity 0.5s ease, transform 0.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 0.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 0.4s ease 0.2s;
    }
    .feat-item.visible .feat-item-tag { opacity:1; }
    .feat-showcase-foot {
      margin-top:48px; text-align:center;
      display:flex; flex-direction:column; align-items:center; gap:20px;
    }
    .feat-foot-note { font-size:12px; color:var(--dim); letter-spacing:.06em; }

    /* ======================================================
       10 --- EPILOGUE  (editorial + av stream + photos)
    ====================================================== */
    .s-epi .parallax { flex-direction:row; align-items:center; justify-content:space-between; gap:52px; }
    .epi-block { flex:1 1 auto; min-width:0; }
    .epi-tag { font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); margin-bottom:36px; display:block; }
    .epi-line { display:block; font-family:var(--sans); line-height:1.05; letter-spacing:-.03em; }
    .epi-sm   { font-size:clamp(18px,2.2vw,32px); font-weight:200; color:var(--dim); }
    .epi-lg   { font-size:clamp(48px,7.5vw,108px); font-weight:800; color:var(--ink); margin-bottom:8px; }
    .epi-md   { font-size:clamp(24px,3.2vw,48px); font-weight:300; color:var(--text); }
    .epi-it   { font-size:clamp(30px,4.8vw,72px); font-weight:800; font-style:italic; color:var(--ink); }
    .epi-reg  { font-size:clamp(18px,2.4vw,36px); font-weight:400; color:var(--sub); margin-top:4px; }
    /* right side container */
    .epi-right { flex:0 0 420px; display:flex; flex-direction:column; gap:10px; height:440px; }
    .epi-photo-area { display:flex; gap:8px; flex:1; min-height:0; }
    /* avatar stream --- left strip, scrolling down */
    .epi-av-strip {
      width:50px; flex-shrink:0; overflow:hidden;
      -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%);
      mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%);
    }
    .epi-av-stream { display:flex; flex-direction:column; gap:8px; will-change:transform; animation:avDown 10s linear infinite; }
    @keyframes avDown { from{transform:translateY(-50%);} to{transform:translateY(0);} }
    .epi-av-s { width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:top; border:2px solid var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.1); flex-shrink:0; display:block; }
    /* 2x2 photo grid --- clean, no overlays */
    .epi-photos { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .epi-photo { border-radius:8px; object-fit:cover; width:100%; height:100%; display:block; background:var(--bg2); }
    /* language ticker below photos */
    .epi-lang-ticker {
      height:26px; overflow:hidden; flex-shrink:0;
      -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
      mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
    }
    .epi-lang-row { display:flex; gap:24px; will-change:transform; animation:marqueeFwd 22s linear infinite; white-space:nowrap; }
    .epi-lang-w { font-size:13px; font-weight:700; color:var(--dim); letter-spacing:-.01em; flex-shrink:0; }

    /* ======================================================
       11 --- EVENT INTEGRATION
    ====================================================== */
    .event-hub { background:var(--bg2); border:1px solid var(--border2); border-radius:12px; overflow:hidden; }
    .event-hub-hdr { padding:13px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .event-hub-name { font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
    .event-hub-count { font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
    .event-vendors { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; }
    .ev-card { border-radius:8px; overflow:hidden; background:var(--bg3); border:1px solid var(--border); }
    .ev-card-img { width:100%; height:80px; object-fit:cover; display:block; background:var(--bg3); }
    .ev-card-lbl { display:block; padding:8px 10px; font-size:11px; font-weight:600; color:var(--text); }
    .ev-card--you { border:2px solid var(--ink); }
    .ev-card--you .ev-card-lbl { background:var(--ink); color:var(--bg); font-weight:700; }
    .event-hub-ftr { padding:11px 18px; border-top:1px solid var(--border); font-size:11px; font-weight:500; color:var(--dim); letter-spacing:.08em; display:flex; align-items:center; gap:6px; }
    .event-pulse { width:6px; height:6px; border-radius:50%; background:var(--ink); animation:pulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; flex-shrink:0; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }

    /* ======================================================
       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; font-family: var(--sans); }
    .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 0.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; }
    @media (max-width: 768px) {
      .site-footer { padding: 60px 20px 40px; }
      .footer-bottom { flex-direction: column; gap: 32px; }
      .footer-columns { flex-direction: column; gap: 24px; }
    }

    /* ======================================================
       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; gap: 0; }

    /* Floating label field */
    .cf-field {
      position: relative;
      border-bottom: 1px solid var(--ink);
      margin-bottom: 40px;
    }
    .cf-field::after {
      content: '';
      position: absolute;
      bottom: -1px; left: 0;
      width: 0; height: 2px;
      background: var(--ink);
      transition: width 0.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 0.3s cubic-bezier(0.22,1,0.36,1),
                  font-size 0.3s cubic-bezier(0.22,1,0.36,1),
                  color 0.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; justify-content: 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; letter-spacing: .02em;
      font-family: var(--sans);
      cursor: pointer; align-self: flex-start;
      transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
    }
    .cf-submit:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.18); }
    .cf-submit:active { transform: translateY(0); }
    .cf-submit-arrow { transition: transform 0.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; }

    @media (max-width: 768px) {
      .contact-section { padding: 80px 20px 60px; }
      .cf-row { grid-template-columns: 1fr; gap: 0; }
    }

  
        .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;
      }
    }