:root {

  --primary: #5B2CFF;
  --primary-dark: #3D1AB8;
  --primary-light: #8B6CFF;

  --accent: #00C853;

  --accent-soft:
    rgba(0, 200, 83, 0.12);

  --bg: #070A12;

  --bg-card: #0F1524;

  --bg-elevated: #161E32;

  --text: #F2F5FF;

  --text-muted: #8B95B5;

  --border:
    rgba(255, 255, 255, 0.07);

  --gradient:
    linear-gradient(
      135deg,
      #5B2CFF 0%,
      #00C853 100%
    );

  --hero-glow:
    radial-gradient(
      ellipse 80% 60% at 70% 40%,
      rgba(91, 44, 255, 0.25) 0%,
      transparent 60%
    );

  --radius: 16px;

  --shadow:
    0 25px 50px -12px
    rgba(0, 0, 0, 0.5);

  --font:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;

  --font-display:
    'Outfit',
    'Inter',
    system-ui,
    sans-serif;

}


/* RESET */

*,
*::before,
*::after {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  font-family: var(--font);

  background:
    var(--bg);

  color:
    var(--text);

  line-height: 1.6;

  overflow-x: hidden;

  -webkit-font-smoothing:
    antialiased;

}


img {

  max-width: 100%;

  display: block;

}


a {

  color: inherit;

  text-decoration: none;

}



/* =====================================================
   NAVIGATION
   ===================================================== */

.nav {

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;

  padding: 1rem 0;

  transition:
    background 0.3s,
    backdrop-filter 0.3s,
    box-shadow 0.3s;

}


.nav.scrolled {

  background:
    rgba(7, 10, 18, 0.85);

  backdrop-filter:
    blur(16px);

  box-shadow:
    0 4px 30px
    rgba(0, 0, 0, 0.3);

}


.nav-inner {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1.5rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.logo {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  font-family:
    var(--font-display);

  font-weight: 700;

  font-size: 1.35rem;

}


.logo-mark {

  width: 42px;
  height: 42px;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      /* #6B3CFF,
      #4A1FD9 */
    );

  display: grid;

  place-items: center;

  /* box-shadow:
    0 4px 16px
    rgba(91, 44, 255, 0.4); */

  flex-shrink: 0;

  overflow: hidden;

}


.logo-mark img {

  width: 100%;
  height: 100%;

  object-fit: cover;

}


.nav-links {

  display: flex;

  align-items: center;

  gap: 1.6rem;

  list-style: none;

}


.nav-links a {

  font-size: 0.92rem;

  font-weight: 500;

  color:
    var(--text-muted);

  transition:
    color 0.2s;

}


.nav-links a:hover {

  color:
    var(--text);

}


.nav-cta {

  background:
    var(--gradient);

  color:
    #fff !important;

  padding:
    0.55rem 1.25rem;

  border-radius:
    999px;

  font-weight:
    600 !important;

  box-shadow:
    0 4px 20px
    rgba(91, 44, 255, 0.35);

  transition:
    transform 0.2s,
    box-shadow 0.2s;

}


.nav-cta:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 6px 24px
    rgba(91, 44, 255, 0.5);

}


.menu-toggle {

  display: none;

  background: none;

  border: none;

  color:
    var(--text);

  cursor: pointer;

  padding:
    0.5rem;

}



/* =====================================================
   HERO
   ===================================================== */

.hero {

  min-height: 100vh;

  padding:
    8rem 1.5rem 4rem;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

}


.hero::before {

  content: '';

  position: absolute;

  inset: 0;

  background:
    var(--hero-glow);

  pointer-events: none;

}


.hero-grid {

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1.1fr 0.9fr;

  gap: 3rem;

  align-items: center;

  position: relative;

  z-index: 1;

}


.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font-size: 0.8rem;

  font-weight: 600;

  padding:
    0.4rem 0.9rem;

  border-radius:
    999px;

  margin-bottom:
    1.25rem;

  border:
    1px solid
    rgba(0, 200, 83, 0.25);

}


.hero-badge span {

  width: 6px;
  height: 6px;

  background:
    var(--accent);

  border-radius:
    50%;

  animation:
    pulse 1.5s infinite;

}


@keyframes pulse {

  0%,
  100% {

    opacity: 1;
    transform: scale(1);

  }

  50% {

    opacity: 0.5;
    transform: scale(1.3);

  }

}


