:root{
    --navy-950:#060e1f;
    --navy-900:#0b1a33;
    --navy-850:#0f2140;
    --navy-800:#132a4d;
    --navy-700:#1a3560;
    --blue-500:#2e9eff;
    --blue-400:#63b7ff;
    --blue-glow:rgba(46,158,255,0.45);
    --yellow-400:#ffd500;
    --yellow-500:#f0c400;
    --white:#ffffff;
    --slate-300:#b9c6de;
    --slate-400:#8fa0c2;
    --green-signal:#3ce68a;
    --radius-lg:18px;
    --radius-md:12px;
    --radius-sm:8px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    font-family:'Inter',sans-serif;
    background:var(--navy-950);
    color:var(--white);
    -webkit-font-smoothing:antialiased;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(1100px 600px at 82% -10%, rgba(46,158,255,0.16), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(255,213,0,0.07), transparent 55%),
      linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-850) 100%);
    padding:0 0 64px 0;
  }

  /* subtle circuit-grid texture across whole hero */
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(99,183,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,183,255,0.05) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.15) 75%, transparent 100%);
    pointer-events:none;
  }

  .topbar{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 32px 0 32px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:19px;
    letter-spacing:0.2px;
  }
  .brand-mark{
    width:34px;height:34px;
    border-radius:9px;
    background:linear-gradient(135deg, var(--blue-500), #1c6fd1);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 1px rgba(99,183,255,0.35), 0 6px 18px rgba(46,158,255,0.35);
  }
  .brand-mark svg{width:18px;height:18px;}

  .topbar-phone{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--slate-300);
    font-weight:600;
  }
  .topbar-phone svg{width:16px;height:16px;flex-shrink:0;color:var(--yellow-400);}
  .topbar-phone span{color:var(--white);}

  .hero-inner{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
    padding:56px 32px 0 32px;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 14px 7px 10px;
    border-radius:999px;
    background:rgba(46,158,255,0.1);
    border:1px solid rgba(99,183,255,0.35);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--blue-400);
    opacity:0;
    animation:riseIn 0.7s 0.05s cubic-bezier(.16,.84,.44,1) forwards;
  }
  .eyebrow .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--green-signal);
    box-shadow:0 0 0 3px rgba(60,230,138,0.18);
    animation:pulseDot 1.8s ease-in-out infinite;
  }

  h1{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(32px, 4.1vw, 52px);
    line-height:1.08;
    letter-spacing:-0.01em;
    margin:20px 0 20px 0;
    opacity:0;
    animation:riseIn 0.7s 0.15s cubic-bezier(.16,.84,.44,1) forwards;
  }
  h1 .accent{
    background:linear-gradient(90deg, var(--blue-400), var(--yellow-400));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .hero-lede{
    font-size:16.5px;
    line-height:1.65;
    color:var(--slate-300);
    max-width:520px;
    margin-bottom:30px;
    opacity:0;
    animation:riseIn 0.7s 0.25s cubic-bezier(.16,.84,.44,1) forwards;
  }
  .hero-lede strong{color:var(--white); font-weight:600;}

  .cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:36px;
    opacity:0;
    animation:riseIn 0.7s 0.35s cubic-bezier(.16,.84,.44,1) forwards;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:16px 28px;
    border-radius:999px;
    font-weight:700;
    font-size:15.5px;
    border:none;
    cursor:pointer;
    transition:transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease, background 0.22s ease;
    min-height:54px;
  }
  .btn svg{width:18px;height:18px;}

  .btn-primary{
    background:linear-gradient(180deg, var(--yellow-400), var(--yellow-500));
    color:var(--navy-950);
    box-shadow:0 10px 26px rgba(255,213,0,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .btn-primary:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 14px 32px rgba(255,213,0,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .btn-primary:active{transform:translateY(-1px) scale(0.99);}

  .btn-secondary{
    background:rgba(255,255,255,0.04);
    color:var(--white);
    border:1.5px solid rgba(255,255,255,0.22);
    backdrop-filter:blur(6px);
  }
  .btn-secondary:hover{
    background:rgba(46,158,255,0.12);
    border-color:var(--blue-400);
    transform:translateY(-3px) scale(1.02);
  }
  .btn-secondary svg{color:var(--yellow-400);}

  .hero-microtrust{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    font-size:13px;
    color:var(--slate-400);
    opacity:0;
    animation:riseIn 0.7s 0.45s cubic-bezier(.16,.84,.44,1) forwards;
  }
  .hero-microtrust li{list-style:none; display:flex; align-items:center; gap:7px;}
  .hero-microtrust svg{width:14px;height:14px;color:var(--green-signal);flex-shrink:0;}

  @keyframes riseIn{
    from{opacity:0; transform:translateY(14px);}
    to{opacity:1; transform:translateY(0);}
  }
  @keyframes pulseDot{
    0%,100%{box-shadow:0 0 0 3px rgba(60,230,138,0.18);}
    50%{box-shadow:0 0 0 6px rgba(60,230,138,0.06);}
  }

  /* ============ RIGHT VISUAL: breaker panel ============ */
  .visual-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    animation:riseIn 0.9s 0.3s cubic-bezier(.16,.84,.44,1) forwards;
  }

  .panel{
    position:relative;
    width:100%;
    max-width:420px;
    background:linear-gradient(155deg, var(--navy-800), var(--navy-900));
    border:1px solid rgba(99,183,255,0.22);
    border-radius:22px;
    padding:26px 26px 22px 26px;
    box-shadow:
      0 30px 60px -20px rgba(0,0,0,0.6),
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 0 60px -10px var(--blue-glow);
  }

  .panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
  }
  .panel-title{
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.06em;
    color:var(--slate-400);
    text-transform:uppercase;
  }
  .panel-status{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--green-signal);
  }
  .panel-status .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--green-signal);
    animation:pulseDot 1.8s ease-in-out infinite;
  }

  /* current flow bar */
  .flow-track{
    position:relative;
    height:46px;
    border-radius:10px;
    background:rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.06);
    overflow:hidden;
    margin-bottom:20px;
  }
  .flow-track svg{position:absolute; inset:0; width:100%; height:100%;}
  .flow-line{
    fill:none;
    stroke:var(--blue-500);
    stroke-width:2;
    stroke-linecap:round;
    opacity:0.35;
  }
  .flow-pulse{
    fill:none;
    stroke:var(--blue-400);
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-dasharray:18 220;
    stroke-dashoffset:0;
    filter:drop-shadow(0 0 4px var(--blue-400));
    animation:flowMove 2.6s linear infinite;
  }
  @keyframes flowMove{
    to{stroke-dashoffset:-238;}
  }

  .breaker-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin-bottom:20px;
  }
  .breaker{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;
    padding:10px 6px 12px 6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .switch{
    width:20px;
    height:30px;
    border-radius:5px;
    background:linear-gradient(180deg, #24406f, #16294a);
    border:1px solid rgba(99,183,255,0.3);
    position:relative;
  }
  .switch::after{
    content:"";
    position:absolute;
    left:3px; right:3px;
    height:13px;
    border-radius:3px;
    background:linear-gradient(180deg, var(--blue-400), var(--blue-500));
    box-shadow:0 0 8px var(--blue-glow);
    animation:toggle 5s ease-in-out infinite;
  }
  .breaker:nth-child(2) .switch::after{animation-delay:0.6s;}
  .breaker:nth-child(3) .switch::after{animation-delay:1.2s;}
  .breaker:nth-child(4) .switch::after{animation-delay:1.8s;}
  @keyframes toggle{
    0%,38%,100%{top:3px;}
    45%,88%{top:14px;}
  }
  .breaker-label{
    font-family:'JetBrains Mono', monospace;
    font-size:9.5px;
    color:var(--slate-400);
    letter-spacing:0.04em;
  }

  .panel-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .voltage-readout{
    font-family:'JetBrains Mono', monospace;
  }
  .voltage-readout .val{
    font-size:22px;
    font-weight:600;
    color:var(--white);
  }
  .voltage-readout .unit{
    font-size:11px;
    color:var(--slate-400);
  }
  .voltage-readout .lbl{
    font-size:10px;
    color:var(--slate-400);
    letter-spacing:0.05em;
    text-transform:uppercase;
    margin-top:2px;
  }

  .cert-badge{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,213,0,0.1);
    border:1px solid rgba(255,213,0,0.35);
    font-size:10.5px;
    font-weight:700;
    color:var(--yellow-400);
    letter-spacing:0.03em;
  }
  .cert-badge svg{width:12px;height:12px;}

  /* floating spark accents around panel */
  .spark{
    position:absolute;
    border-radius:50%;
    background:var(--blue-400);
    filter:blur(1px);
    opacity:0.7;
    animation:floatSpark 4.5s ease-in-out infinite;
  }
  .spark.s1{width:6px;height:6px; top:8%; left:6%; animation-delay:0s;}
  .spark.s2{width:4px;height:4px; top:70%; left:2%; background:var(--yellow-400); animation-delay:1.2s;}
  .spark.s3{width:5px;height:5px; top:18%; right:4%; animation-delay:0.6s;}
  .spark.s4{width:4px;height:4px; bottom:10%; right:10%; background:var(--yellow-400); animation-delay:2s;}
  @keyframes floatSpark{
    0%,100%{transform:translateY(0); opacity:0.5;}
    50%{transform:translateY(-10px); opacity:1;}
  }

  /* ============ TRUST BADGES ============ */
  .trust-section{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    padding:0 32px;
  }
  .trust-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:32px;
  }
  .trust-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.07);
    transition:transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  }
  .trust-card:hover{
    transform:translateY(-4px);
    border-color:rgba(99,183,255,0.4);
    background:rgba(46,158,255,0.06);
  }
  .trust-icon{
    width:38px;height:38px;
    flex-shrink:0;
    border-radius:10px;
    background:linear-gradient(135deg, rgba(46,158,255,0.18), rgba(46,158,255,0.05));
    border:1px solid rgba(99,183,255,0.3);
    display:flex;align-items:center;justify-content:center;
  }
  .trust-icon svg{width:19px;height:19px;color:var(--blue-400);}
  .trust-text h3{
    font-size:14px;
    font-weight:700;
    margin-bottom:3px;
    color:var(--white);
  }
  .trust-text p{
    font-size:12.5px;
    color:var(--slate-400);
    line-height:1.4;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:1024px){
    .hero-inner{grid-template-columns:1fr; gap:44px; padding-top:36px;}
    .visual-wrap{order:-1;}
    .panel{max-width:460px; margin:0 auto;}
    .hero-lede{max-width:none;}
    .trust-grid{grid-template-columns:repeat(2, 1fr);}
  }

  @media (max-width:640px){
    .topbar{padding:18px 18px 0 18px;}
    .topbar-phone span{display:none;}
    .hero-inner{padding:28px 18px 0 18px;}
    h1{font-size:clamp(28px, 8vw, 36px);}
    .cta-row{flex-direction:column;}
    .btn{width:100%;}
    .hero-microtrust{gap:12px 16px;}
    .trust-section{padding:0 18px;}
    .trust-grid{grid-template-columns:1fr; gap:12px; padding-top:26px;}
    .breaker-grid{grid-template-columns:repeat(4, 1fr); gap:6px;}
    .panel{padding:20px 18px 18px 18px;}
  }