/* ================================================================
   ArhamFinance — NeoFinance Design System v2
   Electric · Elegant · Tech-Savvy · Fintech-Forward
   Dark-first, glass morphism, vivid indigo-cyan gradient accent
   ================================================================ */

/* ── Elgraine font-face declarations ─────────────────────────── */
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-Thin.otf') format('opentype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-ThinItalic.otf') format('opentype');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-ExtraLight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-ExtraLightItalic.otf') format('opentype');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-MediumItalic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-SemiBoldItalic.otf') format('opentype');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-ExtraBoldItalic.otf') format('opentype');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Elgraine';src:url('../fonts/Elgraine-BlackItalic.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}

/* ── Font system: Aptos body + Elgraine headings ─────────────── */
/* Aptos is a system font on Windows 11+; falls back to Segoe UI / Calibri */

/* ── Light Theme (default) ─────────────────────────────────── */
:root {
  --font:         'Aptos', 'Segoe UI Variable', 'Segoe UI', Calibri, system-ui, sans-serif;
  --font-heading: 'Elgraine', serif;

  --bg:        #f2f8f7;
  --surface:   #ffffff;
  --surface-2: #eaf5f4;
  --surface-3: #ddf0ee;
  --text:      #06091c;
  --muted:     #4a5472;

  --border:      rgba(2, 142, 132, .16);
  --border-glow: rgba(2, 142, 132, .44);

  --shadow:     0 28px 80px rgba(2, 142, 132, .16);
  --shadow-sm:  0 6px 24px rgba(2, 142, 132, .10);
  --shadow-up:  0 -12px 40px rgba(2, 142, 132, .08);

  /* Arham Finance teal brand system */
  --primary:   #028e84;   /* logo teal             */
  --primary-2: #03c4ac;   /* lighter teal          */
  --accent:    #028e84;   /* teal accent           */
  --success:   #10b981;   /* green                 */
  --danger:    #ef4444;   /* red                   */
  --gold:      #f59e0b;   /* amber                 */

  --ring:   rgba(2, 142, 132, .32);
  --glow:   0 0 40px rgba(2, 142, 132, .22), 0 0 80px rgba(2, 142, 132, .10);

  --radius:    22px;
  --radius-sm: 16px;
  --radius-xs: 12px;
}

/* ── Dark Theme ────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:        #030712;
  --surface:   #07102a;
  --surface-2: #0c1835;
  --surface-3: #111e3e;
  --text:      #e8eeff;
  --muted:     #7b8baa;

  --border:      rgba(2, 142, 132, .24);
  --border-glow: rgba(2, 142, 132, .58);

  --shadow:     0 28px 80px rgba(0, 0, 0, .80);
  --shadow-sm:  0 6px 24px rgba(0, 0, 0, .60);
  --shadow-up:  0 -12px 40px rgba(0, 0, 0, .50);

  --ring:   rgba(2, 142, 132, .42);
  --glow:   0 0 40px rgba(2, 142, 132, .32), 0 0 80px rgba(2, 142, 132, .16);
}

/* ── Global Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

/* overflow-x on BOTH html + body — required for iOS Safari */
html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /* Ambient gradient backdrop — fixed so it doesn't scroll */
  background:
    radial-gradient(ellipse 2000px 1400px at -10% -10%, rgba(2, 142, 132, .10), transparent 60%),
    radial-gradient(ellipse 1400px 1000px at 110%  0%,  rgba(3, 196, 172, .07),  transparent 60%),
    radial-gradient(ellipse 1000px 800px  at  55% 110%, rgba(2, 142, 132, .05),  transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 2000px 1400px at -10% -10%, rgba(2, 142, 132, .20), transparent 60%),
    radial-gradient(ellipse 1400px 1000px at 110%  0%,  rgba(3, 196, 172, .11),  transparent 60%),
    radial-gradient(ellipse 1000px 800px  at  55% 110%, rgba(2, 142, 132, .09),  transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ── Heading font: Elgraine for all h-levels ────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .lux-title,
.hero-v2__h1, .svc-head__text h2 {
  font-family: var(--font-heading);
}

/* Text inherits from its component; theme tokens remain defined above. */
html { color: var(--text); }

/* ── Light theme overrides for hardcoded-dark components ──────── */
html[data-theme="light"] .float-calc-panel {
  background: rgba(255,255,255,.97);
  border-color: rgba(2,142,132,.18);
  box-shadow: 0 24px 64px rgba(2,142,132,.14), 0 0 0 1px rgba(2,142,132,.06);
}
html[data-theme="light"] .float-calc-panel .fc-input-wrap {
  border-color: rgba(0,0,0,.1);
  background: rgba(0,0,0,.025);
}
html[data-theme="light"] .float-calc-panel .fc-seg-btn {
  border-color: rgba(0,0,0,.1);
  color: rgba(0,0,0,.55);
}
html[data-theme="light"] .float-calc-panel .fc-seg-btn.on {
  background: rgba(2,142,132,.14);
  border-color: rgba(2,142,132,.4);
  color: var(--primary);
}
html[data-theme="light"] .float-calc-panel__close {
  color: rgba(0,0,0,.45);
}
html[data-theme="light"] .float-calc-panel__close:hover {
  color: #000;
  background: rgba(0,0,0,.06);
}
html[data-theme="light"] .float-calc-btn__label {
  background: rgba(255,255,255,.97);
  color: #06091c;
  border-color: rgba(2,142,132,.22);
}
/* Starfield hidden in light mode */
html[data-theme="light"] #starfieldCanvas { opacity: 0; }
/* Mob nav light */
html[data-theme="light"] .mob-nav {
  background: #ffffff;
  border-right-color: rgba(2,142,132,.14);
  box-shadow: 8px 0 48px rgba(0,0,0,.12);
}
html[data-theme="light"] .mob-nav__header { background: #ffffff; }
html[data-theme="light"] .mob-nav__cta    { background: #ffffff; }

/* ── Layout ────────────────────────────────────────────────── */
.container {
  width: min(1600px, calc(100% - 48px));
  margin: 0 auto;
}

/* ── Utilities ─────────────────────────────────────────────── */
.muted   { color: var(--muted); }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.mt      { margin-top: 14px; }
.hide-sm { display: inline; }

@media (max-width: 720px) { .hide-sm { display: none; } }