/* =====================================================================
   RezSoulution app styles
   Night-lake palette taken from the logo. Signature motif: beadwork.
   ===================================================================== */
:root{
  --night:#030915; --deep:#071833; --panel:#0b1f3f; --panel-2:#0e2750;
  --blue:#1e8bff; --blue-2:#5fb0ff; --ice:#cfe8ff; --silver:#c9d3de; --muted:#8fa3bd;
  --white:#f5f7fa; --yellow:#ffc400; --red:#e8202a; --black:#0a0a0a;
  --line:rgba(207,232,255,.14);
  --radius-l:22px; --radius-m:14px; --radius-s:999px;
  --wrap:min(1180px, 100% - 2 * clamp(16px, 4vw, 40px));
  --t-hero:clamp(2.2rem, 5.6vw, 4.4rem);
  --t-h2:clamp(1.6rem, 3.4vw, 2.5rem);
  --t-h3:clamp(1.12rem, 1.6vw, 1.3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;min-height:100svh;background:var(--night);color:var(--white);
  font:400 1rem/1.6 "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--ice)}
h1,h2,h3{line-height:1.12;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--yellow);color:#000;padding:10px 16px;border-radius:8px;font-weight:600}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:6px}

/* ---------- Night sky backdrop ---------- */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 8%, rgba(207,232,255,.9), transparent 60%),
    radial-gradient(1px 1px at 63% 34%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 81% 14%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 90% 70%, rgba(207,232,255,.6), transparent 60%),
    radial-gradient(1px 1px at 6% 86%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(60% 40% at 20% 0%, rgba(30,139,255,.18), transparent 70%),
    radial-gradient(50% 40% at 85% 10%, rgba(95,176,255,.12), transparent 70%),
    linear-gradient(180deg, #030915 0%, #061633 55%, #030915 100%);
  background-size:340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,340px 340px,100% 100%,100% 100%,100% 100%}

/* ---------- Beadwork divider (signature) ---------- */
.beadline{height:22px;margin:clamp(28px,6vw,64px) auto;width:var(--wrap);
  background:
    radial-gradient(circle at 50% 50%, var(--blue) 0 4px, transparent 4.5px) 0 0/22px 22px,
    radial-gradient(circle at 50% 50%, var(--white) 0 4px, transparent 4.5px) 11px 0/44px 22px,
    radial-gradient(circle at 50% 50%, var(--yellow) 0 4px, transparent 4.5px) 0 0/66px 22px,
    radial-gradient(circle at 50% 50%, var(--red) 0 4px, transparent 4.5px) 33px 0/66px 22px;
  -webkit-mask:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  opacity:.85}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:calc(10px + env(safe-area-inset-top,0px)) clamp(14px,3vw,32px) 10px;
  background:rgba(3,9,21,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--white);font-weight:700;font-size:1.22rem;letter-spacing:.01em;margin-right:auto}
.brand img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px rgba(30,139,255,.6), 0 0 18px rgba(30,139,255,.45)}
.brand b{color:var(--blue-2);font-weight:700}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{color:var(--silver);text-decoration:none;font-weight:500;padding:8px 12px;border-radius:var(--radius-s);transition:color .2s, background .2s}
.site-nav a:hover{color:#fff;background:rgba(30,139,255,.12)}
.site-nav a[aria-current="page"]{color:#fff;background:rgba(30,139,255,.2)}
.site-nav .nav-cta{color:#fff;background:linear-gradient(180deg,#2b95ff,#1471d6);margin-left:8px;padding:9px 16px;box-shadow:0 6px 20px rgba(30,139,255,.35)}
.site-nav .nav-cta:hover{background:linear-gradient(180deg,#45a3ff,#1e8bff)}
.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:rgba(11,31,63,.8);cursor:pointer;position:relative}
.menu-lines,.menu-lines::before,.menu-lines::after{position:absolute;left:12px;right:12px;height:2px;background:var(--white);border-radius:2px;transition:transform .3s, opacity .3s}
.menu-lines{top:22px}.menu-lines::before{content:"";left:0;right:0;top:-7px}.menu-lines::after{content:"";left:0;right:0;top:7px}
.menu-toggle[aria-expanded="true"] .menu-lines{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-lines::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-lines::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:980px){
  .menu-toggle{display:block}
  .site-nav{position:fixed;inset:0;top:0;z-index:-1;flex-direction:column;justify-content:center;gap:6px;padding:90px 24px 40px;
    background:rgba(3,9,21,.97);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s, transform .3s, visibility .3s}
  .site-nav a{font-size:1.35rem;padding:12px 22px}
  .site-nav .nav-cta{margin:14px 0 0}
  .menu-open .site-nav{opacity:1;visibility:visible;transform:none}
  .menu-open{overflow:hidden}
}

/* ---------- Buttons & chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 24px;border-radius:var(--radius-s);
  font:600 1rem "Saira",sans-serif;color:#fff;text-decoration:none;cursor:pointer;border:1.5px solid var(--blue);
  background:linear-gradient(180deg, rgba(30,139,255,.38), rgba(30,139,255,.12));transition:transform .2s, background .2s, box-shadow .2s}
.btn:hover{transform:translateY(-2px);background:linear-gradient(180deg, rgba(30,139,255,.6), rgba(30,139,255,.22));box-shadow:0 10px 26px rgba(30,139,255,.3)}
.btn-big{min-height:54px;padding:14px 32px;font-size:1.08rem}
.btn-small{min-height:40px;padding:8px 18px;font-size:.95rem}
.btn-red{border-color:var(--red);background:linear-gradient(180deg, rgba(232,32,42,.5), rgba(232,32,42,.2))}
.btn-red:hover{background:linear-gradient(180deg, rgba(232,32,42,.75), rgba(232,32,42,.35));box-shadow:0 10px 26px rgba(232,32,42,.3)}
.chip{font:500 .95rem "Saira",sans-serif;color:var(--silver);background:rgba(11,31,63,.7);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:8px 16px;min-height:42px;cursor:pointer;transition:all .2s}
.chip:hover{color:#fff;border-color:rgba(30,139,255,.6)}
.chip.is-on{color:#fff;background:rgba(30,139,255,.28);border-color:var(--blue)}
.note{color:var(--muted);font-size:.95rem}

/* =====================================================================
   HOME: the map
   ===================================================================== */
.map-hero{position:relative;width:var(--wrap);margin:0 auto;padding:clamp(24px,5vw,56px) 0 0;
  display:grid;grid-template-columns:minmax(260px, 340px) 1fr;gap:clamp(18px,3vw,40px);align-items:center}
.map-intro h1{font-size:var(--t-hero);font-weight:800;letter-spacing:-.02em;margin-bottom:.35em}
.map-intro h1 span{display:block;background:linear-gradient(90deg,#fff 0%, var(--blue-2) 60%, var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.map-intro p{color:var(--silver);font-size:1.08rem;max-width:34ch}
.state-picker select{width:100%;min-height:50px;padding:0 44px 0 16px;border-radius:var(--radius-m);font:500 1rem "Saira",sans-serif;
  color:var(--white);background:rgba(11,31,63,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23cfe8ff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
  border:1px solid rgba(30,139,255,.45);-webkit-appearance:none;appearance:none;cursor:pointer}
.map-legend{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.9rem}
.map-legend li{display:flex;align-items:center;gap:8px}
.key{width:14px;height:14px;border-radius:4px;display:inline-block}
.key-on{background:var(--blue);box-shadow:0 0 10px var(--blue)}
.key-off{background:rgba(30,139,255,.14);border:1px solid rgba(207,232,255,.3)}

.map-stage{position:relative}
.us-map{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
.state{fill:rgba(30,139,255,.1);stroke:rgba(207,232,255,.32);stroke-width:.7;stroke-linejoin:round;cursor:pointer;
  transition:fill .25s, stroke .25s;outline:none}
.state:hover,.state:focus-visible{fill:rgba(95,176,255,.38);stroke:#fff;stroke-width:1.2}
.state.has-nations{fill:url(#stateGlow);fill-opacity:.85;stroke:rgba(255,255,255,.7)}
.state.has-nations:hover,.state.has-nations:focus-visible{fill-opacity:1;filter:drop-shadow(0 0 8px rgba(30,139,255,.9))}
.state.is-active{fill:var(--yellow)!important;fill-opacity:1;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 0 12px rgba(255,196,0,.8))}
.map-markers circle{fill:#fff;pointer-events:none}
.map-markers .pulse{fill:none;stroke:#fff;stroke-width:1.2;animation:ping 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.map-tip{position:absolute;z-index:5;pointer-events:none;padding:6px 12px;border-radius:10px;font-size:.9rem;font-weight:600;white-space:nowrap;
  background:rgba(3,9,21,.92);border:1px solid rgba(30,139,255,.5);transform:translate(-50%, calc(-100% - 12px))}
.map-tip small{display:block;font-weight:400;color:var(--muted)}

.state-panel{position:absolute;right:0;top:clamp(24px,5vw,56px);width:min(360px, 100%);z-index:10;
  padding:22px 22px 24px;border-radius:var(--radius-l);background:linear-gradient(180deg, #0e2750, #071833);
  border:1px solid rgba(30,139,255,.45);box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation:panelIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(12px) scale(.98)}}
.panel-close{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--white);font-size:1.5rem;line-height:1;cursor:pointer}
.panel-close:hover{background:rgba(255,255,255,.08)}
.panel-kicker{color:var(--blue-2);font-weight:600;margin:0 0 2px;font-size:.92rem}
.panel-title{font-size:1.7rem;margin-bottom:14px;padding-right:40px}
.panel-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.panel-list a{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:12px;border-radius:var(--radius-m);text-decoration:none;
  color:var(--white);background:rgba(3,9,21,.45);border:1px solid var(--line);transition:border-color .2s, transform .2s}
.panel-list a:hover{border-color:var(--blue);transform:translateX(3px)}
.panel-list .seal{width:44px;height:44px;border-radius:50%;
  background:conic-gradient(from -90deg, var(--white) 0 25%, var(--yellow) 0 50%, var(--red) 0 75%, var(--black) 0);
  box-shadow:0 0 0 2px var(--blue)}
.panel-list b{display:block;font-size:1.02rem}
.panel-list small{color:var(--muted)}
.panel-empty p{color:var(--silver)}

@media (max-width:900px){
  .map-hero{grid-template-columns:1fr;text-align:left}
  .map-intro p{max-width:none}
  .state-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:24px 24px 0 0;max-height:70svh;overflow:auto;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));animation:sheetIn .35s cubic-bezier(.16,1,.3,1)}
  .state-panel::before{content:"";display:block;width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.25);margin:-8px auto 14px}
  @keyframes sheetIn{from{transform:translateY(100%)}}
}

/* ---------- Pillars ---------- */
.section-title{font-size:var(--t-h2);text-align:center;margin:0 auto clamp(24px,4vw,40px);max-width:22ch}
.pillars{width:var(--wrap);margin:0 auto}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.pillar{--accent:var(--blue);position:relative;display:flex;flex-direction:column;padding:26px 22px 22px;border-radius:var(--radius-l);text-decoration:none;color:var(--white);
  background:linear-gradient(180deg, rgba(14,39,80,.75), rgba(7,24,51,.6));border:1px solid var(--line);overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s}
.pillar::after{content:"";position:absolute;inset:auto -30% -60% -30%;height:80%;background:radial-gradient(closest-side, var(--accent), transparent);opacity:.18;transition:opacity .3s}
.pillar:hover{transform:translateY(-6px);border-color:var(--accent)}
.pillar:hover::after{opacity:.35}
.pillar h3{font-size:1.45rem;margin:18px 0 8px}
.pillar p{color:var(--silver);flex:1}
.pillar-go{font-weight:600;color:var(--accent);filter:brightness(1.25)}
.pillar-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:rgba(3,9,21,.5);border:1px solid var(--accent);position:relative}
.pillar-icon::before{content:"";width:30px;height:30px;background:var(--accent);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.pillar-market{--accent:var(--yellow);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h14l-1.2 12H6.2L5 8zm4 0V6a3 3 0 016 0v2' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
.pillar-language{--accent:var(--blue);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C8 12 13 6 21 3c-1 7-6 13-14 16M4 20l9-9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
.pillar-mmiw{--accent:var(--red);--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4l.5 6L20 22H4l5.5-14z'/%3E%3C/svg%3E")}
.pillar-resources{--accent:#7fd3ff;--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M15 15l6 6' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
@media (max-width:1020px){.pillar-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pillar-grid{grid-template-columns:1fr}}

/* ---------- Red dress (MMIW) ---------- */
.dress{display:inline-block;width:44px;height:60px;flex:none;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 60'%3E%3Cpath d='M16 0h12l1 4-3 12 16 44H2l16-44-3-12z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 60'%3E%3Cpath d='M16 0h12l1 4-3 12 16 44H2l16-44-3-12z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(232,32,42,.6))}
.dress-big{width:70px;height:96px;margin-bottom:14px}
.mmiw-band{width:var(--wrap);margin:clamp(40px,7vw,80px) auto 0}
.mmiw-band-inner{display:flex;align-items:center;gap:clamp(16px,3vw,32px);padding:clamp(20px,3vw,32px);border-radius:var(--radius-l);
  background:linear-gradient(110deg, rgba(232,32,42,.22), rgba(7,24,51,.7) 60%);border:1px solid rgba(232,32,42,.45)}
.mmiw-band-inner > div{flex:1}
.mmiw-band h2{font-size:clamp(1.35rem,2.6vw,1.9rem);margin-bottom:6px}
.mmiw-band p{color:var(--silver);margin:0}
@media (max-width:720px){.mmiw-band-inner{flex-direction:column;align-items:flex-start}}

.join-band{width:var(--wrap);margin:clamp(40px,7vw,80px) auto 0;text-align:center;padding:clamp(36px,6vw,64px) 20px;border-radius:28px;
  background:radial-gradient(70% 90% at 50% 0%, rgba(30,139,255,.3), transparent 70%), rgba(7,24,51,.55);border:1px solid rgba(30,139,255,.35)}
.join-band h2{font-size:var(--t-h2)}
.join-band p{color:var(--silver);max-width:52ch;margin:0 auto 24px}

/* =====================================================================
   Inner pages
   ===================================================================== */
.page-hero{width:var(--wrap);margin:0 auto;padding:clamp(36px,7vw,80px) 0 clamp(20px,3vw,32px);text-align:center}
.page-hero h1{font-size:var(--t-hero);font-weight:800;max-width:20ch;margin:0 auto .3em;letter-spacing:-.02em}
.page-hero p{color:var(--silver);font-size:1.12rem;max-width:58ch;margin:0 auto}
.hero-red h1{max-width:24ch}

/* Products */
.shop,.res-list,.missing,.alerts,.join,.lodge{width:var(--wrap);margin:0 auto}
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 24px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(240px,100%),1fr));gap:clamp(12px,1.6vw,20px)}
.product{border-radius:var(--radius-l);overflow:hidden;background:rgba(11,31,63,.65);border:1px solid var(--line);transition:transform .3s, border-color .3s}
.product:hover{transform:translateY(-4px);border-color:rgba(30,139,255,.6)}
.product[hidden]{display:none}
.product-art{--a:var(--blue);aspect-ratio:4/3;position:relative;background-color:#0a1d3b}
.accent-blue{--a:var(--blue)}.accent-red{--a:var(--red)}.accent-yellow{--a:var(--yellow)}.accent-white{--a:var(--white)}
.art-beadwork{background:radial-gradient(circle, var(--a) 0 5px, transparent 5.5px) 0 0/18px 18px, radial-gradient(circle, #fff 0 5px, transparent 5.5px) 9px 9px/18px 18px, #0a1d3b}
.art-jewelry{background:radial-gradient(circle at 50% 50%, transparent 30%, var(--a) 31% 36%, transparent 37%), radial-gradient(circle at 50% 50%, #46d1c8 0 14%, transparent 15%), repeating-conic-gradient(from 0deg, #0a1d3b 0 10deg, #0d2550 10deg 20deg)}
.art-art{background:repeating-linear-gradient(45deg, var(--a) 0 8px, transparent 8px 22px), repeating-linear-gradient(-45deg, rgba(255,255,255,.5) 0 3px, transparent 3px 22px), #0a1d3b}
.art-food{background:radial-gradient(ellipse at 50% 70%, #8a6a3a 0 30%, transparent 31%), radial-gradient(circle at 50% 40%, var(--a) 0 8%, transparent 9%), linear-gradient(180deg,#0d2550,#0a1d3b)}
.art-regalia{background:linear-gradient(90deg, transparent 46%, var(--a) 46% 54%, transparent 54%), repeating-linear-gradient(180deg, var(--a) 0 6px, #fff 6px 10px, #0a1d3b 10px 26px)}
.art-clothing{background:linear-gradient(180deg, transparent 20%, var(--a) 20% 26%, transparent 26% 70%, var(--a) 70% 76%, transparent 76%), #0d2550}
.product-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 50%, rgba(3,9,21,.65))}
.product-body{padding:16px 18px 18px}
.product-cat{color:var(--blue-2);font-size:.85rem;font-weight:600;margin:0 0 2px}
.product h3{font-size:1.1rem;margin:0 0 4px}
.product-maker{color:var(--muted);font-size:.92rem;margin:0 0 8px}
.product-price{font-size:1.25rem;font-weight:700;margin:0 0 8px}
.verified{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ice);padding:3px 10px;border-radius:999px;border:1px solid rgba(30,139,255,.45)}
.verified::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 6px var(--blue)}

/* Nation page */
.nation{width:var(--wrap);margin:0 auto}
.nation-hero{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,32px);align-items:center;
  padding:clamp(28px,5vw,56px) clamp(18px,3vw,40px);margin-top:clamp(18px,3vw,32px);border-radius:28px;overflow:hidden;
  background:radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--a) 35%, transparent), transparent 60%), linear-gradient(180deg, rgba(14,39,80,.85), rgba(7,24,51,.7));
  border:1px solid color-mix(in srgb, var(--a) 50%, transparent)}
.back{position:absolute;left:clamp(18px,3vw,40px);top:16px;font-size:.92rem;color:var(--silver)}
.nation-seal{width:clamp(84px,12vw,130px);aspect-ratio:1;border-radius:50%;padding:6px;background:conic-gradient(var(--blue), var(--blue-2), var(--blue));
  box-shadow:0 0 30px color-mix(in srgb, var(--a) 60%, transparent);animation:spinSlow 30s linear infinite}
.nation-seal span{display:block;width:100%;height:100%;border-radius:50%;background:conic-gradient(from -90deg, var(--white) 0 25%, var(--yellow) 0 50%, var(--red) 0 75%, var(--black) 0)}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.nation-head h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;margin:4px 0 6px}
.motto{color:var(--silver);font-size:1.12rem;font-style:italic}
.sample-badge{display:inline-block;margin:10px 0 0;font-size:.82rem;font-weight:600;color:#000;background:var(--yellow);padding:3px 10px;border-radius:999px}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(3,9,21,.4);font-size:.9rem}
@media (max-width:620px){.nation-hero{grid-template-columns:1fr;padding-top:56px}}

.tabs{position:sticky;top:67px;z-index:20;display:flex;gap:6px;overflow-x:auto;padding:12px 2px;margin:18px 0 8px;
  background:linear-gradient(180deg, var(--night) 70%, transparent);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;color:var(--silver);text-decoration:none;font-weight:600;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(11,31,63,.7)}
.tab[aria-selected="true"],.tab.is-on{color:#fff;background:color-mix(in srgb, var(--a) 35%, #0b1f3f);border-color:var(--a)}
.tab-panel{padding:clamp(18px,3vw,28px) 0 8px;scroll-margin-top:130px}
.js-tabs .tab-panel[hidden]{display:none}
.tab-panel > h2{font-size:var(--t-h2)}
.lead{color:var(--silver);font-size:1.1rem;max-width:62ch}
.timeline{list-style:none;padding:0;margin:20px 0 0;position:relative;display:grid;gap:18px}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--a), transparent)}
.timeline li{position:relative;padding-left:44px}
.timeline li::before{content:"";position:absolute;left:4px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--night);border:3px solid var(--a);box-shadow:0 0 10px var(--a)}
.timeline h3{font-size:var(--t-h3);margin-bottom:4px}
.timeline p{color:var(--silver);max-width:62ch}
.pending{display:flex;gap:20px;align-items:center;padding:24px;border-radius:var(--radius-l);background:rgba(11,31,63,.6);border:1px dashed rgba(30,139,255,.5)}
.pending p{color:var(--silver);margin:0}
.pending-wheel{flex:none;width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 3px var(--blue), 0 0 20px rgba(30,139,255,.5);
  background:conic-gradient(from -90deg, var(--white) 0 25%, var(--yellow) 0 50%, var(--red) 0 75%, var(--black) 0);animation:spinSlow 12s linear infinite}
@media (max-width:560px){.pending{flex-direction:column;align-items:flex-start}}
.event-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.event-list li{display:flex;gap:16px;align-items:center;padding:14px;border-radius:var(--radius-m);background:rgba(11,31,63,.6);border:1px solid var(--line)}
.event-list time{flex:none;width:64px;height:64px;border-radius:14px;display:grid;place-content:center;text-align:center;background:color-mix(in srgb, var(--a) 30%, #0b1f3f);border:1px solid var(--a)}
.event-list time b{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.event-list time span{font-size:1.5rem;font-weight:700;line-height:1}
.event-list h3{font-size:1.1rem;margin:0 0 2px}.event-list p{margin:0;color:var(--muted)}
.link-list{padding-left:1.2em;color:var(--silver)}

/* Resources */
.search{display:block;max-width:560px;margin:0 auto 16px}
.search input{width:100%;min-height:52px;padding:0 20px 0 48px;border-radius:999px;font:500 1rem "Saira",sans-serif;color:var(--white);
  background:rgba(11,31,63,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='%238fa3bd' stroke-width='2'/%3E%3Cpath d='M15 15l6 6' stroke='%238fa3bd' stroke-width='2'/%3E%3C/svg%3E") no-repeat 18px center;
  border:1px solid rgba(30,139,255,.45)}
.search input::placeholder{color:var(--muted)}
.resource-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(300px,100%),1fr));gap:clamp(12px,1.6vw,18px)}
.resource{display:flex;flex-direction:column;padding:20px;border-radius:var(--radius-l);background:rgba(11,31,63,.65);border:1px solid var(--line);border-top:3px solid var(--blue)}
.resource[hidden]{display:none}
.resource.cat-crisis,.resource.cat-mmiw{border-top-color:var(--red)}
.resource.cat-health,.resource.cat-food{border-top-color:#46d1c8}
.resource.cat-education,.resource.cat-youth{border-top-color:var(--yellow)}
.res-cat{color:var(--blue-2);font-weight:600;font-size:.85rem;margin:0 0 4px}
.resource h3{font-size:1.15rem;margin:0 0 6px}
.resource p{color:var(--silver)}
.res-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.res-call,.res-web,.res-contact{display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem}
.res-call{color:#fff;background:linear-gradient(180deg,#2b95ff,#1471d6)}
.res-web{color:var(--ice);border:1px solid rgba(30,139,255,.5)}
.res-contact{color:var(--silver);border:1px solid var(--line)}
.empty{color:var(--silver);text-align:center;padding:28px;border-radius:var(--radius-l);border:1px dashed var(--line)}

/* MMIW */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding:18px 18px 18px 74px;border-radius:var(--radius-l);background:rgba(11,31,63,.65);border:1px solid var(--line)}
.steps li::before{content:counter(s);position:absolute;left:18px;top:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;background:rgba(30,139,255,.25);border:1px solid var(--blue)}
.steps h3{font-size:var(--t-h3);margin:6px 0 4px}
.steps p{margin:0;color:var(--silver)}
.steps-urgent li::before{background:rgba(232,32,42,.3);border-color:var(--red)}
.missing h2,.alerts h2,.res-list > h2{font-size:var(--t-h2);margin:clamp(24px,4vw,40px) 0 18px}
.page-mmiw .page-hero{background:radial-gradient(60% 70% at 50% 0%, rgba(232,32,42,.25), transparent 70%)}

/* Language Lodge */
.lodge{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(24px,5vw,64px);align-items:center;padding-top:12px}
.phone{justify-self:center;width:min(300px,78vw);aspect-ratio:9/18.5;border-radius:44px;padding:12px;background:linear-gradient(160deg,#2a3a55,#0c1626);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.08) inset;transform:rotate(-4deg)}
.phone-screen{height:100%;border-radius:34px;padding:22px 16px;display:flex;flex-direction:column;gap:16px;
  background:radial-gradient(80% 50% at 50% 0%, rgba(30,139,255,.35), transparent), #061633}
.lodge-top{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--ice)}
.stars::before{content:"\2605 ";color:var(--yellow)}
.flashcard{flex:1;border-radius:24px;background:#f5f7fa;color:#071833;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;
  animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(1deg)}}
.flash-art{width:96px;height:96px;border-radius:50%;background:conic-gradient(from -90deg, #f5f7fa 0 25%, var(--yellow) 0 50%, var(--red) 0 75%, var(--black) 0);box-shadow:0 0 0 4px var(--blue)}
.flash-word{font-weight:700;margin:0;text-align:center}
.flash-play{font-size:.85rem;font-weight:600;color:#fff;background:var(--blue);padding:6px 16px;border-radius:999px}
.flash-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.flash-choices span{height:44px;border-radius:14px;background:rgba(255,255,255,.12)}
.flash-choices .right{background:#2bbf6a;box-shadow:0 0 14px rgba(43,191,106,.6)}
.beadbar{display:flex;gap:5px;justify-content:center}
.beadbar i{width:12px;height:16px;border-radius:40%;background:var(--blue);box-shadow:0 0 6px var(--blue)}
.beadbar i:nth-child(2n){background:var(--yellow)}.beadbar i:nth-child(3n){background:var(--red)}
.beadbar i.off{background:rgba(255,255,255,.15);box-shadow:none}
.lodge-copy h2{font-size:var(--t-h2)}
.lodge-copy .steps{margin-bottom:18px}
@media (max-width:820px){.lodge{grid-template-columns:1fr}}

/* Join */
.join{display:grid;grid-template-columns:1fr minmax(0,560px);gap:clamp(24px,5vw,56px);align-items:start}
.join-copy h2,.form h2{font-size:clamp(1.4rem,2.4vw,1.8rem)}
.promises{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.promises li{padding:16px 18px;border-radius:var(--radius-m);background:rgba(11,31,63,.55);border-left:3px solid var(--blue)}
.promises li:nth-child(2){border-left-color:var(--yellow)}.promises li:nth-child(3){border-left-color:var(--red)}.promises li:nth-child(4){border-left-color:var(--white)}
.promises h3{font-size:1.08rem;margin:0 0 2px}.promises p{margin:0;color:var(--silver)}
.form,.success{padding:clamp(20px,3vw,32px);border-radius:var(--radius-l);background:linear-gradient(180deg, rgba(14,39,80,.85), rgba(7,24,51,.8));border:1px solid rgba(30,139,255,.4)}
.success{text-align:center}.success .pending-wheel{display:block;margin:0 auto 16px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;margin-bottom:6px}
.opt{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;font:400 1rem "Saira",sans-serif;
  color:var(--white);background:rgba(3,9,21,.6);border:1px solid rgba(207,232,255,.25)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(30,139,255,.3)}
.field select option{background:#071833}
.has-error input,.has-error select{border-color:#ff6b72}
.field-error,.form-error{color:#ff9aa0;font-size:.92rem;margin:6px 0 0}
.form-error{padding:12px 14px;border-radius:12px;background:rgba(232,32,42,.15);border:1px solid rgba(232,32,42,.5);margin-bottom:16px}
.check label{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{width:22px;height:22px;min-height:0;flex:none;margin-top:2px;accent-color:var(--blue)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:900px){.join{grid-template-columns:1fr}}

/* 404 */
.notfound{width:var(--wrap);margin:0 auto;text-align:center;padding:clamp(60px,12vw,140px) 0}
.notfound .code{font-size:clamp(5rem,18vw,10rem);font-weight:800;line-height:1;margin:0;
  background:linear-gradient(180deg,#fff,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.notfound p{color:var(--silver)}

/* ---------- Footer ---------- */
.site-footer{width:var(--wrap);margin:0 auto;padding:0 0 calc(30px + env(safe-area-inset-bottom,0px))}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:28px}
.footer-brand img{width:min(260px,70vw);height:auto}
.footer-brand p{color:var(--muted);max-width:38ch;font-size:.95rem}
.site-footer h2{font-size:1rem;color:var(--blue-2);margin:0 0 10px}
.site-footer a{display:block;color:var(--silver);text-decoration:none;padding:4px 0}
.site-footer a:hover{color:#fff}
.footer-help a{color:var(--white);font-weight:600}
.copyright{color:var(--muted);font-size:.88rem;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (max-width:420px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- Map entrance: states rise in from west to east ---------- */
.map-stage::before{content:"";position:absolute;inset:-6% -4%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(30,139,255,.22), transparent 70%);filter:blur(10px)}
.map-ready .state{animation:stateIn .9s cubic-bezier(.16,1,.3,1) both}
@keyframes stateIn{from{opacity:0;transform:translateY(10px)}}
.map-ready .state.has-nations{animation:stateIn .9s cubic-bezier(.16,1,.3,1) both, glowPulse 3.2s 1.6s ease-in-out infinite}
@keyframes glowPulse{50%{filter:drop-shadow(0 0 7px rgba(30,139,255,.95))}}
.state{transform-box:fill-box;transform-origin:center}
.map-hero{grid-template-columns:minmax(250px, 310px) 1fr}
.map-intro h1{font-size:clamp(2.2rem, 4.4vw, 4rem)}
@media (max-width:900px){.map-hero{grid-template-columns:1fr}}
@media (max-width:600px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .product-body{padding:12px}
  .product h3{font-size:.98rem}
  .product-price{font-size:1.08rem}
  .verified{font-size:.72rem;padding:2px 8px}
}
@media (max-width:340px){.product-grid{grid-template-columns:1fr}}
