/*
Theme Name: SpeedPro
Theme URI: https://speedpro.io
Author: SpeedPro
Description: Professional internet speed test WordPress theme. Mobile-first, SEO-optimized, AdSense-ready. Advanced gauge, dynamic blog from WP admin, high-contrast readable text.
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: speedpro
Tags: speed-test, technology, seo, blog, dark, responsive, adsense
*/

/* ═══════════════════════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg0: #030508;
  --bg1: #070c14;
  --bg2: #0b1220;
  --bg3: #0f1928;
  --bg4: #142030;

  /* Accents */
  --cyan:   #00e5ff;
  --green:  #00ff9d;
  --orange: #ff6b35;
  --purple: #a855f7;

  /* Text — high contrast */
  --t1: #ffffff;
  --t2: #d1e8f5;
  --t3: #8bb8d4;
  --t4: #506a82;

  /* Borders */
  --b1: rgba(0,229,255,0.15);
  --b2: rgba(0,229,255,0.06);

  /* Fonts */
  --f-display: 'Rajdhani', sans-serif;
  --f-mono:    'Share Tech Mono', monospace;
  --f-body:    'DM Sans', sans-serif;

  /* Radius */
  --r1: 8px;
  --r2: 16px;
  --r3: 24px;

  /* Transitions */
  --tr: all 0.25s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg0);
  color:var(--t2);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background:rgba(0,229,255,.25); color:#fff; }
a { color:var(--cyan); text-decoration:none; transition:var(--tr); }
a:hover { color:var(--green); }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,h5,h6 {
  font-family:var(--f-display);
  font-weight:700;
  color:var(--t1);
  line-height:1.25;
  letter-spacing:.01em;
}
p { margin-bottom:1.1rem; color:var(--t2); }
ul,ol { padding-left:1.4rem; }
li { margin-bottom:.35rem; color:var(--t2); }
strong,b { color:var(--t1); font-weight:600; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg0); }
::-webkit-scrollbar-thumb { background:var(--cyan); border-radius:3px; }

/* ═══════════════════════════════════════════════════════════
   GRID OVERLAY (subtle)
═══════════════════════════════════════════════════════════ */
body::after {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(0,229,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.018) 1px, transparent 1px);
  background-size:60px 60px;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════ */
.wrap { max-width:1160px; margin:0 auto; padding:0 18px; position:relative; z-index:1; }
.wrap-lg { max-width:1360px; margin:0 auto; padding:0 18px; position:relative; z-index:1; }

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
#hdr {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:58px;
  background:rgba(3,5,8,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--b1);
  transition:var(--tr);
}
#hdr.scrolled {
  background:rgba(3,5,8,.98);
  box-shadow:0 4px 32px rgba(0,0,0,.7);
}
.hdr-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:58px;
}
.logo {
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--f-display);
  font-size:1.25rem;
  font-weight:700;
  color:var(--t1) !important;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.logo-mark {
  width:32px; height:32px;
  background:linear-gradient(135deg, var(--cyan), var(--green));
  border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex-shrink:0;
  animation:logoGlow 2.5s ease-in-out infinite;
}
@keyframes logoGlow {
  0%,100%{ box-shadow:0 0 8px rgba(0,229,255,.4); }
  50%{ box-shadow:0 0 22px rgba(0,229,255,.9),0 0 40px rgba(0,255,157,.3); }
}
.logo-txt em { color:var(--cyan); font-style:normal; }

/* NAV */
#nav { display:flex; align-items:center; }
#nav ul {
  display:flex; align-items:center; gap:2px;
  list-style:none; padding:0; margin:0;
}
#nav ul li a {
  display:block;
  padding:6px 13px;
  font-family:var(--f-display);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--t3);
  border-radius:6px;
  transition:var(--tr);
}
#nav ul li a:hover,
#nav ul li.current-menu-item > a {
  color:var(--cyan);
  background:rgba(0,229,255,.08);
}

