/* ===========================
   Boulder Alleycat — site.css
   Single stylesheet for ALL pages
   =========================== */

/* ---------- Design tokens ---------- */
:root{
  --bg:#0f0f10;
  --text:#ffffff;
  --muted:#cfcfcf;
  --accent:rgb(20, 80, 160);
  --accentDark:rgb(15, 50, 120);
  --accentLight:rgb(30, 100, 180);

  --navH:64px;
  --navBorder:#2E2E31;
  --panelW:88vw;
  --panelMaxW:360px;

  --card:#1b1c1d;
  --cardEdge:#2a2a2a;

  --radius:12px;
  --shadow:0 4px 12px rgba(0,0,0,.2);
}

/* ---------- Base / Reset-ish ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "HelveticaCustom", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a,a:visited{color:#fff;text-decoration:none}
a:hover{opacity:.95}

/* ---------- Font face ---------- */
@font-face{
  font-family:"HelveticaCustom";
  src:url("/Helvetica-BoldOblique-04.ttf") format("truetype");
  font-style:oblique;
  font-weight:700;
  font-display:swap;
}

/* ============================================================
   NAV SYSTEM (expects nav.html to render .nav + .menu + .burger + .panel)
   Desktop: top fixed bar with dropdown
   Mobile: slide-over vertical panel with collapsible Races submenu
   ============================================================ */

/* Shell */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--navH); z-index:1000;
  display:flex; align-items:center;
  background:rgba(0,0,0,.65); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--navBorder);
}
.nav__inner{
  width:100%; max-width:1200px; margin:0 auto; padding:0 14px;
  display:flex; align-items:center; gap:12px;
}
.brand a{font:800 1.2rem/1 "HelveticaCustom", Helvetica, Arial, sans-serif; letter-spacing:.02em}

/* Desktop menu */
.menu{display:flex; align-items:center; gap:18px; margin-left:auto}
.menu>li{position:relative; list-style:none}
.menu>li>a, .menu>li>button{
  padding:10px 6px; border:0; background:none; cursor:pointer;
  font:700 1rem/1 "HelveticaCustom", Helvetica, Arial, sans-serif; color:#fff;
}
.menu>li>a:hover, .menu>li>button:hover{color:var(--accent)}

/* Dropdown (scrollable if long) */
.submenu{
  position:absolute; top:100%; left:0; min-width:220px; max-height:60vh; overflow:auto;
  background:rgba(20,20,20,.98); border:1px solid var(--navBorder);
  border-radius:12px; padding:8px; display:none; box-shadow:var(--shadow);
}
.submenu a{
  display:block; padding:10px 12px; border-radius:8px;
  font:600 .98rem/1.1 "HelveticaCustom", Helvetica, Arial, sans-serif;
}
.submenu a:hover{background:rgba(255,255,255,.06); color:var(--accent)}
.menu>li:hover>.submenu{display:block}

/* Mobile trigger */
.burger{display:none; margin-left:auto}
.burger button{
  background:none; border:1px solid var(--navBorder); border-radius:10px;
  padding:8px 10px; color:#fff;
  font:700 1rem/1 "HelveticaCustom", Helvetica, Arial, sans-serif;
}

/* Mobile panel */
.panel{
  position:fixed; inset:var(--navH) 0 0 auto; width:var(--panelW); max-width:var(--panelMaxW);
  background:rgba(20,20,20,.98); border-left:1px solid var(--navBorder);
  transform:translateX(100%); transition:transform .25s ease; z-index:1001;
  display:flex; flex-direction:column;
}
.panel.open{ transform:translateX(0) }
.panel__list{ padding:14px; display:grid; gap:6px }
.panel__list a, .panel__list button{
  text-align:left; color:#fff; border:0; background:none; border-radius:10px;
  padding:10px 12px; font:700 1rem/1.1 "HelveticaCustom", Helvetica, Arial, sans-serif;
}
.panel__list a:hover, .panel__list button:hover{ background:rgba(255,255,255,.06); color:var(--accent) }

.panel__submenu{
  margin:4px 0 0 8px; max-height:40vh; overflow:auto;
  border-left:2px solid var(--navBorder); padding-left:8px; display:none;
}
.panel__submenu.open{ display:block }
.panel__submenu a{
  display:block; padding:8px 10px; border-radius:8px;
  font:600 .95rem/1.1 "HelveticaCustom", Helvetica, Arial, sans-serif;
}

/* Force vertical nav on mobile; kill legacy horizontal row */
@media (max-width:860px){
  .menu{display:none}
  .burger{display:block}
  nav ul{display:block !important; justify-content:initial !important; flex-wrap:unset !important}
}
@media (max-height:740px){
  body{ padding-top:56px } /* short screens */
}

