
:root{--bg:#0c0f14;--s:#141820;--s2:#1a2030;--bd:#242d3d;--t:#e2e8f0;--m:#8494a7;--a:#3b82f6;--ad:rgba(59,130,246,.10);--ah:#60a5fa;--g:#34d399;--go:#fbbf24;--r:#f87171;--radius:16px;--rs:10px;--max:1200px;--f:'DM Sans',-apple-system,sans-serif;--fd:'Playfair Display',Georgia,serif}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--t);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;display:block}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(20px);background:rgba(12,15,20,.9);border-bottom:1px solid var(--bd)}
.nav-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.logo{font-family:var(--fd);font-size:1.15rem;font-weight:700;color:var(--t);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo-icon{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--a),#2563eb);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:700}
.nav-links{display:flex;gap:4px;list-style:none}
.nav-links a{color:var(--m);text-decoration:none;padding:7px 13px;border-radius:7px;font-size:.84rem;font-weight:500;transition:all .2s}
.nav-links a:hover,.nav-links a.active{color:var(--t);background:var(--s)}
.hamburger{display:none;background:none;border:none;color:var(--t);font-size:1.4rem;cursor:pointer}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--rs);font-size:.9rem;font-weight:600;text-decoration:none;transition:all .25s;border:none;cursor:pointer;font-family:var(--f)}
.btn-primary{background:var(--a);color:#fff}
.btn-primary:hover{background:var(--ah);transform:translateY(-1px)}
.btn-secondary{background:var(--s);color:var(--t);border:1px solid var(--bd)}
.btn-secondary:hover{border-color:var(--m)}

/* LAYOUT */
section{padding:70px 20px}
.section-inner{max-width:var(--max);margin:0 auto}
.section-label{display:inline-flex;color:var(--a);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.section-title{font-family:var(--fd);font-size:clamp(1.4rem,3vw,2rem);font-weight:700;margin-bottom:8px}
.section-desc{color:var(--m);font-size:.92rem;max-width:520px;margin-bottom:36px}

/* HERO with world map */
.hero{padding:130px 20px 70px;text-align:center;position:relative;overflow:hidden;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 500'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0' stop-color='%233b82f6' stop-opacity='.06'/%3E%3Cstop offset='1' stop-color='%233b82f6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='700' cy='250' rx='500' ry='200' fill='url(%23g)'/%3E%3Cpath d='M180 200c30-40 90-60 150-50s100 35 150 25 80-45 130-35 110 55 160 45 70-35 120-25 90 45 140 35' fill='none' stroke='%23242d3d' stroke-width='1.5'/%3E%3Cpath d='M150 260c40-25 80-35 130-30s100 25 150 18 70-30 120-22 90 35 140 28 80-25 130-18' fill='none' stroke='%23242d3d' stroke-width='1'/%3E%3Cpath d='M200 310c35-20 75-28 120-24s95 20 140 15 65-22 110-18 85 28 130 22' fill='none' stroke='%23242d3d' stroke-width='.8'/%3E%3Ccircle cx='330' cy='195' r='4' fill='%233b82f6' opacity='.2'/%3E%3Ccircle cx='560' cy='215' r='3' fill='%233b82f6' opacity='.15'/%3E%3Ccircle cx='780' cy='200' r='4' fill='%233b82f6' opacity='.2'/%3E%3Ccircle cx='1000' cy='225' r='3' fill='%233b82f6' opacity='.15'/%3E%3Ccircle cx='450' cy='250' r='2.5' fill='%233b82f6' opacity='.12'/%3E%3Ccircle cx='680' cy='240' r='2.5' fill='%233b82f6' opacity='.12'/%3E%3Ccircle cx='900' cy='255' r='2' fill='%233b82f6' opacity='.1'/%3E%3Ccircle cx='1100' cy='210' r='2' fill='%233b82f6' opacity='.1'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center 40%;background-size:110% auto}
.hero h1{font-family:var(--fd);font-size:clamp(1.8rem,4.5vw,2.8rem);font-weight:700;line-height:1.15;max-width:660px;margin:0 auto 14px;position:relative}
.hero h1 span{color:var(--a)}
.hero p{font-size:.98rem;color:var(--m);max-width:520px;margin:0 auto 26px;position:relative}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative}

/* CARD BOXES */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card-review{background:rgba(20,24,32,.85);backdrop-filter:blur(12px);border:1px solid rgba(59,130,246,.12);border-radius:var(--radius);padding:22px;position:relative;box-shadow:0 4px 30px rgba(0,0,0,.15)}
.card-review:hover{border-color:rgba(59,130,246,.35);transform:translateY(-3px);box-shadow:0 8px 40px rgba(0,0,0,.4);transition:all .3s}
.card-badge{position:absolute;top:11px;right:11px;font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:5px;text-transform:uppercase}
.card-header{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.card-logo{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0}
.card-header h3{font-size:.95rem;font-weight:700}
.card-type{font-size:.72rem;color:var(--m)}
.card-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.card-stat{background:var(--bg);border-radius:8px;padding:9px}
.card-stat-l{font-size:.62rem;color:var(--m);text-transform:uppercase;letter-spacing:.03em}
.card-stat-v{font-size:.84rem;font-weight:600}
.v-good{color:var(--g)}.v-warn{color:var(--go)}.v-blue{color:var(--a)}
.card-pros{margin-bottom:12px;list-style:none;padding:0}
.card-pros li{font-size:.78rem;color:var(--m);padding:2px 0;display:flex;gap:6px}
.card-pros li::before{content:'✓';color:var(--g);font-weight:700}
.card-score{display:flex;align-items:center;padding-top:11px;border-top:1px solid var(--bd)}
.score-l{font-size:.72rem;color:var(--m)}
.score-bar{flex:1;height:5px;background:var(--bg);border-radius:3px;margin:0 10px;overflow:hidden}
.score-fill{height:100%;border-radius:3px;background:var(--a)}
.score-num{font-size:.88rem;font-weight:700;color:var(--a)}
.card-btns{display:flex;gap:7px;margin-top:11px}
.btn-apply{flex:1;text-align:center;padding:9px;border-radius:8px;font-weight:600;font-size:.82rem;text-decoration:none;background:var(--a);color:#fff}
.btn-apply:hover{background:var(--ah)}
.btn-review{flex:1;text-align:center;padding:9px;border-radius:8px;font-weight:600;font-size:.82rem;text-decoration:none;background:var(--s2);color:var(--t);border:1px solid var(--bd)}
.btn-review:hover{border-color:var(--m)}

/* COUNTRY CARDS */
.countries-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.country-card{background:var(--s);border:1px solid var(--bd);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--t);transition:all .3s}
.country-card:hover{border-color:rgba(59,130,246,.3);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.cc-img{height:160px;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a2744,#0f1a2e)}
.cc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cc-img .cc-overlay{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:linear-gradient(transparent,rgba(12,15,20,.92));display:flex;justify-content:space-between;align-items:flex-end}
.cc-img .cc-flag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4rem;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));z-index:1;opacity:.3}
.cc-body{padding:12px 16px 16px}
.cc-body h3{font-size:.98rem;font-weight:700;margin-bottom:4px}
.cc-body p{font-size:.78rem;color:var(--m);line-height:1.5}
.cc-tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.cc-tag{font-size:.65rem;padding:4px 10px;border-radius:5px;background:var(--bg);color:var(--m);border:1px solid var(--bd)}

/* COUNTRY DETAIL HEADER - full width image */
.ch{width:100%;height:280px;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a2744,#0f1a2e)}
.ch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ch .ch-dim{position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(12,15,20,.95))}
.ch .ch-flag{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:5rem;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5));z-index:1;opacity:.2}
.ch .ch-text{position:absolute;bottom:0;left:0;right:0;padding:20px 24px}
.ch .ch-text .ch-inner{max-width:var(--max);margin:0 auto}