/* HAMBURGER */
.ham {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:none;
  border:none;
  padding:6px;
}
.ham span {
  display:block;
  width:22px; height:2px;
  background:var(--cyan);
  border-radius:2px;
  transition:var(--tr);
}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
#hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:58px 0 0;
  overflow:hidden;
}
.hero-rays {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(0,229,255,.09) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 85% 75%,  rgba(0,255,157,.05) 0%, transparent 50%),
    radial-gradient(ellipse 30% 25% at 15% 65%,  rgba(168,85,247,.05) 0%, transparent 50%);
  pointer-events:none;
}
#hero-canvas {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.hero-inner {
  position:relative;
  z-index:2;
  width:100%;
  padding:30px 0 40px;
}

/* ═══════════════════════════════════════════════════════════
   BADGE
═══════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 14px;
  background:rgba(0,229,255,.1);
  border:1px solid rgba(0,229,255,.25);
  border-radius:20px;
  font-family:var(--f-mono);
  font-size:.72rem;
  color:var(--cyan);
  letter-spacing:.1em;
  margin-bottom:16px;
}
.badge-dot {
  width:6px; height:6px;
  background:var(--green);
  border-radius:50%;
  animation:bdot 1.6s ease infinite;
}
@keyframes bdot { 0%,100%{opacity:1}50%{opacity:.2} }

.hero-h1 {
  font-size:clamp(2rem, 5vw, 4rem);
  font-weight:700;
  color:var(--t1);
  margin-bottom:10px;
  text-align:center;
}
.hero-h1 span {
  background:linear-gradient(90deg, var(--cyan), var(--green));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub {
  font-size:clamp(.9rem,1.8vw,1.1rem);
  color:var(--t3);
  text-align:center;
  max-width:540px;
  margin:0 auto 28px;
}

/* ═══════════════════════════════════════════════════════════
   SPEED TEST WIDGET — MOBILE FIRST (fits screen)
═══════════════════════════════════════════════════════════ */
#widget {
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:var(--r3);
  max-width:680px;
  margin:0 auto;
  padding:22px 20px 20px;
  box-shadow:0 0 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
}
#widget::before {
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:calc(var(--r3) + 1px);
  background:linear-gradient(135deg, rgba(0,229,255,.25), transparent 40%, rgba(0,255,157,.15));
  z-index:-1;
  pointer-events:none;
}

/* TOP ROW: gauge left + metrics right */
.widget-top {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
  margin-bottom:16px;
}