.hero h1 {

  font-family:
    var(--font-display);

  font-size:
    clamp(2.4rem, 5vw, 3.6rem);

  font-weight: 800;

  line-height: 1.15;

  letter-spacing:
    -0.03em;

  margin-bottom:
    1.25rem;

}


.hero h1 .gradient {

  background:
    var(--gradient);

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  background-clip:
    text;

}


.hero-desc {

  font-size:
    1.15rem;

  color:
    var(--text-muted);

  max-width:
    480px;

  margin-bottom:
    2rem;

}


.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin-bottom:
    2.5rem;

}


.btn {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding:
    0.9rem 1.75rem;

  border-radius:
    12px;

  font-weight:
    600;

  font-size:
    1rem;

  border: none;

  cursor: pointer;

  transition:
    transform 0.2s,
    box-shadow 0.2s;

}


.btn-primary {

  background:
    var(--gradient);

  color: #fff;

  box-shadow:
    0 8px 28px
    rgba(91, 44, 255, 0.4);

}


.btn-primary:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 36px
    rgba(91, 44, 255, 0.55);

}


.btn-secondary {

  background:
    var(--bg-elevated);

  color:
    var(--text);

  border:
    1px solid
    var(--border);

}


.btn-secondary:hover {

  background:
    #1E2840;

  transform:
    translateY(-2px);

}


.hero-stats {

  display: flex;

  gap: 2.5rem;

}


.stat {

  display: flex;

  flex-direction: column;

}


.stat-num {

  font-family:
    var(--font-display);

  font-size:
    1.6rem;

  font-weight: 700;

}


.stat-label {

  font-size:
    0.85rem;

  color:
    var(--text-muted);

}



/* =====================================================
   PHONE
   ===================================================== */

.phone-wrap {

  position: relative;

  display: flex;

  justify-content: center;

  perspective:
    1200px;

}


.phone {

  width: 280px;

  height: 580px;

  background: #111;

  border-radius:
    42px;

  padding: 12px;

  box-shadow:

    0 0 0 3px #2a2a2a,

    0 0 0 6px #1a1a1a,

    0 40px 80px -20px
    rgba(0, 0, 0, 0.7),

    0 0 60px
    rgba(91, 44, 255, 0.25);

  transform:
    rotateY(-12deg)
    rotateX(6deg);

  transition:
    transform 0.5s ease;

  position: relative;

  overflow: hidden;

}


.phone:hover {

  transform:
    rotateY(-6deg)
    rotateX(3deg)
    scale(1.02);

}


.phone-notch {

  position: absolute;

  top: 18px;

  left: 50%;

  transform:
    translateX(-50%);

  width: 100px;

  height: 28px;

  /* background: #111; */
  background: transparent;
  border-radius:
    20px;

  z-index: 5;

}


.phone-screen {

  width: 100%;

  height: 100%;

  border-radius:
    32px;

  overflow: hidden;

  background:
    #0B0F1A;

}


.phone-screen img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top;

}


.phone-glow {

  position: absolute;

  width: 300px;
  height: 300px;

  background:
    radial-gradient(
      circle,
      rgba(91, 44, 255, 0.35) 0%,
      transparent 70%
    );

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  z-index: -1;

  filter: blur(40px);

  pointer-events: none;

}



/* =====================================================
   FLOATING ORBS
   ===================================================== */

.orb {

  position: absolute;

  border-radius:
    50%;

  filter:
    blur(60px);

  opacity:
    0.4;

  pointer-events:
    none;

}


.orb-1 {

  width: 200px;
  height: 200px;

  background:
    var(--primary);

  top: 10%;
  right: 5%;

  animation:
    float 8s ease-in-out infinite;

}


.orb-2 {

  width: 150px;
  height: 150px;

  background:
    var(--accent);

  bottom: 15%;
  left: 10%;

  animation:
    float 10s ease-in-out infinite reverse;

}


@keyframes float {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-25px);

  }

}



/* =====================================================
   SECTIONS
   ===================================================== */

.section {

  padding:
    6rem 1.5rem;

  max-width:
    1200px;

  margin:
    0 auto;

}


.section-header {

  text-align:
    center;

  margin-bottom:
    3.5rem;

}


