/* ========== About (awestruck) ========== */
:root{
  --bg:#0A0A0B; --txt:#F2F6FB; --muted:#CFE8FB; --glass:rgba(255,255,255,.08);
  --b1:#33b5df; --b2:#2a8bb2; --shadow:0 24px 80px rgba(51,181,223,.18);
}
*{box-sizing:border-box}
body{margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--txt); background:var(--bg)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1180px,92%); margin:auto}
.section{padding:96px 0}
.section-hd{text-align:center; margin-bottom:28px}
.section-hd h2{margin:0 0 .25rem; font-size:2rem}
.section-hd p{color:var(--muted); margin:0}
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:800; padding:.9rem 1.2rem; transition:.25s}
.btn-primary{background:linear-gradient(90deg,var(--b1),var(--b2)); color:#061423; box-shadow:0 10px 26px rgba(51,181,223,.25)}
.btn-ghost{border:1px solid var(--glass); background:#0b0d10}
main{padding-top:78px}

/* FX */
.fx-bg{position:fixed; inset:0; z-index:-1; pointer-events:none}
.layer{position:absolute; inset:0}
.stars,.twinkle{
  --dot:radial-gradient(2px 2px at 2px 2px, rgba(255,255,255,.6), transparent 70%);
  background:var(--dot),var(--dot),var(--dot),var(--dot),var(--dot),var(--dot);
  background-size:160px 160px,240px 240px,320px 320px,380px 380px,440px 440px,520px 520px;
  opacity:.22; animation:drift 42s linear infinite;
}
.twinkle{opacity:.1; animation:drift 68s linear infinite reverse}
.gradient{background:radial-gradient(900px 380px at 20% -12%, rgba(51,181,223,.18), transparent 60%), radial-gradient(700px 320px at 85% 10%, rgba(42,139,178,.14), transparent 60%)}
@keyframes drift{from{background-position:0 0} to{background-position:280px 220px}}

/* HERO */
.hero{padding-top:120px}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center}
.kicker{text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:#9ed8ef}
.title{font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.05; margin:.3rem 0 .6rem}
.hi{background:linear-gradient(90deg,var(--b1),var(--b2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.lede{color:var(--muted)}
.cta-row{display:flex; gap:12px; margin:18px 0 0; flex-wrap:wrap}

/* Mosaic */
.mosaic{position:relative}
.tile{position:absolute; border-radius:18px; overflow:hidden; border:1px solid var(--glass); box-shadow:var(--shadow)}
.t1{top:-10px; left:0; width:260px}
.t2{top:120px; right:0; width:280px}
.t3{bottom:-10px; left:80px; width:300px}
.tile img{height:180px; width:100%; object-fit:cover}
.glowblob{position:absolute; border-radius:50%; filter:blur(40px); opacity:.28; background:radial-gradient(circle at 35% 35%, rgba(51,181,223,.8), rgba(42,139,178,.18) 70%, transparent 80%)}
.b1{width:280px; height:280px; top:-60px; right:-40px; animation:float 10s ease-in-out infinite}
.b2{width:220px; height:220px; bottom:-40px; left:-20px; animation:float 12s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* WHY */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{padding:22px 20px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--glass); transition:.25s}
.card:hover{transform:translateY(-6px); border-color:rgba(51,181,223,.35); box-shadow:var(--shadow)}

/* JOURNEY */
.timeline{position:relative; list-style:none; padding:0; margin:0}
.timeline::before{content:""; position:absolute; left:calc(50% - 1px); top:0; bottom:0; width:2px; background:linear-gradient(var(--b1),var(--b2))}
.timeline li{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; margin:26px 0}
.timeline li:nth-child(odd) .t-card{grid-column:1}
.timeline li:nth-child(odd) .dot{grid-column:2}
.timeline li:nth-child(even) .t-card{grid-column:2}
.timeline li:nth-child(even) .dot{grid-column:1}
.dot{justify-self:center; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle, #e6f7ff, var(--b2)); box-shadow:0 0 20px rgba(51,181,223,.8)}
.t-card{border:1px solid var(--glass); border-radius:14px; padding:18px; background:#0b0d10; box-shadow:var(--shadow)}
.t-card time{display:block; color:#aee6ff; font-weight:700; margin-bottom:4px}

/* VALUES */
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.v-card{border:1px solid var(--glass); border-radius:14px; padding:18px; text-align:center; background:#0b0d10}

/* CTA */
.cta-panel{border:1px solid var(--glass); border-radius:18px; padding:32px; text-align:center; background:linear-gradient(180deg, rgba(51,181,223,.12), rgba(255,255,255,.02)); box-shadow:0 30px 90px rgba(51,181,223,.16)}

/* Reveal */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .5s, transform .5s}
.reveal{opacity:1; transform:none}

/* Responsive */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .timeline::before{left:1px}
  .timeline li{grid-template-columns:1fr; gap:10px}
  .dot{display:none}
}
@media (max-width:680px){
  .pillars, .values-grid{grid-template-columns:1fr}
  .hero-grid{
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 100px;
  }
  .mosaic{
    display: none;
    flex-direction: column;
    gap: 100px;
    width: 100vw;
    padding-bottom: 150px;
  }
}