/*
Theme Name: Divergent Servers
Theme URI: https://divergentservers.com
Author: Divergent Servers
Author URI: https://divergentservers.com
Description: Game server hosting theme for Divergent Servers. Dark neon design with full WHMCS integration.
Version: 2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: divergentservers
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --bg:            #07091a;
  --bg-surface:    #0c1030;
  --bg-card:       #0f1535;
  --bg-card-hover: #131a40;
  --border:        #1c2a50;
  --border-glow:   rgba(79,114,255,.35);

  --primary:       #4f72ff;
  --primary-dk:    #3a59e0;
  --primary-lt:    #7090ff;
  --primary-glow:  rgba(79,114,255,.22);

  --accent:        #8b5cf6;
  --accent-glow:   rgba(139,92,246,.22);

  --text:          #eef2ff;
  --text-muted:    #8899bb;
  --text-dim:      #4a5a80;

  --success:       #34d399;
  --warning:       #fbbf24;
  --danger:        #f87171;

  --gradient-brand:  linear-gradient(135deg,#4f72ff 0%,#8b5cf6 100%);
  --gradient-hero:   radial-gradient(ellipse 80% 60% at 50% -10%,#1a2a6c 0%,transparent 65%);
  --gradient-glow:   radial-gradient(ellipse 50% 40% at 50% 0%,rgba(79,114,255,.14) 0%,transparent 70%);

  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk','Inter',sans-serif;

  --container:  1200px;
  --gap:        1.5rem;
  --radius:     12px;
  --radius-lg:  20px;
  --radius-sm:  8px;
  --transition: .2s ease;
}

/* ============================================================
   RESET & BASE
============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--primary); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--primary-lt); }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; }

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.2;
  color:var(--text);
}
h1 { font-size:clamp(2.2rem,5vw,3.5rem); }
h2 { font-size:clamp(1.7rem,3.5vw,2.5rem); }
h3 { font-size:clamp(1.1rem,2vw,1.4rem); }
p  { color:var(--text-muted); line-height:1.75; }

.text-gradient {
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ============================================================
   LAYOUT
============================================================ */
.container {
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
}
.section    { padding:80px 0; }
.section-sm { padding:56px 0; }

