:root{
    --navy-deep:#122B45;
    --navy:#1B3B63;
    --navy-soft:#2A4D7A;
    --orange:#E8792A;
    --orange-light:#F2A65A;
    --steel-50:#EEF1F2;
    --steel-100:#E3E7E9;
    --steel-300:#C6CDD2;
    --steel-500:#6B7684;
    --steel-700:#3B434C;
    --white:#FFFFFF;
    --line:#D9DDE1;
    --radius:2px;
  }

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

  html,body{ height:100%; }

  body{
    font-family:'Inter', sans-serif;
    background:var(--steel-50);
    color:var(--steel-700);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;
  }

  a{ color:inherit; }

  .screen{
    display:flex;
    width:100%;
    min-height:100vh;
  }

  /* ---------- LEFT / BRAND PANEL ---------- */
  .brand-panel{
    position:relative;
    flex:1 1 52%;
    background:
      radial-gradient(1100px 700px at 15% 10%, var(--navy-soft) 0%, transparent 55%),
      linear-gradient(160deg, var(--navy-deep) 0%, #0D2036 100%);
    color:var(--white);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:56px 64px;
    overflow:hidden;
    min-height:100vh;
  }

  /* blueprint grid texture */
  .brand-panel::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:36px 36px;
    pointer-events:none;
  }

  /* large watermark mountain mark, echoes the logo */
  .brand-panel .watermark{
    position:absolute;
    right:-90px;
    bottom:-60px;
    width:520px;
    opacity:0.07;
    pointer-events:none;
  }

  .brand-top{ position:relative; z-index:2; }

  .rivets{
    display:flex;
    gap:10px;
    margin-bottom:34px;
  }
  .rivet{
    width:8px; height:8px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--orange-light), var(--orange) 60%, #b85e1c 100%);
    box-shadow:0 0 0 2px rgba(255,255,255,0.06);
  }

  .logo-lockup{ display:flex; align-items:center; gap:14px; }

  .logo-mark{ width:46px; height:38px; flex:none; }

  .logo-text .name{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    font-size:30px;
    letter-spacing:0.5px;
    line-height:1;
  }
  .logo-text .sub{
    font-family:'JetBrains Mono', monospace;
    font-size:18px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--orange-light);
    margin-top:6px;
  }

  .brand-mid{ position:relative; z-index:2; max-width:460px; }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--orange-light);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:1px;
    background:var(--orange);
  }

  .headline{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    font-size:44px;
    line-height:1.08;
    letter-spacing:0.2px;
    text-transform:uppercase;
  }
  .headline em{
    font-style:normal;
    color:var(--orange-light);
  }

  .headline-desc{
    margin-top:20px;
    font-size:15px;
    line-height:1.7;
    color:#B9C3CE;
    max-width:400px;
  }

  .specs{
    position:relative; z-index:2;
    display:flex;
    gap:40px;
    margin-top:44px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,0.12);
  }
  .spec dt{
    font-family:'JetBrains Mono', monospace;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--steel-300);
    margin-bottom:6px;
  }
  .spec dd{
    font-family:'Oswald', sans-serif;
    font-size:20px;
    font-weight:500;
  }

  .brand-bottom{
    position:relative; z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--steel-300);
  }

  /* weld seam divider with traveling spark */
  .seam{
    position:absolute;
    top:0; bottom:0;
    right:0;
    width:2px;
    background:linear-gradient(180deg, transparent, rgba(232,121,42,0.5), transparent);
    overflow:visible;
  }
  .spark{
    position:absolute;
    left:50%;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--orange-light);
    box-shadow:0 0 10px 3px rgba(242,166,90,0.7), 0 0 22px 8px rgba(232,121,42,0.35);
    transform:translateX(-50%);
    animation:travel 5.5s ease-in-out infinite;
  }
  @keyframes travel{
    0%   { top:8%;  opacity:0; }
    8%   { opacity:1; }
    48%  { top:92%; opacity:1; }
    56%  { opacity:0; }
    100% { top:92%; opacity:0; }
  }

  /* ---------- RIGHT / FORM PANEL ---------- */
  .form-panel{
    flex:1 1 48%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px;
    background:var(--steel-50);
    position:relative;
  }

  .form-panel::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(59,67,76,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(59,67,76,0.035) 1px, transparent 1px);
    background-size:44px 44px;
    pointer-events:none;
  }

  .card{
    position:relative;
    z-index:2;
    width:100%;
    max-width:390px;
  }

  .card-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--steel-500);
    margin-bottom:18px;
  }
  .card-tag::before{
    content:"";
    width:8px; height:8px;
    background:var(--orange);
  }

  .card h1{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    font-size:30px;
    text-transform:uppercase;
    letter-spacing:0.3px;
    color:var(--navy-deep);
    margin-bottom:10px;
  }

  .card > p.lede{
    font-size:14.5px;
    color:var(--steel-500);
    line-height:1.6;
    margin-bottom:32px;
  }

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

  .field label{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--steel-700);
    margin-bottom:9px;
  }

  .input-wrap{ position:relative; }

  .input-wrap input{
    width:100%;
    padding:13px 14px 13px 42px;
    background:var(--white);
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    font-family:'Inter', sans-serif;
    font-size:14.5px;
    color:var(--navy-deep);
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .input-wrap input::placeholder{ color:#A6AEB6; }

  .input-wrap input:focus{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(232,121,42,0.15);
  }
  .input-wrap input:focus-visible{
    outline:2px solid var(--orange);
    outline-offset:2px;
  }

  .input-wrap svg{
    position:absolute;
    left:14px; top:50%;
    transform:translateY(-50%);
    width:16px; height:16px;
    stroke:var(--steel-500);
    fill:none;
    pointer-events:none;
  }

  .row-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:13px;
  }

  .remember{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--steel-500);
    cursor:pointer;
    user-select:none;
  }
  .remember input[type="checkbox"]{
    appearance:none;
    width:16px; height:16px;
    border:1.5px solid var(--steel-300);
    border-radius:2px;
    display:grid;
    place-content:center;
    cursor:pointer;
    background:var(--white);
  }
  .remember input[type="checkbox"]::after{
    content:"";
    width:9px; height:9px;
    transform:scale(0);
    transition:transform .1s ease;
    background:var(--orange);
    clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 45% 62%);
  }
  .remember input[type="checkbox"]:checked::after{ transform:scale(1); }

  .forgot{
    color:var(--navy);
    font-weight:600;
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .forgot:hover{ border-bottom-color:var(--navy); }

  .btn-signin{
    position:relative;
    margin-top:6px;
    padding:14px 18px;
    background:var(--navy-deep);
    color:var(--white);
    border:none;
    border-radius:var(--radius);
    font-family:'Oswald', sans-serif;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    cursor:pointer;
    overflow:hidden;
    transition:background .18s ease, transform .05s ease;
  }
  .btn-signin::before{
    content:"";
    position:absolute;
    top:0; left:-40%;
    width:35%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(242,166,90,0.45), transparent);
    transform:skewX(-20deg);
    transition:left .55s ease;
  }
  .btn-signin:hover{ background:var(--navy); }
  .btn-signin:hover::before{ left:130%; }
  .btn-signin:active{ transform:translateY(1px); }
  .btn-signin:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

  .divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:28px 0 22px;
    color:var(--steel-300);
    font-family:'JetBrains Mono', monospace;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
  }
  .divider::before, .divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
  }

  .footer-note{
    font-size:13px;
    color:var(--steel-500);
    line-height:1.6;
  }
  .footer-note a{
    color:var(--orange);
    font-weight:600;
    text-decoration:none;
  }
  .footer-note a:hover{ text-decoration:underline; }

  @media (max-width:900px){
    .screen{ flex-direction:column; }
    .brand-panel{ padding:40px 32px; min-height:auto; }
    .seam{ display:none; }
    .headline{ font-size:32px; }
    .specs{ flex-wrap:wrap; row-gap:16px; }
    .form-panel{ padding:40px 28px 64px; }
    .watermark{ width:320px; }
  }

  @media (prefers-reduced-motion: reduce){
    .spark{ animation:none; opacity:0; }
    .btn-signin::before{ transition:none; }
  }