/* Generated by build.py — edit src/css/base.css and src/css/app.css */
.skip-link { position: absolute; top: -40px; left: 0; background: var(--emerald); color: var(--navy); padding: 8px 16px; font-size: 14px; font-weight: 600; z-index: 9999; text-decoration: none; border-radius: 0 0 4px 0; transition: top 0.2s; }
.skip-link:focus { top: 0; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
  --navy: #0F172A; --navy-2: #131C2E; --slate: #334155; --emerald: #10B981;
  --emerald-dk: #059669; --white: #FFFFFF; --mid: #CBD5E1;
  --muted: #64748B; --border: rgba(203,213,225,0.08);
  --inter: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}
body { font-family: var(--inter); background: var(--navy); color: var(--white); overflow-x: hidden; line-height: 1.6; }
/* noise overlay removed — SVG filter on fixed element caused layout repaints */

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px 52px; display: flex; align-items: center; justify-content: space-between; transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
nav.scrolled { background: rgba(15,23,42,0.94); backdrop-filter: blur(16px); border-color: var(--border); }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo svg { width: 20px; height: 33px; }
.nav-wordmark { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--white); text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--white); }
.nav-cta { font-family: var(--mono) !important; font-size: 12px !important; color: var(--emerald) !important; border: 1px solid rgba(16,185,129,0.35) !important; padding: 8px 18px; border-radius: 4px; transition: background 0.2s, border-color 0.2s !important; }
.nav-cta:hover { background: rgba(16,185,129,0.07) !important; border-color: var(--emerald) !important; }


/* HAMBURGER */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--mid); margin: 4px 0; transition: transform 0.3s, opacity 0.3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
.mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(15,23,42,0.98); backdrop-filter: blur(24px); flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 20px; color: var(--mid); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.mobile-menu a:hover { color: var(--white); }
.mobile-menu .nav-cta { font-size: 14px !important; margin-top: 16px; }

/* HERO */
#hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 140px 52px 80px; position: relative; overflow: hidden; }
#hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(203,213,225,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(203,213,225,0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; }
.hero-glow { position: absolute; width: 700px; height: 700px; background: radial-gradient(circle, rgba(16,185,129,0.07) 0%, transparent 68%); top: -80px; right: -120px; pointer-events: none; }
.hero-inner { max-width: 820px; position: relative; z-index: 2; }
.eyebrow { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--emerald); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 32px; display: flex; align-items: center; gap: 14px; opacity: 0; animation: up 0.5s ease 0.05s forwards; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--emerald); }
h1 { font-size: clamp(48px, 7vw, 84px); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 28px; opacity: 0; animation: up 0.6s ease 0.1s forwards; }
.em { color: var(--emerald); }
.hero-desc { font-size: clamp(16px, 2vw, 18px); font-weight: 300; color: var(--mid); max-width: 520px; margin-bottom: 44px; line-height: 1.7; opacity: 0; animation: up 0.6s ease 0.2s forwards; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; opacity: 0; animation: up 0.6s ease 0.3s forwards; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 14px 28px; border-radius: 6px; text-decoration: none; letter-spacing: 0.01em; transition: all 0.2s; }
.btn-primary { background: var(--emerald); color: var(--navy); }
.btn-primary:hover { background: var(--emerald-dk); transform: translateY(-1px); }
.btn-ghost { font-weight: 400; color: var(--mid); font-family: var(--mono); font-size: 13px; padding: 0; }
.btn-ghost::after { content: '→'; transition: transform 0.2s; }
.btn-ghost:hover { color: var(--white); }
.btn-ghost:hover::after { transform: translateX(5px); }

/* ROTATING WORD */
.rotating-word { display: inline-block; position: relative; color: var(--emerald); overflow: visible; vertical-align: baseline; min-width: 280px; padding-bottom: 8px; }
.rotating-word .word { display: block; opacity: 0; transform: translateY(100%); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1); position: absolute; left: 0; white-space: nowrap; }
.rotating-word .word.active { opacity: 1; transform: translateY(0); position: relative; }
.rotating-word .word.exit { opacity: 0; transform: translateY(-100%); position: absolute; }

/* SECTIONS */
section { padding: 108px 52px; }
.inner { max-width: 1100px; margin: 0 auto; }
.sec-label { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--emerald); letter-spacing: 0.16em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.sec-label::before { content: ''; width: 22px; height: 1px; background: var(--emerald); }
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px; }
.sec-desc { font-size: 15.5px; color: var(--muted); max-width: 500px; margin-bottom: 60px; line-height: 1.7; }

