:root{
  color-scheme:dark;
  --ground:#070F26; --ground-2:#0C1836; --panel:#101F42; --line:#1E3260;
  --ink:#EAF1FB; --ink-2:#B9C8DE; --muted:#8197B8;
  /* family palette, glow treatment */
  --blue:#88CCFF; --orange:#FF8844; --green:#00FF88;
  --blue-flat:#2563EB; --orange-flat:#F97316; --green-flat:#1FA65A;
  --r:14px;
  --display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:17px/1.6 var(--body);
  background-image:
    radial-gradient(circle at 15% -10%, rgba(37,99,235,.28), transparent 45%),
    radial-gradient(circle at 95% 20%, rgba(249,115,22,.14), transparent 35%);
  background-repeat:no-repeat;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;letter-spacing:-.01em}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(7,15,38,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:1.05rem;text-decoration:none;white-space:nowrap}
.b1{color:var(--blue)} .b2{color:var(--orange);font-style:italic} .b3{color:var(--green)}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{text-decoration:none;color:var(--ink-2);font-size:.92rem;padding:8px 10px;border-radius:8px}
.top nav a:hover{color:var(--ink);background:var(--panel)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:40px}
.eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--green);margin:0 0 12px}
.hero h1{font-size:clamp(2.5rem,6.5vw,4.3rem);font-weight:700}
.hl{color:var(--orange);font-style:italic}
.lede{color:var(--ink-2);font-size:1.15rem;max-width:36ch;margin:20px 0 0}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;text-decoration:none;background:var(--blue-flat);color:#fff;border:1px solid var(--blue-flat)}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--blue)}
.hero-art img{max-height:460px;width:auto;margin:0 auto;border-radius:var(--r);filter:drop-shadow(0 20px 50px rgba(0,0,0,.5))}

/* sections */
.section{padding-top:64px;padding-bottom:16px}
.section>h2{font-size:clamp(1.8rem,4vw,2.5rem)}
.sub{color:var(--ink-2);margin:10px 0 0;max-width:60ch}

/* apps */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.app{display:flex;gap:18px;align-items:flex-start;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .15s, transform .15s}
.app:hover{border-color:var(--blue);transform:translateY(-2px)}
.app .icon{width:80px;height:80px;border-radius:18px;flex:none;object-fit:cover;background:var(--ground-2)}
.app .body{min-width:0;display:flex;flex-direction:column;gap:8px}
.app .wm{width:auto;max-width:100%;height:34px;object-fit:contain;object-position:left center}
.app p{margin:0;color:var(--ink-2);font-size:.98rem}
.go{color:var(--blue);font-weight:600;font-size:.95rem}
.pill{align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.04em;padding:2px 10px;border-radius:999px;border:1px solid}
.pill.live{color:var(--green);border-color:rgba(0,255,136,.45);background:rgba(0,255,136,.08)}
.pill.test{color:var(--orange);border-color:rgba(255,136,68,.45);background:rgba(255,136,68,.08)}
.pill.dev{color:var(--blue);border-color:rgba(136,204,255,.4);background:rgba(136,204,255,.07)}

.workshop-h{font-size:1.1rem;margin-top:36px;color:var(--ink-2)}
.workshop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.ws{padding:18px;border:1px dashed var(--line);border-radius:var(--r);opacity:.82}
.ws img{height:28px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.ws p{margin:10px 0 0;color:var(--muted);font-size:.9rem}

/* fuse */
.fuse{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.fuse h2{font-size:clamp(2.2rem,5vw,3.2rem);color:var(--orange)}
.big{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);margin:10px 0 0}
.fuse p{color:var(--ink-2);margin:0 0 14px}
.fuse .big{color:var(--ink)}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.quote{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.25;margin:0;border-left:4px solid var(--green);padding-left:20px}
.story p{color:var(--ink-2);margin:0 0 14px}

/* work */
.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.tile{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);text-decoration:none}
.tile:hover{border-color:var(--orange)}
.tile h3{font-size:1.2rem}
.tile p{margin:0;color:var(--ink-2);flex:1}

/* footer */
.foot{margin-top:72px;border-top:1px solid var(--line);padding:28px 0 calc(40px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:.95rem}
.family a,.family span{display:inline-block;margin:8px 16px 0 0}
.family a{color:var(--ink-2)} .family a:hover{color:var(--blue)}
.family span{opacity:.6}
.fine{margin:20px 0 0}

@media (max-width:860px){
  .hero,.fuse,.story{grid-template-columns:1fr}
  .hero{padding-top:36px}
  .hero-art img{max-height:340px}
  .apps,.work,.workshop{grid-template-columns:1fr}
}
@media (max-width:480px){
  .top nav a{padding:6px 8px;font-size:.86rem}
  .app{padding:16px;gap:14px}
  .app .icon{width:60px;height:60px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.app{transition:none}}