/* Modern split-screen auth pages (login, forgot / reset password).
   Every length is written in design pixels of a 1470 x 900 frame and multiplied by --u,
   so the whole layout scales with the viewport. Below 740px it becomes one column. */
:root{
  --u:1px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ink:#030712;
  --muted:#4a4d54;
  --icon:#4e5157;
  --line:#e5e5e5;
  --paper:#ffffff;
  --on-ink:#f9fafb;
  --danger:#b42318;
  --danger-bg:#fef3f2;
  --danger-line:#fecdca;
  --ok:#067647;
  --ok-bg:#ecfdf3;
  --ok-line:#abefc6;

  --hero-title:#e5e6ee;
  --hero-copy:rgba(255,255,255,.62);
  --hero-faint:rgba(255,255,255,.55);
  --hero-rule:rgba(255,255,255,.22);
  --logo-ink:rgba(199,210,254,.62);

  --glass-bg:rgba(11,8,19,.44);
  --glass-border:rgba(255,255,255,.10);
  --glass-filter:blur(16px) saturate(.8);
  --shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);
}
@media (min-width:740px){
  :root{
    --u-floor:min(clamp(.8px, calc(.8px + (1176px - 100vw) / 1180), 1px), max(.8px, calc(100vh / 772), calc(500px - 100vh)));
    --u:min(4px, max(var(--u-floor), min(calc(100vw / 1470), calc(100vh / 900))));
  }
  @supports (height:100dvh){
    :root{
      --u-floor:min(clamp(.8px, calc(.8px + (1176px - 100vw) / 1180), 1px), max(.8px, calc(100dvh / 772), calc(500px - 100dvh)));
      --u:min(4px, max(var(--u-floor), min(calc(100vw / 1470), calc(100dvh / 900))));
    }
  }
}
@media (min-width:740px) and (orientation:portrait){
  :root{ --u-floor:min(1px, calc(100vh / 772)); }
  @supports (height:100dvh){ :root{ --u-floor:min(1px, calc(100dvh / 772)); } }
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-feature-settings:"kern" 1;
}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

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