/* ============================================================
   HOME (index)
   ============================================================ */

/* Fullscreen image hero with title (index.html) */
.fullscreen-image{ position:relative; min-height:100vh; display:grid; place-items:center; }
.fullscreen-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }
.title{
  position:relative; z-index:1; margin:0;
  font:800 clamp(34px,8vw,96px)/1 "HelveticaCustom", Helvetica, Arial, sans-serif;
  letter-spacing:.02em; text-align:center;
  background:linear-gradient(
    110deg,
    #fff 0%,
    #fff 15%,
    var(--accentLight) 30%,
    var(--accent) 45%,
    var(--accentDark) 55%,
    var(--accent) 65%,
    var(--accentLight) 80%,
    #fff 95%,
    #fff 100%
  );
  background-size:300% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:raceFlow 15s ease-in-out infinite;
  filter:drop-shadow(0 0 20px rgba(20,80,160,.3)) drop-shadow(0 0 40px rgba(30,100,180,.2));
}

@keyframes raceFlow{
  0%{
    background-position:0% 50%;
    filter:drop-shadow(0 0 20px rgba(20,80,160,.3)) drop-shadow(0 0 40px rgba(30,100,180,.2)) brightness(1) saturate(1);
  }
  25%{
    background-position:50% 50%;
    filter:drop-shadow(0 0 30px rgba(30,100,180,.5)) drop-shadow(0 0 60px rgba(20,80,160,.3)) brightness(1.2) saturate(1.3);
  }
  50%{
    background-position:100% 50%;
    filter:drop-shadow(0 0 40px rgba(20,80,160,.6)) drop-shadow(0 0 80px rgba(30,100,180,.4)) brightness(1.4) saturate(1.5);
  }
  75%{
    background-position:50% 50%;
    filter:drop-shadow(0 0 30px rgba(30,100,180,.5)) drop-shadow(0 0 60px rgba(20,80,160,.3)) brightness(1.2) saturate(1.3);
  }
  100%{
    background-position:0% 50%;
    filter:drop-shadow(0 0 20px rgba(20,80,160,.3)) drop-shadow(0 0 40px rgba(30,100,180,.2)) brightness(1) saturate(1);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .title{
    animation:raceFlowSlow 8s ease-in-out infinite;
  }
  @keyframes raceFlowSlow{
    0%, 100%{ background-position:0% 50%; filter:brightness(1); }
    50%{ background-position:100% 50%; filter:brightness(1.15); }
  }
}

#instagram-logo-link{
  position:fixed; right:16px; bottom:16px; z-index:10;
  transition:none !important;
  transform:none !important;
}
#instagram-logo{
  width:48px; height:48px;
  transition:none !important;
  transform:none !important;
}

/* Content wrapper */
.content{ max-width:1100px; margin:32px auto; padding:0 16px }

/* Background dim layer used on most pages */
.background-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(1200px 800px at 75% -10%, rgba(20,80,160,.1), rgba(0,0,0,0));
}

/* ============================================================
   RACE PAGES (01…10)
   ============================================================ */

/* Race navigation labeled buttons */
.race-nav{
  position:fixed; bottom:20px; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; padding:0 16px;
  pointer-events:none;
}
.race-nav-btn{
  pointer-events:auto;
  display:flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:8px;
  background:linear-gradient(135deg, rgba(15,50,120,.9), rgba(20,80,160,.9));
  border:2px solid rgba(255,255,255,.15);
  color:#fff; font-weight:700; font-size:0.95rem; text-decoration:none;
  transition:all .25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  white-space:nowrap;
}
.race-nav-btn:hover{
  background:linear-gradient(135deg, rgba(20,80,160,1), rgba(30,100,180,1));
  border-color:rgba(255,255,255,.3);
  transform:scale(1.08) translateY(-2px); opacity:1;
  box-shadow:0 4px 16px rgba(20,80,160,.4);
}
@media (max-width:640px){
  .race-nav-btn{ padding:10px 12px; font-size:0.85rem; }
}

/* Shared race title block (race01.html + races02-10) */
.race-title{ text-align:center; margin:18px auto 16px; padding:0 16px; }
.race-title h1{
  margin:0 0 6px;
  font:800 clamp(28px,6vw,56px)/1 "HelveticaCustom", Helvetica, Arial, sans-serif;
}
.race-title h2{ margin:6px 0; font:700 clamp(18px,3.2vw,28px)/1.2 "HelveticaCustom", Helvetica, Arial, sans-serif; opacity:.9 }
.race-title p{ margin:0; color:var(--muted) }

