/* =========================================================================
   123GAMES.CH - "Neon Arcade" design system
   A dark, glowing, after-hours arcade identity built around the neon
   123GAMES wordmark: near-black canvas, neon cyan + magenta, soft glows,
   a recurring 1-2-3 number motif. Unique to 123Games.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#08090f;
  --bg-2:#0b0d15;
  --surface:#12141d;
  --surface-2:#171a25;
  --surface-3:#1d2130;
  --line:#242938;
  --line-2:#333a4d;

  --ink:#eef1fa;
  --ink-2:#c7cddd;
  --muted:#8a92a8;

  --cyan:#28e2e2;
  --cyan-2:#5cf0f0;
  --cyan-deep:#0e9aa6;
  --magenta:#ff2e88;
  --magenta-2:#ff5ba3;
  --purple:#9b6cff;
  --amber:#ffb020;
  --green:#2ce592;
  --red:#ff4d5e;
  --blue:#3d8bff;

  /* semantic aliases kept so existing markup (--c, e-blue, etc.) still maps */
  --accent:var(--cyan);

  --font-sans:"Segoe UI Variable Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --wrap:1180px;
  --gutter:clamp(1.15rem,4vw,2rem);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  --glow-cyan:0 0 18px rgba(40,226,226,.55);
  --glow-magenta:0 0 18px rgba(255,46,136,.5);
  --shadow-sm:0 4px 16px -8px rgba(0,0,0,.7);
  --shadow:0 24px 50px -28px rgba(0,0,0,.8);
  --shadow-lg:0 44px 90px -40px rgba(0,0,0,.9);

  --section-y:clamp(3.25rem,7vw,6rem);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(60vw 40vw at 82% -6%, rgba(40,226,226,.09), transparent 60%),
    radial-gradient(52vw 40vw at 6% 8%, rgba(255,46,136,.08), transparent 62%);
  background-attachment:fixed;
}
img,svg{display:block;max-width:100%;height:auto;}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;font-weight:800;color:var(--ink);}
p{margin:0;text-wrap:pretty;}
a{color:var(--cyan);text-underline-offset:2px;}
a:hover{color:var(--cyan-2);}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;box-shadow:var(--glow-cyan);}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:1rem;top:-3.5rem;background:var(--cyan);color:#04141a;padding:.6rem 1rem;border-radius:var(--radius-sm);z-index:200;text-decoration:none;font-weight:700;transition:top .15s ease;}
.skip-link:focus{top:1rem;}

/* recurring pill "eyebrow" label */
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  background:rgba(40,226,226,.08);border:1px solid rgba(40,226,226,.3);border-radius:var(--radius-pill);
  padding:.42em .95em;margin:0 0 1.15rem;font-family:var(--font-mono);}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:var(--glow-cyan);display:inline-block;}
.eyebrow.e-blue{color:var(--magenta);background:rgba(255,46,136,.08);border-color:rgba(255,46,136,.3);}
.eyebrow.e-blue::before{background:var(--magenta);box-shadow:var(--glow-magenta);}

.section{padding-block:var(--section-y);position:relative;}
.section.tint{background:var(--bg-2);border-block:1px solid var(--line);}
.section-head{max-width:52rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem);}
.section-head h2{font-size:clamp(1.9rem,1.3rem+2.5vw,3rem);}
.section-head .lead{margin-top:.85rem;}
.lead{font-size:clamp(1.05rem,1rem+.4vw,1.28rem);color:var(--muted);max-width:44rem;}

/* --------------------------------------------------------------- top bar */
.topbar{background:#050609;color:#9aa2b6;font-size:12px;font-weight:500;letter-spacing:.05em;border-bottom:1px solid var(--line);font-family:var(--font-mono);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;}
.topbar b{color:var(--cyan);font-weight:700;}
.topbar .tb-dot{color:var(--magenta);padding:0 .5em;}
.topbar .tb-right{color:#6f7891;}
@media (max-width:640px){.topbar .tb-right{display:none;}}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:80;background:rgba(8,9,15,.82);
  backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--line);}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(40,226,226,.55),rgba(255,46,136,.5),transparent);}
