/* =====================================================================
   IIBT Hyderabad — Web3 / Blockchain / Metaverse Institute
   Theme: "Genesis Block" — dark space canvas, violet->cyan energy,
   chain-link signature motif running through section dividers.
   ===================================================================== */

:root{
  /* --- Color tokens --- */
  --bg-void:        #07040f;
  --bg-deep:        #0d0821;
  --bg-surface:     #140c2c;
  --bg-surface-2:   #1c1140;
  --border-soft:    rgba(140, 110, 255, 0.18);
  --border-strong:  rgba(140, 110, 255, 0.4);

  --violet:         #8b5cf6;
  --violet-deep:    #6d28d9;
  --cyan:           #22d3ee;
  --magenta:        #e879f9;
  --gold:           #f5c451;

  --grad-primary:   linear-gradient(120deg, var(--violet) 0%, var(--cyan) 100%);
  --grad-warm:      linear-gradient(120deg, var(--magenta) 0%, var(--violet) 100%);

  --text-primary:   #f4f1ff;
  --text-muted:     #a99fcb;
  --text-faint:     #6f6591;

  /* --- Type --- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg-void);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

body::before{
  content:"";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 12% -5%, rgba(139,92,246,0.25), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(34,211,238,0.14), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(232,121,249,0.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}

h1,h2,h3,h4,h5{ font-family: var(--font-display); margin:0 0 .5em; letter-spacing: -0.02em; color: var(--text-primary); }
h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.08; }
h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height:1.15; }
h3{ font-size: 1.3rem; }
p{ color: var(--text-muted); margin:0 0 1em; }
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.container{ max-width: 1180px; margin:0 auto; padding: 0 24px; position:relative; z-index:1; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--cyan); background: rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.3);
  padding:6px 14px; border-radius:100px; margin-bottom:16px;
}
.eyebrow::before{ content:"◆"; font-size:.6rem; color: var(--violet); }

.grad-text{
  background: var(--grad-primary);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-display); font-weight:600; font-size:.95rem;
  padding: 13px 28px; border-radius: 100px; border:1px solid transparent;
  cursor:pointer; transition: all .25s ease; white-space:nowrap;
}
.btn-primary{
  background: var(--grad-primary); color:#0a0518;
  box-shadow: 0 0 0 rgba(139,92,246,0.0), 0 8px 24px -8px rgba(139,92,246,0.6);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px -6px rgba(139,92,246,0.75); }
.btn-outline{
  background: transparent; color: var(--text-primary); border:1px solid var(--border-strong);
}
.btn-outline:hover{ background: rgba(139,92,246,0.12); border-color: var(--violet); }
.btn-block{ width:100%; }
.btn-sm{ padding: 8px 18px; font-size:.82rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(7,4,15,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; max-width:1180px; margin:0 auto; position:relative; z-index:1;}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.2rem; }
.brand .mark{
  width:38px; height:38px; border-radius:10px; background: var(--grad-primary);
  display:flex; align-items:center; justify-content:center; color:#0a0518; font-weight:800;
}
.brand small{ display:block; font-family: var(--font-body); font-weight:400; font-size:.62rem; color: var(--text-faint); letter-spacing:.08em; }

.main-nav{ display:flex; align-items:center; gap: 6px; }
.main-nav > li{ position:relative; }
.main-nav a{
  display:block; padding: 10px 14px; font-size:.92rem; color: var(--text-muted); border-radius: 8px;
  transition: color .2s, background .2s;
}
.main-nav a:hover, .main-nav a.active{ color: var(--text-primary); background: rgba(139,92,246,0.1); }
.main-nav .dropdown{
  position:absolute; top: 110%; left:0; min-width:190px;
  background: var(--bg-surface); border:1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding:6px; opacity:0; visibility:hidden; transform: translateY(6px);
  transition: all .2s ease; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6);
}
.main-nav li:hover .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:none; color:var(--text-primary); font-size:1.5rem; cursor:pointer; }

@media (max-width: 960px){
  .main-nav{
    position:fixed; inset: 64px 0 0 0; background: var(--bg-deep); flex-direction:column; align-items:stretch;
    padding: 20px; overflow-y:auto; transform: translateX(100%); transition: transform .3s ease; gap:2px;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav .dropdown{ position:static; opacity:1; visibility:visible; transform:none; display:none; background:transparent; border:none; padding-left:12px; }
  .main-nav li.open .dropdown{ display:block; }
  .nav-toggle{ display:block; }
  .nav-actions .btn-outline{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding: 90px 0 70px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{ margin-bottom:20px; }
.hero .lead{ font-size:1.1rem; max-width:520px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin: 28px 0; }
.hero-stats{ display:flex; gap: 30px; margin-top: 34px; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family: var(--font-display); font-size:1.6rem; color:var(--text-primary); }
.hero-stats .stat span{ font-size:.78rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }

.chain-visual{ position:relative; height: 420px; }
.chain-node{
  position:absolute; width: 170px; padding:16px 18px; background: var(--bg-surface);
  border:1px solid var(--border-soft); border-radius: var(--radius-md);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.7);
  animation: floaty 6s ease-in-out infinite;
}
.chain-node .hash{ font-family: var(--font-mono); font-size:.62rem; color: var(--cyan); opacity:.8; }
.chain-node strong{ display:block; margin-top:4px; font-size:.88rem; }
.chain-node:nth-child(1){ top: 0; left: 10%; animation-delay:0s; }
.chain-node:nth-child(2){ top: 34%; left: 46%; animation-delay: 1.4s; border-color: rgba(34,211,238,0.35);}
.chain-node:nth-child(3){ top: 66%; left: 6%; animation-delay: 2.6s; border-color: rgba(232,121,249,0.35);}
.chain-node:nth-child(4){ top: 82%; left: 52%; animation-delay: .8s; }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
@media (max-width: 900px){ .chain-visual{ display:none; } }

/* ---------- Section shells ---------- */
.section{ padding: 84px 0; position:relative; }
.section-head{ text-align:center; max-width: 680px; margin: 0 auto 48px; }
.section-alt{ background: linear-gradient(180deg, transparent, rgba(139,92,246,0.05), transparent); }
.divider-chain{ display:flex; align-items:center; justify-content:center; gap:6px; margin: 0 0 40px; opacity:.5;}
.divider-chain span{ width:6px; height:6px; border-radius:50%; background: var(--violet); }
.divider-chain i{ width:40px; height:1px; background: var(--border-strong); }

/* ---------- Cards ---------- */
.grid{ display:grid; gap: 24px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .grid-3,.grid-4,.grid-2{ grid-template-columns: 1fr;} }

.card{
  background: linear-gradient(160deg, var(--bg-surface), var(--bg-deep));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 26px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-6px); border-color: var(--border-strong); box-shadow: 0 24px 50px -20px rgba(139,92,246,0.35); }

