/* ================================================================
   Orvandex — Warm orange gradient, Verivox inspired
   Font: Figtree
   Orange #F97316 + charcoal #343231 + warm gray
   ================================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --bg:#FFFFFF;--bg-warm:#FFF8F1;--bg-light:#FEF3E2;--bg-gray:#F5F4F2;
    --ink:#343231;--slate:#4A4846;--muted:#6B6966;--dim:#9A9895;--light:#C8C6C3;
    --orange:#F97316;--orange-hover:#EA580C;--orange-light:#FFF7ED;--orange-100:#FFEDD5;--orange-glow:rgba(249,115,22,.08);
    --green:#16A34A;--green-light:#F0FDF4;
    --red:#DC2626;--red-bg:#FEF2F2;
    --border:#E5E3E0;--border-soft:#F0EEEB;
    --shadow-xs:0 1px 2px rgba(52,50,49,.03);--shadow-sm:0 2px 6px rgba(52,50,49,.05);--shadow-md:0 6px 16px rgba(52,50,49,.07);--shadow-lg:0 12px 28px rgba(52,50,49,.1);
    --font:'Figtree',system-ui,sans-serif;
    --r:10px;--r-sm:6px;--r-lg:14px;--r-pill:50px;
    --ease:.2s ease;
}

html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:16px;line-height:1.65;color:var(--slate);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--orange-hover)}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-weight:700;line-height:1.15;color:var(--ink);letter-spacing:-.02em}
h1{font-size:clamp(28px,4.5vw,48px)}
h2{font-size:clamp(22px,3.2vw,36px)}
h3{font-size:clamp(16px,2vw,20px)}
p{margin-bottom:16px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;font-family:var(--font);font-size:14px;font-weight:600;border-radius:var(--r);border:none;cursor:pointer;transition:all var(--ease);text-decoration:none}
.btn-orange{background:var(--orange);color:#fff}.btn-orange:hover{background:var(--orange-hover);color:#fff;box-shadow:0 4px 16px rgba(249,115,22,.2);transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--ink);border:1.5px solid var(--border)}.btn-white:hover{border-color:var(--orange);color:var(--orange)}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-ghost{background:none;color:var(--muted);padding:8px;font-size:13px;font-weight:600}.btn-ghost:hover{color:var(--orange)}

/* ── Header ── */
.hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft)}
.hd-flex{display:flex;align-items:center;justify-content:space-between;height:60px}
.hd-logo img{height:26px}
.hd-nav{display:flex;gap:4px}
.hd-link{padding:7px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--muted);transition:all var(--ease)}
.hd-link:hover{color:var(--ink);background:var(--bg-gray)}
.hd-link.on{color:var(--orange)}
.hd-cta{padding:8px 18px;background:var(--orange);color:#fff!important;font-size:12px;font-weight:700;border-radius:var(--r);transition:all var(--ease);text-decoration:none}
.hd-cta:hover{background:var(--orange-hover)}
.hd-burger{display:none;background:none;border:none;cursor:pointer;width:28px;height:28px;position:relative}
.hd-burger span{position:absolute;left:3px;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .2s}
.hd-burger span:first-child{top:9px}.hd-burger span:last-child{top:17px}
@media(max-width:768px){.hd-nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:#fff;padding:12px 24px;border-bottom:1px solid var(--border);box-shadow:var(--shadow-md)}.hd-nav.open{display:flex}.hd-burger{display:block}.hd-cta{display:none}}

/* ── Sections ── */
.sec{padding:72px 0}
.sec-warm{background:var(--bg-warm)}
.sec-light{background:var(--bg-light)}
.sec-gray{background:var(--bg-gray)}
.sec-orange{background:linear-gradient(225deg,#FF5600,#FA9A0A);color:#fff}
.sec-orange h2{color:#fff}.sec-orange p{color:rgba(255,255,255,.8)}
.sec-head{max-width:560px;margin-bottom:40px}
.sec-head.mid{text-align:center;margin-left:auto;margin-right:auto}
.sec-head p{font-size:16px;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--orange);background:var(--orange-light);padding:5px 12px;border-radius:var(--r-sm);margin-bottom:12px}

/* ── Hero (orange gradient header) ── */
.hero{padding:56px 0 48px;background:linear-gradient(225deg,#FF5600 0%,#FA9A0A 100%);color:#fff}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero h1{color:#fff;margin-bottom:12px}
.hero p{color:rgba(255,255,255,.85);font-size:17px;margin-bottom:24px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.hero-visual{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:24px}
@media(max-width:768px){.hero{padding:40px 0 32px}.hero-grid{grid-template-columns:1fr;gap:24px}.hero-visual{order:-1}}

/* ── Platform Cards (two-col sidebar layout) ── */
.compare-layout{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.compare-main{display:flex;flex-direction:column;gap:10px}
.cmp-card{display:flex;align-items:center;gap:16px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:18px 20px;transition:all var(--ease);box-shadow:var(--shadow-xs)}
.cmp-card:hover{border-color:var(--orange);box-shadow:var(--shadow-md)}
.cmp-card.top{border-color:var(--orange);background:var(--orange-light)}
.cmp-rank{width:28px;height:28px;background:var(--bg-gray);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0}
.cmp-card.top .cmp-rank{background:var(--orange);color:#fff}
.cmp-logo{height:18px;width:auto;max-width:60px;object-fit:contain;flex-shrink:0}
.cmp-info{flex:1;min-width:0}
.cmp-name{font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.cmp-tag{font-size:9px;font-weight:700;background:var(--orange);color:#fff;padding:2px 7px;border-radius:var(--r-sm);text-transform:uppercase}
.cmp-meta{font-size:11px;color:var(--dim);margin-top:1px}
.cmp-score{font-size:20px;font-weight:700;color:var(--orange);flex-shrink:0}
.cmp-btns{display:flex;gap:4px;flex-shrink:0}
.compare-side{background:var(--bg-warm);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px}
.compare-side h3{font-size:16px;margin-bottom:12px}
.compare-side p{font-size:13px;color:var(--muted)}
@media(max-width:900px){.compare-layout{grid-template-columns:1fr}}
@media(max-width:768px){.cmp-card{flex-wrap:wrap}.cmp-btns{width:100%}.cmp-btns a{flex:1;text-align:center;justify-content:center}}

/* ── USP icons ── */
.usp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.usp{text-align:center;padding:20px}
.usp-icon{width:48px;height:48px;background:var(--orange-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--orange);font-size:18px}
.usp h4{font-size:14px;margin-bottom:4px}
.usp p{font-size:12px;color:var(--dim);margin:0}
@media(max-width:768px){.usp-row{grid-template-columns:1fr 1fr}}

/* ── Review page ── */
.rv-bar{padding:36px 0;border-bottom:1px solid var(--border);background:var(--bg-warm)}
.rv-bar-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rv-thumb{width:48px;height:48px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center}
.rv-thumb img{max-width:32px;max-height:32px;object-fit:contain}
.rv-grid{display:grid;grid-template-columns:1fr 240px;gap:40px;padding:40px 0}
.rv-col h2{margin-top:28px;margin-bottom:10px;font-size:20px}.rv-col h2:first-child{margin-top:0}
.rv-col p{color:var(--muted)}
.rv-col ul,.rv-col ol{color:var(--muted);padding-left:20px;margin-bottom:16px}
.rv-col li{margin-bottom:6px}
.rv-pin{position:sticky;top:76px}
.rv-box{background:var(--bg-warm);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px}

.verdict{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.verdict-plus{background:var(--green-light);border:1px solid #BBF7D0;padding:18px;border-radius:var(--r)}
.verdict-minus{background:var(--red-bg);border:1px solid #FECACA;padding:18px;border-radius:var(--r)}
.verdict-plus h4{color:var(--green);font-size:12px;margin-bottom:8px}.verdict-minus h4{color:var(--red);font-size:12px;margin-bottom:8px}
.verdict-plus ul,.verdict-minus ul{list-style:none}.verdict-plus li,.verdict-minus li{font-size:12px;padding:2px 0}
.verdict-plus li{color:#065F46}.verdict-minus li{color:#991B1B}

.tbl{width:100%;border-collapse:collapse;margin:16px 0}
.tbl th,.tbl td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}
.tbl th{color:var(--dim);font-weight:600;width:40%;background:var(--bg-warm)}
.tbl td{color:var(--ink)}

@media(max-width:768px){.rv-grid{grid-template-columns:1fr}.rv-pin{position:static}.rv-bar-inner{flex-direction:column;align-items:flex-start}.verdict{grid-template-columns:1fr}}

/* ── Breadcrumbs ── */
.bc{padding:8px 0;font-size:12px;color:var(--dim)}
.bc a{color:var(--dim)}.bc a:hover{color:var(--orange)}
.bc span{margin:0 6px}

/* ── Footer ── */
.ft{background:var(--ink);color:var(--dim);padding:36px 0 0}
.ft-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px;padding-bottom:20px}
.ft-brand p{font-size:11px;line-height:1.7;margin-top:8px}
.ft-grp h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.15);margin-bottom:10px}
.ft-grp a{display:block;font-size:12px;color:rgba(255,255,255,.35);margin-bottom:6px}.ft-grp a:hover{color:var(--orange)}
.ft-fine{border-top:1px solid rgba(255,255,255,.06);padding:12px 0;font-size:10px;color:rgba(255,255,255,.2);line-height:1.7}
.ft-fine a{color:rgba(255,255,255,.3)}.ft-fine a:hover{color:var(--orange)}
.ft-fine i{color:var(--red);margin-right:3px;font-size:10px}
.ft-18{background:var(--red);color:#fff;font-size:8px;font-weight:700;padding:2px 5px;border-radius:3px;margin:0 3px}
@media(max-width:768px){.ft-cols{grid-template-columns:1fr}}

/* ── Cookie ── */
.ck{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1.5px solid var(--border);box-shadow:0 -4px 12px rgba(0,0,0,.05);z-index:10000;padding:12px 0}
.ck-flex{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ck p{font-size:12px;color:var(--muted);margin:0}.ck a{color:var(--orange)}
.ck-btns{display:flex;gap:6px;flex-shrink:0}
.ck-opts{padding:8px 0;border-top:1px solid var(--border)}
.ck-opts label{display:inline-block;padding:3px 8px;font-size:12px;color:var(--muted);cursor:pointer}
.ck-opts input{accent-color:var(--orange);margin-right:3px}
.ck-dot{position:fixed;bottom:14px;left:14px;width:34px;height:34px;background:#fff;color:var(--orange);border:1.5px solid var(--border);border-radius:50%;font-size:12px;cursor:pointer;z-index:9999;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.ck-dot:hover{box-shadow:var(--shadow-md)}

/* ── Articles ── */
.tip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tip{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:20px;transition:all var(--ease)}
.tip:hover{border-color:var(--orange);box-shadow:var(--shadow-md)}
.tip-tag{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--orange);letter-spacing:.5px;margin-bottom:8px}
.tip h3{font-size:15px;margin-bottom:4px}.tip h3 a{color:var(--ink);text-decoration:none}.tip h3 a:hover{color:var(--orange)}
.tip p{font-size:12px;color:var(--dim);margin:0}
@media(max-width:768px){.tip-grid{grid-template-columns:1fr}}

/* ── Legal ── */
.ley{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.ley:last-of-type{border:none}
.ley h2{font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ley h2 i{color:var(--orange);font-size:14px}
.ley p{color:var(--muted);margin-bottom:8px;font-size:14px}
.ley ul{color:var(--muted);padding-left:20px;margin-bottom:8px;font-size:13px}
.ley li{margin-bottom:4px}

/* ── Utils ── */
.text-center{text-align:center}