:root {
  --bg:#050912;
  --bg2:#08111f;
  --card:#0c1728;
  --line:rgba(139,180,255,.13);
  --line2:rgba(86,164,255,.28);
  --text:#f8faff;
  --muted:#8f9db2;
  --blue:#148cff;
  --cyan:#6de7ff;
  --green:#34d399;
  --container:1180px;
  --safe:env(safe-area-inset-bottom,0px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:82px
}

body {
  margin:0;
  background:radial-gradient(circle at 85% 12%,rgba(20,140,255,.11),transparent 27rem),var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}

button {
  font:inherit
}

a {
  text-decoration:none;
  color:inherit
}

img {
  display:block;
  max-width:100%
}

.container {
  width:min(var(--container),calc(100% - 40px));
  margin:auto
}

.section {
  padding:92px 0
}

.topbar {
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(5,9,18,.78);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line)
}

.nav {
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:flex;
  align-items:center;
  gap:11px
}

.brand-logo {
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 24px rgba(20,140,255,.18)
}

.brand-logo img {
  width:100%;
  height:100%;
  object-fit:cover
}

.brand-copy {
  display:flex;
  flex-direction:column;
  line-height:1.05
}

.brand-copy strong {
  font-size:15px
}

.brand-copy small {
  font-size:8px;
  letter-spacing:.18em;
  color:#63728a;
  font-weight:900;
  margin-top:5px
}

.nav-links {
  display:flex;
  gap:30px;
  font-size:12px;
  font-weight:800;
  color:#8290a6
}

.nav-links a:hover {
  color:var(--cyan)
}

.nav-cta {
  min-height:46px;
  border:1px solid var(--line2);
  border-radius:13px;
  background:linear-gradient(135deg,#0b2440,#0a5daa);
  color:#fff;
  padding:0 18px;
  font-weight:900;
  cursor:pointer
}

.hero {
  position:relative;
  overflow:hidden;
  padding:88px 0 38px
}

.grid-bg {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(86,164,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(86,164,255,.035) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom,black,transparent 92%)
}

.hero-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:80px;
  align-items:center
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(13,32,56,.76);
  border:1px solid var(--line2);
  color:#a8d8ff;
  font-size:10px;
  font-weight:950;
  letter-spacing:.13em
}

.eyebrow i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(52,211,153,.12)
}

.hero h1 {
  margin:21px 0 0;
  font-size:clamp(45px,6vw,76px);
  line-height:.98;
  letter-spacing:-4px
}

.hero h1 span {
  display:block;
  margin-top:12px;
  background:linear-gradient(90deg,#e7edf7,#71c7ff,#1b8cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.hero-lead {
  max-width:690px;
  margin:28px 0 0;
  color:#9aa8bc;
  font-size:16px
}

/* Hero strong - Dark mode */
.hero-lead strong {
  color: #ffffff;
  font-weight: 800;
}

/* Hero strong - Light mode */
html[data-theme="light"] .hero-lead strong {
  color: #111111;
  font-weight: 800;
}
.hero-points {
  margin-top:28px;
  display:grid;
  gap:12px
}

.hero-points div {
  display:flex;
  align-items:center;
  gap:10px;
  color:#b0bcd0;
  font-size:13px;
  font-weight:700
}

.hero-points b {
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:rgba(20,140,255,.12);
  border:1px solid rgba(86,164,255,.2);
  color:#5ec8ff;
  font-size:11px
}

.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:32px
}

.btn {
  min-height:58px;
  border-radius:15px;
  border:0;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  font-weight:900;
  cursor:pointer
}

