/* ================================
   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;
  --hero-translate-y: -30px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  
  
  [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:#0f172a; background:#ffffff; line-height:1.6;
	transition:background .3s,color .3s; overflow-x:hidden;
  }
  
  /* Fallback for browsers that don't support CSS custom properties */
  @supports not (color: var(--fg)) {
    body {
      color: #0f172a;
      background: #ffffff;
    }
  }

  /* Progress Bar */
  .progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, #2d7f50 100%);
    z-index: 9999;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px rgba(62, 168, 111, 0.3);
  }
  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);
	box-shadow: var(--shadow-sm);
  }
  [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:700; 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%; }
  
  /* Enhanced hamburger menu */
  .hamburger{ 
    display:none; 
    background:transparent; 
    border:2px solid var(--accent); 
    color:var(--accent); 
    padding:.5rem; 
    cursor:pointer; 
    border-radius:4px; 
    transition:.2s; 
    flex-direction: column;
    gap: 4px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }
  .hamburger:hover{ background:var(--accent); color:#fff; }
  
  .hamburger-line {
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: all 0.3s ease;
    border-radius: 1px;
  }
  
  /* Animated hamburger */
  .hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
  
  /* Buttons */
  .btn{
	display:inline-block; background:#3ea86f; color:#fff;
	padding:.9rem 2rem; border:2px solid #3ea86f;
	font-weight:600; text-transform:uppercase; letter-spacing:1px;
	border-radius:8px; transition:all .3s ease; font-size:.9rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
  .btn:hover{ 
    background:#2d7f50; 
    border-color:#2d7f50; 
    transform:translateY(-2px); 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .btn--sm{ padding:.55rem .9rem; font-size:.95rem; border-width:1px; }
  .btn-outline{ background:transparent; color:#3ea86f; border:2px solid #3ea86f; }
  .btn-outline:hover{ background:#3ea86f; 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; }
  .btn--nav { padding: 0.6rem 1.6rem; font-size: 0.85rem; }
  
  /* Registration buttons container */
  .registration-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .registration-buttons > * {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .registration-buttons > *:last-child {
    margin-right: 0;
  }
  
  /* Mobile layout for registration buttons */
  @media (max-width: 768px) {
    .registration-buttons {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .registration-buttons > * {
      margin-right: 0;
    }
    
    .registration-buttons > *:last-child {
      margin-bottom: 0;
    }
  }
  
  
  /* Desktop navigation button styling - make it look like regular nav links */
  @media (min-width: 769px) {
    .btn--nav {
      background: transparent;
      color: var(--fg);
      border: none;
      padding: 0.5rem 0;
      font-weight: 500;
      font-size: 0.95rem;
      letter-spacing: 0.5px;
      box-shadow: none;
      text-transform: none;
    }
    
    .btn--nav:hover {
      background: transparent;
      color: var(--accent);
      transform: none;
      box-shadow: none;
    }
    
    .btn--nav::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--accent);
      transition: width 0.3s;
    }
    
    .btn--nav:hover::after {
      width: 100%;
    }
  }
  

  

  
  /* Sections + headings */
  .section{ padding:2rem 0 0rem 0; position:relative; z-index:1; scroll-margin-top: 6rem; }
  .section h2{ font-size:2.5rem; margin:0 0 1.5rem; font-weight:800; display:inline-block; color:var(--fg); position:relative; padding-left:1rem; }
  .section h2::before{ content:""; position:absolute; left:1rem; bottom:-8px; width:60px; height:4px; background:var(--accent); }
  .muted{ color:var(--muted); }
  
  /* Grid-bg flavour */
  .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 */
  .hero{ position:relative; min-height:85vh; display:flex; align-items:center; color:#fff; overflow:hidden; margin-bottom: 0; }
  .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;
    transform: scale(var(--hero-scale)) translateY(var(--hero-translate-y));
    transform-origin: center;
    transition: transform .45s cubic-bezier(.2,.9,.2,1);
  }

  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:10;
    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:20; 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; }

  
  /* Enhanced 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:12px; 
	transition:all .3s ease;
	box-shadow: var(--shadow-sm);
  }
  .card:hover{ 
    transform:translateY(-8px) !important; 
    box-shadow:var(--shadow-xl) !important;
  }
  .card h3{ color:var(--accent); margin:0 0 1rem; font-size:1.4rem; font-weight:700; letter-spacing:.5px; }
  .card p{ color:var(--muted); line-height: 1.6; }
  
  /* 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:12px; 
    transition:all .3s ease;
    box-shadow: var(--shadow-sm);
  }
  .prize:hover{ 
    border-style:solid; 
    border-color:var(--accent); 
    transform:scale(1.02); 
    box-shadow:var(--shadow-lg);
  }
  .prize-amount{ font-size:2rem; color:var(--accent); font-weight:800; display:block; margin:.5rem 0; }
  .prize-amount-label{ color: #000; font-weight: normal; font-family: inherit, sans-serif; font-size: 1.2rem; font-weight: 500;}
  .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:12px;
	box-shadow: var(--shadow-md);
  }
  .quote-avatar{ width:140px; height:140px; border-radius:50%; 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; border-radius:8px; }
  .supporter-logo{ max-width:200px; height:auto; filter:grayscale(100%) opacity(.7); }
  [data-theme="dark"] .supporter-logo{ filter:grayscale(100%) brightness(1.5) opacity(.7); }
  .supporter:hover .supporter-logo{ filter:grayscale(0%) opacity(1); }
  
  
  /* FAQ */
  .faq-categories {
    margin-top: 2rem;
  }

  .faq-category {
    border: 2px solid #e5e7eb;
    margin-bottom: 1rem;
    background: #ffffff;
    border-radius: 8px;
    transition: all .3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .faq-category > * {
    border: none !important;
  }

  .faq-category:hover {
    border-color: rgba(62,168,111,0.15);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .faq-category[open] {
    border-color: #3ea86f;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .faq-category-summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    position: relative;
    padding: 1.5rem;
    padding-right: 60px;
    font-size: 1.2rem;
    color: #3ea86f;
    transition: color .2s ease;
  }

  .faq-category-summary:hover {
    color: #2d7f50;
  }

  .faq-category-summary::-webkit-details-marker {
    display: none;
  }

  .faq-category-summary::after {
    content: "▼";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #3ea86f;
    font-size: 1rem;
    font-weight: 400;
    transition: transform .3s ease;
  }

  .faq-category[open] .faq-category-summary::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .faq-questions {
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin-top: 0;
  }

  .faq-questions details {
    border: 1px solid #e5e7eb;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: rgba(62, 168, 111, 0.02);
    border-radius: 6px;
    transition: all .3s ease;
  }

  .faq-questions details:hover {
    border-color: rgba(62,168,111,0.15);
    background: rgba(62, 168, 111, 0.04);
  }

  .faq-questions details[open] {
    border-color: #3ea86f;
    background: rgba(62, 168, 111, 0.06);
  }

  .faq-questions summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    position: relative;
    padding-right: 30px;
    font-size: 1rem;
    transition: color .2s ease;
  }

  .faq-questions summary:hover {
    color: #3ea86f;
  }

  .faq-questions summary::-webkit-details-marker {
    display: none;
  }

  .faq-questions summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    color: #3ea86f;
    font-size: 1.2rem;
    font-weight: 400;
    transition: transform .3s ease;
  }

  .faq-questions details[open] summary::after {
    transform: rotate(45deg);
  }

  .faq-questions p {
    margin-top: 0.75rem;
    color: #475569;
    line-height: 1.6;
  }
  
  /* Footer */
  .footer{
    margin-top:5rem;
    border-top:3px solid var(--accent);
    padding:3rem 0;
    background: var(--bg);
    position: relative;
    z-index: 3;
    box-shadow: var(--shadow-sm);
  }
  
  .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 }
  
  /* Enhanced Marquee */
  .marquee {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .marquee-inner {
    display: flex;
    width: max-content;
    animation: marquee-scroll 45s linear infinite;
    will-change: transform;
  }

  .marquee-track {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    white-space: nowrap;
    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);
    flex-shrink: 0;
  }

  .m-item b { 
    color: #3ea86f; 
    font-weight: 900; 
  }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
  }

  .marquee:hover .marquee-inner { 
    animation-play-state: paused; 
  }

  /* Hero marquee specific styles */
  .hero-marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    padding: 1rem 0;
    z-index: 15;
    background: transparent;
  }

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

  


  /* Responsive Design */
  @media (max-width:768px){

    
    /* Enhanced mobile navigation */
    .nav{ 
      display:none;
      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: var(--shadow-lg);
      transform: translateY(-100%);
      transition: transform 0.3s ease;
    }
    
    .nav.mobile-open{
      display: flex;
      transform: translateY(0);
    }
    
    .nav.mobile-open a{ 
      padding: 1rem; 
      border-bottom: 1px solid var(--border); 
      width: 100%;
      text-align: center;
      font-size: 1.1rem;
      background: transparent !important;
      color: var(--fg) !important;
      border: none !important;
      box-shadow: none !important;
      text-transform: none !important;
      letter-spacing: 0.5px !important;
      font-weight: 500 !important;
    }
    
    .nav.mobile-open a:last-child {
      border-bottom: none;
    }
    
    .nav.mobile-open a:hover {
      background: transparent !important;
      color: var(--accent) !important;
      transform: none !important;
      box-shadow: none !important;
    }
    
    .hamburger{ display: flex }
    
    .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; gap: 2rem; justify-items: center; max-width: 80%; margin: 0 auto; }
    .prizes{ grid-template-columns: 1fr }
    

    /* Mobile marquee adjustments */
    .hero-marquee {
      bottom: 0;
      padding: 0.8rem 0;
    }
    
    .hero-marquee .m-item { 
      font-size: 1rem; 
      letter-spacing: 2px; 
      font-weight: 700;
    }
    
    .marquee-track { 
      gap: 0.25rem; 
      padding: .6rem .8rem; 
    }
  }
  
  @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; margin-bottom: 0; }
    .section { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  
    
  }
  
  @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; }
    .card { 
      padding: 1.5rem; 
      transition: all .3s ease;
    }
    .card:hover{ 
      transform:translateY(-8px); 
      box-shadow:var(--shadow-xl);
    }
    .prize { padding: 1.5rem; }
    
    /* Extra small screen marquee adjustments */
    .hero-marquee {
      bottom: 0;
      padding: 0.6rem 0;
    }
    
    .marquee-track { 
      gap: 0.125rem; 
      padding: .5rem .6rem; 
    }
    
    .hero-marquee .m-item { 
      font-size: 0.9rem; 
      letter-spacing: 1px; 
      font-weight: 700;
    }
  }

  @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; 
    }
  }