/* =============================================================================
   SECULOGIX OVSE — premium.css
   Editorial luxury · obsidian + Seculogix orange
   -----------------------------------------------------------------------------
   Typography: EB Garamond (display serif), Manrope (body), JetBrains Mono (code)
   All fonts are self-hosted under /assets/fonts to keep the page CSP-compatible
   in strict enterprise environments.
   Palette:    near-black / Seculogix orange (#f5a14b) / slate grey (#58595b)
   ========================================================================== */

/* ---- 0. Self-hosted fonts ------------------------------------------------ */

@font-face {
    font-family: 'EB Garamond 08';
    src: url('../fonts/EBGaramond08-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'EB Garamond 12';
    src: url('../fonts/EBGaramond12-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'EB Garamond 12';
    src: url('../fonts/EBGaramond12-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---- 1. Reset + tokens ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

:root {
    /* Surfaces — light theme aligned to the logo's white canvas ---- */
    --bg-0:        #f6f7f9;   /* page */
    --bg-1:        #ffffff;   /* cards */
    --bg-2:        #eef0f3;   /* insets */
    --bg-3:        #e4e6ea;

    /* Foreground — slate greys from the logo's "SECU" -------------- */
    --ink-1:       #2d2e33;   /* primary (headings) */
    --ink-2:       #54565f;   /* body */
    --ink-3:       #898b93;   /* muted */
    --ink-4:       #b6b8c0;   /* near-disabled */

    /* Accent — Seculogix orange (kept under --gold-* names to avoid churn) */
    --gold:        #f5a14b;   /* brand orange */
    --gold-soft:   #f8b978;   /* lighter */
    --gold-deep:   #e07b2e;   /* deeper, for gradients */
    --gold-glow:   rgba(245, 161, 75, 0.20);

    /* Semantic --------------------------------------------------- */
    --success:     #8faf76;
    --danger:      #c97460;
    --warning:     #f5a14b;

    /* Hairlines -------------------------------------------------- */
    --line:        rgba(40, 42, 55, 0.12);
    --line-gold:   rgba(245, 161, 75, 0.45);

    /* Radii ------------------------------------------------------ */
    --r-sm:        6px;
    --r-md:        14px;
    --r-lg:        22px;
    --r-xl:        32px;

    /* Fonts ------------------------------------------------------ */
    --f-display:   'EB Garamond 08', 'EB Garamond', ui-serif, Georgia, 'Times New Roman', serif;
    --f-display-text: 'EB Garamond 12', 'EB Garamond', ui-serif, Georgia, 'Times New Roman', serif;
    --f-body:      'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --f-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Shadows ---------------------------------------------------- */
    --shadow-soft: 0 10px 30px rgba(30, 35, 50, 0.08);
    --shadow-lift: 0 24px 60px rgba(30, 35, 50, 0.13);
}

/* ---- 2. Body + atmosphere ------------------------------------------------- */

body {
    min-height: 100vh;
    background: var(--bg-0);
    color: var(--ink-1);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
}

/* Layered atmospheric gradients — top-left champagne glow, bottom-right deep */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 800px at 10% 0%, rgba(245, 161, 75, 0.08), transparent 55%),
        radial-gradient(900px  700px at 95% 100%, rgba(224, 123, 46, 0.05), transparent 60%),
        radial-gradient(700px  700px at 50% 110%, rgba(255, 255, 255, 0.02), transparent 60%);
    z-index: -2;
}

/* Grain — SVG turbulence rendered inline, ~3% opacity, covers everything */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 0.92 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.02;
    mix-blend-mode: multiply;
    z-index: -1;
}

/* ---- 3. Typography scales ------------------------------------------------- */

h1, h2, h3 {
    font-family: var(--f-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 0;
}

h1 { font-size: clamp(1.85rem, 2.9vw, 2.75rem); }
h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; }

/* Editorial display — italicised accent word */
.display em {
    font-family: var(--f-display-text);
    font-style: italic;
    color: var(--gold-deep);
    font-weight: 400;
}

/* Micro-label (small caps, wide letter-spacing) */
.kicker {
    font-family: var(--f-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--gold);
}

.kicker-ink {
    color: var(--ink-3);
}

/* Roman-numeral section marker */
.numeral {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    color: var(--gold);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    padding-right: 0.6rem;
    border-right: 1px solid var(--line-gold);
    margin-right: 0.6rem;
}

.lede {
    font-family: var(--f-display-text);
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.45;
    color: var(--ink-2);
    letter-spacing: -0.005em;
}

.prose {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 58ch;
}

.mono {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* Hairline divider */
.hairline {
    height: 1px;
    background: var(--line-gold);
    border: 0;
    margin: 0;
}

/* ---- 4. Reusable components ---------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 180ms ease, box-shadow 220ms ease, background 180ms ease;
    will-change: transform;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #1a1612;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 14px 30px rgba(245, 161, 75, 0.22);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 18px 38px rgba(245, 161, 75, 0.30);
}
.btn-primary:active {
    transform: translateY(0);
}

.btn-ghost {
    color: var(--ink-1);
    border: 1px solid var(--line-gold);
    background: transparent;
}
.btn-ghost:hover {
    background: rgba(245, 161, 75, 0.06);
    border-color: var(--gold);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid var(--line-gold);
    color: var(--gold);
    background: rgba(245, 161, 75, 0.04);
}

.pill-success {
    color: var(--success);
    border-color: rgba(143, 175, 118, 0.35);
    background: rgba(143, 175, 118, 0.06);
}

.pill-danger {
    color: var(--danger);
    border-color: rgba(201, 116, 96, 0.35);
    background: rgba(201, 116, 96, 0.06);
}

.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

/* Glass card (subtle) */
.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.002));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow-soft);
    position: relative;
}

