:root{color-scheme:light;--ink:#293c4e;--muted:#637588;--line:#e4ebf5;--blue:#287fc2}
      *{box-sizing:border-box} body{margin:0;font:16px/1.7 system-ui,-apple-system,Segoe UI,sans-serif;background:linear-gradient(145deg,#f6fbff,#f5f1fd);color:var(--ink)}
      main{max-width:1120px;margin:36px auto 64px;padding:0 24px}
      .intro{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;min-height:490px;border-radius:24px;background:#17283c;color:#fff;box-shadow:0 18px 45px rgba(31,52,80,.13)}
      .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
      .intro::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,25,46,.92) 0%,rgba(20,32,54,.82) 39%,rgba(21,35,60,.36) 76%,rgba(21,35,60,.18) 100%)}
      .intro-content{width:100%;max-width:755px;padding:clamp(28px,6vw,66px)}
      .eyebrow{display:inline-block;margin:0 0 16px;color:#cddfff;font-weight:700;font-size:13px;letter-spacing:.075em;text-transform:uppercase}
      h1{font-size:clamp(32px,4.8vw,54px);line-height:1.12;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance}
      h2{font-size:22px;line-height:1.35;margin:0 0 10px}
      .lead{font-size:clamp(16px,1.9vw,19px);max-width:620px;color:#eff4ff;margin:0 0 26px;line-height:1.65}
      .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
      .cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 22px;border-radius:12px;background:#fff;color:#243951;text-decoration:none;font-weight:700}
      .cta:hover{background:#ecf3ff}
      .secondary{display:inline-flex;align-items:center;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;font-weight:650}
      .secondary:hover{background:rgba(255,255,255,.14)}
      .section-heading{margin:38px 0 18px}.section-heading h2{font-size:clamp(23px,3vw,30px)}.section-heading p{margin:0;color:var(--muted)}
      .features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 24px}
      .feature{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px}
      .feature p{margin:0;color:var(--muted)}
      .community{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,4vw,36px);margin:22px 0 28px}
      .community p{color:var(--muted);margin:0 0 18px;max-width:760px}.community .cta{background:#26384b;color:#fff}
      .note{color:var(--muted);font-size:14px}footer{border-top:1px solid var(--line);padding:24px;text-align:center;color:var(--muted);font-size:13px}
      a:focus-visible{outline:3px solid #76bbf4;outline-offset:3px}
      @media(max-width:650px){main{margin:18px auto 34px;padding:0 14px}.intro{min-height:530px;border-radius:18px;align-items:flex-end}.hero-image{object-position:center top}.intro::before{background:linear-gradient(0deg,rgba(12,22,41,.97) 0%,rgba(16,29,52,.87) 46%,rgba(18,29,48,.35) 100%)}.intro-content{padding:28px 22px 30px}.features{grid-template-columns:1fr}.section-heading{margin-top:30px}.hero-actions{align-items:stretch}.cta,.secondary{font-size:14px}}
      @media(max-width:390px){.intro-content{padding:24px 18px 27px}.intro{min-height:560px}}
      @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
    
/* Stage 4 public /about follows the application's surface and accent grammar. */
:root {--ink:#293449;--muted:#68778d;--line:#e6eaf4;--blue:#5369b5;}
body {background:#f7f8fc radial-gradient(ellipse 72% 330px at 84% 0%,rgba(119,132,204,.09),transparent 74%) no-repeat;}
.feature,.community {border-color:#e6eaf4;border-radius:21px;box-shadow:0 10px 32px rgba(37,47,84,.05);}
.feature p,.community p {color:#68778d;}
.intro {border-radius:24px;box-shadow:0 18px 52px rgba(30,43,75,.13);}
.cta,.secondary {transition:background-color .18s ease,border-color .18s ease,transform .18s ease;}
.community .cta {background:#293449;color:#fff;}
.community .cta:hover {background:#40516b;}
a:focus-visible {outline-color:#5369b5;}
@media(max-width:650px){.feature,.community{border-radius:18px;box-shadow:0 5px 18px rgba(37,47,84,.035);}.intro{border-radius:18px;}}
@media(prefers-reduced-motion:reduce){.cta,.secondary{transition:none;}}

/* Stage 5: action buttons share Kixxo's radius and tactile states while the
   bright CTA stays readable over the dark photo hero. */
.cta,.secondary {border-radius:13px;box-shadow:0 2px 9px rgba(30,42,70,.06);transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;}
.cta:hover {background:#f0f3fa;box-shadow:0 4px 14px rgba(30,42,70,.09);}
.secondary:hover {border-color:rgba(255,255,255,.74);background:rgba(255,255,255,.16);}
.community .cta {background:#5369b5;color:#fff;}
.community .cta:hover {background:#43589e;box-shadow:0 5px 14px rgba(83,105,181,.17);}
.cta:focus-visible,.secondary:focus-visible {outline:2px solid #5369b5;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.cta,.secondary{transition:none;}}

/* Stage 19 — public About uses the same pearl / lavender control palette. */
body { background-color:#f7f7fc; }
.feature,.community {background:linear-gradient(155deg,#fff,#fbfaff);border-color:rgba(161,156,193,.25);border-radius:22px;box-shadow:0 14px 36px rgba(68,61,108,.055);}
.community .cta {background:#655b83;color:#fff;border:1px solid rgba(99,83,138,.3);}
.community .cta:hover {background:#544a75;}
a:focus-visible {outline-color:#8276b7;}