:root{
  --bg:#0b1020;
  --bg-2:#111832;
  --card:#161f3f;
  --card-2:#1c2650;
  --line:#2a3567;
  --text:#e8ecff;
  --muted:#9aa6d4;
  --accent:#ffb43a;
  --accent-2:#2ee6c5;
  --accent-ink:#1a1204;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(46,230,197,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(255,180,58,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;
}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
header.site{
  position:sticky;top:0;z-index:20;
  background:rgba(11,16,32,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{
  font-family:'Sora',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--text);
}
.brand span{color:var(--accent)}
.brand:hover{text-decoration:none}
nav.main{display:flex;gap:6px;flex-wrap:wrap}
nav.main a{
  color:var(--muted);font-weight:500;font-size:15px;padding:8px 14px;border-radius:999px;
}
nav.main a:hover,nav.main a.active{background:var(--card);color:var(--text);text-decoration:none}
.menu-btn{display:none;background:var(--card);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:8px 14px;font:inherit;cursor:pointer}
@media(max-width:720px){
  .menu-btn{display:block}
  nav.main{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg-2);
    flex-direction:column;padding:12px 20px;border-bottom:1px solid var(--line)}
  nav.main.open{display:flex}
}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:56px 0 28px}
.hero h1{
  font-family:'Sora',sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.03em;
  font-size:clamp(34px,5.5vw,56px);margin:0 0 10px;
}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),#ff7a59);-webkit-background-clip:text;background-clip:text;color:transparent}
.verified{color:var(--accent-2);font-weight:600;font-size:14px;margin:0 0 18px}
.hero ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.hero li{padding-left:30px;position:relative;color:var(--muted)}
.hero li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:rgba(46,230,197,.15);color:var(--accent-2);font-size:12px;display:grid;place-items:center;top:3px}
.hero-img{border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.hero-img img{width:100%;height:auto}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding-top:36px}}

/* badges */
.badges{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;margin:12px 0 36px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted)
}
.badges b{color:var(--text)}
.badges span{display:inline-flex;align-items:center;gap:8px}
.badges img{width:22px;height:22px}


/* Offers Container */

/* Offers Container */
.offers {
    display: grid;
    gap: 14px;
}

/* Offer Card */
.offer {
    position: relative;
    display: grid;
    grid-template-columns: 260px 180px minmax(0, 1fr) 180px;
    align-items: center;
    gap: 18px;

    background: rgba(25, 75, 130, 0.20);
    border: 1px solid rgba(80, 150, 230, 0.20);
    border-radius: 5px;
    padding: 35px 25px 25px;
    min-height: 135px;

    transition: background .2s, border-color .2s;
}

.offer:hover {
    background: rgba(35, 100, 175, 0.28);
    border-color: rgba(100, 175, 255, 0.4);
}

/* Badge */
.rank {
    position: absolute;
    top: 0;
    left: 0;
    background: #65b7ff;
    color: #082544;
    font-weight: 800;
    font-size: 12px;
    text-transform: none;
    border-radius: 0 0 4px 0;
    padding: 5px 12px;
}