.card::before {
    /* champagne top-edge hairline */
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-gold) 20%, var(--line-gold) 80%, transparent);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* ---- 5. Top-level layouts ------------------------------------------------- */

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Split (login) -------- */
.split {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    min-height: 100vh;
}

.split__hero {
    position: relative;
    padding: clamp(2rem, 3.5vw, 3.25rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--line);
}

.split__hero::after {
    /* vertical gold gradient stripe on the right hairline */
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    right: -1px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--gold-glow), transparent);
    pointer-events: none;
}

.split__panel {
    padding: clamp(2rem, 4vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    position: relative;
}

/* --- Centered (QR, error) -------- */
.centered {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1.5rem, 4vw, 3rem);
    gap: 1rem;
}

/* ---- 6. Brand + nav ------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--ink-1);
}

.brand__mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.brand__name {
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.brand__tag {
    display: block;
    font-family: var(--f-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 2px;
}

.topnav {
    width: 100%;
    padding: 1rem clamp(1.5rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
}

.topnav__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.topnav__user {
    color: var(--ink-2);
    font-size: 0.85rem;
}

.topnav__user strong {
    color: var(--ink-1);
    font-weight: 600;
}

.topnav__logout {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    transition: color 160ms ease;
}
.topnav__logout:hover { color: var(--gold); }

/* ---- 7. Login specifics --------------------------------------------------- */

.hero-title {
    margin-top: auto;
    max-width: 22ch;
}

.hero-lede {
    margin-top: 1.25rem;
    max-width: 50ch;
}

.hero-foot {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: var(--ink-3);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-foot__dot {
    width: 4px; height: 4px; border-radius: 999px;
    background: var(--gold); opacity: 0.6;
}

.login-card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 2.25rem 2rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
    position: relative;
}

.login-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.login-header {
    margin-bottom: 1.75rem;
}

.login-header h2 {
    margin-top: 0.75rem;
}

.field {
    display: block;
    margin-bottom: 1.15rem;
}

.field__label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.45rem;
    font-weight: 600;
}

.field__input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink-1);
    font-family: var(--f-body);
    font-size: 0.95rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field__input:focus {
    outline: none;
    border-color: var(--gold);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--gold-glow);
}
.field__input::placeholder { color: var(--ink-4); }

.alert {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border-radius: var(--r-md);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}
.alert-danger {
    color: var(--danger);
    background: rgba(201, 116, 96, 0.08);
    border: 1px solid rgba(201, 116, 96, 0.28);
}

.login-foot {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--ink-3);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* ---- 8. QR page ----------------------------------------------------------- */

