/* Step by Packet — stiluri comune pentru pagina de start, About, Privacy și 404.
   Culorile și fonturile sunt cele din ghidurile animate, ca site-ul să arate unitar. */
:root{--bg:#f3f7fc;--p1:#fff;--p2:#e9f0f8;--bd:#cbd8e7;--t1:#0c1a2b;--t2:#31506f;--t3:#5b7793;
--cy:#0e7490;--cy2:#0891b2;--cyt:rgba(14,116,144,.09);--ink:#fff;
--c-bl:#1d63c6;--c-gr:#0f7d4c;--c-ye:#956000;--c-vi:#5a3fd6;--c-vx:#0f766e;--c-re:#c42b42;--c-or:#c2410c;--c-mg:#be185d;
--pkt:#b45309;--grid:rgba(14,116,144,.07);
--fh:"Space Grotesk",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;--fb:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;--fm:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#080b16;--p1:#111831;--p2:#16203c;--bd:#21304f;--t1:#dce9f7;--t2:#93b2d0;--t3:#62809f;--cy:#22d3ee;--cy2:#67e8f9;--cyt:rgba(34,211,238,.09);--ink:#06101f;
--c-bl:#5aa9ff;--c-gr:#43dd8b;--c-ye:#ffc247;--c-vi:#a48bff;--c-vx:#2dd4bf;--c-re:#ff5f70;--c-or:#ff9f43;--c-mg:#f472b6;--pkt:#fbbf24;--grid:rgba(34,211,238,.05);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#080b16;--p1:#111831;--p2:#16203c;--bd:#21304f;--t1:#dce9f7;--t2:#93b2d0;--t3:#62809f;--cy:#22d3ee;--cy2:#67e8f9;--cyt:rgba(34,211,238,.09);--ink:#06101f;
--c-bl:#5aa9ff;--c-gr:#43dd8b;--c-ye:#ffc247;--c-vi:#a48bff;--c-vx:#2dd4bf;--c-re:#ff5f70;--c-or:#ff9f43;--c-mg:#f472b6;--pkt:#fbbf24;--grid:rgba(34,211,238,.05);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--bg);color:var(--t1);font:16px/1.6 var(--fb);-webkit-font-smoothing:antialiased}
a{color:var(--cy)}
:focus-visible{outline:2px solid var(--cy);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* antet */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.top .wrap{display:flex;align-items:center;gap:18px;height:58px}
.logo{display:flex;align-items:center;gap:10px;font:700 18px var(--fh);letter-spacing:-.01em;color:var(--t1);text-decoration:none;white-space:nowrap}
.logo svg{width:26px;height:26px;flex:none}
.top nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.top nav a{color:var(--t2);text-decoration:none;font-size:14.5px;padding:6px 10px;border-radius:8px}
.top nav a:hover{color:var(--t1);background:var(--p2)}
.tbtn{font:500 13px var(--fb);padding:6px 10px;border-radius:8px;border:1px solid var(--bd);background:var(--p1);color:var(--t1);cursor:pointer}
.skip{position:absolute;left:-9999px;top:10px;z-index:60;padding:8px 14px;border-radius:8px;border:1px solid var(--bd);background:var(--p1);color:var(--t1)}
.skip:focus{left:12px}
/* text de pagină simplă (About, Privacy, 404) */
.doc{max-width:720px;margin:0 auto;padding:56px 24px 24px}
.doc h1{font:700 clamp(34px,5vw,48px)/1.06 var(--fh);letter-spacing:-.025em;margin:0 0 18px}
.doc h2{font:600 22px/1.25 var(--fh);margin:40px 0 10px}
.doc p,.doc li{color:var(--t2);font-size:17px}
.doc p.lead{font-size:19px;color:var(--t1)}
.doc .small{font-size:14px;color:var(--t3)}
.doc code{font-family:var(--fm);font-size:.88em;background:var(--p2);border:1px solid var(--bd);border-radius:5px;padding:0 4px}
.btn{display:inline-block;font:600 15px var(--fb);padding:10px 16px;border-radius:10px;background:var(--cy);color:var(--ink);text-decoration:none}
.doc .cta{margin-top:36px}
.cli{margin:0 0 30px;padding:14px 16px;border:1px solid var(--bd);border-radius:12px;background:var(--p1);font:500 14.5px/1.6 var(--fm);color:var(--t2);white-space:pre-wrap;word-break:break-all}
.cli .pr{color:var(--cy);font-weight:700}
/* subsol */
.foot{margin-top:72px;border-top:1px solid var(--bd);padding:28px 0 44px;font-size:12.5px;color:var(--t3)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:14px;font-size:14px}
.foot nav a{color:var(--t2)}
.foot p{margin:0 0 8px;max-width:900px}
.foot .cr{color:var(--t2);font-size:13px;margin-bottom:14px}
@media (max-width:640px){.wrap{padding:0 16px}.top .wrap{gap:10px}.top nav a.hide-s{display:none}.doc{padding:40px 16px 16px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}