/*
Template Name: Denali
*/

/* Theme Variables */
:root {
  --primary:#4c7ef7;
  --primary-dark:#2b3ddc;
  --accent:#60c5ff;
  --bg:#f2f5ff;
  --text:#0f172a;
  --muted:#6b7280;
  --surface:#ffffff;
}

/* Base Elements */
* {
  box-sizing:border-box;
}

body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background-color:var(--bg);
  min-height:100vh;
}

img {
  max-width:100%;
  height:auto;
}

a {
  text-decoration:none;
}

main {
  background:var(--bg);
}

/* Navigation */
.nav-glass {
  background:rgba(255,255,255,0.92);
  box-shadow:0 12px 30px rgba(15,23,42,0.08);
  transition:background-color .3s ease, box-shadow .3s ease, transform .3s ease;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding-block:1rem;
}

.nav-glass > .container {
  min-height:64px;
}

.nav-glass .navbar-brand {
  color:var(--text);
  font-weight:700;
  padding-block:0;
}

.nav-glass .brand-logo {
  height:56px;
  width:auto;
  display:block;
}

.nav-glass .nav-link {
  font-weight:500;
  color:var(--text);
  margin-inline:.4rem;
}

.nav-glass .nav-link:hover,
.nav-glass .nav-link.active {
  color:var(--primary);
}

.nav-glass .btn-outline-primary {
  border-color:var(--primary);
  color:var(--primary);
}

.nav-glass .btn-outline-primary:hover {
  background:var(--primary);
  color:#fff;
}

.nav-glass.scrolled {
  background:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,0.15);
}

/* Hero Section */
.hero {
  padding:9rem 0 6rem;
  color:#fff;
}

.hero-gradient {
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#0d042a,#1c1470 50%,#0b4c86 100%);
}

.hero::after {
  content:"";
  position:absolute;
  inset:auto -20% -35% -20%;
  height:45%;
  background:radial-gradient(circle at top,rgba(255,255,255,0.25),transparent 65%);
  opacity:.45;
}

.hero-copy,
.hero-figure {
  position:relative;
}

.hero-aura {
  position:absolute;
  inset:15% 8%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(96,197,255,.8),transparent 60%);
  filter:blur(50px);
  opacity:.8;
}

.floating-img {
  position:relative;
  filter:drop-shadow(0 40px 80px rgba(5,0,20,.4));
  animation:float 7s ease-in-out infinite;
}

@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-15px); }
}

.stat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem;
}

.stat-card {
  background:rgba(255,255,255,0.08);
  border-radius:1rem;
  padding:1.25rem;
  text-align:left;
  border:1px solid rgba(255,255,255,0.1);
}

.stat-label {
  font-size:.9rem;
  letter-spacing:.05em;
  color:rgba(255,255,255,0.7);
  margin-bottom:.35rem;
}

.stat-value {
  font-size:1.6rem;
  font-weight:700;
  color:#fff;
}

/* Shared Section Helpers */
.section-spacing {
  padding:5rem 0;
}

.section-heading p {
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}

/* Feature Section */
.feature-card {
  position:relative;
  border-radius:1.25rem;
  padding:2rem 1.5rem;
  background:var(--surface);
  border:1px solid rgba(53,84,209,0.08);
  box-shadow:0 20px 50px rgba(15,23,42,0.08);
  overflow:hidden;
}

.feature-card h5 {
  margin-top:1.25rem;
  margin-bottom:.75rem;
  font-weight:600;
}

.feature-card p {
  color:var(--muted);
}

.feature-icon {
  width:64px;
  height:64px;
}

.feature-ring {
  position:absolute;
  inset:-40% auto auto 50%;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(76,126,247,0.35),transparent 70%);
  transform:translateX(-50%);
  opacity:.4;
}

/* Data Center */
.data-section {
  background:#f7f9ff;
  color:var(--text);
}

.data-copy {
  max-width:640px;
}

.map-card {
  background:transparent;
  border-radius:1.5rem;
  border:1px solid transparent;
  box-shadow:none;
  padding:1.5rem;
  max-width:1100px;
  margin-inline:auto;
}

.world-map {
  width:100%;
  height:480px;
}

#worldMap .jvectormap-container {
  width:100% !important;
  height:100% !important;
  background:transparent !important;
}

/* Pricing Section */
.pricing-card {
  position:relative;
  background:var(--surface);
  border-radius:1.5rem;
  border:1px solid rgba(76,126,247,0.15);
  box-shadow:0 30px 80px rgba(15,23,42,0.12);
  overflow:hidden;
}

.pricing-card.premium {
  border-color:rgba(156,105,255,0.4);
}

