:root{
  --bg:#0b0f15; --panel:rgba(255,255,255,0.06); --stroke:rgba(255,255,255,0.12);
  --text:#eaf0f7; --sub:#b5c0d6; --brand:#ffb4e6; --brand2:#7ddcff; --accent:#a78bfa;
  --radius:20px; --shadow:0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  --blur:18px;
}
*{box-sizing:border-box}
html,body{margin:0;background:
  radial-gradient(1200px 800px at 10% -10%, #151c29 0%, transparent 60%),
  radial-gradient(1000px 800px at 120% 20%, #0f2330 0%, transparent 55%),
  linear-gradient(180deg, #0b0f15 0%, #0b0f15 100%);
color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";line-height:1.6}
a{color:var(--brand2); text-decoration:none}
a:hover{text-decoration:underline; opacity:.95}
.wrap{max-width:1120px; margin:0 auto; padding:0 18px}
header{position:sticky; top:0; z-index:30; backdrop-filter:saturate(140%) blur(14px); background:rgba(10,12,18,.55); border-bottom:1px solid var(--stroke)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px}
.logo{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px}
.logo-badge{width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow:var(--shadow)}
.menu{display:flex; align-items:center; gap:10px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.menu::-webkit-scrollbar{display:none}
.menu a{padding:10px 12px; border-radius:12px; flex:0 0 auto}
.menu a.cta{background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#0b0f15; font-weight:800; border:none; box-shadow:var(--shadow)}
.hero{padding:64px 0 32px}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:880px){ .grid-2{grid-template-columns:1.6fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter: blur(var(--blur))}
.card.pad{padding:22px}
@media(min-width:880px){ .card.pad{padding:26px} }
h1{font-size:clamp(28px, 4.5vw, 52px); line-height:1.1; margin:12px 0 8px}
h2{font-size:clamp(22px, 3.2vw, 34px); margin:0 0 12px}
h3{font-size:clamp(18px, 2.6vw, 22px); margin:0 0 8px}
.muted{color:var(--sub)}
.tag{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--stroke); border-radius:999px; background:rgba(255,255,255,.04)}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 16px; border-radius:14px; border:1px solid var(--stroke); color:#0b0f15; background:rgba(255,255,255,.03); cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#0b0f15; border:none; font-weight:900}
.btn.ghost{color:var(--text); border-color:var(--stroke); background:rgba(255,255,255,.03)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.btn.full{width:100%}
@media(max-width:520px){ .cta-row .btn{flex:1 1 100%} }
.list{display:grid; gap:10px; padding-left:0; list-style:none}
.list li{padding-left:22px; position:relative}
.list li::before{content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand2))}
.hero-image{width:100%; height:auto; aspect-ratio: 3 / 2; background:url('assets/hero.png') center/cover no-repeat; border-radius: var(--radius); border:1px solid var(--stroke)}
footer{margin:40px 0 80px}
.top{position:fixed; right:16px; bottom:16px; z-index:50}
.backhome{display:inline-block;margin-top:14px}
.ribbon{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:linear-gradient(135deg, rgba(255,180,230,.14), rgba(125,220,255,.14)); border:1px solid var(--stroke)}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:12px; padding:2px 6px; border:1px solid var(--stroke); border-radius:6px; background:rgba(255,255,255,.05)}
.service{display:flex; gap:14px; align-items:flex-start}
.service .dot{width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand2)); margin-top:.5em}
blockquote{margin:0; padding:16px; background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:14px}