/* GAUGE — compact */
.gauge-wrap {
  position:relative;
  width:160px;
  height:160px;
  flex-shrink:0;
}
.gauge-svg {
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.g-track {
  fill:none;
  stroke:rgba(255,255,255,.05);
  stroke-width:10;
  stroke-linecap:round;
  stroke-dasharray: 471 553;
  stroke-dashoffset: -41;
}
.g-fill {
  fill:none;
  stroke:url(#gGrad);
  stroke-width:10;
  stroke-linecap:round;
  stroke-dasharray:0 553;
  stroke-dashoffset:-41;
  transition:stroke-dasharray .4s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 6px rgba(0,229,255,.6));
}
/* tick marks */
.g-ticks { fill:none; }

.gauge-mid {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
}
.g-val {
  display:block;
  font-family:var(--f-mono);
  font-size:2rem;
  font-weight:700;
  color:var(--t1);
  line-height:1;
}
.g-unit {
  display:block;
  font-family:var(--f-mono);
  font-size:.65rem;
  color:var(--t3);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:3px;
}
.g-phase {
  display:block;
  font-size:.6rem;
  color:var(--cyan);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:2px;
}

/* RIGHT METRICS STACK */
.metrics-stack {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.m-card {
  background:var(--bg3);
  border:1px solid var(--b2);
  border-radius:var(--r1);
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:var(--tr);
}
.m-card:hover { border-color:var(--b1); }
.m-icon { font-size:1.2rem; flex-shrink:0; width:28px; text-align:center; }
.m-body { flex:1; min-width:0; }
.m-val {
  font-family:var(--f-mono);
  font-size:1.05rem;
  font-weight:700;
  color:var(--t1);
  display:block;
  white-space:nowrap;
}
.m-lbl {
  font-size:.62rem;
  color:var(--t4);
  text-transform:uppercase;
  letter-spacing:.1em;
  display:block;
}

/* DL / UL bars */
.m-bar {
  height:3px;
  background:rgba(255,255,255,.06);
  border-radius:2px;
  margin-top:4px;
  overflow:hidden;
}
.m-bar-fill {
  height:100%;
  width:0%;
  border-radius:2px;
  transition:width .5s ease;
}
.m-bar-fill.dl { background:linear-gradient(90deg, var(--cyan), var(--green)); }
.m-bar-fill.ul { background:linear-gradient(90deg, var(--orange), #ffcc00); }

/* SERVER INFO ROW */
.srv-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.srv-chip {
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  background:var(--bg3);
  border:1px solid var(--b2);
  border-radius:20px;
  font-size:.7rem;
  color:var(--t3);
  white-space:nowrap;
}
.srv-chip strong { color:var(--t2); }

/* START BUTTON */
.btn-go {
  display:block;
  width:100%;
  padding:14px;
  background:linear-gradient(135deg, var(--cyan) 0%, var(--green) 100%);
  color:#020810;
  font-family:var(--f-display);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:none;
  border-radius:50px;
  cursor:pointer;
  transition:var(--tr);
  position:relative;
  overflow:hidden;
}
.btn-go::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0);
  transition:background .25s;
}
.btn-go:hover::after { background:rgba(255,255,255,.12); }
.btn-go:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,229,255,.35); }
.btn-go:active { transform:translateY(0); }
.btn-go.running {
  background:linear-gradient(135deg, #ff4444, var(--orange));
  animation:btnPulse 1s ease infinite;
}
@keyframes btnPulse { 0%,100%{opacity:1} 50%{opacity:.85} }

/* PROGRESS */
.prog-wrap {
  margin-top:12px;
  display:none;
}
.prog-wrap.on { display:block; }
.prog-top {
  display:flex;
  justify-content:space-between;
  font-size:.7rem;
  color:var(--t4);
  margin-bottom:5px;
}
.prog-top strong { color:var(--t3); }
.prog-bar {
  height:3px;
  background:rgba(255,255,255,.05);
  border-radius:2px;
  overflow:hidden;
}
.prog-fill {
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--cyan), var(--green));
  border-radius:2px;
  transition:width .3s ease;
  box-shadow:0 0 8px rgba(0,229,255,.5);
}

/* RESULTS */
.res-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
  display:none;
}
.res-row.show { display:grid; }
.res-card {
  background:linear-gradient(135deg, rgba(0,229,255,.07), rgba(0,255,157,.04));
  border:1px solid rgba(0,229,255,.18);
  border-radius:var(--r2);
  padding:16px 12px;
  text-align:center;
}
.res-num {
  font-family:var(--f-mono);
  font-size:2rem;
  font-weight:700;
  background:linear-gradient(135deg, var(--cyan), var(--green));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  display:block;
  line-height:1;
  margin-bottom:4px;
}
.res-lbl {
  font-size:.65rem;
  color:var(--t4);
  text-transform:uppercase;
  letter-spacing:.1em;
}

/* STATUS */
.status-line {
  text-align:center;
  font-size:.75rem;
  color:var(--t4);
  margin-top:8px;
  min-height:18px;
}

