@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');

:root {
  --navy:#06132c;
  --navy-2:#0b1d42;
  --navy-3:#102855;
  --gold:#efbd43;
  --gold-light:#ffd979;
  --cream:#f8f2e8;
  --white:#fff;
  --ink:#162039;
  --muted:#667085;
  --line:rgba(7,22,50,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",Arial,sans-serif;color:var(--ink);background:var(--cream)}
a{color:inherit}
img{display:block;max-width:100%}
.shell{width:min(1180px,calc(100% - 42px));margin:0 auto}
.skip-link{position:absolute;left:-9999px;top:10px;background:var(--gold);padding:10px 14px;z-index:100}
.skip-link:focus{left:10px}

.hero{
  min-height:820px;
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 72% 43%,rgba(243,190,66,.22),transparent 18%),
    radial-gradient(circle at 15% 14%,rgba(50,98,190,.22),transparent 24%),
    linear-gradient(135deg,#050f24 0%,#0b1d42 58%,#07152e 100%);
  padding:0 0 72px;
}
.hero-noise{position:absolute;inset:0;opacity:.16;background-image:radial-gradient(rgba(255,255,255,.35) .65px,transparent .65px);background-size:8px 8px}
.orb{position:absolute;border-radius:50%;filter:blur(2px)}
.orb-one{width:380px;height:380px;background:rgba(23,68,149,.18);left:-150px;top:130px}
.orb-two{width:330px;height:330px;background:rgba(239,189,67,.11);right:-80px;bottom:-120px}

.site-header{position:relative;z-index:10;display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:34px;padding:28px 0}
.brand-link img{width:188px;height:auto}
.desktop-nav{justify-self:center;display:flex;gap:30px}
.desktop-nav a{text-decoration:none;color:rgba(255,255,255,.78);font-size:.95rem}
.desktop-nav a:hover{color:var(--gold)}
.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;border-radius:999px;padding:0 23px;min-height:50px;transition:.2s ease}
.button:hover{transform:translateY(-2px)}
.button-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);box-shadow:0 12px 32px rgba(239,189,67,.22)}
.button-ghost{color:#fff;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
.button-outline{color:#fff;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.header-action{min-height:42px;padding:0 18px;font-size:.9rem}
.menu-toggle{display:none;background:transparent;border:0;padding:8px}
.menu-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px}
.mobile-nav{display:none}

.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding-top:78px}
.eyebrow,.section-kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;font-weight:700}
.eyebrow{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.68)}
.eyebrow span{width:44px;height:1px;background:var(--gold)}
.hero h1{margin:20px 0 24px;font-size:clamp(3.4rem,6.2vw,6.5rem);line-height:.93;letter-spacing:-.058em;max-width:680px}
.hero h1 em{font-family:"Playfair Display",Georgia,serif;color:var(--gold);font-weight:600}
.hero-intro{font-size:1.1rem;line-height:1.78;color:rgba(255,255,255,.75);max-width:650px}
.tagline{display:flex;flex-wrap:wrap;gap:8px 18px;margin:28px 0;color:rgba(255,255,255,.64)}
.tagline strong{color:var(--gold)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-cue{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:46px;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;color:rgba(255,255,255,.5)}
.hero-cue i{width:28px;height:1px;background:rgba(255,255,255,.24)}
.arrow{font-size:1.1rem;color:var(--gold)}

.hero-visual{min-height:560px;position:relative}
.community-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;filter:drop-shadow(0 20px 46px rgba(0,0,0,.32))}
.radiant-disc,.light-ring{position:absolute;left:54%;top:47%;transform:translate(-50%,-50%);border-radius:50%}
.radiant-disc{width:350px;height:350px;background:radial-gradient(circle,#fff5bd 0%,#efbd43 26%,rgba(239,189,67,.18) 60%,transparent 72%)}
.light-ring{border:1px solid rgba(255,255,255,.18)}
.ring-one{width:440px;height:440px}.ring-two{width:530px;height:530px}
.glass-token{position:absolute;z-index:4;padding:14px 18px;border-radius:17px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);font-weight:600;box-shadow:0 18px 44px rgba(0,0,0,.2)}
.glass-token span{display:block;color:var(--gold);font-size:.7rem;letter-spacing:.16em;margin-bottom:4px}
.token-one{top:88px;left:5px}.token-two{right:-2px;top:240px}.token-three{left:55px;bottom:65px}

.purpose-section{padding:115px 0;background:linear-gradient(180deg,#fbf7ef,#f6efe5)}
.section-intro{max-width:780px}
.section-kicker{color:#bd8420}
.section-intro h2,.join-heading h2{margin:12px 0 20px;font-size:clamp(2.6rem,4.7vw,4.8rem);line-height:1.02;letter-spacing:-.045em}
.section-intro h2 span{color:#c38a23}
.section-intro>p:last-child{font-size:1.07rem;line-height:1.82;color:var(--muted);max-width:690px}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:58px}
.pillar-card{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:24px;padding:33px;box-shadow:0 18px 50px rgba(7,22,50,.06)}
.pillar-number{font-size:.75rem;letter-spacing:.16em;color:#c38a23;font-weight:700}
.pillar-card h3{font-size:1.35rem;margin:18px 0 10px}
.pillar-card p{margin:0;color:var(--muted);line-height:1.75}
.mission-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:50px;padding:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mission-strip p{margin:0;font-weight:600}
.mission-strip span{width:5px;height:5px;border-radius:50%;background:#c38a23}

.join-section{position:relative;overflow:hidden;color:#fff;background:#07152e;padding:110px 0 0}
.brand-light-field{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}
.join-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,15,36,.96) 0%,rgba(5,15,36,.83) 48%,rgba(5,15,36,.56) 100%)}
.join-content{position:relative;z-index:2}
.join-heading{max-width:760px}
.join-heading p:last-child{color:rgba(255,255,255,.7);line-height:1.8;font-size:1.06rem;max-width:700px}
.response-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px}
.response-card{padding:34px;border-radius:24px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.16)}
.response-card h3{font-size:1.65rem;margin:8px 0 14px}
.response-card>p:not(.card-label):not(.seed-note){color:rgba(255,255,255,.72);line-height:1.75}
.card-label{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold);font-weight:700}
.seed-note{color:var(--gold-light);font-weight:700;margin-top:16px}
.response-card .button{margin-top:15px}
.site-footer{position:relative;z-index:2;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:30px;margin-top:78px;padding:30px 0 34px;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.62);font-size:.88rem}
.site-footer img{width:170px}
.site-footer p{margin:0}

@media(max-width:920px){
  .site-header{grid-template-columns:1fr auto}
  .desktop-nav,.header-action{display:none}
  .menu-toggle{display:block}
  .mobile-nav{position:absolute;z-index:20;top:82px;left:20px;right:20px;background:rgba(5,15,36,.98);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:18px;flex-direction:column;gap:14px}
  .mobile-nav.open{display:flex}
  .mobile-nav a{text-decoration:none;color:#fff}
  .hero-grid,.response-grid{grid-template-columns:1fr}
  .hero-visual{min-height:500px}
  .pillar-grid{grid-template-columns:1fr}
  .site-footer{grid-template-columns:1fr}
}
@media(max-width:600px){
  .shell{width:min(100% - 28px,1180px)}
  .brand-link img{width:160px}
  .hero{min-height:auto}
  .hero-grid{padding-top:50px}
  .hero h1{font-size:3.25rem}
  .hero-visual{min-height:390px}
  .token-one{top:40px}.token-two{top:165px}.token-three{bottom:26px}
  .purpose-section{padding:82px 0}
  .join-section{padding-top:82px}
}