.qr-header {
    max-width: 720px;
    text-align: center;
}

.qr-header .kicker {
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.qr-frame {
    position: relative;
    padding: 1rem;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, #ffffff, #f4f4f6);
    box-shadow:
        0 0 0 1px var(--gold),
        0 0 60px var(--gold-glow),
        var(--shadow-lift);
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-frame::before,
.qr-frame::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid var(--gold);
}
.qr-frame::before {
    top: -8px; left: -8px;
    border-right: none; border-bottom: none;
}
.qr-frame::after {
    bottom: -8px; right: -8px;
    border-left: none; border-top: none;
}

.qr-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    /* Keep QR modules crisp when scaled up so mobile cameras read it reliably */
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
}

/* Soft pulsing glow halo around the frame while waiting */
.qr-frame--waiting {
    animation: qrPulse 2.6s ease-in-out infinite;
}

@keyframes qrPulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 0 60px var(--gold-glow), var(--shadow-lift); }
    50%      { box-shadow: 0 0 0 1px var(--gold), 0 0 110px rgba(245, 161, 75, 0.35), var(--shadow-lift); }
}

.qr-caption {
    text-align: center;
    color: var(--ink-2);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.qr-caption .dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold-glow);
    animation: dotBlink 1.4s ease-in-out infinite;
}

@keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.store-row {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.75rem;
}

.store-row__label {
    color: var(--ink-3);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-right: 0.5rem;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    transition: transform 180ms ease, opacity 180ms ease;
    opacity: 0.85;
}
.store-btn:hover { transform: translateY(-2px); opacity: 1; }
.store-btn svg,
.store-btn img { height: 48px; width: auto; display: block; }

