:root {
  --c-primary: #1D4ED8;
  --c-primary-2: #0B3AAE;
  --c-soft: #EAF2FF;
  --c-teal: #14B8A6;
  --c-mint: #E8FFFA;
  --c-accent: #F97316;
  --c-text: #0F172A;
  --c-muted: #475569;
  --c-border: #E2E8F0;
  --shadow-1: 0 10px 30px rgba(2, 8, 23, .08);
  --shadow-2: 0 18px 60px rgba(2, 8, 23, .12);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--c-text);
}

/* Gradient backdrops */
.bg-premium {
  background: radial-gradient(1100px 500px at 10% 10%, rgba(29, 78, 216, .12), transparent 60%),
    radial-gradient(900px 450px at 90% 30%, rgba(20, 184, 166, .10), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 45%, #ffffff 100%);
}

.section-pad {
  padding: 3.5rem 0;
}

.section-pad-lg {
  padding: 4.5rem 0;
}

/* Cards */
.card {
  border: 1px solid var(--c-border);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: var(--shadow-1);
}

.card-soft {
  background: linear-gradient(180deg, rgba(234, 242, 255, .75) 0%, rgba(255, 255, 255, .95) 100%);
}

.card-hover {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(29, 78, 216, .35);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  color: #fff;
  border-radius: 999px;
  padding: .75rem 1.15rem;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(29, 78, 216, .22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 34px rgba(29, 78, 216, .26);
}

/* Outline pill button (used in “Have questions?” links etc.) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(29, 78, 216, .22);
  color: var(--c-primary);
  border-radius: 999px;
  padding: .6rem 1rem;
  font-weight: 600;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(8px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn-outline:hover {
  transform: translateY(-1px);
  background: rgba(234, 242, 255, .9);
  border-color: rgba(29, 78, 216, .35);
}

.btn-accent {
  background: linear-gradient(135deg, var(--c-accent) 0%, #FB923C 100%);
  color: #111827;
  border-radius: 999px;
  padding: .75rem 1.15rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(249, 115, 22, .18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-accent:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 16px 34px rgba(249, 115, 22, .22);
}

.btn-ghost {
  border: 1px solid rgba(29, 78, 216, .25);
  color: var(--c-primary);
  border-radius: 999px;
  padding: .75rem 1.15rem;
  font-weight: 600;
  background: rgba(234, 242, 255, .55);
  transition: background .15s ease, transform .15s ease;
}

.btn-ghost:hover {
  background: rgba(234, 242, 255, .9);
  transform: translateY(-1px);
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
}

.hero:before {
  content: "";
  position: absolute;
  inset: -60px;
  background: radial-gradient(700px 320px at 15% 15%, rgba(29, 78, 216, .22), transparent 60%),
    radial-gradient(650px 340px at 85% 25%, rgba(20, 184, 166, .18), transparent 55%),
    radial-gradient(700px 380px at 75% 85%, rgba(249, 115, 22, .12), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
}

/* Scroll reveal */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s ease;
}

/* Simple diagram box */
.diagram {
  border: 1px dashed rgba(29, 78, 216, .35);
  background: rgba(234, 242, 255, .55);
  border-radius: 1.25rem;
}

/* Mini bar chart */
.bar-wrap {
  display: grid;
  gap: .5rem;
}

.bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .35);
  overflow: hidden;
}

.bar>span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-teal), var(--c-primary));
}

/* Footer polish */
.footer-grad {
  background: linear-gradient(135deg, #0B1220 0%, #0F1B33 55%, #0B1220 100%);
}


/* ---- Mobile readability boost (global) ---- */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

@media (max-width: 640px) {

  /* Slightly larger base on small screens */
  html {
    font-size: 17px;
  }

  /* Tailwind text size overrides for better mobile legibility */
  .text-xs {
    font-size: 0.95rem !important;
    line-height: 1.4rem !important;
  }

  .text-sm {
    font-size: 1rem !important;
    line-height: 1.55rem !important;
  }

  .text-base {
    font-size: 1.05rem !important;
    line-height: 1.65rem !important;
  }

  .text-lg {
    line-height: 1.8rem !important;
  }

  /* Buttons feel tappable */
  .btn-primary,
  .btn-outline {
    padding: .85rem 1.1rem !important;
    font-size: 1rem !important;
    border-radius: 9999px !important;
  }

  /* Make “Have questions?” topic pills use the available width */
  .diagram .btn-outline {
    flex: 1 1 140px;
  }

  /* Cards + sections breathe on mobile */
  .card-hover {
    transform: none !important;
  }

  .card-soft {
    border-radius: 1.25rem;
  }

  .section {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }
}

/* 3D colorful cards */
.glass-3d {
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .62));
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    0 22px 70px rgba(2, 8, 23, .10),
    0 10px 30px rgba(2, 8, 23, .08);
  backdrop-filter: blur(10px);
}

.lift-3d {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}

.lift-3d:hover {
  transform: translateY(-4px);
  box-shadow:
    0 26px 80px rgba(2, 8, 23, .12),
    0 12px 36px rgba(2, 8, 23, .10);
}

/* colorful icon chip */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(2, 8, 23, .10);
  border: 1px solid rgba(255, 255, 255, .65);
}

/* subtle decorative glow blobs */
.glow-blob {
  position: absolute;
  inset: auto;
  width: 320px;
  height: 320px;
  filter: blur(48px);
  opacity: .55;
  pointer-events: none;
}

/*about and experties css part*/

/* keep fail-safe reveal */
    .reveal {
      opacity: 1;
      transform: none;
    }

    html.js .reveal {
      opacity: 0;
      transform: translateY(10px);
      transition: .6s ease;
    }

    html.js .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    /* page accents */
    .hero-mesh {
      position: absolute;
      inset: -1px;
      background:
        radial-gradient(900px 400px at 10% 10%, rgba(37, 99, 235, .18), transparent 55%),
        radial-gradient(700px 380px at 90% 15%, rgba(16, 185, 129, .14), transparent 55%),
        radial-gradient(700px 420px at 50% 95%, rgba(99, 102, 241, .12), transparent 55%);
      pointer-events: none;
    }

    .glass {
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(255, 255, 255, .55);
      backdrop-filter: blur(14px);
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      border: 1px solid rgba(148, 163, 184, .35);
      background: rgba(255, 255, 255, .72);
      padding: .4rem .7rem;
      border-radius: 999px;
      font-size: .75rem;
      color: rgb(15, 23, 42);
    }

    .stat {
      border: 1px solid rgba(226, 232, 240, .9);
      background: rgba(255, 255, 255, .85);
      border-radius: 1rem;
      padding: 1rem;
      box-shadow: 0 10px 30px rgba(2, 8, 23, .06);
    }

    .section-title {
      font-size: 1.7rem;
      line-height: 1.2;
      font-weight: 700;
      color: rgb(15, 23, 42);
    }

    @media(min-width:768px) {
      .section-title {
        font-size: 2.1rem;
      }
    }

    .kcard {
      border: 1px solid rgba(226, 232, 240, .9);
      background: #fff;
      border-radius: 1.25rem;
      padding: 1.15rem;
      box-shadow: 0 12px 38px rgba(2, 8, 23, .06);
    }

    .kcard:hover {
      box-shadow: 0 16px 46px rgba(2, 8, 23, .10);
      transform: translateY(-1px);
      transition: .2s ease;
    }

    .badge {
      font-size: .7rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 700;
      color: rgb(29, 78, 216);
    }