:root{
  /* tuned to match the brown background of the logo photo */
  --bg:       #2a1810;
  --bg-deep:  #170c08;
  --ink:      #f4e6d6;
  --ink-dim:  #b89980;
  --copper:   #c47a4a;
  --copper-2: #f5b988;
  --copper-3: #6b3a1f;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
}

/* Ambient glow behind everything */
.glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 35%, rgba(196,122,74,.22), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,.55), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

/* Subtle film grain */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Center stage */
.stage{
  position:relative;z-index:2;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem 1.5rem 5rem;text-align:center;
}

/* CC shield mark */
.mark{
  width:min(240px,42vw);
  margin-bottom:1.5rem;
  position:relative;
  animation: float 6s ease-in-out infinite, fadeUp 1.2s ease-out both;
}
.mark img{
  width:100%;height:auto;display:block;
  /* fade the JPEG's edges so it blends into the page background */
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 92%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 92%);
  filter: drop-shadow(0 20px 60px rgba(196,122,74,.35)) contrast(1.05) saturate(1.05);
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* Title */
.title{
  font-family:'Cinzel',serif;font-weight:900;
  font-size:clamp(2rem,6vw,3.6rem);
  letter-spacing:clamp(4px, 1.2vw, 10px);
  background:linear-gradient(135deg,#fbcfa2 0%,#d18a5a 50%,#8a4a26 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation: fadeUp 1.2s .2s ease-out both;
}

.rule{
  width:64px;height:1px;
  background:linear-gradient(90deg, transparent, var(--copper), transparent);
  margin:1.25rem 0 1.5rem;
  animation: fadeUp 1.2s .5s ease-out both;
}

/* Tagline lines */
.line{
  font-family:'Cinzel',serif;
  font-weight:500;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--ink-dim);
  font-size:clamp(.8rem, 1.6vw, 1rem);
  margin:.35rem 0;
}
.line.one   { animation: fadeUp 1s .7s  ease-out both; }
.line.two   { color:var(--copper-2); animation: fadeUp 1s .9s ease-out both; }
.line.three { animation: fadeUp 1s 1.1s ease-out both; }

@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Join label */
.join-label{
  margin-top:2rem;
  font-family:'Cinzel',serif;
  font-weight:500;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--copper-2);
  font-size:clamp(.75rem, 1.4vw, .9rem);
  animation: fadeUp 1s 1.3s ease-out both;
}

/* Signup */
.signup{
  margin-top:1rem;
  display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;
  width:100%;max-width:440px;
  animation: fadeUp 1s 1.5s ease-out both;
}
.signup input{
  flex:1;min-width:220px;
  background:rgba(20,9,7,.6);
  border:1px solid rgba(196,122,74,.35);
  padding:.85rem 1rem;
  color:var(--ink);
  font-family:inherit;font-size:.95rem;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.signup input::placeholder{color:var(--ink-dim);letter-spacing:1px}
.signup input:focus{
  border-color:var(--copper-2);
  box-shadow:0 0 0 3px rgba(196,122,74,.15);
}
.signup button{
  background:linear-gradient(135deg,#d18a5a,#8a4a26);
  color:#140a07;
  border:none;
  padding:.85rem 1.4rem;
  font-family:'Cinzel',serif;font-weight:700;
  letter-spacing:2px;font-size:.78rem;text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(196,122,74,.3), inset 0 1px 0 rgba(251,207,162,.5);
  transition:transform .2s, box-shadow .2s;
}
.signup button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(196,122,74,.45), inset 0 1px 0 rgba(251,207,162,.6);
}

.thanks{
  width:100%;margin-top:1rem;
  font-family:'Cinzel',serif;letter-spacing:3px;font-size:.85rem;
  color:var(--copper-2);
  opacity:0;transition:opacity .4s;
  text-transform:uppercase;
}
.signup.done input,
.signup.done button{display:none}
.signup.done .thanks{opacity:1}

/* ============== SCROLL CUE ============== */
.scroll-cue{
  margin-top:3rem;
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--ink-dim);
  font-family:'Cinzel',serif;
  font-size:.7rem;letter-spacing:4px;text-transform:uppercase;
  text-decoration:none;
  opacity:0;
  animation: fadeUp 1s 1.8s ease-out forwards, scrollBounce 2.2s 2.5s ease-in-out infinite;
  transition:color .2s;
}
.scroll-cue:hover{color:var(--copper-2)}
.scroll-cue svg{margin-top:1px}
@keyframes scrollBounce{
  0%,100%{transform:translateY(0)}
  50%   {transform:translateY(4px)}
}