.section-header h2 {

  font-family:
    var(--font-display);

  font-size:
    clamp(1.9rem, 4vw, 2.6rem);

  font-weight:
    700;

  letter-spacing:
    -0.02em;

  margin-bottom:
    0.75rem;

}


.section-header p {

  color:
    var(--text-muted);

  font-size:
    1.1rem;

  max-width:
    560px;

  margin:
    0 auto;

}



/* =====================================================
   FEATURES
   ===================================================== */

.features-grid {

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px, 1fr)
    );

  gap:
    1.5rem;

}


.feature-card {

  background:
    var(--bg-card);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  padding:
    1.75rem;

  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;

}


.feature-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(91, 44, 255, 0.35);

  box-shadow:
    0 12px 40px
    rgba(0, 0, 0, 0.3);

}


.feature-icon {

  width: 48px;
  height: 48px;

  border-radius:
    12px;

  background:
    linear-gradient(
      135deg,
      rgba(91, 44, 255, 0.2),
      rgba(0, 200, 83, 0.15)
    );

  display: grid;

  place-items:
    center;

  font-size:
    1.4rem;

  margin-bottom:
    1.1rem;

}


.feature-card h3 {

  font-size:
    1.15rem;

  font-weight:
    600;

  margin-bottom:
    0.5rem;

}


.feature-card p {

  color:
    var(--text-muted);

  font-size:
    0.95rem;

}



/* =====================================================
   HOW IT WORKS
   ===================================================== */

.steps {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    2rem;

  position:
    relative;

}


.steps::before {

  content: '';

  position: absolute;

  top: 40px;

  left: 10%;
  right: 10%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--primary),
      var(--accent),
      transparent
    );

  opacity:
    0.4;

  z-index:
    0;

}


.step {

  text-align:
    center;

  position:
    relative;

  z-index:
    1;

}


.step-num {

  width: 56px;
  height: 56px;

  border-radius:
    50%;

  background:
    var(--bg-elevated);

  border:
    2px solid
    var(--primary);

  display: grid;

  place-items:
    center;

  font-family:
    var(--font-display);

  font-weight:
    700;

  font-size:
    1.25rem;

  margin:
    0 auto 1.25rem;

  color:
    var(--primary-light);

}


.step h3 {

  font-size:
    1.15rem;

  margin-bottom:
    0.5rem;

}


.step p {

  color:
    var(--text-muted);

  font-size:
    0.95rem;

}



/* =====================================================
   VAJRA NETWORK
   ===================================================== */

.network-section {

  position:
    relative;

}


/* KICKER */

.network-kicker {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    7px 13px;

  margin-bottom:
    14px;

  border-radius:
    999px;

  background:
    rgba(0, 200, 83, 0.08);

  border:
    1px solid
    rgba(0, 200, 83, 0.25);

  color:
    var(--accent);

  font-size:
    0.78rem;

  font-weight:
    700;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

}


.live-dot {

  width: 7px;
  height: 7px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 0 5px
    rgba(0, 200, 83, 0.08);

  animation:
    vajraPulse 1.6s infinite;

}


@keyframes vajraPulse {

  0%,
  100% {

    opacity:
      1;

    transform:
      scale(1);

  }

  50% {

    opacity:
      0.45;

    transform:
      scale(1.35);

  }

}



/* CARDS */

.network-stats {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    20px;

}


.network-card {

  position:
    relative;

  overflow:
    hidden;

  padding:
    32px;

  min-height:
    235px;

  border-radius:
    22px;

  background:

    radial-gradient(
      circle at 90% 10%,
      rgba(91, 44, 255, 0.13),
      transparent 42%
    ),

    var(--bg-card);

  border:
    1px solid
    var(--border);

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.18);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;

}


.network-card::after {

  content: "";

  position:
    absolute;

  width: 160px;
  height: 160px;

  right:
    -80px;

  bottom:
    -80px;

  border-radius:
    50%;

  background:
    rgba(0, 200, 83, 0.08);

  filter:
    blur(4px);

}


.network-card:hover {

  transform:
    translateY(-7px);

  border-color:
    rgba(91, 44, 255, 0.4);

  box-shadow:
    0 25px 60px
    rgba(0, 0, 0, 0.3);

}