.btn-primary {
  min-width:302px;
  background:linear-gradient(135deg,#0a71d9,#0da3ff 62%,#4ac8ff);
  color:#fff;
  box-shadow:0 14px 35px rgba(0,136,255,.22)
}

.zalo-pill {
  min-width:42px;
  height:38px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#0a7be8;
  font-size:10px
}

.btn-text {
  flex:1;
  text-align:left
}

.btn-arrow {
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#082541;
  color:#8ddcff;
  margin-left:auto
}

.btn-ghost {
  background:rgba(13,28,47,.78);
  border:1px solid var(--line2);
  color:#dde9f6
}

.fb-circle {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1877f2;
  color:#fff;
  font-size:22px
}

.mini-note {
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#64758e;
  font-size:10px
}

.mini-note i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#1d8fff
}

.hero-visual {
  position:relative;
  min-height:520px;
  display:grid;
  place-items:center
}

.logo-stage {
  position:relative;
  width:430px;
  height:430px;
  display:grid;
  place-items:center
}

.logo-card {
  position:relative;
  z-index:3;
  width:330px;
  height:330px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(125,188,255,.18),0 0 60px rgba(20,140,255,.22),0 28px 80px rgba(0,0,0,.38)
}

.logo-card img {
  width:100%;
  height:100%;
  object-fit:cover
}

.ring {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(87,164,255,.17)
}

.ring-a {
  width:390px;
  height:390px
}

.ring-b {
  width:440px;
  height:440px;
  border-style:dashed;
  opacity:.45
}

.market-chip {
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:15px;
  background:rgba(9,21,37,.9);
  border:1px solid var(--line2);
  box-shadow:0 16px 45px rgba(0,0,0,.3)
}

.market-chip>span {
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#0c67b7
}

.market-chip b {
  display:block;
  font-size:11px
}

.market-chip small {
  display:block;
  font-size:8px;
  color:#6e7d92
}

.chip-top {
  right:0;
  top:90px
}

.chip-bottom {
  left:6px;
  bottom:80px
}

.ticker {
  margin-top:32px;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.ticker-track {
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  white-space:nowrap;
  color:#4e6078;
  font-size:9px;
  font-weight:950;
  letter-spacing:.15em
}

.ticker-track i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#0f8bff
}

.kicker {
  color:#3caeff;
  font-size:10px;
  letter-spacing:.16em;
  font-weight:950
}

.section-head {
  max-width:800px;
  margin-bottom:38px
}

.section-head h2,.about-copy h2 {
  margin:10px 0 0;
  font-size:clamp(34px,4.4vw,52px);
  line-height:1.02;
  letter-spacing:-2.8px
}

