/* ================================
   Global variables + themes
===================================*/
:root{
	--bg:#ffffff;
	--fg:#0f172a;
	--muted:#475569;
	--border:#e5e7eb;
	--accent:#3ea86f;
	--accent-dark:#2d7f50;
	--container:1100px;
	--grid-color: rgba(62,168,111,0.08);
	--blueprint-line: rgba(62,168,111,0.15);
  --hero-brightness: 1;
  --hero-overlay-opacity: 0.5;
  --hero-scale: 1.06;            /* 1 = no zoom, >1 zooms in to crop top+bottom */
  --hero-translate-y: -30px;     /* negative moves image up (cuts top), adjust to taste */
  }

  
  
  [data-theme="dark"]{
	--bg:#0a0f1c;
	--fg:#e0e7ff;
	--muted:#94a3b8;
	--border:#1e293b;
	--accent:#3ea86f;
	--accent-dark:#2d7f50;
	--grid-color: rgba(62,168,111,0.05);
	--blueprint-line: rgba(62,168,111,0.10);
  }
  
  /* Reset + base */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',Roboto,Arial,sans-serif;
	color:var(--fg); background:var(--bg); line-height:1.6;
	transition:background .3s,color .3s; overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  a:hover{text-decoration:underline}
  .container{max-width:var(--container);margin:0 auto;padding:0 1rem}
  
  /* Skip link */
  .skip{position:absolute;left:-9999px}
  .skip:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem 1rem;z-index:1001}
  
  /* Blueprint background overlay */
  .blueprint-grid{
	position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.7;
	background-image:
	  linear-gradient(var(--grid-color) 1.5px, transparent 1.5px),
	  linear-gradient(90deg, var(--grid-color) 1.5px, transparent 1.5px);
	background-size:40px 40px;
  }
  .blueprint-grid::after{
	content:""; position:absolute; inset:0;
	background-image:
	  linear-gradient(var(--blueprint-line) 1px, transparent 1px),
	  linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
	background-size:200px 200px;
  }
  
  /* Header / nav */
  .site-header{
	position:sticky; top:0; z-index:100;
	background:rgba(255,255,255,.95);
	border-bottom:2px solid var(--accent);
	backdrop-filter: blur(10px);
  }
  [data-theme="dark"] .site-header{ background:rgba(10,15,28,.95); }
  
  .header-inner{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem 0; }
  .brand{ font-size:1.5rem; font-weight:800; letter-spacing:2px; color:var(--accent); }
  .nav{ display:flex; gap:2.5rem; align-items:center; }
  .nav a{ color:var(--fg); position:relative; padding:.5rem 0; font-weight:500; font-size:.95rem; letter-spacing:.5px; }
  .nav a:hover{ color:var(--accent); }
  .nav a::after{ content:""; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--accent); transition:width .3s; }
  .nav a:hover::after{ width:100%; }
  
  .hamburger{ display:none; background:transparent; border:2px solid var(--accent); color:var(--accent); font-size:1.5rem; padding:.5rem 1rem; cursor:pointer; border-radius:4px; transition:.2s; }
  .hamburger:hover{ background:var(--accent); color:#fff; }
  
  /* Buttons */
  .btn{
	display:inline-block; background:var(--accent); color:#fff;
	padding:.9rem 2rem; border:2px solid var(--accent);
	font-weight:600; text-transform:uppercase; letter-spacing:1px;
	border-radius:4px; transition:all .2s; font-size:.9rem;
  }
  .btn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-2px); box-shadow:0 4px 12px rgba(62,168,111,.3); }
  .btn--sm{ padding:.55rem .9rem; font-size:.95rem; border-width:1px; }
  .btn-outline{ background:transparent; color:var(--accent); border:2px solid var(--accent); }
  .btn-outline:hover{ background:var(--accent); color:#fff; }
  .btn--large{ padding:1rem 2rem; font-weight:800; letter-spacing:.8px; }
  .btn--ghost{ background:transparent; color:var(--accent); border:2px solid rgba(255,255,255,.2); box-shadow:none; }
  
  /* Theme toggle */
  .theme-toggle{
	position:fixed; top:20px; right:20px; z-index:1000;
	background:var(--bg); border:2px solid var(--accent); color:var(--accent);
	padding:8px 16px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:600; transition:.2s; letter-spacing:.5px;
  }
  .theme-toggle:hover{ background:var(--accent); color:var(--bg); }
  
  /* Sections + headings */
  .section{ padding:5rem 0; position:relative; z-index:1; }
  .section h2{ font-size:2.5rem; margin:0 0 1.5rem; font-weight:800; display:inline-block; color:var(--fg); position:relative; }
  .section h2::before{ content:""; position:absolute; left:0; bottom:-8px; width:60px; height:4px; background:var(--accent); }
  .muted{ color:var(--muted); }
  
  /* Grid-bg flavour (you had this already) */
  .grid-bg{ position:relative }
  .grid-bg::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background-image:
	  linear-gradient(to right,rgba(15,23,42,.06) 1px,transparent 1px),
	  linear-gradient(to bottom,rgba(15,23,42,.06) 1px,transparent 1px);
	background-size:22px 22px;
	mask-image: radial-gradient(60% 60% at 10% 10%, black, transparent 85%);
  }
  
  /* Hero (supports either .hero-media or .hero-bg) */
  .hero{ position:relative; min-height:85vh; display:flex; align-items:center; color:#fff; overflow:hidden; }
  .hero-media, .hero-bg{ position:absolute; inset:0; z-index:0; }
  .hero-media img, .hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    -webkit-user-drag:none;
    /* apply configurable scale + vertical translate to crop top/bottom */
    transform: scale(var(--hero-scale)) translateY(var(--hero-translate-y));
    transform-origin: center;
    transition: transform .45s cubic-bezier(.2,.9,.2,1);
  }


  /* overlay is present but controlled by variable (default 0 = invisible) */
  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    /* keep the same gradient but allow turning it on by changing --hero-overlay-opacity */
    background: linear-gradient(135deg,
      rgba(15,23,42,0.8) 0%,
      rgba(62,168,111,0.2) 100%);
    pointer-events:none;
    opacity: var(--hero-overlay-opacity);
    transition: opacity .25s ease;
  }

  .hero-inner{ position:relative; z-index:2; padding:4rem 0; }
  .hero h1{ font-size:clamp(2.5rem,5vw,4rem); line-height:1.1; margin:0 0 1.5rem; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.3); }
  .hero .highlight{ color:#00ff41; font-weight:900; }
  .lede{ font-size:1.3rem; margin-bottom:2rem; max-width:650px; }
  
/* ---------------------
   Infinite seamless marquee (robust)
   --------------------- */
   /* ---------------------
   Infinite seamless marquee (robust) — CSS
   --------------------- */
.marquee {
  overflow: hidden;
  position: relative;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  background: linear-gradient(90deg, rgba(62,168,111,0.03) 0%, rgba(62,168,111,0.06) 50%, rgba(62,168,111,0.03) 100%);
  z-index: 1;
}

/* marquee-inner is static until the JS marks the parent as data-ready="1" */
.marquee .marquee-inner {
  display: flex;
  align-items: center;
  width: max-content;    /* JS will duplicate to reach desired width */
  transform: translateX(0); /* ensure stable initial position */
  will-change: transform;
  /* animation intentionally disabled by default; only enable when parent is ready */
  animation: none;
}

/* Start the animation only when the marquee is marked ready */
.marquee[data-ready="1"] .marquee-inner {
  animation: marquee-scroll 28s linear infinite;
}

/* a track is one repeated sequence; we'll duplicate via JS if needed */
.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.8rem 1rem;
  white-space: nowrap;
  box-sizing: border-box;
  min-width: 100vw; /* ensure at least fills initial viewport width */
}

