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

:root{
  
  --amber:#FFB703;
  --teal:#219EBC;
  --sky:#8ECAE6;
  --navy:#15181f;
  --white:#fff;
  


  --navy2:#1d2128;
  --navy3:#252b35;
  --dim:rgba(255,255,255,0.6);
  --dimmer:rgba(255,255,255,0.35);
  --dimmest:rgba(255,255,255,0.15);
  --border:rgba(255,255,255,0.1);


}

html{
  scroll-behavior:smooth;
  }

body{font-family:"DM Sans",sans-serif;background:var(--navy);color:var(--white);overflow-x:hidden;}

.page{display:none;}

.page.active{display:block;}

/* ── NAV ── */
nav{
  position:fixed;top:0;width:100%;z-index:300;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 60px;
  background:rgba(21,24,31,0.92); /*yeah lol actually navy in tranparent*/
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:background 0.3s;
}

.logo{
  font-family:"DM Mono",monospace;font-size:1.25rem;font-weight:500;
  color:var(--white);text-decoration:none;letter-spacing:0.02em;
}

.logo span{color:var(--amber);}

.nav-links{display:flex;list-style:none;gap:0;}

.nav-links a{
  display:block;padding:0 18px;height:60px;line-height:60px;
  font-size:0.9rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color 0.15s,border-color 0.15s;
}

.nav-links a:hover,.nav-links a.active{color:var(--white);border-bottom-color:var(--amber);}

/* ── HERO (BioNTech style: full-bleed dark, giant type, visual canvas) ── */
.home-hero{
  height:100vh;min-height:640px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-evenly;
  padding:0 60px 80px;
  background:var(--navy);
  margin-top: 40px;
}

.hero-visual{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(33,158,188,0.08) 0%,transparent 50%),
             linear-gradient(225deg,rgba(255,183,3,0.04) 0%,transparent 40%);
}

canvas#hero-canvas{
  position:absolute;right:0;top:0;height:100%;width:55%;opacity:0.35;
}

.hero-gradient-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to right, var(--navy) 35%, transparent 70%);
}

.hero-content{
  position:relative;z-index:2;max-width:700px;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"DM Mono",monospace;font-size:0.9rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--teal);margin-bottom:25px;
  padding-top: 30px;
}

.hero-tag::before{content:'';display:block;width:24px;height:1px;background:var(--teal);}

.hero-h1{
  font-size:clamp(3rem,6vw,5.5rem);font-weight:900;
  line-height:1;letter-spacing:-0.04em;margin-bottom:32px;
}

.hero-h1 .accent{color:var(--amber);}

.hero-h1 .thin{font-weight:200;}

.hero-body{
  font-size:1.05rem;font-weight:300;color:var(--dim);
  line-height:1.8;max-width:520px;margin-bottom:48px;
}

.hero-btns{display:flex;gap:16px;align-items:center;}

.btn-fill{
  background:var(--amber);color:var(--navy);
  padding:14px 32px;border-radius:2px;border:none;
  font-family:"DM Sans",sans-serif;font-size:0.9rem;font-weight:700;
  cursor:pointer;text-decoration:none;display:inline-block;
  letter-spacing:0.02em;transition:background 0.15s;
}

.btn-fill:hover{background:#ffc933;}

.btn-outline{
  background:transparent;color:var(--white);
  padding:13px 32px;border-radius:2px;border:1px solid rgba(255,255,255,0.3);
  font-family:"DM Sans",sans-serif;font-size:0.9rem;font-weight:400;
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:border-color 0.15s;
}

.btn-outline:hover{border-color:var(--white);}

.hero-scroll{
  position:absolute;bottom:32px;right:60px;z-index:2;
  font-family:"DM Mono",monospace;font-size:0.65rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--dimmer);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;
}

.hero-scroll::after{content:'';display:block;width:1px;height:48px;background:var(--dimmer);}

/* ── STAT BAR ── */
.stat-bar{
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--navy2);
  border-bottom:1px solid var(--border);
}

.stat-bar-item{
  padding:28px 40px;
  border-right:1px solid var(--border);
}

