/* ---- Local Variable Font: Nunito (aliased as "Raleway") ---- */
@font-face{
  font-family: "Raleway"; /* keep existing family name */
  src:
    url("/static/assets/fonts/Nunito-Subset.woff2") format("woff2"),
    local("Nunito Variable"),
    local("NunitoVariable"),
    url("/static/assets/fonts/Nunito-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 1000;     /* Nunito variable range */
  font-style: normal;
  font-display: swap;
}

/* ───────────────────────────────────────────────
   DeBo • Unified Dark Theme (iOS EventDetail parity)
   Primary: skyBlue; Base: neutral dark grays
   PastelGreen is secondary-only & used sparingly.
   ─────────────────────────────────────────────── */

:root{
  /* Base colors (iOS constants) */
  --neutralDarkGray:#333333;          /* page background   */
  --neutralMidGray:#3d3d3d;           /* card/nav bg       */
  --neutralLight:#f5f5f5;             /* primary text      */
  --textMuted:#c7c7c7;                /* muted body text   */

  /* Accents (from your Swift constants) */
  --skyBlue:#7da0cf;
  --softTeal:#64b9c3;
  --lightLavender:#9687d2;
  --pastelGreen:#65cf69;
  --pastelOrange:#cfb17a;
  --pastelCoral:#cf5990;

  /* Layout & motion */
  --radius:14px;
  --shadow:0 8px 26px rgba(0,0,0,.35);
  --transition:.25s ease;
  --maxWidth:1200px;

  /* Typo stack */
  --font-sans: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reset-ish */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--neutralDarkGray);
  color:var(--neutralLight);
  font-family:var(--font-sans);
  line-height:1.55;
}
a{color:var(--skyBlue);text-decoration:none;transition:color var(--transition)}
a:hover,a:focus{color:#dbefff;text-decoration:underline}
img{display:block;max-width:100%;height:auto}

.container{max-width:var(--maxWidth);margin-inline:auto;padding-inline:24px}
.page-pad{padding-top:140px;padding-bottom:64px}
section{padding:88px 0}

/* Header / Nav */
.site-header{
  position:fixed;inset:0 0 auto;
  background:var(--neutralMidGray);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 6px rgba(0,0,0,.6);
  z-index:999;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 24px;
}
.nav__logo{
  font-size:1.35rem;font-weight:800;display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,var(--skyBlue),var(--softTeal));
  -webkit-background-clip:text;color:transparent;
}
.logo-img{height:32px;width:auto}
.nav__links{display:flex;gap:20px;flex-wrap:wrap}
.nav__links a{font-weight:700;color:var(--neutralLight);opacity:.85}
.nav__links a:hover{opacity:1;color:#fff}
.nav__toggle{
  display:none;background:none;border:none;cursor:pointer;
  font-size:1.9rem;line-height:1;color:var(--neutralLight);
}

/* Mobile nav */
@media (max-width: 640px){
  .nav{padding:14px 16px}
  .nav__toggle{display:block}
  .nav__links{
    position:fixed;top:64px;left:0;right:0;
    background:var(--neutralMidGray);
    flex-direction:column;align-items:flex-start;
    gap:18px;padding:24px;transform:translateY(-150%);
    transition:transform .25s ease;z-index:998;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav__links.open{transform:translateY(0)}
}

/* Buttons */
.btn{
  display:inline-block;border:0;border-radius:9999px;
  padding:12px 28px;font-weight:800;
  transition:transform var(--transition),background var(--transition),box-shadow var(--transition);
  box-shadow:var(--shadow);
}
.btn--primary{
  background:var(--skyBlue);color:#0b1220;
}
.btn--primary:hover{transform:translateY(-1px);background:#94b6da}
.btn--outline{
  border:2px solid var(--skyBlue);color:var(--skyBlue);background:transparent;box-shadow:none;
}
.btn--outline:hover{background:var(--skyBlue);color:#0b1220}

/* Hero */
.hero{
  min-height:94vh;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 20% -10%, var(--neutralMidGray) 0%, var(--neutralDarkGray) 60%);
  padding-top:120px;
}
.hero h1{
  font-size:clamp(2.4rem,5vw,4rem);
  font-weight:800;line-height:1.1;margin:18px 0 14px;
}
.hero h1 span{color:var(--pastelGreen)}
.hero p{font-size:1.2rem;max-width:780px;margin-inline:auto;margin-bottom:28px;color:var(--textMuted)}
.section-video{width:100%;max-width:360px;display:block;margin:0 auto;border-radius:12px;box-shadow:var(--shadow)}

/* Grid & Cards */
.grid-3{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:var(--neutralMidGray);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;
}
.card-image{border-radius:10px;margin-bottom:8px}
.card h3{font-size:1.15rem;font-weight:800;color:var(--skyBlue)}
.card p{color:var(--textMuted);font-size:.98rem}

/* Sections */
.section-title{text-align:center;margin-bottom:32px;font-size:2rem;font-weight:800}

/* Download block */
.download{text-align:center}
.cta-logo{display:block;height:90px;width:auto;margin:0 auto 20px}

/* Footer */
footer{
  background:var(--neutralMidGray);
  color:#b3b9c6;text-align:center;
  padding:36px 24px 28px;border-top:1px solid rgba(255,255,255,.06);
}
.footer__links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.footer__links a:hover{color:#fff}

/* Inputs / forms */
.form-grid{display:grid;gap:16px}
.input{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:var(--neutralMidGray);color:var(--neutralLight);outline:none;
}
.input::placeholder{color:#cfcfcf}
.input:focus{border-color:var(--skyBlue);box-shadow:0 0 0 3px rgba(125,160,207,.25)}

/* Fade-in utility */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity var(--transition),transform var(--transition)}
.fade-in.appear{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none}}

/* ─────────────────────────────
   Event Detail (iOS parity)
   ───────────────────────────── */
.event-hero{
  position:relative;border-radius:14px;overflow:hidden;margin-top:92px;margin-bottom:14px;
  background:var(--neutralMidGray);box-shadow:var(--shadow);min-height:240px;
}
.carousel__track{
  display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
}
.carousel__track img, .carousel__track video{
  width:100%;max-height:320px;object-fit:cover;flex:0 0 100%;scroll-snap-align:center;
}
.carousel__dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px}
.carousel__dots button{
  width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer
}
.carousel__dots button[aria-current="true"]{background:#fff}

.hero-overlay{
  position:absolute;inset:auto 0 0 0;
  padding:10px 12px;display:flex;align-items:center;gap:8px;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
}
.pill-group{display:flex;gap:8px;align-items:center}
.pill{
  color:#fff;background:var(--skyBlue);
  padding:6px 10px;border-radius:999px;font-size:.85rem;font-weight:800;white-space:nowrap
}
.pill--muted{background:rgba(0,0,0,.45)}
.pill--success{background:var(--pastelGreen)}
.pill--warning{background:var(--pastelOrange)}
.pill--idea{background:var(--pastelCoral)}

.hero-actions{margin-left:auto;display:flex;gap:8px}
.icon-btn{
  width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);
  display:grid;place-items:center;cursor:pointer;font-weight:800;color:#0b1220;
  box-shadow:var(--shadow);text-decoration:none
}
.icon-btn:hover{background:#fff}
.icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75}

.creator-row{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 10px}
.creator{display:flex;align-items:center;gap:10px;text-decoration:none}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#777}
.avatar--xl{width:120px;height:120px}
.creator__name{font-weight:800;color:var(--neutralLight)}

.event-head h1{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;margin:6px 0 2px}
.event-categories{color:var(--skyBlue);font-weight:800}

.event-desc{margin:10px 0 8px;color:var(--neutralLight)}

.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0 6px}
.info-card{
  display:flex;gap:12px;align-items:center;background:var(--neutralMidGray);
  border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;box-shadow:var(--shadow)
}
.info-icon{font-size:1.25rem}
.info-label{font-size:.85rem;color:var(--textMuted);font-weight:800}
.info-value{font-size:1rem;color:var(--neutralLight)}

.cta-row{margin:14px 0 4px;display:flex;justify-content:center}

/* Profile */
.profile-card{
  background:var(--neutralMidGray);border-radius:14px;box-shadow:var(--shadow);
  padding:28px;max-width:640px;margin:92px auto 0;text-align:center
}
.profile-name{font-weight:800;margin-top:12px}
.profile-bio{color:var(--textMuted);margin:8px 0 18px}

/* Legal pages */
.legal h1{margin-bottom:12px}
.legal h2{margin-top:24px;margin-bottom:8px}
.legal p, .legal li, .legal address{color:var(--neutralLight)}
.legal ul{margin-left:1.2rem}