/* ═══════════════════════════════════════════════════════════════════════ Nexunova Blog — shared stylesheet Dark brand system copied verbatim from rms.html so the blog is pixel-identical to the rest of the site. Fonts are loaded via in each page's (Outfit / Inter / JetBrains Mono). ═══════════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px;font-size:16px} :root{ --bg:#080B14; --bg1:#0A0E1A; --card:#0F1520; --card2:#131A28; --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.13); --white:#fff; --dim:rgba(240,244,255,.74); --muted:rgba(240,244,255,.5); --faint:rgba(240,244,255,.32); --cyan:#00D4FF; --cyan2:#0EA5E9; --purple:#7C3AED; --purple2:#a855f7; --grad:linear-gradient(135deg,#00D4FF 0%,#7C3AED 100%); --font-d:'Outfit',sans-serif; --font-b:'Inter',sans-serif; --mono:'JetBrains Mono',monospace; --sh:0 24px 60px rgba(0,0,0,.5); --maxw:1160px; --t:.28s cubic-bezier(.22,1,.36,1); } body{font-family:var(--font-b);background:var(--bg);color:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:rgba(0,212,255,.25);color:#fff} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} .skip{position:absolute;left:-999px;top:0;background:var(--cyan);color:#050709;padding:10px 16px;border-radius:0 0 8px 0;z-index:200;font-weight:700} .skip:focus{left:0} .eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)} h1,h2,h3{font-family:var(--font-d);letter-spacing:-.02em;line-height:1.1;color:var(--white);font-weight:800} em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:1rem;font-weight:700;line-height:1;padding:14px 26px;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t);white-space:nowrap} .btn svg{width:16px;height:16px} .btn-primary{background:var(--grad);color:#050709;box-shadow:0 12px 36px rgba(0,212,255,.32)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(0,212,255,.5)} .btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.2)} .btn-ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.45);transform:translateY(-1px)} .btn-sm{padding:10px 18px;font-size:.9rem} /* header / footer — identical to rms.html */ .hdr{position:sticky;top:0;z-index:100;background:rgba(8,11,20,.72);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s} .hdr.scrolled{border-color:var(--border);background:rgba(8,11,20,.9)} .hdr-in{display:flex;align-items:center;gap:24px;height:64px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:800;font-size:1.2rem;letter-spacing:-.02em} .brand-mark{width:30px;height:30px;border-radius:8px;background:var(--grad);color:#050709;display:grid;place-items:center;font-weight:900;font-size:1rem} .nav{display:flex;align-items:center;gap:4px;margin-left:8px} .nav a{padding:8px 12px;border-radius:8px;font-size:.92rem;font-weight:500;color:var(--dim);transition:background .14s,color .14s} .nav a:hover{background:rgba(255,255,255,.05);color:var(--white)} .nav a.active{color:var(--cyan)} .hdr-cta{display:flex;align-items:center;gap:10px;margin-left:auto} .hdr-cta .signin{font-size:.92rem;font-weight:600;color:var(--dim);padding:8px 10px} .hdr-cta .signin:hover{color:var(--cyan)} .burger{display:none;width:42px;height:42px;border:1px solid var(--border2);border-radius:10px;background:transparent;place-items:center;cursor:pointer} .burger svg{width:22px;height:22px;color:var(--white)} .mobile-nav{display:none;border-top:1px solid var(--border);background:var(--bg1);padding:12px 24px 20px} .mobile-nav a{display:block;padding:12px 8px;font-weight:600;color:var(--dim);border-bottom:1px solid var(--border)} .mobile-nav .btn{width:100%;justify-content:center;margin-top:12px} .hdr.open .mobile-nav{display:block} .ft{border-top:1px solid var(--border);background:var(--bg1);padding:56px 0 28px} .ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px} .ft-brand .brand{margin-bottom:14px} .ft-brand p{font-size:.9rem;color:var(--muted);max-width:32ch} .ft-col h4{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:14px} .ft-col a{display:block;font-size:.92rem;color:var(--dim);padding:5px 0} .ft-col a:hover{color:var(--cyan)} .ft-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap} .ft-bot p{font-size:.84rem;color:var(--muted)} .ft-bot a{font-size:.84rem;color:var(--dim);font-weight:600} .ft-bot a:hover{color:var(--cyan)} /* ═══════ blog-specific ═══════ */ .main{min-height:60vh} /* breadcrumb */ .crumb{font-size:.82rem;color:var(--muted);font-weight:500} .crumb a:hover{color:var(--cyan)} .crumb .sep{color:var(--faint);margin:0 8px} /* blog index hero */ .blog-hero{padding:64px 0 8px} .blog-hero .eyebrow{margin-bottom:14px;display:block} .blog-hero h1{font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.05;letter-spacing:-.03em;font-weight:900;max-width:16ch} .blog-hero p{margin-top:16px;font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--dim);max-width:56ch} /* post list */ .post-list{padding:40px 0 88px;display:grid;gap:18px} .post-card{display:block;border:1px solid var(--border);background:var(--card);border-radius:16px;padding:28px 30px;transition:transform var(--t),border-color var(--t),background var(--t)} .post-card:hover{transform:translateY(-3px);border-color:var(--border2);background:var(--card2)} .post-card .pc-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .tag{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.22);border-radius:100px;padding:4px 11px} .tag.purple{color:var(--purple2);background:rgba(168,85,247,.09);border-color:rgba(168,85,247,.24)} .pc-date{font-size:.8rem;color:var(--muted);font-family:var(--mono)} .post-card h2{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.15;margin-bottom:10px} .post-card:hover h2{color:var(--white)} .post-card p{color:var(--dim);font-size:1rem;max-width:64ch} .post-card .pc-read{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:.9rem;font-weight:700;color:var(--cyan)} .post-card .pc-read svg{width:15px;height:15px} /* article */ .article{padding:52px 0 24px} .article-head{max-width:760px;margin:0 auto} .article-head .a-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 18px} .article-head h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.08;letter-spacing:-.03em;font-weight:900} .a-byline{font-size:.9rem;color:var(--muted)} .a-byline strong{color:var(--dim);font-weight:600} .prose{max-width:720px;margin:0 auto;padding:8px 0 8px;font-size:1.08rem;line-height:1.75;color:var(--dim)} .prose>p:first-of-type{font-size:1.18rem;color:rgba(240,244,255,.86);line-height:1.7} .prose h2{font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--white);margin:44px 0 14px;line-height:1.18} .prose h3{font-size:1.2rem;color:var(--white);margin:30px 0 10px;font-weight:700} .prose p{margin:0 0 18px} .prose a{color:var(--cyan);font-weight:600;border-bottom:1px solid rgba(0,212,255,.35)} .prose a:hover{border-bottom-color:var(--cyan)} .prose strong{color:rgba(240,244,255,.92);font-weight:700} .prose ul,.prose ol{margin:0 0 18px;padding-left:24px} .prose li{margin:0 0 9px} .prose li::marker{color:var(--cyan)} .prose blockquote{margin:24px 0;padding:14px 22px;border-left:3px solid var(--cyan);background:rgba(0,212,255,.05);border-radius:0 10px 10px 0;color:rgba(240,244,255,.82);font-size:1.05rem} .prose hr{border:none;border-top:1px solid var(--border);margin:36px 0} /* end-of-post CTA */ .cta-block{max-width:720px;margin:44px auto 0;border:1px solid rgba(0,212,255,.22);background:linear-gradient(135deg,rgba(0,212,255,.06),rgba(124,58,237,.08));border-radius:18px;padding:34px 34px} .cta-block .eyebrow{color:var(--purple2)} .cta-block h3{font-size:1.45rem;font-weight:800;color:var(--white);margin:10px 0 8px;line-height:1.2} .cta-block p{color:var(--dim);margin-bottom:20px;max-width:52ch} .cta-block .btn-row{display:flex;gap:12px;flex-wrap:wrap} /* more-posts strip */ .more{max-width:720px;margin:56px auto 0;padding-top:34px;border-top:1px solid var(--border)} .more h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:16px} .more a{display:block;padding:12px 0;color:var(--dim);font-weight:600;border-bottom:1px solid var(--border);transition:color .14s} .more a:hover{color:var(--cyan)} .more a:last-child{border-bottom:none} @media(max-width:720px){ .nav,.hdr-cta .signin,.hdr-cta .btn{display:none} .burger{display:grid} .ft-grid{grid-template-columns:1fr 1fr} .post-card{padding:24px 22px} .article{padding:36px 0 16px} .cta-block{padding:28px 24px} } @media(max-width:520px){ .ft-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}