/* Smart Contact Lens Consortium — shared design system
   Ported from the Claude Design mockup ("SmartCL website redesign") */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --bg:#F4F7FA;
  --text:#0E2036;
  --link:#2E6BFF;
  --link-hover:#1B3A5C;

  --navy-1:#1B3A5C;
  --navy-2:#0F2440;
  --navy-3:#0B1E38;
  --navy-4:#081627;
  --cyan:#59D3E8;

  --muted-1:#5B6E86;
  --muted-2:#4A5D74;
  --muted-3:#42556E;
  --muted-4:#8595A9;
  --muted-5:#7E93B0;
  --muted-6:#93A8C6;
  --muted-7:#9DB2CE;
  --muted-8:#8AA0BE;
  --muted-9:#A9BDD6;
  --muted-10:#B9CADF;
  --muted-11:#5E748F;

  --border-1:#E3E9F0;
  --border-2:#E9EEF4;
  --border-3:#EDF1F6;
  --border-4:#DDE4EC;
  --border-5:#D5DDE7;
  --border-6:#D9E1EA;
  --border-7:#C9D5E2;

  --green:#1B9E8A;
  --green-bg:#EEF7F0;
  --green-border:#C9E6D2;
  --chip-bg:#EEF3FF;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Noto Sans JP', 'Space Grotesk', system-ui, sans-serif;
  --font-mono:'Space Mono', monospace;

  --container:1200px;
  --header-h:72px;
}

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); }
img{ max-width:100%; display:block; }
input, textarea, select, button{ font-family:inherit; }
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--link) !important;
  box-shadow:0 0 0 3px rgba(46,107,255,.12);
}
::selection{ background:var(--link); color:#fff; }
button{ border:none; background:none; cursor:pointer; }

@keyframes sclspin{ to{ transform:rotate(360deg); } }
@keyframes sclspinrev{ to{ transform:rotate(-360deg); } }
@keyframes sclfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes sclpulse{ 0%,100%{ opacity:.3; transform:scale(.96); } 50%{ opacity:.85; transform:scale(1); } }
@keyframes sclmarquee{ to{ transform:translateX(-50%); } }

.container{ max-width:var(--container); margin:0 auto; padding:0 40px; }
.grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:66px 66px;
}
.grid-bg.dim{
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
}

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-2);
}
.site-header .container{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; cursor:pointer; flex-shrink:0; }
.brand img{ height:38px; width:auto; }
.brand-text{ line-height:1; }
.brand-eyebrow{ font-family:var(--font-display); font-weight:500; font-size:10px; letter-spacing:.14em; color:var(--muted-1); }
.brand-word{ font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.04em; color:var(--text); margin-top:2px; }