.header-inner{display:flex;align-items:center;gap:1.25rem;min-height:74px;}
.brand{display:inline-flex;align-items:center;text-decoration:none;line-height:0;}
.brand img{height:34px;width:auto;mix-blend-mode:screen;}
.nav{margin-left:auto;}
.nav-list{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0;}
.nav-list a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px;position:relative;padding:.35em 0;}
.nav-list a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--cyan);box-shadow:var(--glow-cyan);transition:right .22s ease;border-radius:2px;}
.nav-list a:hover{color:var(--ink);}
.nav-list a:hover::after{right:0;}
.nav-cta{margin-left:.4rem;}
.nav-toggle{display:none;width:44px;height:44px;margin-left:auto;border:1px solid var(--line-2);
  background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;place-items:center;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:19px;height:2px;background:var(--cyan);border-radius:2px;position:relative;box-shadow:var(--glow-cyan);}
.nav-toggle span::before{position:absolute;top:-6px;}
.nav-toggle span::after{position:absolute;top:6px;}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:inherit;font-weight:700;
  font-size:15px;line-height:1.2;padding:.72em 1.35em;border-radius:var(--radius-pill);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .12s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;}
.btn:active{transform:translateY(1px);}
.btn-lg{font-size:16.5px;padding:.9em 1.7em;}
.btn-primary{background:var(--cyan);color:#04161a;box-shadow:0 0 0 rgba(40,226,226,0);}
.btn-primary:hover{background:var(--cyan-2);color:#04161a;transform:translateY(-1px);box-shadow:var(--glow-cyan);}
.btn-blue{background:var(--magenta);color:#fff;}
.btn-blue:hover{background:var(--magenta-2);color:#fff;transform:translateY(-1px);box-shadow:var(--glow-magenta);}
.btn-ghost{background:transparent;color:var(--cyan);border-color:rgba(40,226,226,.45);}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-2);box-shadow:var(--glow-cyan);}
.btn-light{background:var(--cyan);color:#04161a;}
.btn-light:hover{background:var(--cyan-2);color:#04161a;box-shadow:var(--glow-cyan);}
.coin{width:9px;height:9px;border-radius:50%;background:#04161a;box-shadow:0 0 0 3px rgba(4,22,26,.25);flex:none;}
.btn-blue .coin{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25);}
.btn-ghost .coin{background:var(--cyan);box-shadow:var(--glow-cyan);}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 100% at 80% 0%, rgba(40,226,226,.10), transparent 55%),
             radial-gradient(90% 90% at 0% 100%, rgba(255,46,136,.10), transparent 55%);}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 80%);}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;padding-block:clamp(2.75rem,6vw,5rem);}
.hero h1{font-size:clamp(2.5rem,1.5rem+4.4vw,4.5rem);letter-spacing:-.035em;line-height:1;margin:0 0 1.25rem;}
.hero h1 .hl{color:var(--cyan);text-shadow:0 0 22px rgba(40,226,226,.45);}
.hero h1 .hl-b{color:var(--magenta);text-shadow:0 0 22px rgba(255,46,136,.4);}
.hero-lead{font-size:clamp(1.08rem,1rem+.5vw,1.35rem);color:var(--ink-2);max-width:40ch;margin-bottom:1.9rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:1.9rem;}
.stat-row{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;list-style:none;margin:0;padding:0;}
.stat-row li{display:flex;flex-direction:column;gap:.1rem;}
.stat-row .n{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:var(--cyan);line-height:1;text-shadow:0 0 16px rgba(40,226,226,.4);}
.stat-row li:nth-child(2) .n{color:var(--magenta);text-shadow:0 0 16px rgba(255,46,136,.4);}
.stat-row li:nth-child(3) .n{color:var(--amber);text-shadow:0 0 16px rgba(255,176,32,.4);}
.stat-row li:nth-child(4) .n{color:var(--green);text-shadow:0 0 16px rgba(44,229,146,.4);}
.stat-row .l{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-family:var(--font-mono);}

/* featured game card in hero - a clean neon "screen", no tilt */
.hero-card{position:relative;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-lg),0 0 44px -18px rgba(40,226,226,.5);}
.hero-card::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(40,226,226,.5),rgba(255,46,136,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.hero-card .sticker{position:absolute;top:-14px;left:16px;z-index:3;background:var(--magenta);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.5em .85em;
  border-radius:10px;box-shadow:var(--glow-magenta);font-family:var(--font-mono);}
.hero-card .shot{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1300/560;background:var(--bg);border:1px solid var(--line);}
.hero-card .shot img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero-card .cap{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem .4rem .25rem;}
.hero-card .cap .t{font-weight:700;font-size:14.5px;color:var(--ink);}
.hero-card .cap .t small{display:block;font-weight:600;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);}
.hero-card .live{display:inline-flex;align-items:center;gap:.4em;font-size:12px;font-weight:700;color:var(--green);font-family:var(--font-mono);}
.hero-card .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.4rem;}
  .hero-card{max-width:460px;}
}

