/* ============================================================
   home/css/home.css — Home Page Styles
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  min-height:100vh; position:relative;
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(160deg,rgba(14,165,233,.18) 0%,rgba(22,163,74,.22) 50%,rgba(245,158,11,.15) 100%),
    url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1800&q=85') center/cover no-repeat;
  transform:scale(1.04); transition:transform 7s ease;
}
.hero.loaded .hero-bg { transform:scale(1); }
.hero-wash {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(14,165,233,.08) 0%,
    transparent 30%,
    rgba(15,36,23,.55) 75%,
    rgba(15,36,23,.92) 100%
  );
}
.hero-content { position:relative;z-index:2;padding:0 72px 90px;max-width:900px; }

.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);
  padding:8px 18px; border-radius:100px;
  font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; margin-bottom:28px;
  opacity:0; animation:fadeUp .8s .2s forwards;
}
.hero h1 {
  font-family:var(--serif);
  font-size:clamp(3.5rem,7.5vw,7.5rem);
  font-weight:700; line-height:1.02; color:#fff; margin-bottom:6px;
  opacity:0; animation:fadeUp .9s .4s forwards;
}
.hero h1 em { font-style:italic; color:var(--amber); }
.hero-sub {
  font-size:.8rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:36px;
  opacity:0; animation:fadeUp .9s .6s forwards;
}
.hero-chips {
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px;
  opacity:0; animation:fadeUp .9s .8s forwards;
}
.chip {
  display:flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:100px;
  font-size:.75rem; font-weight:500; color:#fff;
  border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px);
}
.chip-g { background:rgba(22,163,74,.28); border-color:rgba(134,239,172,.45); }
.chip-b { background:rgba(14,165,233,.28); border-color:rgba(147,210,255,.45); }
.chip-a { background:rgba(245,158,11,.28); border-color:rgba(252,211,77,.45); }

.hero-cta {
  display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; animation:fadeUp .9s 1s forwards;
}
.hero-scroll {
  position:absolute; right:52px; bottom:48px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation:fadeIn 1s 1.4s forwards;
}
.scroll-line { width:2px;height:55px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.7));animation:scrollA 1.8s infinite; }
@keyframes scrollA { 0%,100%{opacity:.4} 50%{opacity:1} }
.scroll-txt { font-size:.55rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.6);writing-mode:vertical-rl; }

/* ── Identity Cards ─────────────────────────────────────────── */
.identities { background:var(--white); }
.id-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px; }
.id-card {
  border-radius:var(--radius-lg); overflow:hidden;
  position:relative; aspect-ratio:3/4; cursor:pointer;
  transition:transform .35s,box-shadow .35s;
}
.id-card:hover,.id-card:focus { transform:translateY(-10px);box-shadow:0 28px 70px rgba(0,0,0,.2); outline:2px solid var(--green); }
.id-card .bg { position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s; }
.id-card:hover .bg { transform:scale(1.07); }
.id-card .ov { position:absolute;inset:0; }
.id-card:nth-child(1) .ov { background:linear-gradient(to top,rgba(22,163,74,.93) 0%,rgba(22,163,74,.25) 55%,transparent 100%); }
.id-card:nth-child(2) .ov { background:linear-gradient(to top,rgba(14,165,233,.93) 0%,rgba(14,165,233,.25) 55%,transparent 100%); }
.id-card:nth-child(3) .ov { background:linear-gradient(to top,rgba(245,158,11,.93) 0%,rgba(245,158,11,.25) 55%,transparent 100%); }
.card-num { position:absolute;top:14px;right:20px;font-family:var(--serif);font-size:7rem;font-weight:700;color:rgba(255,255,255,.08);line-height:1;transition:color .4s; }
.id-card:hover .card-num { color:rgba(255,255,255,.2); }
.id-card .bd { position:absolute;bottom:0;left:0;right:0;padding:32px 28px; }
.ico { font-size:2.4rem;display:block;margin-bottom:10px; }
.id-card h3 { font-family:var(--serif);font-size:2rem;font-weight:700;color:#fff;margin-bottom:8px; }
.id-card p { font-size:.82rem;color:rgba(255,255,255,.9);line-height:1.65;max-width:270px;transform:translateY(10px);opacity:0;transition:all .35s; }
.id-card:hover p,.id-card:focus p { transform:translateY(0);opacity:1; }
.card-link {
  display:inline-block;margin-top:12px;
  font-size:.72rem;font-weight:500;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:2px; opacity:0;
  transform:translateY(8px); transition:all .35s .05s;
}
.id-card:hover .card-link,.id-card:focus .card-link { opacity:1;transform:translateY(0); }

/* ── Gallery Preview ─────────────────────────────────────────── */
.gallery-preview { background:var(--skyblush); }
.preview-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.pg-item {
  overflow:hidden; border-radius:var(--radius); position:relative; cursor:pointer;
  aspect-ratio:4/3;
}
.pg-item:nth-child(1) { grid-column:1/3; aspect-ratio:16/9; }
.pg-item img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s; }
.pg-item:hover img { transform:scale(1.08); }
.pg-hover { position:absolute;inset:0;background:rgba(22,163,74,0);display:flex;align-items:center;justify-content:center;transition:background .3s; }
.pg-item:hover .pg-hover { background:rgba(22,163,74,.3); }
.pg-icon { width:54px;height:54px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;opacity:0;transform:scale(.6);transition:all .3s;box-shadow:var(--shadow); }
.pg-item:hover .pg-icon { opacity:1;transform:scale(1); }