.stat-bar-item:last-child{border-right:none;}

.sbn{
  font-family:"DM Mono",monospace;font-size:1.4rem;font-weight:500;
  color:var(--amber);display:block;line-height:1;margin-bottom:6px;
}

.sbl{font-size:0.7rem;color:var(--dimmer);letter-spacing:0.08em;text-transform:uppercase;}

/* ── EDITORIAL SECTIONS ── */
/* Full-width dark panel */
.panel{padding:100px 60px;}


.panel-alt{padding:100px 60px;background:var(--navy2);}

.panel-light{padding:100px 60px;background:#f4f3ef;color:#1a1a1a;}

.panel-accent{padding:100px 60px;background:var(--teal);}

.panel-inner{
  max-width:1200px;
  margin:0 auto;
}

.sky {
  max-height: 500px;
  min-width: 25%;
  aspect-ratio: 1.92/1;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
  flex-direction: column;
  pointer-events: none;
}


#team-top {
  display: flex;
}



/* Section label */
.s-label{
  font-family:"DM Mono",monospace;font-size:0.9rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--teal);
  display:flex;align-items:center;gap:12px;margin-bottom:24px;
}

.s-label::before{content:'';display:block;width:32px;height:1px;background:var(--teal);}
.looong::before{display:none;}
.looong {
  font-size: 1.2rem;
  text-align: center;
}

.panel-light .s-label{color:var(--teal);}

.panel-accent .s-label{color:rgba(255,255,255,0.7);}

.panel-accent .s-label::before{background:rgba(255,255,255,0.7);}

.s-h2{
  font-size:clamp(2rem,4vw,3.2rem);font-weight:800;
  letter-spacing:-0.03em;line-height:1.1;margin-bottom:20px;
}

.s-h2 em{font-style:normal;color:var(--amber);}