/* ============== WORLD GRID SECTION ============== */
.grid-section{
  position:relative;z-index:2;
  padding:6rem 1.5rem 7rem;
  border-top:1px solid rgba(196,122,74,.18);
  /* Opaque background so the body-level .glow doesn't bleed through */
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(196,122,74,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, #0d0604 100%),
    #0d0604;
  isolation:isolate;
}
.grid-header{max-width:720px;margin:0 auto 3rem;text-align:center}
.eyebrow{
  font-family:'Cinzel',serif;
  font-size:.7rem;letter-spacing:5px;text-transform:uppercase;
  color:var(--copper-2);
  margin-bottom:1.25rem;
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#fbcfa2;
  box-shadow:0 0 8px #fbcfa2;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%   {opacity:1; transform:scale(1.1)}
}
.grid-header h2{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  letter-spacing:2px;
  background:linear-gradient(135deg,#fbcfa2 0%,#d18a5a 70%,#8a4a26 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:1rem;
}
.grid-sub{
  color:var(--ink-dim);font-size:1rem;line-height:1.6;
  max-width:560px;margin:0 auto;
}

/* The map */
.map-wrap{
  max-width:1100px;margin:0 auto;
  position:relative;
  padding:1.5rem;
  border:1px solid rgba(196,122,74,.18);
  background:
    radial-gradient(ellipse 35% 50% at 60% 45%, rgba(245,185,136,.08), transparent 70%),
    rgba(13,6,4,.85);
  border-radius:4px;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.6),
    0 20px 60px rgba(0,0,0,.4);
}
.world-map{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 20px rgba(196,122,74,.15));
}

/* Animated origin pulse — transform-box ensures scaling pivots at the
   element's local center, not the SVG origin. */
.pulse-ring,
.pulse-inner{
  transform-box: fill-box;
  transform-origin: center;
}
.pulse-ring{ animation: ringPulse 2.6s ease-out infinite; }
.pulse-inner{ animation: ringPulse 2.6s ease-out .8s infinite; }
@keyframes ringPulse{
  0%   {transform:scale(.5); opacity:1}
  100% {transform:scale(2.2); opacity:0}
}

/* Pending nodes shimmer */
.nodes.pending g{
  animation: nodeShimmer 4s ease-in-out infinite;
}
.nodes.pending g:nth-child(2){animation-delay:.4s}
.nodes.pending g:nth-child(3){animation-delay:.8s}
.nodes.pending g:nth-child(4){animation-delay:1.2s}
.nodes.pending g:nth-child(5){animation-delay:1.6s}
.nodes.pending g:nth-child(6){animation-delay:2.0s}
.nodes.pending g:nth-child(7){animation-delay:2.4s}
.nodes.pending g:nth-child(8){animation-delay:2.8s}
.nodes.pending g:nth-child(9){animation-delay:3.2s}
.nodes.pending g:nth-child(10){animation-delay:3.6s}
@keyframes nodeShimmer{
  0%,100%{opacity:.55}
  50%   {opacity:1}
}

/* Connection lines flow */
.connections path{
  stroke-dasharray:4 6;
  animation: flow 8s linear infinite;
}
@keyframes flow{
  to {stroke-dashoffset:-100}
}

