/* Ported 1:1 from portal/index.html — LMS login landing */
/* ============================================================
   THE SEXTING OPERATOR'S BIBLE — MEMBER PORTAL HOMEPAGE
   Dark-luxury course portal. One theme (dark), one accent (rose),
   gold used only as a rare highlight.
   Shape rule (locked): panels/cards 18px · inputs/buttons 12px ·
   tags full-pill. Applied everywhere.
   ============================================================ */

:root {
  /* Surfaces — off-black plum, never pure #000 */
  --bg:         #100810;
  --bg-2:       #17091a;
  --surface:    #1e0f24;
  --surface-2:  #271531;
  --line:       #3a2140;
  --line-soft:  rgba(255,255,255,0.07);

  /* Accent — rose is THE accent. Gold is a rare highlight only. */
  --rose:       #d24d84;
  --rose-hi:    #e97ca7;
  --rose-deep:  #8a2b5e;
  --rose-soft:  #e7a6c4;
  --gold:       #c9a24a;

  /* Text on dark */
  --text:       #f1e6ef;
  --text-mut:   #bd9cb5;
  --text-dim:   #856b82;

  /* Type */
  --serif: "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono:  "SF Mono", "Menlo", "Monaco", "Courier New", monospace;

  /* Radius (locked scale) */
  --r-panel: 18px;
  --r-field: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- Aurora + grain ambient (fixed, pointer-events-none) ---- */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 55% at 18% 8%, rgba(210,77,132,0.16), transparent 60%),
    radial-gradient(50% 50% at 88% 12%, rgba(138,43,94,0.20), transparent 62%),
    radial-gradient(55% 60% at 75% 92%, rgba(80,30,90,0.22), transparent 60%),
    radial-gradient(45% 45% at 8% 88%, rgba(201,162,74,0.06), transparent 60%);
}
.ambient::after {
  content: ""; position: absolute; inset: -20%;
  background-image: radial-gradient(rgba(255,255,255,0.5) 0.4px, transparent 0.5px);
  background-size: 3px 3px;
  opacity: 0.025;
  animation: drift 22s linear infinite;
}
@keyframes drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-3px,-3px,0); }
}
@media (prefers-reduced-motion: reduce) { .ambient::after { animation: none; } }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* ---- Reveal on scroll ---- (progressive enhancement: visible by default,
   only hidden once JS confirms it can animate + reveal them back in) ---- */
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================ NAV ============================ */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(16,8,16,0.62);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.monogram {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(150deg, var(--rose), var(--rose-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 18px rgba(138,43,94,0.35);
}
.brand-name { font-family: var(--serif); font-size: 17px; letter-spacing: 0.2px; }
.brand-name b { font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--text-mut); text-decoration: none; font-size: 14px; letter-spacing: 0.2px;
  transition: color 0.25s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none;
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--text); text-decoration: none;
  padding: 9px 18px; border-radius: var(--r-field);
  border: 1px solid var(--line); background: rgba(255,255,255,0.03);
  transition: transform 0.2s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.brand-name { white-space: nowrap; }
.nav-cta:hover { border-color: var(--rose); background: rgba(210,77,132,0.10); }
.nav-cta:active { transform: translateY(1px); }

/* ============================ HERO ============================ */
.hero { padding: 74px 0 88px; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--rose-soft); font-weight: 600;
  margin-bottom: 26px;
}
.eyebrow .lock { width: 13px; height: 13px; color: var(--rose); }
.hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(44px, 6.4vw, 82px); line-height: 0.98; letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 24px;
  overflow-wrap: break-word;
}
.hero-copy, .login { min-width: 0; max-width: 100%; }
.hero h1 .accent {
  font-style: italic; font-weight: 700;
  background: linear-gradient(120deg, var(--rose-hi), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em;
}
.hero p.lede {
  font-size: 18px; line-height: 1.65; color: var(--text-mut);
  max-width: 46ch; margin-bottom: 34px;
}
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-note { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 9px; }
.hero-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex:none; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.2px;
  color: #fff; text-decoration: none; cursor: pointer;
  padding: 14px 26px; border-radius: var(--r-field); border: none;
  background: linear-gradient(140deg, var(--rose), var(--rose-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 30px rgba(138,43,94,0.36);
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 18px 40px rgba(138,43,94,0.5); }
.btn-primary:active { transform: translateY(0) scale(0.985); }
.btn-primary .arw { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.btn-primary:hover .arw { transform: translateX(3px); }

/* ---- Login card (glass panel) ---- */
.login {
  position: relative; isolation: isolate;
  border-radius: var(--r-panel);
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(30,15,36,0.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 30px 70px rgba(0,0,0,0.5);
  padding: 34px 34px 30px;
}
.login::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(80% 60% at 22% 0%, rgba(210,77,132,0.20), transparent 60%);
  pointer-events: none;
}
.login-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.login h2 { font-family: var(--serif); font-size: 24px; font-weight: 700; color: #fff; letter-spacing: 0.1px; }
.login .tier {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--gold); border: 1px solid rgba(201,162,74,0.4); border-radius: 999px; padding: 4px 10px;
}
.login .sub { font-size: 13.5px; color: var(--text-dim); margin-bottom: 24px; }

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-mut); margin-bottom: 8px;
}
.field input {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-field); padding: 13px 15px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.field input::placeholder { color: var(--text-dim); }
.field input:focus {
  outline: none; border-color: var(--rose);
  background: rgba(210,77,132,0.06);
  box-shadow: 0 0 0 3px rgba(210,77,132,0.20);
}
.field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.remember { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-mut); cursor: pointer; user-select: none; }
.remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.remember .box {
  width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.04); display: grid; place-items: center; transition: all 0.2s var(--ease);
}
.remember .box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(0.6); transition: all 0.2s var(--ease); }
.remember input:checked + .box { background: var(--rose); border-color: var(--rose); }
.remember input:checked + .box svg { opacity: 1; transform: scale(1); }
.remember input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(210,77,132,0.25); }
.link { color: var(--rose-soft); text-decoration: none; font-size: 13px; transition: color 0.2s var(--ease); }
.link:hover { color: var(--rose-hi); text-decoration: underline; }

