/* ── Terranode — Light Premium Design ─────────────────────────────────── */
:root {
  --bg:       #FFFFFF;
  --bg2:      #F7F9FC;
  --bg3:      #EEF2F8;
  --dark:     #0A0F1E;
  --dark2:    #1A2035;
  --blue:     #2563EB;
  --blue-lt:  #EFF6FF;
  --green:    #16A34A;
  --green-lt: #F0FDF4;
  --purple:   #7C3AED;
  --amber:    #D97706;
  --dim:      #4B5A72;
  --muted:    #94A3B8;
  --border:   #E2E8F0;
  --border2:  #CBD5E1;
  --shadow:   0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --shadow-md:0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 48px rgba(0,0,0,.12);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--dark);font-family:'Metrophobic',sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(37,99,235,.15);color:var(--dark)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}

/* ── Animations ───────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}
@keyframes shimmer-light{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes draw-line{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes glow-blue{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.3)}50%{box-shadow:0 0 0 8px rgba(37,99,235,0)}}
@keyframes counter-bar{from{width:0}to{width:var(--w)}}

.an{animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both}
.an.d1{animation-delay:.08s}.an.d2{animation-delay:.16s}
.an.d3{animation-delay:.24s}.an.d4{animation-delay:.32s}.an.d5{animation-delay:.40s}
.float{animation:float 4s ease-in-out infinite}
.pulse-dot{animation:pulse-dot 2s ease-in-out infinite}
.spin-slow{animation:spin-slow 20s linear infinite}

/* ── Reveal on scroll ─────────────────────────────────────────────── */
.reveal{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}