/* Individual items */
.m-item {
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 1.05rem;
  color: var(--fg);
}

/* Green "Technologists" */
.m-item b { color: var(--accent); font-weight: 900; }

/* animation: translate by half of the inner width (JS ensures inner is duplicated to cover this) */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* move exactly half of full width */
}

/* pause on hover */
.marquee:hover .marquee-inner { animation-play-state: paused; }

/* hero-specific styles to place marquee at bottom and make it larger */
.hero .marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.06));
}

.hero .marquee .m-item {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  letter-spacing: 4px;
  font-weight: 800;
}

/* accessibility / mobile tweaks */
@media (max-width: 768px) {
  .hero .marquee .m-item { font-size: 1rem; letter-spacing: 2px; }
  .marquee-track { gap: 1rem; padding: .6rem .8rem; min-width: auto; }
}

  
  /* accessibility: keep things readable on small screens */
  @media (max-width: 768px) {
    .hero .marquee .m-item { font-size: 1rem; letter-spacing: 2px; }
    .marquee-track { gap: 1rem; padding: .6rem .8rem; }
  }
  


  .marquee-inner{ display:inline-block; padding-left:100%; animation:marquee 25s linear infinite; font-size:1.1rem; letter-spacing:3px; text-transform:uppercase; font-weight:600; }
  .marquee-inner span{ color:var(--accent); font-weight:800; }
  @keyframes marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
  
  /* Cards */
  .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2rem; margin-top:3rem; }
  .card{
	border:2px solid var(--blueprint-line); padding:2rem; background:var(--bg); position:relative; border-radius:4px; transition:.3s;
  }
  .card:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 10px 25px rgba(62,168,111,.15); }
  .card h3{ color:var(--accent); margin:0 0 1rem; font-size:1.4rem; font-weight:700; letter-spacing:.5px; }
  .card p{ color:var(--muted) }
  
  /* Numbered corner badge */
  .diagram-number{
	position:absolute; top:1rem; right:1rem; width:30px; height:30px; border:2px solid var(--accent); border-radius:50%;
	display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent); font-size:.9rem;
  }
  
  /* Prizes */
  .prizes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin:3rem 0; }
  .prize{ border:3px dashed var(--blueprint-line); padding:2rem; text-align:center; background:var(--bg); border-radius:4px; transition:.3s; }
  .prize:hover{ border-style:solid; border-color:var(--accent); transform:scale(1.05); box-shadow:0 10px 30px rgba(62,168,111,.2); }
  .prize-amount{ font-size:2rem; color:var(--accent); font-weight:800; display:block; margin:.5rem 0; }
  .prize h3{ margin:0 0 1rem; }
  
  /* Quote with Bobby (avatar) */
  .quote-figure{
	display:flex; gap:2rem; align-items:center; margin:3rem 0; padding:2rem;
	border:2px solid var(--blueprint-line); background:linear-gradient(135deg, var(--bg) 0%, rgba(62,168,111,.02) 100%); border-radius:4px;
  }
  .quote-avatar{ width:140px; height:140px; border-radius:8px; overflow:hidden; border:3px solid var(--accent); flex-shrink:0; }
  .quote-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .quote-content{ flex:1 }
  .quote-content p{ font-size:1.1rem; line-height:1.6; color:var(--fg); margin:0 0 1rem; font-style:italic; }
  .quote-content figcaption{ color:var(--muted); font-size:.95rem; }
  
  /* Supporters */
  .supporters-section{ padding:3.5rem 0; }
  .supporters-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:3rem; margin:3rem 0; align-items:center; }
  .supporter{ display:flex; justify-content:center; align-items:center; padding:2rem; border:2px solid transparent; transition:.3s; border-radius:4px; }
  .supporter:hover{ border-color:var(--blueprint-line); background:rgba(62,168,111,.02); }
  .supporter-logo{ max-width:200px; height:auto; filter:grayscale(100%) opacity(.7); transition:filter .3s; }
  [data-theme="dark"] .supporter-logo{ filter:grayscale(100%) brightness(1.5) opacity(.7); }
  .supporter:hover .supporter-logo{ filter:grayscale(0%) opacity(1); }
  
  /* FAQ */
  .faq details{ border:2px solid var(--border); margin-bottom:1rem; padding:1.5rem; background:var(--bg); border-radius:4px; transition:.3s; }
  .faq details:hover{ border-color:var(--blueprint-line) }
  .faq details[open]{ border-color:var(--accent) }
  .faq summary{ cursor:pointer; font-weight:600; list-style:none; position:relative; padding-right:40px; font-size:1.05rem; }
  .faq summary::-webkit-details-marker{ display:none }
  .faq summary::after{ content:"+"; position:absolute; right:0; top:0; color:var(--accent); font-size:1.5rem; font-weight:400; transition:transform .3s; }
  .faq details[open] summary::after{ transform:rotate(45deg) }
  .faq details p{ margin-top:1rem; color:var(--muted) }
  
  /* Footer */
  .footer{
    margin-top:5rem;
    border-top:3px solid var(--accent);
    padding:3rem 0;
    /* plain background so the footer reads as a white banner */
    background: var(--bg);
    position: relative;
    z-index: 3; /* bring it above the blueprint grid */
  }
  
  .footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:3rem; margin-bottom:2rem; }
  .footer h3{ color:var(--accent); margin:0 0 1rem; font-size:1.2rem; font-weight:700 }
  .footer h4{ color:var(--fg); margin:0 0 .5rem; font-weight:600 }
  .footer p{ color:var(--muted) }
  .copyright{ text-align:center; padding-top:2rem; border-top:1px solid var(--border); color:var(--muted); font-size:.9rem; letter-spacing:.5px }
  
  /* Responsive */
  @media (max-width:768px){
	.theme-toggle{ top:auto; right:20px; bottom:20px; }
	.nav{ display:none }
	.nav.mobile-open{
	  display:flex; position:fixed; top:70px; left:0; right:0; background:var(--bg);
	  border-bottom:2px solid var(--accent); flex-direction:column; padding:1rem; z-index:999;
	  box-shadow:0 4px 12px rgba(0,0,0,.1);
	}
	.nav.mobile-open a{ padding:1rem; border-bottom:1px solid var(--border); width:100% }
	.hamburger{ display:block }
	.hero h1{ font-size:2.2rem }
	.lede{ font-size:1.1rem }
	.quote-figure{ flex-direction:column; text-align:center }
	.quote-avatar{ width:100px; height:100px }
	.section h2{ font-size:1.8rem }
	.cards{ grid-template-columns:1fr; gap:1.5rem }
	.supporters-grid{ grid-template-columns:1fr }
	.prizes{ grid-template-columns:1fr }
  }
  
  /* ---------------------
   Improved Marquee (seamless, no gaps)
   --------------------- */