.txn-chip {
    color: var(--ink-3);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-2);
}
.txn-chip strong {
    color: var(--gold);
    font-weight: 500;
    margin-right: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

/* ---- 9. Result page ------------------------------------------------------- */

.result {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
}

.result-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.result-head__title h1 {
    margin-top: 0.5rem;
    font-size: clamp(1.65rem, 2.8vw, 2.4rem);
}

.result-head__meta {
    color: var(--ink-3);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.result-head__meta div + div { margin-top: 0.35rem; }

.kyc {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.kyc-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.kyc-photo__ring {
    width: 180px;
    height: 180px;
    border-radius: 999px;
    padding: 4px;
    background: conic-gradient(from 210deg, var(--gold), var(--gold-deep), var(--gold));
    box-shadow: 0 0 0 1px rgba(245, 161, 75, 0.25), 0 20px 40px rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
}

.kyc-photo__img {
    width: 100%; height: 100%; border-radius: 999px;
    background-color: var(--bg-2);
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
}

.kyc-photo__placeholder {
    color: var(--ink-3);
    font-family: var(--f-display);
    font-style: italic;
    font-size: 3rem;
    text-transform: uppercase;
}

.kyc-name {
    font-family: var(--f-display);
    font-size: 1.4rem;
    text-align: center;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.kyc-fields {
    display: flex;
    flex-direction: column;
}

.kyc-row {
    display: grid;
    grid-template-columns: minmax(130px, 170px) 1fr;
    gap: 1.25rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.kyc-row:last-child { border-bottom: none; }
.kyc-row:first-child { padding-top: 0; }

.kyc-row__label {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}

.kyc-row__value {
    font-size: 0.98rem;
    color: var(--ink-1);
    letter-spacing: -0.005em;
    word-break: break-word;
}

.kyc-row__value--empty {
    color: var(--ink-4);
    font-style: italic;
    font-family: var(--f-display);
    font-weight: 400;
}

.result-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

/* Error state */
.error-state {
    text-align: center;
    max-width: 520px;
    margin: 2rem auto;
    padding: 3rem 2rem;
}

.error-state__icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.5rem;
    border-radius: 999px;
    border: 1px solid rgba(201, 116, 96, 0.35);
    background: rgba(201, 116, 96, 0.06);
    display: flex; align-items: center; justify-content: center;
    color: var(--danger);
}

.error-state__icon svg { width: 38px; height: 38px; }

.error-state__code {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.8rem;
    color: var(--danger);
    letter-spacing: 0.1em;
}

/* ---- 10. Page-load reveal animation -------------------------------------- */

.reveal > * {
    opacity: 0;
    transform: translateY(12px);
    animation: revealUp 700ms cubic-bezier(0.2, 0.7, 0.15, 1) forwards;
}
.reveal > *:nth-child(1) { animation-delay: 60ms; }
.reveal > *:nth-child(2) { animation-delay: 140ms; }
.reveal > *:nth-child(3) { animation-delay: 220ms; }
.reveal > *:nth-child(4) { animation-delay: 300ms; }
.reveal > *:nth-child(5) { animation-delay: 380ms; }
.reveal > *:nth-child(6) { animation-delay: 460ms; }
.reveal > *:nth-child(7) { animation-delay: 540ms; }
.reveal > *:nth-child(8) { animation-delay: 620ms; }

@keyframes revealUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ---- 11. Responsive breakpoints ----------------------------------------- */

@media (max-width: 900px) {
    .split {
        grid-template-columns: 1fr;
    }
    .split__hero {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding-top: 3.5rem;
        padding-bottom: 3rem;
    }
    .split__hero::after { display: none; }
    .hero-title { margin-top: 2rem; }

    .kyc {
        grid-template-columns: 1fr;
    }
    .kyc-photo { margin-bottom: 1.5rem; }

    .result-head { align-items: flex-start; }
}

@media (max-width: 600px) {
    .qr-frame { width: min(86vw, 320px); height: min(86vw, 320px); padding: 0.9rem; }
    .login-card { padding: 2rem 1.5rem; }
    .topnav { padding: 0.85rem 1.25rem; }
    .kyc-photo__ring { width: 160px; height: 160px; }
    .kyc-row { grid-template-columns: 1fr; gap: 0.35rem; padding: 0.85rem 0; }
    .kyc-row__value { font-size: 0.95rem; }
    .store-row { flex-direction: column; gap: 0.85rem; }
}

/* ---- 12. Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    .reveal > * { opacity: 1; transform: none; }
    .qr-frame--waiting { animation: none; }
}

/* =============================================================================
   13. SECULOGIX REVAMP — wordmark lockup, dotted backdrop, fresh layouts
   ========================================================================== */

/* ---- Wordmark: SECU (slate) · L [dotted-O] GIX (orange) · TM ------------- */
.wm {
    display: inline-flex;
    align-items: center;
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--ink-1);
    user-select: none;
}
.wm__secu { color: #7f8086; }                 /* slate grey, from the logo */
.wm__l, .wm__gix { color: var(--gold); }       /* Seculogix orange */
.wm__o {
    width: 0.80em;
    height: 0.80em;
    margin: 0 0.02em;
    transform: translateY(0.04em);
}
.wm__tm {
    font-size: 0.34em;
    font-weight: 700;
    color: var(--gold);
    align-self: flex-start;
    margin-left: 0.18em;
    margin-top: 0.15em;
}
.wm--sm { font-size: 1.25rem; }

/* ---- Shared dotted-grid + glow backdrop --------------------------------- */
.dotbg::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(1100px 700px at 12% -5%, rgba(245, 161, 75, 0.10), transparent 55%),
        radial-gradient(900px 700px at 100% 105%, rgba(224, 123, 46, 0.07), transparent 60%),
        radial-gradient(rgba(245, 161, 75, 0.085) 1px, transparent 1px);
    background-size: auto, auto, 24px 24px;
}

/* ---- Auth (sign-in) — centered single card ------------------------------ */
.auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    gap: 1.25rem;
}

.auth-card {
    width: 100%;
    max-width: 412px;
    padding: 2.5rem 2.25rem 2.25rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lift);
    position: relative;
}
.auth-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--gold-deep), transparent);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.auth-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; }

.wm-rule {
    height: 1px; border: 0; margin: 0 0 1.5rem;
    background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
}

.auth-title {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--ink-1);
    margin: 0;
}
.auth-sub {
    text-align: center;
    color: var(--ink-3);
    font-size: 0.85rem;
    margin: 0.4rem 0 1.6rem;
}

