:root {
      --bg: #ffffff;
      --section: #f5f5f7;
      --fg: #1d1d1f;
      --muted: #636366;
      --hairline: #d2d2d7;
      --link: #06c;
      --card: #ffffff;
      --maxw: 980px;
      --radius: 12px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; -webkit-font-smoothing: antialiased; }
    img { max-width: 100%; display: block; }
    a { color: var(--link); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

    /* Nav */
    .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: rgba(255,255,255,.8); transition: transform .28s ease; will-change: transform; }
    .nav.nav--hidden { transform: translateY(-100%); }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
    .brand img { width: 82px; height: 82px; border-radius: 6px; }
    .nav-menu { display: none; }
    .nav ul { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
    .nav a { color: var(--fg); position: relative; }
    .nav a[href="#campaign"] { font-weight: 700; }
    /* Minimal hover indicator: thin hairline that scales in */
    .nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%; background: currentColor; opacity: .35; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
    .nav a:hover { text-decoration: none; }
    .nav a:hover::after { transform: scaleX(1); }
    .brand::after { display: none; }
    .brand { transition: transform .2s ease; text-decoration: none !important; }
    .brand:hover, .brand:focus-visible { transform: scale(1.05); text-decoration: none; }
    .nav.nav--open .nav-menu { display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; justify-content: center; align-items: center; background: rgba(255,255,255,.96); z-index: 1000; }
    .nav.nav--open .nav-menu ul { flex-direction: column; gap: 24px; font-size: 22px; text-align: center; }
    .nav-toggle { display: none; appearance: none; border: 0; background: transparent; padding: 6px; cursor: pointer; }
    .nav-toggle .bar { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px 0; border-radius: 1px; }
    /* Full-screen overlay behavior when menu is open (all sizes) */
    body.no-scroll { overflow: hidden; }

    /* Links & CTAs */
    .cta { color: var(--link); font-weight: 500; white-space: nowrap; }
    .cta::after { content: " ›"; }
    .pill { display: inline-block; padding: 12px 18px; border-radius: 9999px; background: #0066cc; color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; letter-spacing: .2px; line-height: 1; transition: background .18s ease, transform .18s ease; }
    .pill:hover { background: #005bb5; text-decoration: none; transform: translateY(-1px); }
    .btn { display: inline-block; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: #fff; transition: transform .15s ease, border-color .15s ease; color: var(--fg); }
    .btn:hover { transform: translateY(-1px); border-color: #bcbcc0; }

    /* Hero */
    .hero { padding: 56px 0 56px; }
    .hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.06; margin: 16px 0 12px; font-weight: 650; letter-spacing: -0.02em; }
    .hero p.lead { font-size: clamp(17px, 2.2vw, 22px); color: var(--muted); max-width: none; margin: 8px 0 10px; }
    .hero .meta { color: var(--muted); font-size: 14px; margin-top: 16px; }
    .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); font-size: 12px; letter-spacing: .2px; background: #fff; }

    /* Sections */
    section { padding: 80px 0; scroll-margin-top: 90px; }
    #founder { scroll-margin-top: 130px; }
    section:nth-of-type(even) { background: var(--section); }
    h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 16px; letter-spacing: -0.01em; font-weight: 600; }
    p { color: var(--fg); margin: 0 0 14px; }
    .grid { display: grid; gap: 18px; }
    .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px; color: var(--fg); transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
    .card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
    .muted { color: var(--muted); }
    .list { display: grid; gap: 8px; padding: 0; margin: 0; }
    .list li { color: var(--fg); }
    ul { padding-left: 18px; }
    
    /* What we do — full bleed, tight spacing, two-up no gap */
    #what { padding-top: 24px; }
    .what-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    #what .card { border-radius: 0; border: none; padding: 28px; will-change: transform; transition: none; }
    #what .card:hover { transform: none; box-shadow: none; }
    /* End-to-end Solutions styled like What */
    #about { padding-top: 24px; }
    .solutions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    #about .card { border-radius: 0; border: none; padding: 28px; will-change: transform; }
    #about .card:hover { transform: none; box-shadow: none; }
    /* Founder layout tweaks */
    .founder-bio { display: flex; flex-direction: column; justify-content: flex-end; }
    .founder-bio p:last-child { margin-bottom: 0; }
    .founder-name { margin: 0 0 4px; font-weight: 600; }
    /* Founder subtle parallax readiness */
    #founder h2, #founder img.founder-photo, #founder .founder-bio { will-change: transform; }
    /* Campaign — tighten layout + colorful background */
    #campaign { padding-top: 40px; padding-bottom: 56px; background: linear-gradient(135deg, #5b8cff, #9b5cff 35%, #ff6ec7 70%, #ffd166); color: #fff; }
    #campaign .wrap { max-width: 760px; text-align: center; }
    #campaign h1 {
      text-align: center;
      font-size: clamp(40px, 6vw, 64px);
      line-height: 1.06;
      margin: 12px 0 24px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    #campaign p { margin: 8px 0 0; }
    #campaign a { color: #fff; }
    #campaign .pill { background: rgba(255,255,255,.25); color: #fff; }
    #campaign .pill:hover { background: rgba(255,255,255,.35); }
    
    /* Founder on white background */
    #founder { background: #fff; }
    /* (removed ds-card overrides; White Label inherits default card styles) */

    /* Footer */
    footer { padding: 64px 0; color: var(--muted); font-size: 14px; background: var(--section); }

    /* Accessibility */
    :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }

    /* Motion */
    .fade-in { opacity: 0; transform: translateY(10px); animation: fadeIn .7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    .fade-2 { animation-delay: .08s; }
    .fade-3 { animation-delay: .16s; }
    .fade-4 { animation-delay: .24s; }
    @keyframes fadeIn { to { opacity: 1; transform: none; } }
    /* Scroll reveal */
    .reveal { 
      --reveal-duration: .8s;
      --reveal-distance: 22px;
      opacity: 0; 
      transform: translateY(var(--reveal-distance)); 
      transition: transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--reveal-duration);
      transition-delay: var(--delay, 0ms); 
      will-change: transform, opacity; 
    }
    .reveal.in { opacity: 1; transform: none; }
    .reveal-fast { --reveal-duration: .55s; --reveal-distance: 12px; }
    .reveal-slow { --reveal-duration: .95s; --reveal-distance: 28px; }

    /* Hero media */
    .hero-media { position: relative; margin-top: 8px; border-radius: 18px; overflow: hidden; background: none; }
    .hero-media img { width: 100%; height: clamp(220px, 36vw, 420px); object-fit: cover; object-position: 50% 42%; display: block; transform: translate3d(0,0,0) scale(1.06); transform-origin: center top; will-change: transform; }
    @media (prefers-reduced-motion: reduce) {
      .fade-in { opacity: 1; transform: none; animation: none; }
      .btn, .card { transition: none; }
      .reveal { opacity: 1; transform: none; transition: none; }
      .hero-media img { transform: none !important; }
      .nav { transition: none; }
    }
    /* Responsive horizontal (landscape) and narrow widths */
    @media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
      .nav-toggle { display: block; }
      .nav-menu { display: none; }

      .what-grid, .solutions-grid { grid-template-columns: 1fr; gap: 12px; }
      #founder .grid { grid-template-columns: 1fr !important; align-items: start !important; justify-items: start; }
      #founder img.founder-photo { margin: 0 0 12px 0; width: min(80vw, 276px) !important; height: min(80vw, 276px) !important; }
      #founder .founder-bio { width: 100%; text-align: left; }
      .wrap { padding-left: 20px; padding-right: 20px; }
      section { scroll-margin-top: 120px; }
      #founder { scroll-margin-top: 0px; }
    }

    @media (min-width: 901px) {
      .nav-toggle { display: none !important; }
      .nav-menu { display: flex !important; position: static; background: none; align-items: center; }
      .nav-menu ul { flex-direction: row; gap: 16px; font-size: 1rem; }
    }