.marquee {
  overflow: hidden;
  position: relative;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  background: linear-gradient(90deg, rgba(62,168,111,0.03) 0%, rgba(62,168,111,0.06) 50%, rgba(62,168,111,0.03) 100%);
  z-index: 1;
}

.marquee-inner {
  display: flex;
  width: 200%;               /* two tracks = 200% */
  animation: marquee-scroll 28s linear infinite;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem 0;
  min-width: 100vw;         /* ensure each track at least viewport width */
  box-sizing: border-box;
}

.m-item {
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 1.05rem;
  color: var(--fg);
}

.m-item b { color: var(--accent); font-weight: 900; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* slide one track width */
}

/* slower on hover */
.marquee:hover .marquee-inner { animation-play-state: paused; }

/* ---------------------
   Preferred Bobby quote look (restores original look but consistent)
   --------------------- */
.quote-figure{
  display:flex;
  gap:1rem;
  align-items:center;
  max-width:980px;
  margin:2rem 0;
  padding:1rem;
  border-radius:12px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
}

/* avatar is circular (your preferred style) */
.quote-avatar{
  flex: 0 0 160px;
  width:160px;
  height:160px;
  overflow:hidden;
  border-radius:50%;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  border: 3px solid rgba(62,168,111,0.14);
}

.quote-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.quote-figure blockquote{
  margin:0;
  font-style: normal;
  color:var(--fg);
}
.quote-figure blockquote p{
  margin:0 0 .6rem 0;
  font-size:1.05rem;
  line-height:1.5;
}
.quote-figure figcaption{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

/* ---------------------
   Organisers grid + logos
   --------------------- */
   .organisers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start;
    margin-top: 1.5rem;
  }
  
  /* each organiser row/card */
  .organiser {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(62,168,111,0.02), transparent);
    border: 1px solid var(--border);
    transition: transform .18s ease, box-shadow .18s ease;
  }