/* ---------------- Brand panel (left) ---------------- */
.brand{
  position:relative;
  flex:0 0 calc(100% * 610 / 1470);
  max-width:calc(100% - 450 * var(--u));
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:space-between;gap:calc(24 * var(--u));
  container-type:inline-size;
  padding:calc(32 * var(--u)) 0 calc(32 * var(--u));
  overflow:hidden;isolation:isolate;color:#fff;
  background:#0b0a1f var(--brand-img) center / cover no-repeat;
}
.brand::before,.brand::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.brand::before{
  left:58%;top:6%;width:62%;height:42%;
  background:radial-gradient(closest-side,rgba(255,170,72,.55),rgba(255,120,40,.18) 55%,transparent);
  mix-blend-mode:screen;filter:blur(calc(6 * var(--u)));
  animation:bloom 5.5s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.brand::after{
  left:-10%;top:42%;width:120%;height:50%;
  background:radial-gradient(closest-side,rgba(70,120,255,.32),transparent);
  mix-blend-mode:screen;
  animation:drift 9s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes bloom{from{opacity:.35;transform:scale(.9)}to{opacity:1;transform:scale(1.12)}}
@keyframes drift{from{opacity:.45;transform:translate3d(-6%,2%,0)}to{opacity:1;transform:translate3d(6%,-3%,0)}}

.brand__inset{
  --inset:clamp(calc(24 * var(--u)), calc(100cqi - 465.75 * var(--u)), calc(144 * var(--u)));
  --measure:min(calc(338 * var(--u)), calc(100cqi - var(--inset) - 24 * var(--u)));
  padding-left:var(--inset);padding-right:calc(24 * var(--u));
}

/* Logo: the company logo sits on a white rounded chip so it reads on the dark panel */
.logo{display:inline-flex;align-items:center;height:calc(68 * var(--u))}
.logo__mark{
  display:inline-flex;align-items:center;justify-content:center;
  height:calc(68 * var(--u));padding:0 calc(22 * var(--u));
  border-radius:calc(16 * var(--u));background:#fff;
  box-shadow:0 calc(8 * var(--u)) calc(24 * var(--u)) calc(-8 * var(--u)) rgba(0,0,0,.45);
}
.logo__mark img{display:block;height:calc(46 * var(--u));width:auto;max-width:calc(260 * var(--u));object-fit:contain}
.logo__mark b{font-size:calc(24 * var(--u));font-weight:700;letter-spacing:-.02em;color:var(--ink)}

.hero__title{
  margin:0;max-width:var(--measure);
  font-size:min(calc(30 * var(--u)), calc(var(--measure) / 7.9));
  line-height:min(calc(36 * var(--u)), calc(var(--measure) / 7.9 * 1.2));
  font-weight:600;letter-spacing:-.034em;color:var(--hero-title);
}
.hero__copy{
  margin:calc(11.5 * var(--u)) 0 0;max-width:var(--measure);
  font-size:calc(16 * var(--u));line-height:calc(24 * var(--u));font-weight:400;color:var(--hero-copy);
}

/* highlight marquee (4 cards, repeated 3x; one set = 4 * (260 + 16) = 1104 design px) */
.reel{position:relative;margin-top:calc(40 * var(--u));height:calc(220 * var(--u))}
.reel__track{
  position:absolute;left:0;top:0;display:flex;gap:calc(16 * var(--u));
  transform:translateX(calc(-43 * var(--u)));
  animation:reel 56s linear infinite;will-change:transform;
}
@media (hover:hover){.reel:hover .reel__track{animation-play-state:paused}}
@keyframes reel{
  from{transform:translateX(calc(-43 * var(--u)))}
  to{transform:translateX(calc((-43 - 1104) * var(--u)))}
}
.card{
  flex:none;width:calc(260 * var(--u));height:calc(220 * var(--u));margin:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(24 * var(--u));
  border:calc(1 * var(--u)) solid var(--glass-border);border-radius:calc(14 * var(--u));
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
}
.card__icon{
  width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:calc(10 * var(--u));
  display:grid;place-items:center;color:rgba(255,255,255,.92);
  box-shadow:inset 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.18);
}
.card__icon svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.card__icon--a{background:linear-gradient(135deg,#f6b6a0,#8d6ab8)}
.card__icon--b{background:linear-gradient(135deg,#9aa3b8,#3c4256)}
.card__icon--c{background:linear-gradient(135deg,#ffb36b,#5b6cd6)}
.card__icon--d{background:linear-gradient(135deg,#6ee7b7,#2b6cb0)}
.card__title{margin:0;font-size:calc(16 * var(--u));line-height:calc(20 * var(--u));font-weight:600;letter-spacing:-.02em;color:rgba(255,255,255,.95)}
.card__text{margin:calc(6 * var(--u)) 0 0;font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));font-weight:400;color:rgba(255,255,255,.7)}

/* module chips */
.trust{margin-top:calc(36 * var(--u));container-type:inline-size}
.trust__rule{display:flex;align-items:center;gap:calc(8 * var(--u));max-width:var(--measure)}
.trust__rule::before,.trust__rule::after{content:"";flex:1;height:calc(1 * var(--u));background:var(--hero-rule)}
.trust__label{font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));color:rgba(255,255,255,.92);white-space:nowrap}
.marks{max-width:var(--measure);margin-top:calc(20 * var(--u));display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(10 * var(--u)) calc(14 * var(--u))}
.mark{display:inline-flex;align-items:center;gap:calc(5 * var(--u));color:var(--logo-ink);font-size:calc(14 * var(--u));line-height:1;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.mark svg{width:calc(16 * var(--u));height:calc(16 * var(--u));flex:none}

.legal{margin:0;font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));color:var(--hero-faint);text-wrap:balance}

/* ---------------- Auth panel (right) ---------------- */
.auth{flex:1 1 auto;min-width:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
.auth__main{flex:1;display:flex;align-items:center;justify-content:center;padding:calc(33.5 * var(--u)) calc(24 * var(--u)) 0}
.panel{width:calc(402 * var(--u));max-width:100%}
.panel__title{margin:0;font-size:calc(32 * var(--u));line-height:calc(40 * var(--u));font-weight:600;letter-spacing:-.022em;color:var(--ink)}
.panel__sub{margin:calc(2 * var(--u)) 0 0;font-size:calc(17 * var(--u));line-height:calc(24 * var(--u));color:var(--muted)}

.notice{
  margin-top:calc(20 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u));
  border:calc(1 * var(--u)) solid var(--danger-line);border-radius:calc(8 * var(--u));
  background:var(--danger-bg);color:var(--danger);
  font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));
}
.notice--ok{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}

.form{margin-top:calc(24 * var(--u))}
.field + .field{margin-top:calc(15 * var(--u))}
.label{display:block;font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));font-weight:400;color:var(--muted)}
.control{position:relative;margin-top:calc(7 * var(--u))}
.control__icon{
  position:absolute;left:calc(9.5 * var(--u));top:50%;transform:translateY(-50%);
  width:calc(16 * var(--u));height:calc(16 * var(--u));color:var(--icon);pointer-events:none;
}
.input{
  display:block;width:100%;height:calc(36 * var(--u));
  padding:0 calc(40 * var(--u)) 0 calc(30 * var(--u));
  font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));color:var(--ink);
  background:var(--paper);border:calc(1 * var(--u)) solid var(--line);border-radius:calc(8 * var(--u));
  box-shadow:var(--shadow-xs);outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.control--plain .input{padding-right:calc(10 * var(--u))}