.section-label {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--primary);
  background:rgba(79,114,255,.1);
  border:1px solid rgba(79,114,255,.25);
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:1rem;
}
.section-header {
  text-align:center;
  max-width:640px;
  margin:0 auto 3rem;
}
.section-header p { margin-top:.75rem; font-size:1.1rem; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  border-radius:var(--radius);
  font-size:.95rem;
  font-weight:600;
  font-family:var(--font-display);
  transition:all var(--transition);
  border:none;
  white-space:nowrap;
  text-decoration:none;
}
.btn-primary {
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 0 24px var(--primary-glow);
}
.btn-primary:hover {
  opacity:.88;
  transform:translateY(-1px);
  box-shadow:0 0 36px var(--primary-glow);
  color:#fff;
}
.btn-outline {
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}
.btn-outline:hover {
  border-color:var(--primary);
  color:var(--primary);
  background:rgba(79,114,255,.08);
}
.btn-ghost {
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover { background:rgba(255,255,255,.1); color:var(--text); }
.btn-lg { padding:14px 32px; font-size:1rem; }
.btn-sm { padding:8px 16px; font-size:.85rem; }

/* ============================================================
   HEADER / NAV
============================================================ */
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(7,9,26,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
  gap:1.5rem;
}
.site-logo {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.site-logo-image {
  height:30px;
  width:auto;
  max-width:220px;
}
.site-logo-icon {
  width:36px;
  height:36px;
  background:var(--gradient-brand);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}
.site-logo-name {
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  color:var(--text);
}
.site-logo-name span { color:var(--primary); }

.nav-main {
  display:flex;
  align-items:center;
  gap:.25rem;
}
.nav-main a {
  padding:8px 14px;
  border-radius:var(--radius-sm);
  font-size:.9rem;
  font-weight:500;
  color:var(--text-muted);
  transition:all var(--transition);
}
.nav-main a:hover,
.nav-main a.active { color:var(--text); background:rgba(255,255,255,.06); }

.nav-actions {
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
}
.nav-hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  background:none;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  gap:5px;
  padding:8px;
}
.nav-hamburger span {
  display:block;
  width:100%;
  height:2px;
  background:var(--text-muted);
  border-radius:2px;
  transition:all .3s ease;
}
.nav-mobile {
  display:none;
  flex-direction:column;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  padding:1rem 1.5rem 1.5rem;
  gap:.25rem;
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  display:block;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:.95rem;
  font-weight:500;
  color:var(--text-muted);
}
.nav-mobile a:hover { color:var(--text); background:rgba(255,255,255,.06); }
.nav-mobile-divider {
  display:flex;
  gap:.75rem;
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px solid var(--border);
}
.nav-mobile-divider .btn { flex:1; justify-content:center; }

/* ============================================================
   HERO
============================================================ */
.hero {
  position:relative;
  padding:100px 0 80px;
  overflow:hidden;
  text-align:center;
}
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-hero),var(--gradient-glow);
  z-index:0;
}
.hero-grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(79,114,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,114,255,.05) 1px,transparent 1px);
  background-size:60px 60px;
  z-index:0;
}
.hero-content {
  position:relative;
  z-index:1;
  max-width:780px;
  margin:0 auto;
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 16px 6px 8px;
  background:rgba(79,114,255,.12);
  border:1px solid rgba(79,114,255,.3);
  border-radius:100px;
  font-size:.82rem;
  font-weight:600;
  color:var(--primary-lt);
  margin-bottom:1.5rem;
}
.hero-badge-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.7); }
}
.hero h1 { margin-bottom:1.25rem; letter-spacing:-.02em; }
.hero p  { font-size:1.15rem; max-width:560px; margin:0 auto 2rem; }
.hero-actions {
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-stats {
  display:flex;
  justify-content:center;
  gap:3rem;
  margin-top:4rem;
  padding-top:2.5rem;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.hero-stat-value {
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:800;
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  margin-bottom:4px;
}
.hero-stat-label {
  font-size:.82rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ============================================================
   GAME CARDS
============================================================ */
.game-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.25rem;
}
.game-card {
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem;
  overflow:hidden;
  text-decoration:none;
  transition:all .25s ease;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.75rem;
}
.game-card:hover {
  border-color:var(--primary);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 0 1px var(--border-glow);
  color:inherit;
}
.game-icon {
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
}
.game-icon.minecraft { background:rgba(62,160,77,.15); border:1px solid rgba(62,160,77,.3); }
.game-icon.coming    { background:rgba(74,90,128,.15);  border:1px solid rgba(74,90,128,.3);  }
.game-card-name {
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  color:var(--text);
}
.game-card-from {
  font-size:.85rem;
  color:var(--text-muted);
}
.game-card-from strong { color:var(--primary-lt); font-size:1rem; }
.game-card-tag {
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-dim);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  padding:3px 8px;
  border-radius:100px;
}
.game-card-arrow {
  margin-top:auto;
  color:var(--text-dim);
  font-size:1.1rem;
  transition:transform var(--transition);
}
.game-card:hover .game-card-arrow { transform:translateX(4px); color:var(--primary); }

/* ============================================================
   FEATURES
============================================================ */
.feature-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.25rem;
}
.feature-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.75rem;
  transition:border-color var(--transition);
}
.feature-card:hover { border-color:var(--border-glow); }
.feature-icon {
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  background:rgba(79,114,255,.12);
  border:1px solid rgba(79,114,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  margin-bottom:1rem;
}
.feature-card h3 { font-size:1rem; margin-bottom:.5rem; }
.feature-card p  { font-size:.9rem; }

/* ============================================================
   STEPS
============================================================ */
.steps-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  position:relative;
}
.steps-grid::before {
  content:'';
  position:absolute;
  top:32px;
  left:calc(16.66% + 32px);
  right:calc(16.66% + 32px);
  height:1px;
  background:linear-gradient(to right,var(--primary),var(--accent));
  opacity:.3;
}
.step-item { text-align:center; }
.step-number {
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--bg-card);
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:700;
  color:var(--primary);
  margin:0 auto 1.25rem;
  position:relative;
  z-index:1;
}
.step-item h3 { margin-bottom:.5rem; }
.step-item p  { font-size:.9rem; }

