/* ─── Tokens ───────────────────────────────────────────────────────── */
:root {
  --clr-primary:        #2563eb;
  --clr-primary-hover:  #1d4ed8;
  --clr-bg:             #f8fafc;
  --clr-text:           #0f172a;
  --clr-muted:          #64748b;

  --grad-start: #46a0ff;
  --grad-end:   #006aff;

  --radius: .8rem;
  --shadow: 0 6px 20px rgb(0 0 0 / .07);
  font-family: "Poppins","Inter",system-ui,sans-serif;
}

/* ─── Base / helpers ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
body{
  margin:0;
  background:var(--clr-bg) url("assets/bg-pattern.svg") center/cover no-repeat fixed;
  display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden;
}
img{max-width:100%;display:block}
.wrap{width:min(90%,1120px);margin-inline:auto}
a{color:var(--clr-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* terms checkbox */
.terms-label{
  font-size:.82rem;
  color:var(--clr-muted);
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:-.4rem 0 1rem;
}
.terms-label a{color:var(--clr-primary);}
.info-tip{
  cursor:help;
  font-size:.75rem;
  background:#e0e7ff;
  color:#0033A6;
  border-radius:50%;
  display:inline-block;
  width:1.15em;height:1.15em;
  line-height:1.15em;
  text-align:center;
}


/* Buttons */
button,.btn-ghost,.btn-primary{
  font:inherit;cursor:pointer;border:none;border-radius:var(--radius);
  padding:.85rem 1.6rem;line-height:1;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.btn-primary{
  background:linear-gradient(135deg,var(--grad-start),var(--grad-end));
  color:#fff;box-shadow:0 4px 12px rgb(0 0 0 / .12)}
.btn-primary:hover{background:linear-gradient(135deg,#5ab0ff,#1d7dff)}
.btn-ghost{background:transparent;color:var(--clr-primary)}
.btn-ghost:hover{background:rgba(37,99,235,.1)}
.btn-ghost.ready{
  background:#222;
  color:#eee;
}
.block{display:block;width:100%}
.cta-wide{max-width:260px;margin-inline:auto}

/* Top-bar */
.topbar{
  background:#fff;box-shadow:0 1px 4px rgb(0 0 0 / .05);
  position:sticky;top:0;z-index:50}
.topbar .wrap{display:flex;align-items:center;gap:1rem;padding:.6rem 0}
.logo-sm{width:32px;height:32px}
.brand{font-weight:600;color:var(--clr-text);margin-right:auto}
.nav-links{display:flex;align-items:center;gap:1rem}
.nav-links a{font-size:.95rem}

/* HERO */
.hero{padding:clamp(2rem,8vw,4rem) 0}
.hero-content{display:grid;gap:3rem;align-items:center}
.hero-text h1{font-size:clamp(1.9rem,4vw + .5rem,3.2rem);margin:0 0 1rem;color:var(--clr-text)}
.hero-text p{color:var(--clr-muted);font-size:1.1rem;margin:0 0 1.6rem}

.hero-graphic{display:none}            /* hide on mobile */
@media(min-width:900px){
  .hero-content{grid-template-columns:1fr 1fr}
  .hero-graphic{display:block;text-align:right}
  .hero-rocket{width:420px;max-width:95%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.08))}
  /* hide the mobile version on desktop */
  .hero-mobile-graphic{display:none}
}

/* NEW — mobile illustration */
.hero-mobile-graphic{
  margin-top:2rem;text-align:center;
}
.hero-mobile-img{
  width:300px;max-width:90%;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.06));
}

/* Background dot fix — keep exactly one copy, never stacks */
.bg-pattern{
   position:fixed;inset:0;width:100%;height:100vh;
   z-index:-1;object-fit:cover;opacity:.05;pointer-events:none;
 }
.banner{
  background:#fef3c7;
  color:#92400e;
  padding:.75rem 1rem;
  border-radius:var(--radius);
  margin:0 0 1.2rem;
  font-size:.9rem;
}

/* slim yellow banner */
.site-banner{
  background:#fef3c7;
  color:#92400e;
  text-align:center;
  padding:1.2rem .8rem;
  font-size:.9rem;
}

/* make sure banner sits below the sticky topbar */
.topbar + .site-banner{
  position:sticky;
  top:50px;            /* height of the topbar */
  z-index:45;
}

/*  A - expand the drop-zone vertically   */
.upload-card{
  border:2px dashed #9ca3af;
  border-radius:var(--radius);
  height:260px;                 /* big enough target */
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  transition:background .2s;
  position:relative;
  cursor:pointer;
}

/*  B - limit the invisible file-input so it no longer covers the
       “Send deck + logo” button.  The input should only sit on top
       of the dashed drop-area itself.                                */
.upload-card input[type="file"]{
  position:absolute;
  inset:8px 8px 60px 8px;       /* leave space at the bottom for button */
  opacity:0; cursor:pointer;
}

