.page {
  padding-top: 105px;
  min-height: 75vh;
}
.join-layout,
.contact-layout {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 70px;
  align-items: start;
  margin: 70px 0 120px;
}
.form {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(12, 18, 37, 0.8);
}
label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #afb6c8;
  margin: 0 0 16px;
}
input,
textarea,
select {
  width: 100%;
  color: #fff;
  background: #080e1e;
  border: 1px solid #29334a;
  border-radius: 9px;
  padding: 13px;
  margin-top: 7px;
  font:
    14px Arial,
    sans-serif;
  outline: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #6989ff;
  box-shadow: 0 0 0 3px #5648ff25;
}
textarea {
  height: 108px;
  resize: vertical;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form .button {
  border: 0;
  cursor: pointer;
  margin-top: 3px;
}
.contact-details > div {
  padding: 20px 0;
  border-bottom: 1px solid #273044;
}
.contact-details small {
  display: block;
  color: #767f94;
  font-size: 10px;
  letter-spacing: 0.15em;
  margin-bottom: 9px;
}
.contact-details a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}
.faq {
  max-width: 800px;
}
.faq details {
  border-top: 1px solid #273044;
  padding: 20px 0;
}
.faq summary {
  cursor: pointer;
  font-size: 17px;
}
.faq details p {
  color: #afb6c5;
  line-height: 1.65;
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #000a;
  z-index: 30;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.show {
  display: flex;
}
.modal > div {
  text-align: center;
  max-width: 390px;
  padding: 48px 32px;
  border: 1px solid #9068ff;
  border-radius: 20px;
  background: #0d1224;
  box-shadow: 0 0 90px #7337d766;
}
.modal span {
  font-size: 45px;
  color: #cf77ff;
}
.modal h2 {
  font-size: 30px;
  margin: 15px 0;
}
.modal p {
  color: #b3bac9;
  line-height: 1.6;
  margin-bottom: 25px;
}
@media (max-width: 800px) {
  .page {
    padding-top: 78px;
  }
  .join-layout,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (max-width: 500px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.timeline {
  max-width: 850px;
  margin-top: 80px;
}
.timeline article {
  padding: 27px 0 35px 100px;
  border-top: 1px solid #273044;
  position: relative;
}
.timeline article > b {
  position: absolute;
  left: 0;
  color: #a96fff;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.timeline h2 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.timeline p {
  margin: 0;
  color: #abb2c3;
  line-height: 1.7;
}
.filters {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 60px 0 25px;
}
.filters button {
  padding: 10px 16px;
  color: #bdc3d0;
  background: #10182a;
  border: 1px solid #28344c;
  border-radius: 30px;
  cursor: pointer;
}
.filters button.selected {
  background: linear-gradient(110deg, #085eed, #a344ee);
  color: #fff;
}
.creator-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
  padding-bottom: 120px;
}
.creator {
  padding: 23px;
  border: 1px solid var(--line);
  background: rgba(15, 21, 42, 0.68);
  border-radius: 18px;
  transition: 0.25s;
}
.creator:hover {
  transform: translateY(-6px);
  border-color: #9d6df9;
}
.avatar {
  height: 140px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 37px;
  font-weight: 700;
  background: linear-gradient(135deg, #16476d, #ad44d7);
}
.a2 {
  background: linear-gradient(135deg, #294c32, #e5843c);
}
.a3 {
  background: linear-gradient(135deg, #5b2d6f, #1d90c4);
}
.a4 {
  background: linear-gradient(135deg, #314f7a, #03bda4);
}
.a5 {
  background: linear-gradient(135deg, #6d3140, #ef4e73);
}
.a6 {
  background: linear-gradient(135deg, #806c2d, #5c3ac2);
}
.creator small {
  color: #8b84fd;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.creator h3 {
  margin: 10px 0 8px;
  font-size: 20px;
}
.creator p {
  margin: 0 0 17px;
  color: #aab1c0;
  font-size: 13px;
  line-height: 1.5;
}
.creator b {
  font-size: 11px;
  font-weight: 500;
  color: #d0d4df;
}
@media (max-width: 800px) {
  .creator-grid {
    grid-template-columns: 1fr 1fr;
  }
  .timeline article {
    padding-left: 0;
  }
  .timeline article > b {
    position: static;
    display: block;
    margin-bottom: 16px;
  }
}
@media (max-width: 500px) {
  .creator-grid {
    grid-template-columns: 1fr;
  }
}

/* Supporting page treatment */
.page { padding-top: 125px; min-height: 78vh; }
.page > h1 { max-width: 850px; }
.page > .lead { margin-bottom: 0; }
.timeline { max-width: 1060px; margin-top: 95px; }
.timeline article { padding: 33px 0 44px 170px; border-color: rgba(255,255,255,.16); }
.timeline article > b { font-family: 'DM Mono', monospace; color: var(--acid); font-size: 10px; }
.timeline h2 { font-family: Syne, sans-serif; font-size: 33px; letter-spacing: -.055em; }
.timeline p { max-width: 620px; color: #b3b0c4; }
.filters { margin: 70px 0 28px; gap: 7px; }
.filters button { border-radius: 0; padding: 12px 16px; border-color: rgba(255,255,255,.16); background: transparent; color: #c3c0d1; font: 10px 'DM Mono', monospace; }
.filters button.selected { background: #f6f4ff; color: #090a1d; }
.creator-grid { grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); }
.creator { border: 0; border-radius: 0; background: #10112a; padding: 18px; }
.creator:hover { border-color: transparent; background: #17143a; }
.avatar { height: 180px; border-radius: 0; margin-bottom: 22px; font-family: Syne, sans-serif; }
.creator small { font-family: 'DM Mono', monospace; color: var(--acid); }
.creator h3 { font-family: Syne, sans-serif; letter-spacing: -.05em; }
.creator b { font: 10px 'DM Mono', monospace; color: #bbb8c9; }
.join-layout, .contact-layout { gap: 95px; margin: 82px 0 140px; }
.form { border-radius: 0; padding: 32px; border-color: rgba(255,255,255,.18); background: #10112a; }
label { font-family: 'DM Mono', monospace; font-size: 10px; }
input, textarea, select { border-radius: 0; background: #090a1d; border-color: rgba(255,255,255,.16); font-family: Manrope, sans-serif; }
input:focus,textarea:focus,select:focus { border-color: var(--acid); box-shadow: 0 0 0 3px rgba(103,231,255,.12); }
.contact-details > div { border-color: rgba(255,255,255,.16); }
.contact-details small { font-family: 'DM Mono', monospace; color: var(--acid); }
.faq { max-width: 940px; }
.faq details { border-color: rgba(255,255,255,.18); }
.faq summary { font-family: Syne, sans-serif; font-size: 22px; letter-spacing: -.04em; }
.modal > div { border-radius: 0; background: #11112a; }
@media (max-width: 800px) {
  .page { padding-top: 95px; }
  .timeline article { padding-left: 0; }
  .creator-grid { grid-template-columns: 1fr 1fr; }
}

/* Softer, more luxurious surface language */
body:before {
  background:
    radial-gradient(ellipse at 8% 24%, rgba(101, 96, 255, .28), transparent 31%),
    radial-gradient(ellipse at 93% 47%, rgba(255, 91, 210, .2), transparent 34%),
    radial-gradient(ellipse at 48% 100%, rgba(34, 181, 255, .13), transparent 36%),
    linear-gradient(135deg, #07091c 5%, #0b0a26 55%, #130c30);
}
.nav-wrap { border-radius: 999px; border-color: rgba(255,255,255,.12); }
.dashboard {
  border-radius: 30px;
  border-color: rgba(210, 202, 255, .18);
  background: linear-gradient(135deg, rgba(25, 25, 62, .87), rgba(15, 15, 42, .72));
  box-shadow: 0 28px 80px rgba(0,0,0,.25), 18px 18px 0 rgba(120, 94, 255, .08);
}
.dashboard:after { filter: blur(105px); }
.dash-grid div { border-radius: 14px; border-color: rgba(255,255,255,.07); }
.marquee { border-radius: 999px; border: 1px solid rgba(214,210,255,.15); transform: none; width: min(1420px, calc(100% - 32px)); margin-left: auto; margin-right: auto; }
.stats {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 25px;
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(14px);
}
.stats div { border-color: rgba(255,255,255,.13); }
.feature-grid, .creator-grid {
  gap: 14px;
  border: 0;
  background: transparent;
}
.feature, .creator {
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(145deg, rgba(28,28,66,.82), rgba(14,16,41,.92));
  overflow: hidden;
}
.feature:nth-child(2) { background: linear-gradient(145deg, rgba(34,24,70,.86), rgba(17,14,44,.92)); }
.feature:nth-child(3) { background: linear-gradient(145deg, rgba(17,41,65,.84), rgba(13,18,42,.92)); }
.feature:hover, .creator:hover { border-color: rgba(171,147,255,.55); box-shadow: 0 24px 55px rgba(0,0,0,.25); }
.benefits {
  border-radius: 28px;
  overflow: hidden;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(14px);
}
.benefits div { border-color: rgba(255,255,255,.13); }
.cta {
  border: 1px solid rgba(197,183,255,.24);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 110%, rgba(178,80,255,.45), transparent 57%),
    linear-gradient(135deg, rgba(94,76,255,.14), rgba(18,17,51,.28));
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 25px 80px rgba(0,0,0,.18);
}
.form { border-radius: 26px; border-color: rgba(255,255,255,.13); box-shadow: 0 20px 50px rgba(0,0,0,.16); }
input, textarea, select { border-radius: 13px; }
.filters button { border-radius: 999px; }
.avatar { border-radius: 18px; }
.creator { border-radius: 24px; }
.faq details:first-of-type { border-radius: 18px 18px 0 0; }
.modal > div { border-radius: 28px; }

/* ================================================================
   Home: restrained recruitment/showcase direction
   ================================================================ */

/* One shared logo asset is used in every header and footer. */
.mark { width: 43px; height: 30px; display: inline-grid; place-items: center; background: url('../assets/aether-logo.png') center / contain no-repeat; font-size: 0; letter-spacing: 0; font-style: normal; }
.mark:after { display: none; }
.mark:not(:has(svg)):before { display: none; }
.mark svg { display: none; }
strong, .dashboard b { background: none; color: inherit; }
h1 > span { color: #d8d5e4; }
/* Hero content and the member-programme showcase card. */
.hero { min-height: 650px; }
.application-note { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; color: #aeadbd; font: 10px 'DM Mono', monospace; }
.application-note i { width: 7px; height: 7px; border-radius: 50%; background: #72ebb5; box-shadow: 0 0 12px #72ebb5; }
.showcase { position: relative; min-height: 440px; padding: 25px; overflow: hidden; border: 1px solid rgba(224,219,255,.22); border-radius: 28px; background: linear-gradient(145deg, rgba(40,34,82,.9), rgba(13,20,48,.96)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.25); }
.showcase:before { content: ''; position: absolute; width: 360px; height: 360px; right: -120px; top: -170px; border-radius: 50%; border: 1px solid rgba(159,133,255,.38); box-shadow: 0 0 0 45px rgba(159,133,255,.05), 0 0 0 90px rgba(159,133,255,.035); }
.showcase-top, .showcase-list { display: flex; justify-content: space-between; position: relative; z-index: 1; font: 10px 'DM Mono', monospace; letter-spacing: .09em; color: #bdb8d5; }
.showcase-main { position: relative; z-index: 1; margin: 67px 0 75px; }.showcase-main p { margin: 0; font: 700 clamp(34px,3.5vw,52px)/.91 Syne, sans-serif; letter-spacing: -.07em; }.showcase-main em { color: var(--acid); font-style: normal; }
.showcase-seal { position: absolute; right: 8px; bottom: -31px; display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; transform: rotate(10deg); }
.showcase-seal img { width: 65px; height: auto; transform: rotate(-10deg); }
.showcase-seal small { position: absolute; bottom: 10px; width: 100%; color: #eeeaff; font: 7px 'DM Mono', monospace; letter-spacing: .06em; text-align: center; transform: rotate(-10deg); }
.showcase-list { gap: 12px; justify-content: flex-start; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }.showcase-list span:before { content: '•'; color: var(--acid); margin-right: 6px; }
.showcase-login { position: absolute; right: 25px; bottom: 21px; color: #fff; font: 10px 'DM Mono', monospace; text-decoration: none; letter-spacing: .04em; }.showcase-login span { display: block; margin-bottom: 5px; color: #a9a5bd; }.showcase-login b { margin-left: 9px; color: var(--acid); font-size: 16px; }
/* Numeric content uses tabular figures for a more polished read. */
.stats b, .feature-number { font-family: Manrope, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }.feature-number { margin-bottom: auto; color: var(--acid); font-size: 12px; font-weight: 700; }.feature h3 { margin-top: 46px; }

/* Static app preview used to explain the value of membership. */
.member-app { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 120px; padding: 0 0 145px; }.member-app h2 { margin: 0 0 22px; font: 700 clamp(36px,4vw,58px)/.95 Syne, sans-serif; letter-spacing: -.065em; }
.app-preview { max-width: 420px; justify-self: end; padding: 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: linear-gradient(145deg, rgba(31,31,74,.9), rgba(13,15,40,.95)); box-shadow: 20px 20px 0 rgba(103,231,255,.07); font-size: 12px; }.app-head { display: flex; align-items: center; gap: 10px; padding-bottom: 22px; }.app-head i { margin-left: auto; color: #aaa7bd; font-style: normal; }.app-logo { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: var(--acid); color: #101126; font: 700 17px Syne, sans-serif; }
.app-event { padding: 21px; border-radius: 17px; background: linear-gradient(135deg, #a68aff, #6160ec); }.app-event small, .app-event b, .app-event span { display: block; }.app-event small { opacity: .75; font: 9px 'DM Mono', monospace; }.app-event b { margin: 13px 0 6px; font: 700 22px Syne, sans-serif; letter-spacing: -.05em; }.app-event span { color: #f0edff; font-size: 11px; }.app-row { display: flex; justify-content: space-between; margin-top: 10px; padding: 17px 3px; border-bottom: 1px solid rgba(255,255,255,.1); color: #c4c1d1; }.app-row b { color: var(--acid); font-weight: 600; }
/* Member login screen. The form styling is ready for real auth wiring. */
.portal-page { min-height: 100vh; display: grid; place-items: center; }.portal-shell { width: min(100% - 40px, 450px); }.portal-shell > .brand { margin: 0 0 42px 5px; }.portal-card { padding: 37px; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: rgba(15,17,48,.84); box-shadow: 0 25px 70px rgba(0,0,0,.25); }.portal-card h1 { margin: 0 0 12px; font-size: 50px; }.portal-card > p:not(.eyebrow) { color: #b5b2c5; margin: 0; }.portal-form { margin: 32px 0 24px; }.portal-form > div { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 25px; font-size: 11px; }.portal-form a, .portal-card > small a { color: var(--acid); text-decoration: none; }.remember { display: flex; align-items: center; gap: 7px; margin: 0; }.remember input { width: auto; margin: 0; }.portal-form .button { width: 100%; }.portal-card > small { color: #aaa7ba; font-size: 11px; }

/* Responsive fallbacks keep the visual hierarchy intact on small screens. */
@media (max-width: 800px) { .showcase { min-height: 400px; }.member-app { grid-template-columns: 1fr; gap: 42px; padding-bottom: 85px; }.app-preview { justify-self: start; width: 100%; }.member-link { display: none; } }
@media (max-width: 500px) { .showcase-main { margin: 55px 0 68px; }.showcase-login { left: 25px; right: auto; }.portal-card { padding: 27px 22px; } }

/* ================================================================
   Electric Aether visual system
   Keeps the existing layout while applying the reference direction.
   ================================================================ */
:root {
  --ink: #030305;
  --electric: #7867ff;
  --acid: #8f5cff;
  --neon-blue: #3f8cff;
  --neon-pink: #e944bd;
}

body {
  background: #030305;
  font-family: Sora, Manrope, sans-serif;
}

body:before {
  background:
    radial-gradient(ellipse at 72% 22%, rgba(109, 49, 222, 0.13), transparent 23%),
    radial-gradient(ellipse at 20% 80%, rgba(48, 91, 255, 0.08), transparent 27%),
    radial-gradient(ellipse at 92% 72%, rgba(235, 46, 175, 0.09), transparent 24%),
    #030305;
}

.nav-wrap {
  background: rgba(3, 3, 5, 0.75);
  border-color: rgba(155, 126, 255, 0.14);
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.38);
}

.brand,
h1,
.title,
.cta h2,
.member-app h2,
.feature h3,
.dashboard h2 {
  font-family: 'Chakra Petch', Sora, sans-serif;
}

.brand {
  font-weight: 600;
  letter-spacing: 0.32em;
}

nav a,
.eyebrow,
.button,
.feature a,
.showcase-top,
.showcase-list {
  font-family: 'Chakra Petch', 'DM Mono', monospace;
}

.nav-cta,
.button {
  background: linear-gradient(105deg, #536bff, #9360ff 47%, #d743ae);
  border: 1px solid rgba(230, 195, 255, 0.22);
  box-shadow: 0 6px 22px rgba(127, 78, 255, 0.32);
}

.ghost {
  background: rgba(10, 8, 18, 0.68);
  border-color: rgba(171, 136, 255, 0.38);
  box-shadow: none;
}

.ghost:hover {
  background: rgba(78, 50, 130, 0.35);
  color: white !important;
}

h1,
.title,
.cta h2,
.member-app h2 {
  font-weight: 600;
  letter-spacing: -0.05em;
}

h1 > span,
.title > span {
  color: #d7d5e6;
}

.showcase,
.feature,
.app-preview,
.portal-card {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background:
    linear-gradient(145deg, rgba(14, 12, 25, 0.97), rgba(4, 5, 10, 0.98)) padding-box,
    linear-gradient(135deg, rgba(66, 141, 255, 0.76), rgba(143, 77, 255, 0.24) 38%, rgba(226, 54, 188, 0.72)) border-box;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.07),
    0 20px 55px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(104, 58, 255, 0.08);
}

.showcase:after,
.feature:after,
.app-preview:after,
.portal-card:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(46, 143, 255, 0.35), transparent 32%, transparent 66%, rgba(239, 47, 190, 0.35));
  filter: blur(13px);
  opacity: 0.5;
}

.showcase:before {
  border-color: rgba(211, 76, 224, 0.34);
  box-shadow: 0 0 0 45px rgba(91, 65, 255, 0.05), 0 0 0 90px rgba(196, 41, 171, 0.025);
}

.showcase-main em,
.feature-number,
.showcase-login b,
.text-link span {
  color: #c262fa;
}

.showcase-seal {
  border-color: rgba(189, 169, 255, 0.48);
  box-shadow: 0 0 25px rgba(117, 84, 255, 0.22);
}

.stats {
  border-color: transparent;
  background:
    linear-gradient(90deg, rgba(8, 9, 18, 0.97), rgba(18, 10, 30, 0.9), rgba(8, 9, 18, 0.97)) padding-box,
    linear-gradient(90deg, rgba(61, 130, 255, 0.62), rgba(153, 72, 255, 0.18) 42%, rgba(236, 61, 193, 0.64)) border-box;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 22px rgba(148, 66, 255, 0.1);
}

.stats b {
  color: #f4f0ff;
  font-weight: 600;
}

.feature:hover {
  border-color: transparent;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5), 0 0 34px rgba(139, 55, 255, 0.24);
}

.app-event {
  background: linear-gradient(115deg, #405fff, #9744db 58%, #d440af);
}

.cta {
  position: relative;
  overflow: hidden;
  border-color: rgba(143, 101, 255, 0.36);
  background:
    linear-gradient(96deg, rgba(27, 112, 255, 0.22), transparent 28%, transparent 71%, rgba(227, 39, 178, 0.21)),
    radial-gradient(ellipse at 50% 120%, rgba(126, 59, 255, 0.36), transparent 58%),
    #07070d;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.06);
}

.cta:before {
  content: '';
  position: absolute;
  right: -5%;
  bottom: 16%;
  left: -5%;
  height: 1px;
  background: linear-gradient(90deg, #2a8cff, #8f62ff 48%, #e241c0);
  box-shadow: 0 0 13px rgba(133, 77, 255, 0.85);
  transform: rotate(-3deg);
}

.cta > * { position: relative; z-index: 1; }

@media (max-width: 800px) {
  .brand { letter-spacing: 0.22em; }
}