:root{
  --udf-max:1180px;--udf-bg:#0b1220;--udf-ink:#f5f7fa;--udf-muted:#cbd5e1;--udf-line:rgba(255,255,255,.12);
  --udf-primary:#6d8dff;--udf-accent:#7c5cff;--udf-cyan:#22d3ee;--udf-teal:#2dd4bf;--udf-pink:#ec4899;
  --udf-green:#22c55e;--udf-blue:#60a5fa;--udf-amber:#f59e0b;
  --udf-radius:16px;--udf-shadow:0 14px 46px rgba(2,6,23,.45);--udf-topbar:64px
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;color:var(--udf-ink);background:#0b1220;line-height:1.55;overflow-x:hidden}
.udf-wrap{max-width:var(--udf-max);margin:0 auto;padding:12px 14px}
/* Topbar */
.udf-topbar{position:sticky;top:0;z-index:60;background:rgba(10,14,28,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--udf-line)}
.udf-bar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.udf-brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:inherit;flex:1 1 auto;min-width:0;font-weight:800;letter-spacing:.1px}
@media(max-width:390px){.udf-brand{gap:4px}}
.udf-brand .udf-logo{height:36px;width:auto;display:block;flex-shrink:0}
@media(min-width:420px){.udf-brand .udf-logo{height:42px}}
@media(min-width:980px){.udf-brand .udf-logo{height:64px}}
.udf-wordmark{font-size:clamp(12px,4vw,18px);white-space:nowrap}
.udf-desktopNav{display:none;gap:18px;align-items:center;flex-shrink:0}
@media(min-width:980px){.udf-desktopNav{display:flex}}
.udf-dropdown{position:relative}
.udf-drop-trigger{background:transparent;border:0;color:var(--udf-ink);font-weight:700;cursor:pointer;padding:8px 10px;border-radius:10px}
.udf-drop-trigger:hover{background:rgba(255,255,255,.06)}
.udf-drop-menu{position:absolute;top:110%;left:0;min-width:220px;background:rgba(16,24,48,.98);border:1px solid var(--udf-line);border-radius:12px;box-shadow:var(--udf-shadow);padding:8px;display:none}
.udf-drop-menu a{display:block;color:#e7edff;text-decoration:none;padding:8px 10px;border-radius:8px}
.udf-drop-menu a:hover{background:rgba(255,255,255,.06)}
.udf-dropdown:hover .udf-drop-menu{display:block}
.udf-hamburger{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:0;padding:10px;border-radius:10px}
.udf-hamburger span{display:block;width:22px;height:2px;background:var(--udf-ink)}
@media(min-width:980px){.udf-hamburger{display:none}}
/* Mobile overlay */
#udf-mobileNav{position:fixed;inset:0;z-index:1000;display:none}
#udf-mobileNav.udf-active{display:block}
.udf-scrim{position:absolute;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(2px)}
.udf-panel{position:absolute;top:var(--udf-topbar);left:0;right:0;margin:0 auto;width:100%;max-width:var(--udf-max);background:#0f172a;border:1px solid var(--udf-line);border-top:0;border-radius:0 0 16px 16px;box-shadow:var(--udf-shadow);max-height:min(88dvh,720px);overflow:hidden;display:flex;flex-direction:column}
.udf-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--udf-line);position:sticky;top:0;background:#0f172a;z-index:1}
.udf-panel-header .udf-brand{gap:6px}.udf-panel-header .udf-logo{height:28px}
.udf-close{background:transparent;border:0;color:#e9eeff;font-size:28px;line-height:1;cursor:pointer;width:40px;height:40px;border-radius:10px}
.udf-panel-body{padding:12px 14px;display:grid;gap:14px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.udf-group-title{font-weight:900;color:#d7e3ff;margin:2px 0}
.udf-panel-body a{display:block;padding:12px 12px;border-radius:10px;color:#e7edff;text-decoration:none;font-size:18px}
.udf-panel-body a:hover{background:rgba(255,255,255,.06)}
.udf-fade-bottom{position:sticky;bottom:0;height:36px;background:linear-gradient(180deg,rgba(15,23,42,0) 0%,rgba(15,23,42,.9) 60%);pointer-events:none;border-bottom-left-radius:16px;border-bottom-right-radius:16px}
/* Hero */
.udf-hero{position:relative;padding:96px 14px 32px;border-bottom:1px solid var(--udf-line);overflow:hidden;background: radial-gradient(1300px 600px at 10% -10%, rgba(124,92,255,.14), transparent 60%), radial-gradient(1100px 520px at 110% 10%, rgba(34,211,238,.12), transparent 60%), #0b1220}
.udf-hero::before{content:""; position:absolute; inset:-20% -20% -40% -20%; background:
  radial-gradient(40% 35% at 20% 15%, rgba(124,92,255,.22), transparent 60%),
  radial-gradient(35% 30% at 80% 10%, rgba(34,211,238,.18), transparent 60%),
  radial-gradient(45% 40% at 60% 90%, rgba(99,102,241,.18), transparent 60%);
  filter: blur(16px); animation: udf-mesh 18s ease-in-out infinite alternate; pointer-events:none}
@keyframes udf-mesh{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1%,0) scale(1.03)}100%{transform:translate3d(2%,-1%,0) scale(1.02)}}
.udf-hero h1{font-size:clamp(30px,6vw,56px);margin:0 0 12px;letter-spacing:-.02em;background: linear-gradient(90deg, #e5edff, #9bb5ff, #e5edff);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation: udf-shimmer 8s linear infinite}
@keyframes udf-shimmer{0%{background-position:0 0}100%{background-position:200% 0}}
.udf-badge{display:inline-block;padding:6px 12px;border-radius:999px;font-size:12px;border:1px solid var(--udf-line);background:rgba(255,255,255,.06);color:#d2dbf2;margin-bottom:12px}
.udf-hero p{font-size:clamp(15px,3.6vw,19px);margin:0 0 22px;color:#cbd5e1}
.udf-cta{display:flex;gap:12px;flex-wrap:wrap}
.udf-btn{padding:12px 18px;border-radius:12px;border:1px solid rgba(124,92,255,.6);background:linear-gradient(180deg,#7c5cff,#5b8cff);color:#fff;text-decoration:none;font-weight:800;box-shadow:var(--udf-shadow);transition:transform .15s ease}
.udf-btn:hover{transform:translateY(-1px)}
.udf-btn.ghost{background:transparent;color:#d7e2ff;border-color:var(--udf-line);box-shadow:none}
/* Quicknav under hero */
.udf-quicknav{margin-top:22px;position:relative}
.udf-quickrow{display:flex;gap:10px;overflow:auto;padding:8px;border-top:1px solid var(--udf-line);border-bottom:1px solid var(--udf-line);scroll-snap-type:x mandatory}
.udf-quickrow::-webkit-scrollbar{height:8px}
.udf-quickrow::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.udf-pill{flex:0 0 auto;scroll-snap-align:start;text-decoration:none;color:#e7edff;font-weight:800;letter-spacing:.2px;border-radius:999px;padding:10px 14px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))}
.udf-pill:hover{background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05))}
.udf-pill span{opacity:.75}
/* Sections / Cards */
section{padding:56px 14px}
h2{margin:0 0 12px;font-size:24px}
.udf-sectionhead{margin:0 0 10px 0}
.udf-eyebrow{display:block;font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:#d7e3ff;opacity:.8;margin-bottom:4px}
.udf-title{font-size:28px;letter-spacing:-.02em;margin:0 0 4px 0}
.udf-subline{font-size:14px;color:#9fb0d8;margin:0 0 12px 0}
.udf-card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035)) padding-box, linear-gradient(135deg, rgba(124,92,255,.45), rgba(34,211,238,.35)) border-box;border:1px solid transparent;border-radius:var(--udf-radius);padding:18px;box-shadow:var(--udf-shadow);transition:transform .2s ease, box-shadow .2s ease}
.udf-card:hover{transform:translateY(-3px); box-shadow:0 18px 60px rgba(2,6,23,.6)}
.udf-grid{display:grid;gap:18px}
@media(min-width:980px){.udf-cols-2{grid-template-columns:1fr 1fr}.udf-cols-3{grid-template-columns:1fr 1fr 1fr}}
.udf-muted{color:var(--udf-muted)}
.udf-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.udf-small{font-size:14px;color:#a8b5cf}
/* Status chips */
.udf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.2px;box-shadow:0 6px 18px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.18)}
.udf-chip.ok{background:linear-gradient(180deg, #10b981, #22c55e); color:#042b1a}
.udf-chip.prog{background:linear-gradient(180deg, #60a5fa, #3b82f6); color:#051a34}
.udf-chip.dev{background:linear-gradient(180deg, #fbbf24, #f59e0b); color:#3b2402}
/* Footer */
.udf-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--udf-line);padding:22px 16px}
@media (prefers-reduced-motion: reduce){.udf-hero::before, .udf-btn, .udf-card{animation:none}}