.input::placeholder{color:var(--muted);opacity:1}
.input:focus-visible{border-color:#a3a3a3;box-shadow:var(--shadow-xs),0 0 0 calc(3 * var(--u)) rgba(163,163,163,.35)}
.input.is-invalid{border-color:var(--danger)}
.field__error{margin:calc(6 * var(--u)) 0 0;font-size:calc(13 * var(--u));line-height:calc(18 * var(--u));color:var(--danger)}
.reveal{
  position:absolute;right:calc(4.25 * var(--u));top:50%;transform:translateY(-50%);
  width:calc(28 * var(--u));height:calc(28 * var(--u));padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--icon);border-radius:calc(6 * var(--u));
}
.reveal svg{width:calc(14 * var(--u));height:calc(14 * var(--u))}
.reveal::after{content:"";position:absolute;inset:-6px}
.reveal:focus-visible{outline:calc(2 * var(--u)) solid #a3a3a3;outline-offset:0}

.row{margin-top:calc(16 * var(--u));display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));min-height:calc(20 * var(--u))}
.check{display:inline-flex;align-items:center;gap:calc(12.5 * var(--u));cursor:pointer;font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));color:var(--ink)}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__text{position:relative;top:calc(-1 * var(--u))}
.check__box{
  width:calc(16 * var(--u));height:calc(16 * var(--u));flex:none;border-radius:calc(4 * var(--u));
  border:calc(1 * var(--u)) solid var(--line);background:var(--paper);box-shadow:var(--shadow-xs);
  display:grid;place-items:center;color:var(--on-ink);
}
.check__box svg{width:calc(11 * var(--u));height:calc(11 * var(--u));opacity:0}
.check input:checked + .check__box{background:var(--ink);border-color:var(--ink)}
.check input:checked + .check__box svg{opacity:1}
.check input:focus-visible + .check__box{box-shadow:0 0 0 calc(3 * var(--u)) rgba(163,163,163,.45)}
.link-strong{font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));font-weight:500;color:var(--ink)}
@media (hover:hover){.link-strong:hover{text-decoration:underline;text-underline-offset:calc(3 * var(--u))}}

.cta-slot{margin-top:calc(20 * var(--u));height:calc(40 * var(--u));padding:calc(1 * var(--u))}
.cta{
  display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));width:100%;height:100%;
  border:0;border-radius:calc(8 * var(--u));background:var(--ink);color:var(--on-ink);
  font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));font-weight:500;cursor:pointer;
  transition:background-color .15s ease, transform .15s ease;
}
@media (hover:hover){.cta:hover{background:#111827}}
.cta:active{transform:scale(.985)}
.cta:focus-visible{outline:calc(2 * var(--u)) solid #9ca3af;outline-offset:calc(2 * var(--u))}
.cta[disabled]{opacity:.7;cursor:progress}
.cta .spin{width:calc(14 * var(--u));height:calc(14 * var(--u));border-radius:50%;border:calc(2 * var(--u)) solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.switch{margin:calc(24 * var(--u)) 0 0;text-align:center;letter-spacing:-.0045em;font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));color:var(--muted)}
.switch a{font-weight:600;color:var(--ink)}
@media (hover:hover){.switch a:hover{text-decoration:underline;text-underline-offset:calc(3 * var(--u))}}

.captcha{margin-top:calc(16 * var(--u))}

.auth__foot{padding:calc(24 * var(--u)) calc(24 * var(--u)) calc(33 * var(--u));display:flex;justify-content:center;align-items:center;gap:calc(16 * var(--u));flex-wrap:wrap}
.auth__foot a,.auth__foot summary{font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));color:var(--muted)}
@media (hover:hover){.auth__foot a:hover{color:var(--ink)}}

