/* ---------------- HERO ---------------- */
  .hero{
    position:relative; padding-top:150px; padding-bottom:80px; color:#fff; overflow:hidden;
    background:var(--navy-900); isolation:isolate;
  }
  .hero::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 90%);
            mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 90%);
  }
  .hero::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:
      linear-gradient(180deg, rgba(8,11,36,0.55) 0%, rgba(8,11,36,0) 22%, rgba(8,11,36,0) 70%, rgba(8,11,36,0.9) 100%),
      linear-gradient(90deg, rgba(8,11,36,0.35) 0%, rgba(8,11,36,0) 20%, rgba(8,11,36,0) 80%, rgba(8,11,36,0.35) 100%);
  }
  .hero .container{ position:relative; z-index:3; }

  /* aurora light-ribbon background */
  .aurora{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
  .aurora span{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.85; will-change:transform; mix-blend-mode:screen; }
  .aurora .a1{ width:120%; height:130%; left:-40%; top:-60%; background:radial-gradient(ellipse at 30% 30%, #3350FF 0%, rgba(51,80,255,0) 60%); animation: auroraDrift1 22s ease-in-out infinite; }
  .aurora .a2{ width:90%; height:110%; left:-10%; top:-10%; background:radial-gradient(ellipse at 60% 50%, #7A4CF5 0%, rgba(122,76,245,0) 62%); animation: auroraDrift2 26s ease-in-out infinite; }
  .aurora .a3{ width:75%; height:95%; left:20%; top:20%; background:radial-gradient(ellipse at 50% 50%, #C24CE0 0%, rgba(194,76,224,0) 60%); animation: auroraDrift3 30s ease-in-out infinite; }
  .aurora .a4{ width:60%; height:70%; left:55%; top:-20%; background:radial-gradient(ellipse at 50% 50%, #4C8BFF 0%, rgba(76,139,255,0) 65%); animation: auroraDrift4 20s ease-in-out infinite; }
  .aurora .a5{ width:55%; height:65%; left:-15%; top:45%; background:radial-gradient(ellipse at 50% 50%, #E0578B 0%, rgba(224,87,139,0) 65%); opacity:0.55; animation: auroraDrift5 24s ease-in-out infinite; }
  @keyframes auroraDrift1{ 0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); } 50%{ transform:translate(4%,3%) rotate(6deg) scale(1.06); } }
  @keyframes auroraDrift2{ 0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); } 50%{ transform:translate(-5%,4%) rotate(-8deg) scale(1.08); } }
  @keyframes auroraDrift3{ 0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); } 50%{ transform:translate(-3%,-4%) rotate(5deg) scale(0.95); } }
  @keyframes auroraDrift4{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-4%,5%) scale(1.1); } }
  @keyframes auroraDrift5{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(5%,-3%) scale(1.12); } }

  .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--teal); display:flex; align-items:center; gap:8px; margin-bottom:18px; }
  .eyebrow.on-dark{ color:#7CF0CE; }
  .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
  .hero h1{ font-size:clamp(32px,4.4vw,52px); font-weight:600; line-height:1.1; max-width:16ch; color:#fff; }
  .hero p.lede{ margin-top:20px; font-size:17px; color:rgba(255,255,255,0.78); max-width:46ch; }
  .hero-stats{ margin-top:36px; display:flex; gap:30px; flex-wrap:wrap; font-family:'IBM Plex Mono', monospace; font-size:13px; color:rgba(255,255,255,0.7); }
  .hero-stats span{ display:flex; align-items:center; gap:8px; }
  .hero-stats i{ color:var(--teal); font-size:15px; }
  .hero-stats strong{ color:#fff; font-weight:500; }

  .cloud-card{
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:28px;
    backdrop-filter:blur(6px);
    transition: border-color 0.3s ease, transform 0.3s ease;
  }
  .cloud-card:hover{ border-color:rgba(255,255,255,0.3); transform:translateY(-4px); }
  .cloud-flow{ display:flex; flex-direction:column; gap:14px; }
  .flow-step{
    display:flex; align-items:center; gap:14px; background:rgba(8,11,36,0.55);
    border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:14px 16px;
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  }
  .flow-step:hover{ border-color:var(--coral); transform:translateX(4px); background:rgba(8,11,36,0.8); }
  .flow-icon{
    width:38px; height:38px; border-radius:7px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:16px; color:#fff; animation: floatY 3.4s ease-in-out infinite;
  }
  .flow-step:nth-child(1) .flow-icon{ animation-delay:0s; }
  .flow-step:nth-child(3) .flow-icon{ animation-delay:0.4s; }
  .flow-step:nth-child(5) .flow-icon{ animation-delay:0.8s; }
  .flow-icon.i-site{ background:linear-gradient(135deg,#FFB84D,#FF8A3D); }
  .flow-icon.i-encrypt{ background:linear-gradient(135deg, var(--coral), var(--coral-dark)); }
  .flow-icon.i-cloud{ background:linear-gradient(135deg, var(--teal), #0C8266); }
  .flow-name{ font-size:14.5px; font-weight:500; color:#fff; }
  .flow-desc{ font-size:12.5px; color:rgba(255,255,255,0.55); margin-top:2px; }
  .flow-arrow{ text-align:center; color:rgba(255,255,255,0.25); font-size:14px; transition: color 0.3s ease, transform 0.3s ease; }
  .cloud-card:hover .flow-arrow{ color:rgba(255,255,255,0.5); transform:translateY(2px); }

  /* ---------------- STATS BAND ---------------- */
  .stats-band{ background:var(--navy-800); border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); position:relative; z-index:1; }
  .stat-item{ transition: transform 0.25s ease; cursor:default; }
  .stat-item:hover{ transform:translateY(-4px); }
  .stat-num{
    font-family:'Space Grotesk', sans-serif; font-size:clamp(26px,3vw,34px); font-weight:600; color:var(--accent, var(--coral));
    display:flex; align-items:center; gap:10px; transition: color 0.25s ease;
  }
  .stat-num i{ font-size:0.7em; }
  .stat-label{ margin-top:6px; font-size:13.5px; color:rgba(255,255,255,0.55); }

  /* ---------------- SECTION HEAD ---------------- */
  .section-head{ max-width:56ch; margin-bottom:48px; }
  .section-head h2{ font-size:clamp(26px,3vw,32px); font-weight:600; }
  .section-head p{ margin-top:14px; color:var(--muted); font-size:16px; }

  /* ---------------- HOW IT WORKS ---------------- */
  .step-card{
    position:relative; overflow:hidden;
    background:#fff; border:1px solid var(--line); border-radius:8px; padding:30px 26px; height:100%;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .step-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent, var(--coral)); transform:scaleX(0); transform-origin:left; transition: transform 0.35s ease; }
  .step-card:hover::before{ transform:scaleX(1); }
  .step-card:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:0 16px 32px rgba(20,15,60,0.12); }
  .step-num{
    font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--accent, var(--coral));
    display:inline-block; transition: transform 0.3s ease;
  }
  .step-card:hover .step-num{ transform:scale(1.15); }
  .step-card h3{ margin-top:14px; font-size:19px; font-weight:600; }
  .step-card p{ margin-top:10px; color:var(--muted); font-size:14.5px; }

  /* ---------------- FEATURES ---------------- */
  .feature-card{
    position:relative; overflow:hidden;
    background:#fff; border:1px solid var(--line); border-top:3px solid transparent; border-radius:8px; padding:28px 24px; height:100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .feature-card.f-restore{ border-top-color:var(--coral); }
  .feature-card.f-safe{ border-top-color:var(--teal); }
  .feature-card.f-neutral{ border-top-color:var(--purple-600); }
  .feature-card .fc-icon{
    width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:19px; margin-bottom:14px; background:var(--surface-2); color:var(--purple-600); transition: transform 0.3s ease;
  }
  .feature-card.f-restore .fc-icon{ background:var(--surface-coral); color:var(--coral); }
  .feature-card.f-safe .fc-icon{ background:var(--teal-dim); color:var(--teal); }
  .feature-card:hover .fc-icon{ transform:scale(1.1) rotate(4deg); }
  .feature-card:hover{ transform:translateY(-6px); box-shadow:0 14px 28px rgba(20,15,60,0.1); }
  .feature-card h3{ font-size:16.5px; font-weight:600; margin-bottom:8px; }
  .feature-card p{ font-size:14px; color:var(--muted); margin-bottom:0; }

  /* ---------------- VAULT / STORAGE ---------------- */
  .vault{ background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .layer{
    position:relative; overflow:hidden;
    background:#fff; border:1px solid var(--line); border-radius:8px;
    padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  }
  .layer::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:4px; background:var(--accent, var(--teal)); }
  .layer:hover{ border-color:var(--accent, var(--teal)); transform:translateX(6px); }
  .layer + .layer{ margin-top:14px; }
  .layer-name{ font-size:14.5px; font-weight:500; }
  .layer-desc{ font-size:12.5px; color:var(--muted); margin-top:3px; }
  .layer-tag{
    font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--accent, var(--teal)); background:color-mix(in srgb, var(--accent, var(--teal)) 14%, white);
    padding:4px 8px; border-radius:3px; white-space:nowrap; transition: transform 0.25s ease;
  }
  .layer:hover .layer-tag{ transform:scale(1.06); }

  /* ---------------- TESTIMONIALS ---------------- */
  .testi-section{ background:var(--navy-900); color:#fff; position:relative; overflow:hidden; }
  .testi-section .aurora span{ opacity:0.5; }
  .testi-section .container{ position:relative; z-index:3; }
  .testi-section .section-head p{ color:rgba(255,255,255,0.6); }
  .testi-card{
    position:relative; overflow:hidden;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:8px; padding:26px; height:100%; display:flex; flex-direction:column;
    backdrop-filter:blur(6px);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .testi-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent, var(--coral)); }
  .testi-card:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,0.3); box-shadow:0 16px 32px rgba(0,0,0,0.3); }
  .testi-card i.bi-quote{ color:var(--accent, var(--coral)); font-size:22px; margin-bottom:10px; display:block; }
  .testi-card p.quote{ font-size:15.5px; flex:1; color:rgba(255,255,255,0.92); }
  .testi-who{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.14); font-size:13.5px; }
  .testi-who b{ display:block; font-weight:600; color:#fff; }
  .testi-who span{ color:rgba(255,255,255,0.55); font-size:12.5px; }

  /* ---------------- CTA ---------------- */
  .cta-banner{
    position:relative; overflow:hidden; background:var(--navy-900);
    border-radius:12px; padding:52px 44px; color:#fff;
  }
  .cta-banner .aurora span{ opacity:0.75; }
  .cta-banner .cta-inner{ position:relative; z-index:3; }
  .cta-banner h2{ font-size:clamp(24px,3vw,32px); font-weight:600; max-width:22ch; color:#fff; }
  .cta-banner p{ color:rgba(255,255,255,0.78); margin-top:10px; font-size:15px; }