.login .btn-primary { width: 100%; padding: 15px; font-size: 15px; }
.login-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-dim); text-align: center; }
.login-foot a { margin-left: 4px; }

/* ============================ STAT BAND ============================ */
.stats { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 30px 0; }
.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stat { text-align: center; padding: 4px 8px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: var(--line-soft); }
.stat .n { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; color: #fff; line-height: 1; }
.stat .n span { color: var(--rose); }
.stat .l { font-size: 12px; letter-spacing: 0.06em; color: var(--text-dim); margin-top: 10px; text-transform: uppercase; }

/* ============================ SECTION SHELL ============================ */
section.block { padding: 96px 0; position: relative; }
.sec-head { max-width: 640px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: #fff; line-height: 1.05; letter-spacing: -0.4px; margin-bottom: 18px; }
.sec-head p { font-size: 17px; color: var(--text-mut); line-height: 1.6; max-width: 60ch; }
.sec-head.center p { margin: 0 auto; }

/* ============================ CURRICULUM (bento) ============================ */
.curriculum { background: linear-gradient(180deg, transparent, rgba(23,9,26,0.6) 40%, transparent); }
.modules {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.mod {
  position: relative; border-radius: var(--r-panel);
  border: 1px solid var(--line); background: var(--surface);
  padding: 26px 24px 24px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  overflow: hidden;
}
.mod:hover { transform: translateY(-4px); border-color: rgba(210,77,132,0.5); background: var(--surface-2); }
.mod .num { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--rose); letter-spacing: 0.5px; margin-bottom: 14px; display: block; }
.mod h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.15; margin-bottom: 10px; }
.mod p { font-size: 14px; color: var(--text-dim); line-height: 1.55; }

/* Featured module cell spans 2 cols, gradient treatment */
.mod.feature {
  grid-column: span 2;
  background:
    linear-gradient(150deg, rgba(210,77,132,0.16), rgba(138,43,94,0.05)),
    var(--surface-2);
  border-color: rgba(210,77,132,0.35);
  display: flex; flex-direction: column; justify-content: center;
}
.mod.feature::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(201,162,74,0.14), transparent 70%);
}
.mod.feature .num { color: var(--gold); }
.mod.feature h3 { font-size: 27px; }
.mod.feature p { font-size: 15px; color: var(--text-mut); max-width: 52ch; }
.mod.tall { grid-row: span 2; display: flex; flex-direction: column; }
.mod.gold-line { border-top: 2px solid var(--gold); }