/* RATING BADGE */
.rating-box { text-align:center; margin-top:12px; display:none; }
.rtag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  border-radius:20px;
  font-family:var(--f-display);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.05em;
}
.rtag.poor      { background:rgba(255,68,68,.12);    color:#ff6b6b; border:1px solid rgba(255,68,68,.25); }
.rtag.fair      { background:rgba(255,170,0,.12);    color:#ffbb44; border:1px solid rgba(255,170,0,.25); }
.rtag.good      { background:rgba(0,229,255,.1);     color:var(--cyan); border:1px solid rgba(0,229,255,.25); }
.rtag.excellent { background:rgba(0,255,157,.1);     color:var(--green); border:1px solid rgba(0,255,157,.25); }
.rtag-tip { font-size:.75rem; color:var(--t3); margin-top:6px; }

/* SHARE */
.share-row { display:none; justify-content:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.share-row.show { display:flex; }
.btn-share {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px;
  background:none;
  border:1px solid var(--b1);
  border-radius:20px;
  color:var(--t3);
  font-size:.75rem;
  font-family:var(--f-body);
  cursor:pointer;
  transition:var(--tr);
}
.btn-share:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,229,255,.06); }

/* ═══════════════════════════════════════════════════════════
   SECTIONS SHARED
═══════════════════════════════════════════════════════════ */
.sec { padding:70px 0; position:relative; z-index:1; }
.sec-sm { padding:50px 0; }
.sec-title { text-align:center; margin-bottom:50px; }
.sec-title h2 { font-size:clamp(1.6rem,3.5vw,2.5rem); margin-bottom:10px; }
.sec-title p { color:var(--t3); max-width:480px; margin:0 auto; font-size:.95rem; }
.sec-tag {
  display:inline-block;
  padding:3px 12px;
  background:rgba(0,229,255,.1);
  border:1px solid rgba(0,229,255,.2);
  border-radius:20px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:12px;
}

/* ═══════════════════════════════════════════════════════════
   STATS
═══════════════════════════════════════════════════════════ */
.stats-g {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.stat-c {
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r2);
  padding:28px 20px;
  text-align:center;
  transition:var(--tr);
  position:relative;
  overflow:hidden;
}
.stat-c::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--green));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.stat-c:hover::before { transform:scaleX(1); }
.stat-c:hover { transform:translateY(-4px); border-color:var(--b1); box-shadow:0 12px 40px rgba(0,0,0,.4); }
.stat-n {
  display:block;
  font-family:var(--f-mono);
  font-size:2.2rem;
  font-weight:700;
  background:linear-gradient(135deg,var(--cyan),var(--green));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:6px;
}
.stat-l { font-size:.8rem; color:var(--t3); letter-spacing:.05em; }

/* ═══════════════════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════════════════ */
.feat-g {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.feat-c {
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r2);
  padding:28px 24px;
  transition:var(--tr);
  position:relative;
  overflow:hidden;
}
.feat-c::after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% -20%, rgba(0,229,255,.05) 0%, transparent 65%);
  opacity:0;
  transition:opacity .3s;
}
.feat-c:hover::after { opacity:1; }
.feat-c:hover { border-color:var(--b1); transform:translateY(-5px); }
.feat-ic {
  width:46px; height:46px;
  background:linear-gradient(135deg, rgba(0,229,255,.15), rgba(0,255,157,.08));
  border:1px solid rgba(0,229,255,.18);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  margin-bottom:16px;
}
.feat-c h3 { font-size:1rem; margin-bottom:8px; color:var(--t1); }
.feat-c p  { font-size:.85rem; color:var(--t3); margin:0; line-height:1.7; }

/* ═══════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════ */
.faq-l { max-width:780px; margin:0 auto; }
.faq-item {
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r1);
  margin-bottom:10px;
  overflow:hidden;
  transition:var(--tr);
}
.faq-item.open { border-color:var(--b1); }
.faq-q {
  width:100%;
  background:none;
  border:none;
  padding:17px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--t1);
  font-family:var(--f-body);
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:var(--tr);
}
.faq-q:hover { color:var(--cyan); }
.faq-ico {
  width:22px; height:22px;
  border:1px solid var(--b1);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan);
  font-size:1.1rem;
  flex-shrink:0;
  transition:transform .3s ease;
}
.faq-item.open .faq-ico { transform:rotate(45deg); }
.faq-a {
  max-height:0;
  overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}
.faq-a p {
  padding:0 20px 16px;
  margin:0;
  font-size:.875rem;
  color:var(--t2);
  line-height:1.75;
}