.panel-light .s-h2{color:#1a1a1a;}

.panel-light .s-h2 em{color:var(--teal);}

.panel-accent .s-h2{color:var(--white);}

.s-body{
  font-size:1rem;font-weight:300;color:var(--dim);
  line-height:1.85;max-width:580px;
}

.panel-light .s-body{color:#444;}

.panel-accent .s-body{color:rgba(255,255,255,0.8);}

/* Two-column editorial split */
.edit-split{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start;}

.edit-split-wide{display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:center;}

.edit-split-flip{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:center;}

/* Visual placeholder (BioNTech uses photography) */
.vis-block{
  background:var(--navy3);border:1px solid var(--border);border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--dimmer);
  font-family:"DM Mono",monospace;font-size:0.68rem;letter-spacing:0.07em;text-align:center;
  padding:20px;
}

.vis-block svg{opacity:0.3;}

.vis-block-tall{height:440px;}

.vis-block-med{height:320px;}

.vis-block-sm{height:200px;}

.panel-light .vis-block{background:#e8e7e3;border-color:rgba(0,0,0,0.1);color:#888;}

/* How it works — large numbered list */
.how-list{margin-top:60px;}

.how-item{
  display:grid;grid-template-columns:100px 1fr 1fr;gap:40px;
  padding:40px 0;border-top:1px solid var(--border);align-items:start;
}

.how-item:last-child{border-bottom:1px solid var(--border);}

.how-body a {
  color: var(--teal);
  text-decoration: none;
}

.how-body a:hover, .how-body a:active {
  color: var(--amber);
}


.how-n{
  font-family:"DM Mono",monospace;font-size:0.68rem;letter-spacing:0.1em;
  color:var(--dimmer);padding-top:4px;
}

.how-title{font-size:1.15rem;font-weight:600;letter-spacing:-0.01em;line-height:1.3;}

.how-body{font-size:0.9rem;font-weight:300;color:var(--dim);line-height:1.8;}

/* Science topic list */
.topic-list{margin-top:60px;}

.topic-row{
  display:grid;grid-template-columns:280px 1fr;gap:60px;
  padding:48px 0;border-top:1px solid var(--border);align-items:start;
}

.topic-row:last-child{border-bottom:1px solid var(--border);}

.t-name{font-size:1.05rem;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px;}

.t-tag{
  font-family:"DM Mono",monospace;font-size:0.62rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--teal);display:block;margin-bottom:0;
}

.t-body{font-size:1rem;font-weight:300;color:var(--dim);line-height:1.85;}

.t-ref{
  margin-top:14px;padding:8px 14px;
  border-left:2px solid var(--border);
  font-family:"DM Mono",monospace;font-size:0.65rem;color:var(--dimmer);
}

.t-ph{
  margin-top:14px;padding:10px 14px;
  border:1px dashed var(--dimmest);border-radius:2px;
  font-family:"DM Mono",monospace;font-size:1rem;color:var(--dimmer);
}

/* Features grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:60px;background:var(--border);}

.feat-item{
  background:var(--navy2);padding:40px 36px;
  transition:background 0.2s;
}

.feat-item:hover{background:var(--navy3);}

.feat-icon{
  width:40px;height:40px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:2px;
}

.feat-icon svg{stroke:var(--sky);opacity:0.8;}

.feat-title{font-size:0.95rem;font-weight:600;margin-bottom:10px;letter-spacing:-0.01em;}

.feat-body{font-size:0.82rem;font-weight:300;color:var(--dim);line-height:1.8;}



/* future */
.swirl {
  background: url(images/future.svg);
  background-repeat: no-repeat;
  background-position: center right;
}





/* Timeline */
.timeline{margin-top:60px;}

.tl-row{
  display:grid;grid-template-columns:140px 1fr;gap:60px;
  padding:48px 0;border-top:1px solid var(--border);align-items:start;
}

.tl-row:last-child{border-bottom:1px solid var(--border);}

.tl-yr{
  font-family:"DM Mono",monospace;font-size:0.9rem;letter-spacing:0.08em;
  color:var(--dimmer);line-height:1.5;
}

.tl-row.now .tl-yr{color:var(--amber);}

.tl-body h3{font-size:1.05rem;font-weight:600;letter-spacing:-0.01em;margin-bottom:10px;}

.tl-body p{font-size:0.88rem;font-weight:300;color:var(--dim);line-height:1.85;max-width:620px;}

/* Stakeholder table */
.img-stakes {
  max-height: 300px;
  aspect-ratio: 1 / 1;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
  flex-direction: column;
  pointer-events: none;
}

#business-plot {
  width: 80%;
  margin-top: 10px;
}



.sh-table{margin-top:60px;}

.sh-row{
  display:grid;grid-template-columns:200px 1fr 1fr;gap:60px;
  padding:48px 0;border-top:1px solid var(--border);align-items:start;
}

.sh-row:last-child{border-bottom:1px solid var(--border);}

.sh-who{font-family:"DM Mono",monospace;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;}

.sh-who.ind{color:var(--teal);}

.sh-who.user{color:var(--sky);}

.sh-who.lab{color:var(--amber);}

.sh-col-h{font-family:"DM Mono",monospace;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--dimmer);margin-bottom:8px;}

.sh-title{font-size:0.95rem;font-weight:600;margin-bottom:8px;}

.sh-desc{font-size:0.85rem;font-weight:300;color:var(--dim);line-height:1.8;}

/* Metrics row */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-top:60px;
}

.metric{padding:40px 0;border-right:1px solid var(--border);}

.metric:first-child{padding-right:40px;}

.metric:last-child{border-right:none;padding-left:40px;}

.metric:not(:first-child):not(:last-child){padding:40px;}

.m-val{
  font-family:"DM Mono",monospace;font-size:1.7rem;font-weight:500;
  color:var(--amber);display:block;margin-bottom:6px;line-height:1;
}

.m-lbl{font-size:0.72rem;color:var(--dimmer);letter-spacing:0.07em;text-transform:uppercase;}

.m-ph{font-family:"DM Mono",monospace;font-size:0.62rem;color:rgba(255,255,255,0.18);margin-top:4px;}

/* Team */
.team-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);margin-top:60px;
}

