/* ================================
   Long-Tail First — style.css
   Interactive tabs, flag stripes,
   geo+niche-first layout
   ================================ */
:root{
  --bg:#F3FBF8;--wht:#FFFFFF;--txt:#10201B;--txt2:#58716A;
  --acc:#10B981;--acc-h:#059669;--brd:#CDEFE4;
  --rd:12px;--rds:6px;
  --sh:0 2px 10px rgba(16,32,27,.05);
  --shl:0 6px 24px rgba(16,32,27,.09);
  --hdr:56px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr)+16px)}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.7;color:var(--txt);background:var(--bg)}
a{color:var(--acc);text-decoration:none;transition:color .15s}a:hover{color:var(--acc-h)}
ul,ol{list-style:none}img{max-width:100%;display:block}
.l-w{max-width:1120px;margin:0 auto;padding:0 24px}

/* ======= HEADER ======= */
.l-hd{position:sticky;top:0;z-index:300;background:var(--wht);border-bottom:1px solid var(--brd)}
.l-hd-inner{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:var(--hdr);gap:12px}
.l-logo{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--txt);white-space:nowrap;margin-right:auto}.l-logo:hover{color:var(--acc)}
.l-nav ul{display:flex;gap:2px;align-items:center}
.l-nav a{font-size:12px;font-weight:500;color:var(--txt2);padding:4px 8px;border-radius:var(--rds);transition:background .15s,color .15s;white-space:nowrap}
.l-nav a:hover{background:var(--bg);color:var(--txt)}
.l-nav-cta{background:var(--acc)!important;color:var(--wht)!important;padding:4px 14px!important;border-radius:14px!important}
.l-nav-cta:hover{background:var(--acc-h)!important}
.l-burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px}
.l-burger span{display:block;width:20px;height:2px;background:var(--txt);border-radius:2px;transition:transform .2s,opacity .2s}
.l-burger.open span:nth-child(1){transform:rotate(45deg) translate(3px,4px)}
.l-burger.open span:nth-child(2){opacity:0}
.l-burger.open span:nth-child(3){transform:rotate(-45deg) translate(3px,-4px)}

/* Breadcrumbs */
.l-crumbs{padding:8px 0;background:var(--wht);border-bottom:1px solid var(--brd)}
.l-crumbs ol{display:flex;gap:6px;font-size:12px;color:var(--txt2)}
.l-crumbs li+li::before{content:'›';margin-right:6px;color:var(--brd)}
.l-crumbs a{color:var(--txt2)}.l-crumbs a:hover{color:var(--acc)}

/* ======= BUTTONS ======= */
.l-btn{display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;padding:10px 24px;border-radius:var(--rds);border:2px solid transparent;cursor:pointer;transition:all .15s;text-decoration:none;white-space:nowrap}
.l-btn:active{transform:scale(.97)}
.l-pri{background:var(--acc);color:var(--wht);border-color:var(--acc)}.l-pri:hover{background:var(--acc-h);border-color:var(--acc-h);color:var(--wht)}
.l-out{background:transparent;color:var(--acc);border-color:var(--acc)}.l-out:hover{background:var(--acc);color:var(--wht)}
.l-ghost{background:transparent;color:var(--txt2);border-color:var(--brd)}.l-ghost:hover{border-color:var(--acc);color:var(--acc)}
.l-sm{font-size:12px;padding:6px 14px}.l-lg{font-size:16px;padding:14px 32px}.l-full{width:100%}

/* ======= SECTIONS ======= */
.l-sec{padding:64px 0}
.l-sec.l-alt{background:var(--wht)}
.l-sec h2{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:10px}
.l-lead{font-size:15px;color:var(--txt2);max-width:640px;margin-bottom:32px;line-height:1.7}
.l-cta-c{margin-top:28px}