.section-head h2 span,.about-copy h2 span {
  background:linear-gradient(90deg,#e5edf7,#68c6ff,#148cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.community-section {
  background:linear-gradient(180deg,#07101d,#081321);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.community-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.community-card {
  min-height:310px;
  padding:24px;
  border-radius:22px;
  background:linear-gradient(160deg,rgba(15,31,53,.94),rgba(8,18,31,.94));
  border:1px solid var(--line);
  display:flex;
  flex-direction:column
}

.community-card.featured {
  background:linear-gradient(145deg,#0a2750,#0b5da0 62%,#0b78c8);
  border-color:rgba(85,190,255,.3)
}

.card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#57708b;
  font-size:10px
}

.community-icon {
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-weight:950
}

.community-icon.fb {
  background:#1877f2
}

.community-icon.yt {
  background:#ff2626
}

.community-card h3 {
  margin:30px 0 9px;
  font-size:21px
}

.community-card p {
  margin:0;
  color:#8c9cb0;
  font-size:12px
}

.featured p {
  color:#b8dbf4
}

.card-btn {
  margin-top:auto;
  width:100%;
  min-height:50px;
  border-radius:13px;
  border:1px solid var(--line2);
  background:#0b1727;
  color:#dce8f6;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  cursor:pointer
}

.primary-card-btn {
  background:#fff;
  color:#0968b8;
  border:0
}

.values-section {
  background:#050a12
}

.values-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden
}

.value-item {
  min-height:240px;
  padding:25px;
  background:linear-gradient(180deg,#091321,#07101b);
  border-right:1px solid var(--line)
}

.value-item:last-child {
  border-right:0
}

.value-item>span {
  font-size:9px;
  color:#267bc1;
  font-weight:950
}

.value-item h3 {
  margin:38px 0 10px;
  font-size:19px
}

.value-item p {
  margin:0;
  color:#718198;
  font-size:12px
}

.about-section {
  background:radial-gradient(circle at 20% 50%,rgba(20,140,255,.08),transparent 26rem),#07101b;
  border-top:1px solid var(--line)
}

.about-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  align-items:center
}

.about-visual {
  display:grid;
  place-items:center
}

.about-logo {
  width:290px;
  height:290px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 60px rgba(20,140,255,.18);
  border:1px solid var(--line2)
}

.about-logo img {
  width:100%;
  height:100%;
  object-fit:cover
}

.about-copy>p {
  font-size:14px;
  color:#8493a7
}

.about-lead {
  font-size:19px!important;
  line-height:1.5!important;
  color:#cfd8e6!important
}

.contact-card {
  margin-top:24px;
  padding:18px;
  border-radius:16px;
  background:linear-gradient(145deg,#0b1a2d,#0b2743);
  border:1px solid var(--line2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}

.contact-card div {
  display:flex;
  flex-direction:column
}

.contact-card small {
  font-size:8px;
  letter-spacing:.14em;
  color:#5cafff;
  font-weight:950
}

.contact-card strong {
  font-size:22px
}

.contact-card span {
  font-size:9px;
  color:#71849a
}

.contact-card button {
  border:1px solid var(--line2);
  background:#0a71d9;
  color:#fff;
  border-radius:12px;
  min-height:42px;
  padding:0 14px;
  font-weight:900;
  cursor:pointer
}

blockquote {
  margin:26px 0 0;
  padding:21px 22px;
  border-radius:17px;
  background:#0a1524;
  border-left:3px solid #148cff;
  color:#c7d3e1;
  font-size:15px;
  font-weight:800
}

blockquote small {
  display:block;
  color:#3eafff;
  font-size:8px;
  letter-spacing:.16em;
  margin-bottom:6px
}

.final-section {
  padding:72px 0;
  background:#050a12
}

.final-card {
  border-radius:26px;
  background:radial-gradient(circle at 80% 20%,rgba(0,194,255,.13),transparent 23rem),linear-gradient(135deg,#081626,#0a2d50 55%,#0b5e9e);
  border:1px solid rgba(85,190,255,.22);
  padding:34px 38px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:28px
}

.final-left {
  display:flex;
  align-items:center;
  gap:18px
}

.final-logo {
  width:72px;
  height:72px;
  flex:0 0 72px;
  border-radius:18px;
  overflow:hidden
}

.final-logo img {
  width:100%;
  height:100%;
  object-fit:cover
}

.kicker.light {
  color:#79cfff
}

.final-card h2 {
  margin:5px 0 4px;
  font-size:29px
}

.final-card p {
  margin:0;
  color:#9ab1c7;
  font-size:12px
}

.final-btn {
  min-width:190px;
  min-height:52px;
  border:0;
  border-radius:13px;
  background:#fff;
  color:#0a5c9e;
  font-weight:950;
  cursor:pointer
}

footer {
  background:#03070d;
  color:#6f7d90;
  padding:30px 0 24px;
  border-top:1px solid var(--line)
}

.footer-main {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.footer-main>span {
  font-size:9px
}

.disclaimer {
  margin-top:18px;
  padding-top:17px;
  border-top:1px solid rgba(124,155,198,.1);
  font-size:9px;
  line-height:1.7;
  color:#536175
}

.mobile-cta {
  display:none
}

.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:.65s cubic-bezier(.2,.8,.2,1)
}

.reveal.show {
  opacity:1;
  transform:none
}

@media(max-width:920px) {
  .nav-links {
    display:none
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .hero-visual {
    min-height:440px
  }
  .community-grid {
    grid-template-columns:1fr 1fr
  }
  .values-grid {
    grid-template-columns:1fr 1fr
  }
  .value-item:nth-child(2) {
    border-right:0
  }
  .value-item:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .final-card {
    grid-template-columns:1fr
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-bottom:94px
  }
  body {
    padding-bottom:calc(76px + var(--safe))
  }
  .container {
    width:calc(100% - 28px)
  }
  .section {
    padding:60px 0
  }
  .nav {
    min-height:62px
  }
  .brand-logo {
    width:36px;
    height:36px;
    flex-basis:36px
  }
  .brand-copy strong {
    font-size:12px
  }
  .brand-copy small {
    display:none
  }
  .nav-cta {
    display:none
  }
  .hero {
    padding:40px 0 24px
  }
  .eyebrow {
    font-size:8px
  }
  .hero h1 {
    font-size:42px;
    letter-spacing:-2.5px
  }
  .hero-lead {
    font-size:14px
  }
  .hero-points div {
    font-size:11px
  }
  .hero-actions {
    display:grid;
    grid-template-columns:1fr
  }
  .btn {
    width:100%
  }
  .btn-primary {
    min-width:0;
    padding-left:10px;
    padding-right:8px
  }
  .btn-ghost {
    justify-content:center
  }
  .hero-visual {
    min-height:330px
  }
  .logo-stage {
    width:300px;
    height:300px
  }
  .logo-card {
    width:230px;
    height:230px
  }
  .ring-a {
    width:270px;
    height:270px
  }
  .ring-b {
    width:300px;
    height:300px
  }
  .market-chip {
    display:none
  }
  .ticker {
    overflow-x:auto;
    scrollbar-width:none
  }
  .ticker-track {
    width:max-content;
    justify-content:flex-start;
    padding-right:20px
  }
  .section-head h2,.about-copy h2 {
    font-size:36px;
    letter-spacing:-2px
  }
  .community-grid {
    grid-template-columns:1fr
  }
  .values-grid {
    grid-template-columns:1fr 1fr
  }
  .value-item {
    min-height:210px;
    padding:18px
  }
  .value-item h3 {
    margin-top:30px;
    font-size:16px
  }
  .value-item p {
    font-size:10px
  }
  .about-logo {
    width:220px;
    height:220px
  }
  .about-copy>p {
    font-size:13px
  }
  .about-lead {
    font-size:17px!important
  }
  .contact-card {
    align-items:flex-start;
    flex-direction:column
  }
  .contact-card button {
    width:100%
  }
  .final-section {
    padding:54px 0
  }
  .final-card {
    padding:28px 22px
  }
  .final-left {
    align-items:flex-start
  }
  .final-logo {
    width:54px;
    height:54px;
    flex-basis:54px
  }
  .final-card h2 {
    font-size:24px
  }
  .final-btn {
    width:100%
  }
  .footer-main {
    display:block
  }
  .footer-main>span {
    display:block;
    margin-top:17px
  }
  .mobile-cta {
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:100;
    padding:8px 12px calc(8px + var(--safe));
    background:rgba(3,7,13,.92);
    backdrop-filter:blur(18px);
    border-top:1px solid var(--line)
  }
  .mobile-cta button {
    width:100%;
    min-height:56px;
    border:1px solid rgba(90,192,255,.3);
    border-radius:15px;
    background:linear-gradient(135deg,#0866c1,#0a9cf0);
    color:#fff;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:7px 10px 7px 8px
  }
  .mobile-z {
    width:38px;
    height:38px;
    border-radius:11px;
    background:#fff;
    color:#0876d7;
    display:grid;
    place-items:center;
    font-weight:950
  }
  .mobile-copy {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
    line-height:1.15
  }
  .mobile-copy b {
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%
  }
  .mobile-copy small {
    font-size:8px;
    color:#bde8ff
  }
  .mobile-arrow {
    font-size:18px;
    margin-right:5px
  }
}

/* ===== LIGHT / DARK THEME + MOBILE POLISH ===== */
:root {
  color-scheme:light;
  --purple:#7557ff;
  --purple2:#a78bfa;
  --purple-soft:#f0ebff
}

html[data-theme="light"] {
  color-scheme:light
}

html[data-theme="dark"] {
  color-scheme:dark
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:10px
}

.theme-toggle {
  height:44px;
  padding:0 12px;
  border-radius:13px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-weight:900;
  box-shadow:0 8px 24px rgba(20,20,40,.05);
  transition:.2s ease
}

.theme-toggle:hover {
  transform:translateY(-1px);
  border-color:var(--line2)
}

.theme-icon {
  font-size:15px;
  line-height:1
}

.theme-label {
  font-size:10px;
  letter-spacing:.03em
}

.moon {
  display:none
}

html[data-theme="light"] body {
  --bg:#fbfaff;
  --bg2:#f5f1ff;
  --card:#ffffff;
  --line:rgba(108,82,190,.12);
  --line2:rgba(117,87,255,.26);
  --text:#201a33;
  --muted:#746d86;
  --blue:#7557ff;
  --cyan:#9a7cff;
  --green:#22a878;
  background:radial-gradient(circle at 86% 10%,rgba(150,116,255,.15),transparent 28rem),linear-gradient(180deg,#fff 0%,#fbfaff 45%,#f7f4ff 100%);
  color:var(--text)
}

html[data-theme="light"] .topbar {
  background:rgba(255,255,255,.82);
  border-color:var(--line);
  box-shadow:0 6px 30px rgba(69,48,120,.04)
}

html[data-theme="light"] .brand-logo {
  box-shadow:0 8px 24px rgba(117,87,255,.14)
}

html[data-theme="light"] .brand-copy small {
  color:#8c83a2
}

html[data-theme="light"] .nav-links {
  color:#766e8c
}

html[data-theme="light"] .nav-links a:hover {
  color:#7557ff
}

html[data-theme="light"] .nav-cta {
  border-color:#d9ceff;
  background:linear-gradient(135deg,#8b6cff,#6d4df4);
  box-shadow:0 8px 24px rgba(117,87,255,.2)
}

html[data-theme="light"] .grid-bg {
  opacity:.75;
  background-image:linear-gradient(rgba(117,87,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(117,87,255,.045) 1px,transparent 1px)
}

html[data-theme="light"] .eyebrow,html[data-theme="light"] .kicker {
  color:#7557ff
}

html[data-theme="light"] .eyebrow i,html[data-theme="light"] .mini-note i,html[data-theme="light"] .ticker-track i {
  background:#8b6cff
}

html[data-theme="light"] .hero h1 {
  color:#211a35
}

html[data-theme="light"] .hero h1 span {
  background:linear-gradient(90deg,#5e43d8,#9d7cff,#6547ed);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

html[data-theme="light"] .hero-lead {
  color:#706981
}

html[data-theme="light"] .hero-points div {
  color:#514a62
}

html[data-theme="light"] .hero-points b {
  background:#eee8ff;
  color:#7152f4
}

html[data-theme="light"] .btn-primary {
  background:linear-gradient(135deg,#8566ff,#6d4df4);
  box-shadow:0 14px 34px rgba(117,87,255,.24)
}

html[data-theme="light"] .btn-ghost {
  background:#fff;
  color:#3e3650;
  border-color:#e3dcf5
}

html[data-theme="light"] .mini-note {
  color:#928aa4
}

html[data-theme="light"] .logo-card {
  border-color:rgba(117,87,255,.22);
  box-shadow:0 0 0 1px rgba(117,87,255,.08),0 0 65px rgba(139,108,255,.18),0 28px 70px rgba(70,45,130,.14)
}

html[data-theme="light"] .ring {
  border-color:rgba(117,87,255,.17)
}

html[data-theme="light"] .market-chip {
  background:rgba(255,255,255,.92);
  border-color:#ded5f7;
  box-shadow:0 16px 45px rgba(71,49,125,.12)
}

html[data-theme="light"] .market-chip>span {
  background:#8060fa;
  color:#fff
}

html[data-theme="light"] .market-chip small {
  color:#8a819d
}

html[data-theme="light"] .ticker-track {
  color:#8b839d
}

html[data-theme="light"] .section-head h2 span,html[data-theme="light"] .about-copy h2 span {
  background:linear-gradient(90deg,#4c3a7c,#9a7cff,#6d4df4);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

html[data-theme="light"] .community-section {
  background:linear-gradient(180deg,#f7f3ff,#fcfbff);
  border-color:var(--line)
}

html[data-theme="light"] .community-card {
  background:rgba(255,255,255,.9);
  border-color:#e8e1f5;
  box-shadow:0 16px 45px rgba(70,48,120,.055)
}

html[data-theme="light"] .community-card.featured {
  background:linear-gradient(145deg,#efe9ff,#e2d7ff 55%,#cbbcff);
  border-color:#d4c6ff
}

html[data-theme="light"] .community-card p {
  color:#776f89
}

html[data-theme="light"] .featured p {
  color:#5f5672
}

html[data-theme="light"] .card-top {
  color:#948aa8
}

html[data-theme="light"] .community-icon {
  background:#0068ff;
  color:#fff
}

html[data-theme="light"] .community-icon.fb {
  background:#1877f2;
  color:#fff
}

html[data-theme="light"] .community-icon.yt {
  background:#ff2626;
  color:#fff
}

html[data-theme="light"] .card-btn {
  background:#faf8ff;
  color:#4c435e;
  border-color:#e0d8f2
}

html[data-theme="light"] .primary-card-btn {
  background:#7253ef;
  color:#fff
}

html[data-theme="light"] .values-section,html[data-theme="light"] .final-section {
  background:#fff
}

html[data-theme="light"] .values-grid {
  border-color:#e8e1f3;
  box-shadow:0 18px 50px rgba(73,52,120,.045)
}

html[data-theme="light"] .value-item {
  background:linear-gradient(180deg,#fff,#faf8ff);
  border-color:#ece6f5
}

html[data-theme="light"] .value-item>span {
  color:#8669ee
}

html[data-theme="light"] .value-item p {
  color:#776f88
}

html[data-theme="light"] .about-section {
  background:radial-gradient(circle at 20% 50%,rgba(139,108,255,.11),transparent 26rem),#f8f5ff;
  border-color:#e8e1f3
}

html[data-theme="light"] .about-logo {
  border-color:#d9ceff;
  box-shadow:0 0 60px rgba(117,87,255,.15)
}

html[data-theme="light"] .about-copy>p {
  color:#746d84
}

html[data-theme="light"] .about-lead {
  color:#423a55!important
}

html[data-theme="light"] .contact-card {
  background:linear-gradient(145deg,#fff,#eee8ff);
  border-color:#d9ceff;
  box-shadow:0 14px 35px rgba(79,55,140,.07)
}

html[data-theme="light"] .contact-card small {
  color:#7557ff
}

html[data-theme="light"] .contact-card span {
  color:#81788f
}

html[data-theme="light"] .contact-card button {
  background:#7557ff;
  border-color:#7557ff
}

html[data-theme="light"] blockquote {
  background:#fff;
  border-left-color:#7557ff;
  color:#554d66;
  box-shadow:0 12px 32px rgba(70,48,120,.05)
}

html[data-theme="light"] blockquote small {
  color:#7557ff
}

html[data-theme="light"] .final-card {
  background:radial-gradient(circle at 82% 20%,rgba(255,255,255,.36),transparent 20rem),linear-gradient(135deg,#ede6ff,#d8cbff 55%,#bba8ff);
  border-color:#cfc0ff;
  box-shadow:0 20px 55px rgba(84,58,150,.11)
}

html[data-theme="light"] .kicker.light {
  color:#6548d7
}

html[data-theme="light"] .final-card p {
  color:#655d76
}

html[data-theme="light"] .final-btn {
  color:#684ae2;
  box-shadow:0 8px 25px rgba(71,48,130,.1)
}

html[data-theme="light"] footer {
  background:#f7f4fc;
  color:#776f88;
  border-color:#e6dff0
}

html[data-theme="light"] .disclaimer {
  color:#8c8499;
  border-color:#e8e1f1
}

html[data-theme="light"] .mobile-cta {
  background:rgba(255,255,255,.9);
  border-color:#e3dbf2
}

html[data-theme="light"] .mobile-cta button {
  background:linear-gradient(135deg,#8566ff,#6c4ced);
  border-color:#b9a6ff
}

html[data-theme="light"] .mobile-copy small {
  color:#eee9ff
}

html[data-theme="light"] .mobile-z {
  color:#7152ef
}

html[data-theme="dark"] .sun {
  display:none
}

html[data-theme="dark"] .moon {
  display:inline
}

html[data-theme="dark"] .theme-toggle {
  background:#0b1727;
  border-color:var(--line2)
}

@media(max-width:600px) {
  .nav {
    gap:8px
  }
  .nav-actions {
    margin-left:auto
  }
  .theme-toggle {
    width:42px;
    height:42px;
    padding:0;
    justify-content:center;
    border-radius:12px
  }
  .theme-label {
    display:none
  }
  .theme-icon {
    font-size:17px
  }
  .hero h1 {
    font-size:clamp(34px,10.5vw,42px);
    line-height:1.02
  }
  .hero h1 br {
    display:none
  }
  .hero h1 span {
    margin-top:12px
  }
  .hero-lead {
    line-height:1.65
  }
  .hero-points {
    gap:9px
  }
  .hero-points div {
    align-items:flex-start
  }
  .hero-visual {
    min-height:300px
  }
  .logo-stage {
    transform:scale(.92)
  }
  .community-card {
    min-height:270px;
    padding:21px
  }
  .section-head {
    margin-bottom:28px
  }
  .section-head h2,.about-copy h2 {
    font-size:clamp(31px,9.5vw,36px);
    letter-spacing:-1.8px
  }
  .values-grid {
    grid-template-columns:1fr
  }
  .value-item {
    min-height:0;
    padding:22px;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important
  }
  .value-item:last-child {
    border-bottom:0!important
  }
  .value-item h3 {
    margin:22px 0 7px
  }
  .value-item p {
    font-size:11px
  }
  .about-grid {
    gap:28px
  }
  .about-visual {
    order:0
  }
  .about-copy {
    order:1
  }
  .contact-card {
    padding:16px
  }
  .final-left {
    gap:13px
  }
  .final-card {
    border-radius:22px
  }
  .footer-brand .brand-copy small {
    display:block
  }
  .mobile-cta button {
    cursor:pointer
  }
}

@media(max-width:380px) {
  .container {
    width:calc(100% - 22px)
  }
  .brand-copy strong {
    font-size:11px
  }
  .hero {
    padding-top:30px
  }
  .hero h1 {
    font-size:33px
  }
  .logo-stage {
    transform:scale(.84)
  }
  .hero-visual {
    min-height:275px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .theme-toggle {
    transition:none
  }
}

/* Light mode: improve hero eyebrow contrast */
html[data-theme="light"] .eyebrow {
  background:linear-gradient(135deg,#ffffff 0%,#f4f0ff 100%);
  border:1px solid #d8ccff;
  color:#5f43d8;
  box-shadow:0 8px 24px rgba(92,65,180,.12);
}

html[data-theme="light"] .eyebrow i {
  background:#7c5cff;
  box-shadow:0 0 0 5px rgba(124,92,255,.14);
}