/* --------------------------------------------------------------- ticker */
.ticker{background:#050609;color:#fff;overflow:hidden;border-block:1px solid var(--line);position:relative;}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
.ticker::before{left:0;background:linear-gradient(90deg,#050609,transparent);}
.ticker::after{right:0;background:linear-gradient(270deg,#050609,transparent);}
.ticker-track{display:flex;width:max-content;animation:ticker 46s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker span{font-family:var(--font-mono);font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;padding:14px 24px;display:inline-flex;align-items:center;white-space:nowrap;color:#c7cddd;}
.ticker span::after{content:"◆";color:var(--cyan);margin-left:24px;font-size:9px;}
.ticker span:nth-child(3n+2)::after{color:var(--magenta);}
.ticker span:nth-child(3n)::after{color:var(--amber);}
@keyframes ticker{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;}}

/* --------------------------------------------------- featured spotlight */
.spotlight{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;align-items:stretch;}
.spot-main{position:relative;display:flex;flex-direction:column;border:1px solid var(--line-2);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);text-decoration:none;color:inherit;
  transition:border-color .2s ease,box-shadow .2s ease;}
.spot-main:hover{border-color:rgba(40,226,226,.55);box-shadow:0 0 44px -14px rgba(40,226,226,.55);}
.spot-shot{aspect-ratio:1300/560;overflow:hidden;background:var(--bg);}
.spot-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.spot-main:hover .spot-shot img{transform:scale(1.04);}
.spot-meta{padding:1.3rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1;}
.spot-cat{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);}
.spot-meta h3{font-size:1.7rem;font-weight:800;margin:.45rem 0 .5rem;color:var(--ink);}
.spot-meta p{color:var(--muted);font-size:15px;flex:1;}
.spot-go{margin-top:1rem;font-weight:700;color:var(--cyan);font-size:14.5px;}
.spot-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:stretch;}
.spot-list li{display:flex;}
.spot-list a{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px 11px 11px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:inherit;
  transition:transform .16s ease,border-color .2s ease,box-shadow .2s ease;}
.spot-list a:hover{border-color:rgba(40,226,226,.5);transform:translateX(4px);box-shadow:0 0 24px -14px rgba(40,226,226,.6);}
.sl-thumb{width:78px;height:58px;border-radius:11px;overflow:hidden;flex:none;background:var(--bg);border:1px solid var(--line);}
.sl-thumb img{width:100%;height:100%;object-fit:cover;}
.sl-body{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0;}
.sl-cat{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.sl-title{font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em;}
.sl-arrow{color:var(--cyan);font-size:1.1rem;flex:none;}
@media (max-width:900px){.spotlight{grid-template-columns:1fr;}}

/* ------------------------------------------------------ category shelves */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px;}
.cat-card{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:20px 20px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;
  overflow:hidden;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;}
.cat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--cyan));box-shadow:0 0 14px var(--c,var(--cyan));transform:scaleY(0);transform-origin:top;transition:transform .22s ease;}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2);}
.cat-card:hover::before{transform:scaleY(1);}
.cat-card .cnum{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--c,var(--cyan));font-family:var(--font-mono);}
.cat-card .cname{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.cat-card .cdesc{font-size:13.5px;color:var(--muted);line-height:1.45;flex:1;}
.cat-card .ccount{font-size:12px;font-weight:700;color:var(--ink-2);margin-top:.5rem;font-family:var(--font-mono);}
.cat-card .ccount::after{content:" →";color:var(--c,var(--cyan));}

/* ---------------------------------------------------------------- steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2.25rem);counter-reset:step;list-style:none;margin:0;padding:0;}
.steps li{position:relative;}
.steps .sn{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:16px;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));color:#04161a;font-size:1.35rem;font-weight:800;margin-bottom:1rem;box-shadow:0 0 24px -6px rgba(40,226,226,.6);}
.steps h3{font-size:1.25rem;margin-bottom:.5rem;color:var(--ink);}
.steps p{color:var(--muted);}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:1.5rem;}}

/* --------------------------------------------------- games grid + filter */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.9rem;}
.chip{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.55em 1.05em;
  border-radius:var(--radius-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.15s ease;}
.chip:hover{border-color:var(--cyan);color:var(--cyan);}
.chip.is-active{background:var(--cyan);color:#04161a;border-color:var(--cyan);box-shadow:var(--glow-cyan);}
.games-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.game-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;}
.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(40,226,226,.45);}
.game-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--bg);}
.game-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.game-card:hover .game-thumb img{transform:scale(1.05);}
.game-pill{position:absolute;top:10px;left:10px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(5,6,9,.8);color:var(--cyan);border:1px solid rgba(40,226,226,.35);padding:.3em .65em;border-radius:7px;backdrop-filter:blur(3px);}
.game-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:.25rem;flex:1;}
.game-body h3{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.game-body .gt{font-size:13.5px;color:var(--muted);line-height:1.45;flex:1;}
.game-desc{display:none;}
.game-play{margin-top:.85rem;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:transparent;border:1.5px solid rgba(40,226,226,.45);color:var(--cyan);font-weight:700;font-size:13.5px;
  font-family:inherit;padding:.6em .8em;border-radius:10px;cursor:pointer;transition:.15s ease;}
.game-play:hover{background:var(--cyan);color:#04161a;box-shadow:var(--glow-cyan);}
.game-play .coin{background:var(--cyan);box-shadow:var(--glow-cyan);}
.game-play:hover .coin{background:#04161a;box-shadow:none;}
.game-card[hidden]{display:none;}
@media (max-width:900px){.games-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.games-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:400px){.games-grid{grid-template-columns:1fr;}}

/* -------------------------------------------------------------- pricing */
.pricing-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,3.25rem);align-items:start;}
.price-notes{color:var(--muted);}
.price-card{position:relative;border:1.5px solid rgba(40,226,226,.5);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.3rem);background:var(--surface);box-shadow:var(--shadow),0 0 40px -20px rgba(40,226,226,.6);}
.price-card .plan{display:inline-block;font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--magenta);background:rgba(255,46,136,.1);border:1px solid rgba(255,46,136,.3);border-radius:var(--radius-pill);padding:.35em .85em;margin-bottom:1rem;}
.price-card .amount{font-size:clamp(2.6rem,2rem+2vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:.35rem;color:var(--cyan);text-shadow:0 0 22px rgba(40,226,226,.4);}
.price-card .amount span{font-size:1.15rem;font-weight:600;color:var(--muted);text-shadow:none;}
.price-card .sub{font-weight:700;color:var(--ink);margin-bottom:1.15rem;}
.price-card .billing-lines{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.55rem;}
.price-card .billing-lines li{position:relative;padding-left:1.7em;color:var(--ink-2);font-size:15px;}
.price-card .billing-lines li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;border-radius:4px;background:linear-gradient(135deg,var(--cyan),var(--magenta));box-shadow:0 0 10px -2px rgba(40,226,226,.6);}
.price-card .fine{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0;}
@media (max-width:840px){.pricing-grid{grid-template-columns:1fr;gap:1.75rem;}}

