:root{
--bg:#0b1220; --bg2:#0f1724; --card:#0d1424; --accent:#06b6d4; --accent2:#22d3ee;
--text:#e6eef8; --muted:#9fb0c4; --glass:rgba(255,255,255,0.05);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial; color:var(--text); background:radial-gradient(1200px 800px at 20% -10%, #132037, transparent),linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);}


/* --- Layout / Card --- */
.wrap{min-height:100%; display:flex; align-items:center; justify-content:center; padding:56px 20px}
.card{width:100%; max-width:960px; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.08); border-radius:16px; box-shadow:0 10px 40px rgba(2,6,23,0.6); padding:32px; backdrop-filter: blur(8px)}
header{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:56px; height:56px; border-radius:12px; background:linear-gradient(135deg,var(--accent2),var(--accent)); display:flex; align-items:center; justify-content:center; font-weight:800; color:#052; font-size:18px; box-shadow:0 8px 30px rgba(6,182,212,.4)}
.lead{margin:6px 0 0; color:var(--muted); font-size:13px}


/* --- Fancy hero title --- */
h1{margin:0; font-size: clamp(24px, 3vw + 12px, 42px); line-height:1.15; letter-spacing:.2px}
.hero-sub{margin-top:10px; color:var(--muted)}


/* --- Links grid --- */
.links{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px}
@media (max-width:680px){ .links{grid-template-columns:1fr} .card{padding:22px} .logo{width:48px;height:48px} }


.tile{position:relative; display:flex; gap:12px; align-items:center; padding:16px; border-radius:12px; background:var(--glass); text-decoration:none; color:inherit; border:1px solid rgba(255,255,255,0.06); transform:translateY(8px); opacity:0}
.tile .icon{width:44px; height:44px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); display:flex; align-items:center; justify-content:center; font-size:18px}
.tile .title{font-weight:650}
.tile .desc{font-size:13px; color:var(--muted); margin-top:4px}
.tile::after{content:""; position:absolute; inset:-2px; border-radius:14px; pointer-events:none; background: radial-gradient(120px 60px at 15% 15%, rgba(34,211,238,.25), transparent 60%), radial-gradient(120px 60px at 85% 85%, rgba(6,182,212,.18), transparent 60%); filter:blur(16px); opacity:0; transition:opacity .35s ease}
.tile:hover{transform:translateY(-4px); box-shadow:0 10px 36px rgba(2,6,23,.55)}
.tile:hover::after{opacity:1}


/* --- Starry animated background --- */
.canvas-stars{position:fixed; inset:0; z-index:-1; opacity:.6; pointer-events:none}
.aurora{position:fixed; inset:-20%; z-index:-2; filter:blur(80px); opacity:.55; background:conic-gradient(from 180deg at 50% 50%, rgba(34,211,238,.10), rgba(236,72,153,.10), rgba(245,158,11,.10), rgba(34,211,238,.10))}


/* --- Appear animations --- */
.reveal{opacity:0; transform: translateY(18px);}
.revealed{opacity:1; transform:none; animation: pop .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes pop { 0%{opacity:0; transform:translateY(18px) scale(.98)} 60%{opacity:1; transform:translateY(0) scale(1.01)} 100%{transform:none} }


/* stagger for tiles */
.tile.revealed{animation-delay: var(--d, 0ms)}


/* Nav */
.nav{display:flex; gap:14px}
.nav a{color:var(--muted); text-decoration:none; font-size:13px; padding:6px 10px; border-radius:8px}
.nav a.active, .nav a:hover{color:var(--text); background:rgba(255,255,255,.06)}


footer{margin-top:22px; color:var(--muted); font-size:12px}