/* ===== AutoSceltaGiusta — dark navy theme (flat, accessible, fully responsive) ===== */

:root{
  --bg:#0e1726;
  --bg-soft:#122236;
  --card:#15243a;
  --line:#27374f;
  --line-strong:#3f5474;
  --txt:#eef2f8;
  --muted:#b4c2d6;
  --muted-2:#9fb0c8;
  --accent:#ff6a33;        /* bright orange for accents/icons/headings */
  --btn:#c2410c;           /* deeper orange for buttons: white text = AA contrast */
  --btn-hover:#a8380a;
  --link:#8cbcef;
  --ok:#5cc98f;
  --gold:#e0bd5e;
  --maxw:1080px;
  --radius:8px;
}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(255,106,51,.10), transparent 60%),
    radial-gradient(900px 480px at -8% 0%, rgba(63,127,196,.09), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--txt);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img,svg,video,canvas{max-width:100%;height:auto}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:0;overflow-wrap:break-word}
a{color:var(--link)}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,22px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--btn);color:#fff;padding:10px 14px;border-radius:8px;z-index:60}

/* ---- Header ---- */
header.site{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;flex-wrap:wrap;gap:4px 8px;padding-top:6px;padding-bottom:6px}
.logo{font-family:-apple-system,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:clamp(1.05rem,3.5vw,1.22rem);
  color:var(--txt);display:flex;align-items:center;gap:9px;text-decoration:none;padding:6px 0}
.logo:hover{text-decoration:none}
.logo .mark{width:28px;height:28px;display:inline-block;flex:none}
.logo span{color:var(--accent)}
nav{display:flex;align-items:center;flex-wrap:wrap}
nav a{color:var(--muted);margin:2px;padding:9px 10px;font-size:.92rem;font-weight:500;text-decoration:none;border-radius:6px}
nav a:hover{color:var(--txt);text-decoration:none;background:rgba(255,255,255,.05)}
nav a.cta{color:var(--accent);font-weight:600}
@media(max-width:680px){
  header.site .wrap{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .logo{justify-content:center;padding:13px 0 11px}
  nav{justify-content:center;flex-wrap:wrap;gap:4px;border-top:1px solid var(--line);padding:9px 0 12px}
  nav a{font-size:.9rem;margin:0}
  nav a.cta{border:1px solid var(--accent);border-radius:999px;padding:7px 16px;margin-top:2px}
}

/* ---- Hero ---- */
.hero{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:clamp(34px,6vw,54px) 0}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,42px);align-items:center}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.hero h1{font-size:clamp(1.9rem,5.5vw,2.6rem);line-height:1.12;margin:0 0 16px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lead{color:var(--muted);font-size:clamp(1rem,2.6vw,1.12rem);max-width:520px;margin:0 0 24px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;line-height:0}
.hero-art svg{display:block;width:100%;height:auto}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{max-width:440px;margin-inline:auto}
}

/* ---- Trust bar ---- */
.trust{border-bottom:1px solid var(--line);background:var(--card)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;padding:16px 22px}
.trust .item{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.9rem;font-weight:500}
.trust .item svg{flex:none}

/* ---- Sections ---- */
.section{padding:clamp(34px,6vw,50px) 0}
.section.alt{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:640px;margin:0 0 30px}
.section-head .eyebrow{margin-bottom:10px}
.section-head h2{font-size:clamp(1.45rem,4vw,1.85rem);margin:0 0 8px}
.section-head p{color:var(--muted);margin:0;font-size:1.02rem}

/* ---- Buttons (white text on deep orange = accessible + clean) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--btn);color:#fff;font-weight:700;
  padding:12px 18px;border-radius:var(--radius);text-align:center;font-size:.95rem;border:1px solid var(--btn);
  min-height:44px;transition:background .15s,border-color .15s}
.btn:hover{text-decoration:none;background:var(--btn-hover);border-color:var(--btn-hover);color:#fff}
.btn.alt{background:transparent;border:1px solid var(--line-strong);color:var(--txt)}
.btn.alt:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.btn.big{padding:14px 24px;font-size:1rem}

/* ---- Cards grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.card .thumb{height:160px;position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border-bottom:1px solid var(--line)}
.card .thumb svg{width:72px;height:72px}
.card .rank{position:absolute;top:12px;left:12px;background:var(--bg);color:var(--accent);
  border:1px solid var(--line-strong);font-weight:700;font-size:.74rem;padding:3px 9px;border-radius:4px}
.card .body{padding:20px;flex:1;display:flex;flex-direction:column}
.tag{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;margin-bottom:9px}
.card h3{margin:0 0 8px;font-size:1.18rem;line-height:1.32}
.card p{color:var(--muted);font-size:.93rem;margin:0 0 15px;flex:1}
.card .meta-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:.84rem;color:var(--muted)}
.stars{color:var(--gold);letter-spacing:1px}

/* ---- Steps ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:20px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step .n{width:38px;height:38px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.05rem;color:var(--accent);background:var(--bg-soft);
  border:1px solid var(--line);margin-bottom:14px;font-family:Georgia,serif}
.step h3{margin:0 0 7px;font-size:1.06rem}
.step p{margin:0;color:var(--muted);font-size:.92rem}

/* ---- Ad slot ---- */
.adslot{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--muted);text-align:center;padding:22px;margin:28px 0;font-size:.83rem}