/* Two-up details block (race01 legacy layout) */
.race-details, .race-details2{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  max-width:1100px; margin:16px auto; padding:0 16px;
}
.race-image img, .race-image2 img{ width:100%; border-radius:var(--radius); border:1px solid var(--cardEdge) }
.race-text h2{ margin:0 0 8px }
.race-text ol, .race-text ul{ margin:0; padding-left:18px }
@media (max-width:900px){
  .race-details, .race-details2{ grid-template-columns:1fr }
}

/* Leaderboards grid (races02-10) */
.leaderboards{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  max-width:1100px; margin:16px auto; padding:0 16px;
}
.leaderboard{
  background:linear-gradient(180deg, var(--card), #171717);
  border:1px solid var(--cardEdge); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow);
}
.leaderboard h2{ margin:0 0 10px }
.leaderboard img{ width:100%; border-radius:10px; border:1px solid var(--cardEdge) }
.winning-time{ margin:8px 0 0; color:var(--muted) }
@media (max-width:900px){
  .leaderboards{ grid-template-columns:1fr }
}

/* Descriptive sections */
.race-description, .checkpoint-list, .winning-route, .photo-archive{
  max-width:1100px; margin:22px auto; padding:0 16px; 
}
.race-description h2, .checkpoint-list h2, .winning-route h2, .photo-archive h2{ margin:0 0 10px }
.checkpoint-list ol{ margin:0; padding-left:22px }
.winning-route img{ width:70%; border-radius:10px; border:1px solid var(--cardEdge); margin-top:8px }