.plan-ribbon {
  position:absolute;
  top:1.2rem;
  right:-3rem;
  transform:rotate(45deg);
  background:var(--accent);
  color:#fff;
  padding:.35rem 4.5rem;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pricing-card.premium .plan-ribbon {
  background:linear-gradient(135deg,#8b5cf6,#6366f1);
}

.pricing-card ul li {
  padding:.2rem 0;
  color:var(--muted);
}

/* Use Cases Section */
.use-case-section {
  background:var(--surface);
}

.use-case-grid {
  row-gap:4.5rem;
}

.use-case-item {
  max-width:520px;
  margin-inline:auto;
}

.use-case-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  margin-bottom:1.5rem;
  border-radius:50%;
  color:#2289ff;
  background:#fff;
  box-shadow:0 16px 36px rgba(34,137,255,0.16);
}

.use-case-icon svg {
  width:38px;
  height:38px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.use-case-icon.accent-green {
  box-shadow:0 16px 36px rgba(34,197,94,0.18);
}

.use-case-icon.accent-purple {
  box-shadow:0 16px 36px rgba(168,85,247,0.18);
}

.use-case-icon.accent-orange {
  box-shadow:0 16px 36px rgba(249,115,22,0.16);
}

.use-case-icon.accent-pink {
  box-shadow:0 16px 36px rgba(236,72,153,0.16);
}

.use-case-icon.accent-red {
  box-shadow:0 16px 36px rgba(239,68,68,0.16);
}

.use-case-item h3 {
  margin-bottom:1rem;
  font-size:1.45rem;
  line-height:1.35;
  font-weight:700;
  color:var(--text);
}

.use-case-item p {
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.8;
}

/* Partner Section */
.partner-section {
  background:#f7f9ff;
}

.partner-logos .partner-img {
  max-height:50px;
  margin:1.5rem 0;
  opacity:.55;
  filter:grayscale(1);
  transition:opacity .3s ease, filter .3s ease, transform .3s ease;
}

.partner-logos .partner-img:hover {
  opacity:1;
  filter:none;
  transform:translateY(-6px);
}

/* Footer */
.footer-gradient {
  background:linear-gradient(135deg,#030016,#0d0333);
}

.footer-logo {
  height:42px;
}

/* Utility Elements */
.scroll-top {
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  border:none;
  border-radius:50%;
  width:48px;
  height:48px;
  background:var(--primary);
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 18px 45px rgba(37,99,235,0.35);
  z-index:40;
}

.scroll-top.show {
  opacity:1;
  transform:translateY(0);
}

/* Responsive Tweaks */
@media (max-width:991.98px) {
  .hero {
    padding-top:8rem;
  }

  .nav-glass,
  .nav-glass.scrolled {
    height:96px;
    min-height:96px;
    padding-block:0;
  }

  .nav-glass > .container {
    height:100%;
    min-height:0;
    align-items:center;
  }

  .nav-glass:has(.navbar-collapse.show),
  .nav-glass:has(.navbar-collapse.collapsing) {
    height:auto;
    min-height:96px;
    padding-block:1rem;
  }

  .plan-ribbon {
    display:none;
  }

  .use-case-grid {
    row-gap:3.5rem;
  }
}

@media (max-width:575.98px) {
  .hero {
    padding-top:7rem;
  }

  .section-spacing {
    padding:4rem 0;
  }

  .stat-card {
    text-align:center;
  }

  .use-case-icon {
    width:82px;
    height:82px;
    margin-bottom:1.25rem;
  }

  .use-case-icon svg {
    width:34px;
    height:34px;
  }

  .use-case-item h3 {
    font-size:1.25rem;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --primary:#8ba8ff;
    --primary-dark:#5c6ddc;
    --accent:#6ee0ff;
    --bg:#050b16;
    --text:#f4f6ff;
    --muted:#c8d0f0;
    --surface:#111a2c;
  }

  body,
  main {
    background-color:var(--bg);
    color:var(--text);
  }

  .nav-glass {
    background:rgba(9,12,24,0.92);
    box-shadow:0 12px 30px rgba(0,0,0,0.6);
  }

  .nav-glass.scrolled {
    background:#090e1f;
    box-shadow:0 18px 45px rgba(0,0,0,0.65);
  }

  .nav-glass .navbar-brand,
  .nav-glass .nav-link {
    color:var(--text);
  }

  .nav-glass .btn-outline-primary {
    color:var(--accent);
    border-color:var(--accent);
  }

  .nav-glass .btn-outline-primary:hover {
    background:var(--accent);
    color:#050b16;
  }

  .feature-card,
  .pricing-card {
    background:var(--surface);
    border-color:rgba(148,163,184,0.25);
    box-shadow:0 25px 60px rgba(0,0,0,0.45);
  }

  .use-case-section {
    background:#08111f;
  }

  .use-case-icon {
    background:#111a2c;
    border:1px solid rgba(148,163,184,0.18);
    color:var(--accent);
    box-shadow:0 16px 36px rgba(96,197,255,0.16);
  }

  .use-case-icon.accent-green {
    box-shadow:0 16px 36px rgba(74,222,128,0.14);
  }

  .use-case-icon.accent-purple {
    box-shadow:0 16px 36px rgba(192,132,252,0.16);
  }

  .use-case-icon.accent-orange {
    box-shadow:0 16px 36px rgba(251,146,60,0.14);
  }

  .use-case-icon.accent-pink {
    box-shadow:0 16px 36px rgba(244,114,182,0.14);
  }

  .use-case-icon.accent-red {
    box-shadow:0 16px 36px rgba(248,113,113,0.14);
  }

  .partner-section,
  .data-section {
    background:#0b1424;
  }

  .footer-gradient {
    background:linear-gradient(135deg,#000212,#070c1f);
  }

  .scroll-top {
    box-shadow:0 18px 45px rgba(0,0,0,0.4);
  }

  .text-muted {
    color:var(--muted) !important;
  }
}