/* =========================================================
   Gyan Bindu Academy — V4 premium layer
   Additive only. Extends v3 tokens, never overrides them.
   ========================================================= */

:root{
  --gb-cyan:#22d3ee;
  --gb-indigo:#3b3fbf;
  --gb-emerald:#10b981;
  --gb-royal:#1d4ed8;
  --gb-midnight:#050914;
  --gb-glass:rgba(255,255,255,.06);
  --gb-glass-line:rgba(255,255,255,.12);
  --gb-shadow-lux:0 40px 80px -32px rgba(5,9,20,.55);
}

/* ---------- Aurora background (used behind dark V4 sections) ---------- */
.aurora{position:relative;isolation:isolate;}
.aurora::before,.aurora::after{
  content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 26%, rgba(34,211,238,.20) 0%, transparent 62%),
    radial-gradient(34% 40% at 82% 22%, rgba(59,63,191,.24) 0%, transparent 64%),
    radial-gradient(40% 44% at 60% 84%, rgba(201,162,75,.16) 0%, transparent 66%);
  filter:blur(14px);
  animation:auroraDrift 22s ease-in-out infinite alternate;
}
.aurora::after{animation-duration:31s;animation-direction:alternate-reverse;opacity:.7;}
@keyframes auroraDrift{
  0%{transform:translate3d(-2%,-1%,0) scale(1);}
  50%{transform:translate3d(2%,2%,0) scale(1.07);}
  100%{transform:translate3d(-1%,1%,0) scale(1.03);}
}
@media (prefers-reduced-motion:reduce){
  .aurora::before,.aurora::after{animation:none;}
}

/* ---------- Glass surfaces ---------- */
.glass-card{
  background:var(--gb-glass);
  border:1px solid var(--gb-glass-line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:20px;
  box-shadow:var(--gb-shadow-lux);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .5s ease;
}
.glass-card:hover{transform:translateY(-8px);border-color:rgba(201,162,75,.45);}
.grad-border{position:relative;border-radius:22px;}
.grad-border::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(201,162,75,.7),rgba(34,211,238,.55),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* ---------- Section eyebrows for V4 blocks ---------- */
.v4-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-light);display:inline-flex;align-items:center;gap:10px;
}
.v4-eyebrow::before{content:"";width:26px;height:1px;background:var(--gb-cyan);display:inline-block;}