/* ── Quote ────────────────────────────────────────────────────── */
.quote-sec {
  background:linear-gradient(135deg,var(--sky) 0%,var(--sky-deep) 40%,var(--green) 100%);
  padding:100px 0; text-align:center; position:relative; overflow:hidden;
}
.quote-sec::before {
  content:'"'; position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-size:24rem;line-height:1;
  color:rgba(255,255,255,.06);pointer-events:none;
}
.q-dots { display:flex;justify-content:center;gap:8px;margin-bottom:32px; }
.q-dots span { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35); }
.q-dots span:nth-child(2) { background:var(--amber); }
.q-text {
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.6rem);
  font-weight:400;font-style:italic;color:#fff;
  max-width:860px;margin:0 auto 28px;line-height:1.5;position:relative;z-index:2;
}
.q-auth { font-size:.72rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.75); }

/* ── CTA Band ─────────────────────────────────────────────────── */
.cta-band { background:var(--mint); }
.cta-inner {
  display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
  padding:56px;border-radius:var(--radius-lg);
  background:#fff;box-shadow:var(--shadow-lg);
}

/* ── Lightbox ─────────────────────────────────────────────────── */
.lightbox {
  position:fixed;inset:0;z-index:500;background:rgba(15,36,23,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.lightbox.open { opacity:1;pointer-events:all; }
.lightbox img { max-width:90vw;max-height:88vh;object-fit:contain;border-radius:8px; }
.lb-x {
  position:absolute;top:28px;right:36px;width:44px;height:44px;
  background:rgba(255,255,255,.1);border:none;border-radius:50%;
  color:#fff;font-size:1.2rem;cursor:pointer;transition:background .2s;
  display:flex;align-items:center;justify-content:center;
}
.lb-x:hover { background:rgba(255,255,255,.22); }

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:960px) {
  .hero-content { padding:0 28px 80px; }
  .id-cards { grid-template-columns:1fr; }
  .preview-grid { grid-template-columns:1fr 1fr; }
  .pg-item:nth-child(1) { grid-column:1/-1; }
  .cta-inner { flex-direction:column; padding:36px 28px; }
  .hero-scroll { display:none; }
}
@media(max-width:560px) {
  .hero h1 { font-size:clamp(2.6rem,10vw,4rem); }
  .preview-grid { grid-template-columns:1fr; }
}