/* Layout: one left index (drawer on phone and tablet) and one open page. Presentation pages come first, then the guides. */
:root{
  --bg:#ebe6dc; --panel:#f6f3ec; --ink:#1e1c18; --muted:#666054; --line:#d9d1c3;
  --accent:#4f7a6b; --accent-ink:#ffffff; --accent-soft:#dbe7e1; --warn-bg:#fbf0d9; --warn-line:#e9d29f; --shadow:rgba(40,35,25,.18);
  --mark:#000000; --scrim:rgba(20,18,14,.45);
  --display:"Manrope","Segoe UI",system-ui,sans-serif; --body:"Manrope","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171613; --panel:#22201b; --ink:#ece6da; --muted:#a69f90; --line:#38342c;
  --accent:#6fa48f; --accent-ink:#10140f; --accent-soft:#263a32; --warn-bg:#352b1a; --warn-line:#5c4a28; --shadow:rgba(0,0,0,.45);
  --mark:#000000; --scrim:rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#171613; --panel:#22201b; --ink:#ece6da; --muted:#a69f90; --line:#38342c;
  --accent:#6fa48f; --accent-ink:#10140f; --accent-soft:#263a32; --warn-bg:#352b1a; --warn-line:#5c4a28; --shadow:rgba(0,0,0,.45);
  --mark:#000000; --scrim:rgba(0,0,0,.6); color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;padding:12px 20px;font:700 15px var(--body);text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}

/* shell */
.shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;max-width:1320px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 40px}
.brand{display:flex;align-items:center;gap:11px;font:800 20px var(--display);color:var(--ink);text-decoration:none}
.brand svg{width:40px;height:40px;border-radius:11px;background:var(--mark);padding:4px;flex:none}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);align-self:start;height:calc(100vh - 32px - env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.side .head{padding:16px 16px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.side input{width:100%;font:500 15px var(--body);padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.side nav{overflow:auto;padding:0 10px 14px;flex:1}
.side h4{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 10px 4px}
.side nav button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:9px 12px;font:500 15px var(--body);color:var(--ink);cursor:pointer}
.side nav button:hover{background:var(--accent-soft)}
.side nav button[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:800}
.side nav .grp{display:flex;align-items:center;gap:12px;font-weight:800;font-size:15.5px;padding:11px 12px;margin-top:4px}
.side nav .grp svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side nav .grp span{flex:1}
.side nav .grp.home[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}
.side nav .grp .chev{width:18px;height:18px;color:var(--muted);transition:transform .2s}
.side nav .grp[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.side nav .sub{padding-left:34px;display:grid;gap:1px;margin-bottom:6px}
.side nav .sub button{font-size:14.5px;color:var(--muted)}
.side nav .sub button[aria-current="true"]{color:var(--accent)}
.side .foot{border-top:1px solid var(--line);padding:12px 18px;font-size:13px;color:var(--muted)}
.close,.open{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:700 14px var(--body);color:var(--ink);cursor:pointer}

/* phone and tablet: top bar and drawer */
.topbar{display:none}
.scrim{display:none}
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr);padding-block:0 32px}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding-block:12px}
  .open,.close{display:inline-flex}
  .side{position:fixed;z-index:40;top:0;bottom:0;left:0;height:100%;height:100dvh;align-self:stretch;width:min(330px,88vw);border-radius:0 18px 18px 0;border-left:0;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);
    transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px var(--shadow)}
  body.menu .side{transform:none}
  body.menu .scrim{display:block;position:fixed;inset:0;z-index:35;background:var(--scrim)}
}