/* ============================================================
   PRICING
============================================================ */
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.25rem;
  align-items:start;
}
.pricing-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
  position:relative;
  transition:all .25s ease;
}
.pricing-card.featured {
  background:linear-gradient(180deg,#132050 0%,var(--bg-card) 100%);
  border-color:var(--primary);
  box-shadow:0 0 40px rgba(79,114,255,.18);
}
.pricing-card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.5);
}
.pricing-badge {
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--gradient-brand);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:5px 14px;
  border-radius:100px;
  white-space:nowrap;
}
.pricing-name { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.pricing-price { display:flex; align-items:baseline; gap:4px; margin:1.25rem 0; }
.pricing-amount { font-family:var(--font-display); font-size:2.6rem; font-weight:800; color:var(--text); line-height:1; }
.pricing-currency { font-size:1.2rem; font-weight:600; color:var(--text-muted); align-self:flex-start; margin-top:4px; }
.pricing-period  { font-size:.85rem; color:var(--text-dim); }
.pricing-spec {
  display:flex;
  align-items:center;
  gap:8px;
  padding:.65rem 0;
  border-bottom:1px solid var(--border);
  font-size:.9rem;
  color:var(--text-muted);
}
.pricing-spec:last-of-type { border-bottom:none; }
.pricing-spec-label { flex:1; }
.pricing-spec-val { font-weight:600; color:var(--text); font-size:.88rem; }
.pricing-features { margin:1.25rem 0; }
.pricing-feature {
  display:flex;
  align-items:center;
  gap:8px;
  padding:.4rem 0;
  font-size:.88rem;
  color:var(--text-muted);
}
.pricing-feature-check { color:var(--success); flex-shrink:0; }
.pricing-card .btn { width:100%; justify-content:center; margin-top:1.25rem; }

/* ============================================================
   ACCORDION / FAQ
============================================================ */
.accordion-list {
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.accordion-item {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color var(--transition);
}
.accordion-item.open { border-color:var(--border-glow); }
.accordion-trigger {
  width:100%;
  padding:1.25rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  border:none;
  color:var(--text);
  font-size:1rem;
  font-weight:600;
  font-family:var(--font-display);
  text-align:left;
  gap:1rem;
}
.accordion-trigger:hover { color:var(--primary); }
.accordion-icon {
  width:24px;
  height:24px;
  border-radius:6px;
  background:rgba(79,114,255,.1);
  border:1px solid rgba(79,114,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:1rem;
  color:var(--primary);
  transition:transform .3s ease;
  line-height:1;
}
.accordion-item.open .accordion-icon { transform:rotate(45deg); }
.accordion-body { display:none; padding:0 1.5rem 1.5rem; }
.accordion-item.open .accordion-body { display:block; }
.accordion-body p { font-size:.95rem; }

/* ============================================================
   CTA BANNER
============================================================ */
.cta-banner {
  background:linear-gradient(135deg,#0d1a4a 0%,#1a0a3a 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:3.5rem 2rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-glow);
  opacity:.5;
}
.cta-banner-content { position:relative; z-index:1; max-width:520px; margin:0 auto; }
.cta-banner h2 { margin-bottom:.75rem; }
.cta-banner p  { margin-bottom:1.75rem; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   STATUS
============================================================ */
.status-metrics {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  max-width:1000px;
  margin:0 auto 2.5rem;
}
.status-metric {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  text-align:center;
}
.status-metric-value {
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:800;
  color:var(--success);
  margin-bottom:4px;
  line-height:1;
}
.status-metric-label {
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-dim);
}
.status-service-list {
  max-width:640px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.status-service-item {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.status-service-name { font-weight:600; font-size:.95rem; }
.status-badge {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:100px;
}
.status-badge.operational { color:var(--success); background:rgba(52,211,153,.1);  border:1px solid rgba(52,211,153,.2); }
.status-badge.degraded    { color:var(--warning); background:rgba(251,191,36,.1);  border:1px solid rgba(251,191,36,.2); }
.status-badge.down        { color:var(--danger);  background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.2); }
.status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.status-badge.operational .status-dot { background:var(--success); }
.status-badge.degraded    .status-dot { background:var(--warning); }
.status-badge.down        .status-dot { background:var(--danger); }

/* ============================================================
   CONTACT / FORMS
============================================================ */
.contact-layout {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:3rem;
  align-items:start;
}
.contact-card-info { display:flex; flex-direction:column; gap:1.25rem; }
.contact-info-item {
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
.contact-info-icon {
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  background:rgba(79,114,255,.1);
  border:1px solid rgba(79,114,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  flex-shrink:0;
}
.contact-info-item h4 { font-size:.9rem; margin-bottom:2px; }
.contact-info-item p  { font-size:.88rem; margin:0; }
.contact-form-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
}
.form-group { display:flex; flex-direction:column; gap:.375rem; margin-bottom:1.25rem; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-label { font-size:.88rem; font-weight:500; color:var(--text-muted); }
.form-control {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-size:.95rem;
  color:var(--text);
  font-family:var(--font-body);
  transition:border-color var(--transition),box-shadow var(--transition);
  width:100%;
}
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.form-control::placeholder { color:var(--text-dim); }
textarea.form-control { min-height:130px; resize:vertical; }
select.form-control option { background:var(--bg-surface); }
.form-notice {
  padding:12px 16px;
  border-radius:var(--radius-sm);
  font-size:.88rem;
  margin-bottom:1rem;
}
.form-notice.success { background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.2); color:var(--success); }
.form-notice.error   { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.2); color:var(--danger); }
.form-honeypot { display:none !important; }

/* ============================================================
   PAGE HERO (inner pages)
============================================================ */
.page-hero {
  position:relative;
  padding:72px 0 64px;
  text-align:center;
  overflow:hidden;
}
.page-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-glow);
}
.page-hero-content { position:relative; z-index:1; }
.page-hero h1 { margin-bottom:.75rem; }
.page-hero p  { font-size:1.1rem; max-width:580px; margin:0 auto; }

/* ============================================================
   ABOUT
============================================================ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-visual {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:5rem;
  position:relative;
  overflow:hidden;
}
.about-visual::after {
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-brand);
  opacity:.05;
}
.about-text h2 { margin-bottom:1rem; }
.about-text p  { margin-bottom:1rem; }
.value-list    { margin-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.value-item {
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.95rem;
  color:var(--text-muted);
}
.value-item::before { content:'✦'; color:var(--primary); flex-shrink:0; }

/* ============================================================
   LEGAL
============================================================ */
.legal-content { max-width:780px; margin:0 auto; }
.legal-content h2 { font-size:1.2rem; margin:2rem 0 .75rem; }
.legal-content h3 { font-size:1rem; margin:1.5rem 0 .5rem; }
.legal-content p  { font-size:.95rem; margin-bottom:.75rem; }
.legal-content ul { padding-left:1.5rem; margin-bottom:.75rem; }
.legal-content ul li { list-style:disc; font-size:.95rem; color:var(--text-muted); margin-bottom:.25rem; }

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background:var(--bg-surface);
  border-top:1px solid var(--border);
  padding:4rem 0 1.5rem;
  margin-top:auto;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.8fr repeat(3,1fr);
  gap:3rem;
  margin-bottom:3rem;
}
.footer-brand p {
  font-size:.9rem;
  margin:.75rem 0 1.25rem;
  max-width:260px;
}
.footer-social { display:flex; gap:.75rem; }
.footer-social-link {
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  color:var(--text-muted);
  text-decoration:none;
  transition:all var(--transition);
}
.footer-social-link:hover { border-color:var(--primary); color:var(--primary); }
.footer-col h4 {
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-dim);
  margin-bottom:1rem;
}
.footer-col ul  { display:flex; flex-direction:column; gap:.5rem; }
.footer-col li a { font-size:.9rem; color:var(--text-muted); }
.footer-col li a:hover { color:var(--text); }
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:1.5rem;
  border-top:1px solid var(--border);
  gap:1rem;
  flex-wrap:wrap;
}
.footer-bottom p { font-size:.82rem; color:var(--text-dim); margin:0; }
.footer-bottom-links { display:flex; gap:1.25rem; }
.footer-bottom-links a { font-size:.82rem; color:var(--text-dim); }
.footer-bottom-links a:hover { color:var(--text-muted); }

