:root{
    --navy-900:#080B24;
    --navy-800:#0E1240;
    --navy-700:#171B54;
    --purple-600:#5B3DF0;
    --blue-500:#2F6BFF;
    --coral:#FF4B2E;
    --coral-dark:#E23A1E;
    --teal:#0FAE82;
    --teal-dim:#E4F7F1;
    --ink:#0E1030;
    --muted:#5B6178;
    --line:#EEE3E8;
    --surface:#FDF3F0;
    --surface-2:#F4F1FF;
    --surface-blue:#EFF4FF;
    --surface-teal:#EBFBF6;
    --surface-coral:#FFF1EC;
    --white:#FFFFFF;
  }
  html{ scroll-behavior:smooth; }
  body{
    color:var(--ink);
    font-family:'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    background-color:#FFFFFF;
    background-image:
      radial-gradient(ellipse 60% 50% at 8% 8%, rgba(255,75,46,0.10), transparent 60%),
      radial-gradient(ellipse 55% 45% at 95% 18%, rgba(91,61,240,0.09), transparent 60%),
      radial-gradient(ellipse 55% 50% at 12% 62%, rgba(47,107,255,0.08), transparent 60%),
      radial-gradient(ellipse 60% 50% at 92% 82%, rgba(15,174,130,0.08), transparent 60%),
      radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255,75,46,0.06), transparent 60%);
    background-attachment:fixed;
    background-repeat:no-repeat;
  }
  h1,h2,h3,.display-font{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em; color:var(--navy-900); }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; }
  :focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }
  section{ padding:70px 0; }
  section[id]{ scroll-margin-top:88px; }

  /* ---------------- ANIMATION UTILITIES ---------------- */
  .reveal{
    opacity:0; transform:translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .reveal-delay-1.in-view{ transition-delay:0.08s; }
  .reveal-delay-2.in-view{ transition-delay:0.16s; }
  .reveal-delay-3.in-view{ transition-delay:0.24s; }
  .reveal-delay-4.in-view{ transition-delay:0.32s; }
  .reveal-delay-5.in-view{ transition-delay:0.40s; }
  .reveal-delay-6.in-view{ transition-delay:0.48s; }

  @keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
  @keyframes spinSlow{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
  @keyframes pulseDot{
    0%,100%{ box-shadow:0 0 0 3px rgba(15,174,130,0.18); }
    50%{ box-shadow:0 0 0 7px rgba(15,174,130,0); }
  }
  @keyframes fadeInBlip{ 0%,100%{ opacity:0.4; } 50%{ opacity:1; } }
  .eyebrow .dot{ animation: pulseDot 2.2s ease-in-out infinite; }


 /* ==========================================================
     RESPONSIVE — MEDIA QUERIES FOR ALL SCREEN SIZES
     Breakpoints follow Bootstrap 5: xl 1200 / lg 992 / md 768 / sm 576
     ========================================================== */

  /* ---- Large desktop / wide monitors (1400px+) ---- */
  @media (min-width:1400px){
    .hero h1{ max-width:18ch; }
    .hero p.lede{ max-width:50ch; }
    section{ padding:112px 0; }
    .hero{ padding-top:160px; padding-bottom:92px; }
  }

  /* ---- Small laptops / large tablets (max 1199.98px) ---- */
  @media (max-width:1199.98px){
    .hero h1{ font-size:clamp(30px,4.6vw,44px); }
    .cloud-card{ padding:24px; }
  }

  /* ---- Tablets / small laptops (max 991.98px) ---- */
  @media (max-width:991.98px){
    section{ padding:72px 0; }
    .hero{ padding-top:130px; padding-bottom:56px; }
    .hero h1{ max-width:100%; }
    .hero p.lede{ max-width:100%; }
    .hero-stats{ gap:22px; }
    .cloud-card{ padding:22px; margin-top:8px; }
    .section-head{ margin-bottom:40px; }
    .stats-band .row{ padding:36px 0 !important; }
    .layer-desc{ font-size:12px; }
  }

  /* ---- Tablets in portrait / large phones (max 767.98px) ---- */
  @media (max-width:767.98px){
    section{ padding:56px 0; }
    section[id]{ scroll-margin-top:78px; }

    .navbar-collapse{
      background:var(--navy-800); border:1px solid rgba(255,255,255,0.1); border-radius:8px;
      padding:16px; margin-top:10px;
    }
    .navbar-nav{ margin-bottom:14px; }
    .navbar-nav .nav-link{ padding:10px 8px !important; }
    .navbar-nav .nav-link::after{ display:none; }
    .navbar-collapse .btn-coral{ width:100%; justify-content:center; }

    .hero{ padding-top:112px; padding-bottom:48px; }
    .hero h1{ font-size:clamp(28px,7vw,38px); line-height:1.15; }
    .hero p.lede{ font-size:15.5px; }
    .hero-actions .btn{ flex:1 1 auto; text-align:center; justify-content:center; }
    .hero-stats{ gap:16px 24px; font-size:12.5px; }

    .section-head{ margin-bottom:32px; }
    .section-head h2{ font-size:clamp(24px,5.5vw,28px); }

    .step-card, .feature-card, .testi-card{ padding:24px 22px; }

    .vault .row{ text-align:left; }

    .cta-banner{ padding:38px 28px; text-align:center; }
    .cta-banner.d-flex .cta-inner, .cta-inner.d-flex{ flex-direction:column; }
    .cta-banner h2{ max-width:100%; }
    .cta-banner .btn-coral{ width:100%; justify-content:center; }

    .foot-bottom{ flex-direction:column; text-align:center; gap:10px; }
  }

  /* ---- Mobile phones (max 575.98px) ---- */
  @media (max-width:575.98px){
    .navbar .container, .hero .container{ padding-left:20px; padding-right:20px; }

    .hero h1{ font-size:clamp(26px,8vw,32px); }
    .hero p.lede{ font-size:15px; }
    .hero-stats{ flex-direction:column; gap:10px; }
    .hero-actions{ flex-direction:column; }
    .hero-actions .btn, .hero .btn-lg{ width:100%; justify-content:center; }

    .flow-step{ padding:12px 14px; gap:10px; }
    .flow-icon{ width:32px; height:32px; font-size:14px; border-radius:6px; }
    .flow-name{ font-size:14px; }
    .flow-desc{ font-size:11.5px; }

    .stat-num{ font-size:24px; }
    .stat-label{ font-size:12.5px; }

    .step-num{ font-size:12px; }
    .step-card h3{ font-size:17.5px; }

    .layer{ flex-direction:column; align-items:flex-start; gap:8px; }
    .layer-tag{ align-self:flex-start; }

    .testi-card p.quote{ font-size:15px; }

    .cta-banner h2{ font-size:22px; }
    .cta-banner p{ font-size:14px; }

    .foot-col{ margin-bottom:8px; }
  }

  /* ---- Very small phones (max 400px) ---- */
  @media (max-width:400px){
    .hero{ padding-top:104px; padding-bottom:40px; }
    .hero h1{ font-size:24px; }
    section{ padding:44px 0; }
    .cloud-card{ padding:18px; }
    .step-card, .feature-card, .testi-card{ padding:20px 18px; }
    .cta-banner{ padding:30px 20px; }
    .navbar-brand{ font-size:16px; }
  }

  /* ---- Landscape phones (short height) ---- */
  @media (max-height:480px) and (orientation:landscape){
    .hero{ padding-top:96px; padding-bottom:36px; }
    section{ padding:48px 0; }
  }