/* QUICK PICKS */
.qp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:40px}
.qp{background:var(--s);border:1px solid var(--bd);border-radius:12px;padding:16px;display:flex;gap:11px}
.qp:hover{border-color:rgba(59,130,246,.3)}
.qp-rank{width:26px;height:26px;border-radius:7px;background:var(--a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0}
.qp-info h4{font-size:.88rem;margin-bottom:2px}
.qp-info p{font-size:.72rem;color:var(--m);margin-bottom:6px}
.qp-links{display:flex;gap:5px}
.ql-r{font-size:.68rem;padding:3px 9px;border-radius:5px;background:var(--s2);color:var(--t);border:1px solid var(--bd);text-decoration:none;font-weight:600}
.ql-a{font-size:.68rem;padding:3px 9px;border-radius:5px;background:var(--a);color:#fff;text-decoration:none;font-weight:600}

/* COMPARE TABLE */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.8rem}
.cmp thead th{padding:9px 12px;border-bottom:1px solid var(--bd);color:var(--m);font-size:.68rem;text-transform:uppercase;text-align:left}
.cmp td{padding:11px 12px;border-bottom:1px solid rgba(36,45,61,.15)}
.cmp .tn{font-weight:600}.tm{color:var(--m)}
.cmp .tg{color:var(--g)}.tw{color:var(--go)}.ts{font-weight:700;color:var(--a)}
.cmp .tl{color:var(--a);font-weight:600;text-decoration:none;font-size:.78rem}
.cmp .tlm{color:var(--m);font-weight:600;text-decoration:none;font-size:.78rem}

/* TIPS */
.tips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tip{background:var(--s);border:1px solid var(--bd);border-radius:12px;padding:18px}
.tip-icon{font-size:1.2rem;margin-bottom:5px}
.tip h4{font-size:.88rem;margin-bottom:4px}
.tip p{font-size:.8rem;color:var(--m);line-height:1.6}

/* DETAIL PAGE */
.detail{background:var(--s);border:1px solid var(--bd);border-radius:var(--radius);padding:24px;margin-bottom:18px}
.d-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.d-logo{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.d-title h2{font-family:var(--fd);font-size:1.5rem}
.d-title p{color:var(--m);margin-top:2px}
.d-tags{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.d-tag{font-size:.65rem;padding:3px 9px;border-radius:5px;font-weight:600}
.d-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.d-stat{background:var(--bg);border-radius:10px;padding:12px}
.d-stat h4{font-size:.65rem;color:var(--m);text-transform:uppercase;margin-bottom:2px}
.d-stat .dv{font-size:1.05rem;font-weight:700}
.d-prose{color:var(--m);line-height:1.75;font-size:.9rem;margin-bottom:20px}
.d-prose h3{color:var(--t);font-size:.95rem;margin:18px 0 4px}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.pc-col{background:var(--bg);border-radius:10px;padding:14px}
.pc-col h4{margin-bottom:8px;font-size:.82rem}
.pc-col ul{list-style:none;padding:0}
.pc-col li{font-size:.78rem;color:var(--m);padding:2px 0}
.d-cta{display:flex;gap:9px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--bd)}

/* BREADCRUMB */
.bc{max-width:var(--max);margin:0 auto;padding:100px 24px 0;font-size:.73rem;color:var(--m)}
.bc a{color:var(--m);text-decoration:none}.bc a:hover{color:var(--t)}
.bc span{margin:0 5px}

/* STATIC PAGES */
.pg-head{padding:120px 24px 30px;text-align:center}
.pg-head h1{font-family:var(--fd);font-size:1.7rem}
.pg-body{max-width:680px;margin:0 auto;padding:0 20px 50px;color:var(--m);line-height:1.8;font-size:.9rem}
.pg-body h2{color:var(--t);font-family:var(--fd);font-size:1.1rem;margin:22px 0 6px}
.pg-body a{color:var(--a)}
.pg-body strong{color:var(--t)}

/* FOOTER */
footer{border-top:1px solid var(--bd);padding:22px 20px}
.ft{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.ft p{font-size:.72rem;color:var(--m)}
.ft div{display:flex;gap:4px}
.ft a{color:var(--m);font-size:.72rem;text-decoration:none;margin-left:16px}
.ft a:hover{color:var(--t)}

@media(max-width:768px){
.nav-links{display:none;position:absolute;top:55px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--bd);flex-direction:column;padding:12px}
.nav-links.open{display:flex}
.hamburger{display:block}
.cards-grid,.qp-grid{grid-template-columns:1fr}
.pros-cons{grid-template-columns:1fr}
.d-head{flex-direction:column;text-align:center}
.hero{padding:110px 16px 50px !important}
}

.hero{background-repeat:no-repeat !important;background-position:center 40% !important;background-size:110% auto !important;}

.score-fill{background:#3b82f6 !important;}
.score-num{color:#3b82f6 !important;}

/* Mini credit card shape */
.card-shape{width:60px !important;height:38px !important;border-radius:6px !important;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.55rem;color:#fff;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.3);letter-spacing:.03em}
.card-shape .chip{position:absolute;top:7px;left:7px;width:9px;height:7px;border-radius:1.5px;background:rgba(255,255,255,.3)}
.card-shape .stripe{position:absolute;bottom:5px;left:7px;right:7px;height:2.5px;border-radius:1px;background:rgba(255,255,255,.15)}