/* ---------- Program (course) cards ---------- */
.program-card{
  position:relative;overflow:hidden;border-radius:22px;height:100%;
  background:#fffdf7;border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .3s ease;
}
.program-card:hover{transform:translateY(-10px);box-shadow:0 36px 70px -26px rgba(11,31,46,.32);border-color:rgba(201,162,75,.5);}
.program-card .media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink);}
.program-card .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1);}
.program-card:hover .media img{transform:scale(1.08);}
.program-card .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,31,46,.75));}
.program-card .media .label{
  position:absolute;left:16px;bottom:14px;z-index:2;color:#f6f1e4;
  font-family:'Fraunces',serif;font-size:1.15rem;
}
.program-card .pill{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgba(5,9,20,.6);border:1px solid rgba(255,255,255,.18);
  color:#e3c274;border-radius:999px;padding:4px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.16em;
}
.program-card .content{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1;}
.program-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.program-meta div{
  background:rgba(11,31,46,.04);border:1px solid var(--line);border-radius:12px;padding:8px 10px;
}
.program-meta .k{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;}
.program-meta .v{font-size:.82rem;color:var(--charcoal);font-weight:600;}
.program-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;}
.program-card ul li{font-size:.83rem;color:var(--muted);padding-left:18px;position:relative;line-height:1.5;}
.program-card ul li::before{content:"◆";position:absolute;left:0;color:var(--gold);font-size:.62rem;top:.28em;}
.program-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px;}
.program-actions a,.program-actions button{
  font-size:.76rem;font-weight:600;border-radius:999px;padding:9px 15px;cursor:pointer;
  transition:.28s ease;border:1px solid transparent;font-family:'Inter',sans-serif;
}
.act-primary{background:linear-gradient(135deg,#a3812f,#c9a24b 55%,#e3c274);color:#101418;}
.act-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(201,162,75,.7);}
.act-ghost{border-color:var(--line);color:var(--charcoal);background:#fff;}
.act-ghost:hover{border-color:var(--gold);color:#8a6a1e;}

/* ---------- Media slider cards (infrastructure / student life / results) ---------- */
.shot{
  position:relative;border-radius:20px;overflow:hidden;background:var(--ink-2);
  border:1px solid rgba(255,255,255,.10);cursor:zoom-in;
}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .5s ease;}
.shot:hover img{transform:scale(1.06);filter:saturate(1.08);}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;
  background:linear-gradient(180deg,transparent,rgba(5,9,20,.88));
  color:#f6f1e4;
}
.shot figcaption .k{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.2em;color:var(--gb-cyan);}
.shot figcaption .t{font-family:'Fraunces',serif;font-size:1.05rem;margin-top:2px;}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(5,9,20,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:24px;
}
.lightbox.show{display:flex;animation:lbIn .3s ease;}
@keyframes lbIn{from{opacity:0;}to{opacity:1;}}
.lightbox img{max-width:min(1100px,92vw);max-height:80vh;border-radius:18px;box-shadow:var(--gb-shadow-lux);}
.lightbox .cap{color:#f6f1e4;text-align:center;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.18em;}
.lightbox .x{position:absolute;top:20px;right:26px;color:#f6f1e4;font-size:2rem;cursor:pointer;line-height:1;}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);color:#f6f1e4;font-size:2rem;cursor:pointer;padding:12px 18px;user-select:none;}
.lightbox .prev{left:10px;} .lightbox .next{right:10px;}

/* ---------- AI console (interactive UI-only demo) ---------- */
.ai-console{display:grid;grid-template-columns:250px 1fr;gap:0;overflow:hidden;border-radius:22px;}
@media (max-width:860px){.ai-console{grid-template-columns:1fr;}}
.ai-tabs{background:rgba(5,9,20,.45);border-right:1px solid var(--gb-glass-line);padding:14px;display:flex;flex-direction:column;gap:6px;}
@media (max-width:860px){.ai-tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--gb-glass-line);}}
.ai-tab{
  text-align:left;white-space:nowrap;border-radius:12px;padding:11px 14px;cursor:pointer;
  font-size:.83rem;color:rgba(246,241,228,.7);background:transparent;border:1px solid transparent;transition:.25s ease;
}
.ai-tab:hover{background:rgba(255,255,255,.06);color:#f6f1e4;}
.ai-tab.active{background:linear-gradient(135deg,rgba(59,63,191,.5),rgba(34,211,238,.28));color:#fff;border-color:rgba(34,211,238,.35);}
.ai-panel{padding:26px;min-height:330px;display:none;animation:fadeUp .45s ease;}
.ai-panel.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.ai-field{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--gb-glass-line);border-radius:12px;padding:12px 14px;color:#f6f1e4;font-size:.88rem;}
.ai-field::placeholder{color:rgba(246,241,228,.4);}
.ai-field:focus{outline:none;border-color:var(--gb-cyan);}
.ai-out{margin-top:16px;border-radius:14px;border:1px dashed rgba(255,255,255,.18);padding:16px;font-size:.86rem;color:rgba(246,241,228,.85);line-height:1.65;min-height:70px;}
.ai-chip{display:inline-block;margin:4px 6px 0 0;padding:5px 12px;border-radius:999px;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;color:#a8ecf7;}
.bar{height:7px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;}
.bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gb-indigo),var(--gb-cyan));width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1);}

/* ---------- Admission timeline ---------- */
.tl{position:relative;padding-left:34px;}
.tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--gold),var(--gb-cyan),transparent);}
.tl-item{position:relative;padding-bottom:26px;}
.tl-item::before{
  content:"";position:absolute;left:-28px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 5px rgba(201,162,75,.18);
}
.tl-item.done::before{background:var(--gb-emerald);box-shadow:0 0 0 5px rgba(16,185,129,.18);}

/* ---------- Magnetic + micro interactions ---------- */
.mag{will-change:transform;transition:transform .25s cubic-bezier(.2,.8,.2,1);}
.lift{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;}
.lift:hover{transform:translateY(-6px);}