.icon-badge{
  width:46px; height:46px; border-radius: 12px; display:flex; align-items:center; justify-content:center;
  background: rgba(139,92,246,0.14); border:1px solid var(--border-soft); margin-bottom:16px; font-size:1.3rem;
}

/* ---------- Course cards ---------- */
.course-card{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.course-thumb{ height:170px; background: var(--grad-primary); position:relative; display:flex; align-items:center; justify-content:center; }
.course-thumb img{ width:100%; height:100%; object-fit:cover; }
.course-badge{ position:absolute; top:12px; left:12px; background: rgba(7,4,15,0.7); backdrop-filter: blur(6px); font-family: var(--font-mono); font-size:.66rem; padding: 5px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.06em; }
.course-body{ padding: 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.course-meta{ display:flex; gap:14px; font-size:.78rem; color: var(--text-faint); }
.course-price-row{ display:flex; align-items:baseline; gap:10px; margin-top:auto; padding-top:12px; border-top:1px dashed var(--border-soft); }
.price-now{ font-family: var(--font-display); font-size:1.4rem; color: var(--text-primary); }
.price-strike{ text-decoration: line-through; color: var(--text-faint); font-size:.85rem; }

/* ---------- Testimonials ---------- */
.testimonial-card{ position:relative; }
.testimonial-card .stars{ color: var(--gold); letter-spacing:2px; margin-bottom:10px; }
.testimonial-card footer{ margin-top:16px; display:flex; align-items:center; gap:10px; }
.avatar-fallback{
  width:42px; height:42px; border-radius:50%; background: var(--grad-warm);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; color:#0a0518;
}

/* ---------- Pricing impact strip ---------- */
.impact-strip{
  background: linear-gradient(120deg, rgba(139,92,246,0.18), rgba(34,211,238,0.1));
  border:1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 40px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
@media (max-width:700px){ .impact-strip{ flex-direction:column; text-align:center; } }

/* ---------- Forms ---------- */
.form-shell{
  background: var(--bg-surface); border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 34px; max-width: 520px; margin:0 auto;
}
.form-group{ margin-bottom:18px; }
label{ display:block; font-size:.82rem; color: var(--text-muted); margin-bottom:6px; }
input, select, textarea{
  width:100%; padding: 12px 14px; background: var(--bg-void); border:1px solid var(--border-soft);
  border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size:.95rem;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,92,246,0.2); }
.form-divider{ display:flex; align-items:center; gap:12px; margin:20px 0; color: var(--text-faint); font-size:.8rem; }
.form-divider::before, .form-divider::after{ content:""; flex:1; height:1px; background: var(--border-soft); }
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#fff; color:#222; border-radius:100px; padding:12px; font-family: var(--font-display); font-weight:600;
}

/* ---------- Alerts ---------- */
.alert{ padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size:.9rem; }
.alert-success{ background: rgba(34,211,238,0.12); border:1px solid rgba(34,211,238,0.4); color:#a6f3ff; }
.alert-error{ background: rgba(232,121,249,0.12); border:1px solid rgba(232,121,249,0.4); color:#ffd4fb; }
.alert-info{ background: rgba(139,92,246,0.12); border:1px solid var(--border-strong); color:#ded4ff; }

/* ---------- Progress bar ---------- */
.progress-track{ background: var(--bg-void); border-radius:100px; height:10px; overflow:hidden; border:1px solid var(--border-soft); }
.progress-fill{ height:100%; background: var(--grad-primary); border-radius:100px; transition: width .4s ease; }

/* ---------- Tables (dashboard/admin) ---------- */
table{ width:100%; border-collapse: collapse; }
table th, table td{ text-align:left; padding: 12px 14px; border-bottom:1px solid var(--border-soft); font-size:.88rem; }
table th{ color: var(--text-faint); font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--bg-deep); border-top:1px solid var(--border-soft); padding: 60px 0 24px; margin-top: 60px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:36px; margin-bottom:40px;}
@media (max-width:900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color: var(--text-primary); margin-bottom:16px; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid a{ color: var(--text-muted); font-size:.9rem; }
.footer-grid a:hover{ color: var(--cyan); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid var(--border-soft); font-size:.8rem; color: var(--text-faint); flex-wrap:wrap; gap:10px;}
.social-row{ display:flex; gap:10px; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ border-color: var(--violet); background: rgba(139,92,246,0.15); }

/* ---------- Misc utility ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.badge{ display:inline-block; padding:4px 10px; border-radius:100px; font-size:.7rem; font-family: var(--font-mono); border:1px solid var(--border-soft); }
.sticky-cta-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background: rgba(13,8,33,0.92); backdrop-filter: blur(10px); border-top:1px solid var(--border-soft);
  padding: 12px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}