/* ------------------------------------------------------------------ faq */
.faq-list{display:grid;gap:.75rem;max-width:52rem;}
.faq-list details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;transition:border-color .2s ease;}
.faq-list details[open]{border-color:rgba(40,226,226,.4);}
.faq-list summary{cursor:pointer;padding:1.15rem 1.35rem;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";color:var(--cyan);font-size:1.5rem;line-height:1;}
.faq-list details[open] summary::after{content:"–";}
.faq-list .answer{padding:0 1.35rem 1.2rem;}
.faq-list .answer p{color:var(--muted);}

/* -------------------------------------------------------------- cta band */
.cta-band{background:
  radial-gradient(120% 140% at 0% 0%, rgba(40,226,226,.16), transparent 55%),
  radial-gradient(120% 140% at 100% 100%, rgba(255,46,136,.16), transparent 55%),
  var(--surface);border-block:1px solid var(--line);position:relative;}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:1.75rem;flex-wrap:wrap;}
.cta-band h2{color:var(--ink);font-size:clamp(1.7rem,1.2rem+2vw,2.6rem);margin-bottom:.5rem;}
.cta-band h2 span{color:var(--cyan);}
.cta-band p{color:var(--ink-2);max-width:40rem;margin:0;}

/* --------------------------------------------------------------- footer */
.site-footer{background:#050609;border-top:1px solid var(--line);padding-block:clamp(3rem,5vw,4rem) 2rem;position:relative;}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(40,226,226,.5),rgba(255,46,136,.45),transparent);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);}
.footer-brand .brand img{height:32px;margin-bottom:1rem;}
.footer-support-h{font-size:1.15rem;font-weight:800;color:var(--ink);margin:.3rem 0 .9rem;}
.footer-contact{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.7rem;}
.footer-contact a{display:inline-flex;align-items:center;gap:.7em;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px;}
.footer-contact a:hover{color:var(--cyan);}
.footer-contact svg{color:var(--cyan);flex:none;}
.footer-badge{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);background:rgba(155,108,255,.12);border:1px solid rgba(155,108,255,.35);border-radius:var(--radius-pill);padding:.45em 1em;margin-bottom:1rem;}
.footer-tag{color:var(--muted);font-size:14px;max-width:34ch;}
.footer-h{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin:0 0 1rem;}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.footer-col a{color:var(--ink-2);text-decoration:none;font-size:14.5px;}
.footer-col a:hover{color:var(--cyan);}
.footer-base{margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line);display:grid;gap:.4rem;}
.company-line{font-size:13px;color:var(--muted);margin:0;}
.company-line b{color:var(--ink-2);}
.carrier-note{font-size:13px;color:var(--muted);margin:.4rem 0 0;}
.copy{font-size:13px;color:var(--muted);margin:.6rem 0 0;}
@media (max-width:840px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:1.25rem;}
.modal[hidden]{display:none;}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,4,8,.72);backdrop-filter:blur(4px);}
.modal-card{position:relative;width:min(560px,100%);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-lg),0 0 60px -24px rgba(40,226,226,.6);max-height:92vh;overflow-y:auto;}
.modal-hero{position:relative;aspect-ratio:16/10;background:var(--bg);}
.modal-hero img{width:100%;height:100%;object-fit:cover;}
.modal-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  background:rgba(5,6,9,.75);color:#fff;border:1px solid var(--line-2);cursor:pointer;font-size:20px;line-height:1;z-index:3;}
.modal-body{padding:1.5rem 1.6rem 1.6rem;}
.modal-body .m-cat{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);}
.modal-body h3{font-size:1.6rem;font-weight:800;margin:.4rem 0 .3rem;color:var(--ink);}
.modal-body .m-tag{color:var(--muted);font-style:italic;margin-bottom:.9rem;}
.modal-body .m-desc{color:var(--ink-2);font-size:15.5px;}
.modal-body .m-price{font-size:12.5px;color:var(--muted);background:var(--bg);border:1px dashed var(--line-2);
  border-radius:10px;padding:.85rem 1rem;margin:1.1rem 0;line-height:1.6;}
