:root {
      --orange: #FA9200;
      --orange-dk: #d97900;
      --purple: #8700ff;
      --purple-dk: #6f00d6;
      --ink: #070A12;
      --ink-2: #111827;
      --text: #253044;
      --muted: #647084;
      --line: #dfe4ea;
      --line-2: #cdd5df;
      --paper: #fbfaf7;
      --soft: #f4f6f9;
      --white: #ffffff;
      --grad: linear-gradient(118deg, var(--orange), var(--purple));
      --shadow-sm: 0 1px 2px rgba(7,10,18,.05), 0 1px 3px rgba(7,10,18,.06);
      --shadow-md: 0 14px 34px -18px rgba(7,10,18,.26), 0 8px 18px -14px rgba(7,10,18,.18);
      --shadow-lg: 0 34px 72px -30px rgba(7,10,18,.38);
    }

    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: #fff;
      color: var(--text);
      font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    img, svg { display: block; }
    p, h1, h2, h3, h4, ul { margin: 0; }
    * { box-sizing: border-box; }

    .preview-note {
      position: relative;
      z-index: 80;
      background: #070A12;
      color: rgba(255,255,255,.78);
      font-size: 12px;
      line-height: 1.35;
      text-align: center;
      padding: 8px 14px;
    }
    .preview-note strong { color: #fff; }

    .wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--orange-dk);
      font-size: 12px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 16px;
      height: 3px;
      border-radius: 3px;
      background: var(--grad);
      flex: none;
    }
    .grad-text {
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 9px !important;
      min-height: 52px !important;
      padding: 0 24px !important;
      border-radius: 9px !important;
      border: 1.5px solid transparent !important;
      font-size: 15px !important;
      line-height: 1 !important;
      font-weight: 850 !important;
      text-decoration: none !important;
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
      white-space: nowrap;
    }
    .btn-primary { color: #fff !important; background: var(--orange) !important; border-color: var(--orange) !important; box-shadow: 0 14px 32px -16px rgba(250,146,0,.95) !important; }
    .btn-primary:hover { color: #fff !important; background: var(--orange-dk) !important; border-color: var(--orange-dk) !important; transform: translateY(-2px); }
    .btn-outline { color: var(--ink) !important; background: #fff !important; border-color: var(--line-2) !important; box-shadow: var(--shadow-sm) !important; }
    .btn-outline:hover { color: var(--purple) !important; border-color: var(--purple) !important; transform: translateY(-2px); }

    /* Header placeholder */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 70;
      width: 100%;
      background: rgba(255,255,255,.94);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(14px);
      box-shadow: 0 1px 2px rgba(7,10,18,.04);
    }
    .site-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 24px; line-height: 1; font-weight: 900; letter-spacing: -.045em; white-space: nowrap; }
    .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; color: #fff; font-size: 17px; font-weight: 900; box-shadow: 0 14px 30px -18px rgba(250,146,0,.8); }
    .main-menu { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
    .main-menu > li { position: relative; }
    .main-menu a, .menu-trigger { appearance: none; border: 0; background: transparent; padding: 0; color: #253044; text-decoration: none; font: inherit; font-size: 14px; line-height: 1; font-weight: 750; cursor: pointer; white-space: nowrap; }
    .menu-trigger::after { content: "⌄"; margin-left: 6px; color: var(--muted); font-size: 12px; }
    .main-menu a:hover, .menu-trigger:hover, .main-menu a.is-current { color: var(--purple); }
    .submenu { position: absolute; left: -18px; top: calc(100% + 18px); min-width: 220px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
    .main-menu > li:hover .submenu, .main-menu > li:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
    .submenu a { display: block; padding: 11px 12px; border-radius: 10px; color: #253044; font-weight: 750; }
    .submenu a:hover { background: var(--paper); color: var(--purple); }
    .header-actions { display: flex; align-items: center; gap: 14px; }
    .login { color: #253044; font-size: 14px; font-weight: 750; }
    .demo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 9px; background: var(--orange); color: #fff !important; font-size: 14px; line-height: 1; font-weight: 850; box-shadow: 0 14px 28px -16px rgba(250,146,0,.85); }
    .demo-btn:hover { background: var(--orange-dk); transform: translateY(-1px); }
    .mobile-label { display: none; }

    /* About hero */
    .about-hero {
      position: relative;
      overflow: hidden;
      padding: 92px 0 74px;
      background:
        radial-gradient(600px 420px at 92% -10%, rgba(250,146,0,.20), transparent 62%),
        radial-gradient(560px 430px at 8% 8%, rgba(135,0,255,.11), transparent 62%),
        linear-gradient(180deg, #fbfaf7 0%, #ffffff 100%);
    }
    .about-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .46;
      background-image: linear-gradient(rgba(7,10,18,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7,10,18,.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
    }
    .about-hero .wrap { position: relative; z-index: 2; }
    .about-hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 56px; align-items: center; }
    .about-hero h1 { margin-top: 18px; max-width: 780px; color: var(--ink); font-size: clamp(48px, 5.4vw, 76px); line-height: .98; letter-spacing: -.066em; font-weight: 900; }
    .about-hero p { max-width: 650px; margin-top: 24px; color: #46546a; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.62; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

    .founder-card {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-lg);
    }
    .founder-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(440px 260px at 100% 0%, rgba(250,146,0,.14), transparent 60%), radial-gradient(340px 240px at 0% 100%, rgba(135,0,255,.10), transparent 58%);
    }
    .founder-top { position: relative; z-index: 2; padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    .founder-top strong { color: var(--ink); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
    .founder-top span { color: var(--orange-dk); background: rgba(250,146,0,.12); padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 850; }
    .founder-body { position: relative; z-index: 2; padding: 24px; }
    .mini-timeline { display: grid; gap: 12px; }
    .mini-timeline div { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; padding: 15px; border-radius: 16px; background: #fbfaf7; border: 1px solid var(--line); }
    .mini-timeline b { color: var(--ink); font-size: 18px; line-height: 1; font-weight: 900; letter-spacing: -.04em; }
    .mini-timeline span { color: var(--muted); font-size: 13px; line-height: 1.42; font-weight: 650; }

    .stat-strip { padding: 32px 0; background: var(--ink); color: rgba(255,255,255,.72); }
    .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
    .stat { padding: 20px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
    .stat strong { display: block; color: #fff; font-size: 30px; line-height: 1; font-weight: 900; letter-spacing: -.045em; }
    .stat span { display: block; margin-top: 8px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.35; font-weight: 700; }

    .section { padding: 88px 0; }
    .section-soft { background: var(--soft); }
    .section-head { max-width: 760px; }
    .section-head.center { margin: 0 auto; text-align: center; }
    .section-head.center .eyebrow { justify-content: center; }
    .section-head h2 { margin-top: 14px; color: var(--ink); font-size: clamp(34px, 4vw, 54px); line-height: 1.02; letter-spacing: -.055em; font-weight: 900; }
    .section-head p { margin-top: 16px; color: var(--muted); font-size: 18px; line-height: 1.58; }

    .story-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 42px; align-items: start; margin-top: 42px; }
    .story-lead { position: sticky; top: 110px; padding: 30px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
    .story-lead h3 { color: var(--ink); font-size: 30px; line-height: 1.08; letter-spacing: -.045em; }
    .story-lead p { margin-top: 14px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
    .story-list { display: grid; gap: 16px; }
    .story-step { position: relative; display: grid; grid-template-columns: 68px 1fr; gap: 18px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .story-step:hover { transform: translateY(-4px); border-color: rgba(250,146,0,.52); box-shadow: var(--shadow-md); }
    .story-step b { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 14px; font-weight: 900; }
    .story-step:hover b { background: var(--grad); }
    .story-step h3 { color: var(--ink); font-size: 24px; line-height: 1.1; letter-spacing: -.04em; }
    .story-step p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.58; }

    .team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 42px; }
    .person-card { overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .person-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--shadow-md); }
    .person-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper); }
    .person-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.96) contrast(1.03); }
    .person-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(7,10,18,.52), transparent); pointer-events: none; }
    .person-copy { padding: 22px; }
    .person-copy h3 { color: var(--ink); font-size: 24px; line-height: 1.08; letter-spacing: -.04em; }
    .person-role { margin-top: 6px; color: var(--orange-dk); font-size: 12px; line-height: 1; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
    .person-copy p { margin-top: 14px; color: var(--muted); font-size: 14.5px; line-height: 1.58; }

    .values-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 42px; }
    .value-card { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
    .value-card span { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: 14px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 12px 24px -14px rgba(135,0,255,.55); }
    .value-card span svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .value-card h3 { color: var(--ink); font-size: 22px; line-height: 1.1; letter-spacing: -.04em; }
    .value-card p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.55; }

    .logo-band { padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
    .logo-kicker { text-align: center; color: var(--muted); font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
    .logo-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 30px 58px; margin-top: 28px; }
    .logo-row img { width: auto !important; max-width: 154px !important; max-height: 42px !important; object-fit: contain !important; filter: grayscale(100%) saturate(0%) contrast(1.08) !important; opacity: .46 !important; mix-blend-mode: multiply; transition: opacity .18s ease, filter .18s ease; }
    .logo-row img:hover { opacity: .78 !important; filter: grayscale(100%) saturate(0%) contrast(1.18) !important; }

    .cta-close { background: var(--ink); color: rgba(255,255,255,.72); padding: 80px 0; position: relative; overflow: hidden; }
    .cta-close::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 330px at 88% -30%, rgba(250,146,0,.32), transparent 60%), radial-gradient(540px 370px at 0% 120%, rgba(135,0,255,.32), transparent 58%); }
    .cta-close .wrap { position: relative; z-index: 2; }
    .cta-card { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
    .cta-card h2 { color: #fff; font-size: clamp(32px, 4vw, 54px); line-height: 1.02; letter-spacing: -.055em; font-weight: 900; }
    .cta-card p { max-width: 650px; margin-top: 14px; color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.58; }

    /* Footer placeholder */
    .site-footer { background: #fff; border-top: 1px solid var(--line); padding: 46px 0 26px; }
    .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; }
    .footer-brand p { margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 320px; }
    .footer-col h4 { margin: 0 0 14px; color: var(--ink); font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
    .footer-col a, .footer-col span { display: block; margin: 10px 0; color: var(--muted); font-size: 14px; font-weight: 650; }
    .footer-col a:hover { color: var(--purple); }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

    @media (max-width: 1060px) {
      .main-menu { display: none; }
      .mobile-label { display: inline-flex; color: var(--muted); font-size: 13px; font-weight: 850; }
      .about-hero-grid, .story-grid, .cta-card { grid-template-columns: 1fr; }
      .story-lead { position: relative; top: auto; }
      .team-grid, .values-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 640px) {
      .wrap { width: min(100% - 28px, 1180px); }
      .about-hero { padding: 64px 0 58px; }
      .about-hero h1 { font-size: 43px; }
      .about-hero p, .section-head p { font-size: 16px; }
      .hero-actions .btn, .cta-card .btn { width: 100% !important; }
      .stat-grid, .team-grid, .values-grid { grid-template-columns: 1fr; }
      .story-step { grid-template-columns: 1fr; }
      .section { padding: 64px 0; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .header-actions .login { display: none; }
    }
  

/* New-page-only helpers. Original index/about/security remain untouched. */
.preserve-note{padding:12px 18px;background:#fff7ed;border-bottom:1px solid rgba(250,146,0,.25);color:#6b3b00;font-size:13px}.page-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.page-index-card{min-height:200px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-md)}.page-index-card p{color:var(--muted);font-size:14px;line-height:1.55}.page-index-card a{display:inline-flex;margin-top:16px;color:var(--purple);font-weight:850}.mock-product-card{border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at 84% 14%,rgba(250,146,0,.20),transparent 30%),radial-gradient(circle at 16% 92%,rgba(135,0,255,.14),transparent 34%),#fff;box-shadow:var(--shadow-lg);overflow:hidden}.mock-top{height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;background:#f4f6f9;border-bottom:1px solid var(--line)}.mock-dot{width:10px;height:10px;border-radius:50%}.mock-dot:nth-child(1){background:#ff5f57}.mock-dot:nth-child(2){background:#ffbd2e}.mock-dot:nth-child(3){background:#28c840}.mock-title{margin-left:9px;color:var(--muted);font-size:13px;font-weight:800}.mock-ui{display:grid;grid-template-columns:1fr 230px;min-height:380px}.mock-doc{padding:32px}.mock-doc-title{color:var(--ink);font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-align:center;margin-bottom:26px}.mock-line{height:10px;margin-bottom:13px;border-radius:999px;background:#e8edf3}.w1{width:96%}.w2{width:86%}.w3{width:72%}.w4{width:62%}.mock-highlight{display:inline-flex;margin:10px 0 16px;padding:6px 9px;border-radius:8px;background:rgba(250,146,0,.14);color:#884700;font-size:12px;font-weight:850}.mock-suggestion{margin-top:20px;padding:15px;border-left:4px solid var(--orange);border-radius:12px;background:#fff7ed;color:#6b3b00;font-size:13px;line-height:1.45;font-weight:750}.mock-side{padding:16px;background:var(--soft);border-left:1px solid var(--line)}.mock-side-card{margin-bottom:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}.mock-side-card strong{display:block;margin-bottom:5px;color:var(--ink);font-size:13px}.mock-side-card p{color:var(--muted);font-size:12px;line-height:1.4}@media(max-width:980px){.page-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mock-ui{grid-template-columns:1fr}.mock-side{border-left:0;border-top:1px solid var(--line)}}@media(max-width:640px){.page-index-grid{grid-template-columns:1fr}}