/* ---------------------
   Organisers grid + logos (solid cards + logo frames)
   --------------------- */
   .organisers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
  }
  
  /* each organiser row/card */
  .organiser {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 10px;
    /* solid card background (not transparent) so white logos and text are visible */
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(15,23,42,0.04);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .organiser:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(15,23,42,0.07);
  }
  
  /* place logo left, text to the right; add a small contrasting frame behind the logo */
  .organiser-media {
    flex: 0 0 96px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    padding: 0.5rem;
    /* dark frame behind logos so white/transparent artwork shows up */
    background: rgba(15,23,42,0.07);
  }
  
  /* In dark theme, use a lighter frame so logos remain visible */
  [data-theme="dark"] .organiser-media {
    background: rgba(255,255,255,0.06);
  }
  
  .organiser-logo {
    max-width: 88px;
    max-height: 88px;
    width: auto;
    height: auto;
    display:block;
    object-fit:contain;
    /* remove the grayscale/opacity so logos render in full colour */
    filter: none;
    opacity: 1;
    transition: transform .18s ease, filter .18s ease;
    border-radius: 6px;
  }
  .organiser:hover .organiser-logo {
    transform: translateY(-2px) scale(1.02);
  }
  
  /* body text for organiser */
  .organiser-body h3 {
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    color: var(--accent);
  }
  .organiser-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
  }
  
  /* Mobile tweaks: slightly smaller logo frame and stacked behaviour */
  @media (max-width: 640px) {
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }
    .hero-inner { padding-top: 2rem; padding-bottom: 2rem; }
    .hero { min-height: 60vh; }
    .section { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  
    .organiser {
      flex-direction: row;
      gap: 0.9rem;
    }
    .organiser-media { flex: 0 0 70px; padding: 0.35rem; }
    .organiser-logo { max-width: 70px; max-height: 70px; border-radius: 6px; }
  }
  
  
  /* extra polish for very small phones */
  @media (max-width: 420px) {
    .lede { font-size: 1rem; }
    .hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  }
  

/* mobile tweak: stack */
@media (max-width:720px){
  .quote-figure{ flex-direction:column; align-items:flex-start; padding:1rem; }
  .quote-avatar{ width:80px; height:80px; flex:0 0 80px; border-radius:10px; }
  .quote-figure blockquote p { text-align:left; }
}

/* ---------------------
   Supporters white banner / hero for logos
   --------------------- */
.supporters-banner{
  background: #ffffff;       /* plain white banner */
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.supporters-banner .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 1rem;
}

.supporters-banner .supporters-grid{
  width:100%;
  padding:1rem 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items:center;
  justify-items:center;
}

@media (max-width:980px){
  .supporters-banner .supporters-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width:640px){
  .supporters-banner .supporters-grid{ grid-template-columns: 1fr; }
  .supporters-banner { padding: 1.25rem 0; }
}