:root{
  --bg:#0C0A13;--bg-2:#120E1E;--panel:#17122A;--panel-2:#1E1836;
  --line:rgba(140,110,255,.18);--line-strong:rgba(140,110,255,.4);
  --paper:#F1EEFB;--muted:#9B93B8;--violet:#7C5CFF;--magenta:#FF4D8D;
  --grad:linear-gradient(100deg,#7C5CFF,#FF4D8D);--ok:#3EE08F;--gold:#FFC94D;
  --radius:18px;--display:"Space Grotesk",system-ui,sans-serif;--body:"Manrope",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--paper);font-family:var(--body);font-weight:400;line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15;letter-spacing:-.015em}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(600px 400px at 15% -5%,rgba(124,92,255,.16),transparent 65%),
  radial-gradient(700px 450px at 90% 10%,rgba(255,77,141,.1),transparent 65%)}
/* header */
header{position:sticky;top:0;z-index:60;background:rgba(12,10,19,.8);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:var(--display);font-weight:700;font-size:1.3rem;display:flex;align-items:center;gap:9px}
.logo .uno{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-dot{width:9px;height:9px;border-radius:50%;background:var(--magenta);box-shadow:0 0 12px var(--magenta)}
.nav-links{display:flex;gap:28px;font-size:.88rem;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--paper)}
.btn{display:inline-block;font-weight:700;font-size:.92rem;padding:12px 24px;border-radius:12px;border:1px solid var(--line-strong);background:var(--panel);transition:.15s}
.btn:hover{transform:translateY(-2px);border-color:var(--violet)}
.btn-grad{background:var(--grad);border:none;color:#fff;box-shadow:0 8px 28px rgba(124,92,255,.35)}
/* blog index */
.blog-hero{padding:70px 0 40px;text-align:center}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);background:rgba(124,92,255,.1);border:1px solid var(--line-strong);border-radius:999px;padding:7px 16px;margin-bottom:16px}
.blog-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:16px}
.blog-hero p{color:var(--muted);max-width:560px;margin:0 auto;font-size:1.1rem}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:40px 0 90px}
.post-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.post-card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 16px 40px rgba(124,92,255,.15)}
.post-card .cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:2.6rem;border-bottom:1px solid var(--line)}
.post-card .body{padding:22px;flex:1;display:flex;flex-direction:column}
.post-card .cat{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);font-weight:700;margin-bottom:8px}
.post-card h2{font-size:1.15rem;margin-bottom:10px}
.post-card p{font-size:.9rem;color:var(--muted);flex:1}
.post-card .meta{margin-top:16px;font-size:.78rem;color:var(--muted);display:flex;gap:12px}
/* article */
.article-head{padding:60px 0 30px}
.breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:20px}
.breadcrumb a:hover{color:var(--paper)}
.article-head .cat{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);font-weight:700}
.article-head h1{font-size:clamp(1.9rem,4.2vw,2.9rem);margin:12px 0 16px}
.article-head .meta{font-size:.85rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.article-cover{aspect-ratio:21/9;background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:4rem;margin:14px 0 40px}
article.content{font-size:1.06rem;color:#DDD6F0}
article.content h2{font-size:1.5rem;margin:38px 0 14px;color:var(--paper)}
article.content h3{font-size:1.2rem;margin:28px 0 10px;color:var(--paper)}
article.content p{margin-bottom:18px}
article.content ul,article.content ol{margin:0 0 18px 22px}
article.content li{margin-bottom:9px}
article.content strong{color:var(--paper);font-weight:600}
article.content a{color:var(--violet);text-decoration:underline}
.callout{background:var(--panel);border:1px solid var(--line-strong);border-left:3px solid var(--violet);border-radius:12px;padding:20px 24px;margin:28px 0}
.callout strong{color:var(--paper)}
.faq-block{margin:32px 0}
.faq-block details{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq-block summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-block summary::-webkit-details-marker{display:none}
.faq-block summary::after{content:"+";color:var(--magenta);font-size:1.2rem}
.faq-block details[open] summary::after{content:"−"}
.faq-block .a{padding:0 20px 18px;color:var(--muted);font-size:.94rem}
.cta-box{background:linear-gradient(120deg,var(--panel-2),var(--panel));border:1px solid var(--line-strong);border-radius:var(--radius);padding:36px;text-align:center;margin:50px 0 20px}
.cta-box h3{font-size:1.5rem;margin-bottom:10px}
.cta-box p{color:var(--muted);margin-bottom:22px}
.related{border-top:1px solid var(--line);padding:40px 0 90px}
.related h3{font-size:1.2rem;margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.related-grid a{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;transition:.15s}
.related-grid a:hover{border-color:var(--line-strong)}
.related-grid .cat{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);font-weight:700}
.related-grid b{display:block;margin-top:6px;font-weight:600}
/* footer */
footer{border-top:1px solid var(--line);background:var(--bg-2);color:var(--muted);font-size:.84rem;padding:44px 0}
.foot-inner{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a:hover{color:var(--paper)}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}.nav-links{display:none}.related-grid{grid-template-columns:1fr}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}