/* TRUST STRIP — immediately after hero */
#trust-strip { padding: 48px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); }
.marquee-wrap { overflow: hidden; position: relative; }
.marquee-wrap::before, .marquee-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--navy), transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(to left, var(--navy), transparent); }
.marquee-track { display: flex; gap: 10px; width: max-content; animation: marquee-ltr 30s linear infinite; will-change: transform; }
.marquee-track.rtl { animation: marquee-rtl 34s linear infinite; margin-top: 10px; will-change: transform; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.logo-pill { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); transition: border-color 0.2s, background 0.2s; cursor: default; flex-shrink: 0; }
.logo-pill:hover { border-color: rgba(16,185,129,0.22); background: rgba(16,185,129,0.03); }
.lico { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; overflow: hidden; background: rgba(255,255,255,0.06); }
.lico img { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }
.lico img.no-invert { filter: none; }
.lico img.invert { filter: brightness(0) invert(1); opacity: 0.85; }
.lp { background: rgba(226,201,126,0.12); } .lb { background: rgba(16,185,129,0.12); }
.lpc { background: rgba(148,163,184,0.12); } .lw { background: rgba(59,130,246,0.12); }
.lwt { background: rgba(52,211,153,0.12); } .lq { background: rgba(167,139,250,0.12); }
.ld { background: rgba(251,146,60,0.12); } .li { background: rgba(248,113,113,0.12); }
.pill-name { font-size: 13px; font-weight: 500; color: var(--mid); white-space: nowrap; }
.pill-sub { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.05em; white-space: nowrap; }

/* PROBLEM */
#problem { border-top: 1px solid var(--border); }
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.prob { background: var(--navy); padding: 40px 36px; }
.prob-icon { margin-bottom: 20px; display: block; width: 28px; height: 28px; }
.prob h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--white); letter-spacing: -0.01em; }
.prob p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

/* SERVICES */
#services { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.svc { background: var(--navy); padding: 40px 34px; position: relative; transition: background 0.25s; }
.svc:hover { background: rgba(16,185,129,0.035); }
.svc::before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 0; background: var(--emerald); transition: height 0.3s ease; }
.svc:hover::before { height: 100%; }
.svc-num { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 22px; }
.svc h3 { font-size: 17px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.01em; }
.svc p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.svc-tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-family: var(--mono); font-size: 10px; color: var(--emerald); background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.18); padding: 3px 9px; border-radius: 3px; letter-spacing: 0.04em; }

/* PROOF / MINI CASE STUDIES */
#proof { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(16,185,129,0.03) 0%, var(--navy) 100%); }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.proof-card { border: 1px solid var(--border); border-radius: 10px; padding: 36px; background: var(--navy); position: relative; overflow: hidden; }
.proof-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--emerald); opacity: 0; transition: opacity 0.3s; }
.proof-card:hover::before { opacity: 1; }
.proof-client { font-family: var(--mono); font-size: 10px; color: var(--emerald); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.proof-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.proof-card p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.proof-metric { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--emerald); padding: 6px 12px; border: 1px solid rgba(16,185,129,0.2); border-radius: 4px; background: rgba(16,185,129,0.05); }

/* PROCESS */
#process { border-top: 1px solid var(--border); }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.step { background: var(--navy); padding: 44px 36px; }
.step-num { font-family: var(--mono); font-size: 11px; color: var(--emerald); letter-spacing: 0.1em; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; }
.step-num::after { content: ''; flex: 1; height: 1px; background: rgba(16,185,129,0.2); }
.step h3 { font-size: 18px; font-weight: 600; margin-bottom: 14px; letter-spacing: -0.01em; }
.step p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

/* WHY NATIVIA */
#why { border-top: 1px solid var(--border); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.why-card { background: var(--navy); padding: 44px 40px; }
.why-card.featured { background: rgba(16,185,129,0.04); grid-column: 1 / -1; display: flex; align-items: center; gap: 64px; padding: 52px 48px; }
.why-card.featured .why-num { font-size: 72px; font-weight: 700; color: var(--emerald); opacity: 0.12; line-height: 1; flex-shrink: 0; font-family: var(--mono); letter-spacing: -0.04em; }
.why-num-small { font-family: var(--mono); font-size: 10.5px; color: var(--emerald); letter-spacing: 0.1em; margin-bottom: 16px; }
.why-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.01em; }
.why-card p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.why-card .why-body h3 { font-size: 20px; }
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } .why-card.featured { flex-direction: column; gap: 16px; } .why-card.featured .why-num { font-size: 48px; } }