/* Legend */
.grid-legend{
  display:flex;justify-content:center;gap:2.25rem;flex-wrap:wrap;
  margin-top:1.25rem;
  font-family:'Inter',sans-serif;
  font-size:.78rem;
  color:var(--ink-dim);
  letter-spacing:1.2px;
}
.legend-item{display:inline-flex;align-items:center;gap:.6rem}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.dot-origin{
  background:#fff2dc;
  box-shadow:0 0 10px #fbcfa2, 0 0 18px rgba(245,185,136,.5);
}
.dot-pending{
  background:#d18a5a;
  box-shadow:0 0 8px rgba(196,122,74,.6);
  opacity:.7;
}

/* Stats */
.grid-stats{
  display:flex;justify-content:center;align-items:center;gap:2.5rem;
  margin-top:2.5rem;
}
.stat{text-align:center}
.stat-num{
  font-family:'Cinzel',serif;font-weight:900;
  font-size:clamp(2rem,5vw,3rem);
  background:linear-gradient(135deg,#fbcfa2 0%,#d18a5a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.stat-label{
  margin-top:.5rem;
  font-family:'Cinzel',serif;
  font-size:.65rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--ink-dim);
}
.stat-divider{
  width:1px;height:40px;
  background:linear-gradient(180deg, transparent, rgba(196,122,74,.4), transparent);
}

/* ---------- Mobile: zoom into the island so it fills more vertical space.
   The SVG viewBox (1000×420) has lots of empty ocean above/below the island.
   We scale the SVG up ~2× and crop horizontally so the island reads bigger. ---------- */
@media (max-width:680px){
  .pr-map{
    padding:.4rem;
    /* Tight portrait-ish frame. The island band inside viewBox 1000×420
       sits around y=170–260 (vertically centered). We scale 1.55× so the
       full island (x=170–870) stays in view, and we crop empty ocean. */
    aspect-ratio: 1 / 0.56;
    overflow:hidden;
    position:relative;
  }
  .pr-map .world-map{
    /* 132% width keeps all labels in view (RINCÓN at x≈155–235, VIEQUES at
       x≈817–863). Visual SVG height ≈ 0.55 of container width. */
    width: 132%;
    height: auto;
    position:absolute;
    top:50%;left:50%;
    transform: translate(-50%, -50%);
  }
  /* Hide the faint lat/lon grid + N/S/E/W cardinal markers on mobile —
     they get cropped weirdly when the SVG is zoomed in */
  .pr-map .latlines,
  .pr-map .world-map > g:nth-of-type(2){
    display:none;
  }
  /* Hide the PUERTO RICO wordmark on mobile (it would push outside the crop) */
  .pr-map .world-map > g:last-of-type{display:none}
  /* City labels stay upright; just bump size slightly for legibility */
  .pr-map .city-labels text{font-size:10px;letter-spacing:1.2px}
}

/* Phase II teaser */
.phase-next{
  margin-top:2.25rem;text-align:center;
  font-family:'Cinzel',serif;
  font-size:.85rem;letter-spacing:4px;text-transform:uppercase;
  color:var(--copper-2);
}
.phase-next span{
  display:block;margin-top:.6rem;
  font-size:.65rem;letter-spacing:3px;
  color:var(--ink-dim);
}

@media (max-width:640px){
  .grid-stats{gap:1.25rem}
  .stat-divider{height:30px}
  .grid-legend{gap:1.5rem}
}

/* Footer */
.foot{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;
  padding:1.5rem 1.75rem;
  font-family:'Cinzel',serif;
  font-size:.7rem;letter-spacing:3px;
  color:var(--ink-dim);
  text-transform:uppercase;
  border-top:1px solid rgba(196,122,74,.12);
}

@media (max-width:520px){
  .foot{font-size:.6rem;padding:1rem}
  .mark{margin-bottom:2rem}
}