/* page */
main{min-width:0}
.page{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3.4vw,40px);min-width:0}
@media (max-width:980px){.page{margin-top:16px}}
.crumb{font-size:13px;color:var(--muted);margin-bottom:8px}
.page h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.015em;margin-bottom:10px}
.page h3{font-size:clamp(19px,2.2vw,22px);margin-bottom:6px}
.sub{color:var(--muted);font-size:17px;max-width:64ch}
.block{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.pager button{display:flex;align-items:center;gap:12px;min-width:0;text-align:left;background:var(--panel);border:2px solid var(--accent);border-radius:14px;padding:14px 16px;cursor:pointer;color:var(--ink);font:700 15px/1.3 var(--body)}
.pager button .tx{flex:1;min-width:0}
.pager button span.lb{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.pager button .ar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.pager button .ar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pager button.next{grid-column:2;text-align:right;background:var(--accent);color:var(--accent-ink)}
.pager button.next span.lb{color:var(--accent-ink);opacity:.85}
.pager button.next .ar{background:var(--accent-ink);color:var(--accent)}
.pager button:hover{filter:brightness(1.06)}
@media (max-width:520px){.pager button{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.pager button.next{align-items:flex-end}}

/* presentation parts */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-.02em;margin-block:12px 16px}
.hero h1 b{color:var(--accent)}
.lead{font-size:18px;color:var(--muted);max-width:56ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-block:24px 26px}
.facts{display:flex;flex-wrap:wrap;gap:26px}
.facts b{display:block;font-size:19px}.facts span{font-size:14px;color:var(--muted)}
.hero img{width:100%;border-radius:18px;box-shadow:0 22px 44px var(--shadow);display:block}
@media (max-width:1100px){.hero{grid-template-columns:1fr;gap:24px}.hero .media{order:-1}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px 20px;min-width:0}
.card p{color:var(--muted);font-size:15px}
.card .num{font:800 13px var(--display);letter-spacing:.1em;color:var(--accent);display:block;margin-bottom:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.chips span{font-size:13px;font-weight:700;background:var(--accent-soft);color:var(--accent);padding:4px 10px;border-radius:99px}
.rule{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.rule ol{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.rule li{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:baseline;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.rule li b{font:800 13px var(--display);letter-spacing:.1em;color:var(--accent)}
@media (max-width:860px){.rule{grid-template-columns:1fr}}
.phone{width:min(260px,100%);margin:0 auto;border-radius:34px;background:#1b1a17;padding:9px;box-shadow:0 22px 44px var(--shadow)}
.phone img{width:100%;border-radius:26px;display:block}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:22px}
.shots figure{margin:0;display:grid;gap:12px;justify-items:center;text-align:center}
.shots figcaption{font-size:14.5px;color:var(--muted);max-width:30ch}
.shots figcaption b{display:block;color:var(--ink)}
@media (max-width:760px){.shots{grid-template-columns:1fr}.shots .phone{width:min(260px,80%)}}
.tablewrap{overflow-x:auto;margin-top:18px;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:var(--bg)}
th,td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px;text-align:left;vertical-align:top}
th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--panel)}
tr:last-child td{border-bottom:0}
.compat td:first-child{font-weight:800;white-space:nowrap}
.specs td:first-child{color:var(--muted);width:38%}
.lims{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.lims li{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 16px;display:grid;gap:2px}
.lims li b{font-size:15.5px}.lims li span{color:var(--muted);font-size:15px}
.faq{display:grid;gap:10px;margin-top:18px}
.faq details{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin:0}
.faq summary{color:var(--ink);font-size:15.5px}
.faq details p{color:var(--muted);font-size:15px}

.brandh{margin-top:26px;font-size:20px}
.mq{width:100%;font:500 15px var(--body);padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);margin-top:14px}
.fam{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-top:10px}
.fam summary{color:var(--ink);font-size:15.5px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.fam .br{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.fam .cnt{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600}
.grp2{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.grp2 p{color:var(--muted);font-size:14px;margin-top:6px}
.mods{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mods span{font-family:var(--mono);font-size:12.5px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px 7px}
.mods span.t{border-color:var(--accent);color:var(--accent);font-weight:700}
.bdg{display:inline-block;font-size:12px;font-weight:800;padding:3px 9px;border-radius:99px}
.bdg.ok,.bdg.mid{background:var(--accent-soft);color:var(--accent)}
.bdg.lim{background:var(--warn-bg);color:var(--ink);border:1px solid var(--warn-line)}
/* guides */
.intro{color:var(--muted);max-width:65ch}
.pros{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block:16px 6px}
.pros div{border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14.5px}
.pros b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pros div.lim b{color:var(--muted)}
@media (max-width:600px){.pros{grid-template-columns:1fr}}
.steps{list-style:none;padding:0;margin:16px 0 0;counter-reset:s}
.steps>li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding-block:16px;border-top:1px solid var(--line)}
.steps>li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:14px}
.steps b{display:block;margin-bottom:2px}
.steps p{color:var(--muted);font-size:15px}
.check{margin-top:6px;font-size:14px;background:var(--accent-soft);border-radius:8px;padding:6px 10px;color:var(--ink)}
.check::before{content:"Verifică: ";font-weight:800;color:var(--accent)}
details{margin-top:8px}summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--accent)}
details p{margin-top:6px}
.code{font-family:var(--mono);font-size:13.5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;white-space:nowrap}
.note{margin-top:16px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:14px 16px;font-size:15px}
.stepshot{width:min(300px,100%);margin:14px 0 4px;border-radius:18px;padding:0;background:none;border:1px solid var(--line);overflow:hidden;box-shadow:0 10px 24px var(--shadow)}
.stepshot img{border-radius:0}
.warnbig{display:grid;grid-template-columns:44px 1fr;gap:14px;margin-top:20px;background:var(--warn-bg);border:2px solid var(--warn-line);border-radius:14px;padding:18px 20px}
.warnbig>span{width:44px;height:44px;border-radius:50%;background:#c9821f;color:#fff;display:grid;place-items:center;font:800 24px var(--display)}
.warnbig b{font-size:18px;display:block;margin-bottom:4px}
.warnbig p{font-size:15.5px;color:var(--ink)}
.warnbig p b{display:inline;font-size:inherit;margin:0}
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start;margin-top:14px}
.split .stepshot{margin:0;width:100%}
@media (max-width:860px){.split{grid-template-columns:1fr}.split .stepshot{width:min(300px,100%)}}
.params td:first-child{font-weight:800;white-space:nowrap;width:1%}
.ex{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:16px;display:grid;gap:10px}
.exh{display:flex;gap:14px;align-items:center}
.exh>span{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;flex:none}
.exh b{font-size:18px;display:block}.exh small{color:var(--muted)}
.ex>p{color:var(--ink)}.ex>p.muted{color:var(--muted);font-size:15px}
.rulebox{display:grid;gap:6px}
.rulebox div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14.5px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:baseline}
.rulebox i{font-style:normal;font-weight:800;font-size:12px;letter-spacing:.08em}
.rulebox i.c{color:#3d6ea3}.rulebox i.t{color:var(--accent)}.rulebox i.e{color:#7b5aa6}
.diagram{margin:12px 0 0}
.diagram img{width:100%;border-radius:12px;border:1px solid var(--line);display:block;background:#fff}
.diagram figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.wires{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.wires div{border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;font-size:13px;background:var(--bg)}
.wires b{display:block;font-size:15px;margin:0}
@media (prefers-reduced-motion:reduce){.side{transition:none}}
.dlbtn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:800;text-decoration:none;padding:12px 18px;border-radius:12px}