.network-card.featured {

  background:

    linear-gradient(
      145deg,
      rgba(91, 44, 255, 0.16),
      rgba(0, 200, 83, 0.07)
    ),

    var(--bg-card);

  border-color:
    rgba(91, 44, 255, 0.3);

}



/* ICON */

.network-icon {

  width: 46px;
  height: 46px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    22px;

  border-radius:
    13px;

  background:
    var(--bg-elevated);

  border:
    1px solid
    var(--border);

  color:
    var(--primary-light);

  font-size:
    21px;

  font-weight:
    700;

}



/* NUMBER */

.network-number {

  position:
    relative;

  z-index:
    2;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      2.7rem,
      5vw,
      4rem
    );

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -0.045em;

  margin-bottom:
    10px;

  background:
    var(--gradient);

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  background-clip:
    text;

}



/* TITLE */

.network-card h3 {

  position:
    relative;

  z-index:
    2;

  margin:
    0 0 5px;

  font-size:
    1.08rem;

  font-weight:
    700;

}


/* DESCRIPTION */

.network-card p {

  position:
    relative;

  z-index:
    2;

  margin:
    0;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

}



/* NETWORK STRIP */

.network-strip {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    10px;

  margin-top:
    20px;

  padding:
    14px;

  border-radius:
    16px;

  background:
    rgba(15, 21, 36, 0.72);

  border:
    1px solid
    var(--border);

}


.network-item {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  font-weight:
    600;

  text-align:
    center;

}


.network-item span {

  color:
    var(--accent);

  font-size:
    16px;

  font-weight:
    800;

}


.network-note {

  margin-top:
    12px;

  text-align:
    center;

  color:
    #626c86;

  font-size:
    0.7rem;

}



/* =====================================================
   ABOUT
   ===================================================== */

.about-grid {

  display:
    grid;

  grid-template-columns:
    1.2fr 0.8fr;

  gap:
    3rem;

  align-items:
    center;

}


.about-content h2 {

  font-family:
    var(--font-display);

  font-size:
    2.1rem;

  font-weight:
    700;

  margin-bottom:
    1rem;

  letter-spacing:
    -0.02em;

}


.about-content p {

  color:
    var(--text-muted);

  margin-bottom:
    1.25rem;

}


.about-list {

  list-style:
    none;

  display:
    flex;

  flex-direction:
    column;

  gap:
    0.75rem;

}


.about-list li {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    0.75rem;

  color:
    var(--text-muted);

}


.about-list li::before {

  content:
    '✓';

  color:
    var(--accent);

  font-weight:
    700;

  flex-shrink:
    0;

}


.about-visual {

  background:
    var(--bg-card);

  border:
    1px solid
    var(--border);

  border-radius:
    24px;

  padding:
    2.5rem;

  text-align:
    center;

}


.big-num {

  font-family:
    var(--font-display);

  font-size:
    4rem;

  font-weight:
    800;

  background:
    var(--gradient);

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  background-clip:
    text;

  line-height:
    1;

  margin-bottom:
    0.75rem;

}


.about-visual p {

  color:
    var(--text-muted);

  font-size:
    0.95rem;

}



/* =====================================================
   CONTACT
   ===================================================== */

.contact-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    2.5rem;

}


.contact-info h3,
.contact-form h3 {

  font-size:
    1.3rem;

  margin-bottom:
    1.5rem;

}


.contact-item {

  display:
    flex;

  gap:
    1rem;

  margin-bottom:
    1.5rem;

}


.contact-item .icon {

  width: 44px;
  height: 44px;

  border-radius:
    12px;

  background:
    var(--bg-elevated);

  display:
    grid;

  place-items:
    center;

  font-size:
    1.2rem;

  flex-shrink:
    0;

}


.contact-item strong {

  display:
    block;

  font-size:
    0.9rem;

  margin-bottom:
    0.2rem;

}


.contact-item span,
.contact-item a {

  color:
    var(--text-muted);

  font-size:
    0.95rem;

}


.contact-item a:hover {

  color:
    var(--primary-light);

}



/* SOCIAL */

.socials {

  display:
    flex;

  gap:
    0.75rem;

  margin-top:
    1.5rem;

}


.social-btn {

  width: 44px;
  height: 44px;

  border-radius:
    12px;

  background:
    var(--bg-elevated);

  border:
    1px solid
    var(--border);

  display:
    grid;

  place-items:
    center;

  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;

}