/* ═══════════════════════════════════════════════════════════
   BLOG CARDS
═══════════════════════════════════════════════════════════ */
.blog-g {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.blog-c {
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r2);
  overflow:hidden;
  transition:var(--tr);
  display:flex;
  flex-direction:column;
}
.blog-c:hover { border-color:var(--b1); transform:translateY(-5px); box-shadow:0 16px 50px rgba(0,0,0,.5); }
.blog-thumb {
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg3);
  position:relative;
  flex-shrink:0;
}
.blog-thumb img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.blog-c:hover .blog-thumb img { transform:scale(1.06); }
.blog-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem;
  background:linear-gradient(135deg, rgba(0,229,255,.08), rgba(0,255,157,.04));
}
.blog-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.post-cat {
  display:inline-block;
  padding:3px 9px;
  background:rgba(0,229,255,.1);
  border:1px solid rgba(0,229,255,.18);
  border-radius:20px;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:10px;
}
.blog-c h3 {
  font-size:.92rem;
  margin-bottom:8px;
  color:var(--t1);
  line-height:1.45;
}
.blog-c h3 a { color:var(--t1); }
.blog-c h3 a:hover { color:var(--cyan); }
.blog-exc {
  font-size:.82rem;
  color:var(--t3);
  margin-bottom:12px;
  line-height:1.65;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-meta {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.7rem;
  color:var(--t4);
  flex-wrap:wrap;
}
.post-meta span { display:flex; align-items:center; gap:4px; }
.read-more {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:10px;
  font-size:.75rem;
  font-weight:600;
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:var(--tr);
}
.read-more:hover { gap:9px; color:var(--green); }

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════════════════════ */
.steps-g {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  position:relative;
}
.steps-g::before {
  content:'';
  position:absolute;
  top:36px;
  left:calc(16.666% + 18px);
  right:calc(16.666% + 18px);
  height:1px;
  background:linear-gradient(90deg, var(--cyan), var(--green));
  z-index:0;
  opacity:.4;
}
.step-i { text-align:center; position:relative; z-index:1; }
.step-num {
  width:72px; height:72px;
  background:var(--bg2);
  border:2px solid var(--cyan);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono);
  font-size:1.4rem;
  font-weight:700;
  color:var(--cyan);
  margin:0 auto 20px;
  transition:var(--tr);
}
.step-i:hover .step-num { box-shadow:0 0 28px rgba(0,229,255,.4); background:var(--bg3); }
.step-i h3 { font-size:.95rem; margin-bottom:8px; color:var(--t1); }
.step-i p  { font-size:.82rem; color:var(--t3); }

/* ═══════════════════════════════════════════════════════════
   SPEED GUIDE TABLE
═══════════════════════════════════════════════════════════ */
.guide-g {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  max-width:1000px;
  margin:0 auto;
}
.guide-c {
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r2);
  padding:20px 14px;
  text-align:center;
  transition:var(--tr);
}
.guide-c:hover { border-color:var(--b1); transform:translateY(-3px); }
.guide-rtag {
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-family:var(--f-display);
  font-size:.8rem;
  font-weight:700;
  margin-bottom:6px;
}
.guide-range { font-size:.75rem; color:var(--t3); font-weight:600; margin-bottom:8px; }
.guide-desc  { font-size:.72rem; color:var(--t4); line-height:1.5; }

/* ═══════════════════════════════════════════════════════════
   CTA
═══════════════════════════════════════════════════════════ */
.cta-box {
  background:linear-gradient(135deg, rgba(0,229,255,.08), rgba(0,255,157,.05));
  border:1px solid rgba(0,229,255,.2);
  border-radius:var(--r3);
  padding:52px 36px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-box::before {
  content:'';
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:radial-gradient(circle, rgba(0,229,255,.04) 0%, transparent 50%);
  animation:ctaRotate 25s linear infinite;
  pointer-events:none;
}
@keyframes ctaRotate { to{transform:rotate(360deg)} }
.cta-box h2 { font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:12px; }
.cta-box p  { color:var(--t3); max-width:460px; margin:0 auto 24px; font-size:.95rem; }
.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 30px;
  background:linear-gradient(135deg, var(--cyan), var(--green));
  color:#020810;
  font-family:var(--f-display);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:none;
  border-radius:50px;
  cursor:pointer;
  transition:var(--tr);
  text-decoration:none;
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(0,229,255,.35);
  color:#020810;
}

/* ═══════════════════════════════════════════════════════════
   ADSENSE ZONES
═══════════════════════════════════════════════════════════ */
.ad-zone {
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.07);
  border-radius:var(--r1);
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--t4);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:28px 0;
}