.upload-card.dragover{ background:#e0e7ff; }
#upload-card:not([hidden]){ display:block; } /* add near the other .upload-card rules */

.progress{ width:100%; height:6px; background:#e5e7eb; border-radius:3px; margin-top:1rem; }
.progress #bar{ height:100%; width:0; background:var(--clr-primary); border-radius:3px; }

.processing{ margin-top:1rem; font-size:.9rem; color:var(--clr-muted); }
.spinner{ display:inline-block; width:14px; height:14px; border:2px solid #93c5fd; border-top-color:transparent; border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);} }

.summary-img{ max-width:100%; margin-top:1.5rem; border-radius:var(--radius); box-shadow:var(--shadow);}
.carousel img{ max-width:200px; margin:0 8px 12px; cursor:pointer;}

/* modal wrapper */
.img-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.85);
  display:flex;                /* flexbox for horizontal centring */
  align-items:flex-start;      /* 🔧 top-align vertically          */
  justify-content:center;      /* centre horizontally              */
  overflow:auto;               /* scroll if image taller than view */
  padding:2rem 0;              /* little breathing room top/bottom */
  z-index:100;
}

/* default view: fit width, scroll if too tall */
.img-modal img{
  max-width:80vw;          /* wide enough for text readability         */
  height:auto;             /* keep native aspect-ratio                 */
  border-radius:var(--radius);
  cursor:zoom-in;
  transition:max-width .25s ease;
}

/* zoomed: lift the width cap – user can pan with scroll-bars */
.img-modal img.zoomed{
  max-width:none;          /* natural (often ~1000-1200 px)            */
  cursor:zoom-out;
}

.summary-thumb{
  max-width:200px;
  margin:0 8px 12px;
  cursor:pointer;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.img-modal[hidden] { display:none !important; }
#img-modal:not([hidden]) { z-index: 200 !important; }
#filter-bar[hidden] {            /* id selector – correct          */
     display:none !important;
   }

#btn-download{ margin-top:1rem; }
/* turn the button black with white text when it’s ready */
#btn-download.ready{
  background:#222;
  color:#eee;
}

/* FEATURES */
.features{padding:4rem 0 2rem}
.features-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem
}
.feature{text-align:center;padding:1.5rem}
.icon-circle{
  width:56px;height:56px;display:grid;place-items:center;margin-inline:auto;
  font-size:1.6rem;border-radius:50%;background:#e0e7ff;color:var(--clr-primary)}
.feature h3{margin:1rem 0 .5rem;color:var(--clr-text)}
.feature p{color:var(--clr-muted);font-size:.95rem}
.features-cta{margin-top:2rem;text-align:center}

/* AUTH card */
#auth-section[hidden]{opacity:0;pointer-events:none}
#auth-section{transition:opacity .25s ease;padding:2rem 0 4rem}
.card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:2rem;width:100%;max-width:420px;margin-inline:auto}

/* Inputs */
input,select{
  width:100%;font-size:1rem;padding:.75rem;margin-bottom:1rem;
  border:1px solid #cbd5e1;border-radius:var(--radius)}
.select-label{display:block;color:var(--clr-muted);margin-bottom:.5rem}
.small{font-size:.82rem;color:var(--clr-muted);text-align:center}

/* Responsive tweaks */
@media(max-width:640px){
  .features-grid{grid-template-columns:1fr 1fr}
  .card{padding:1.5rem}}

.vc-card       { position:relative; display:inline-block; margin:0 8px 12px; }

/* founder logo input */
.logo-label{display:block;margin:.8rem 0;font-size:.85rem;color:#333}
#logo-file{margin-left:.5rem}

/* send button */
#send-btn{background:#0033A6;color:#fff;border:none;border-radius:.6rem;
          padding:.5rem 1.4rem;font-weight:500;cursor:pointer;opacity:.6}
#send-btn.enabled{opacity:1}

.founder-only{margin-bottom:1.2rem}

/* filter bar */
@import url("https://unpkg.com/choices.js/public/assets/styles/choices.min.css");
#filter-bar{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.2rem 0}
#filter-bar .choices__inner{background:#fff;border:1px solid #d0d0d8;border-radius:.9rem;
                            padding:.35rem .9rem;font-size:.9rem}
#filter-bar button{background:#0033A6;color:#fff;border:none;border-radius:.9rem;
                   padding:.45rem 1.3rem;font-weight:500;cursor:pointer}
#filter-bar button:hover{background:#001e66}

/* carousel thumbnails */
.vc-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;cursor:pointer}
.thumb-dl{margin:.25rem .15rem;padding:.25rem .6rem;border-radius:.5rem;border:none;font-size:.8rem}
.thumb-dl.deck{background:#fff;color:#0033A6;border:1px solid #0033A6}
.thumb-dl.deck:hover{background:#0033A6;color:#fff}
.thumb-dl.report.ready{background:#000;color:#fff}
.slider-wrap{display:flex;align-items:center;gap:.6rem;margin:.8rem 0}
#min-rating{width:180px}
/* grey arrow buttons inside Glide same width/height */
.glide__arrow{background:#e5e7eb;border:none;border-radius:8px;width:34px;height:34px;cursor:pointer}
.glide__arrow:hover{background:#d1d5db}

/* --- Choices.js dropdowns: horizontal layout --- */
.choices__list--dropdown .choices__item{ white-space:nowrap; }

/* --- hide founder-only stuff for VC --- */
.vc-only .founder-only,
.founder-only.vc-only{ display:none !important; }
#btn-download[hidden] { display:none !important; }
#upload-card[hidden] { display:none !important; }
#upload-hint[hidden] { display:none !important; }
.founder-only.vc-hide{ display:none !important; }
/* founder upload area always visible when not .hidden */

/* drag-over state */
#drop-zone.dragover { background:#e0e7ff; border-color:#93c5fd; }

.newsletter{
  background:#0E1A26;color:#fff;padding:3rem 0;margin-top:4rem;
}
.newsletter h2{margin:0 0 1.2rem;font-size:1.6rem}
#news-form{display:flex;flex-wrap:wrap;gap:.8rem}
#news-form input{
  flex:1 1 260px;
  padding:.9rem 1.2rem;
  border:none;border-radius:var(--radius);
}
#news-form button{
  background:var(--clr-primary);
  color:#fff;border:none;border-radius:var(--radius);
  padding:.9rem 1.8rem;font-weight:600;cursor:pointer;
}
#news-form button:hover{background:var(--clr-primary-hover)}