.modal-body .m-cta{display:block;text-align:center;}

/* --------------------------------------------------- sub-page / article */
.page-head{background:var(--bg-2);border-bottom:1px solid var(--line);padding-block:clamp(2.25rem,5vw,3.5rem);position:relative;}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(40,226,226,.45),transparent);}
.page-head .wrap{max-width:var(--wrap);}
.breadcrumb{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-bottom:1.1rem;}
.breadcrumb::before{content:"←";color:var(--cyan);}
.breadcrumb:hover{color:var(--cyan);}
.page-head h1{font-size:clamp(2rem,1.4rem+2.6vw,3.1rem);letter-spacing:-.03em;}
.page-head .lead{margin-top:.9rem;color:var(--ink-2);}
.page-head .updated{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);margin-top:.75rem;}

.article{padding-block:clamp(2.5rem,5vw,4rem);}
.article .wrap{max-width:800px;}
.article h2{font-size:1.5rem;font-weight:800;margin:2.4rem 0 .8rem;letter-spacing:-.02em;color:var(--ink);}
.article h3{font-size:1.18rem;font-weight:700;margin:1.7rem 0 .5rem;color:var(--ink);}
.article p,.article li{color:var(--ink-2);font-size:16.5px;line-height:1.72;}
.article p{margin:0 0 .95rem;}
.article ul{margin:0 0 1.1rem;padding-left:1.3rem;display:grid;gap:.45rem;}
.article a{color:var(--cyan);}
.article .lead{font-size:1.2rem;color:var(--muted);margin-bottom:1.5rem;}
.article blockquote{margin:1.6rem 0;padding:.3rem 0 .3rem 1.35rem;border-left:3px solid var(--cyan);
  font-size:1.35rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);box-shadow:-14px 0 24px -20px var(--cyan);}