.auth-form .field:last-of-type { margin-bottom: 1.4rem; }

.auth-foot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-3);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}
.auth-foot svg { width: 13px; height: 13px; stroke: var(--gold); opacity: 0.8; }

/* ---- Refreshed top nav (wordmark) --------------------------------------- */
.nav2 {
    width: 100%;
    padding: 1rem clamp(1.25rem, 4vw, 2.75rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
}
.nav2__right { display: flex; align-items: center; gap: 1.25rem; }
.nav2__user { color: var(--ink-2); font-size: 0.82rem; }
.nav2__user strong { color: var(--ink-1); font-weight: 600; }
.nav2__logout {
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-3); transition: color 160ms ease;
}
.nav2__logout:hover { color: var(--gold); }

/* ---- Section heading (no roman numerals / jargon) ----------------------- */
.eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 0.6rem;
}
.lead {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--ink-1);
    margin: 0;
}
.subtle {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 56ch;
    margin: 0.85rem auto 0;
}

@media (max-width: 600px) {
    .auth-card { padding: 2rem 1.5rem; }
    .wm { font-size: 1.5rem; }
}

/* ---- Seculogix 7-dot loader (loading + waiting) ------------------------- */
.slx-loader { display: block; }
.slx-loader circle {
    fill: var(--gold);
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: slxPulse 1.3s ease-in-out infinite;
}
@keyframes slxPulse {
    0%, 100% { opacity: 0.18; transform: scale(0.55); }
    50%      { opacity: 1;    transform: scale(1); }
}

/* Inline waiting loader inside the QR caption */
.slx-loader--xs { width: 26px; height: 26px; flex-shrink: 0; }

/* Full-screen loading overlay (shown on redirect to result) */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background: rgba(246, 247, 249, 0.9);
    backdrop-filter: blur(8px);
}
.loading-overlay[hidden] { display: none; }
.loading-overlay .slx-loader { width: 72px; height: 72px; }
.loading-overlay__text {
    color: var(--ink-2);
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .slx-loader circle { animation-duration: 0.001ms !important; opacity: 1; transform: none; }
}

/* ---- Real logo on a clean brand plate (readable on dark) ---------------- */
.logo-plate {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.logo-plate img { height: 40px; width: auto; display: block; }
.logo-plate--lg { padding: 0; }
.logo-plate--lg img { height: 72px; }

/* ---- Landing (login) split — hero + sign-in ---------------------------- */
.lp { min-height: 100vh; display: grid; grid-template-columns: 1.12fr 0.88fr; }

.lp__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    padding: clamp(2rem, 5vw, 4.5rem);
    border-right: 1px solid var(--line);
}
.lp__hero::after {
    content: '';
    position: absolute; top: 18%; bottom: 18%; right: -1px; width: 1px;
    background: linear-gradient(180deg, transparent, var(--gold-glow), transparent);
}

.lp__panel {
    display: flex; align-items: center; justify-content: center;
    padding: clamp(2rem, 4vw, 3.25rem);
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

.hero-h1 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink-1);
    margin: 0;
    max-width: 16ch;
}
.hero-h1 em { color: var(--gold-deep); font-style: normal; }

.hero-lede2 {
    color: var(--ink-2);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.6;
    max-width: 52ch;
    margin: 0;
}

/* Feature rows with the dotted-mark bullet */
.feats { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 0.25rem; }
.feat { display: flex; gap: 0.95rem; align-items: flex-start; }
.feat__ico {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245, 161, 75, 0.10);
    border: 1px solid var(--line-gold);
}
.feat__ico svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; }
.feat__t { color: var(--ink-1); font-weight: 700; font-size: 0.95rem; }
.feat__d { color: var(--ink-2); font-size: 0.88rem; line-height: 1.5; margin-top: 1px; }

.hero-trust {
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
    color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-trust .d { width: 4px; height: 4px; border-radius: 999px; background: var(--gold); opacity: 0.7; }

@media (max-width: 900px) {
    .lp { grid-template-columns: 1fr; }
    .lp__hero { border-right: none; border-bottom: 1px solid var(--line); padding-top: 3rem; padding-bottom: 2.5rem; }
    .lp__hero::after { display: none; }
}