/* ARGOS login — same visual language as the portal: deep navy, cyan→violet accent, Manrope. */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/manrope-greek-wght-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); }

:root {
  --bg0: #04070e; --bg1: #081021;
  --panel: rgba(12, 20, 38, .72); --line: rgba(148, 170, 210, .14); --line-2: rgba(148, 170, 210, .28);
  --text: #e8eef8; --muted: #a3b1c6; --faint: #8190a8;
  --accent: #3dd6d0; --accent-2: #8b7bff; --accent-ink: #04201f;
  --ok: #34d399; --bad: #fb7185; --warn: #fbbf24;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100dvh; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg0);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.noscript { position: fixed; inset: auto 0 20px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------ animated backdrop */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(1400px 900px at 70% -20%, #0e1b3a 0%, transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg0) 75%); }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.o1 { width: 620px; height: 620px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(61,214,208,.55), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
.o2 { width: 720px; height: 720px; right: -220px; bottom: -260px; background: radial-gradient(circle, rgba(139,123,255,.55), transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
.o3 { width: 420px; height: 420px; left: 44%; top: 38%; background: radial-gradient(circle, rgba(95,184,255,.35), transparent 65%); animation: drift3 22s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(140px, 90px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-120px, -80px) scale(.92); } }
@keyframes drift3 { to { transform: translate(-160px, 60px) scale(1.2); } }
.grid { position: absolute; inset: -1px; opacity: .6;
  background-image: linear-gradient(rgba(148,170,210,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,170,210,.05) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 30% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 45%, #000 20%, transparent 75%); animation: gridpan 60s linear infinite; }
@keyframes gridpan { to { background-position: 56px 56px, 56px 56px; } }
.noise { position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ------------------------------------------------------------ layout */
.shell { position: relative; z-index: 1; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px);
  align-items: center; gap: clamp(24px, 6vw, 96px); padding: clamp(20px, 5vw, 72px) clamp(16px, 6vw, 96px); max-width: 1320px; margin: 0 auto; }

/* ------------------------------------------------------------ hero */
.hero { display: flex; flex-direction: column; align-items: flex-start; }
.eye-stage { width: clamp(150px, 20vw, 240px); aspect-ratio: 1; margin-bottom: 18px; position: relative; }
.eye-stage::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(61,214,208,.28), transparent 70%); filter: blur(20px); z-index: -1; animation: glow 5s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .45; transform: scale(1.15); } }
.eye { width: 100%; height: 100%; overflow: visible; }
.eye .ring, .eye .sweep { transform-origin: 120px 120px; transform-box: view-box; }
.eye .r1 { animation: spin 60s linear infinite; }
.eye .r2 { animation: spin 38s linear infinite reverse; }
.eye .sweep { animation: spin 6s linear infinite; }
.eye .lid { stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw 1.6s var(--ease) .15s forwards; }
.eye .iris { transform-origin: 120px 120px; transform-box: view-box; animation: look 9s ease-in-out infinite, blink 7s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes look { 0%, 100% { translate: 0 0; } 25% { translate: 9px -2px; } 55% { translate: -10px 3px; } 75% { translate: 3px 4px; } }
@keyframes blink { 0%, 46%, 50%, 100% { scale: 1 1; } 48% { scale: 1 .1; } }
.word { margin: 0; font-size: clamp(44px, 7vw, 92px); font-weight: 800; letter-spacing: .28em; line-height: 1; padding-left: .02em;
  background: linear-gradient(100deg, #f4f8ff 10%, #9fe9e5 45%, #b7adff 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise .9s var(--ease) both; }
.tag { margin: 14px 0 26px; font-size: clamp(17px, 1.6vw, 21px); color: var(--muted); font-weight: 500; animation: rise .9s var(--ease) .08s both; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; animation: rise .9s var(--ease) .16s both; }
.facts li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14.5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(61,214,208,.7); flex: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------------------------ card */
.card { position: relative; padding: 30px 30px 22px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05); animation: cardin .8s var(--ease) .1s both; }
.card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(61,214,208,.55), transparent 35%, transparent 65%, rgba(139,123,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes cardin { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mini-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .3em; font-size: 12.5px; color: var(--muted); }
.langswitch { display: flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.langswitch button { background: transparent; border: 0; color: var(--muted); font: 700 12px var(--font); letter-spacing: .08em; padding: 7px 12px; min-height: 34px; min-width: 44px; cursor: pointer; }
.langswitch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.steps-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.sd { width: 18px; height: 4px; border-radius: 4px; background: rgba(148,170,210,.2); transition: background .3s, width .3s var(--ease); }
.sd.on { width: 30px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.card h2 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -.01em; outline: none; }
.sub { margin: 6px 0 20px; color: var(--muted); font-size: 14.5px; }

.step { display: grid; gap: 16px; animation: stepin .45s var(--ease) both; }
@keyframes stepin { from { opacity: 0; transform: translateX(16px); } }
.field { display: grid; gap: 7px; }
.field > label { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.input { position: relative; display: flex; align-items: center; }
.input > svg { position: absolute; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .2s; }
input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(4, 9, 20, .65);
  color: var(--text); font: 500 15.5px var(--font); transition: border-color .2s, box-shadow .2s, background .2s; }
.input input { padding-left: 44px; }
.input input[type="password"], .input input.pw { padding-right: 50px; }
input:hover { border-color: rgba(148,170,210,.42); }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(61,214,208,.16); background: rgba(4, 9, 20, .85); }
.input:focus-within > svg { stroke: var(--accent); }
input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(251,113,133,.14); }
.reveal { position: absolute; right: 6px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--faint); cursor: pointer; }
.reveal:hover { color: var(--text); background: rgba(148,170,210,.1); }
.reveal svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reveal .i-hide, .reveal[aria-pressed="true"] .i-show { display: none; }
.reveal[aria-pressed="true"] .i-hide { display: block; }
input.otp { font-family: var(--mono); font-size: 28px; letter-spacing: .5em; text-align: center; padding: 0 0 0 .5em; min-height: 60px; font-weight: 600; }
.hint { margin: 0; font-size: 12.5px; color: var(--faint); }
.hint.caps { color: var(--warn); font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(148,170,210,.06); color: var(--text); font: 700 15px var(--font); cursor: pointer;
  transition: transform .12s, box-shadow .25s, filter .2s, background .2s; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.primary { border: 0; color: #041019; background: linear-gradient(120deg, var(--accent), #5fb8ff 55%, var(--accent-2)); background-size: 160% 100%;
  box-shadow: 0 10px 30px -10px rgba(61,214,208,.65); }
.btn.primary:hover { background-position: 100% 0; box-shadow: 0 14px 36px -8px rgba(61,214,208,.8); filter: brightness(1.05); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); min-height: 40px; }
.btn.ghost:hover { color: var(--text); background: rgba(148,170,210,.08); }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

.msg { padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start;
  background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.35); color: #ffd0d8; animation: shake .4s ease; }
.msg.info { background: rgba(61,214,208,.08); border-color: rgba(61,214,208,.35); color: #c9f5f3; animation: none; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.meter { height: 5px; border-radius: 5px; background: rgba(148,170,210,.14); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--bad); transition: width .35s var(--ease), background .35s; }
.rules { list-style: none; margin: -4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--faint); }
.rules li { display: flex; align-items: center; gap: 8px; }
.rules li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; transition: all .25s; }
.rules li.ok { color: var(--ok); }
.rules li.ok::before { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12l4 4 8-9' fill='none' stroke='%23041019' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat; }

.qrwrap { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
#qr { width: 176px; height: 176px; border-radius: 14px; background: #fff; padding: 6px; box-shadow: 0 0 0 1px var(--line-2), 0 16px 40px -16px rgba(61,214,208,.6); }
.secret { display: grid; gap: 8px; min-width: 0; }
.secret code { font-size: 13.5px; line-height: 1.7; color: var(--text); word-break: break-all; padding: 8px 10px; border-radius: 10px; background: rgba(4,9,20,.6); border: 1px dashed var(--line-2); user-select: all; }

.done { place-items: center; padding: 16px 0 8px; }
.check svg { width: 76px; height: 76px; fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.check circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .6s var(--ease) forwards; }
.check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s var(--ease) .45s forwards; }

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.lock { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--faint); }
.lock svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2; flex: none; }
.card-foot img { height: 12px; width: auto; opacity: .9; }

/* placeholder page for /portal before the client portal is installed */
body.placeholder .card { color: var(--text); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; align-content: start; gap: 22px; padding-top: 28px; }
  .hero { align-items: center; text-align: center; }
  .eye-stage { width: 120px; margin-bottom: 8px; }
  .word { font-size: 44px; }
  .tag { margin: 8px 0 0; }
  .facts { display: none; }
  .card { width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 20px 18px; }
}
@media (max-width: 420px) { .qrwrap { grid-template-columns: 1fr; justify-items: center; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .eye .lid { stroke-dashoffset: 0; }
}
@media (forced-colors: active) { .word { color: CanvasText; background: none; } .card::before { display: none; } }