:root{
  --bg:#ffffff;
  --text:#222;
  --accent:#d952c2;   /* teal */
  --accent2:#f18dfe;  /* deep blue */
  --muted:#777;
  --card-bg:#f8f9fa;
  --border:#e2e8f0;
}

/* PAGE WRAPPER — keeps header intact */
.about-page{
  background:var(--bg);
  padding-top:6rem;  /* start after header */
  position:relative;
  overflow:hidden;
  min-height:100vh;
  z-index:1;
}
.about-container{
  max-width:1000px;
  margin:auto;
  padding:0 24px;
  position:relative;
  z-index:3;
  color:var(--text);
}

/* ORBS & PARTICLES */
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:orbFloat 18s ease-in-out infinite;opacity:.45;}
.orb-1{width:320px;height:320px;background:#d952c3a9;top:12%;left:4%;}
.orb-2{width:260px;height:260px;background:#d952c2a9;top:55%;right:8%;animation-delay:6s;}
.orb-3{width:220px;height:220px;background:#d952c2;bottom:18%;left:28%;animation-delay:12s;}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-60px) scale(1.12);}}

.particle{position:absolute;width:5px;height:5px;background:var(--accent);border-radius:50%;opacity:.55;box-shadow:0 0 8px var(--accent);animation:particleMove 14s linear infinite;}
@keyframes particleMove{0%{transform:translateY(0)}100%{transform:translateY(-220px)}}

/* HERO */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;margin-bottom:70px;}
.stroke{text-transform:uppercase;font-weight:900;color: white;}
.accent{color:var(--accent);}
.meta{font-size:1.2rem;margin-top:.5rem;font-weight:700;}
.hero-left h1{
  font-size:3.2rem;line-height:1;margin-bottom:12px;
  background:linear-gradient(135deg,var(--text),var(--accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:titleFloat 3s ease-in-out infinite;
}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.tag-cloud{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.tag-cloud span{font-size:.85rem;padding:6px 12px;border:1px solid rgba(0,181,173,.45);border-radius:999px;transition:.35s;}
.tag-cloud span:hover{border-color:var(--accent);box-shadow:0 0 16px rgba(0,181,173,.5);transform:translateY(-4px);}

.hero-right{position:relative;height:420px;}
.accent-block{position:absolute;top:-20px;left:-20px;width:calc(100% - 40px);height:90%;background:linear-gradient(135deg,var(--accent2),rgba(10,124,158,.6));border-radius:12px;animation:floatBlock 6s ease-in-out infinite;z-index:1;}
@keyframes floatBlock{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.hero-img{width:100%;border-radius:12px;box-shadow:0 22px 70px rgba(0,0,0,.12);transition:.4s;z-index:2;position:relative;}
.hero-img:hover{transform:translateY(-8px);box-shadow:0 30px 90px rgba(0,181,173,.25);}

/* STATS */
.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:36px;background:linear-gradient(135deg,#d952c372,rgba(10,124,158,.08));border-radius:16px;border:1px solid rgba(0,181,173,.2);margin:48px 0;}
.stat{text-align:center;transition:.3s;}
.stat:hover{transform:translateY(-4px);}
.stat-number{font-size:2.6rem;font-weight:900;color:var(--accent);display:block;margin-bottom:6px;}
.stat-label{font-size:.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}

/* INTRO */
.intro{display:grid;grid-template-columns:.9fr 1.4fr;gap:48px;margin:80px 0;align-items:start;}
.intro-left p{font-size:1.1rem;line-height:1.8;}
.intro-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.intro-row img,.intro-card img{width:100%;border-radius:12px;object-fit:cover;}
.intro-row img{height:220px;}
.intro-card{background:var(--card-bg);padding:20px;border-radius:12px;border:1px solid var(--border);}
.intro-card img{height:200px;margin-bottom:10px;}
.tiny{font-size:.9rem;}

/* QUESTION */
.question{text-align:center;margin:100px 0;}
.tight{letter-spacing:-.5px;}
.question-row{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:28px;}
.face{width:300px;height:90px;background:#ffffff00;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;border:2px solid rgba(0, 181, 172, 0);}

/* VALUES */
.values{margin:100px 0;padding:60px 0;background:linear-gradient(135deg,#d952c38b,#e430c648);border-radius:16px;}
.values h2{text-align:center;font-size:2rem;margin-bottom:32px;}
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 800px;   /* ↓ reduce width here */
  margin: 0 auto;     /* centers the grid */
}

.value-item{padding:24px;background:#fff;border-radius:12px;border-left:4px solid var(--accent);border:1px solid var(--border);transition:.3s;}
.value-item:hover{transform:translateX(8px);box-shadow:-8px 8px 24px #d952c2;}
.value-item h4{font-size:1.15rem;margin-bottom:8px;color:var(--accent);}
.value-item p{color:var(--muted);}
.reason li{text-align: left;font-size: 25px;font-weight: bold;color: white;}
.question-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
  
  border: 2px solid #ffffff33; /* Light white border */
  border-radius: 15px;         /* Smooth corners */
  backdrop-filter: blur(5px);  /* Fancy glass effect (optional) */
  
  background: rgb(0, 0, 0); /* Subtle dark glass bg */
}


/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin:100px 0;align-items:center;}
.split-left h3{font-size:1.6rem;margin-bottom:30px;margin: 20%;}
.split-left .em{font-size:1.15rem;line-height:1.7;margin: 20%;}
.card{background:#fff;padding:40px;border-radius:14px;text-align:center;border:1px solid var(--border);transition:.35s;}
.card:hover{transform:translateY(-6px);}
.neon-border{border:2px solid var(--accent);box-shadow:0 0 24px #d952c2;}
.brand{font-size:2.6rem;font-weight:900;margin:12px 0;letter-spacing:-1px;}
.brand .accent{color:var(--accent);}
.subtle{color:var(--muted);}

/* CLOSING */
.closing{text-align:center;margin:100px 0 60px;}
.center{text-align:center;}
.about-logo{text-align:center;margin:60px 0 40px;}
.mark{font-size:2.2rem;}

/* ANIMATION UTILS */
.fade-in{opacity:0;transform:translateY(400px);filter:blur(6px);}
.fade-in.is-visible{opacity:1;transform:none;filter:none;transition:.85s;}
.fade-stagger>*{opacity:0;transform:translateY(40px);}
.fade-stagger.is-visible>*{opacity:1;transform:none;transition:.85s;}
.scale-in{opacity:0;transform:scale(.9);}
.scale-in.is-visible{opacity:1;transform:scale(1);transition:.9s cubic-bezier(.16,.84,.44,1);}
.parallax-layer{transition:transform .3s ease-out;}

/* UNIFORM IMAGE RATIOS (fix uneven sizes) */
.intro-row img,.intro-card img{object-fit:cover;width:100%;height:auto;}
@media(min-width:900px){.intro-card img{aspect-ratio:4/3;}}

/* RESPONSIVE */
@media(max-width:1200px){
  .hero-left h1{font-size:2.8rem;}
  .intro-copy p{font-size:1rem;}
  .split-left h3{font-size:1.4rem;}
  .split-left .em{font-size:1rem;}
}

@media(max-width:900px){
  .hero,.intro,.split,.values-grid{grid-template-columns:1fr;}
  .stats-bar{grid-template-columns:1fr;}
  .hero-left h1{font-size:2.4rem;}
  .intro-copy p{font-size:0.95rem;}
  .split-left h3{font-size:1.3rem;}
  .split-left .em{font-size:0.95rem;}
  .question h2{font-size:1.8rem;}
  .values h2{font-size:1.8rem;}
  .closing h2{font-size:1.8rem;}
}

@media(max-width:768px){
  .about-page{padding-top:4rem;}
  .about-container{padding:0 15px;}
  .hero{gap:40px;}
  .hero-left h1{font-size:2rem;}
  .tag-cloud{gap:10px;}
  .tag-cloud span{font-size:0.8rem;padding:5px 10px;}
  .stats-bar{gap:20px;padding:30px;}
  .stat-number{font-size:2.2rem;}
  .stat-label{font-size:0.85rem;}
  .intro{gap:40px;margin:60px 0;}
  .intro-copy p{font-size:0.9rem;}
  .intro-row{gap:15px;}
  .question{margin:80px 0;}
  .question h2{font-size:1.6rem;}
  .question-row{gap:20px;}
  .face{width:250px;height:70px;}
  .values{margin:80px 0;padding:50px 0;}
  .values h2{font-size:1.6rem;}
  .values-grid{gap:20px;}
  .value-item{padding:20px;}
  .value-item h4{font-size:1.1rem;}
  .split{gap:40px;margin:80px 0;}
  .split-left h3{font-size:1.2rem;}
  .split-left .em{font-size:0.9rem;}
  .card{padding:35px;}
  .brand{font-size:2.3rem;}
  .closing{margin:80px 0 50px;}
  .closing h2{font-size:1.6rem;}
  .about-logo{margin:50px 0 30px;}
  .mark{font-size:2rem;}
}

@media(max-width:640px){
  .about-page{padding-top:3rem;}
  .about-container{padding:0 10px;}
  .hero{gap:30px;}
  .hero-left h1{font-size:1.8rem;}
  .tag-cloud{gap:8px;flex-wrap:wrap;}
  .tag-cloud span{font-size:0.75rem;padding:4px 8px;}
  .stats-bar{gap:15px;padding:25px;}
  .stat-number{font-size:2rem;}
  .stat-label{font-size:0.8rem;}
  .intro{gap:30px;margin:50px 0;}
  .intro-copy p{font-size:0.85rem;}
  .intro-row{grid-template-columns:1fr;}
  .question{margin:70px 0;}
  .question h2{font-size:1.4rem;}
  .question-row{flex-direction:column;gap:15px;}
  .face{width:200px;height:60px;}
  .values{margin:70px 0;padding:40px 0;}
  .values h2{font-size:1.4rem;}
  .values-grid{grid-template-columns:1fr;}
  .value-item{padding:18px;}
  .value-item h4{font-size:1rem;}
  .split{gap:30px;margin:70px 0;}
  .split-left h3{font-size:1.1rem;}
  .split-left .em{font-size:0.85rem;}
  .card{padding:30px;}
  .brand{font-size:2.1rem;}
  .closing{margin:70px 0 40px;}
  .closing h2{font-size:1.4rem;}
  .about-logo{margin:40px 0 25px;}
  .mark{font-size:1.8rem;}
}

@media(max-width:480px){
  .about-page{padding-top:2rem;}
  .about-container{padding:0 5px;}
  .hero{gap:20px;}
  .hero-left h1{font-size:1.6rem;}
  .tag-cloud{gap:6px;}
  .tag-cloud span{font-size:0.7rem;padding:3px 6px;}
  .stats-bar{gap:10px;padding:20px;}
  .stat-number{font-size:1.8rem;}
  .stat-label{font-size:0.75rem;}
  .intro{gap:20px;margin:40px 0;}
  .intro-copy p{font-size:0.8rem;}
  .question{margin:60px 0;}
  .question h2{font-size:1.2rem;}
  .face{width:180px;height:50px;}
  .values{margin:60px 0;padding:30px 0;}
  .values h2{font-size:1.2rem;}
  .value-item{padding:16px;}
  .value-item h4{font-size:0.95rem;}
  .split{gap:20px;margin:60px 0;}
  .split-left h3{font-size:1rem;}
  .split-left .em{font-size:0.8rem;}
  .card{padding:25px;}
  .brand{font-size:1.9rem;}
  .closing{margin:60px 0 30px;}
  .closing h2{font-size:1.2rem;}
  .about-logo{margin:30px 0 20px;}
  .mark{font-size:1.6rem;}
}


/* --------------------------------------------
   ABOUT PAGE — IMAGE ALIGNMENT (1–4.png only)
   --------------------------------------------
   Notes:
   - All rules are scoped with .about-page to avoid side effects.
   - Uses aspect-ratio + object-fit for consistent sizing.
   - Grid alignment preserved; only images are normalized.
--------------------------------------------- */

/* 1) 1.png — hero image (right column) */
.about-page .about-img-1 {
  display: block;
  width: 100%;
  height: 3px;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.12);
  position: relative;      /* sits above accent-block */
  z-index: 2;
  margin-left: auto;       /* keeps it snug to the right column */
}

/* 2) 2.png and 3.png — intro grid pair */
.about-page .about-img-2,
.about-page .about-img-3 {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* border-style: solid; */
    /* border-width: 5px;
  border-radius: 20px; */
  display: block;
}

/* Slight nudge for visual balance (optional) */
@media (min-width: 901px) {
  .about-page .intro-right .intro-row {
    align-items: stretch;
    
    gap: 20px;
  }
}

/* 3) 4.png — card image with caption */
.about-page .about-img-4 {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin-bottom: 10px;
}

/* Responsive refinements for small screens */
@media (max-width: 900px) {
  .about-page .about-img-1 {
    max-width: 100%;
    aspect-ratio: 16 / 10;   /* wider feel on mobile */
  }

  .about-page .about-img-2,
  .about-page .about-img-3 {
    aspect-ratio: 16 / 10;
  }
}

/* Utility: ensure any image within these blocks keeps edges tidy */
.about-page .hero-right img,
.about-page .intro-row img,
.about-page .intro-card img {
  background: #fff;           /* avoids dark bleed under blur/glass */
  border: 1px solid var(--border);
}

/* ---------------------------------------------
   ABOUT PAGE — INTRO CONTENT (typography & layout)
---------------------------------------------- */

/* Grid + spacing */
.about-page .intro {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: 48px;
  margin: 80px 0;
  align-items: start;
}

/* Text block: readable width & clean rhythm */
.about-page .intro-copy {
  max-width: 62ch;                /* optimal line length */
  display: grid;
  gap: 1rem;                      /* consistent paragraph spacing */
}

.about-page .intro-copy p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
  margin: 0;                      /* gap handles spacing */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;        /* prevents overflow on long tokens */
  hyphens: auto;
}

/* Emphasis line before the big question */
.about-page .intro-copy .lead {
  font-weight: 700;
  color: var(--text);
}

/* Right column structure */
.about-page .intro-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Image row */
.about-page .intro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Image alignment (2.png & 3.png) */
.about-page .about-img-2,
.about-page .about-img-3 {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  display: block;
}

/* Card (4.png + caption) */
.about-page .intro-card {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-page .about-img-4 {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
}

.about-page .intro-card .card-caption {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .about-page .intro {
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 56px 0;
  }

  .about-page .intro-copy {
    max-width: 100%;
    gap: 0.9rem;
  }

  .about-page .intro-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .about-page .about-img-2,
  .about-page .about-img-3,
  .about-page .about-img-4 {
    aspect-ratio: 16 / 10; /* smoother on mobile */
  }
}