/* About page specific styles (keeps header/footer identical) */

.page-hero { padding: 3.5rem 0 2rem; background:#000; }
.page-hero h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: .5rem; }
.page-hero .lead { color:#b8b8b8; max-width: 760px; }

.about-cards { padding: 2rem 0 4rem; background: radial-gradient(1200px 400px at 50% -100px, rgba(0,255,136,.15), rgba(0,0,0,0) 60%); }
.cards-grid { display:grid; grid-template-columns: repeat(4, minmax(240px,1fr)); gap: 1.25rem; }

.about-card { background:#0e0e0e; border:1px solid #1f1f1f; border-radius: 20px; padding: 1.25rem; box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; transform: perspective(1000px) rotateX(1.5deg); }
.card-title { font-size: 1.375rem; font-weight: 800; margin-bottom: .5rem; }
.card-text { color:#cfcfcf; margin-bottom: 1rem; }
.badge { display:inline-block; border:1px solid #2a2a2a; padding:.4rem .9rem; border-radius: 999px; background:#101010; color:#fff; margin-bottom: 1rem; }
.badge strong { color:#00ff88; }

.card-media { border-radius: 16px; overflow:hidden; background:#0b0b0b; border:1px solid #1c1c1c; }
.card-media img { display:block; width:100%; height:auto; }

@media (max-width: 1200px){ .cards-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){
  .page-hero h1{ font-size:1.75rem; }
  .cards-grid{ grid-template-columns: 1fr; }
}
/* Link in head: <link rel="stylesheet" href="/assets/css/about-story.css"> */

.brand-story { padding: 4rem 0; background: #000; position: relative; }

/* Subtle grid-like backdrop lines */
.brand-story::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1000px 500px at 50% -200px, rgba(0,255,136,.12), rgba(0,0,0,0) 60%),
              repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 60px),
              repeating-linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 60px);
}

.story-grid { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; position: relative; }

.story-aside { padding-top: .5rem; }
.bullet { color:#8bf7bd; display:flex; align-items:center; gap:.5rem; margin-bottom: .5rem; }
.dot { width:12px; height:12px; border-radius:50%; background:#00ff88; display:inline-block; }
.story-title { font-size:2rem; font-weight:800; color:#fff; }

.story-content p { color:#d8d8d8; margin-bottom: 1rem; max-width: 920px; }

.story-gallery { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.25rem; }
.shot { border-radius: 16px; overflow: hidden; background:#0e0e0e; border:1px solid #1f1f1f; }
.shot img { width:100%; height:auto; display:block; }

@media (max-width: 1200px){ .story-gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px){ .story-grid{ grid-template-columns: 1fr; } .story-title{ font-size:1.6rem; } }
/* Link in head: <link rel="stylesheet" href="/assets/css/about-why.css"> */

.why { padding: 4rem 0; background:#000; position:relative; }
.why::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(1100px 420px at 50% -140px, rgba(0,255,136,.12), rgba(0,0,0,0) 60%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 64px);
}
.section-title{ font-size:2rem; font-weight:800; margin-bottom:1.5rem; }

.why-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.why-card{ background:#0e0e0e; border:1px solid #1f1f1f; border-radius: 22px; padding: 1.25rem; min-height: 200px; display:flex; flex-direction:column; gap:.5rem; box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; }
.why-title{ font-size:1.125rem; font-weight:800; }
.why-text{ color:#bfbfbf; }

/* Icon set (simple geometric SVG-like shapes via CSS) */
.icon{ width:48px; height:48px; border-radius:12px; background:linear-gradient(#2b6cff,#1e46ff); position:relative; box-shadow: 0 2px 0 rgba(0,0,0,.2) inset; }
.icon::after{ content:""; position:absolute; inset:10px; border-radius:6px; background:#00ff88; opacity:.9; }
.icon.cal{ background:linear-gradient(#2b6cff,#1e46ff); }
.icon.speed{ background:linear-gradient(#2bdcff,#1ea5ff); }
.icon.lock{ background:linear-gradient(#2dd45b,#18a84a); }
.icon.hat{ background:linear-gradient(#2bdcff,#1ea5ff); }
.icon.users{ background:linear-gradient(#2bdcff,#1ea5ff); }
.icon.support{ background:linear-gradient(#2dd45b,#18a84a); }

@media (max-width: 1100px){ .why-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .why-grid{ grid-template-columns: 1fr; } .section-title{ font-size:1.6rem; } }