:root { --ink:#10233b; --muted:#667487; --paper:#f6f4ed; --lime:#d7ff4f; --line:rgba(16,35,59,.16); }
      * { box-sizing:border-box; }
      html { scroll-behavior:smooth; }
      body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,system-ui,sans-serif; font-size:16px; line-height:1.55; }
      a { color:inherit; text-decoration:none; }
      a:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
      .shell { width:min(1040px, calc(100% - 48px)); min-height:100vh; margin:0 auto; display:flex; flex-direction:column; }
      header { display:flex; justify-content:space-between; align-items:center; padding:26px 0; border-bottom:1px solid var(--line); }
      .brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.04em; }
      .brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:var(--ink); background:var(--lime); font-size:14px; }
      main { flex:1; padding:96px 0 110px; }
      .hero { max-width:760px; }
      .eyebrow { display:flex; align-items:center; gap:10px; color:var(--muted); font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
      .eyebrow::before { content:""; width:28px; height:2px; background:var(--lime); }
      h1 { margin:22px 0 26px; max-width:620px; font-size:clamp(2.6rem, 5.5vw, 4.8rem); line-height:.94; letter-spacing:-.08em; }
      .intro { max-width:590px; margin:0; color:var(--muted); font-size:clamp(1.1rem, 2.2vw, 1.4rem); line-height:1.55; }
      .links { display:flex; flex-wrap:wrap; gap:12px; margin-top:48px; }
      .link { display:inline-flex; align-items:center; gap:11px; padding:14px 17px; border:1px solid var(--line); border-radius:999px; font-weight:700; transition:background .2s ease, transform .2s ease, border-color .2s ease; }
      .link:hover { background:var(--lime); border-color:var(--ink); transform:translateY(-3px); }
      .arrow { font-size:18px; line-height:1; }
      .apps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:96px; padding-top:28px; border-top:1px solid var(--line); }
      .section-label { grid-column:1 / -1; margin:0 0 4px; color:var(--muted); font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
      .app-card { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:28px; min-height:370px; padding:28px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.36); transition:background .2s ease, border-color .2s ease, transform .2s ease; }
      .app-card:hover { background:var(--lime); border-color:var(--ink); transform:translateY(-3px); }
      .app-info { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
      .app-icon { display:block; flex:0 0 auto; width:56px; height:56px; border-radius:16px; object-fit:cover; }
      .app-name { display:block; margin:0; font-size:1.25rem; font-weight:700; letter-spacing:-.03em; }
      .app-description { display:block; margin:10px 0 0; color:var(--muted); }
      .app-card:hover .app-description { color:var(--ink); }
      .app-link { display:inline-flex; flex:0 0 auto; align-items:center; gap:8px; padding:11px 14px; border:1px solid var(--line); border-radius:999px; font-size:14px; font-weight:700; }
      .app-card:hover .app-link { border-color:var(--ink); }
      footer { display:flex; justify-content:space-between; gap:24px; padding:26px 0 34px; border-top:1px solid var(--line); color:var(--muted); font-family:"DM Mono",monospace; font-size:12px; }
      @media (min-width:641px) and (max-width:900px) {
        .apps { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      }
      @media (max-width:640px) {
        .shell { width:min(100% - 32px, 560px); }
        header { padding:18px 0; }
        main { padding:74px 0 88px; }
        .links { display:grid; grid-template-columns:1fr; margin-top:38px; }
        .link { justify-content:space-between; }
        .apps { grid-template-columns:1fr; gap:16px; margin-top:74px; }
        .app-card { min-height:0; padding:24px; }
        footer { display:block; }
        footer span { display:block; }
        footer span + span { margin-top:8px; }
      }
      @media (prefers-reduced-motion:reduce) {
        html { scroll-behavior:auto; }
        .link, .app-card { transition:none; }
        .link:hover, .app-card:hover { transform:none; }
      }

      header nav a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:700; }
      .product-hero { max-width:850px; }
      .product-heading { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
      .product-icon { width:64px; height:64px; border-radius:18px; }
      h1 { max-width:850px; line-height:1.04; }
      .intro { max-width:680px; }
      .links { margin-top:32px; }
      .primary { background:var(--lime); border-color:var(--ink); }
      .preview { margin:56px 0 0; }
      .preview img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:20px; background:#eef3f4; }
      figcaption { margin-top:12px; color:var(--muted); font-size:14px; }
      .section { margin-top:80px; padding-top:28px; border-top:1px solid var(--line); scroll-margin-top:24px; }
      h2 { margin:12px 0 28px; font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.15; letter-spacing:-.05em; }
      .features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
      .feature { padding:24px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.36); }
      h3 { margin:0 0 12px; font-size:1.1rem; letter-spacing:-.02em; }
      .feature p, .steps p { margin:0; color:var(--muted); }
      .note { color:var(--muted); font-size:14px; margin:20px 0 0; }
      .steps { padding-left:24px; max-width:750px; }
      .steps li { padding-left:12px; margin:0 0 28px; }
      .steps li::marker { font-family:'DM Mono',monospace; font-weight:500; }
      .text-link { text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }
      code { font-family:'DM Mono',monospace; font-size:.85em; overflow-wrap:anywhere; }
      details { border-top:1px solid var(--line); padding:20px 0; }
      details:last-child { border-bottom:1px solid var(--line); }
      summary { cursor:pointer; font-weight:700; min-height:44px; display:list-item; padding:9px 0; }
      summary:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
      details p { color:var(--muted); max-width:750px; }
      .credits { margin-top:40px; max-width:780px; color:var(--muted); font-size:14px; }
      footer #year { display:inline; }
      @media(max-width:800px) { .features { grid-template-columns:repeat(2,minmax(0,1fr)); } }
      @media(max-width:640px) { .features { grid-template-columns:1fr; } .section { margin-top:56px; } .preview { margin-top:40px; } .product-icon { width:56px; height:56px; } }

      .dashboard-intro { max-width:680px; margin:0 0 28px; color:var(--muted); }
      .dashboard-gallery { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:24px; align-items:start; }
      .dashboard-gallery figure { margin:0; min-width:0; }
      .screenshot-link { display:block; border-radius:16px; }
      .screenshot-link img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:16px; }
      @media(max-width:800px) { .dashboard-gallery { grid-template-columns:1fr; gap:32px; } .phone-preview { width:min(100%,320px); justify-self:center; } }