/* ═══════════════════════════════════════════════════════════
   SINGLE POST
═══════════════════════════════════════════════════════════ */
.post-hero { padding:100px 0 48px; text-align:center; background:radial-gradient(ellipse 55% 35% at 50% 0%, rgba(0,229,255,.07), transparent 65%); }
.post-ttl { font-size:clamp(1.8rem,4vw,3rem); max-width:780px; margin:0 auto 20px; color:var(--t1); }
.post-cnt {
  max-width:760px;
  margin:0 auto;
  padding:52px 18px 70px;
}
.post-cnt h2 { font-size:1.5rem; margin:2.2rem 0 .9rem; color:var(--t1); }
.post-cnt h3 { font-size:1.15rem; margin:1.8rem 0 .7rem; color:var(--t2); }
.post-cnt p  { color:var(--t2); font-size:.95rem; line-height:1.8; }
.post-cnt ul, .post-cnt ol { margin-bottom:1.2rem; }
.post-cnt li { color:var(--t2); font-size:.95rem; }
.post-cnt strong { color:var(--t1); }
.post-cnt a  { color:var(--cyan); }
.post-cnt a:hover { color:var(--green); text-decoration:underline; }
.post-cnt blockquote {
  border-left:3px solid var(--cyan);
  padding:14px 22px;
  background:rgba(0,229,255,.05);
  border-radius:0 var(--r1) var(--r1) 0;
  margin:1.8rem 0;
}
.post-cnt blockquote p { margin:0; color:var(--t2); }

/* sidebar layout */
.cnt-sidebar {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:36px;
  max-width:1060px;
  margin:0 auto;
  padding:48px 18px 70px;
  align-items:start;
}
.sidebar-w {
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r2);
  padding:20px;
  margin-bottom:20px;
}
.sidebar-w h4 {
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--b2);
}

/* ═══════════════════════════════════════════════════════════
   PAGE TEMPLATES
═══════════════════════════════════════════════════════════ */
.page-hero {
  padding:100px 0 48px;
  text-align:center;
  background:radial-gradient(ellipse 55% 35% at 50% 0%, rgba(0,229,255,.07), transparent 65%);
}
.page-ttl { font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:12px; color:var(--t1); }
.page-cnt {
  max-width:780px;
  margin:0 auto;
  padding:52px 18px 70px;
}
.page-cnt h2 { font-size:1.45rem; margin:2rem 0 .9rem; color:var(--t1); }
.page-cnt h3 { font-size:1.1rem; margin:1.6rem 0 .7rem; color:var(--t2); }
.page-cnt p  { color:var(--t2); font-size:.93rem; line-height:1.8; }
.page-cnt ul, .page-cnt ol { margin-bottom:1.2rem; }
.page-cnt li { color:var(--t2); font-size:.93rem; }
.page-cnt strong { color:var(--t1); }
.page-cnt a { color:var(--cyan); }

/* CONTACT FORM */
.cf { background:var(--bg2); border:1px solid var(--b1); border-radius:var(--r2); padding:34px; }
.fg { margin-bottom:18px; }
.fg label { display:block; font-size:.75rem; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; }
.fg input, .fg textarea, .fg select {
  width:100%;
  padding:12px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--b1);
  border-radius:var(--r1);
  color:var(--t1);
  font-family:var(--f-body);
  font-size:.88rem;
  outline:none;
  transition:var(--tr);
}
.fg input:focus, .fg textarea:focus { border-color:var(--cyan); background:rgba(0,229,255,.04); box-shadow:0 0 0 3px rgba(0,229,255,.1); }
.fg input::placeholder, .fg textarea::placeholder { color:var(--t4); }
.fg textarea { resize:vertical; min-height:110px; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
#ftr {
  background:var(--bg1);
  border-top:1px solid var(--b2);
  padding:52px 0 0;
}
.ftr-g {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:36px;
  margin-bottom:44px;
}
.ftr-about p { font-size:.84rem; color:var(--t3); margin-top:14px; line-height:1.75; }
.ftr-h {
  font-family:var(--f-display);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:16px;
}
.ftr-ul { list-style:none; padding:0; }
.ftr-ul li { margin-bottom:9px; }
.ftr-ul a { color:var(--t3); font-size:.84rem; transition:var(--tr); }
.ftr-ul a:hover { color:var(--cyan); padding-left:4px; }
.ftr-bot {
  border-top:1px solid var(--b2);
  padding:20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.75rem;
  color:var(--t4);
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════ */
.bc {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.72rem;
  color:var(--t4);
  justify-content:center;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.bc a { color:var(--t4); }
.bc a:hover { color:var(--cyan); }
.bc .sep { color:var(--t4); }
.bc .cur { color:var(--cyan); }

/* ═══════════════════════════════════════════════════════════
   REVEAL ANIMATION
═══════════════════════════════════════════════════════════ */
.rv { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; }
.rv.in { opacity:1; transform:translateY(0); }
.rv:nth-child(2){transition-delay:.08s}
.rv:nth-child(3){transition-delay:.16s}
.rv:nth-child(4){transition-delay:.24s}
.rv:nth-child(5){transition-delay:.32s}
.rv:nth-child(6){transition-delay:.40s}

/* ═══════════════════════════════════════════════════════════
   GLOW LINE DIVIDER
═══════════════════════════════════════════════════════════ */
.gline {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--green), transparent);
  border:none;
  margin:0;
  opacity:.3;
}