/* Photo archive grid */
.photos{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
}
.photo-links{ margin-top:10px; display:flex; gap:12px; flex-wrap:wrap }
.photo-links a{ padding:8px 10px; border:1px solid var(--cardEdge); border-radius:10px; background:#171717 }
@media (max-width:900px){
  .photos{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:600px){
  .photos{ grid-template-columns:1fr }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.image-container, #image-container2{
  max-width:1100px; margin:10px auto; padding:0 16px; display:grid; place-items:center;
}
.thumbnail, .thumbnail2{
  border-radius:12px; border:1px solid var(--cardEdge);
  width:min(100%, 880px); box-shadow:var(--shadow);
}

/* ============================================================
   RACES LANDING (races.html)
   ============================================================ */

.races-wrap{ max-width:1100px; margin:0 auto; padding:24px 16px }
.races-header{
  text-align:left;
  margin-bottom:48px;
  padding:0 0 28px 0;
  background:none;
  border-radius:0;
  border:none;
  border-bottom:1px solid rgba(20,80,160,.3);
}
.races-header h1{
  margin:0 0 12px;
  font-size:clamp(36px,5vw,56px);
  background:none;
  -webkit-background-clip:unset;
  -webkit-text-fill-color:unset;
  background-clip:unset;
  color:#fff;
}
.races-header p{ margin:0; color:var(--muted); font-size:0.95rem; font-weight:400; }

.era{
  margin:56px 0;
  padding:0;
  background:none;
  border-radius:0;
  border-left:none;
}
.era h2{
  margin:0 0 28px;
  font-size:clamp(20px,3vw,28px);
  color:#fff;
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
}
.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
@media (max-width:1024px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr } }

.race-card{
  display:block; padding:24px 18px; border-radius:8px;
  background:transparent;
  border:1px solid rgba(20,80,160,.3); box-shadow:none;
  transition:all .2s ease;
  text-align:left;
  position:relative;
  overflow:hidden;
}
.race-card::before{
  content: attr(data-race-number);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(140px, 20vw, 280px);
  font-weight:800;
  color:rgba(255,255,255,.03);
  font-family: "HelveticaCustom", Helvetica, Arial, sans-serif;
  line-height:1;
  z-index:0;
  pointer-events:none;
}
.race-card::after{
  content:'';
  position:absolute; inset:0;
  background:none;
  opacity:0; transition:opacity .2s ease;
}
.race-card:hover::after{ opacity:0; }
.race-card:hover, .race-card:focus-visible{
  transform:translateX(4px);
  border-color:rgba(20,80,160,.6);
  outline:none;
  box-shadow:none;
}
.race-card .race-title{
  position:relative; z-index:1;
  margin:0 0 4px; font-weight:700; font-size:1.15rem;
  color:#fff;
}
.race-card .race-title-fx{
  position:absolute; top:29px; left:50%; transform:translate(-50%, 0);
  width:100%;
  margin:0 0 4px 0; font-weight:700; font-size:1.15rem;
  color:#fff;
  pointer-events:none;
  transition:transform .25s ease, color .25s ease;
  text-align:center;
  line-height:1;
  z-index: 1000;
  
}
.race-card:hover .race-title-fx{
  transform:translate(calc(-50% + 3px), 0);
  color:var(--accentLight);
}
.race-card .race-meta{
  position:relative; z-index:1;
  margin:0 0 6px;
  color:var(--accentLight);
  font-weight:400;
  font-size:1rem;
}
.race-card .race-brief{
  position:relative; z-index:1;
  margin-top:4px; opacity:1; font-size:1rem; line-height:1.5; color:var(--muted);
}

/* ============================================================
   Footer
   ============================================================ */
footer{ text-align:center; color:var(--muted); padding:24px 0; }
/* === PATCH: Respect your original background (bring it back) === */
/* Set this to your actual image path; if you already set bg on pages, this won't fight it. */

body{
  background-image: var(--bgImage);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Kill any gradient/overlay from earlier */
.background-overlay{ display:none !important; }

/* === PATCH: Center the page sections you called out (container-centered, text still readable) === */
.race-description,
.checkpoint-list,
.winning-route,
.photo-archive{
  max-width: 900px;           /* narrower for readability */
  margin: 22px auto !important; /* center block on page */
  padding: 0 16px;
  text-align: center;           /* content left-aligned while the block is centered */
}

/* === PATCH: Remove the rounded-rectangle “boxing” around images on race pages === */
/* Leaderboard “cards” → no bg/border/shadow; just image + labels */
.leaderboard{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.leaderboard h2{ margin: 0 0 8px; }
.leaderboard img{
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Generic race images */
.race-image img,
.race-image2 img,
.winning-route img,
.photos img{
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  align-items: center;
}

/* Slightly looser line-height for readability (you asked for less “tight”) */
body{ line-height: 1.55; }
.race-description p,
.checkpoint-list li,
.winning-route p,
.photo-archive p{ line-height: 1.55; }

/* === PATCH: Mobile nav transforms to a simple, vertical menu (no collapsible races) === */
/* Desktop: keep your existing left-side nav as-is. Mobile: show only 5 items. */
@media (max-width: 860px){
  /* Hide the desktop list; show the burger (assumes your nav.html has .burger + .panel) */
  .menu{ display: none !important; }
  .burger{ display: block !important; }

  /* Ensure the panel is a straightforward list */
  .panel__list{ gap: 8px; }
  /* Hide any races submenu if it exists in nav.html */
  .panel__submenu{ display: none !important; }
}

/* Optional: make centered sections a bit wider on large screens while still centered */
@media (min-width: 1200px){
  .race-description,
  .checkpoint-list,
  .winning-route,
  .photo-archive{ max-width: 1000px; }
}
/* ==== Desktop left-side nav positioning ==== */
.nav-side{
  position: fixed; top: 20px; left: 20px; z-index: 1000;
}

/* Container to stack both menus perfectly atop each other */
.desktop-navFX{
  position: relative;
  transition: opacity .3s ease;
  opacity: 0.4;
}

.nav-side:hover .desktop-navFX {
  opacity: 1;
}

/* Shared menu look */
.menu-side{ list-style: none; margin: 0; padding: 0; }
.menu-side li{ margin: 0; }
.menu-side a{
  display: inline-block;
  padding: 10px 0 10px 20px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  text-decoration: none;
  transition: transform .25s ease, color .25s ease, opacity .25s ease;
  white-space: nowrap;
}

/* Base layer: purely visual, white, stationary, non-interactive */
.menu-side.base{
  position: relative;
  pointer-events: none;          /* avoid duplicate focus/click targets */
}
.menu-side.base a{
  color: #fff;
}

/* FX layer: interactive, sits on top; turns blue & slides on hover */
.menu-side.fx{
  position: absolute; inset: 0;  /* perfectly overlap the base */
}
.menu-side.fx a{
  color: #ffffff;                /* default: white on top of white (subtle "double" look) */
}
.menu-side.fx a:hover{
  color: var(--accent);
  transform: translateX(6px);    /* slide right to create the offset effect */
}

/* Optional: make the “ghost” effect more obvious even before hover.
   Uncomment if you want a slight default offset.
.menu-side.fx a { transform: translateX(1px); }
*/

/* ==== Mobile burger (hidden on desktop) ==== */
.nav-burger{
  display: none;                 /* shown only on mobile below */
  position: fixed; top: 14px; right: 14px; z-index: 1001;
  font: 700 18px/1 Helvetica, Arial, sans-serif;
  color: #fff; background: none; border: 1px solid #2E2E31; border-radius: 10px; padding: 8px 10px;
}

/* ==== Mobile mode: hide desktop effect; show simple panel ==== */
@media (max-width: 860px){
  .desktop-navFX{ display: none; }       /* hide double-nav effect entirely */
  .nav-burger{ display: block; }         /* show burger */

  .panel{
    position: fixed; inset: 64px 0 0 auto; width: 88vw; max-width: 360px;
    background: rgba(20,20,20,.98);
    border-left: 1px solid #2E2E31;
    transform: translateX(100%); transition: transform .25s ease; z-index: 1002;
    display: flex; flex-direction: column;
  }
  .panel.open{ transform: translateX(0); }
  .panel__list{ padding: 14px; display: grid; gap: 6px; }
  .panel__list a{
    display: block; padding: 10px 12px; border-radius: 10px;
    color: #fff; font-weight: 700; text-decoration: none;
  }
  .panel__list a:hover{ background: rgba(255,255,255,.06); }
}
/* ==== Center race page content blocks ==== */
.race-description,
.checkpoint-list,
.winning-route,
.photo-archive {
  max-width: 900px;      /* controls width of content */
  margin: 0 auto;        /* centers the block on the page */
  text-align: center;    /* centers the *text inside*, optional */
  padding: 0 16px;
}

.race-description h2,
.checkpoint-list h2,
.winning-route h2,
.photo-archive h2 {
  text-align: center;    /* make section titles centered too */
}

.checkpoint-list ol,
.checkpoint-list ul {
  text-align: left;      /* optional – list text stays readable */
  display: inline-block; /* allows list to center as a block */
}

/* ========================================
   DASHBOARD LINK
   ======================================== */
.dashboard-link {
  display: inline-block;
  margin: 20px auto !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, rgba(15,50,120,.9), rgba(20,80,160,.9)) !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
}

.dashboard-link:hover {
  background: linear-gradient(135deg, rgba(20,80,160,1), rgba(30,100,180,1)) !important;
  border-color: rgba(255,255,255,.3) !important;
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(20,80,160,.4) !important;
}

.dashboard-link:active {
  transform: scale(0.96) !important;
}

/* ========================================
   3D VISUALIZATION BUTTON
   ======================================== */
#load3dButton {
  display: block;
  margin: 20px auto !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, rgba(15,50,120,.9), rgba(20,80,160,.9)) !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
  white-space: nowrap;
}

#load3dButton:hover {
  background: linear-gradient(135deg, rgba(20,80,160,1), rgba(30,100,180,1)) !important;
  border-color: rgba(255,255,255,.3) !important;
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(20,80,160,.4) !important;
}

