:root{
    --green-900:#0A2E22;
    --green-800:#0F3D2C;
    --green-700:#155238;
    --green-600:#1C6944;
    --green-glow:#2E8F5F;
    --orange-600:#E85D0F;
    --orange-500:#FF7A1F;
    --orange-400:#FF9A48;
    --ink:#14231C;
    --ink-soft:#5D7268;
    --line:#E7EEE9;
    --paper:#FFFFFF;
    --cream:#F6FAF7;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{
    font-family:"Nunito Sans", sans-serif;
    color:var(--ink);
    background:var(--green-900);
    min-height:100vh;
    overflow-x:hidden;
  }

  /* ============ BACKGROUND ============ */
  .scene{
    position:fixed; inset:0; z-index:0;
    background:radial-gradient(120% 100% at 12% 0%, var(--green-600) 0%, var(--green-700) 32%, var(--green-800) 62%, var(--green-900) 100%);
    overflow:hidden;
  }

  .glow{
    position:absolute; border-radius:50%;
    animation:float 22s ease-in-out infinite;
    will-change:transform;
  }
  .glow1{
    width:620px; height:620px; top:-200px; left:-160px;
    background:radial-gradient(circle at 35% 30%, rgba(46,143,95,.55), transparent 70%);
    animation-duration:26s;
  }
  .glow2{
    width:520px; height:520px; bottom:-220px; right:-140px;
    background:radial-gradient(circle at 60% 45%, rgba(255,122,31,.16), transparent 72%);
    animation-duration:30s;
    animation-delay:-9s;
  }
  @keyframes float{
    0%,100%{ transform:translate3d(0,0,0) scale(1); }
    50%{ transform:translate3d(18px,-18px,0) scale(1.05); }
  }

  /* network dot pattern, echoing the real site's hero background */
  .network{ position:absolute; inset:0; opacity:.5; }
  .network .dots{ animation:pulse-dot 6s ease-in-out infinite; will-change:opacity; }
  @keyframes pulse-dot{
    0%,100%{ opacity:.4; }
    50%{ opacity:.85; }
  }

  .ring{
    position:absolute; border-radius:50%;
    border:1.5px dashed rgba(255,255,255,.14);
    animation:spin-slow 80s linear infinite;
    will-change:transform;
  }
  .ring1{ width:520px; height:520px; top:8%; right:10%; }
  @keyframes spin-slow{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

  /* ============ LAYOUT ============ */
  .wrapper{
    position:relative; z-index:2;
    min-height:100vh;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    align-items:center;
    gap:40px;
    padding:0 6vw;
  }

  .brand-side{ color:#fff; animation:rise 800ms cubic-bezier(.19,1,.22,1) both; }
  @keyframes rise{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }

  .logo-row{ display:flex; align-items:center; gap:12px; margin-bottom:34px; }
  .logo-mark{ width:46px; height:46px; }
  .logo-text{ font-family:'Sora',sans-serif; font-size:20px; font-weight:800; line-height:1.15; letter-spacing:.01em; }
  .logo-text b{ display:block; color:var(--orange-400); font-size:15px; }

  h1.headline{
    font-family:'Sora',sans-serif; font-weight:800;
    /* font-size:clamp(32px,3.6vw,46px); */
    font-size: clamp(28px, 3.2vw, 42px);
    line-height:1.1; margin:0 0 16px; letter-spacing:-.01em;
  }
  h1.headline em{ font-style:normal; color:var(--orange-400); }

  .sub{ font-size:16px; line-height:1.65; color:rgba(255,255,255,.78); max-width:420px; margin:0 0 28px; }

  .badges{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px; }
  .badge{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    padding:8px 14px; border-radius:999px;
    font-size:12.5px; font-weight:700;
  }
  .badge svg{ width:14px; height:14px; color:#7CE0A8; }

  /* orbiting module pills, echoing the real hero graphic */
  .orbit-wrap{ position:relative; width:340px; height:280px; display:none; }
  .orbit-ring{
    position:absolute; left:23%; top:18%;
    width:180px; height:180px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1.5px dashed var(--orange-500);
    opacity:.55;
    animation:spin-slow 40s linear infinite;
  }
  .orbit-ring-m{
    position:absolute; left:5%; top:-2%;
    width:300px; height:300px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1.5px dashed var(--cream);
    opacity:.55;
    animation:spin-slow 40s linear infinite;
  }
  .orbit-core{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:96px; height:96px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--green-glow), var(--green-700));
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#fff; box-shadow:0 0 0 8px rgba(46,143,95,.18);
  }
  .orbit-core b{ font-family:'Sora',sans-serif; font-size:20px; }
  .orbit-core span{ font-size:7.5px; font-weight:700; letter-spacing:.04em; opacity:.85; }
  .pill{
    position:absolute;
    display:flex; align-items:center; gap:6px;
    background:#fff; color:var(--ink);
    padding:7px 12px; border-radius:999px;
    font-size:11.5px; font-weight:600;
    box-shadow:0 8px 16px -6px rgba(0,0,0,.3);
    animation:pill-float 6s ease-in-out infinite;
    backface-visibility:hidden;
    transform:translateZ(0);
  }
  .pill svg{ width:12px; height:12px; color:var(--orange-500); }
  .p1{ top:-14px; left:26px; animation-delay:0s; }
  .p2{ top:0px; right:0px; animation-delay:-1s; }
  .p3{ top:110px; right:-38px; animation-delay:-2s; }
  .p4{ bottom:0px; right:20px; animation-delay:-3s; }
  .p5{ bottom:-10px; left:16px; animation-delay:-4s; }
  .p6{ top:104px; left:-38px; animation-delay:-5s; }
  @keyframes pill-float{
    0%,100%{ transform:translate3d(0,0,0); }
    50%{ transform:translate3d(0,-7px,0); }
  }

  /* ---- CARD ---- */
  .card-wrap{ animation:rise 800ms 100ms cubic-bezier(.19,1,.22,1) both; }
  .card{
    position:relative;
    background:var(--paper);
    border-radius:24px;
    padding:38px 34px 30px;
    max-width:410px;
    margin-left:auto;
    box-shadow:0 40px 80px -26px rgba(5,25,17,.55);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .card-wrap:hover .card{ transform:translateY(-3px); }
  .card::before{
    content:"";
    position:absolute; top:0; left:28px; right:28px; height:3px;
    background:linear-gradient(90deg,var(--orange-500),var(--green-glow) 70%,transparent);
    border-radius:0 0 3px 3px;
  }

  .card-top{ margin-bottom:24px; }
  .card-title{ font-family:'Sora',sans-serif; font-size:21px; font-weight:800; color:var(--green-900); }
  .card-title span{
    display:block; font-family:"Nunito Sans", sans-serif; font-weight:500;
    font-size:13px; color:var(--ink-soft); margin-top:3px;
  }

  form{ display:flex; flex-direction:column; gap:16px; }

  .field label{ display:block; font-size:12.5px; font-weight:700; color:var(--green-900); margin-bottom:7px; }
  .field label .req{ color:var(--orange-600); }

  .input-shell{
    position:relative; display:flex; align-items:center;
    border:1.5px solid var(--line); border-radius:11px; background:var(--cream);
    transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease;
  }
  .input-shell svg{ width:17px; height:17px; margin-left:13px; flex-shrink:0; color:var(--ink-soft); transition:color .18s ease; }
  .input-shell input{
    width:100%; border:none; background:transparent; outline:none;
    padding:12px 13px; font-size:14.5px; font-family:"Nunito Sans", sans-serif; color:var(--ink);
  }
  .input-shell input::placeholder{ color:#a6b3ac; }
  .input-shell:focus-within{
    border-color:var(--green-glow);
    box-shadow:0 0 0 4px rgba(46,143,95,.14);
    transform:translateY(-1px);
    background:#fff;
  }
  .input-shell:focus-within svg{ color:var(--green-600); }
  .input-shell.error{ border-color:#E33B2E; box-shadow:0 0 0 4px rgba(227,59,46,.12); }

  .eye-btn{ background:none; border:none; cursor:pointer; padding:0 13px; display:flex; align-items:center; color:var(--ink-soft); }
  .eye-btn:hover{ color:var(--green-600); }

  .row-between{ display:flex; align-items:center; justify-content:space-between; font-size:13px; }
  .remember{ display:flex; align-items:center; gap:7px; color:var(--ink-soft); cursor:pointer; user-select:none; }
  .remember input{ accent-color:var(--green-600); width:15px; height:15px; }
  .forgot{ color:var(--orange-600); font-weight:700; text-decoration:none; }
  .forgot:hover{ text-decoration:underline; }

  .submit{
    position:relative; overflow:hidden; margin-top:4px;
    border:none; cursor:pointer; border-radius:11px; padding:14px 20px;
    font-weight:800; font-size:14.5px; color:#fff;
    background:linear-gradient(135deg,var(--orange-600),var(--orange-500));
    display:flex; align-items:center; justify-content:center; gap:9px;
    box-shadow:0 14px 26px -10px rgba(232,93,15,.5);
    transition:transform .15s ease, box-shadow .2s ease;
  }
  .submit:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(232,93,15,.6); }
  .submit:active{ transform:translateY(0) scale(.99); }
  .submit svg{ width:16px; height:16px; }
  .submit .shine{
    position:absolute; top:0; left:-40%; width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-20deg) translateX(0%);
    animation:shine 3.6s ease-in-out infinite;
  }
  @keyframes shine{
    0%{ transform:skewX(-20deg) translateX(0%); }
    45%{ transform:skewX(-20deg) translateX(480%); }
    100%{ transform:skewX(-20deg) translateX(480%); }
  }

  .register-row{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:2px; }
  .register-row a{ color:var(--orange-600); font-weight:700; text-decoration:none; }
  .register-row a:hover{ text-decoration:underline; }

  .divider-note{ text-align:center; font-size:11.5px; color:#a6b3ac; margin-top:2px; }

  @keyframes shake{
    10%,90%{ transform:translateX(-1px); }
    20%,80%{ transform:translateX(2px); }
    30%,50%,70%{ transform:translateX(-4px); }
    40%,60%{ transform:translateX(4px); }
  }
  .shake{ animation:shake .5s; }

  .footer-note{
    position:relative; z-index:2; text-align:center;
    color:rgba(255,255,255,.62); font-size:12px; padding:20px 0 26px; grid-column:1/-1;
  }
  .footer-note b{ color:var(--orange-400); font-weight:800; }

  @media (min-width:1100px){ .orbit-wrap{ display:block; margin-top:20px; } }

  @media (max-width:960px){
    .wrapper{ grid-template-columns:1fr; padding:40px 26px; }
    .card{ margin:0 auto; }
  }
  @media (max-width:480px){
    .card{ padding:28px 22px 24px; border-radius:18px; }
    h1.headline{ font-size:28px; }
  }

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