/* Logo */
.logo-box {
    grid-column: 1;
    background: transparent;
    border-radius: 0;
    padding: 0;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-box img {
    max-width: 220px;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Promotion */
.offer > div:not(.score) {
    grid-column: 3;
    grid-row: 1;
    text-align: center;
}

.offer .label {
    font-size: 11px;
    color: #a9d6ff;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 7px;
}

.offer h3 {
    margin: 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

/* Score */
.score {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: 22px 20px;
    align-items: center;
    column-gap: 10px;
    text-align: left;
}

.score .num {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background: rgba(5, 25, 50, 0.75);
    border-radius: 6px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.score small {
    grid-column: 2;
    grid-row: 2;
    display: block;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
}

.score small::before {
    content: "★★★★★";
    display: block;
    color: #ffc43d;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 17px;
    margin-bottom: 3px;
}

/* Button - Fixed Alignment */
.score .btn {
    position: absolute;
    right: 25px;
    top: 30%;
    transform: translateY(-50%);

    width: 180px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(20, 110, 205, 0.85);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;

    border: 1px solid rgba(120, 190, 255, 0.2);
    border-radius: 6px;
    padding: 20px 12px;
    text-align: center;
    box-shadow: none;
    transition: background .2s;
}

.score .btn:hover {
    background: rgba(35, 140, 235, 0.95);
    filter: none;
    text-decoration: none;
}

/* Fine Print */
.fine {
    grid-column: 1 / -1;
    font-size: 12px;
    line-height: 1.7;
    color: #b7cce0;
    border-top: 1px solid rgba(130, 180, 230, 0.15);
    padding-top: 12px;
    margin: 0;
}

.fine a {
    color: #79bdff;
    white-space: nowrap;
}

/* Tablet */
@media (max-width: 900px) {
    .offer {
        grid-template-columns: 180px 150px minmax(0, 1fr);
        gap: 12px;
    }

    .score .btn {
        position: static;
        transform: none;
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 12px;
    }

    .score {
        grid-template-rows: 22px 20px auto;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .offer {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 38px 18px 20px;
        text-align: center;
    }

    .logo-box {
        grid-column: 1;
        grid-row: auto;
        height: 65px;
    }

    .offer > div:not(.score) {
        grid-column: 1;
        grid-row: auto;
    }

    .score {
        grid-column: 1;
        grid-row: auto;
        display: grid;
        grid-template-columns: 40px 1fr;
        max-width: 200px;
        margin: 0 auto;
    }

    .score .btn {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 12px;
    }

    .fine {
        grid-column: 1;
        text-align: left;
    }
}


/* content */
section.block{margin-top:56px;}
h2{font-family:'Sora',sans-serif;font-size:clamp(26px,3.6vw,34px);letter-spacing:-.02em;margin:0 0 14px}
h3.sub{font-family:'Sora',sans-serif;font-size:19px;margin:28px 0 8px;color:var(--accent)}
.prose p{color:var(--muted);margin:0 0 12px}
.prose p strong{color:var(--text)}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px}

/* faq */
details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:0;padding:0 20px 18px;color:var(--muted)}

/* trust */
.trust{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
  background:#010841;border-radius:var(--radius);padding:20px}
.trust img{height:38px;width:auto;object-fit:contain;}

/* footer */
footer.site{margin-top:64px;border-top:1px solid var(--line);background:#080c1a;padding:40px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
footer h4{margin:0 0 12px;font-family:'Sora',sans-serif;font-size:15px;color:var(--text)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer p{color:var(--muted);font-size:14px;margin:0 0 10px}
.copy{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}

/* extra: inner pages */
.page-head{padding:48px 0 8px}
.page-head h1{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(30px,5vw,46px);margin:0 0 8px}
.page-head .verified{margin:0}
.article{max-width:820px}
.article h2{margin-top:34px}
.article p,.article li{color:var(--muted)}
.article ul{padding-left:20px}
.review-head{display:grid;grid-template-columns:170px 1fr 200px;gap:24px;align-items:center;
  background:linear-gradient(180deg,var(--card),var(--bg-2));border:1px solid var(--line);
  border-radius:20px;padding:24px;margin:8px 0 28px}
.review-head h2{margin:0 0 6px;font-size:22px}
.review-head .meta{color:var(--muted);font-size:14px;margin:0}
.review-head .cta{display:grid;gap:10px}
.btn.alt{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 8px}
.pc>div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.pc h3{margin:0 0 8px;font-family:'Sora',sans-serif;font-size:17px}
.pc .pro h3{color:var(--accent-2)}
.pc .con h3{color:#ff7a8a}
.pc ul{margin:0;padding-left:18px;color:var(--muted)}
.note{font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px;margin-top:22px}
@media(max-width:820px){.review-head{grid-template-columns:1fr;text-align:center}.pc{grid-template-columns:1fr}
  .review-head .logo-box{max-width:240px;margin:0 auto;width:100%}}