/* language switch (no JS: <details>) */
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:calc(6 * var(--u));padding:calc(4 * var(--u)) calc(8 * var(--u));border-radius:calc(6 * var(--u))}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:calc(14 * var(--u));height:calc(14 * var(--u))}
.lang[open] summary,.lang summary:hover{color:var(--ink);background:#f3f4f6}
.lang__menu{
  position:absolute;bottom:calc(100% + 6 * var(--u));left:50%;transform:translateX(-50%);z-index:5;
  min-width:calc(150 * var(--u));max-height:calc(240 * var(--u));overflow:auto;padding:calc(4 * var(--u));
  background:#fff;border:calc(1 * var(--u)) solid var(--line);border-radius:calc(10 * var(--u));
  box-shadow:0 10px 30px -10px rgba(3,7,18,.25);
}
.lang__menu a{display:block;padding:calc(8 * var(--u)) calc(10 * var(--u));border-radius:calc(6 * var(--u))}
.lang__menu a:hover,.lang__menu a.is-active{background:#f3f4f6;color:var(--ink)}
.lang__menu a.is-active{font-weight:600}

@media (pointer:coarse){.input{font-size:max(16px, calc(14 * var(--u)))}}

/* ---------------- Mobile (< 740px): one column ---------------- */
@media (max-width:739.98px){
  :root{--g:clamp(16px, 5vw, 32px)}
  .shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto auto auto}
  .shell::before,.shell::after{content:"";grid-column:1;z-index:0;background:#0b0a1f var(--brand-img) center top / cover no-repeat}
  .shell::before{grid-row:1 / 3;background-position:center 72%}
  .shell::after{grid-row:5 / 8;background-position:center bottom}
  .brand,.brand__mid,.auth{display:contents}
  .brand::before,.brand::after{display:none}
  .brand__top,.hero,.auth__main,.auth__foot,.reel,.trust,.brand__bottom{grid-column:1;position:relative;z-index:1}
  .brand__top{grid-row:1}
  .hero{grid-row:2}
  .auth__main{grid-row:3}
  .auth__foot{grid-row:4}
  .reel{grid-row:5}
  .trust{grid-row:6}
  .brand__bottom{grid-row:7}
  .brand__inset{--inset:var(--g);--measure:min(100%, 480px);padding-left:var(--g);padding-right:var(--g)}
  .brand__top{padding-top:calc(20px + env(safe-area-inset-top))}
  .hero{padding-top:32px;padding-bottom:36px}
  .hero__title{max-width:min(100%, 338px);font-size:clamp(26px, 7.6vw, 30px);line-height:1.2}
  .reel{margin-top:40px;height:220px;overflow:clip}
  .reel__track{animation-name:reel-m;transform:translateX(var(--g))}
  @keyframes reel-m{from{transform:translateX(var(--g))}to{transform:translateX(calc(var(--g) - 1104px))}}
  .trust{margin-top:36px}
  .brand__bottom{padding-top:36px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .auth__main{align-items:flex-start;padding:32px var(--g) 8px}
  .input{height:40px;font-size:16px}
  .cta-slot{height:44px}
  .reveal{width:36px;height:36px;right:0}
  .check{padding-block:6px;margin-block:-6px}
  .link-strong{padding-block:8px}
  .auth__foot{padding:4px var(--g) 28px;gap:4px}
  .auth__foot a,.auth__foot summary{padding:12px 4px}
  .lang__menu{bottom:auto;top:calc(100% + 6px)}
}

@media (prefers-reduced-motion:reduce){
  .reel__track{animation:none}
  .brand::before,.brand::after{animation:none}
  *{transition:none!important}
}

/* Entrance pre-roll (only while <html> has .is-entering; removed by the timeline or a 3s failsafe) */
html.is-entering :is(
  .logo__mark,.hero__title,.hero__copy,.card,
  .trust__label,.marks,.legal,
  .panel__title,.panel__sub,.notice,.field,.row,.cta-slot,.switch,.auth__foot > *
){opacity:0}
html.is-entering .trust__rule::before,
html.is-entering .trust__rule::after{opacity:0}
.e-line{display:block;clip-path:inset(0 -.1em -.25em -.1em)}
.e-in{display:block}