.article img{border-radius:var(--radius);border:1px solid var(--line-2);}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.5rem;margin-bottom:2.25rem;}
.toc h2{font-size:1.1rem;margin:0 0 .7rem;color:var(--ink);}
.toc ol{margin:0;padding-left:1.3rem;display:grid;gap:.4rem;}
.toc a{color:var(--cyan);}

/* info cards used on contact / carrier */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.5rem 0 .5rem;}
.info-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem;transition:border-color .2s ease;}
.info-card:hover{border-color:rgba(40,226,226,.4);}
.info-card .lbl{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}
.info-card .val{font-size:1rem;font-weight:700;color:var(--ink);}
.info-card a{color:var(--cyan);text-decoration:none;word-break:break-word;}
@media (max-width:760px){.info-grid{grid-template-columns:1fr;}}

.company-card{margin-top:2rem;padding:1.6rem 1.75rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);}
.company-card h2{margin:0 0 .8rem;font-size:1.2rem;color:var(--ink);}
.company-card p{margin:0 0 .35rem;color:var(--muted);font-size:15px;}
.company-card p b{color:var(--ink-2);}

.notice-box{margin-top:1.6rem;padding:1.25rem 1.4rem;background:rgba(40,226,226,.06);border:1px solid rgba(40,226,226,.28);
  border-left:4px solid var(--cyan);border-radius:var(--radius);color:var(--ink-2);font-size:15px;}

/* carrier availability list */
.carrier-region{margin-top:1.6rem;}
.carrier-region h2{font-size:1.3rem;margin-bottom:.9rem;color:var(--ink);}
.carrier-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.carrier-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line);}
.carrier-list li:last-child{border-bottom:0;}
.carrier-name{font-weight:700;color:var(--ink);}
.carrier-status{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--green);background:rgba(44,229,146,.1);border:1px solid rgba(44,229,146,.35);border-radius:var(--radius-pill);padding:.25em .9em;}

/* blog listing */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(40,226,226,.45);}
.post-media{aspect-ratio:16/9;overflow:hidden;background:var(--bg);}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;opacity:.92;}
.post-card:hover .post-media img{transform:scale(1.05);opacity:1;}
.post-body{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.post-cat{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--cyan));}
.post-body h2,.post-body h3{font-size:1.2rem;line-height:1.2;}
.post-body h2 a,.post-body h3 a{color:var(--ink);text-decoration:none;}
.post-body h2 a:hover,.post-body h3 a:hover{color:var(--cyan);}
.post-body p{color:var(--muted);font-size:14.5px;flex:1;}
.post-meta{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;padding-top:.85rem;
  border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.post-meta .read{color:var(--ink);}
.post-meta .read::after{content:" →";color:var(--cyan);}
.more-all{display:inline-block;margin-top:1.75rem;font-weight:700;text-decoration:none;color:var(--cyan);}
@media (max-width:760px){.post-grid{grid-template-columns:1fr;}}

/* article end nav */
.end-nav{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;}

/* --------------------------------------------------------- mobile nav */
@media (max-width:860px){
  .nav-toggle{display:grid;}
  .nav{display:none;margin-left:0;width:100%;}
  .site-header[data-open="true"] .header-inner{flex-wrap:wrap;}
  .site-header[data-open="true"] .nav{display:block;}
  .site-header[data-open="true"] .nav-list{flex-direction:column;align-items:stretch;gap:.15rem;padding-bottom:1rem;}
  .site-header[data-open="true"] .nav-list a{padding:.8rem 0;border-bottom:1px solid var(--line);}
  .site-header[data-open="true"] .nav-list a::after{display:none;}
  .site-header[data-open="true"] .nav-cta{margin:.6rem 0 0;text-align:center;justify-content:center;}
}