/* FOUNDER */
#founder { border-top: 1px solid var(--border); }
.founder-layout { display: flex; align-items: center; gap: 56px; }
.founder-avatar { width: 80px; height: 80px; border-radius: 50%; background: rgba(16,185,129,0.1); border: 2px solid rgba(16,185,129,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 24px; font-weight: 700; color: var(--emerald); }
.founder-text h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.founder-text .founder-role { font-family: var(--mono); font-size: 12px; color: var(--emerald); letter-spacing: 0.06em; margin-bottom: 16px; }
.founder-text p { font-size: 14px; color: var(--muted); line-height: 1.75; max-width: 600px; }
@media (max-width: 768px) { .founder-layout { flex-direction: column; align-items: flex-start; gap: 24px; } }

/* FAQ */
#faq { border-top: 1px solid var(--border); }
.faq-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.faq-intro h2 { margin-bottom: 16px; }
.faq-intro p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 28px; }
.faq-contact { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--emerald); text-decoration: none; border: 1px solid rgba(16,185,129,0.3); padding: 10px 16px; border-radius: 6px; transition: background 0.2s; }
.faq-contact:hover { background: rgba(16,185,129,0.07); }
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.faq-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.02); }
.faq-q { width: 100%; background: none; border: none; color: var(--white); font-family: var(--inter); font-size: 15px; font-weight: 500; padding: 22px 24px; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: color 0.2s; letter-spacing: -0.01em; }
.faq-q:hover { color: var(--emerald); }
.faq-icon { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s; color: var(--muted); line-height: 1; position: relative; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; transition: opacity 0.2s, transform 0.3s; }
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 10px; }
.faq-item.open .faq-icon { border-color: var(--emerald); color: var(--emerald); }
.faq-item.open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-a p { padding: 0 24px 22px; font-size: 14px; color: var(--muted); line-height: 1.75; border-top: 1px solid var(--border); padding-top: 18px; margin-top: -1px; }
.faq-item.open .faq-a { max-height: 300px; }
@media (max-width: 768px) { .faq-layout { grid-template-columns: 1fr; gap: 40px; } }