/* ── Section ──────────────────────────────────────────────────────── */
.section-label{font-family:'Instrument Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);margin-bottom:10px;display:block}
.section-title{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.5px;color:var(--dark);line-height:1.1}
.section-sub{font-family:'Metrophobic',sans-serif;font-size:15px;color:var(--dim);line-height:1.75;max-width:540px;margin:.75rem auto 0}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero-bg{
  background:radial-gradient(ellipse 80% 60% at 60% -10%, rgba(37,99,235,.06) 0%, transparent 70%),
             radial-gradient(ellipse 50% 40% at 10% 80%, rgba(124,58,237,.04) 0%, transparent 70%);
}
.hero-grid{
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:60px 60px;
  opacity:.5;
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card{background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover{border-color:var(--border2);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-blue{background:var(--blue-lt);border-color:rgba(37,99,235,.2)}
.card-dark{background:var(--dark);border-color:transparent;color:#fff}
.card-dark .font-meta,.card-dark p{color:rgba(255,255,255,.6)}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:14px;padding:11px 22px;border-radius:10px;border:none;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 1px 3px rgba(37,99,235,.3),0 4px 12px rgba(37,99,235,.2)}
.btn-primary:hover{background:#1D4ED8;transform:translateY(-1px);box-shadow:0 2px 8px rgba(37,99,235,.35),0 6px 20px rgba(37,99,235,.25)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--dark);font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:14px;padding:10px 20px;border-radius:10px;border:1.5px solid var(--border2);cursor:pointer;transition:background .15s,border-color .15s}
.btn-ghost:hover{background:var(--bg2);border-color:var(--dark)}
.btn-dark{background:var(--dark);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.btn-dark:hover{background:var(--dark2)}

/* ── Badge / pill ─────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:'Instrument Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 14px;border-radius:100px;border:1px solid}
.badge-blue{color:var(--blue);background:var(--blue-lt);border-color:rgba(37,99,235,.25)}
.badge-green{color:var(--green);background:var(--green-lt);border-color:rgba(22,163,74,.25)}
.badge-dark{color:#fff;background:var(--dark);border-color:transparent}
.badge-outline{color:var(--dim);background:transparent;border-color:var(--border2)}
.tag{display:inline-block;font-family:'Metrophobic',sans-serif;font-size:11px;color:var(--blue);background:var(--blue-lt);border:1px solid rgba(37,99,235,.2);border-radius:100px;padding:2px 10px}
.tag-green{color:var(--green);background:var(--green-lt);border-color:rgba(22,163,74,.2)}

/* ── Icon box ─────────────────────────────────────────────────────── */
.icon-box{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-box-blue{background:var(--blue-lt);color:var(--blue)}
.icon-box-dark{background:var(--dark);color:#fff}
.icon-box svg{width:22px;height:22px}

/* ── Pricing ──────────────────────────────────────────────────────── */
.price-tag{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:2.8rem;letter-spacing:-2px;color:var(--dark);line-height:1}
.price-period{font-family:'Metrophobic',sans-serif;font-size:13px;color:var(--muted)}
.feat-check{color:var(--green);flex-shrink:0}

/* ── Tables ───────────────────────────────────────────────────────── */
.tn-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tn-table th{background:var(--bg2);color:var(--dim);font-family:'Instrument Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
.tn-table td{padding:12px 16px;color:var(--dim);border-bottom:1px solid var(--border);font-family:'Metrophobic',sans-serif}
.tn-table tr:last-child td{border-bottom:none}
.tn-table tr:hover td{background:var(--bg2)}
.tn-table .plan-popular td{background:var(--blue-lt)}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq-item{background:var(--bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:8px;transition:border-color .2s,box-shadow .2s}
.faq-item:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.faq-question{width:100%;background:none;border:none;color:var(--dark);font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:14px;padding:18px 20px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-answer{padding:0 20px 18px;font-family:'Metrophobic',sans-serif;font-size:13.5px;color:var(--dim);line-height:1.75;border-top:1px solid var(--border)}

/* ── Nav ──────────────────────────────────────────────────────────── */
.nav-link{font-family:'Metrophobic',sans-serif;font-size:13px;color:var(--dim);padding:6px 12px;border-radius:8px;transition:color .15s,background .15s;white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--dark);background:var(--bg2)}
.nav-dropdown{background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;min-width:220px}
.nav-drop-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-family:'Metrophobic',sans-serif;font-size:13px;color:var(--dim);transition:background .15s,color .15s}
.nav-drop-item:hover{background:var(--bg2);color:var(--dark)}
.nav-drop-item .icon-sm{width:32px;height:32px;border-radius:8px;background:var(--blue-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-drop-item .icon-sm svg{width:16px;height:16px;color:var(--blue)}

/* ── Tool input ───────────────────────────────────────────────────── */
.tool-input{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:11px 16px;color:var(--dark);font-family:'Metrophobic',sans-serif;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s}
.tool-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}

/* ── Server stats card (VPS hero) ────────────────────────────────── */
.server-card{background:var(--dark);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px;color:#fff;font-family:'Metrophobic',sans-serif}
.server-bar-wrap{background:rgba(255,255,255,.08);border-radius:100px;height:6px;overflow:hidden;margin-top:8px}
.server-bar{height:6px;border-radius:100px;background:linear-gradient(90deg,var(--blue),#60A5FA);animation:counter-bar .8s cubic-bezier(.22,1,.36,1) both}
.server-bar.green{background:linear-gradient(90deg,var(--green),#4ADE80)}
.server-bar.purple{background:linear-gradient(90deg,var(--purple),#A78BFA)}
.server-bar.amber{background:linear-gradient(90deg,var(--amber),#FCD34D)}

/* ── Network map ──────────────────────────────────────────────────── */
#network-map{width:100%;aspect-ratio:16/9;background:#080E1C;border-radius:20px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.06)}
#network-map canvas{position:absolute;inset:0;width:100%;height:100%}
.map-node-label{position:absolute;font-family:'Instrument Sans',sans-serif;font-size:11px;font-weight:600;color:#fff;white-space:nowrap;pointer-events:none}
.dc-popup{position:absolute;background:rgba(10,15,30,.95);border:1px solid rgba(37,99,235,.3);border-radius:14px;padding:16px 20px;color:#fff;font-family:'Metrophobic',sans-serif;font-size:12px;backdrop-filter:blur(8px);min-width:240px;z-index:10;pointer-events:none}

/* ── M365 app grid ────────────────────────────────────────────────── */
.ms-app{background:var(--dark2);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:20px 16px;text-align:center;transition:transform .2s,box-shadow .2s;cursor:default}
.ms-app:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.ms-icon{width:48px;height:48px;border-radius:12px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:20px;color:#fff}

/* ── Blog card ────────────────────────────────────────────────────── */
.blog-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.blog-card img{width:100%;height:180px;object-fit:cover}
.blog-card-body{padding:20px}

/* ── Admin ────────────────────────────────────────────────────────── */
.admin-sidebar{background:var(--dark);width:220px;min-height:100vh;position:fixed;top:0;left:0;padding:24px 12px}
.admin-content{margin-left:220px;min-height:100vh;background:var(--bg2);padding:32px}
.admin-nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;font-family:'Metrophobic',sans-serif;font-size:13px;color:rgba(255,255,255,.6);transition:background .15s,color .15s;margin-bottom:2px}
.admin-nav-item:hover,.admin-nav-item.active{background:rgba(255,255,255,.08);color:#fff}
.stat-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:20px 24px;box-shadow:var(--shadow)}
.stat-number{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:2rem;color:var(--dark);letter-spacing:-1px}
.stat-label{font-family:'Metrophobic',sans-serif;font-size:12px;color:var(--muted);margin-top:4px}

/* ── Separators / decorative ──────────────────────────────────────── */
.dot-sep{width:4px;height:4px;border-radius:50%;background:var(--border2);display:inline-block}
.gradient-text{color:var(--blue)}

/* ── Responsive ───────────────────────────────────────────────────── */
@media(max-width:768px){.admin-sidebar{display:none}.admin-content{margin-left:0;padding:16px}.price-tag{font-size:2rem}}

/* ── Input/select dark ────────────────────────────────────────────── */
select{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--dark);font-family:'Metrophobic',sans-serif;font-size:13px;outline:none;cursor:pointer}
select:focus{border-color:var(--blue)}

/* Force readable text in light sections */
.bg-white h1,.bg-white h2,.bg-white h3,.bg-slate-50 h1,.bg-slate-50 h2,.bg-slate-50 h3{color:var(--dark)}

/* ── Text readability enforcement ──────────────────────────────────────── */
/* Ensure page headings are always readable on light backgrounds */
.hero-section h1, .hero-section h2, .hero-section p { color: inherit; }
section:not([style*="background:#"]):not([style*="background: #"]) h1,
section:not([style*="background:#"]):not([style*="background: #"]) h2 {
  color: var(--dark);
}

/* badge text always readable */
.badge-blue { color: #1D4ED8 !important; }
.badge-green { color: #15803D !important; }

/* card text - always dark on white */
.card h3, .card p { color: inherit; }

/* fix: heading inside hero section with white bg */
section.hero-section { background: var(--bg); }
section.hero-section h1 { color: var(--dark) !important; }

/* FAQ question always dark */
.faq-question { color: var(--dark) !important; }

/* text-white overrides removed - handled per-section */

/* Icon box - ensure icon is visible */
.icon-box { border: 1px solid rgba(0,0,0,.06); }
.icon-box svg { width: 22px; height: 22px; }

/* Nav dropdown - force proper sizing */
.nav-drop-item .icon-sm {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  border-radius: 6px !important;
}
.nav-drop-item .icon-sm svg {
  width: 14px !important;
  height: 14px !important;
}

/* Page transition for faster-feeling navigation */
body { animation: pageFadeIn .15s ease; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
a { -webkit-tap-highlight-color: transparent; }