.team-cell{background:var(--navy2);padding:40px 32px;}

.team-avatar{
  width:100px;height:100px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"DM Mono",monospace;font-size:1rem;font-weight:500;
  margin-bottom:20px;
}

.team-cell img  {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom:20px;
  pointer-events: none;
}



.av-teal{background:rgba(33,158,188,0.15);color:var(--teal);border:1px solid rgba(33,158,188,0.3);}

.av-sky{background:rgba(142,202,230,0.1);color:var(--sky);border:1px solid rgba(142,202,230,0.25);}

.av-amber{background:rgba(255,183,3,0.1);color:var(--amber);border:1px solid rgba(255,183,3,0.25);}

.av-navy3{background:rgba(255,255,255,0.05);color:var(--dim);border:1px solid var(--border);}

.team-name{font-size:1rem;font-weight:600;margin-bottom:4px;}

.team-role{font-family:"DM Mono",monospace;font-size:0.8rem;color:var(--sky);margin-bottom:14px;letter-spacing:0.04em;}

.team-bio{font-size:0.82rem;font-weight:300;color:var(--dim);line-height:1.7;margin-bottom:16px;}

.tag-row{display:flex;flex-wrap:wrap;gap:6px;}

.tag{
  font-family:"DM Mono",monospace;font-size:0.6rem;letter-spacing:0.07em;
  padding:3px 8px;border-radius:1px;
}

.tag-teal{background:rgba(33,158,188,0.15);color:var(--teal);}

.tag-sky{background:rgba(142,202,230,0.12);color:var(--sky);}

.tag-amber{background:rgba(255,183,3,0.12);color:var(--amber);}

/* Supervisor */
.sup-card{
  display:grid;grid-template-columns:80px 1fr;gap:32px;align-items:center;
  padding:40px;background:var(--navy3);border:1px solid var(--border);
  border-radius:2px;margin-top:20px;
}

.sup-av{
  width:100px;height:100px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"DM Mono",monospace;font-size:1.5rem;;
}

.sup-name{font-size:1rem;font-weight:600;margin-bottom:4px;}

.sup-role{font-family:"DM Mono",monospace;font-size:0.68rem;color:var(--amber);margin-bottom:12px;}

.sup-bio{font-size:0.85rem;font-weight:300;color:var(--dim);line-height:1.8;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:60px;align-items:start;}

.contact-item{
  display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;
}

.c-icon{
  width:36px;height:36px;flex-shrink:0;
  border:1px solid var(--border);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}

.c-icon svg{stroke:var(--sky);opacity:0.7;}

.c-label{font-family:"DM Mono",monospace;font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--dimmer);margin-bottom:3px;}

.c-val{font-size:0.88rem;color:var(--dim);}

/* Contact form */
.cform{
  background:var(--navy3);border:1px solid var(--border);
  padding:36px;
  border-radius:2px;
  margin-top:-36px;
}

.cform h3{font-size:1rem;font-weight:600;margin-bottom:28px;}

.form-row{margin-bottom:18px;}

.form-row label{display:block;font-family:"DM Mono",monospace;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--dimmer);margin-bottom:6px;}

.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:10px 14px;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:2px;
  color:var(--white);font-family:"DM Sans",sans-serif;font-size:0.88rem;outline:none;
  transition:border-color 0.15s;
}

.form-row textarea{height:100px;resize:vertical;}

.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--teal);}

.form-row select option{background:var(--navy2);}

/* FAQ */
.faq{margin-top:40px;}

.faq-item{border-top:1px solid var(--border);}

.faq-item:last-child{border-bottom:1px solid var(--border);}

.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;cursor:pointer;
  font-size:0.95rem;font-weight:500;
  transition:color 0.15s;
}

.faq-q:hover{color:var(--sky);}

.faq-arrow{font-size:1.2rem;color:var(--dimmer);transition:transform 0.2s;}

.faq-item.open .faq-arrow{transform:rotate(180deg);}

.faq-a{
  display:none;padding:0 0 20px;
  font-size:0.88rem;font-weight:300;color:var(--dim);line-height:1.85;max-width:700px;
}

