/*
Theme Name: Caluclai SpeedTest Pro (OnePage)
Theme URI: https://caluclai.com
Author: BERMED
Description: A sleek one-page WordPress theme that embeds SpeedTest Pro v6.4-en with a modern dark UI.
Version: 2.1
License: GPLv2 or later
Text Domain: caluclai-speedtestpro
*/

:root{
  --bg0:#070a13; --bg1:#0a1022; --panel:#0d1428;
  --ink:#e6edf7; --muted:#9fb0cf;
  --acc1:#22d3ee; --acc2:#7c3aed;
  --ring:#1a2649;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 700px at 75% 5%, rgba(40,60,150,.35) 0%, transparent 55%),
    radial-gradient(1000px 600px at 10% 95%, rgba(32,180,220,.25) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(10,16,34,.75), rgba(10,16,34,.35));
  border-bottom:1px solid rgba(148,163,184,.12);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.4px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:conic-gradient(var(--acc1),var(--acc2),var(--acc1));box-shadow:0 0 14px var(--acc1)}
.brand span{font-size:18px}
.menu{display:flex; gap:18px; align-items:center}
.menu a{color:var(--muted); text-decoration:none; font-weight:700}
.menu a:hover{color:#cfe7ff}
.burger{display:none; width:36px;height:36px;border:1px solid rgba(148,163,184,.16);border-radius:10px; align-items:center; justify-content:center; cursor:pointer; color:#cfe7ff}
@media (max-width:780px){
  .menu{display:none}
  .burger{display:flex}
}

/* Hero */
.hero{padding:80px 0 30px}
.hero .inner{display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:center}
.hero h1{margin:0 0 8px; font-size: clamp(26px, 5vw, 44px); line-height:1.1}
.hero p{margin:0 0 18px; color:var(--muted); font-size: clamp(14px, 2.3vw, 16px)}
.cta{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid rgba(148,163,184,.18);
     background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); color:#eaf4ff; text-decoration:none; font-weight:900}
.cta:hover{filter:brightness(1.1)}
.heroCard{
  min-height:220px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Test Section */
.section{padding:40px 0}
.section h2{margin:0 0 10px; font-size: clamp(20px, 4vw, 28px)}
.section .lead{color:var(--muted)}
.frameWrap{
  margin-top:16px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:22px; overflow:hidden;
  background:rgba(10,16,34,.4);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.frameWrap iframe{display:block; width:100%; height:80vh; border:0}

/* About */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px}
.card{
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px; padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}
@media (max-width:900px){ .hero .inner{grid-template-columns:1fr} .cards{grid-template-columns:1fr} .frameWrap iframe{height:78vh} }
@media (max-width:480px){ .frameWrap iframe{height:75vh} }

/* Footer */
.site-footer{
  margin-top:40px; padding:22px 0; text-align:center; color:#bcd3ff;
  border-top:1px solid rgba(148,163,184,.12);
  background:linear-gradient(180deg, rgba(10,16,34,.35), rgba(10,16,34,.7));
}
.site-footer a{color:#a8eaff; text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Mobile menu drawer */
.drawer{position:fixed; inset:0 0 auto 0; top:58px; background:rgba(10,16,34,.96); display:none; z-index:49}
.drawer nav{display:flex; flex-direction:column; gap:12px; padding:16px}
.drawer a{color:#e6edf7; text-decoration:none; font-weight:800; font-size:16px}
.drawer a:hover{color:#a8eaff}