/* =========================================================================
   D7020 ROTARACT CONFERENCE — DESIGN SYSTEM
   Palette:
     --ink        #12131A  primary dark background (premium sections)
     --ink-soft   #1C1E29  secondary dark surface
     --magenta    #D41367  Rotaract signature (official brand color)
     --magenta-deep #8F0D46 pressed/hover state, gradients
     --gold       #F7A81B  Rotary gold accent
     --teal       #0E7C86  Caribbean sea — secondary accent, links, focus
     --paper      #FFFFFF  page background
     --sand       #F6F1EA  warm neutral surface for cards/sections
     --line       #E7E1D8  hairline borders on light surfaces
   Type:
     Display — "Clash Display" (bold, geometric, event-poster energy)
     Body    — "Inter"
     Data/Eyebrow — "Space Mono" (session times, codes, labels — nods to
                     the conference's "network of islands" concept)
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap");
@font-face {
  font-family: "Clash Display";
  src: url("https://api.fontshare.com/v2/css?f[]=clash-display@600,700&display=swap");
}

:root {
  --ink: #12131a;
  --ink-soft: #1c1e29;
  --magenta: #d41367;
  --magenta-deep: #8f0d46;
  --gold: #f7a81b;
  --teal: #0e7c86;
  --paper: #ffffff;
  --sand: #f6f1ea;
  --line: #e7e1d8;
  --line-dark: #2c2e3b;
  --ink-muted: #8b8d9c;
  --text-on-dark: #f3f1ee;

  --font-display: "Clash Display", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Mono", monospace;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --container: 1180px;
  --shadow-soft: 0 20px 60px -20px rgba(18, 19, 26, 0.25);
  --shadow-card: 0 10px 30px -12px rgba(18, 19, 26, 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}
.eyebrow.on-dark { color: var(--gold); }

.lede {
  font-size: 1.15rem;
  color: #4b4d5c;
  max-width: 60ch;
}
.on-dark .lede, .lede.on-dark { color: #c7c9d6; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.25s ease, color .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--magenta), var(--magenta-deep));
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(212, 19, 103, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(212, 19, 103, 0.65); }
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 12px 30px -10px rgba(247, 168, 27, 0.55);
}
.btn-gold:hover { transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  border: 1.5px solid currentColor;
  color: var(--ink);
}
.btn-outline.on-dark { color: #fff; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-outline.on-dark:hover { background: #fff; color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* ---------- nav ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow .3s ease;
}
.site-nav.scrolled {
  background: rgba(18, 19, 26, 0.92);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.6);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display); font-size: 1.05rem; }
.nav-brand .mark { width: 34px; height: 34px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: #d9dae4;
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: #fff; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; }

.nav-account {
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 900px) {
  .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 80vw);
    background: var(--ink-soft); flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 40px; gap: 26px; transform: translateX(100%); transition: transform 0.4s var(--ease); }
  .nav-links.open { transform: translateX(0); box-shadow: -30px 0 60px rgba(0,0,0,0.4); }
  .nav-toggle { display: flex; flex-direction: column; gap: 5px; width: 30px; z-index: 110; }
  .nav-toggle span { height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Was "display:none" here, which hid the "Register Now" text with no
     icon to replace it — leaving a blank pill button in the mobile menu.
     This slide-out panel has plenty of room (min(320px, 80vw)), so the
     label should stay visible; also give links/buttons bigger tap targets. */
  .nav-links a { padding: 10px 0; font-size: 1rem; }
  .nav-cta { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; margin-top: 10px; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- hero / nexus network canvas ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at 20% 0%, #1c1e2f 0%, var(--ink) 60%);
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero canvas#nexusField {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.55;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--ink) 96%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 100px; }
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 { max-width: 16ch; }
.hero h1 .accent {
  background: linear-gradient(100deg, var(--gold), var(--magenta) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede { margin-top: 22px; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-meta {
  display: flex; gap: 40px; margin-top: 70px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.14); padding-top: 28px;
}
/* Forcing a full 100vh hero on mobile (where the address bar eats real
   viewport height) just adds dead space and an extra scroll before the
   "About" section. Let it size to its content instead below ~700px. */
@media (max-width: 700px) {
  .hero { min-height: auto; }
  .hero-inner { padding-top: 130px; padding-bottom: 60px; }
  .hero-meta { margin-top: 40px; gap: 26px; }
}
/* Direct children only (was ".hero-meta div", a descendant selector that
   also matched the nested .countdown row and each .unit box, forcing them
   into the same column layout meant only for the Dates/Location/Countdown
   label stacks — that's what was stacking the countdown boxes vertically). */
.hero-meta > div { display: flex; flex-direction: column; gap: 4px; }
.hero-meta .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.hero-meta .v { font-family: var(--font-display); font-size: 1.15rem; }

/* countdown */
.hero-meta .countdown-wrap { flex: 1 1 100%; }
.countdown { display: flex; flex-direction: row; gap: 18px; margin-top: 6px; }
.countdown .unit {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  min-width: 96px;
  flex: 1 1 0;
  max-width: 160px;
  text-align: center;
}
.countdown .unit strong { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.countdown .unit span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 620px) { .countdown { flex-wrap: wrap; } .countdown .unit { min-width: 70px; padding: 14px 16px; } .countdown .unit strong { font-size: 1.8rem; } }

/* ---------- sections ---------- */
section { padding: 110px 0; }
.section-sand { background: var(--sand); }
.section-dark { background: var(--ink); color: #fff; }
.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head h2 { margin-top: 16px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* 110px top/bottom padding per section is built for desktop scroll pacing;
   on phones it's mostly wasted space that pushes real content further
   down. Scale it back at the two most common mobile breakpoints. */
@media (max-width: 700px) {
  section { padding: 70px 0; }
  .section-head { margin-bottom: 36px; }
}
@media (max-width: 480px) {
  section { padding: 56px 0; }
  .container { padding: 0 18px; }
}

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.card .num { font-family: var(--font-mono); color: var(--magenta); font-size: 0.8rem; letter-spacing: 0.1em; }

.pillar-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--magenta), var(--magenta-deep));
  display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 22px;
}

/* ---------- island network strip ---------- */
.island-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.island-chip {
  font-family: var(--font-mono); font-size: 0.78rem;
  border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 18px; display:flex; align-items:center; gap:8px;
}
.island-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* ---------- schedule ---------- */
.day-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.day-tab {
  padding: 12px 22px; border-radius: 100px; border: 1.5px solid var(--line);
  font-weight: 600; font-size: 0.9rem; transition: all .25s ease; background: #fff;
}
.day-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.filter-bar {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  margin-bottom: 36px;
}
.filter-bar select, .filter-bar input[type="search"] {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 100px; background: var(--sand);
  min-width: 160px;
}
.filter-bar .count { margin-left: auto; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); }

.session-list { display: flex; flex-direction: column; gap: 14px; }
.session-card {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 24px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.session-card:hover { transform: translateX(6px); box-shadow: var(--shadow-card); border-color: var(--magenta); }
.session-time { font-family: var(--font-mono); font-size: 0.85rem; color: var(--teal); line-height: 1.4; }
.session-track {
  display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 4px 10px; border-radius: 100px; margin-bottom: 8px;
}
.track-general { background: #EEE9FB; color: #6242C9; }
.track-leadership { background: #FDE7EF; color: var(--magenta); }
.track-service { background: #E4F3F1; color: var(--teal); }
.track-professional-development { background: #FFF3DE; color: #9A6B00; }
.track-social { background: #FFE9E9; color: #C33; }
.session-loc { font-size: 0.85rem; color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 720px) { .session-card { grid-template-columns: 1fr; text-align: left; } }

/* ---------- packages / pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 28px; display: flex; flex-direction: column; position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
@media (max-width: 480px) { .price-card { padding: 26px 22px; } }
.price-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.price-card.featured { border-color: var(--magenta); box-shadow: 0 20px 50px -20px rgba(212,19,103,.35); }
.price-badge {
  position: absolute; top: -14px; left: 28px;
  background: var(--magenta); color: #fff; font-size: 0.7rem; font-weight: 700;
  padding: 6px 14px; border-radius: 100px; letter-spacing: 0.04em;
}
.price-amount { font-family: var(--font-display); font-size: 2.6rem; margin: 18px 0 4px; }
.price-amount span { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-muted); font-weight: 400; }
.price-features { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.price-features li { display: flex; gap: 10px; font-size: 0.92rem; align-items: flex-start; }
.price-features li::before { content: "✓"; color: var(--teal); font-weight: 700; flex-shrink: 0; }

/* ---------- speakers ---------- */
.speaker-card { text-align: center; }
.speaker-photo {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); margin-bottom: 20px;
  background: linear-gradient(135deg, var(--ink-soft), var(--ink));
  display: flex; align-items: center; justify-content: center; color: var(--gold);
  font-family: var(--font-display); font-size: 2.2rem; overflow: hidden;
}
.speaker-role { color: var(--magenta); font-size: 0.85rem; font-weight: 600; margin: 6px 0 2px; }
.speaker-org { color: var(--ink-muted); font-size: 0.85rem; margin-bottom: 12px; }

/* ---------- forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 44px; max-width: 560px; margin: 0 auto; box-shadow: var(--shadow-card);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form-card { padding: 28px 22px; } }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--sand); transition: border-color .2s ease, background .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); background: #fff; }
.field .hint { font-size: 0.78rem; color: var(--ink-muted); margin-top: 6px; }
.form-error {
  background: #FDE7EF; color: #A10E4C; padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 0.85rem; margin-bottom: 18px; display: none;
}
.form-success {
  background: #E4F3F1; color: #0A5A61; padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 0.85rem; margin-bottom: 18px; display: none;
}

/* ---------- dashboard ---------- */
.dash-shell { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .dash-shell { grid-template-columns: 1fr; } }
.dash-nav { background: var(--sand); border-radius: var(--radius-md); padding: 20px; position: sticky; top: 110px; }
@media (max-width: 860px) { .dash-nav { position: static; } }
.dash-nav a { display: block; padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: 0.92rem; color: #4b4d5c; }
.dash-nav a.active, .dash-nav a:hover { background: #fff; color: var(--magenta); }
.dash-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; margin-bottom: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 640px) { .stat-grid { grid-template-columns: 1fr; } }
.stat { background: var(--sand); border-radius: var(--radius-md); padding: 22px; }
.stat .n { font-family: var(--font-display); font-size: 2rem; }
.stat .l { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }

.status-pill { display:inline-flex; padding: 5px 12px; border-radius: 100px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing:.04em; }
.status-confirmed { background: #E4F3F1; color: #0A5A61; }
.status-pending { background: #FFF3DE; color: #9A6B00; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #c7c9d6; padding: 80px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.footer-grid h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono); margin-bottom: 18px; }
.footer-grid a, .footer-grid p { font-size: 0.9rem; display: block; margin-bottom: 10px; color: #a7a9ba; }
.footer-grid a:hover { color: var(--gold); }
.social-row { display: flex; gap: 12px; margin-top: 6px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; transition: background .25s ease, border-color .25s ease;
}
.social-row a:hover { background: var(--magenta); border-color: var(--magenta); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 26px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.8rem; color: #74768a;
}
.footer-credit { color: var(--gold); font-weight: 600; text-decoration: none; }
.footer-credit:hover { color: var(--magenta); text-decoration: underline; }

/* ---------- misc utility ---------- */
.center { text-align: center; }
.mt-40 { margin-top: 40px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.badge-soft { background: var(--sand); border-radius: 100px; padding: 6px 14px; font-size: .78rem; font-family: var(--font-mono); }
.divider { height: 1px; background: var(--line); margin: 32px 0; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 10px; top: 10px; }