 {} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root{ --bg:#0f1220; --card:#141a2f; --muted:#b5bdf5; --text:#ecf1ff; --accent:#9ae6b4; --link:#7dd3fc; --brand:#ffd38f; } html,body{margin:0;padding:0;background:var(--bg);color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans";line-height:1.75} .wrap{max-width:1040px;margin:0 auto;padding:clamp(16px,2.5vw,32px)} header.hero{display:grid;gap:24px;align-items:center; background:radial-gradient(120% 140% at -10% -20%,rgba(125,211,252,.18),transparent 60%), linear-gradient(135deg,rgba(154,230,180,.14),rgba(255,211,143,.10) 60%,transparent 100%); border-radius:20px;padding:clamp(18px,2.4vw,30px);box-shadow:0 10px 30px rgba(0,0,0,.28)} header h1{margin:0;font-size:clamp(28px,4.2vw,46px);line-height:1.12} header p{margin:.3rem 0 1rem;color:var(--muted)} .cta-row{display:flex;gap:12px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px; font-weight:700;border:1px solid rgba(255,255,255,.12);text-decoration:none;color:var(--text); background:radial-gradient(70% 200% at 30% -50%,rgba(154,230,180,.35),transparent 70%), linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter:blur(8px); transition:transform .15s ease, box-shadow .2s ease} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)} a{color:var(--link)} .grid{display:grid;gap:22px;margin-top:24px} @media(min-width:900px){.grid{grid-template-columns:1.2fr .8fr}} article{background:var(--card);padding:clamp(18px,2.4vw,28px);border-radius:20px;box-shadow:0 10px 28px rgba(0,0,0,.25)} article h2{font-size:clamp(22px,3vw,30px);margin:8px 0} article h3{font-size:clamp(18px,2.4vw,24px);margin:18px 0 8px;color:var(--brand)} .note{color:var(--muted)} figure{margin:0 0 16px;background:#0b0f1d;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden} figure img{width:100%;height:auto;display:block} figcaption{padding:10px 12px;color:var(--muted);font-size:.95rem} .callout{background:linear-gradient(180deg,rgba(154,230,180,.08),rgba(125,211,252,.06));border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;margin:16px 0} .list{padding-left:18px;margin:8px 0} aside .card{background:var(--card);border-radius:16px;padding:16px;border:1px solid rgba(255,255,255,.08)} footer{color:var(--muted);text-align:center;margin:28px 0 8px} .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0} .kpi div{background:#0b0f1d;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;text-align:center} .kpi strong{display:block;font-size:1.2rem} .badge{display:inline-block;padding:4px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(154,230,180,.15);color:#d1ffe6;margin-right:8px} .tiny{font-size:.9rem;color:var(--muted)} :root{ --bg:#0e111b; --surface:#151a2f; --text:#eef2ff; --muted:#b5bdf5; --link:#7dd3fc; --brand:#9ae6b4; --accent:#ffd38f; --line:rgba(255,255,255,.12); } html,body{margin:0;padding:0;background:var(--bg);color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans"; line-height:1.75} a{color:var(--link); text-decoration:underline; text-underline-offset:3px} .wrap{max-width:1100px; margin:0 auto; padding:clamp(16px,2.6vw,32px)} .hero{display:grid; gap:18px; align-items:center; background: radial-gradient(120% 140% at -10% -20%, rgba(125,211,252,.18), transparent 60%), linear-gradient(135deg, rgba(154,230,180,.14), rgba(255,211,143,.10) 60%, transparent 100%); border-radius:20px; padding:clamp(18px,2.5vw,30px); box-shadow:0 10px 34px rgba(0,0,0,.28)} .hero h1{margin:0; font-size:clamp(28px,4vw,44px); line-height:1.15} .hero p{margin:.25rem 0 0; color:var(--muted)} .pillbar{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px} .pill{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))} .grid{display:grid; gap:22px; margin-top:24px} @media (min-width: 960px){ .grid{grid-template-columns: 1.3fr .7fr} } .card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(16px,2.2vw,24px); box-shadow:0 6px 22px rgba(0,0,0,.22)} .section-title{font-size:clamp(22px,2.8vw,30px); margin:6px 0 10px} .meta{color:var(--muted); font-size:.95rem} .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px} .btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; font-weight:700; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border:1px solid var(--line); color:var(--text); text-decoration:none} .btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.25)} .kpis{display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin: 8px 0 6px} .kpis .k{background:#0b0f1d; border:1px solid var(--line); border-radius:14px; text-align:center; padding:12px} .k strong{display:block; font-size:1.2rem} figure{margin:0; background:#0b0f1d; border:1px solid var(--line); border-radius:14px; overflow:hidden} figure img{display:block; width:100%; height:auto} figcaption{padding:10px 12px; color:var(--muted); font-size:.95rem} ul,ol{padding-left:18px} hr{border:0; height:1px; background:var(--line); margin:18px 0} footer{color:var(--muted); text-align:center; margin:28px 0 8px} .badge{display:inline-flex; gap:8px; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(154,230,180,.14); color:#eafff0; font-weight:700} .disclaimer{font-size:.92rem; color:var(--muted)}
