:root{
  --bg:#07080d; --fg:#f4f5f8; --muted:#a3a8b8; --line:rgba(255,255,255,.09);
  --sun1:#ffd166; --sun2:#ff7a3d; --blue:#5b8cff;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  min-height:100svh; background:var(--bg); color:var(--fg); font-family:var(--font);
  display:flex; flex-direction:column; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:inherit}
a:focus-visible{outline:2px solid var(--sun1); outline-offset:4px; border-radius:6px}

/* background */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.grid{
  position:absolute; inset:-1px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 30%,transparent 75%);
}
.orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55}
.orb-a{width:420px; height:420px; background:radial-gradient(circle,var(--sun2),transparent 65%); top:-140px; right:-120px; animation:drift 14s ease-in-out infinite alternate}
.orb-b{width:460px; height:460px; background:radial-gradient(circle,var(--blue),transparent 65%); bottom:-200px; left:-180px; opacity:.35; animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(-40px,50px) scale(1.12)}}

/* header */
.top{padding:22px 22px 0; max-width:1080px; width:100%; margin:0 auto}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.mark{width:34px; height:34px; flex:none}
.rays{transform-origin:24px 24px; animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wordmark{font-weight:800; letter-spacing:.14em; font-size:15px}
.wordmark .thin{font-weight:300; color:var(--sun1); margin:0 .35em}

/* hero */
.hero{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:56px 22px 40px; display:flex; flex-direction:column; justify-content:center}
.eyebrow{display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); background:rgba(255,255,255,.03); padding:7px 14px 7px 12px; border-radius:999px}
.pulse{width:8px; height:8px; border-radius:50%; background:#3ddc97; box-shadow:0 0 0 0 rgba(61,220,151,.6); animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}

.title{margin:22px 0 18px; font-size:clamp(64px,19vw,168px); line-height:.92; font-weight:800; letter-spacing:-.045em}
.title .line{display:block; opacity:0; transform:translateY(24px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.title .line:nth-child(2){animation-delay:.15s}
@keyframes rise{to{opacity:1; transform:none}}
.shimmer{
  background:linear-gradient(100deg,var(--sun1) 0%,var(--sun2) 35%,#fff3d6 50%,var(--sun2) 65%,var(--sun1) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) .15s forwards, sheen 4.5s linear 1s infinite;
}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}

.lead{max-width:560px; font-size:clamp(17px,4.4vw,20px); color:var(--muted)}

.cards{display:grid; gap:12px; margin:32px 0 28px; max-width:620px}
.card{display:flex; flex-direction:column; gap:4px; padding:18px 18px 16px; border-radius:16px;
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  text-decoration:none; transition:border-color .2s, transform .2s, background .2s}
a.card:hover{border-color:rgba(255,209,102,.45); transform:translateY(-2px)}
.card-tag{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sun1)}
.card-muted .card-tag{color:var(--muted)}
.card-title{font-size:20px; font-weight:700}
.arrow{display:inline-block; transition:transform .2s}
a.card:hover .arrow{transform:translateX(4px)}
.card-text{font-size:15px; color:var(--muted)}

.contact{font-size:16px; color:var(--muted)}
.contact a{color:var(--fg); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,209,102,.6); word-break:break-word}
.contact a:hover{color:var(--sun1)}

.foot{width:100%; max-width:1080px; margin:0 auto; padding:20px 22px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); font-size:13px; color:#7d8294; display:flex; flex-wrap:wrap; gap:6px}

@media (min-width:720px){
  .top{padding:32px 40px 0}
  .hero{padding:72px 40px 56px}
  .foot{padding:24px 40px 32px}
  .cards{grid-template-columns:1fr 1fr}
  .wordmark{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .title .line{opacity:1; transform:none}
}