/* ---- Callout band ---- */
.band{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,5vw,38px);text-align:center;margin:10px 0}
.band h2{font-size:clamp(1.35rem,4vw,1.7rem);margin:0 0 8px}
.band p{color:var(--muted);max-width:520px;margin:0 auto 20px;font-size:1.02rem}

/* ---- Article / legal pages ---- */
article.post{padding:38px 0 64px;max-width:720px;margin:0 auto;overflow-wrap:break-word}
article.post>.eyebrow{margin-bottom:8px}
article.post h1{font-size:clamp(1.6rem,5vw,2.35rem);line-height:1.18;margin:0 0 6px}
article.post h2{margin-top:1.9em;font-size:clamp(1.25rem,3.5vw,1.5rem);padding-bottom:.3em;border-bottom:1px solid var(--line)}
article.post h3{margin-top:1.6em;font-size:1.18rem}
article.post p,article.post li{font-size:1.05rem}
article.post ul{padding-left:1.2em}
article.post li{margin:.3em 0}
.meta{color:var(--muted);font-size:.9rem;margin-bottom:18px;display:flex;gap:14px;flex-wrap:wrap}
.meta span{display:inline-flex;align-items:center;gap:6px}

.pick{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:var(--radius);padding:20px 22px;margin:24px 0}
.pick .label{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ok);font-weight:700;
  font-family:-apple-system,Segoe UI,Roboto,sans-serif}
.pick h3{margin:.3em 0 .3em;font-size:1.22rem}
.pick .stars{font-size:1rem}

/* tables — scrollable on small screens, never overflow the page */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;margin:24px 0;font-size:.93rem;border:1px solid var(--line)}
table.cmp th,table.cmp td{border-bottom:1px solid var(--line);padding:11px 13px;text-align:left}
table.cmp tr:last-child td{border-bottom:none}
table.cmp th{background:var(--bg-soft);color:var(--txt);font-family:-apple-system,Segoe UI,sans-serif;font-weight:600}
@media(max-width:480px){table.cmp{font-size:.84rem}table.cmp th,table.cmp td{padding:8px 9px}}

.disclosure{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;font-size:.84rem;color:var(--muted);margin:20px 0}
.disclosure strong{color:var(--txt)}

/* ---- Footer ---- */
footer.site{border-top:1px solid var(--line);margin-top:46px;padding:36px 0 44px;
  color:var(--muted);font-size:.89rem;background:var(--bg-soft)}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px;margin-bottom:24px}
footer.site h4{font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:var(--txt);font-size:.93rem;margin:0 0 11px}
footer.site a{color:var(--muted);display:block;padding:5px 0}
footer.site .fine{border-top:1px solid var(--line);padding-top:16px;line-height:1.6}

/* ---- Cookie consent bar ---- */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);border-top:1px solid var(--line-strong);
  padding:16px 20px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;
  box-shadow:0 -8px 28px rgba(0,0,0,.4)}
.cookiebar p{margin:0;font-size:.9rem;color:var(--muted);max-width:640px}
.cookiebar p a{color:var(--link)}
.cookiebar .actions{display:flex;gap:10px;flex-wrap:wrap}
.cookiebar button{font:inherit;font-weight:600;cursor:pointer;border-radius:8px;padding:11px 16px;min-height:44px;border:1px solid var(--line-strong)}
.cookiebar .accept{background:var(--btn);color:#fff;border-color:var(--btn)}
.cookiebar .reject{background:transparent;color:var(--txt)}
@media(max-width:600px){.cookiebar{flex-direction:column;align-items:stretch;text-align:center}.cookiebar .actions{justify-content:center}}

/* ---- Product review block ---- */
.product{display:grid;grid-template-columns:210px 1fr;gap:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:22px 0}
.product .media{align-self:start}
.imgslot{border:1px dashed var(--line-strong);border-radius:var(--radius);min-height:170px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted-2);font-size:.78rem;padding:12px;background:var(--bg-soft)}
.imgslot img{max-width:100%;height:auto;border-radius:6px}
.product .ptier{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--ok);margin-bottom:6px;font-family:-apple-system,Segoe UI,sans-serif}
.product h3{margin:.1em 0 .3em;font-size:1.25rem}
.product .verdict{color:var(--muted);font-style:italic;margin:.2em 0 .8em}
.product .specs{font-size:.84rem;color:var(--muted-2);margin:.2em 0 1em}
.procon{display:flex;gap:26px;flex-wrap:wrap;margin:.4em 0 1.1em}
.procon h4{margin:0 0 .25em;font-size:.82rem;font-family:-apple-system,Segoe UI,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.procon ul{margin:.1em 0;padding-left:1.1em;font-size:.95rem}
.procon .pros li{color:#bfe6cf}
.procon .cons li{color:#ecc7c7}
@media(max-width:600px){.product{grid-template-columns:1fr}}