/*
Copyright (c) 2026 Will (methaxx19)

Project:
ZINA AI Assistant

Designed & Architected by
Will (methaxx19)

All rights reserved.

This software, its architecture, documentation,
design, concepts and substantial portions of the
implementation are proprietary.

Unauthorized copying, redistribution, commercial
reuse or creation of derivative commercial works
without written permission is prohibited.
*/

:root {
  color-scheme: dark;
  --purple: #903087;
  --deep: #271329;
  --deep-2: #130b16;
  --violet: #6f246a;
  --gold: #d8b36a;
  --text: #fff8ff;
  --soft: rgba(255, 248, 255, 0.68);
  --line: rgba(255, 255, 255, 0.12);
  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.13);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: Outfit, Inter, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 76% 22%, rgba(216, 179, 106, 0.18), transparent 24%),
    radial-gradient(circle at 13% 18%, rgba(144, 48, 135, 0.36), transparent 30%),
    linear-gradient(135deg, var(--deep-2) 0%, #211026 44%, #0f0a12 100%);
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.landing-page {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100svh;
  min-height: 620px;
  padding: clamp(22px, 3vw, 42px);
  opacity: 0;
  animation: landing-fade 640ms var(--ease) forwards;
}

.platform-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 385px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  width: min(1200px, 100%);
  min-height: 0;
  margin: 0 auto;
}

.platform-copy { display: grid; gap: clamp(20px, 3vh, 30px); min-width: 0; }
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-lockup > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--purple), var(--violet));
  box-shadow: 0 15px 36px rgba(144, 48, 135, 0.3), inset 0 1px rgba(255,255,255,.2);
  font-weight: 800;
}
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { font-size: 18px; letter-spacing: .05em; }
.brand-lockup small { margin-top: 3px; color: var(--soft); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow {
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--gold) 80%, white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-line h1 {
  margin: 0;
  font-size: clamp(42px, 5.3vw, 76px);
  line-height: .94;
  letter-spacing: -.055em;
}
.hero-line > p:last-child {
  max-width: 550px;
  margin: 18px 0 0;
  color: var(--soft);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.55;
}

.platform-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.platform-cards article, .login-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--glass-strong), rgba(255,255,255,.055));
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}
.platform-cards article { min-height: 132px; padding: 17px; overflow: hidden; border-radius: 19px; isolation: isolate; background: rgba(255, 255, 255, .075); backdrop-filter: none; transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease); }
.platform-cards article:hover, .platform-cards article:focus-within { transform: translateY(-1px); border-color: rgba(216, 179, 106, .34); background: rgba(255, 255, 255, .095); }
.platform-cards span {
  display: inline-flex;
  margin-bottom: 13px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
}
.platform-cards h2 { margin: 0; font-size: 14px; }
.platform-cards p { margin: 8px 0 0; color: var(--soft); font-size: 11px; line-height: 1.55; }

.login-shell { display: flex; justify-content: center; }
.login-card { width: 100%; padding: 26px; border-radius: 24px; }
.login-card-head h2 { margin: 8px 0; font-size: 29px; letter-spacing: -.04em; }
.login-card-head p, .login-message { margin: 0; color: var(--soft); line-height: 1.55; }
.login-form { display: grid; gap: 13px; margin-top: 22px; }
.login-form label { display: grid; gap: 7px; }
.login-form span { color: var(--soft); font-size: 12px; font-weight: 700; }
.login-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255,255,255,.08);
  font: inherit;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}
.login-form input:focus-visible {
  outline: 0;
  border-color: rgba(216,179,106,.65);
  box-shadow: 0 0 0 4px rgba(216,179,106,.12);
  background: rgba(255,255,255,.11);
}
.login-form button {
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #9f3a95, #6f246a);
  box-shadow: 0 18px 42px rgba(144,48,135,.28);
  cursor: pointer;
  font: inherit;
  font-weight: 760;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), opacity 180ms var(--ease);
}
.login-form button:hover, .login-form button:focus-visible { transform: translateY(-1px); box-shadow: 0 24px 52px rgba(144,48,135,.34); }
.login-form button[data-loading="true"] { opacity: .78; }
.login-message { min-height: 20px; font-size: 12px; }
.secure-note { display: flex; gap: 7px; align-items: center; margin: 3px 0 0; color: rgba(255,248,255,.56); font-size: 10px; line-height: 1.45; }
.secure-note span { color: var(--gold); }

.landing-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: rgba(255,248,255,.46);
  font-size: 11px;
}
.landing-footer strong { color: rgba(255,248,255,.78); }

@keyframes landing-fade { to { opacity: 1; } }

@media (max-width: 980px) {
  body { overflow-y: auto; }
  .landing-page { height: auto; min-height: 100vh; padding: 22px; }
  .platform-shell { grid-template-columns: 1fr; min-height: auto; }
  .platform-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .landing-page { padding: 16px; }
  .hero-line h1 { font-size: 72px; }
  .landing-footer { flex-wrap: wrap; padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page { animation: none; opacity: 1; }
  .platform-cards article:hover, .platform-cards article:focus-within { transform: none; }
  *, *::before, *::after { transition: none !important; }
}