/* ============================ ENGINES ============================ */
.engines { background: var(--bg-2); border-top: 1px solid var(--line-soft); }
.engine-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 8px; }
.engine { padding: 8px 22px 8px 0; position: relative; }
.engine + .engine { padding-left: 22px; }
.engine + .engine::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line-soft); }
.engine .idx { font-family: var(--serif); font-size: 40px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--rose-deep); line-height: 1; display: block; margin-bottom: 16px; }
.engine h4 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: 0.1px; }
.engine p { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }

/* ============================ MANIFESTO ============================ */
.manifesto { text-align: center; padding: 118px 0; }
.manifesto .qmark { font-family: var(--serif); font-size: 90px; line-height: 0; color: var(--rose-deep); display: block; height: 40px; }
.manifesto blockquote {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.24; letter-spacing: -0.3px;
  color: #fff; max-width: 20ch; margin: 34px auto 30px; font-style: italic;
}
.manifesto blockquote em { color: var(--rose-soft); font-style: italic; }
.manifesto cite {
  font-style: normal; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}

/* ============================ ACCESS (request) ============================ */
.access { padding: 108px 0; }
.access-card {
  border-radius: var(--r-panel); border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(138,43,94,0.28), transparent 55%),
    var(--surface);
  padding: 56px 56px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.access-card h2 { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; color: #fff; line-height: 1.06; margin-bottom: 16px; }
.access-card p { font-size: 16px; color: var(--text-mut); max-width: 42ch; }
.request-form { display: flex; flex-direction: column; gap: 12px; }
.request-form .field { margin: 0; }
.request-form .btn-primary { width: 100%; }
.request-form .fineprint { font-size: 12px; color: var(--text-dim); text-align: center; margin-top: 4px; }

/* ============================ FOOTER ============================ */
footer { border-top: 1px solid var(--line-soft); padding: 46px 0 40px; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 26px; }
.foot-links a { color: var(--text-mut); text-decoration: none; font-size: 14px; transition: color 0.2s var(--ease); }
.foot-links a:hover { color: var(--text); }
.foot-note { margin-top: 28px; font-size: 12.5px; color: var(--text-dim); letter-spacing: 0.04em; }
.foot-note strong { color: var(--rose-soft); font-weight: 600; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .login { max-width: 460px; }
  .engine-list { grid-template-columns: repeat(3, 1fr); gap: 18px 0; }
  .engine:nth-child(1)::before, .engine:nth-child(4)::before { display: none; }
  .modules { grid-template-columns: repeat(2, 1fr); }
  .mod.feature { grid-column: span 2; }
  .mod.tall { grid-row: span 1; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .nav-links { display: none; }
  .nav { gap: 12px; }
  .brand-name { font-size: 15px; }
  .hero { padding: 44px 0 56px; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 50px); }
  .login { padding: 28px 22px 26px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 22px 8px; }
  .stat:nth-child(5) { grid-column: span 2; }
  .stat + .stat::before { display: none; }
  .modules { grid-template-columns: 1fr; }
  .mod.feature { grid-column: span 1; }
  .mod.feature h3 { font-size: 23px; }
  .engine-list { grid-template-columns: 1fr; }
  .engine { padding: 18px 0; border-top: 1px solid var(--line-soft); }
  .engine + .engine::before { display: none; }
  .engine:first-child { border-top: none; }
  .access-card { grid-template-columns: 1fr; padding: 36px 26px; gap: 30px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}