:root{--bg:#070b16;--bg2:#0b1530;--text:#ecf2ff;--muted:#9fb0d0;--line:#243457;--card:#111a31;--accent:#4f46e5;--accent2:#06b6d4;--ok:#34d399}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(1200px 500px at 10% -10%,#233b72 0%,transparent 58%),radial-gradient(1100px 600px at 100% 0%,#2f2068 0%,transparent 55%),linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);position:relative;overflow-x:hidden}
.mesh{position:fixed;width:46vw;height:46vw;border-radius:50%;filter:blur(60px);opacity:.22;pointer-events:none;z-index:0;animation:meshFloat 16s ease-in-out infinite}
.mesh-a{left:-10vw;top:-12vw;background:radial-gradient(circle,#34d399 0%,#4f46e5 50%,transparent 75%)}
.mesh-b{right:-12vw;top:8vw;background:radial-gradient(circle,#06b6d4 0%,#7c3aed 55%,transparent 75%);animation-delay:2.5s}
@keyframes meshFloat{50%{transform:translateY(26px) translateX(20px) scale(1.05)}}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px;position:relative;z-index:1}.site-header{position:sticky;top:0;background:#0a1121c9;backdrop-filter:blur(10px);border-bottom:1px solid #1e2e50;z-index:10}.nav{display:flex;justify-content:space-between;align-items:center;height:68px}.logo{display:inline-flex;align-items:center;text-decoration:none}.logo-img{height:38px;width:auto;display:block;border-radius:8px}.nav nav{display:flex;gap:10px;flex-wrap:wrap}.nav a{color:#caddff;text-decoration:none;padding:8px 10px;border-radius:10px}.nav a:hover{background:#1a2744}
.hero{padding:52px 0}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}.hero h1{font-size:clamp(2.1rem,4.8vw,4rem);line-height:1.03;margin:0 0 10px;letter-spacing:-.02em}.hero h1 span{background:linear-gradient(90deg,#9cc8ff,#7ee8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{color:var(--muted);font-size:1.05rem}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap}.hero-badges span{background:#162240;border:1px solid #2c4274;color:#d9e8ff;border-radius:999px;padding:6px 11px;font-size:.84rem}
.ip-card{background:linear-gradient(160deg,rgba(22,34,63,.62),rgba(14,22,43,.56));backdrop-filter:blur(10px) saturate(140%);border:1px solid rgba(120,160,255,.35);border-radius:18px;padding:18px 18px 14px;margin-top:14px;box-shadow:0 18px 44px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease}.ip-card:hover{transform:perspective(900px) rotateX(1.5deg) rotateY(-2deg) translateY(-2px)}.label{margin:0;color:#a7b7d6;text-transform:uppercase;letter-spacing:.8px;font-size:.74rem}.ip-main-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.value{font-size:2rem;font-weight:800;word-break:break-all;margin:.2rem 0;text-shadow:0 0 24px rgba(123,188,255,.25)}.copy-inline{padding:8px 12px;border-radius:10px;border:1px solid #4a6db3;background:linear-gradient(180deg,#243c6c,#1a2f58);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(4,12,28,.35)}.copy-inline:hover{background:linear-gradient(180deg,#2a4579,#203760)}
.chip{display:inline-block;margin-right:8px;margin-top:6px;padding:4px 10px;border-radius:999px;background:#203358;border:1px solid #2f4776;color:#b8c9ea;font-size:.83rem}.chip.ok{background:#163a33;border-color:#2b7b68;color:#c6fff1}
.hero-art svg{width:100%;height:auto;display:block;border-radius:16px;border:1px solid #2d406e;box-shadow:0 16px 34px rgba(0,0,0,.34)}
.section{padding:34px 0}.section h2{font-size:1.9rem;margin:0 0 12px}.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}article{background:linear-gradient(160deg,rgba(19,29,55,.72),rgba(14,23,43,.66));backdrop-filter:blur(8px);border:1px solid rgba(110,143,215,.35);border-radius:14px;padding:16px;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .25s ease}article:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.32);border-color:#79a2ff}article h3{margin:0 0 8px}article a{color:#e5f1ff}
.meta{margin-top:14px;color:#8ea2c6}.alt{background:#0b1429;border-top:1px solid #1f3155;border-bottom:1px solid #1f3155}
pre{background:#0e1932;border:1px solid #2b3f6c;border-radius:10px;padding:14px;color:#d8e7ff;overflow:auto}
.site-footer{padding:26px 0;color:#9fb0d0}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}.hero-art{order:-1}}
@media (max-width:680px){.value{font-size:1.35rem}.nav nav{gap:6px;font-size:.92rem}}