:root{
    color-scheme:light;
    --bg:#f4f7ff;
    --bg-soft:#eef4ff;
    --panel:rgba(255,255,255,.72);
    --panel-2:rgba(255,255,255,.86);
    --ink:#1b1830;
    --muted:#5b5770;
    --faint:#6f6a86;
    --blue:#2563eb;      /* primary */
    --sky:#1d4ed8;       /* secondary (deeper blue — readable as accent text) */
    --teal:#0d9488;      /* subtle accent */
    --line:rgba(37,99,235,.22);
    --glass:rgba(255,255,255,.72);
    --glass-2:rgba(255,255,255,.86);
    --brd:rgba(27,24,48,.10);
    --ok:#047857;
    --radius:18px;
    --maxw:1200px;
    --sans:'Manrope',system-ui,-apple-system,sans-serif;
    --display:'Sora',var(--sans);

    /* light-frosted system additions */
    --blue-lite:#3b82f6;
    --blue-dark:#1d4ed8;
    --violet:#4c1d95;
    --green:#047857;
    --brd-soft:rgba(27,24,48,.06);
    --brd-lip:rgba(255,255,255,.9);
    --blur:blur(16px);
    --shadow:0 12px 34px -12px rgba(80,50,140,.22);
    --shadow-lg:0 24px 60px -20px rgba(80,50,140,.30);
    --grad-brand:linear-gradient(90deg,#4c1d95 0%,#1e3a8a 25%,#1e3a8a 75%,#047857 100%);
    --grad-blue:linear-gradient(135deg,#3b82f6,#2563eb 55%,#1d4ed8);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;line-height:1.1;font-weight:700}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .bg{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* inline SVG icons (emoji replacements) */
  svg{display:inline-block;vertical-align:middle}
  .btn svg{width:1.05em;height:1.05em;flex:0 0 auto}
  .trust span svg,.livedot svg,.jam-sub svg,.legal svg,.plink svg,.social a svg{width:1em;height:1em;flex:0 0 auto}

  /* ambient */
  .mesh{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
    radial-gradient(56% 52% at 5% 0%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(46% 42% at 100% 6%, rgba(45,158,158,.13), transparent 62%),
    radial-gradient(40% 44% at 95% 100%, rgba(124,58,237,.11), transparent 60%),
    radial-gradient(48% 52% at 0% 100%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(135deg,#eef4ff 0%,#f4f7ff 42%,#edfbf6 100%)}
  .grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 12%,#000 16%,transparent 70%);
    mask-image:radial-gradient(ellipse at 50% 12%,#000 16%,transparent 70%);opacity:.9;animation:drift 24s linear infinite}
  @keyframes drift{from{background-position:0 0,0 0}to{background-position:52px 52px,52px 52px}}

  /* nav */
  header{position:sticky;top:0;z-index:80;transition:.3s}
  header.scrolled{background:rgba(255,255,255,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--brd);box-shadow:0 8px 26px -18px rgba(80,50,140,.35)}
  nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
  .logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em}
  .logo .mk{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--sky),var(--blue) 60%,var(--teal));display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 8px 20px -6px rgba(37,99,235,.55)}
  .navlinks{display:flex;gap:26px;align-items:center}
  .navlinks a{color:var(--muted);font-weight:500;font-size:14.5px;transition:.2s}
  .navlinks a:hover{color:var(--blue)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:12px;cursor:pointer;transition:.22s;border:1px solid transparent;white-space:nowrap}
  .btn-primary{background:var(--grad-blue);color:#fff;box-shadow:0 10px 24px -8px rgba(37,99,235,.5)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(37,99,235,.6)}
  .btn-ghost{border-color:var(--brd);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--ink);box-shadow:var(--shadow)}
  .btn-ghost:hover{border-color:rgba(37,99,235,.45);color:var(--blue-dark);background:rgba(255,255,255,.9)}
  .btn-lg{padding:13px 24px;font-size:15px}
  .menu-btn{display:none;background:none;border:0;color:var(--ink);font-size:24px;line-height:0;cursor:pointer}
  .menu-btn svg{width:24px;height:24px}

  /* section scaffolding */
  section{padding:96px 0}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sky);
    padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow)}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px rgba(13,148,136,.7)}
  .head{max-width:660px;margin:0 auto 52px;text-align:center}
  .head.left{margin:0 0 46px;text-align:left}
  .kick{color:var(--sky);font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:block}
  .head h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px}
  .head p{color:var(--muted);font-size:17px}

  /* ---------- HERO ---------- */
  .hero{padding:56px 0 84px}
  .hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:52px;align-items:center}
  .hero h1{font-size:clamp(38px,5.2vw,60px);margin:20px 0 20px;letter-spacing:-.03em}
  .hero h1 .bg{display:inline}
  .hero .lede{color:var(--muted);font-size:clamp(16px,1.7vw,18.5px);max-width:48ch;margin-bottom:30px}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
  .trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
  .trust span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border:1px solid var(--brd);padding:6px 11px;border-radius:10px;background:var(--glass);box-shadow:0 6px 18px -12px rgba(80,50,140,.35)}
  .trust span svg{color:var(--blue)}

  /* ---- TakTo product mockup ---- */
  .app{background:rgba(255,255,255,.78);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
  .app::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue-lite),var(--blue),transparent);animation:sweep 4.5s ease-in-out infinite}
  @keyframes sweep{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
  .app-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--brd);background:rgba(255,255,255,.6)}
  .app-top .dots{display:flex;gap:6px}
  .app-top .dots i{width:10px;height:10px;border-radius:50%;background:rgba(27,24,48,.16)}
  .app-url{margin-left:6px;font-size:11.5px;color:var(--faint);background:rgba(255,255,255,.8);border:1px solid var(--brd);border-radius:7px;padding:4px 10px}
  .app-user{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
  .app-user .av{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700}
  .app-body{display:grid;grid-template-columns:52px 1fr;min-height:340px}
  .app-side{border-right:1px solid var(--brd);padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:14px;background:rgba(255,255,255,.5)}
  .app-side .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;color:var(--muted);border:1px solid transparent}
  .app-side .ic svg{width:16px;height:16px}
  .app-side .ic.on{background:rgba(37,99,235,.12);border-color:var(--line);color:var(--blue)}
  .app-main{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
  .app-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .app-cls{font-family:var(--display);font-weight:600;font-size:14px}
  .app-cls span{color:var(--faint);font-weight:500}
  .ring{--p:72;width:44px;height:44px;border-radius:50%;flex:0 0 auto;
    background:conic-gradient(var(--blue) calc(var(--p)*1%),rgba(27,24,48,.10) 0);display:grid;place-items:center;position:relative}
  .ring::after{content:'72%';position:absolute;font-size:10px;font-weight:700;color:var(--ink)}
  .ring i{width:34px;height:34px;border-radius:50%;background:#fff}
  .topic{display:flex;align-items:center;gap:10px;background:rgba(37,99,235,.07);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
  .topic .tg-ico{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--sky));display:grid;place-items:center;font-size:13px;color:#fff}
  .topic .tg-ico svg{width:14px;height:14px}
  .topic b{font-size:12.5px}.topic small{display:block;color:var(--faint);font-size:11px;font-weight:500}
  .chatline{display:flex;gap:8px;align-items:flex-start}
  .chatline .a{width:24px;height:24px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;font-size:11px}
  .chatline .a svg{width:13px;height:13px}
  .chatline .a.s{background:rgba(37,99,235,.12);color:var(--blue-dark)}
  .chatline .a.ai{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff}
  .chatline .b{background:rgba(255,255,255,.8);border:1px solid var(--brd);border-radius:10px;padding:8px 11px;font-size:12px;color:var(--ink)}
  .chatline .b.ai{background:rgba(37,99,235,.08);border-color:var(--line)}
  .chatline .src{display:block;color:var(--sky);font-size:10px;margin-top:5px;font-weight:600}
  .app-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
  .metric{background:rgba(255,255,255,.8);border:1px solid var(--brd);border-radius:11px;padding:10px 12px}
  .metric .lab{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
  .metric .val{font-family:var(--display);font-weight:700;font-size:16px;margin-top:2px}
  .spark{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:6px}
  .spark i{flex:1;background:linear-gradient(var(--blue-lite),var(--blue));border-radius:2px;opacity:.9}
  .prog{height:6px;border-radius:6px;background:rgba(27,24,48,.10);overflow:hidden;margin-top:8px}
  .prog span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--sky));width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
  .app.in .prog span{width:var(--w,70%)}

  /* ---------- COMPANY -> PRODUCTS ---------- */
  .company{position:relative}
  .co-top{max-width:720px;margin:0 auto 8px;text-align:center}
  .co-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:18px;padding:12px 22px;border-radius:14px;background:var(--glass-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);box-shadow:var(--shadow)}
  .co-badge .mk{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--sky),var(--blue) 60%,var(--teal));display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
  .co-sub{color:var(--muted);font-size:15px;margin-top:12px}
  .co-arrow{display:flex;justify-content:center;margin:22px 0 26px;color:var(--faint)}
  .co-arrow svg{width:22px;height:34px}
  .co-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .prodcard{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:22px;padding:32px;transition:.3s;position:relative;overflow:hidden;box-shadow:var(--shadow)}
  .prodcard.evt{background:linear-gradient(160deg,rgba(13,148,136,.10),rgba(255,255,255,.78))}
  .prodcard:hover{transform:translateY(-4px);border-color:rgba(37,99,235,.32);box-shadow:var(--shadow-lg)}
  .prodcard .plabel{display:flex;align-items:center;gap:11px;margin-bottom:8px}
  .prodcard .pmk{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px;color:#fff}
  .pmk.tk{background:linear-gradient(135deg,var(--blue),var(--sky))}
  .pmk.ev{background:linear-gradient(135deg,var(--teal),var(--sky))}
  .prodcard h3{font-size:22px}
  .prodcard .ptype{color:var(--sky);font-size:13px;font-weight:600;margin-bottom:14px;display:block}
  .prodcard>p{color:var(--muted);font-size:14.5px;margin-bottom:18px;max-width:42ch}
  .plist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin-bottom:22px}
  .plist li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink)}
  .plist li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:8px;flex:0 0 auto}
  .prodcard .plink{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--blue)}
  .prodcard .plink:hover{gap:11px;color:var(--blue-dark)}

  /* ---------- WHAT WE BUILD (bento) ---------- */
  .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:16px}
  .bx{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:16px;padding:26px;transition:.3s;position:relative;overflow:hidden;box-shadow:var(--shadow)}
  .bx:hover{border-color:rgba(37,99,235,.32);background:rgba(255,255,255,.9);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .bx .ic{display:flex;align-items:center;font-size:24px;line-height:1;color:var(--blue);margin-bottom:14px}
  .bx .ic svg{width:26px;height:26px}
  .bx h3{font-size:18px;margin-bottom:8px}
  .bx p{color:var(--muted);font-size:14px}
  .bx.wide{grid-column:span 2}
  .bx.feature{grid-column:span 2;background:linear-gradient(150deg,rgba(37,99,235,.13),rgba(255,255,255,.82) 62%,rgba(4,120,87,.09))}
  .bx.feature h3{font-size:22px}

  /* ---------- PRODUCTS (tabs) ---------- */
  .tabs{display:flex;gap:10px;margin-bottom:26px;justify-content:center;flex-wrap:wrap}
  .tab{font-family:var(--display);font-weight:600;font-size:15px;padding:11px 22px;border-radius:12px;border:1px solid var(--brd);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--muted);cursor:pointer;transition:.22s}
  .tab:hover{color:var(--blue-dark);border-color:rgba(37,99,235,.32)}
  .tab.active{color:#fff;background:var(--grad-blue);border-color:transparent;box-shadow:0 10px 24px -8px rgba(37,99,235,.5)}
  .panel{display:none;animation:fade .4s}
  .panel.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .pcard{display:grid;grid-template-columns:1fr 1.05fr;gap:36px;background:var(--panel);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:22px;padding:38px;align-items:center;box-shadow:var(--shadow)}
  .pcard .ptype{color:var(--sky);font-size:13px;font-weight:600;margin-bottom:8px;display:block}
  .pcard h3{font-size:26px;margin-bottom:12px}
  .pcard>div>p{color:var(--muted);margin-bottom:20px;max-width:46ch}
  .caps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
  .cap{font-size:12.5px;font-weight:500;padding:7px 12px;border-radius:9px;background:rgba(37,99,235,.07);border:1px solid var(--line);color:var(--ink)}
  .pcard .plink{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;color:#fff;background:var(--grad-blue);padding:11px 20px;border-radius:12px;transition:.22s;box-shadow:0 10px 24px -8px rgba(37,99,235,.5)}
  .pcard .plink:hover{transform:translateY(-2px)}

  /* mini visuals inside product tabs */
  .mini{background:linear-gradient(160deg,rgba(37,99,235,.10),rgba(255,255,255,.86));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
  .mini h5{font-family:var(--display);font-size:12.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;font-weight:600}
  .lb-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.8);border:1px solid var(--brd);margin-bottom:8px}
  .lb-row .rk{width:22px;height:22px;border-radius:6px;background:rgba(37,99,235,.12);color:var(--blue-dark);font-weight:700;font-size:11px;display:grid;place-items:center;flex:0 0 auto}
  .lb-row .rk.gold{background:linear-gradient(135deg,#e9b949,#c98f2e);color:#25200c}
  .lb-row .nm{font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lb-row .sc{font-family:var(--display);font-weight:700;font-size:13px;color:var(--sky)}
  .evt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .evt-chip{font-size:11.5px;color:var(--muted);border:1px solid var(--brd);border-radius:999px;padding:6px 11px;display:inline-flex;gap:6px;align-items:center;background:var(--glass)}
  .evt-chip b{color:var(--teal)}

  /* ---------- WHY (5 pillars) ---------- */
  .pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  .pill{padding:24px 20px;border-radius:16px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);transition:.3s;box-shadow:var(--shadow)}
  .pill:hover{border-color:rgba(37,99,235,.32);transform:translateY(-4px);background:rgba(255,255,255,.9);box-shadow:var(--shadow-lg)}
  .pill .n{font-family:var(--display);font-weight:700;color:var(--sky);font-size:14px;border:1px solid var(--line);background:rgba(37,99,235,.06);width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px}
  .pill h3{font-size:16px;margin-bottom:8px;line-height:1.25}
  .pill p{color:var(--muted);font-size:13px}

  /* ---------- FOUNDER (concise) ---------- */
  .founder-card{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
    background:linear-gradient(155deg,rgba(37,99,235,.10),rgba(255,255,255,.82) 60%,rgba(76,29,149,.07));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:22px;padding:36px 40px;box-shadow:var(--shadow)}
  .founder-photo{position:relative;width:120px;flex:0 0 auto}
  .founder-photo img{width:120px;height:120px;object-fit:cover;object-position:top center;border-radius:16px;border:1px solid var(--brd);display:block;box-shadow:0 14px 34px -14px rgba(80,50,140,.45)}
  .founder-main .fk{color:var(--sky);font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:8px}
  .founder-main h3{font-size:22px;margin-bottom:2px}
  .founder-main .frole{color:var(--muted);font-size:14px;margin-bottom:16px}
  .founder-quote{font-family:var(--display);font-weight:500;font-size:clamp(17px,2.1vw,21px);line-height:1.45;color:var(--ink);border-left:3px solid var(--blue);padding-left:18px;margin-bottom:14px}
  .founder-quote .bg{font-weight:600}
  .founder-main .fbio{color:var(--muted);font-size:14px;max-width:64ch}

  /* ---------- CTA ---------- */
  .cta{padding:60px 44px;border-radius:26px;text-align:center;position:relative;overflow:hidden;
    background:var(--grad-brand);border:1px solid rgba(255,255,255,.18);box-shadow:0 26px 70px -26px rgba(30,58,138,.65)}
  .cta h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px;color:#fff}
  .cta p{color:rgba(255,255,255,.86);max-width:52ch;margin:0 auto 26px}
  .cta .btn-primary{box-shadow:0 12px 26px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.3)}
  .cta .btn-primary:hover{box-shadow:0 18px 34px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.45)}
  .cta .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .cta .btn-ghost:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.72);color:#fff}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--brd);padding:54px 0 30px;margin-top:20px}
  .fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
  footer h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:15px;font-family:var(--sans);font-weight:700}
  footer ul{list-style:none}footer li{margin-bottom:10px}
  footer a{color:var(--muted);font-size:14px;transition:.2s}footer a:hover{color:var(--blue)}
  .fd{color:var(--muted);font-size:14px;max-width:34ch;margin-top:14px}
  .fb{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--brd);color:var(--faint);font-size:13px}

  /* v2: takto modules */
  .co-grid.three{grid-template-columns:repeat(3,1fr)}
  .takto-banner{display:flex;align-items:center;gap:15px;background:linear-gradient(160deg,rgba(37,99,235,.13),rgba(255,255,255,.84));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:18px;padding:18px 24px;max-width:540px;margin:0 auto 30px;box-shadow:var(--shadow)}
  .takto-banner .pmk{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--sky));display:grid;place-items:center;font-family:var(--display);font-weight:800;color:#fff;font-size:17px;flex:0 0 auto}
  .takto-banner h3{font-size:19px;line-height:1.1}
  .takto-banner .ptype{color:var(--sky);font-size:12px;font-weight:600}
  .takto-banner .livedot{margin-left:auto;font-size:12px;color:var(--ok);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .modcard{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:18px;padding:26px;transition:.3s;box-shadow:var(--shadow)}
  .modcard:hover{border-color:rgba(37,99,235,.32);transform:translateY(-4px);background:rgba(255,255,255,.9);box-shadow:var(--shadow-lg)}
  .modcard .mi{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:var(--blue);background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(59,130,246,.09));border:1px solid var(--line);margin-bottom:16px}
  .modcard .mi svg{width:22px;height:22px}
  .modcard h3{font-size:18px;margin-bottom:8px}
  .modcard p{color:var(--muted);font-size:14px}
  .reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:1000px){
    .navlinks{display:none}.menu-btn{display:block}
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .bento{grid-template-columns:repeat(2,1fr)}.bx.wide,.bx.feature{grid-column:span 2}
    .pillars{grid-template-columns:repeat(2,1fr)}
    .pcard{grid-template-columns:1fr;gap:26px}
    /* `.co-grid.three` (0,2,0) outranks a bare `.co-grid` (0,1,0), so listing only
       `.co-grid` here left the 3-up module row at three columns on phones — that wedged
       the page to a 483px minimum and scrolled the WHOLE site sideways below ~430px.
       Match the specificity so both grids actually collapse. */
    .co-grid, .co-grid.three{grid-template-columns:1fr}
    .fg{grid-template-columns:1fr 1fr}
  }
  @media(max-width:620px){
    section{padding:70px 0}
    .hero{padding:36px 0 60px}
    .bento{grid-template-columns:1fr}.bx.wide,.bx.feature{grid-column:span 1}
    .pillars{grid-template-columns:1fr}
    .plist{grid-template-columns:1fr}
    .founder-card{grid-template-columns:1fr;text-align:center;justify-items:center;padding:30px 22px}
    .founder-quote{text-align:left}
    .fg{grid-template-columns:1fr 1fr}
    .app-metrics{grid-template-columns:1fr 1fr}
    .hero-cta .btn{flex:1}
  }
  @media(max-width:420px){.fg{grid-template-columns:1fr}}

  /* v3 - authentic TakTo feature mocks (Pronounce + JAM) */
  .app-panel{padding:16px 18px;display:flex;flex-direction:column;gap:14px;min-height:300px}
  .pron-head{display:flex;align-items:center;gap:14px}
  .sring{width:54px;height:54px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;position:relative;background:conic-gradient(var(--ok) calc(var(--p)*1%),rgba(27,24,48,.10) 0)}
  .sring i{position:absolute;width:42px;height:42px;border-radius:50%;background:#fff}
  .sring b{position:relative;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
  .pron-title{font-family:var(--display);font-weight:600;font-size:14px}
  .pron-sub{font-size:12px;color:var(--muted);margin-top:3px}
  .pron-tag{margin-left:auto;font-size:11px;color:var(--sky);border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:rgba(37,99,235,.07);white-space:nowrap}
  .skills{display:flex;flex-direction:column;gap:9px}
  .skill{display:grid;grid-template-columns:76px 1fr 36px;gap:10px;align-items:center}
  .skill .sn{font-size:11.5px;color:var(--muted)}
  .skill .track{height:7px;border-radius:6px;background:rgba(27,24,48,.10);overflow:hidden}
  .skill .fill{height:100%;border-radius:6px;width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
  .app.in .skill .fill{width:var(--w)}
  .skill .pv{font-size:11.5px;font-weight:700;text-align:right;font-family:var(--display)}
  .good{color:var(--ok)} .warn{color:#b45309} .bad{color:#c81e1e}
  .fill.good{background:linear-gradient(90deg,#047857,#10b981)}
  .fill.warn{background:linear-gradient(90deg,#b45309,#f59e0b)}
  .fill.bad{background:linear-gradient(90deg,#b91c1c,#ef4444)}
  .fix{border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:rgba(37,99,235,.06)}
  .fix-h{font-size:12px;font-weight:600;margin-bottom:9px}
  .fix-words{display:flex;flex-wrap:wrap;gap:7px}
  .fix-words span{font-size:11.5px;color:var(--ink);background:rgba(255,255,255,.85);border:1px solid var(--brd);border-radius:8px;padding:5px 10px}
  .jam-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
  .jam-avg{font-family:var(--display);font-weight:700;font-size:26px;line-height:1}
  .jam-avg span{font-size:11px;color:var(--faint);font-weight:500;margin-left:6px}
  .jam-sub{font-size:11px;color:var(--muted);margin-top:5px}
  .jam-stats{display:flex;gap:14px}
  .jam-stats div{text-align:center}
  .jam-stats b{font-family:var(--display);font-size:15px;display:block}
  .jam-stats small{font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
  .snap{display:flex;flex-direction:column;gap:8px}
  .tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
  .tool{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:16px;padding:24px;transition:.3s;box-shadow:var(--shadow)}
  .tool:hover{border-color:rgba(37,99,235,.32);transform:translateY(-4px);background:rgba(255,255,255,.9);box-shadow:var(--shadow-lg)}
  .tool .ti{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:var(--blue);background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(59,130,246,.09));border:1px solid var(--line);margin-bottom:14px}
  .tool .ti svg{width:22px;height:22px}
  .tool h4{font-family:var(--display);font-size:16px;margin-bottom:7px}
  .tool p{color:var(--muted);font-size:13.5px}
  @media(max-width:1000px){.tools{grid-template-columns:1fr}}

  /* ===== v-final additions ===== */
  /* working mobile nav */
  @media(max-width:1000px){
    .navlinks{display:none;position:absolute;left:0;right:0;top:72px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--brd);box-shadow:0 18px 40px -24px rgba(80,50,140,.45);flex-direction:column;align-items:flex-start;padding:18px 24px;gap:16px}
    header.nav-open .navlinks{display:flex}
  }
  /* secondary product link */
  .pcard .plink.alt{background:var(--glass);border:1px solid var(--brd);color:var(--ink);margin-left:10px;box-shadow:var(--shadow)}
  .pcard .plink.alt:hover{border-color:rgba(37,99,235,.45);color:var(--blue-dark);background:rgba(255,255,255,.92);transform:translateY(-2px)}
  /* footer social */
  .social{display:flex;gap:10px;margin-top:14px}
  .social a{width:34px;height:34px;border-radius:10px;border:1px solid var(--brd);background:var(--glass);display:grid;place-items:center;color:var(--muted);font-size:13px;font-weight:700;transition:.2s;text-decoration:none}
  .social a:hover{border-color:rgba(37,99,235,.45);color:var(--blue-dark);background:rgba(255,255,255,.92)}
  /* skip link */
  .skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;border-radius:10px;z-index:200}
  .skip:focus{left:16px;top:12px}
  /* legal / prose pages */
  .page-hero{padding:70px 0 0}
  .legal{max-width:820px;margin:0 auto}
  .legal .doc-head{margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--brd)}
  .legal h1{font-size:clamp(28px,4vw,42px);margin-bottom:10px}
  .legal .updated{color:var(--faint);font-size:13.5px}
  .legal h2{font-family:var(--display);font-size:20px;margin:32px 0 10px;color:var(--ink)}
  .legal h3{font-size:16px;margin:20px 0 8px;color:var(--ink)}
  .legal p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:12px}
  .legal ul{margin:6px 0 14px 20px}
  .legal li{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:7px}
  .legal a{color:var(--sky)}
  .legal a:hover{color:var(--blue)}
  .legal .note{background:rgba(255,255,255,.78);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--muted);font-size:13.5px;margin:18px 0;box-shadow:var(--shadow)}
  /* about facts */
  .fact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
  .fact{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
  .fact .k{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
  .fact .v{font-family:var(--display);font-weight:600;font-size:15px;margin-top:4px}
  .about-lead{color:var(--muted);font-size:17px;line-height:1.75;max-width:70ch}
  @media(max-width:620px){.fact-grid{grid-template-columns:1fr}}

  /* ── Product showcase: the real web dashboard beside the real phone screen ───────────────
     Replaces the old badge/arrow/banner diagram in #company. Both images are genuine product
     screenshots, so the frames stay quiet — a plain browser chrome and a 4px handset bezel. */
  .showcase{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:34px}

  .browser{flex:1 1 auto;max-width:790px;min-width:0;margin:0;border-radius:16px;overflow:hidden;
    background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -34px rgba(30,45,90,.42),var(--shadow)}
  .bbar{display:flex;align-items:center;gap:16px;padding:11px 16px;background:linear-gradient(#fbfcff,#f3f5fb);
    border-bottom:1px solid var(--line)}
  .bbar .dots{display:flex;gap:7px;flex:0 0 auto}
  .bbar .dots i{width:11px;height:11px;border-radius:50%;background:#e0e4ee}
  .bbar .dots i:nth-child(1){background:#ff5f57}
  .bbar .dots i:nth-child(2){background:#febc2e}
  .bbar .dots i:nth-child(3){background:#28c840}
  .urlbar{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;justify-content:center;
    background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 14px;
    font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .urlbar svg{width:13px;height:13px;flex:0 0 auto;color:var(--faint)}
  .browser>img{display:block;width:100%;height:auto}

  /* 4px bezel — the earlier 9px read as a toy phone rather than a product shot. */
  .handset{flex:0 0 auto;width:286px;margin:0;border-radius:38px;background:#12182a;padding:4px;
    box-shadow:0 40px 80px -30px rgba(30,45,90,.55),0 6px 18px -8px rgba(30,45,90,.25)}
  .hscreen{border-radius:34px;overflow:hidden;background:#eee9f8;display:block}
  .hscreen img{display:block;width:100%;height:auto}

  .showcase-cap{text-align:center;color:var(--faint);font-size:14px;margin:22px 0 40px}

  /* Stack below the two-up breakpoint; the phone shrinks rather than forcing a sideways scroll. */
  @media(max-width:900px){
    .showcase{flex-direction:column;gap:26px}
    .browser{max-width:100%;width:100%}
    .handset{width:250px}
  }
  @media(max-width:420px){
    .handset{width:210px;border-radius:32px}
    .hscreen{border-radius:29px}
  }

  /* The header trio (logo + "Visit TakTo" CTA + hamburger) needs 377px at full size, so a 360px
     phone scrolled sideways. Shrink the CTA and wordmark rather than dropping the CTA — it is the
     only call to action above the fold. */
  @media(max-width:430px){
    #hdr .btn{padding:9px 12px;font-size:13.5px;gap:6px}
    #hdr .logo{gap:8px}
    #hdr .logo img{height:26px}
    #hdr .logo .wm{font-size:18px}
  }

  /* Inline icons that sit in running text (privacy link arrow, trend triangle) size to the text. */
  .legal a svg,.jam-sub .good svg{width:1em;height:1em;vertical-align:-.12em;flex:0 0 auto}

  /* The header is position:sticky;top:0 and 72px tall, but no section reserved room for it — so
     every in-page nav jump (#products, #build, #why, #contact) parked the section's kicker and
     heading UNDERNEATH the header. Reserve the header height plus a little air. */
  section[id]{scroll-margin-top:92px}

  /* Inline arrow/glyph icons. Must be sized on the class itself, not only via `.btn svg` —
     an `.ico` in running text has no sized ancestor and otherwise renders at the SVG default box. */
  .ico{width:1em;height:1em;flex:0 0 auto;vertical-align:-.12em}

  /* ── Brand lockup ─────────────────────────────────────────────────────────────────────
     InfinityArrow mark + wordmark. Gradient values are SAMPLED from the mark itself
     (#341c68 violet loop -> #262c82 navy centre -> #468d89 teal tail) so the type and the
     symbol read as one object. "IO" is held at the solid teal end so the wordmark parses as
     "Reveal IO" rather than one run-on word. */
  .logo{display:flex;align-items:center;gap:11px;text-decoration:none}
  .logo img{height:34px;width:auto;display:block;flex:0 0 auto}
  .logo .wm{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.02em;line-height:1}
  .logo .wm .rv{background:linear-gradient(90deg,#341c68 0%,#262c82 62%,#25447d 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .logo .wm .io{color:#3f8f86}
  footer .logo img{height:30px}
  footer .logo .wm{font-size:21px}

  /* ── Running border on "Log in to the app" ───────────────────────────────────────────
     A conic gradient spins behind the button; ::after covers the middle so only a 2px ring
     shows, which reads as a light travelling the perimeter. `overflow:hidden` clips the
     sweep to the rounded rect. The link's own text sits above both (z-index auto > -1). */
  .pcard .plink.alt{
    position:relative;z-index:0;isolation:isolate;overflow:hidden;
    border:0;padding:13px 22px;background:transparent;box-shadow:var(--shadow)}
  .pcard .plink.alt::before{
    content:"";position:absolute;left:50%;top:50%;width:300%;aspect-ratio:1;z-index:-2;
    translate:-50% -50%;
    background:conic-gradient(from 0turn,transparent 0 62%,#341c68 74%,#2563eb 84%,#468d89 93%,transparent 100%);
    animation:rev-run 2.6s linear infinite}
  .pcard .plink.alt::after{
    content:"";position:absolute;inset:2px;z-index:-1;border-radius:10px;
    background:#fff}
  .pcard .plink.alt:hover{border:0;background:transparent;transform:translateY(-2px)}
  .pcard .plink.alt:hover::after{background:rgba(255,255,255,.94)}
  @keyframes rev-run{to{rotate:1turn}}

  /* Anyone who asked the OS to calm motion down gets the gradient without the lap. */
  @media (prefers-reduced-motion: reduce){
    .pcard .plink.alt::before{animation:none;
      background:conic-gradient(from .25turn,#341c68,#2563eb,#468d89,#341c68)}
  }