#load3dButton:active {
  transform: scale(0.96) !important;
}

/* ========================================
   WINNING ROUTE IMAGE CENTERING
   ======================================== */
.winning-route img {
  width: 70% !important;
  margin: 8px auto !important;
  border-radius: 10px !important;
  border: 1px solid var(--cardEdge) !important;
  display: block;
}

/* ========================================
   ABOUT PAGE STYLES
   ======================================== */

/* About Hero Section */
.about-hero {
  text-align: center;
  padding: 60px 24px 40px;
  max-width: 800px;
  margin: 0 auto;
}

.about-hero h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* About Content */
.about-content {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.about-content p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text);
  margin: 0 0 24px 0;
  opacity: 0.95;
}

.about-content p:last-child {
  margin-bottom: 0;
}

.about-content .emphasis {
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  margin: 32px 0;
  opacity: 1;
}

.about-content .cta-text {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  margin: 40px 0 0 0;
  letter-spacing: 0.03em;
}

/* Inspiration Section */
.inspiration-section {
  max-width: 1000px;
  margin: 80px auto 60px;
  padding: 50px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.inspiration-section h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  text-align: center;
  margin: 0 0 12px 0;
  color: var(--text);
  font-weight: 700;
}

.inspiration-intro {
  text-align: center;
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 40px 0;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

/* Video Grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}

.video-card {
  background: linear-gradient(135deg, rgba(30, 30, 35, 0.8), rgba(20, 20, 25, 0.8));
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
  position: relative;
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.video-card:hover .video-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.video-info {
  padding: 20px;
  position: relative;
  z-index: 2;
}

.video-info h3 {
  font-size: 1.3rem;
  margin: 0 0 8px 0;
  color: var(--text);
  font-weight: 700;
}

.video-info p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  opacity: 0.85;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .about-hero {
    padding: 50px 16px 30px;
  }

  .about-content {
    padding: 0 16px 40px;
  }

  .inspiration-section {
    padding: 40px 16px;
    margin: 60px auto 40px;
  }

  .video-grid {
    gap: 20px;
  }
}