.faq-item.open .faq-a{display:block;}

/* App badges */
.store-badges{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}

.store-badge{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;border:1px solid var(--border);border-radius:2px;
  background:rgba(255,255,255,0.03);text-decoration:none;color:var(--white);
  transition:border-color 0.15s,background 0.15s;
}

.store-badge:hover{border-color:#cc0000;background:rgba(255,183,3,0.05);}

.store-badge:hover:last-of-type{border-color:var(--amber);background:rgba(255,183,3,0.05);}

.sb-icon{
  width:40px;height:40px;background:rgba(255,255,255,0.06);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-family:"DM Mono",monospace;font-size:0.65rem;color:var(--sky);
}

.sb-text{line-height:1.3;}

.sb-sub{font-size:0.8rem;color:var(--dimmer);display:block;font-family:"DM Mono",monospace;letter-spacing:0.05em;}

.sb-title{font-size:1.1rem;font-weight:600;display:block;}


/* App gallery */
.gallery {
  display: flex;
  gap: 20px;
  scroll-snap-type: x;
  img {
    height: 50vh;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
  overflow: hidden;
  /* Enable smooth scrolling */
  scroll-behavior: smooth;
    /* Select all scroll buttons */
  &::scroll-button(*) {
    /* Align them vertically */
    position: sticky;
    height: 50px;
    width: 30px;
  }
   /* Select the left scroll button */
  &::scroll-button(left) {

    /* Create the button */
    content: "❮";

  }
  /* You know what to do */
  &::scroll-button(right) {
    content: "❯";
  }
}






/* Interaction type grid */
.int-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:40px;}

.int-cell{background:var(--navy2);padding:32px;}

.int-sign{font-family:"DM Mono",monospace;font-size:1rem;font-weight:500;color:var(--amber);margin-bottom:10px;}

.int-name{font-size:0.95rem;font-weight:600;margin-bottom:8px;}

.int-body{font-size:0.82rem;font-weight:300;color:var(--dim);line-height:1.75;}

/* CTA block */
.cta-panel{
  padding:100px 60px;
  background:var(--teal);
}

.cta-panel .s-label{color:rgba(255,255,255,0.6);}

.cta-panel .s-label::before{background:rgba(255,255,255,0.6);}

.cta-panel .s-h2{color:var(--white);}

.cta-panel .s-h2 em{color:var(--amber);}

.cta-panel .s-body{color:rgba(255,255,255,0.75);max-width:500px;margin-bottom:40px;}

.cta-btns{display:flex;gap:16px;align-items:center;}

.btn-white{
  background:var(--white);color:var(--teal);padding:23px 32px;
  border-radius:2px;border:none;font-family:"DM Sans",sans-serif;
  font-size:0.9rem;font-weight:700;cursor:pointer;text-decoration:none;
  display:inline-block;transition:opacity 0.15s;
}

.btn-white:hover{opacity:0.9;}

.btn-outline-white{
  background:transparent;color:var(--white);padding:13px 32px;
  border-radius:2px;border:1px solid rgba(255,255,255,0.5);
  font-family:"DM Sans",sans-serif;font-size:0.9rem;font-weight:400;
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:border-color 0.15s;
}

.btn-outline-white:hover{border-color:var(--white);}

/* Footer */
footer{
  padding:16.33px 60px;background:var(--navy);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  font-size: 1rem;
}

.footer-logo{font-family:"DM Mono",monospace;font-size:1.3rem;color:rgba(255,255,255,0.4);}

.footer-logo span{color:var(--amber);}

.footer-links{display:flex;gap:32px;}

.footer-links a{font-size:1rem;color:var(--dimmer);text-decoration:none;transition:color 0.15s;}

.footer-links a:hover{color:var(--white);}

footer p{font-family:"DM Mono",monospace;font-size:1rem;color:rgba(255,255,255,0.2);}

footer br{
  display: none
}

/* Science canvas */
#img-int {
  max-width: 85%;
  aspect-ratio: 1.063 / 1;
  margin-top: 29px;
}

