@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --bg:#050b19; --surface:#0c1730; --surface2:#111f3a; --stroke:rgba(166,193,234,.16); --ink:#f7fbff; --muted:#a1b0ce; --aqua:#40e4dd; --blue:#528cff; --green:#4fe3bb; --shadow:0 32px 90px rgba(0,0,0,.38); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--bg); font:400 15px/1.65 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif; overflow-x:hidden; }
a { color:inherit; }
button { font:inherit; }
::selection { background:#40e4dd; color:#0b1731; }
.page-bg { z-index:-2; position:fixed; inset:0; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 75% 1%,rgba(35,85,175,.30),transparent 34%), radial-gradient(ellipse at 15% 35%,rgba(16,107,145,.15),transparent 38%), linear-gradient(165deg,#050b19 18%,#0a1630 66%,#060c1a); }
.page-bg:after { position:absolute; content:''; inset:0; opacity:.21; background-image:linear-gradient(rgba(113,158,219,.12) 1px,transparent 1px), linear-gradient(90deg,rgba(113,158,219,.12) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to bottom,transparent,#000 30%,transparent 100%); }
.aurora { width:520px; height:520px; border-radius:50%; position:absolute; filter:blur(100px); opacity:.13; animation:glide 19s ease-in-out infinite alternate; background:var(--aqua); left:-225px; top:310px; }
.aurora.second { background:#4675ff; opacity:.14; left:auto; right:-220px; top:90px; animation-delay:-8s; }
@keyframes glide { 0% { transform:translate3d(0,0,0) scale(.9); } 100% { transform:translate3d(80px,-60px,0) scale(1.18); } }
.shell { max-width:1150px; padding:0 32px; margin:auto; }
.nav { height:112px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-lockup { display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand-emblem { height:51px; width:51px; border:1px solid rgba(124,235,242,.3); background:linear-gradient(145deg,#18355b,#0b1e3f); border-radius:15px; display:grid; place-items:center; box-shadow:0 10px 30px rgba(6,204,211,.13),inset 0 1px rgba(255,255,255,.1); }
.brand-emblem svg { height:31px; width:31px; }
.brand-lines { display:grid; gap:0; line-height:1.35; }
.brand-lines strong { font:800 19px 'Manrope',system-ui,sans-serif; letter-spacing:-.04em; }
.brand-lines small { font-size:10px; color:#94a9cb; letter-spacing:.15em; font-weight:800; text-transform:uppercase; }
.nav-right { display:flex; align-items:center; gap:18px; font-size:12px; font-weight:700; color:#b8c9e1; }
.nav-bullet { width:6px; height:6px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 4px rgba(64,228,221,.11); }
.top-tag { display:flex; align-items:center; gap:10px; border:1px solid rgba(113,156,204,.19); border-radius:50px; background:rgba(255,255,255,.025); padding:8px 14px; }
.top-tag svg { width:16px; height:16px; color:#5ae8d7; }
.page { padding:21px 0 50px; }
.breadcrumb { display:flex; gap:10px; align-items:center; color:#9cafd0; font-size:12px; font-weight:700; margin-bottom:20px; }
.breadcrumb span { color:#3dbec8; }
.hero { isolation:isolate; position:relative; min-height:327px; padding:42px 51px 38px; overflow:hidden; border:1px solid rgba(107,155,223,.21); border-radius:30px; background:linear-gradient(112deg,rgba(11,34,72,.98) 8%,rgba(13,40,80,.97) 55%,rgba(9,30,63,.95) 100%); box-shadow:var(--shadow); }
.hero:before { content:''; position:absolute; inset:-1px; z-index:-1; background:radial-gradient(ellipse at 85% 70%,rgba(23,185,215,.22),transparent 44%),radial-gradient(ellipse at 65% 0%,rgba(65,108,245,.13),transparent 50%); }
.hero:after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(190,235,255,.07) 48%,transparent 66%); transform:translateX(-100%); animation:shimmer 13s linear infinite; pointer-events:none; }
@keyframes shimmer { 0%,58% {transform:translateX(-110%)} 75%,100% {transform:translateX(110%)} }
.hero-grid { display:grid; grid-template-columns:1.28fr .72fr; align-items:center; gap:6px; min-height:235px; }
.kicker { display:inline-flex; gap:10px; align-items:center; font-size:10px; letter-spacing:.21em; color:#87ebe7; font-weight:800; text-transform:uppercase; }
.kicker:before { display:block; width:20px; height:2px; content:''; background:#55e2db; }
.hero h1 { font:800 clamp(35px,4.3vw,52px)/1.13 'Manrope',system-ui,sans-serif; letter-spacing:-.052em; margin:18px 0 14px; max-width:610px; text-wrap:balance; }
.hero h1 em { font-style:normal; background:linear-gradient(90deg,#fff,#66d9f2); background-clip:text; color:transparent; }
.hero p { color:#bbceed; max-width:610px; line-height:1.85; margin:0; font-size:14px; }
.hero-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-top:8px; position:relative; }
.hero-chips { display:flex; flex-wrap:wrap; gap:9px; }
.pill { color:#d5e5fd; background:rgba(224,242,255,.07); border:1px solid rgba(173,209,255,.17); font-size:11px; font-weight:700; padding:6px 12px; border-radius:30px; }
.hero-id { color:#9bb8dc; font-size:10px; font-weight:800; letter-spacing:.15em; }
.hero-art { position:relative; width:100%; min-height:238px; display:flex; align-items:center; justify-content:center; }
.hero-art .orb { width:204px; height:204px; border-radius:50%; position:absolute; border:1px solid rgba(131,227,251,.22); box-shadow:0 0 0 27px rgba(71,157,221,.04),0 0 0 56px rgba(71,157,221,.035); animation:breathe 5s ease-in-out infinite; }
.hero-art .orb:before { content:''; position:absolute; inset:32px; border:1px dashed rgba(123,211,239,.2); border-radius:50%; animation:spin 35s linear infinite; }
@keyframes breathe { 50% {transform:scale(1.05); box-shadow:0 0 0 36px rgba(71,157,221,.045),0 0 0 68px rgba(71,157,221,.027)} }
@keyframes spin { to {transform:rotate(360deg)} }
.core { z-index:1; width:103px; height:103px; border-radius:26px; background:linear-gradient(135deg,rgba(39,91,155,.83),rgba(6,36,77,.95)); border:1px solid rgba(160,234,245,.37); box-shadow:0 18px 50px rgba(0,0,0,.2),0 0 45px rgba(39,209,219,.10); display:grid; place-items:center; animation:floaty 7s ease-in-out infinite; }
.core svg { width:59px; height:59px; }
@keyframes floaty { 50% {transform:translateY(-10px)} }
.satellite { position:absolute; display:flex; align-items:center; gap:7px; color:#dffbff; background:rgba(11,38,74,.85); border:1px solid rgba(112,196,227,.28); border-radius:12px; padding:8px 11px; font-size:10px; letter-spacing:.04em; font-weight:800; box-shadow:0 10px 28px rgba(0,0,0,.16); backdrop-filter:blur(6px); }
.satellite.one { top:25px; right:3px; animation:floaty 7s ease-in-out -2s infinite; }
.satellite.two { bottom:27px; left:0; animation:floaty 7s ease-in-out -4s infinite; }
.sat-dot { width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 3px rgba(64,228,221,.13); }
.surface-grid { display:grid; grid-template-columns:minmax(0,1.38fr) minmax(300px,.87fr); gap:20px; margin-top:23px; }
.panel { border:1px solid var(--stroke); border-radius:23px; background:linear-gradient(153deg,rgba(16,32,59,.96),rgba(10,22,44,.96)); box-shadow:0 17px 44px rgba(0,0,0,.13); padding:30px 32px; position:relative; overflow:hidden; animation:rise .65s ease both; }
.panel:nth-child(2) { animation-delay:.12s; }
@keyframes rise { from {opacity:0;transform:translateY(14px)} to {opacity:1;transform:translateY(0)} }
.panel:before { content:''; position:absolute; top:0; left:32px; width:88px; height:2px; background:linear-gradient(90deg,var(--aqua),transparent); }
.panel-kicker { color:#6ddfdc; font-size:10px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; margin-bottom:9px; }
.panel h2 { font:800 21px 'Manrope',sans-serif; letter-spacing:-.04em; margin:0 0 7px; }
.panel-sub { color:#98abc9; font-size:12px; margin:0 0 21px; }
.detail-list { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; row-gap:22px; border-top:1px solid var(--stroke); padding-top:24px; margin-top:21px; }
.detail { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.detail-icon { flex:none; width:39px; height:39px; display:grid; place-items:center; background:rgba(71,128,196,.13); border:1px solid rgba(106,167,214,.16); border-radius:11px; color:#79d8e5; }
.detail-icon svg { width:19px; height:19px; stroke-width:1.7; }
.detail-label { display:block; color:#8da2c0; font-size:11px; }
.detail-value { display:block; font-size:13px; font-weight:800; overflow-wrap:anywhere; margin-top:1px; }
.detail-caption { display:block; color:#889fc0; font-size:10px; }
.actions { margin-top:29px; display:flex; flex-direction:column; gap:10px; }
.btn { border-radius:12px; padding:14px 18px; border:1px solid transparent; display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:800; font-size:13px; cursor:pointer; transition:transform .2s,box-shadow .2s,border-color .2s,background .2s; }
.btn svg { width:19px; height:19px; flex:none; }
.btn:hover:not(.is-disabled) { transform:translateY(-2px); }
.btn-main { color:#03243c; background:linear-gradient(96deg,#4ce7dc,#78caff); box-shadow:0 10px 33px rgba(53,225,225,.15); }
.btn-main:hover:not(.is-disabled) { box-shadow:0 13px 35px rgba(53,225,225,.23); }
.btn-outline { color:#dbe8fd; background:rgba(255,255,255,.03); border-color:rgba(151,182,219,.23); }
.btn-outline:hover:not(.is-disabled) { border-color:rgba(132,215,240,.65); background:rgba(255,255,255,.06); }
.btn.is-disabled { opacity:.48; cursor:not-allowed; pointer-events:none; filter:grayscale(.7); }
.status-message { min-height:30px; color:#9aaccc; font-size:11px; text-align:center; line-height:1.55; }
.notice { border-radius:13px; background:rgba(95,160,234,.07); border:1px solid rgba(96,172,238,.13); color:#a4b9d6; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; font-size:11px; line-height:1.7; margin-top:10px; }
.notice svg { width:16px; height:16px; flex:none; color:#55d6e1; margin-top:2px; }
.guide-list { display:grid; gap:19px; margin-top:24px; }
.guide-row { display:flex; gap:12px; align-items:flex-start; }
.guide-n { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:#91dbf8; background:#153356; font-weight:800; font-size:11px; }
.guide-row strong { display:block; font-size:12px; }
.guide-row p { color:#90a4c2; font-size:11px; line-height:1.65; margin:2px 0 0; }
.divider { height:1px; background:var(--stroke); margin:25px 0; }
.trust { display:flex; gap:10px; align-items:center; font-weight:800; color:#8bd7c4; font-size:11px; }
.trust svg { width:19px; height:19px; }
.trusttext { font-size:11px; color:#8da1c1; margin:11px 0 0; }
.join-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:20px; }
.mini-meta { display:flex; gap:7px; align-items:center; font-size:11px; color:#91a6c7; }
.mini-meta svg {width:14px;height:14px;color:#63dcd4}
.copy-btn { background:transparent; color:#9cd8dc; border:0; padding:4px 0; font-weight:700; cursor:pointer; font-size:11px; }
.copy-btn:hover { color:white; }
.footer { padding:24px 0 15px; display:flex; justify-content:space-between; border-top:1px solid rgba(147,188,226,.10); margin-top:29px; gap:15px; color:#7789a9; font-size:11px; }
.home-panel { margin-top:22px; }
.home-feature { display:flex; gap:14px; align-items:center; padding-top:13px; color:#a9bedb; font-size:12px; }
.home-feature svg {width:18px;height:18px;flex:none;color:#64d8e6}
@media (max-width:930px) { .hero-grid {grid-template-columns:1.3fr .7fr} .hero-art{ transform:scale(.88) } .hero{ padding:37px 34px 30px } .surface-grid{ grid-template-columns:1.05fr .95fr } .panel{padding:26px 24px;} .detail-list{grid-template-columns:1fr;} }
@media (max-width:720px) { .shell{padding:0 19px} .nav{height:91px} .nav-right .nav-text{display:none} .top-tag{padding:9px} .hero{padding:30px 26px} .hero-grid{grid-template-columns:1fr;min-height:unset} .hero-art{display:none} .hero-bottom{margin-top:27px} .surface-grid{grid-template-columns:1fr} .detail-list{grid-template-columns:1fr 1fr} .hero h1{font-size:37px} .panel{padding:26px 23px} .footer{flex-wrap:wrap} }
@media (max-width:450px) { .shell{padding:0 13px} .brand-lines strong{font-size:17px} .brand-lines small{font-size:9px;letter-spacing:.07em} .brand-emblem{width:44px;height:44px} .hero{padding:26px 21px;border-radius:21px} .hero h1{font-size:32px} .hero p{font-size:13px} .hero-id{display:none} .detail-list{grid-template-columns:1fr} .panel{padding:24px 20px;border-radius:19px} .breadcrumb{font-size:11px} }
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.copy-btn{display:inline-flex;align-items:center;gap:6px}
.copy-btn svg{width:14px;height:14px;flex:none}


/* Metrocom Meeting Portal v3.2: compact single-action meeting invitations.
   Scoped to invitation pages, so the home and administration interfaces remain unchanged. */
body.meeting-compact { min-height:100svh; display:flex; flex-direction:column; }
.meeting-compact .compact-nav { height:86px; flex:none; max-width:1130px; width:100%; }
.compact-nav-pill { display:inline-flex; align-items:center; gap:10px; letter-spacing:.12em; font-size:10px; font-weight:800; color:#a8dbec; padding:9px 15px; border:1px solid rgba(143,193,239,.18); border-radius:100px; background:rgba(15,33,65,.55); white-space:nowrap; }
.compact-live-dot { display:inline-block; width:7px; height:7px; border-radius:100%; background:#54e8cb; box-shadow:0 0 0 4px rgba(84,232,203,.12),0 0 14px rgba(84,232,203,.55); }
.meeting-compact .compact-main { max-width:1130px; width:100%; flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:24px; }
.compact-card { width:100%; min-height:450px; overflow:hidden; border:1px solid rgba(133,190,237,.26); border-radius:29px; background:radial-gradient(circle at 87% 45%,rgba(27,151,197,.20) 0%,transparent 37%),linear-gradient(115deg,rgba(12,35,74,.97) 0%,rgba(13,34,69,.96) 65%,rgba(10,25,53,.98) 100%); box-shadow:0 28px 100px rgba(0,0,0,.32); position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr); align-items:center; isolation:isolate; animation:compact-enter .55s ease-out both; }
.compact-card::after { content:""; position:absolute; pointer-events:none; inset:0; border-radius:inherit; box-shadow:inset 0 1px rgba(255,255,255,.06); }
@keyframes compact-enter { from {opacity:0; transform:translateY(12px)} to {opacity:1;transform:translateY(0)} }
.compact-copy { padding:43px 0 39px 52px; position:relative; z-index:2; min-width:0; }
.compact-eyebrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:10px; font-weight:800; letter-spacing:.15em; color:#75ede1; }
.compact-eyebrow-line { width:20px; height:2px; flex:none; background:#57e2da; }
.compact-type { letter-spacing:.07em; color:#9bb8df; background:rgba(116,165,221,.1); border:1px solid rgba(136,192,241,.15); padding:4px 9px; border-radius:20px; max-width:100%; }
.compact-card h1 { font:800 clamp(35px,3.6vw,49px)/1.12 'Manrope',sans-serif; letter-spacing:-.055em; margin:24px 0 14px; color:#f9fcff; max-width:690px; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.compact-description { font-size:14px; line-height:1.8; color:#b4cbe5; margin:0; max-width:570px; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.compact-details { display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:26px; }
.compact-detail { display:flex; align-items:center; gap:11px; min-width:0; }
.compact-detail > svg { width:19px; height:19px; padding:10px; box-sizing:content-box; flex:none; color:#62dedd; background:rgba(84,174,218,.10); border:1px solid rgba(130,200,241,.14); border-radius:11px; }
.compact-detail small { display:block; font-size:10px; line-height:1.35; color:#8ca9cb; }
.compact-detail strong { display:block; font-size:12px; font-weight:800; color:#e7f5ff; line-height:1.45; overflow-wrap:anywhere; }
.compact-tz { font-size:10px; font-weight:600; color:#98afd0; }
.compact-join { width:min(100%,375px); min-height:57px; margin-top:26px; padding:14px 19px; background:linear-gradient(100deg,#55e8d6,#75caff); border:1px solid rgba(196,255,255,.55); border-radius:13px; display:flex; align-items:center; justify-content:center; gap:11px; color:#052c45; text-decoration:none; font-weight:800; font-size:15px; box-shadow:0 14px 35px rgba(42,208,224,.15); transition:transform .18s,box-shadow .18s,filter .18s; }
.compact-join svg { width:21px; height:21px; flex:none; }
.compact-join svg:last-child { width:19px; height:19px; margin-left:auto; }
.compact-join svg:first-child { margin-right:auto; }
.compact-join:hover:not(.is-disabled) { transform:translateY(-2px); box-shadow:0 16px 42px rgba(39,216,226,.25); filter:saturate(1.1); }
.compact-join:focus-visible { outline:3px solid white; outline-offset:3px; }
.compact-join.is-disabled { opacity:.5; filter:grayscale(.4); cursor:not-allowed; pointer-events:none; }
.compact-status { font-size:11px; min-height:16px; line-height:1.5; margin:10px 0 0; color:#8fafcd; max-width:390px; }
.compact-art { align-self:stretch; position:relative; min-width:0; display:grid; place-items:center; }
.compact-rings { position:absolute; width:245px; height:245px; display:grid; place-items:center; }
.compact-ring { position:absolute; border:1px solid rgba(124,211,236,.18); border-radius:100%; }
.compact-ring.ring-one { width:208px;height:208px; animation:compact-breathe 7s ease-in-out infinite; }
.compact-ring.ring-two { width:268px;height:268px; opacity:.5; animation:compact-breathe 7s ease-in-out -2s infinite; }
.compact-ring.ring-three { width:328px;height:328px; opacity:.21; animation:compact-breathe 7s ease-in-out -4s infinite; }
@keyframes compact-breathe { 50% { transform:scale(1.055);opacity:.6;} }
.compact-art-core { width:119px;height:119px;display:grid;place-items:center;position:relative;border:1px solid rgba(141,222,250,.37);border-radius:32px;background:linear-gradient(150deg,#1c548a,#0c2e5c);box-shadow:0 30px 90px rgba(10,12,38,.38),0 0 60px rgba(48,214,229,.16);animation:compact-float 6s ease-in-out infinite; }
.compact-art-core svg { width:70px; height:70px; }
@keyframes compact-float {50%{transform:translateY(-9px)}}
.compact-orbit-dot {width:8px;height:8px;position:absolute;top:30%;right:16%;border-radius:100%;background:#61f1e5;box-shadow:0 0 0 6px rgba(70,242,219,.09),0 0 16px rgba(65,238,227,.7)}
.compact-art-label {position:absolute;bottom:48px; font-size:10px;letter-spacing:.16em;font-weight:800;color:#93bada;}
.compact-footer { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 8px 0; color:#8aa7c8; font-size:11px; }
.compact-footer-brand {font-weight:700;color:#a8bfda}
@media(max-width:900px) {
  .compact-card {grid-template-columns:minmax(0,1fr) 230px;}
  .compact-copy {padding-left:36px;}
  .compact-art {transform:scale(.8)}
  .compact-card h1 {font-size:37px}
}
@media(max-width:720px) {
  .meeting-compact .compact-nav {height:76px;}
  .meeting-compact .compact-main {justify-content:flex-start; padding-top:18px; padding-bottom:20px;}
  .compact-nav-pill {font-size:0;padding:9px 11px;}
  .compact-nav-pill .compact-live-dot {width:8px;height:8px;}
  .compact-card {display:block; min-height:0; border-radius:23px;}
  .compact-copy {padding:34px 30px 30px;}
  .compact-art {display:none;}
  .compact-card h1 {font-size:clamp(29px,7vw,42px); margin:20px 0 12px;}
  .compact-description {font-size:13px;line-height:1.65;}
  .compact-details {margin-top:24px;gap:13px 20px;}
  .compact-join {width:100%;margin-top:27px;}
  .compact-footer {flex-wrap:wrap;gap:3px;padding:18px 2px 0;}
}
@media(max-width:390px) {
  .meeting-compact .compact-nav {height:70px;}
  .compact-copy {padding:26px 20px 23px;}
  .compact-eyebrow {font-size:9px;gap:7px}
  .compact-eyebrow-line {width:13px}
  .compact-card h1 {font-size:29px;margin-top:18px}
  .compact-detail > svg {width:16px;height:16px;padding:8px}
  .compact-join {min-height:53px;margin-top:23px}
}
@media(max-height:720px) and (min-width:721px) {
  .meeting-compact .compact-nav {height:71px}
  .compact-card {min-height:390px}
  .compact-copy {padding-top:28px;padding-bottom:26px}
  .compact-card h1 {margin-top:14px}
  .compact-details {margin-top:18px}
  .compact-join {margin-top:17px}
}
@media(prefers-reduced-motion:reduce){.compact-card,.compact-ring,.compact-art-core {animation:none}}