/* CTA */
#cta { border-top: 1px solid var(--border); background: rgba(16,185,129,0.03); }
.cta-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.cta-wrap h2 { margin-bottom: 18px; }
.cta-wrap > p { font-size: 16px; color: var(--muted); margin-bottom: 44px; line-height: 1.7; }
.cta-actions { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-email { font-family: var(--mono); font-size: 12px; color: var(--mid); text-decoration: none; transition: color 0.2s; }
.cta-email:hover { color: var(--white); }

/* FOOTER */
footer { padding: 28px 52px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.ft-left { display: flex; align-items: center; gap: 12px; }
.ft-copy { font-size: 12px; color: var(--muted); }
.ft-quote { font-size: 11px; font-style: italic; color: var(--muted); opacity: 0.5; }

@keyframes up { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 768px) {
  nav { padding: 18px 24px; }
  .nav-links { display: none; }
  .hamburger { display: block; }
  #hero, section, footer { padding-left: 24px; padding-right: 24px; }
}

/* =========================================================================
   app.css — additions on top of base.css
   Constraints: no new colours, no new fonts, no decorative gradients.
   Everything below reuses the existing custom properties.
   ========================================================================= */

/* --- PRELOADER ---------------------------------------------------------- */
/* The fade-out is a CSS animation, not a JS one: if the script never runs the
   overlay still clears itself. site.js only cuts it short once the page is up. */
.preloader { position: fixed; inset: 0; z-index: 9999; background: var(--navy);
             display: flex; align-items: center; justify-content: center;
             animation: preloader-out 0.5s ease 1.5s forwards; }
.preloader.done { animation: none; opacity: 0; visibility: hidden;
                  transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
/* Already seen this session, or reduced motion: no fade at all, just gone. */
.preloader.skip { display: none; }
@keyframes preloader-out { to { opacity: 0; visibility: hidden; } }

.preloader svg { width: 42px; height: 69px; overflow: visible; }
.preloader svg line, .preloader svg path {
  stroke-dasharray: 130; stroke-dashoffset: 130;
  animation: mark-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.preloader svg path { animation-delay: 0.1s; }
.preloader svg line:last-of-type { animation-delay: 0.2s; }
.preloader svg circle { opacity: 0; animation: mark-dot 0.3s ease 0.85s forwards; }
@keyframes mark-draw { to { stroke-dashoffset: 0; } }
@keyframes mark-dot { to { opacity: 1; } }

/* --- CURSOR ------------------------------------------------------------- */
/* An outline of the system pointer, trailing just behind the real one — it reads
   as a halo traced around the cursor rather than a second object chasing it.
   Additive: the native cursor stays visible, so clicks never lag the target. */
.cursor-echo { position: fixed; top: 0; left: 0; width: 18px; height: 24px;
               pointer-events: none; z-index: 9998; opacity: 0;
               will-change: transform; transition: opacity 0.25s ease; }
.cursor-echo.on { opacity: 1; }
.cursor-echo svg { display: block; width: 100%; height: 100%; overflow: visible;
                   transform: scale(1.25); transform-origin: 1px 1px;
                   transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.cursor-echo path { fill: none; stroke: rgba(16,185,129,0.5); stroke-width: 1.4;
                    stroke-linejoin: round; transition: stroke 0.2s, fill 0.2s; }
.cursor-echo.hot svg { transform: scale(2); }
.cursor-echo.hot path { stroke: var(--emerald); fill: rgba(16,185,129,0.1); }
.cursor-echo.press svg { transform: scale(1.05); }

/* --- PAGE TRANSITION ---------------------------------------------------- */
/* Cross-fade between the English and French documents where supported. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

/* --- LANGUAGE SWITCH ---------------------------------------------------- */
.lang-switch { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }
.lang-switch a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.lang-switch a:hover { color: var(--white); }
.lang-switch a[aria-current="true"] { color: var(--emerald); }
.lang-switch span { color: var(--border); }
.mobile-menu .lang-switch { font-size: 14px; gap: 10px; }

/* --- HERO GLOBE --------------------------------------------------------- */
/* Mobile / narrow: the globe sits in flow underneath the hero copy.
   Desktop: it is pinned to the right of the hero, text keeps its own column. */
.hero-globe { position: relative; z-index: 1; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 56px auto 0; touch-action: pan-y; cursor: grab; }
.hero-globe:active { cursor: grabbing; }
.hero-globe canvas { width: 100%; height: 100%; display: block; }
.hero-globe[hidden] { display: none; }

@media (min-width: 1080px) {
  #hero { padding-right: 48vw; }
  .hero-globe { position: absolute; top: 50%; right: -2vw; margin: 0;
                width: min(50vw, 700px); max-width: none; transform: translateY(-50%); }
  /* The globe takes roughly half the hero, so the headline gets a smaller
     ceiling than the full-width original — otherwise long lines (and the
     French headline in particular) wrap in the middle of a phrase. */
  h1 { font-size: clamp(44px, 4.7vw, 68px); }
}
@media (min-width: 1600px) {
  #hero { padding-right: 760px; }
  .hero-globe { right: 0; }
  h1 { font-size: 72px; }
}

/* --- PROOF: CASE STUDY ROWS --------------------------------------------- */
/* Four text-only case studies. A carousel would have hidden half of them behind
   an interaction for no visual payoff, so they read as an editorial list: a
   narrow identity column, the story beside it, outcome and store links in the
   footer of each row. */
/* The row is pulled out by its own padding so the text still lines up with the
   rest of the section, while the hover band and the rules breathe past it. */
.proof-list { list-style: none; margin: 8px -28px 0; border-top: 1px solid var(--border); }
.proof-row { display: grid; grid-template-columns: 230px 1fr; gap: 56px;
             padding: 44px 28px; border-bottom: 1px solid var(--border);
             border-radius: 4px; transition: background 0.3s; }
.proof-row:hover { background: rgba(16,185,129,0.02); }

.proof-index { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
               color: var(--muted); display: block; margin-bottom: 18px;
               transition: color 0.25s; }
.proof-row:hover .proof-index { color: var(--emerald); }
.proof-brand { font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
               margin-bottom: 8px; }
.proof-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
              text-transform: uppercase; color: var(--muted); line-height: 1.7; }

.proof-body { max-width: 760px; }
.proof-lead { font-size: 17px; font-weight: 500; letter-spacing: -0.015em;
              line-height: 1.45; margin-bottom: 14px; max-width: 46ch; }
.proof-detail { font-size: 13.5px; color: var(--muted); line-height: 1.75; max-width: 62ch; }

.proof-foot { display: flex; align-items: center; justify-content: space-between;
              flex-wrap: wrap; gap: 20px; margin-top: 28px; padding-top: 24px;
              border-top: 1px solid var(--border); }

.proof-apps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.proof-apps a { display: inline-flex; align-items: center; gap: 7px;
                font-family: var(--mono); font-size: 11.5px; color: var(--mid);
                text-decoration: none; padding: 7px 12px; border-radius: 4px;
                border: 1px solid var(--border); background: rgba(255,255,255,0.02);
                transition: color 0.2s, border-color 0.2s, background 0.2s; }
.proof-apps a::after { content: '↗'; font-size: 11px; color: var(--muted);
                       transition: color 0.2s, transform 0.2s; }
.proof-apps a:hover { color: var(--white); border-color: rgba(16,185,129,0.35);
                      background: rgba(16,185,129,0.05); }
.proof-apps a:hover::after { color: var(--emerald); transform: translate(2px, -2px); }

@media (max-width: 860px) {
  .proof-list { margin-left: -18px; margin-right: -18px; }
  .proof-row { grid-template-columns: 1fr; gap: 24px; padding: 32px 18px; }
  .proof-index { margin-bottom: 12px; }
  .proof-foot { align-items: flex-start; flex-direction: column; }
}

/* --- FOUNDER PORTRAIT --------------------------------------------------- */
/* The whole photo, redrawn as a dot matrix built the same way as the globe, so
   the two signature elements share one construction. It resolves to the real
   photograph as the section scrolls into view — a hover-only reveal would never
   fire on touch, where most of this traffic is. Hover forces it fully resolved.

   The edge fade is painted into both canvases rather than applied as a CSS mask:
   same four-sided falloff on both layers, identical by construction, and no
   ellipse cutting corners at different angles.

   Degradation: dots -> plain photo (no JS or canvas) -> initials (no file). */
.founder-avatar { position: relative; width: 300px; height: 300px; flex-shrink: 0;
                  background: none; border: 0; border-radius: 0; font-size: 30px;
                  --resolve: 0; }
.founder-avatar canvas { position: absolute; inset: 0; width: 100%; height: 100%;
                         display: block; transition: opacity 0.45s ease; }
.founder-photo { position: absolute; inset: 0; width: 100%; height: 100%;
                 object-fit: cover; display: block; transition: opacity 0.45s ease; }

.founder-avatar.dotted .founder-photo { opacity: 0; }
.founder-avatar.dotted span { display: none; }
.founder-avatar.dotted .layer-dots { opacity: calc(1 - var(--resolve)); }
.founder-avatar.dotted .layer-flat { opacity: var(--resolve); }
.founder-avatar.dotted:hover, .founder-avatar.dotted:focus-within { --resolve: 1 !important; }

@media (max-width: 768px) {
  .founder-avatar { width: 240px; height: 240px; }
}

.founder-site { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px;
                font-family: var(--mono); font-size: 12.5px; color: var(--emerald);
                text-decoration: none; border-bottom: 1px solid rgba(16,185,129,0.3);
                padding-bottom: 2px; transition: border-color 0.2s; }
.founder-site::after { content: '↗'; transition: transform 0.2s; }
.founder-site:hover { border-color: var(--emerald); }
.founder-site:hover::after { transform: translate(2px, -2px); }

/* --- SCROLL REVEAL ------------------------------------------------------ */
/* Same distance and easing as the existing `up` keyframe so it reads as one system. */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].in { opacity: 1; transform: none;
                   transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].in[style*="--d"] { transition-delay: var(--d); }

/* --- FOCUS VISIBILITY --------------------------------------------------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 2px; }

/* --- FIXES ON EXISTING RULES -------------------------------------------- */
/* `min-width: 280px` on the rotating word overflowed the h1 on small screens. */
@media (max-width: 560px) {
  .rotating-word { min-width: 0; display: block; }
}
/* The inactive words are absolutely positioned with no `top`, so they stacked at
   their static position — one line below the active word — and were visible
   during the cross-fade. Pin them onto the active word and shorten the travel so
   nothing bleeds into the line above or below. */
.rotating-word .word { top: 0; transform: translateY(0.2em);
                       transition: opacity 0.24s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1); }
.rotating-word .word.active { transform: translateY(0); }
.rotating-word .word.exit { transform: translateY(-0.2em); }
/* The FAQ answers were capped at max-height: 300px; long answers clipped. */
.faq-item.open .faq-a { max-height: 480px; }

/* --- REDUCED MOTION ----------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .cursor-echo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .preloader { display: none; }
  .founder-avatar { --resolve: 1 !important; }
  .cursor-echo { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .eyebrow, h1, .hero-desc, .hero-actions { opacity: 1; animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee-track, .marquee-track.rtl { animation: none; }
  .proof-track { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}