.social-btn:hover {

  background:
    var(--primary);

  border-color:
    var(--primary);

  transform:
    translateY(-2px);

}


.social-btn svg {

  width: 20px;
  height: 20px;

  fill:
    currentColor;

}



/* CONTACT FORM */

.contact-form {

  background:
    var(--bg-card);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  padding:
    2rem;

}


.form-group {

  margin-bottom:
    1.15rem;

}


.form-group label {

  display:
    block;

  font-size:
    0.85rem;

  font-weight:
    500;

  margin-bottom:
    0.4rem;

  color:
    var(--text-muted);

}


.form-group input,
.form-group textarea {

  width:
    100%;

  padding:
    0.8rem 1rem;

  background:
    var(--bg);

  border:
    1px solid
    var(--border);

  border-radius:
    10px;

  color:
    var(--text);

  font-family:
    inherit;

  font-size:
    0.95rem;

  transition:
    border-color 0.2s;

}


.form-group input:focus,
.form-group textarea:focus {

  outline:
    none;

  border-color:
    var(--primary);

}


.form-group textarea {

  min-height:
    110px;

  resize:
    vertical;

}


.form-submit {

  width:
    100%;

  padding:
    0.95rem;

  background:
    var(--gradient);

  color:
    #fff;

  border:
    none;

  border-radius:
    12px;

  font-weight:
    600;

  font-size:
    1rem;

  cursor:
    pointer;

  transition:
    transform 0.2s,
    box-shadow 0.2s;

}


.form-submit:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 8px 28px
    rgba(91, 44, 255, 0.4);

}



/* =====================================================
   FOOTER
   ===================================================== */

footer {

  border-top:
    1px solid
    var(--border);

  padding:
    2.5rem 1.5rem;

}


.footer-inner {

  max-width:
    1200px;

  margin:
    0 auto;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    1.5rem;

}


.footer-brand {

  display:
    flex;

  align-items:
    center;

}


.footer-brand .logo-mark {

  width: 32px;
  height: 32px;

  border-radius:
    8px;

}


.footer-links {

  display:
    flex;

  gap:
    1.25rem;

  flex-wrap:
    wrap;

}


.footer-links a {

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  transition:
    color 0.2s;

}


.footer-links a:hover {

  color:
    var(--text);

}


.footer-copy {

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  width:
    100%;

  text-align:
    center;

  margin-top:
    0.5rem;

}



/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 960px) {


  .hero-grid {

    grid-template-columns:
      1fr;

    text-align:
      center;

  }


  .hero-desc {

    margin-left:
      auto;

    margin-right:
      auto;

  }


  .hero-actions {

    justify-content:
      center;

  }


  .hero-stats {

    justify-content:
      center;

  }


  .phone {

    transform:
      rotateY(0)
      rotateX(0);

    width:
      240px;

    height:
      500px;

  }


  .phone:hover {

    transform:
      scale(1.03);

  }


  .steps {

    grid-template-columns:
      1fr;

    gap:
      2.5rem;

  }


  .steps::before {

    display:
      none;

  }


  .network-stats {

    grid-template-columns:
      1fr;

  }


  .network-strip {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .about-grid,
  .contact-grid {

    grid-template-columns:
      1fr;

  }

}



@media (max-width: 720px) {


  .nav-links {

    display:
      none;

    position:
      absolute;

    top:
      100%;

    left:
      0;

    right:
      0;

    background:
      rgba(7, 10, 18, 0.97);

    backdrop-filter:
      blur(16px);

    flex-direction:
      column;

    padding:
      1.5rem;

    gap:
      1rem;

    border-bottom:
      1px solid
      var(--border);

  }


  .nav-links.open {

    display:
      flex;

  }


  .menu-toggle {

    display:
      block;

  }


  .hero {

    padding-top:
      6.5rem;

  }


  .hero-stats {

    flex-direction:
      column;

    gap:
      1.25rem;

  }


  .network-strip {

    grid-template-columns:
      1fr;

  }


  .network-item {

    justify-content:
      flex-start;

    padding:
      6px 8px;

  }


  .network-number {

    font-size:
      3rem;

  }


  .footer-inner {

    flex-direction:
      column;

    text-align:
      center;

  }


  .footer-links {

    justify-content:
      center;

  }

}