/* ======= 1. HERO ======= */
.l-hero{padding:64px 0 48px;background:linear-gradient(165deg,var(--wht) 0%,#E6F9F1 60%,var(--bg) 100%)}
.l-hero-row{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.l-hero h1{font-size:32px;font-weight:800;line-height:1.18;margin-bottom:14px}
.l-hero-sub{font-size:15px;color:var(--txt2);margin-bottom:24px;line-height:1.7}
.l-hero-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.l-hero-nums{display:flex;gap:24px;font-size:13px;color:var(--txt2)}
.l-hero-nums strong{color:var(--acc);font-size:18px;display:block}
.l-hero-map{text-align:center}
.l-map-svg{width:100%;max-width:320px;height:auto}
.l-map-dot{filter:drop-shadow(0 0 3px rgba(16,185,129,.5))}

/* ======= TABS SYSTEM ======= */
.l-tabs-wrap{margin-top:8px}
.l-tab-bar{
  display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;
  scrollbar-width:thin;scrollbar-color:var(--brd) transparent;
  -webkit-overflow-scrolling:touch;
}
.l-tab-bar::-webkit-scrollbar{height:4px}
.l-tab-bar::-webkit-scrollbar-thumb{background:var(--brd);border-radius:2px}
.l-tab{
  font-size:13px;font-weight:600;padding:8px 16px;
  border:1px solid var(--brd);border-radius:20px;
  background:var(--wht);color:var(--txt2);cursor:pointer;
  white-space:nowrap;transition:all .2s;flex-shrink:0;
}
.l-tab:hover{border-color:var(--acc);color:var(--acc)}
.l-tab.active{background:var(--acc);color:var(--wht);border-color:var(--acc)}

.l-tab-panels{position:relative;min-height:200px}
.l-panel{
  background:var(--wht);border:1px solid var(--brd);border-radius:var(--rd);
  padding:28px 24px;box-shadow:var(--sh);
  animation:fadeTab .3s ease;
  display:none;
}
.l-panel.active{display:block}
@keyframes fadeTab{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.l-panel h3{font-size:18px;font-weight:700;margin-bottom:10px}
.l-panel>p{font-size:14px;color:var(--txt2);line-height:1.65;margin-bottom:16px}
.l-panel-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.l-panel-tags span{font-size:11px;padding:4px 10px;background:#ECFDF5;color:var(--acc-h);border:1px solid var(--brd);border-radius:12px}

/* Flag stripes */
.l-flag-stripe{height:4px;border-radius:2px;margin-bottom:16px}
.l-flag-stripe.us{background:linear-gradient(90deg,#B22234 33%,#FFFFFF 33%,#FFFFFF 66%,#3C3B6E 66%)}
.l-flag-stripe.uk{background:linear-gradient(90deg,#012169 33%,#FFFFFF 33%,#FFFFFF 66%,#C8102E 66%)}
.l-flag-stripe.ca{background:linear-gradient(90deg,#FF0000 33%,#FFFFFF 33%,#FFFFFF 66%,#FF0000 66%)}
.l-flag-stripe.de{background:linear-gradient(180deg,#000 33%,#DD0000 33%,#DD0000 66%,#FFCC00 66%);height:12px;width:48px;border-radius:3px}
.l-flag-stripe.es{background:linear-gradient(180deg,#AA151B 25%,#F1BF00 25%,#F1BF00 75%,#AA151B 75%);height:12px;width:48px;border-radius:3px}
.l-flag-stripe.fr{background:linear-gradient(90deg,#002395 33%,#FFFFFF 33%,#FFFFFF 66%,#ED2939 66%)}
.l-flag-stripe.au{background:linear-gradient(90deg,#012169 50%,#FFFFFF 50%,#FFFFFF 75%,#FF0000 75%)}

/* Traffic mix bars */
.l-mix{margin-bottom:16px}
.l-mix h4{font-size:13px;font-weight:700;margin-bottom:8px}
.l-mix-bars{max-width:400px}
.l-mb{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:12px}
.l-mb span{min-width:48px;color:var(--txt2)}
.l-mb span:last-child{min-width:32px;text-align:right;font-weight:600;color:var(--txt)}
.l-bar{flex:1;height:7px;background:#E8F5F0;border-radius:4px;overflow:hidden}
.l-fill{height:100%;background:linear-gradient(90deg,var(--acc),#34D399);border-radius:4px}

/* ======= 4. BUY CARDS 5-col ======= */
.l-cards-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.l-card{background:var(--bg);border:1px solid var(--brd);border-radius:var(--rd);padding:22px 18px;box-shadow:var(--sh);display:flex;flex-direction:column}
.l-alt .l-card{background:var(--bg)}
.l-card h3{font-size:15px;font-weight:700;margin-bottom:6px}
.l-card p{font-size:12px;color:var(--txt2);flex:1;margin-bottom:12px;line-height:1.5}

/* ======= PACKAGES ======= */
.l-pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.l-pkg{background:var(--wht);border:1px solid var(--brd);border-radius:var(--rd);padding:24px 16px 20px;box-shadow:var(--sh);display:flex;flex-direction:column;position:relative;transition:box-shadow .15s,transform .15s}
.l-alt .l-pkg{background:var(--bg)}
.l-pkg:hover{box-shadow:var(--shl);transform:translateY(-1px)}
.l-pkg-pop{border-color:var(--acc);box-shadow:0 4px 16px rgba(16,185,129,.12)}
.l-pkg-tag{position:absolute;top:-10px;left:16px;font-size:10px;font-weight:700;padding:3px 10px;background:var(--acc);color:var(--wht);border-radius:8px}
.l-pkg h3{font-size:16px;font-weight:700;margin-bottom:4px}
.l-pkg-pr{font-size:24px;font-weight:800;color:var(--acc);margin-bottom:10px}
.l-pkg-pr small{font-size:13px;font-weight:400;color:var(--txt2)}
.l-pkg-vol{margin-bottom:10px}
.l-pkg-vol span{font-size:11px;color:var(--txt2);display:block;margin-top:3px}
.l-pkg ul{flex:1;margin-bottom:12px}
.l-pkg li{font-size:12px;color:var(--txt2);padding:4px 0 4px 16px;position:relative;border-bottom:1px solid #f0f7f4}
.l-pkg li::before{content:'✓';position:absolute;left:0;color:var(--acc);font-weight:700;font-size:11px}

/* ======= SOURCES ======= */
.l-src-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.l-src{background:var(--wht);border:1px solid var(--brd);border-radius:var(--rd);padding:20px 16px;box-shadow:var(--sh)}
.l-src svg{margin-bottom:8px}
.l-src h3{font-size:14px;font-weight:700;margin-bottom:4px}
.l-src p{font-size:12px;color:var(--txt2);line-height:1.5}

/* ======= CHANNELS ======= */
.l-ch-list{max-width:580px}
.l-ch{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--brd);font-size:14px;color:var(--txt2)}
.l-dot{width:8px;height:8px;min-width:8px;background:var(--acc);border-radius:50%;margin-top:7px}
.l-ch strong{color:var(--txt)}

/* ======= RANK ======= */
.l-rank-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.l-rkc{background:var(--wht);border:1px solid var(--brd);border-radius:var(--rd);padding:24px 20px;box-shadow:var(--sh);transition:box-shadow .15s}
.l-rkc:hover{box-shadow:var(--shl)}
.l-rkc-h{font-size:28px;margin-bottom:8px}
.l-rkc h3{font-size:17px;font-weight:700;margin-bottom:6px}
.l-rkc p{font-size:13px;color:var(--txt2);line-height:1.55}

/* ======= DIRECT ======= */
.l-dir-list{max-width:560px;display:flex;flex-direction:column;gap:6px}
.l-dl{background:var(--bg);border:1px solid var(--brd);border-radius:var(--rds);padding:12px 14px;font-size:13px;color:var(--txt2)}
.l-alt .l-dl{background:var(--bg)}
.l-dl strong{color:var(--txt)}

/* ======= BEFORE/AFTER ======= */
.l-ba-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.l-ba{background:var(--wht);border:1px solid var(--brd);border-radius:var(--rd);padding:20px 16px;box-shadow:var(--sh);position:relative}
.l-ba-tag{font-size:11px;font-weight:700;color:var(--acc-h);background:#ECFDF5;padding:3px 10px;border-radius:10px;display:inline-block;margin-bottom:12px;border:1px solid var(--brd)}
.l-ba-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.l-ba-side{border-radius:var(--rds);overflow:hidden}
.l-ba-b{border:1px solid #FCA5A5}
.l-ba-a{border:1px solid var(--acc)}
.l-ba-side h4{font-size:11px;font-weight:700;padding:6px 10px;text-align:center}
.l-ba-b h4{background:#FEF2F2;color:#B91C1C}
.l-ba-a h4{background:#ECFDF5;color:var(--acc-h)}
.l-bm{display:flex;justify-content:space-between;padding:5px 10px;font-size:11px;border-bottom:1px solid #f0f7f4}
.l-bm span:first-child{color:var(--txt2)}
.l-red{color:#DC2626;font-weight:700}
.l-grn{color:var(--acc-h);font-weight:700}

/* ======= STEPS ======= */
.l-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.l-stp{background:var(--bg);border:1px solid var(--brd);border-radius:var(--rd);padding:18px 14px;text-align:center}
.l-alt .l-stp{background:var(--bg)}
.l-stp span{font-size:18px;font-weight:800;color:var(--acc);font-family:monospace;display:block;margin-bottom:4px}
.l-stp strong{font-size:12px;display:block;margin-bottom:3px}
.l-stp p{font-size:11px;color:var(--txt2);margin:0}

/* ======= PROCESS ======= */
.l-proc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.l-ps{background:var(--wht);border:1px solid var(--brd);border-radius:var(--rd);padding:18px 14px;box-shadow:var(--sh)}
.l-ps-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--acc);color:var(--wht);font-size:11px;font-weight:700;margin-bottom:6px}
.l-ps strong{display:block;font-size:13px;margin-bottom:3px}
.l-ps p{font-size:11px;color:var(--txt2);margin:0;line-height:1.4}

/* ======= DATA ======= */
.l-data-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.l-dg{background:var(--wht);border:1px solid var(--brd);border-radius:var(--rd);padding:18px 14px;font-size:14px;font-weight:700;color:var(--acc);box-shadow:var(--sh)}
.l-dg p{font-size:11px;color:var(--txt2);font-weight:400;margin-top:4px}

/* ======= BOT ======= */
.l-bot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.l-bp{background:var(--bg);border:1px solid var(--brd);border-radius:var(--rds);padding:10px 12px;font-size:12px}
.l-alt .l-bp{background:var(--bg)}
.l-bp strong{color:var(--txt);display:block}

/* ======= WHO ======= */
.l-who-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.l-wh{background:var(--wht);border:1px solid var(--brd);border-radius:var(--rds);padding:12px 14px;font-size:13px;color:var(--txt2);box-shadow:var(--sh)}

/* ======= USE CASES ======= */
.l-uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.l-uc{background:var(--wht);border:1px solid var(--brd);border-radius:var(--rd);padding:20px 16px;box-shadow:var(--sh)}
.l-uc>span{font-size:20px;display:block;margin-bottom:6px}
.l-uc h3{font-size:14px;font-weight:700;margin-bottom:4px}
.l-uc p{font-size:12px;color:var(--txt2);line-height:1.5}

/* ======= FORM ======= */
.l-form{max-width:480px;background:var(--wht);border:1px solid var(--brd);border-radius:var(--rd);padding:28px 24px}
.l-ff{margin-bottom:12px}
.l-ff label{display:block;font-size:12px;font-weight:600;margin-bottom:3px}
.l-ff input{width:100%;padding:9px 14px;border:1px solid var(--brd);border-radius:var(--rds);font-size:13px;background:var(--bg);color:var(--txt);outline:none;cursor:text}
.l-ff input:focus{border-color:var(--acc)}
.l-ff-note{font-size:11px;color:var(--txt2);font-style:italic;margin-top:10px}

/* ======= WHY ======= */
.l-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.l-wy{background:var(--bg);border:1px solid var(--brd);border-radius:var(--rds);padding:16px}
.l-alt .l-wy{background:var(--bg)}
.l-wy strong{font-size:13px;display:block;margin-bottom:3px}
.l-wy p{font-size:12px;color:var(--txt2);margin:0;line-height:1.5}

/* ======= FAQ ======= */
.l-faq{max-width:680px}
.l-fq{border-bottom:1px solid var(--brd)}
.l-fq summary{padding:13px 0;font-size:14px;font-weight:600;cursor:pointer;color:var(--txt);list-style:none;display:flex;justify-content:space-between;align-items:center}
.l-fq summary::after{content:'+';font-size:20px;font-weight:300;color:var(--acc)}
.l-fq[open] summary::after{content:'−'}
.l-fq summary::-webkit-details-marker{display:none}
.l-fq p{padding:0 0 13px;font-size:13px;color:var(--txt2);line-height:1.65}

/* ======= FINAL CTA ======= */
.l-final{background:linear-gradient(155deg,#047857,var(--acc),#6EE7B7);text-align:center;color:var(--wht)}
.l-final h2{color:var(--wht);font-size:28px}
.l-final p{color:rgba(255,255,255,.85);font-size:15px;max-width:500px;margin:10px auto 24px}
.l-fin-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.l-fin-btns .l-pri{background:var(--wht);color:var(--acc);border-color:var(--wht)}.l-fin-btns .l-pri:hover{background:#ECFDF5}
.l-fin-btns .l-out{border-color:rgba(255,255,255,.5);color:var(--wht)}.l-fin-btns .l-out:hover{background:rgba(255,255,255,.12);border-color:var(--wht)}
.l-fin-c{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.78)}

/* ======= SEO ======= */
.l-seo h2{font-size:20px;margin-bottom:14px}
.l-seo-body p{font-size:13px;color:var(--txt2);line-height:1.75;margin-bottom:12px;max-width:660px}

/* ======= FOOTER ======= */
.l-ft{background:#0C1B16;color:#8BA69E;padding:48px 24px 0}
.l-ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:32px}
.l-ft-logo{font-size:11px;font-weight:800;color:var(--wht);display:block;margin-bottom:8px;letter-spacing:.5px}
.l-ft-col p{font-size:12px;line-height:1.6}
.l-ft-sm{margin-top:6px;font-size:11px;color:#5A7A70}
.l-ft-col h4{color:var(--wht);font-size:13px;font-weight:700;margin-bottom:10px}
.l-ft-col a{display:block;font-size:12px;color:#8BA69E;margin-bottom:5px}.l-ft-col a:hover{color:var(--acc)}
.l-ft-col span{display:block;font-size:12px;margin-bottom:5px}
.l-ft-btm{border-top:1px solid #1A2E27;padding:16px 0;text-align:center}
.l-ft-btm p{font-size:11px;color:#5A7A70}

/* ==============================
   RESPONSIVE
   ============================== */
@media(max-width:1024px){
  .l-hero-row{grid-template-columns:1fr}
  .l-hero-map{display:none}
  .l-cards-5{grid-template-columns:repeat(3,1fr)}
  .l-pkg-grid{grid-template-columns:repeat(2,1fr)}
  .l-rank-row{grid-template-columns:1fr}
  .l-ba-cases{grid-template-columns:1fr}
  .l-steps-grid{grid-template-columns:repeat(2,1fr)}
  .l-proc{grid-template-columns:repeat(2,1fr)}
  .l-bot-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  :root{--hdr:50px}
  .l-burger{display:flex}
  .l-nav{position:fixed;top:var(--hdr);left:0;right:0;background:var(--wht);border-bottom:1px solid var(--brd);padding:12px 24px;transform:translateY(-130%);transition:transform .25s;z-index:299;box-shadow:var(--shl)}
  .l-nav.open{transform:translateY(0)}
  .l-nav ul{flex-direction:column;gap:2px}
  .l-nav a{display:block;padding:8px 10px;font-size:14px}

  .l-hero{padding:40px 0 32px}
  .l-hero h1{font-size:24px}
  .l-sec{padding:48px 0}
  .l-sec h2{font-size:22px}
  .l-lead{font-size:14px;margin-bottom:24px}

  .l-cards-5{grid-template-columns:1fr}
  .l-pkg-grid{grid-template-columns:1fr}
  .l-src-grid{grid-template-columns:1fr}
  .l-data-row{grid-template-columns:1fr}
  .l-who-grid{grid-template-columns:1fr}
  .l-uc-grid{grid-template-columns:1fr}
  .l-why-grid{grid-template-columns:1fr}
  .l-steps-grid{grid-template-columns:1fr 1fr}
  .l-proc{grid-template-columns:1fr}
  .l-bot-grid{grid-template-columns:1fr}

  .l-ft-grid{grid-template-columns:1fr;gap:20px}
  .l-fin-btns{flex-direction:column;align-items:center}.l-fin-btns .l-btn{width:100%}
  .l-fin-c{flex-direction:column;gap:8px;text-align:center}
}
@media(max-width:480px){
  .l-hero h1{font-size:21px}
  .l-hero-btns{flex-direction:column}.l-hero-btns .l-btn{width:100%}
  .l-hero-nums{flex-direction:column;gap:12px}
  .l-steps-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media print{.l-hd,.l-btn{display:none}.l-sec{padding:16px 0}body{background:white}}