/* ═══════════════════════════════════════════════════════════
   404
═══════════════════════════════════════════════════════════ */
.err-page {
  min-height:85vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:100px 20px 60px;
}
.err-num {
  font-family:var(--f-mono);
  font-size:8rem;
  background:linear-gradient(135deg,var(--cyan),var(--green));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  margin-bottom:8px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .feat-g    { grid-template-columns:repeat(2,1fr); }
  .steps-g   { grid-template-columns:repeat(2,1fr); }
  .steps-g::before { display:none; }
  .stats-g   { grid-template-columns:repeat(2,1fr); }
  .ftr-g     { grid-template-columns:1fr 1fr; }
  .blog-g    { grid-template-columns:repeat(2,1fr); }
  .cnt-sidebar { grid-template-columns:1fr; }
  .guide-g   { grid-template-columns:repeat(3,1fr); }
}

@media(max-width:768px){
  .ham { display:flex; }
  #nav {
    position:fixed;
    top:58px; left:0; right:0; bottom:0;
    background:rgba(3,5,8,.97);
    backdrop-filter:blur(20px);
    flex-direction:column;
    justify-content:center;
    gap:8px;
    padding:30px 20px;
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:999;
  }
  #nav.open { transform:translateX(0); }
  #nav ul { flex-direction:column; align-items:stretch; gap:4px; }
  #nav ul li a { padding:12px 18px; font-size:1rem; }

  /* MOBILE WIDGET — compact */
  .widget-top {
    grid-template-columns:1fr;
    gap:12px;
  }
  .gauge-wrap { width:130px; height:130px; margin:0 auto; }
  .g-val { font-size:1.65rem; }
  .metrics-stack { flex-direction:row; flex-wrap:wrap; }
  .m-card { flex:1; min-width:calc(50% - 4px); padding:8px 10px; }
  .m-val  { font-size:.9rem; }

  .res-row { grid-template-columns:1fr 1fr; }
  .res-num { font-size:1.6rem; }

  .feat-g    { grid-template-columns:1fr; }
  .steps-g   { grid-template-columns:1fr; }
  .blog-g    { grid-template-columns:1fr; }
  .ftr-g     { grid-template-columns:1fr; }
  .fg-row    { grid-template-columns:1fr; }
  .ftr-bot   { flex-direction:column; gap:10px; text-align:center; }
  .guide-g   { grid-template-columns:repeat(2,1fr); }
  .stats-g   { grid-template-columns:repeat(2,1fr); }
}

@media(max-width:480px){
  #widget { padding:16px 14px 16px; }
  .gauge-wrap { width:120px; height:120px; }
  .g-val { font-size:1.5rem; }
  .m-card { min-width:100%; }
  .stats-g   { grid-template-columns:1fr 1fr; }
  .guide-g   { grid-template-columns:1fr 1fr; }
  .srv-row   { gap:5px; }
  .srv-chip  { font-size:.62rem; padding:4px 8px; }
}