/* ---------- Exit-intent / lead modal ---------- */
.gb-modal{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;background:rgba(5,9,20,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px;}
.gb-modal.show{display:flex;animation:lbIn .28s ease;}
.gb-modal .box{
  width:min(560px,100%);border-radius:24px;padding:32px;position:relative;color:#f6f1e4;
  background:linear-gradient(160deg,#0b1f2e,#0f2b3d 60%,#123449);
  border:1px solid rgba(201,162,75,.3);box-shadow:var(--gb-shadow-lux);
}
.gb-modal .box .x{position:absolute;top:14px;right:18px;font-size:1.6rem;cursor:pointer;color:rgba(246,241,228,.6);}
.gb-modal input,.gb-modal select{
  width:100%;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);color:#f6f1e4;font-size:.88rem;
}
.gb-modal input::placeholder{color:rgba(246,241,228,.4);}
.gb-modal input:focus,.gb-modal select:focus{outline:none;border-color:var(--gold-light);}
.gb-modal select option{color:#101418;}

/* ---------- Toast ---------- */
.gb-toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,140%);
  background:#0f2b3d;color:#f6f1e4;border:1px solid rgba(201,162,75,.4);
  padding:13px 22px;border-radius:999px;font-size:.85rem;z-index:1400;
  box-shadow:var(--gb-shadow-lux);transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.gb-toast.show{transform:translate(-50%,0);}

/* ---------- Comparison / value grid ---------- */
.value-tile{
  border-radius:18px;padding:22px;height:100%;
  background:var(--gb-glass);border:1px solid var(--gb-glass-line);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
}
.value-tile:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.4);}
.value-tile .n{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.2em;color:var(--gb-cyan);}

/* ---------- Utility ---------- */
.v4-dark{background:linear-gradient(180deg,#050914,#0b1f2e 45%,#0f2b3d);color:var(--parchment);}
.v4-swiper .swiper-slide{height:auto;}
.v4-swiper .swiper-pagination{position:static;margin-top:22px;}
.v4-swiper .swiper-pagination-bullet{background:var(--gold);opacity:.3;}
.v4-swiper .swiper-pagination-bullet-active{opacity:1;width:22px;border-radius:999px;}
img{max-width:100%;}

/* =========================================================
   V4.1 — cross-device / cross-browser hardening
   ========================================================= */

/* 1. Kill horizontal scroll on every device (marquees, aurora blobs) */
html, body { max-width: 100%; overflow-x: hidden; }
.marquee, .marquee-wrap, .logos, .ticker { overflow: hidden !important; }

/* 2. Responsive media defaults */
img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }
img { background: rgba(11,31,46,.06); }

/* 3. Decorative aurora/blur layers must never create scrollbars */
[class*="-top-32"], [class*="-left-32"], .aurora, .aurora-blob { pointer-events: none; }

/* 4. Safari / iOS fixes */
.glass, .glass-card, [class*="backdrop-blur"] { -webkit-backdrop-filter: blur(14px); }
input, select, textarea, button { font: inherit; -webkit-appearance: none; appearance: none; border-radius: inherit; }
input, select, textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */
.hero, .v4-hero { min-height: 100svh; }

/* 5. Swiper must not clip shadows but must not overflow either */
.swiper { overflow: hidden; width: 100%; }
.swiper-slide { height: auto; }

/* 6. Tap targets + no accidental text selection on controls */
a, button, .mag, .shot, .swiper-pagination-bullet { -webkit-tap-highlight-color: transparent; }
button, .btn, .act-primary, .nav, .x { min-height: 44px; min-width: 44px; }
.swiper-pagination-bullet { min-height: 10px; min-width: 10px; }

/* 7. Long words / tables on narrow screens */
h1, h2, h3, p, li, .cap { overflow-wrap: anywhere; }

/* 8. Small-screen typography guard */
@media (max-width: 420px) {
  h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important; line-height: 1.12; }
  .glass-card, .v4-card { padding: 18px !important; }
}

/* 9. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 10. Print (brochure-friendly) */
@media print { .lightbox, .gb-toast, #lead-modal, .float-cta, canvas { display: none !important; } }