.sci-canvas-wrap {
    background: var(--navy3);
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sci-caption{
  padding:12px 16px;font-family:"DM Mono",monospace;font-size:0.65rem;
  color:var(--dimmer);border-top:1px solid var(--border);
}


.cent {
  display: flex;
  justify-content: center;
}

.cent img {
  max-width: min(400px, 80vw);
  margin: 10px 0
}

.long-row{
  padding:48px 0;border-top:1px solid var(--border);align-items:start;
  color:var(--amber);
}



/* Phone mockup */
.phone-mock{
  background:var(--navy3);border:1px solid var(--border);border-radius:2px;
  overflow:hidden;max-width:340px;
}

.phone-header-bar{
  padding:12px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  font-family:"DM Mono",monospace;font-size:0.68rem;color:var(--dimmer);
}

.phone-header-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite;}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}

.phone-map-area{
  height:200px;background:rgba(33,158,188,0.04);
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--border);position:relative;overflow:hidden;
}

.phone-map-area svg{position:absolute;inset:0;width:100%;height:100%}

.map-center{
  position:relative;z-index:1;text-align:center;
  font-family:"DM Mono",monospace;font-size:0.68rem;color:var(--teal);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}

.map-dot{
  width:10px;height:10px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 6px rgba(33,158,188,0.2),0 0 0 12px rgba(33,158,188,0.1);
}

.phone-stats-bar{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--border);
}

.phone-stat{padding:12px;text-align:center;border-right:1px solid var(--border);}

.phone-stat:last-child{border-right:none;}

.phone-stat-val{font-family:"DM Mono",monospace;font-size:1rem;font-weight:500;color:var(--amber);display:block;}

.phone-stat-lbl{font-size:0.6rem;color:var(--dimmer);letter-spacing:0.06em;}

/* Sci badges */
.sci-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}

.sci-badge{
  font-family:"DM Mono",monospace;font-size:0.62rem;letter-spacing:0.06em;
  padding:4px 10px;border-radius:1px;
  background:rgba(33,158,188,0.12);border:1px solid rgba(33,158,188,0.2);color:var(--sky);
}


/* data contributuon */
form a {
  font-size:1.5rem;
  font-weight:800;
  color: var(--teal);
  text-decoration: none;
}

form p {
  text-align: right;
  margin-top:0;
}







@media(max-width:1024px){ /* normal*/
  nav,.home-hero,.panel,.panel-alt,.panel-light,.cta-panel,footer{padding-left:32px;padding-right:32px;}
  .edit-split,.edit-split-wide,.edit-split-flip{grid-template-columns:1fr;gap:48px;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .stat-bar{grid-template-columns:1fr 1fr;}.stat-bar-item{padding:20px 28px;}
  .how-item,.topic-row,.tl-row,.sh-row{grid-template-columns:1fr;gap:16px;}
  .feat-grid{grid-template-columns:1fr 1fr;}
  .int-grid{grid-template-columns:1fr 1fr;}
  .metrics{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  canvas#hero-canvas{width:100%;height:50%;}
  .hero-gradient-overlay{background:linear-gradient(to bottom, transparent 30%, var(--navy) 80%);}

  footer {
    flex-wrap: wrap;
  }

  
}


@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

@media(max-width: 625px) {
  /* nav*/
  nav {
    overflow-x: scroll;
    overflow-y: hidden;
  }

  /*future */
  .swirl {
    background: none;
  }

  /*business */
  .stakes-wrap, .img-stakes {
    display: none;
  }

}

@media(max-width: 500px){ /* phones */
  /* business */
  .feat-grid{grid-template-columns:1fr;}


  /* team*/
  .sky {
    display: none;
  }

  .team-grid{grid-template-columns:1fr;}

  /* footer */
  footer {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    justify-content: center;
  }

  footer p {
    text-align: center;
  }
  footer br {
    display:inline;
  }

  #page-app .edit-split-wide {
    align-items: center;
  }

  .gallery img {
    height: 75vh;
  }
}