.nav-toggle{ display:none; font-size:22px; color:var(--text); padding:6px; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.nav-link{ font-size:14px; font-weight:500; color:var(--muted-3); cursor:pointer; }
.nav-link:hover{ color:var(--text); }
.nav-sep{ width:1px; height:22px; background:var(--border-4); }
.lang-btn{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--link-hover);
  cursor:pointer; border:1px solid var(--border-5); border-radius:7px; padding:7px 11px;
}
.lang-btn:hover{ border-color:var(--link-hover); }
.nav-cta{
  font-size:14px; font-weight:600; color:#fff; background:var(--link);
  padding:10px 18px; border-radius:8px; cursor:pointer;
}
.nav-cta:hover{ background:#1f57e0; color:#fff; }

.page-body{ padding-top:var(--header-h); }

/* ============ BUTTONS ============ */
.btn{ display:inline-flex; align-items:center; gap:9px; border-radius:9px; font-weight:600; font-size:15px; cursor:pointer; }
.btn-primary{ background:var(--link); color:#fff; padding:15px 28px; }
.btn-primary:hover{ background:#4a80ff; color:#fff; }
.btn-outline{ border:1px solid rgba(255,255,255,.25); color:#EAF1FB; padding:15px 24px; font-weight:500; }
.btn-outline:hover{ border-color:rgba(255,255,255,.55); color:#EAF1FB; }

/* ============ HERO (home) ============ */
.hero{
  position:relative;
  background:radial-gradient(130% 110% at 82% -5%,#1B3A5C 0%,#0F2440 48%,#081627 100%);
  color:#EAF1FB; overflow:hidden;
}
.hero::after{
  content:''; position:absolute; top:-12%; right:-4%; width:680px; height:680px;
  background:radial-gradient(circle,rgba(89,211,232,.16),transparent 62%); pointer-events:none;
}
.hero .container{
  position:relative; padding:104px 40px 92px; display:grid;
  grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.hero-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); }
.hero-title{ font-family:var(--font-display); font-weight:600; font-size:56px; line-height:1.06; letter-spacing:-.02em; margin:20px 0 0; color:#fff; }
.hero-lede{ max-width:520px; font-size:17px; line-height:1.75; color:var(--muted-9); margin:24px 0 36px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:40px; margin-top:52px; flex-wrap:wrap; }
.hero-stat-num{ font-family:var(--font-display); font-weight:700; font-size:32px; color:#fff; letter-spacing:-.02em; }
.hero-stat-label{ font-size:12.5px; color:var(--muted-6); max-width:160px; margin-top:5px; line-height:1.45; }
.hero-stat-sep{ width:1px; background:rgba(255,255,255,.12); }

.hero-visual{ position:relative; height:520px; display:flex; align-items:center; justify-content:center; }
.iris-ring{ position:absolute; width:500px; height:500px; border-radius:50%; border:1px dashed rgba(89,211,232,.28); }
.iris-ring.spin{ animation:sclspin 34s linear infinite; }
.iris-ring-2{ position:absolute; width:420px; height:420px; border-radius:50%; border:1px solid rgba(255,255,255,.09); }
.iris-ring-2.spin{ animation:sclspinrev 48s linear infinite; }
.iris-glow{ position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(89,211,232,.18),transparent 68%); animation:sclpulse 5s ease-in-out infinite; }
.hero-visual img{ position:relative; width:405px; max-width:80%; filter:drop-shadow(0 24px 55px rgba(0,0,0,.55)); animation:sclfloat 7s ease-in-out infinite; }

/* ============ TICKER ============ */
.ticker{
  background:var(--navy-3); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden; display:flex; align-items:center;
}
.ticker-label{
  flex-shrink:0; background:var(--navy-3); padding:16px 24px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  border-right:1px solid rgba(255,255,255,.08); z-index:1;
}
.ticker-viewport{ overflow:hidden; flex:1; }
.ticker-track{
  display:flex; gap:52px; white-space:nowrap; animation:sclmarquee 46s linear infinite;
  padding-left:52px; width:max-content;
}
.ticker-track span{ font-family:var(--font-display); font-size:14px; color:var(--muted-5); letter-spacing:.01em; }

/* ============ GENERIC SECTIONS ============ */
.section{ padding:104px 0; }
.section.on-white{ background:#fff; }
.section.on-bg{ background:var(--bg); border-top:1px solid var(--border-2); }
.section.on-navy{ position:relative; background:var(--navy-3); color:#EAF1FB; overflow:hidden; }
.section-tight{ padding:88px 0; }

.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--link); }
.eyebrow.on-navy{ color:var(--cyan); }
.section-title{ font-family:var(--font-display); font-weight:600; font-size:38px; line-height:1.14; letter-spacing:-.02em; margin:16px 0 0; color:var(--text); }
.section-title.on-navy{ color:#fff; }
.section-title.lg{ font-size:40px; }

/* ============ ABOUT ============ */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; margin-top:18px; }
.about-grid .section-title{ margin:0; }
.about-body{ font-size:16.5px; line-height:1.85; color:var(--muted-2); margin:6px 0 0; }

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

.pillar-card, .stat-card{ border:1px solid var(--border-1); border-radius:16px; padding:32px 30px; }
.pillar-card{ background:#FAFBFD; }
.stat-card{ background:#fff; }
.pillar-num{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--link); }
.pillar-title{ font-family:var(--font-display); font-weight:600; font-size:21px; margin:18px 0 12px; color:var(--text); }
.pillar-desc{ font-size:14.5px; line-height:1.7; color:var(--muted-1); margin:0; }

/* ============ BACKGROUND / STATS ============ */
.stat-top{ display:flex; align-items:baseline; gap:8px; }
.stat-big{ font-family:var(--font-display); font-weight:700; font-size:42px; letter-spacing:-.02em; color:var(--navy-1); }
.stat-unit{ font-family:var(--font-mono); font-size:13px; color:var(--link); }
.stat-label{ font-size:14.5px; line-height:1.65; color:var(--muted-2); margin:16px 0 18px; }
.stat-src{ font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--muted-4); padding-top:14px; border-top:1px solid var(--border-3); }

.research-title{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-1); margin-bottom:18px; }
.research-block{ margin-top:44px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.research-card{ background:var(--navy-2); border-radius:16px; padding:30px 30px; color:#EAF1FB; }
.research-org{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--cyan); text-transform:uppercase; }
.research-text{ font-size:16px; line-height:1.6; color:#fff; margin:14px 0 16px; font-weight:500; }
.research-lead{ font-size:13px; color:var(--muted-6); }

/* ============ ACTIVITIES ============ */
.activity-card{ border:1px solid rgba(255,255,255,.11); border-radius:13px; padding:24px 22px; background:rgba(255,255,255,.02); }
.activity-title{ font-family:var(--font-display); font-weight:600; font-size:16.5px; margin:0 0 9px; color:#fff; }
.activity-desc{ font-size:13px; line-height:1.6; color:var(--muted-7); margin:0; }

/* ============ ROADMAP ============ */
.roadmap-grid{ position:relative; margin-top:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.roadmap-line{ position:absolute; top:9px; left:10px; right:10px; height:2px; background:linear-gradient(90deg,#2E6BFF 0%,#59D3E8 66%,#D3DBE5 66%); }
.roadmap-item{ position:relative; }
.roadmap-dot{ width:20px; height:20px; border-radius:50%; position:relative; z-index:1; box-shadow:0 0 0 5px #fff; }
.roadmap-date{ font-family:var(--font-mono); font-size:13px; color:var(--link); margin-top:22px; }
.roadmap-title{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:8px 0 8px; color:var(--text); }
.roadmap-desc{ font-size:14px; line-height:1.6; color:var(--muted-1); margin:0 0 14px; }
.roadmap-status{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; border-radius:20px; padding:3px 11px; }

/* ============ MEMBERS ============ */
.members-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.members-legend{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.legend-item{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted-1); }
.legend-dot{ width:10px; height:10px; border-radius:3px; }
.legend-note{ font-family:var(--font-mono); font-size:11px; color:var(--muted-4); letter-spacing:.03em; }

.members-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px; }
.member-card{
  background:#fff; border:1px solid var(--border-1); border-radius:12px; padding:20px 20px;
  min-height:104px; display:flex; flex-direction:column; justify-content:space-between;
}
.member-card:hover{ border-color:var(--border-7); }
.member-dot{ width:10px; height:10px; border-radius:3px; }
.member-name{ font-size:14px; line-height:1.45; color:var(--text); font-weight:500; }

/* ============ NEWS ============ */
.news-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:44px; }
.news-card{
  border:1px solid var(--border-1); border-radius:16px; padding:28px 28px; cursor:pointer;
  background:#fff; transition:border-color .15s;
}
.news-card:hover{ border-color:var(--link); }
.news-meta{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.news-date{ font-family:var(--font-mono); font-size:12px; color:var(--muted-4); }
.news-tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--link); background:var(--chip-bg); border-radius:5px; padding:3px 8px;
}
.news-title{ font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.35; margin:0 0 10px; color:var(--text); }
.news-body{ font-size:14px; line-height:1.65; color:var(--muted-1); margin:0; }
.news-link{ font-size:14px; font-weight:600; color:var(--link); cursor:pointer; }

.news-list{ display:grid; gap:20px; max-width:860px; margin:0 auto; }
.news-list-card{ border:1px solid var(--border-1); border-radius:18px; padding:32px 34px; display:grid; grid-template-columns:130px 1fr; gap:28px; align-items:start; }
.news-list-date{ font-family:var(--font-mono); font-size:13px; color:var(--muted-4); }
.news-list-tag{
  display:inline-block; margin-top:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--link); background:var(--chip-bg); border-radius:5px; padding:4px 9px;
}
.news-list-title{ font-family:var(--font-display); font-weight:600; font-size:21px; line-height:1.3; margin:0 0 12px; color:var(--text); }
.news-list-body{ font-size:15px; line-height:1.7; color:var(--muted-1); margin:0 0 16px; }
.news-list-link{ font-size:13.5px; font-weight:600; color:var(--link); }

/* ============ JOIN CTA ============ */
.join{
  position:relative; background:linear-gradient(120deg,#1B3A5C 0%,#0B1E38 100%); color:#fff;
  padding:92px 0; overflow:hidden;
}
.join::before{
  content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle,rgba(89,211,232,.1),transparent 60%); pointer-events:none;
}
.join .container{ position:relative; max-width:760px; text-align:center; }
.join-title{ font-family:var(--font-display); font-weight:600; font-size:42px; letter-spacing:-.02em; margin:0; color:#fff; }
.join-body{ font-size:16.5px; line-height:1.75; color:var(--muted-9); margin:22px auto 34px; max-width:600px; }
.join-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============ SUBPAGE HERO (membership / news) ============ */
.subhero{
  position:relative; background:radial-gradient(120% 120% at 80% 0%,#1B3A5C,#0B1E38);
  color:#EAF1FB; padding:80px 0 72px; overflow:hidden;
}
.subhero .container{ position:relative; }
.subhero-title{ font-family:var(--font-display); font-weight:600; font-size:52px; letter-spacing:-.02em; margin:18px 0 0; color:#fff; }
.subhero-lede{ max-width:560px; font-size:17px; line-height:1.75; color:var(--muted-9); margin:20px 0 0; }

.subsection-title{ font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:-.02em; margin:0 0 40px; color:var(--text); }

/* ============ MEMBERSHIP: benefits / fee / steps / form ============ */
.benefit-card{ border:1px solid var(--border-1); border-radius:16px; padding:28px 26px; background:#FAFBFD; }
.benefit-title{ font-family:var(--font-display); font-weight:600; font-size:17px; margin:0 0 10px; color:var(--text); }
.benefit-desc{ font-size:13.5px; line-height:1.65; color:var(--muted-1); margin:0; }

.fee-card{ background:#fff; border:1px solid var(--border-1); border-radius:18px; padding:38px 36px; }
.fee-card.dark{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }
.fee-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--link); }
.fee-card.dark .fee-label{ color:var(--cyan); }
.fee-amt-row{ display:flex; align-items:baseline; gap:8px; margin-top:16px; }
.fee-amt{ font-family:var(--font-display); font-weight:700; font-size:40px; color:var(--navy-1); letter-spacing:-.02em; }
.fee-card.dark .fee-amt{ color:#fff; }
.fee-unit{ font-size:15px; color:var(--muted-1); }
.fee-note{ margin-top:20px; font-size:14px; line-height:1.6; color:var(--muted-1); }
.fee-card.dark .fee-note{ color:var(--muted-9); }
.fee-note a{ color:var(--link); font-weight:600; }
.fee-card.dark .fee-note a{ color:var(--cyan); }

.step-num{ width:46px; height:46px; border-radius:12px; background:var(--chip-bg); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--link); }
.step-title{ font-family:var(--font-display); font-weight:600; font-size:18px; margin:18px 0 9px; color:var(--text); }
.step-desc{ font-size:14px; line-height:1.65; color:var(--muted-1); margin:0; }

.form-card{ background:#fff; border:1px solid var(--border-1); border-radius:20px; padding:44px 44px; max-width:720px; margin:0 auto; }
.form-title{ font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-.01em; margin:0 0 28px; color:var(--text); }
.form-grid{ display:grid; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ display:block; }
.form-field span{ display:block; font-size:12.5px; font-weight:600; color:var(--muted-3); margin-bottom:7px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; border:1px solid var(--border-6); border-radius:9px; padding:12px 14px; font-size:14.5px; color:var(--text);
}
.form-field select{ background:#fff; }
.form-field textarea{ resize:vertical; }
.form-hp{ position:absolute; left:-9999px; }
.btn-submit{
  background:var(--link); color:#fff; border:none; padding:15px 28px; border-radius:9px;
  font-weight:600; font-size:15px; cursor:pointer; justify-self:start;
}
.btn-submit:hover{ background:#1f57e0; }
.btn-submit:disabled{ opacity:.6; cursor:default; }
.form-success{ display:flex; align-items:center; gap:16px; background:var(--green-bg); border:1px solid var(--green-border); border-radius:14px; padding:28px 28px; }
.form-success-check{ width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.form-success p{ font-size:15px; line-height:1.6; color:var(--navy-1); margin:0; }
.form-error{ font-size:13.5px; color:#B3261E; margin-top:4px; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--navy-4); color:var(--muted-10); padding:72px 0 36px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ height:40px; width:auto; }
.footer-brand .brand-eyebrow{ color:var(--muted-5); }
.footer-brand .brand-word{ color:#fff; }
.footer-tagline{ font-size:13.5px; line-height:1.7; color:var(--muted-5); margin:20px 0 0; max-width:280px; }
.footer-heading{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:16px; }
.footer-links{ display:grid; gap:11px; }
.footer-links a{ font-size:14px; color:var(--muted-10); }
.footer-links a:hover{ color:#fff; }
.footer-contact{ font-size:14px; line-height:1.7; color:var(--muted-10); }
.footer-contact .org{ color:#fff; font-weight:500; }
.footer-contact .mail{ display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:13px; color:var(--cyan); }
.footer-bottom{
  margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.footer-copy{ font-size:12.5px; color:var(--muted-11); }
.footer-bottom a{ font-size:12.5px; color:var(--muted-11); }
.footer-bottom a:hover{ color:var(--muted-10); }

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .container{ padding:0 24px; }
  .hero .container{ padding:96px 24px 64px; grid-template-columns:1fr; }
  .hero-visual{ height:340px; order:-1; }
  .hero-visual img{ width:220px; }
  .iris-ring{ width:300px; height:300px; }
  .iris-ring-2{ width:250px; height:250px; }
  .iris-glow{ width:210px; height:210px; }
  .hero-title{ font-size:38px; }
  .about-grid{ grid-template-columns:1fr; gap:24px; }
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .roadmap-grid{ grid-template-columns:1fr; gap:36px; }
  .roadmap-line{ display:none; }
  .members-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .form-row{ grid-template-columns:1fr; }
  .section{ padding:72px 0; }
  .section-tight{ padding:64px 0; }
}

@media (max-width:720px){
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px;
    border-bottom:1px solid var(--border-2);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
  }
  .main-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .main-nav .nav-link{ padding:12px 0; width:100%; }
  .main-nav .nav-sep{ display:none; }
  .main-nav .lang-btn, .main-nav .nav-cta{ margin-top:10px; }
  .nav-toggle{ display:block; }
  .grid-3, .grid-4{ grid-template-columns:1fr; }
  .members-grid{ grid-template-columns:1fr 1fr; }
  .hero-stats{ gap:24px; }
  .footer-grid{ grid-template-columns:1fr; }
  .news-list-card{ grid-template-columns:1fr; gap:10px; }
  .join-title{ font-size:32px; }
  .subhero-title{ font-size:38px; }
}