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

    :root{
      --bg:#040b13;
      --bg2:#07111b;
      --bg3:#0b1624;
      --blue:#1A6DD4;
      --blue-dark:#1355A8;
      --blue-soft:#84BFFF;
      --ink:#EAF1F8;
      --ink2:#C9D5E3;
      --muted:#8FA3BA;
      --success:#27AE60;
    }

    html,body{
      width:100%;
      height:100%;
      background:
        radial-gradient(circle at 12% 18%, rgba(46,116,219,.14), transparent 23%),
        radial-gradient(circle at 82% 14%, rgba(31,101,214,.12), transparent 18%),
        radial-gradient(circle at 86% 72%, rgba(132,191,255,.10), transparent 22%),
        linear-gradient(115deg, var(--bg) 0%, var(--bg2) 48%, var(--bg3) 100%);
      font-family:'Lato',sans-serif;
      color:var(--ink);
      overflow:hidden;
    }

    body::before{
      content:'';
      position:fixed;
      inset:0;
      background:
        radial-gradient(circle at 76% 18%, rgba(33,125,255,.18), transparent 15%),
        radial-gradient(circle at 87% 62%, rgba(132,191,255,.08), transparent 18%),
        radial-gradient(circle at 58% 48%, rgba(38,94,172,.10), transparent 24%),
        linear-gradient(90deg, rgba(3,8,14,.18) 0%, rgba(3,8,14,0) 42%, rgba(3,8,14,.06) 100%);
      pointer-events:none;
      z-index:0;
    }

    body::after{
      content:'';
      position:fixed;
      inset:0;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='%230d74ff' stroke-width='1.5' stroke-opacity='.38'%3E%3Cpath d='M40 180L150 122L286 182L420 82L560 148L720 94L892 176L1038 92L1208 154L1388 86L1560 150'/%3E%3Cpath d='M85 392L202 330L352 410L492 300L654 372L806 270L972 344L1128 248L1318 334L1532 232'/%3E%3Cpath d='M98 724L236 634L388 710L550 610L706 692L872 578L1050 662L1228 554L1416 628L1564 536'/%3E%3Cpath d='M918 120L1008 186L1124 142L1228 214L1362 166L1476 228'/%3E%3Cpath d='M1046 448L1188 398L1322 472L1476 424L1586 492'/%3E%3Cpath d='M674 808L784 732L928 804L1084 716L1256 788'/%3E%3C/g%3E%3Cg fill='%2346a4ff' fill-opacity='.98'%3E%3Ccircle cx='40' cy='180' r='3.4'/%3E%3Ccircle cx='150' cy='122' r='3.1'/%3E%3Ccircle cx='286' cy='182' r='3.2'/%3E%3Ccircle cx='420' cy='82' r='3.6'/%3E%3Ccircle cx='560' cy='148' r='3.1'/%3E%3Ccircle cx='720' cy='94' r='3.4'/%3E%3Ccircle cx='892' cy='176' r='3.2'/%3E%3Ccircle cx='1038' cy='92' r='3.3'/%3E%3Ccircle cx='1208' cy='154' r='3.2'/%3E%3Ccircle cx='1388' cy='86' r='3.8'/%3E%3Ccircle cx='1560' cy='150' r='3.5'/%3E%3Ccircle cx='202' cy='330' r='3'/%3E%3Ccircle cx='352' cy='410' r='3.1'/%3E%3Ccircle cx='492' cy='300' r='3.4'/%3E%3Ccircle cx='654' cy='372' r='3.1'/%3E%3Ccircle cx='806' cy='270' r='3.3'/%3E%3Ccircle cx='972' cy='344' r='3'/%3E%3Ccircle cx='1128' cy='248' r='3.1'/%3E%3Ccircle cx='1318' cy='334' r='3.2'/%3E%3Ccircle cx='1532' cy='232' r='3.8'/%3E%3Ccircle cx='236' cy='634' r='3.2'/%3E%3Ccircle cx='388' cy='710' r='3'/%3E%3Ccircle cx='550' cy='610' r='3.3'/%3E%3Ccircle cx='706' cy='692' r='3'/%3E%3Ccircle cx='872' cy='578' r='3.3'/%3E%3Ccircle cx='1050' cy='662' r='3.1'/%3E%3Ccircle cx='1228' cy='554' r='3.4'/%3E%3Ccircle cx='1416' cy='628' r='3.2'/%3E%3Ccircle cx='1008' cy='186' r='3.1'/%3E%3Ccircle cx='1124' cy='142' r='3.1'/%3E%3Ccircle cx='1228' cy='214' r='3.3'/%3E%3Ccircle cx='1362' cy='166' r='3.2'/%3E%3Ccircle cx='1476' cy='228' r='3.3'/%3E%3C/g%3E%3Cg fill='%2384bfff' fill-opacity='.25'%3E%3Ccircle cx='420' cy='82' r='14'/%3E%3Ccircle cx='1388' cy='86' r='13'/%3E%3Ccircle cx='806' cy='270' r='12'/%3E%3Ccircle cx='1532' cy='232' r='12'/%3E%3Ccircle cx='1228' cy='554' r='12'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-size:cover;
      background-position:center;
      opacity:.95;
      mix-blend-mode:screen;
      pointer-events:none;
      z-index:0;
    }

    .page{
      position:relative;
      z-index:1;
      width:100%;
      height:100%;
      display:grid;
      grid-template-columns: 54% 46%;
      isolation:isolate;
    }

    .hero{
      position:relative;
      overflow:visible;
      display:flex;
      align-items:flex-end;
      justify-content:flex-start;
      padding:3rem 3rem 3.2rem;
      background:transparent;
      z-index:1;
    }

    .hero-motion-lines{
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      opacity:.34;
      mix-blend-mode:screen;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 900'%3E%3Cg fill='none' stroke='%230d74ff' stroke-width='1.35' stroke-opacity='.42'%3E%3Cpath d='M-40 126L82 64L206 132L342 44L478 118L630 58L798 132L1032 36'/%3E%3Cpath d='M-22 354L124 282L270 362L422 250L590 328L746 222L1018 334'/%3E%3Cpath d='M34 706L170 620L318 694L476 594L644 676L824 550L1040 642'/%3E%3Cpath d='M540 156L676 250L826 168L1008 246'/%3E%3Cpath d='M498 514L666 422L828 512L1016 408'/%3E%3C/g%3E%3Cg fill='%2346a4ff' fill-opacity='.95'%3E%3Ccircle cx='82' cy='64' r='3.2'/%3E%3Ccircle cx='206' cy='132' r='3'/%3E%3Ccircle cx='342' cy='44' r='3.4'/%3E%3Ccircle cx='478' cy='118' r='3'/%3E%3Ccircle cx='630' cy='58' r='3.2'/%3E%3Ccircle cx='798' cy='132' r='3.2'/%3E%3Ccircle cx='124' cy='282' r='3.1'/%3E%3Ccircle cx='270' cy='362' r='3'/%3E%3Ccircle cx='422' cy='250' r='3.2'/%3E%3Ccircle cx='590' cy='328' r='3.1'/%3E%3Ccircle cx='746' cy='222' r='3.2'/%3E%3Ccircle cx='170' cy='620' r='3.1'/%3E%3Ccircle cx='318' cy='694' r='3'/%3E%3Ccircle cx='476' cy='594' r='3.2'/%3E%3Ccircle cx='644' cy='676' r='3.1'/%3E%3Ccircle cx='824' cy='550' r='3.2'/%3E%3Ccircle cx='676' cy='250' r='3.1'/%3E%3Ccircle cx='826' cy='168' r='3.3'/%3E%3C/g%3E%3Cg fill='%2384bfff' fill-opacity='.22'%3E%3Ccircle cx='342' cy='44' r='12'/%3E%3Ccircle cx='824' cy='550' r='13'/%3E%3Ccircle cx='590' cy='328' r='11'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-size:112% 112%;
      background-position:center;
      filter:drop-shadow(0 0 8px rgba(39,132,255,.22));
      transform:translate3d(0,0,0);
      animation:heroLinesDrift 18s ease-in-out infinite alternate,
                heroLinesGlow 9s ease-in-out infinite;
      -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 42%, rgba(0,0,0,.45) 78%, rgba(0,0,0,0) 100%);
      mask-image:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 42%, rgba(0,0,0,.45) 78%, rgba(0,0,0,0) 100%);
    }

    .hero-image{
      position:absolute;
      top:-1%;
      bottom:-1%;
      left:-114px;
      right:0%;
      background-image: var(--arion-hero-image);
      background-size: cover;
      background-position: 20% center;
      transform:scale(1.06);
      filter: contrast(1.06) saturate(.92) brightness(.72);
      opacity:.98;
      -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 74%, rgba(0,0,0,.90) 82%, rgba(0,0,0,.48) 90%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 74%, rgba(0,0,0,.90) 82%, rgba(0,0,0,.48) 90%, rgba(0,0,0,0) 100%);
    }

    .hero::before{
      content:'';
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(3,8,14,.92) 0%, rgba(3,8,14,.55) 32%, rgba(3,8,14,.18) 54%, rgba(3,8,14,0) 78%, rgba(3,8,14,.06) 100%);
      z-index:1;
      pointer-events:none;
    }

    .hero::after{
      content:'';
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 60% 38%, rgba(125,187,255,.14), transparent 12%),
        radial-gradient(circle at 36% 48%, rgba(255,255,255,.035), transparent 19%),
        linear-gradient(to top, rgba(4,8,13,.66), transparent 42%);
      z-index:1;
      pointer-events:none;
    }

    .hero-content{
      position:relative;
      top:-94px;
      z-index:2;
      max-width:580px;
      animation:fadeUp .9s cubic-bezier(.16,1,.3,1);
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      padding:.55rem .9rem;
      border:1px solid rgba(132,191,255,.18);
      background:rgba(8,17,27,.28);
      backdrop-filter: blur(6px);
      border-radius:999px;
      margin-bottom:1.1rem;
      box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
    }

    .hero-badge .pulse{
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--blue-soft);
      box-shadow:0 0 10px rgba(125,187,255,.8);
      animation:pulse 2s ease infinite;
    }

    .hero-badge span{
      font-size:.72rem;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:#D8E6F5;
      font-family:'Share Tech Mono', monospace;
    }

    .hero-title{
      font-family:'Cinzel', serif;
      font-size: clamp(2rem, 4vw, 3.6rem);
      font-weight:800;
      line-height:1.05;
      letter-spacing:.03em;
      margin-bottom:.9rem;
      text-shadow:0 4px 18px rgba(0,0,0,.35);
    }

    .hero-title .accent{ color:var(--blue-soft); }

    .hero-lower{
      transform:translateY(56px); /* Baja 1.5 cm aprox. solo el bloque inferior */
    }

    .hero-text{
      font-size:1rem;
      line-height:1.7;
      color:var(--ink2);
      max-width:510px;
      margin-bottom:1.45rem;
    }

    .hero-points{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-bottom:1.6rem;
    }

    .hero-chip{
      padding:.62rem .88rem;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(9,15,23,.26);
      border-radius:999px;
      color:#D8E4F1;
      font-size:.8rem;
      letter-spacing:.04em;
      backdrop-filter: blur(5px);
    }

    .hero-quote{
      border-left:2px solid rgba(125,187,255,.55);
      padding-left:1rem;
      color:#B9C9DB;
      font-size:.92rem;
      line-height:1.65;
      max-width:500px;
      opacity:.95;
    }

    .panel-network{
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      overflow:hidden;
      opacity:.92;
      mix-blend-mode:screen;
      filter:drop-shadow(0 0 10px rgba(70,164,255,.26));
    }

    .panel-network line{
      stroke:#0d74ff;
      stroke-width:1.45;
      stroke-linecap:round;
      stroke-opacity:.62;
      stroke-dasharray:160 80;
      animation:panelSegmentEnergy 7.5s linear infinite;
    }

    .panel-network line:nth-of-type(2){ animation-duration:9.2s; animation-delay:-1.1s; stroke-opacity:.54; }
    .panel-network line:nth-of-type(3){ animation-duration:11s; animation-delay:-2.4s; stroke-opacity:.58; }
    .panel-network line:nth-of-type(4){ animation-duration:8.6s; animation-delay:-.9s; stroke-opacity:.50; }
    .panel-network line:nth-of-type(5){ animation-duration:12s; animation-delay:-3.2s; stroke-opacity:.57; }
    .panel-network line:nth-of-type(6){ animation-duration:9.8s; animation-delay:-1.8s; stroke-opacity:.52; }
    .panel-network line:nth-of-type(7){ animation-duration:10.7s; animation-delay:-4s; stroke-opacity:.55; }
    .panel-network line:nth-of-type(8){ animation-duration:13s; animation-delay:-2.9s; stroke-opacity:.48; }
    .panel-network line:nth-of-type(9){ animation-duration:8.8s; animation-delay:-1.6s; stroke-opacity:.56; }

    .panel-network circle{
      fill:#46a4ff;
      fill-opacity:.95;
      filter:drop-shadow(0 0 8px rgba(70,164,255,.72));
    }

    .panel-network .halo{
      fill:#84bfff;
      fill-opacity:.18;
      filter:drop-shadow(0 0 14px rgba(132,191,255,.48));
    }

    .panel-network .energy-dot{
      fill:#84bfff;
      fill-opacity:.95;
      filter:drop-shadow(0 0 10px rgba(132,191,255,.85));
    }

    .panel{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:2rem 2.2rem 2rem .6rem;
      position:relative;
      background:transparent;
      z-index:3;
    }

    .panel::before{
      content:'';
      position:absolute;
      inset:0;
      z-index:0;
      background:
        radial-gradient(circle at 26% 20%, rgba(26,109,212,.10), transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
      pointer-events:none;
    }

    .panel::after{
      content:'';
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
      background:
        radial-gradient(ellipse at 50% 48%,
          rgba(4,11,18,.30) 0%,
          rgba(4,11,18,.20) 30%,
          rgba(4,11,18,.08) 52%,
          rgba(4,11,18,0) 78%);
    }

    .login-shell{
      width:min(500px, 100%);
      position:relative;
      z-index:30;
      pointer-events:auto;
      animation:fadeUp .95s cubic-bezier(.16,1,.3,1);
    }

    .top-mini{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:1rem;
      padding:0 .15rem;
    }

    .mini-label{
      font-size:.68rem;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--muted);
      font-family:'Share Tech Mono', monospace;
    }

    .mini-line{
      width:64px;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(132,191,255,.8), transparent);
    }

    .login-card{
      position:relative;
      z-index:31;
      background:rgba(3, 10, 18, .36);
      border:1px solid rgba(132,191,255,.13);
      border-radius:24px;
      padding:1.35rem;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow:0 18px 42px rgba(0,0,0,.18);
      overflow:visible;
      pointer-events:auto;
    }

    .login-card::before{ content:none; }

    .brand{
      text-align:center;
      margin-bottom:1.65rem;
    }

    .brand-name{
      font-family:'Cinzel', serif;
      font-size:2.5rem;
      font-weight:900;
      letter-spacing:.28em;
      color:#F5F8FC;
      text-transform:uppercase;
      line-height:1;
      text-shadow:0 0 24px rgba(30,105,210,.18);
    }

    .brand-name .acc{ color:var(--blue-soft); }

    .brand-tag{
      margin-top:.55rem;
      font-size:.82rem;
      color:#9FB2C6;
      font-style:italic;
      font-weight:300;
      letter-spacing:.03em;
    }

    .brand-rule{
      width:38px;
      height:2px;
      margin:.95rem auto 0;
      background:linear-gradient(90deg, transparent, var(--blue-soft), transparent);
      opacity:.85;
    }

    .card-title{
      font-family:'Cinzel', serif;
      font-size:.82rem;
      font-weight:700;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#E3ECF5;
      margin-bottom:.3rem;
    }

    .card-sub{
      font-size:.78rem;
      color:#91A5BA;
      letter-spacing:.03em;
      margin-bottom:1.45rem;
    }

    .auth-error{
      margin:0 0 1rem;
      color:#ffd8d8;
      font-weight:700;
      background:rgba(185,28,28,0.18);
      border:1px solid rgba(248,113,113,0.38);
      padding:10px 12px;
      border-radius:12px;
    }

    .field{
      margin-bottom:1rem;
      position:relative;
      z-index:32;
    }

    label{
      display:block;
      margin-bottom:.42rem;
      font-size:.66rem;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:#8DA2B8;
      font-family:'Share Tech Mono', monospace;
    }

    input{
      width:100%;
      padding:.92rem 1rem;
      border-radius:12px;
      border:1px solid rgba(132,191,255,.18);
      background:rgba(4,11,18,.58);
      color:#F1F6FB;
      outline:none;
      font-size:.92rem;
      transition:.22s ease;
      font-family:'Lato',sans-serif;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 24px rgba(2,8,15,.18);
      pointer-events:auto;
      position:relative;
      z-index:32;
    }

    input::placeholder{ color:rgba(214,227,241,.34); }

    input:focus{
      border-color:rgba(125,187,255,.52);
      background:rgba(7,15,24,.72);
      box-shadow:0 0 0 4px rgba(26,109,212,.13), 0 12px 26px rgba(10,34,66,.24);
    }

    .actions{
      margin-top:1.1rem;
      position:relative;
      z-index:32;
    }

    .btn{
      width:100%;
      border:none;
      border-radius:14px;
      padding:.98rem 1rem;
      cursor:pointer;
      color:#fff;
      font-family:'Cinzel', serif;
      font-size:.8rem;
      font-weight:700;
      letter-spacing:.16em;
      text-transform:uppercase;
      background:linear-gradient(135deg, var(--blue-dark), var(--blue));
      box-shadow:0 10px 26px rgba(26,109,212,.28);
      transition:.2s ease;
      position:relative;
      overflow:hidden;
      pointer-events:auto;
      z-index:32;
    }

    .btn::after{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(to bottom, rgba(255,255,255,.12), transparent 55%);
      pointer-events:none;
    }

    .btn:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 32px rgba(26,109,212,.35);
    }

    .btn:active{ transform:translateY(0); }

    .card-footer{
      margin-top:1.15rem;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
    }

    .dot{
      width:6px;
      height:6px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 8px rgba(39,174,96,.75);
      animation:pulse 2s ease infinite;
    }

    .card-footer span{
      font-size:.65rem;
      text-transform:uppercase;
      letter-spacing:.1em;
      color:#93A8BD;
      font-family:'Share Tech Mono', monospace;
    }

    .bottom-note{
      margin-top:1rem;
      text-align:center;
      font-size:.66rem;
      color:rgba(210,223,236,.44);
      letter-spacing:.11em;
      text-transform:uppercase;
      font-family:'Share Tech Mono', monospace;
    }

    .watermark{
      position:fixed;
      bottom:1.25rem;
      left:50%;
      transform:translateX(-50%);
      z-index:8;
      color:rgba(230,240,250,.22);
      font-size:.58rem;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-family:'Share Tech Mono', monospace;
      white-space:nowrap;
    }

    @keyframes heroLinesDrift{
      0%{
        transform:translate3d(-12px, -8px, 0) scale(1.015);
        background-position:48% 50%;
      }
      50%{
        transform:translate3d(8px, 6px, 0) scale(1.025);
        background-position:52% 48%;
      }
      100%{
        transform:translate3d(16px, -4px, 0) scale(1.018);
        background-position:50% 52%;
      }
    }

    @keyframes heroLinesGlow{
      0%,100%{
        opacity:.28;
        filter:drop-shadow(0 0 6px rgba(39,132,255,.16));
      }
      50%{
        opacity:.42;
        filter:drop-shadow(0 0 12px rgba(39,132,255,.30));
      }
    }

    @keyframes panelSegmentEnergy{
      0%{ stroke-dashoffset:0; stroke-opacity:.34; }
      45%{ stroke-opacity:.82; }
      100%{ stroke-dashoffset:-240; stroke-opacity:.42; }
    }

    @keyframes fadeUp{
      from{ opacity:0; transform:translateY(22px); }
      to{ opacity:1; transform:translateY(0); }
    }

    @keyframes pulse{
      0%,100%{opacity:1}
      50%{opacity:.35}
    }


    /* Refinamiento premium del panel derecho:
       red tecnologica viva, mas elegante y sin competir con el login */
    .panel-network{
      opacity:.78;
      filter:drop-shadow(0 0 8px rgba(70,164,255,.20));
      animation:panelNetworkBreath 24s ease-in-out infinite alternate;
      -webkit-mask-image:
        radial-gradient(ellipse at 50% 48%,
          rgba(0,0,0,.10) 0%,
          rgba(0,0,0,.26) 32%,
          rgba(0,0,0,.62) 56%,
          rgba(0,0,0,.90) 78%,
          rgba(0,0,0,1) 100%);
      mask-image:
        radial-gradient(ellipse at 50% 48%,
          rgba(0,0,0,.10) 0%,
          rgba(0,0,0,.26) 32%,
          rgba(0,0,0,.62) 56%,
          rgba(0,0,0,.90) 78%,
          rgba(0,0,0,1) 100%);
    }

    body.arion-login::before,
    body.arion-login::after,
    .hero-image,
    .hero-motion-lines,
    .hero::before,
    .hero::after,
    .panel::before,
    .panel::after,
    .panel-network,
    .panel-network *,
    .btn::after{
      pointer-events:none !important;
    }

    #arion-login-form,
    #arion-login-form label,
    #arion-login-form input,
    #arion-login-form button{
      pointer-events:auto;
      position:relative;
      z-index:33;
    }

    .panel-network line{
      stroke-width:1.12;
      stroke-opacity:.42;
      stroke-dasharray:120 125;
      animation:panelSegmentEnergyPremium 13.5s ease-in-out infinite;
    }

    .panel-network line:nth-of-type(2){ animation-duration:15.5s; animation-delay:-2s; stroke-opacity:.36; }
    .panel-network line:nth-of-type(3){ animation-duration:17s; animation-delay:-4s; stroke-opacity:.40; }
    .panel-network line:nth-of-type(4){ animation-duration:14.5s; animation-delay:-1.4s; stroke-opacity:.34; }
    .panel-network line:nth-of-type(5){ animation-duration:18.5s; animation-delay:-5.2s; stroke-opacity:.38; }
    .panel-network line:nth-of-type(6){ animation-duration:16s; animation-delay:-3s; stroke-opacity:.33; }
    .panel-network line:nth-of-type(7){ animation-duration:19s; animation-delay:-6s; stroke-opacity:.37; }
    .panel-network line:nth-of-type(8){ animation-duration:20s; animation-delay:-4.8s; stroke-opacity:.31; }
    .panel-network line:nth-of-type(9){ animation-duration:15s; animation-delay:-2.6s; stroke-opacity:.39; }

    .panel-network circle{
      fill-opacity:.74;
      filter:drop-shadow(0 0 6px rgba(70,164,255,.52));
    }

    .panel-network .halo{
      fill-opacity:.10;
      filter:drop-shadow(0 0 11px rgba(132,191,255,.32));
    }

    .panel-network .energy-dot{
      fill-opacity:.70;
      filter:drop-shadow(0 0 9px rgba(132,191,255,.62));
    }

    @keyframes panelNetworkBreath{
      0%{
        transform:translate3d(-6px, -3px, 0) scale(1.006);
      }
      100%{
        transform:translate3d(7px, 4px, 0) scale(1.014);
      }
    }

    @keyframes panelSegmentEnergyPremium{
      0%{
        stroke-dashoffset:0;
        stroke-opacity:.26;
      }
      38%{
        stroke-opacity:.62;
      }
      68%{
        stroke-opacity:.42;
      }
      100%{
        stroke-dashoffset:-245;
        stroke-opacity:.30;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .hero-motion-lines,
      .panel-network,
      .panel-network line,
      .panel-network circle{
        animation:none;
      }
      .panel-network animate{
        display:none;
      }
    }

    @media (max-width: 1100px){
      .page{ grid-template-columns: 50% 50%; }
      .hero{ padding:2.2rem 2rem 2.4rem; }
      .hero-image{ left:-84px; right:-2%; }
    }

    @media (max-width: 900px){
      html,body{ overflow:auto; }

      .page{
        grid-template-columns:1fr;
        min-height:100vh;
      }

      .hero{
        min-height:46vh;
        padding:2rem 1.35rem 1.8rem;
      }

      .hero-image{
        right:0;
        -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 72%, rgba(0,0,0,.3) 100%);
        mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 72%, rgba(0,0,0,.3) 100%);
      }

      .hero::before{
        background:linear-gradient(180deg, rgba(3,8,14,.90) 0%, rgba(3,8,14,.45) 58%, rgba(3,8,14,.12) 100%);
      }

      .panel{ padding:1.4rem 1rem 2rem; }

      .hero-content{ top:-38px; }
      .hero-lower{ transform:translateY(32px); }
      .hero-title{ font-size:2rem; }
      .hero-text{ font-size:.92rem; }
      .brand-name{ font-size:2.1rem; }

      .watermark{
        position:static;
        transform:none;
        text-align:center;
        display:block;
        padding:0 1rem 1.2rem;
        margin-top:.5rem;
      }
    }

    @media (max-width: 560px){
      .brand-name{
        font-size:1.85rem;
        letter-spacing:.22em;
      }

      .hero-chip{ font-size:.73rem; }
      .hero-quote{ font-size:.83rem; }
    }