/* ============================================================
   BLOG
============================================================ */
.blog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
}
.blog-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  transition:border-color var(--transition);
}
.blog-card:hover { border-color:var(--border-glow); }
.blog-card-meta { font-size:.8rem; color:var(--text-dim); margin-bottom:.75rem; }
.blog-card h3   { margin-bottom:.5rem; }
.blog-card p    { font-size:.9rem; margin-bottom:1rem; }

/* ============================================================
   PORTAL WIDGETS
============================================================ */
.portal-inline-links {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:1.5rem;
}

.portal-widget-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}

.portal-widget-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.portal-widget-card-full {
  grid-column:1 / -1;
}

.portal-widget-top h3 {
  margin-bottom:.35rem;
}

.portal-widget-top p {
  font-size:.9rem;
}

.portal-widget-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.portal-widget-embed {
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-surface);
  min-height:340px;
}

.portal-widget-embed iframe {
  width:100%;
  min-height:340px;
  border:0;
  background:#fff;
}
   INLINE NOTICE / INFO BOXES
============================================================ */
.info-box {
  padding:1rem 1.25rem;
  border-radius:var(--radius);
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-size:.9rem;
}
.info-box.blue   { background:rgba(79,114,255,.1); border:1px solid rgba(79,114,255,.25); color:var(--primary-lt); }
.info-box.green  { background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.25); color:var(--success); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:900px) {
  .nav-main, .nav-actions { display:none; }
  .nav-hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .about-grid { grid-template-columns:1fr; }
  .about-visual { display:none; }
  .contact-layout { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr; }
  .steps-grid::before { display:none; }
}
@media (max-width:600px) {
  .section { padding:56px 0; }
  .portal-widget-grid { grid-template-columns:1fr; }
  .portal-widget-card-full { grid-column:auto; }
  .hero { padding:72px 0 56px; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero-stats { gap:2rem; }
  .pricing-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .portal-widget-embed,
  .portal-widget-embed iframe { min-height:300px; }
}