/* =============================================================
   CHEMOSS.IN — Premium NEET Chemistry Coaching
   Art direction: Dark navy premium, teal + light-yellow accent
   Palette: deep dark blue gradient, teal primary, gold/yellow highlights
   Typography: Plus Jakarta Sans (display) + Inter (body)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --color-bg:              #080d1a;
  --color-surface:         #0f1829;
  --color-surface-2:       #131f33;
  --color-surface-3:       #172339;
  --color-surface-offset:  #1c2945;
  --color-divider:         rgba(255,255,255,0.07);
  --color-border:          rgba(255,255,255,0.11);
  --color-text:            #eef2ff;
  --color-text-muted:      #94afc8;
  --color-text-faint:      #4a5e78;
  --color-text-inverse:    #080d1a;
  --color-primary:         #2dd4cf;
  --color-primary-hover:   #22b8b4;
  --color-primary-glow:    rgba(45,212,207,0.18);
  --color-yellow:          #fde68a;
  --color-yellow-dim:      #f5cc5a;
  --color-yellow-glow:     rgba(253,230,138,0.15);
  --color-gold:            #f59e0b;
  --font-display:          'Plus Jakarta Sans', sans-serif;
  --font-body:             'Inter', sans-serif;
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-hero: clamp(2.8rem,   0.5rem  + 7vw,    6.5rem);
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --radius-sm:   0.375rem;  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;   --radius-xl:   1rem;
  --radius-2xl:  1.5rem;    --radius-full: 9999px;
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow-teal:   0 0 32px rgba(45,212,207,0.2);
  --shadow-glow-yellow: 0 0 24px rgba(253,230,138,0.15);
  --content-default: 960px;
  --content-wide:    1200px;
  --transition:      180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================== BASE RESET ===================== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html {
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:80px;
}
body {
  min-height:100dvh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-text);
  background:var(--color-bg);
  overflow-x:hidden;
  line-height:1.65;
}
img,picture,svg { display:block; max-width:100% }
ul[role="list"],ol[role="list"] { list-style:none }
input,button,textarea,select { font:inherit; color:inherit }
h1,h2,h3,h4 { font-family:var(--font-display); text-wrap:balance; line-height:1.15 }
p,li { text-wrap:pretty }
button { cursor:pointer; background:none; border:none }
a { color:inherit; text-decoration:none }
::selection { background:rgba(45,212,207,0.25); color:var(--color-text) }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:var(--radius-sm) }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}

/* ===================== UTILITIES ===================== */
.container { max-width:var(--content-wide); margin-inline:auto; padding-inline:clamp(var(--space-4),4vw,var(--space-10)) }
.section { padding-block:clamp(var(--space-16),8vw,var(--space-24)) }
.gradient-text {
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-yellow) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-1) var(--space-4);
  background:rgba(45,212,207,0.1); border:1px solid rgba(45,212,207,0.25);
  border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:700;
  color:var(--color-primary); text-transform:uppercase; letter-spacing:0.1em;
  margin-bottom:var(--space-4);
}
.section-header { margin-bottom:clamp(var(--space-8),4vw,var(--space-12)) }
.section-header h2 { font-size:var(--text-2xl); font-weight:800; line-height:1.15 }
.section-header p { font-size:var(--text-base); color:var(--color-text-muted); margin-top:var(--space-3); max-width:58ch; line-height:1.75 }
.divider-line { width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--color-divider),transparent) }

/* ===================== BUTTONS ===================== */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-8); border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:700;
  transition:all var(--transition); cursor:pointer; border:none; white-space:nowrap;
}
.btn-lg { padding:var(--space-4) var(--space-10); font-size:var(--text-base) }
.btn-primary { background:var(--color-primary); color:var(--color-text-inverse); box-shadow:var(--shadow-glow-teal) }
.btn-primary:hover { background:var(--color-primary-hover); box-shadow:0 0 48px rgba(45,212,207,0.35); transform:translateY(-2px) }
.btn-yellow { background:var(--color-yellow); color:#1a1000; box-shadow:var(--shadow-glow-yellow) }
.btn-yellow:hover { background:var(--color-yellow-dim); transform:translateY(-2px) }
.btn-ghost { background:transparent; color:var(--color-text); border:1px solid var(--color-border) }
.btn-ghost:hover { background:var(--color-surface); border-color:rgba(255,255,255,0.2) }
.btn-whatsapp { background:#25D366; color:#fff }
.btn-whatsapp:hover { background:#1fb855; transform:translateY(-2px) }

/* ===================== HEADER ===================== */
.header {
  position:sticky; top:0; z-index:100;
  background:rgba(8,13,26,0.88);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--color-divider);
  transition:box-shadow var(--transition);
}
.header.scrolled { box-shadow:0 2px 24px rgba(0,0,0,0.5) }
.nav { display:flex; align-items:center; justify-content:space-between; height:68px }
.nav-logo { display:flex; align-items:center; gap:var(--space-3) }
.nav-logo img { height:38px; width:38px; border-radius:var(--radius-sm); object-fit:contain }
.nav-logo-text strong { font-family:var(--font-display); font-size:1.05rem; font-weight:800; letter-spacing:0.06em; display:block }
.nav-logo-text span { font-size:0.65rem; color:var(--color-primary); letter-spacing:0.1em; text-transform:uppercase; display:block; line-height:1.2 }
.nav-links { display:flex; align-items:center; gap:var(--space-8); list-style:none }
.nav-links a {
  font-size:var(--text-sm); font-weight:500; color:var(--color-text-muted);
  transition:color var(--transition); position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--color-primary);
  transform:scaleX(0); transition:transform var(--transition); border-radius:var(--radius-full);
}
.nav-links a:hover { color:var(--color-text) }
.nav-links a:hover::after { transform:scaleX(1) }
.nav-cta { display:flex; align-items:center; gap:var(--space-3) }
.hamburger { display:none; flex-direction:column; gap:5px; padding:var(--space-2); background:none; border:none; cursor:pointer }
.hamburger span { width:22px; height:2px; background:var(--color-text); border-radius:2px; display:block; transition:all 0.3s }
.mobile-menu {
  display:none; position:fixed; inset:0;
  background:rgba(8,13,26,0.97); z-index:99;
  flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-10); backdrop-filter:blur(20px);
}
.mobile-menu.open { display:flex }
.mobile-menu a { font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; color:var(--color-text); transition:color var(--transition) }
.mobile-menu a:hover { color:var(--color-primary) }
.mobile-close { position:absolute; top:var(--space-6); right:var(--space-6); font-size:1.5rem; color:var(--color-text-muted); background:none; border:none; cursor:pointer; line-height:1 }

/* ===================== HERO ===================== */
.hero { position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden }
.hero-bg-img { position:absolute; inset:0; z-index:0 }
.hero-bg-img img { width:100%; height:100%; object-fit:cover; opacity:0.3 }
.hero-bg-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(8,13,26,0.95) 0%,rgba(8,13,26,0.75) 50%,rgba(8,13,26,0.88) 100%);
}
.hero-content {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 400px;
  gap:var(--space-16); align-items:center; padding-block:var(--space-24);
}
.hero-text { max-width:640px }
.hero-badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-5);
  background:rgba(45,212,207,0.08); border:1px solid rgba(45,212,207,0.28);
  border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:700;
  color:var(--color-primary); text-transform:uppercase; letter-spacing:0.12em;
  margin-bottom:var(--space-6); animation:fadeInDown 0.8s ease both;
}
.hero-badge .dot {
  width:6px; height:6px; border-radius:var(--radius-full);
  background:var(--color-primary); animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.6)} }
.hero-title { font-size:var(--text-hero); font-weight:900; line-height:1.05; margin-bottom:var(--space-6); animation:fadeInUp 0.9s ease both 0.1s }
.hero-subtitle { font-size:var(--text-base); color:var(--color-text-muted); line-height:1.8; margin-bottom:var(--space-8); max-width:52ch; animation:fadeInUp 0.9s ease both 0.2s }
.hero-actions { display:flex; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-12); animation:fadeInUp 0.9s ease both 0.3s }
.hero-stats {
  display:flex; gap:var(--space-8); animation:fadeInUp 0.9s ease both 0.4s;
  border-top:1px solid var(--color-divider); padding-top:var(--space-8);
}
.hero-stat-num { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:900; color:var(--color-yellow); line-height:1 }
.hero-stat-label { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-1); text-transform:uppercase; letter-spacing:0.08em }
.hero-image-wrap { position:relative; animation:fadeInRight 1s ease both 0.25s }
.hero-image-wrap img { width:100%; border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg),var(--shadow-glow-teal); border:1px solid rgba(45,212,207,0.18) }
.hero-float-1 {
  position:absolute; bottom:-16px; left:-20px;
  background:rgba(15,24,41,0.95); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); padding:var(--space-3) var(--space-5);
  backdrop-filter:blur(12px); box-shadow:var(--shadow-md);
}
.hero-float-1 strong { font-family:var(--font-display); font-size:var(--text-sm); font-weight:700; color:var(--color-yellow); display:block }
.hero-float-1 small { font-size:var(--text-xs); color:var(--color-text-muted) }
.hero-float-2 {
  position:absolute; top:20px; right:-20px;
  background:rgba(15,24,41,0.95); border:1px solid rgba(45,212,207,0.25);
  border-radius:var(--radius-xl); padding:var(--space-4) var(--space-5);
  backdrop-filter:blur(12px); text-align:center;
  box-shadow:var(--shadow-md),var(--shadow-glow-teal);
}
.hero-float-2 .big-num { font-family:var(--font-display); font-size:var(--text-xl); font-weight:900; color:var(--color-primary); line-height:1 }
.hero-float-2 small { font-size:var(--text-xs); color:var(--color-text-muted); display:block; margin-top:var(--space-1) }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(30px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeInRight{ from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:translateX(0)} }

/* ===================== ABOUT ===================== */
.about { background:linear-gradient(180deg,rgba(15,24,41,0.5) 0%,transparent 100%) }
.about-grid { display:grid; grid-template-columns:400px 1fr; gap:clamp(var(--space-8),5vw,var(--space-16)); align-items:center }
.about-img-wrap { position:relative }
.about-img-wrap img { width:100%; border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); border:1px solid var(--color-border) }
.about-img-glow { position:absolute; inset:-8px; border-radius:calc(var(--radius-2xl) + 8px); background:linear-gradient(135deg,rgba(45,212,207,0.12),rgba(253,230,138,0.07)); z-index:-1 }
.about-credential-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5) }
.chip { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:500; color:var(--color-text-muted) }
.chip-teal { color:var(--color-primary) }
.about-content h2 { font-size:var(--text-2xl); font-weight:800; margin-bottom:var(--space-3) }
.about-content .lead { font-size:var(--text-lg); color:var(--color-yellow); font-weight:600; margin-bottom:var(--space-4); line-height:1.5 }
.about-content p { color:var(--color-text-muted); margin-bottom:var(--space-4); line-height:1.8; max-width:58ch }
.about-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin:var(--space-8) 0 }
.about-stat-box { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-5); text-align:center; transition:border-color var(--transition),box-shadow var(--transition) }
.about-stat-box:hover { border-color:rgba(45,212,207,0.4); box-shadow:var(--shadow-glow-teal) }
.about-stat-box .num { font-family:var(--font-display); font-size:var(--text-xl); font-weight:800; color:var(--color-primary) }
.about-stat-box .lbl { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-1) }

/* ===================== PROGRAMS ===================== */
.programs { background:rgba(11,18,32,0.6) }
.programs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:clamp(var(--space-8),4vw,var(--space-12)) }
.program-card {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-2xl); padding:var(--space-8);
  position:relative; overflow:hidden;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.program-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--color-primary),var(--color-yellow)); opacity:0; transition:opacity var(--transition) }
.program-card:hover { border-color:rgba(45,212,207,0.3); transform:translateY(-6px); box-shadow:var(--shadow-lg),var(--shadow-glow-teal) }
.program-card:hover::after,.program-card.featured::after { opacity:1 }
.program-card.featured { border-color:rgba(45,212,207,0.35); background:linear-gradient(145deg,var(--color-surface) 0%,rgba(45,212,207,0.04) 100%) }
.prog-badge { display:inline-block; padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-4) }
.prog-badge-teal   { background:rgba(45,212,207,0.12); color:var(--color-primary) }
.prog-badge-yellow { background:rgba(253,230,138,0.1); color:var(--color-yellow) }
.prog-badge-blue   { background:rgba(100,140,220,0.1); color:#90b8f0 }
.prog-icon { width:52px; height:52px; background:rgba(45,212,207,0.09); border:1px solid rgba(45,212,207,0.2); border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:var(--space-5) }
.program-card h3 { font-size:var(--text-xl); font-weight:800; margin-bottom:var(--space-2) }
.program-card .tagline { font-size:var(--text-sm); color:var(--color-primary); font-weight:600; margin-bottom:var(--space-4) }
.program-card p { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.75; margin-bottom:var(--space-6) }
.prog-features { list-style:none; margin-bottom:var(--space-8); flex:1 }
.prog-features li { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); color:var(--color-text-muted); padding-block:var(--space-2); border-bottom:1px solid var(--color-divider) }
.prog-features li:last-child { border-bottom:none }
.check { width:18px; height:18px; border-radius:var(--radius-full); background:rgba(45,212,207,0.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--color-primary); font-size:0.6rem }

/* ===================== RESULTS ===================== */
.rank1-feature {
  background:linear-gradient(135deg,var(--color-surface-2) 0%,rgba(45,212,207,0.06) 100%);
  border:1px solid rgba(45,212,207,0.28); border-radius:var(--radius-2xl);
  padding:var(--space-8); display:grid; grid-template-columns:auto 1fr;
  gap:var(--space-8); align-items:center; margin-bottom:var(--space-10);
  position:relative; overflow:hidden;
}
.rank1-feature::before { content:'\31'; position:absolute; right:var(--space-8); top:50%; transform:translateY(-50%); font-family:var(--font-display); font-size:8rem; font-weight:900; color:rgba(45,212,207,0.05); line-height:1; pointer-events:none }
.rank1-avatar { width:96px; height:96px; border-radius:var(--radius-full); background:linear-gradient(135deg,rgba(45,212,207,0.25),rgba(253,230,138,0.15)); border:2px solid rgba(45,212,207,0.4); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.5rem; font-weight:900; color:var(--color-primary) }
.r1-tag { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-4); background:rgba(45,212,207,0.1); border:1px solid rgba(45,212,207,0.25); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:700; color:var(--color-primary); margin-bottom:var(--space-3) }
.rank1-feature h3 { font-size:var(--text-xl); font-weight:800; margin-bottom:var(--space-2) }
.rank1-feature .college { color:var(--color-yellow); font-weight:600; font-size:var(--text-sm) }
.rank1-feature .desc { color:var(--color-text-muted); font-size:var(--text-sm); margin-top:var(--space-3); max-width:50ch; line-height:1.75 }
.year-tabs { display:flex; gap:var(--space-2); margin-bottom:var(--space-8); flex-wrap:wrap }
.year-tab { padding:var(--space-2) var(--space-5); border-radius:var(--radius-full); font-size:var(--text-sm); font-weight:600; cursor:pointer; border:1px solid var(--color-border); background:transparent; color:var(--color-text-muted); transition:all var(--transition) }
.year-tab.active { background:var(--color-primary); color:var(--color-text-inverse); border-color:var(--color-primary) }
.year-tab:hover:not(.active) { border-color:var(--color-primary); color:var(--color-primary) }
.toppers-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-3) }
.topper-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-3); transition:border-color var(--transition),transform var(--transition) }
.topper-card:hover { border-color:rgba(45,212,207,0.3); transform:translateY(-2px) }
.topper-rank { font-family:var(--font-display); font-size:var(--text-lg); font-weight:800; color:var(--color-yellow); min-width:44px; line-height:1 }
.topper-name { font-size:var(--text-sm); font-weight:600; line-height:1.3 }
.topper-college { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px }
.tab-panel { display:none }
.tab-panel.active { display:block }

/* ===================== YOUTUBE ===================== */
.youtube-section { background:linear-gradient(180deg,rgba(11,18,32,0.5) 0%,transparent 100%) }
.youtube-inner { display:grid; grid-template-columns:1fr 420px; gap:clamp(var(--space-8),5vw,var(--space-16)); align-items:center }
.yt-thumb-wrap { position:relative; border-radius:var(--radius-2xl); overflow:hidden; aspect-ratio:16/9; cursor:pointer; box-shadow:var(--shadow-lg); border:1px solid var(--color-border) }
.yt-thumb-wrap img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow) }
.yt-thumb-wrap:hover img { transform:scale(1.05) }
.yt-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(8,13,26,0.4); transition:background var(--transition) }
.yt-thumb-wrap:hover .yt-overlay { background:rgba(8,13,26,0.3) }
.yt-play { width:66px; height:66px; background:rgba(255,0,0,0.92); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(255,0,0,0.45); transition:transform var(--transition),box-shadow var(--transition) }
.yt-thumb-wrap:hover .yt-play { transform:scale(1.1); box-shadow:0 8px 36px rgba(255,0,0,0.6) }
.yt-play svg { width:26px; fill:#fff; margin-left:4px }
.yt-content h2 { font-size:var(--text-2xl); font-weight:800; margin-bottom:var(--space-4) }
.yt-content p { color:var(--color-text-muted); margin-bottom:var(--space-6); line-height:1.8 }
.yt-list { list-style:none; margin-bottom:var(--space-8) }
.yt-list li { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); color:var(--color-text-muted); padding-block:var(--space-2) }
.yt-list li::before { content:'\25b8'; color:var(--color-primary) }

/* ===================== CONTACT ===================== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); margin-top:clamp(var(--space-8),4vw,var(--space-12)) }
.contact-detail-block h3 { font-size:var(--text-lg); font-weight:700; color:var(--color-yellow); margin-bottom:var(--space-6) }
.contact-item { display:flex; gap:var(--space-4); margin-bottom:var(--space-6); align-items:flex-start }
.c-icon { width:44px; height:44px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:var(--color-primary); font-size:1.1rem; flex-shrink:0; margin-top:2px }
.c-text p { font-size:var(--text-xs); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-1) }
.c-text a,.c-text span { font-size:var(--text-sm); font-weight:500; color:var(--color-text); transition:color var(--transition); display:block; line-height:1.5 }
.c-text a:hover { color:var(--color-primary) }
.contact-form-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2xl); padding:var(--space-8) }
.contact-form-card h3 { font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-6) }
.fgroup { margin-bottom:var(--space-4) }
.fgroup label { display:block; font-size:var(--text-xs); font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-2) }
.fgroup input,.fgroup select,.fgroup textarea { width:100%; padding:var(--space-3) var(--space-4); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg); color:var(--color-text); font-size:var(--text-sm); transition:border-color var(--transition),box-shadow var(--transition); outline:none; -webkit-appearance:none; appearance:none }
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-glow) }
.fgroup input::placeholder,.fgroup textarea::placeholder { color:var(--color-text-faint) }
.fgroup select option { background:var(--color-surface-2) }
.fgroup textarea { resize:none; min-height:90px }

/* ===================== FOOTER ===================== */
.footer { background:rgba(5,8,18,0.98); border-top:1px solid var(--color-divider); padding-block:clamp(var(--space-10),5vw,var(--space-16)) }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-12); margin-bottom:var(--space-10) }
.footer-brand-logo { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4) }
.footer-brand-logo img { height:34px; width:34px; border-radius:var(--radius-sm); object-fit:contain }
.footer-brand-logo strong { font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:0.06em }
.footer-brand p { color:var(--color-text-muted); font-size:var(--text-sm); line-height:1.75; max-width:38ch }
.footer-col h4 { font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-text-muted); margin-bottom:var(--space-5) }
.footer-col ul { list-style:none }
.footer-col ul li { margin-bottom:var(--space-3) }
.footer-col ul a { font-size:var(--text-sm); color:var(--color-text-muted); transition:color var(--transition) }
.footer-col ul a:hover { color:var(--color-primary) }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--color-divider); padding-top:var(--space-6); font-size:var(--text-xs); color:var(--color-text-faint) }
.social-links { display:flex; gap:var(--space-3) }
.soc-link { width:36px; height:36px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); font-size:0.85rem; transition:all var(--transition) }
.soc-link:hover { background:var(--color-surface-offset); border-color:var(--color-primary); color:var(--color-primary) }

/* ===================== FLOATING WHATSAPP ===================== */
.float-wa { position:fixed; bottom:var(--space-8); right:var(--space-8); z-index:50; width:56px; height:56px; background:#25D366; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.55); transition:all var(--transition); animation:bounce-in 1s ease 1.5s both }
.float-wa:hover { background:#1fb855; transform:scale(1.1); box-shadow:0 8px 32px rgba(37,211,102,0.65) }
.float-wa svg { width:28px; height:28px; fill:#fff }
@keyframes bounce-in { 0%{opacity:0;transform:scale(0)} 70%{transform:scale(1.15)} 100%{opacity:1;transform:scale(1)} }

/* ===================== SCROLL REVEAL ===================== */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1) }
.reveal.visible { opacity:1; transform:translateY(0) }
.reveal-d1{transition-delay:0.1s} .reveal-d2{transition-delay:0.2s} .reveal-d3{transition-delay:0.3s} .reveal-d4{transition-delay:0.4s}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1024px){
  .hero-content { grid-template-columns:1fr }
  .hero-image-wrap { display:none }
  .about-grid { grid-template-columns:1fr }
  .about-img-wrap { max-width:360px; margin:0 auto }
  .programs-grid { grid-template-columns:1fr 1fr }
  .youtube-inner { grid-template-columns:1fr }
  .contact-grid { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr 1fr }
}
@media(max-width:768px){
  .nav-links,.nav-cta { display:none }
  .hamburger { display:flex }
  .programs-grid { grid-template-columns:1fr }
  .rank1-feature { grid-template-columns:1fr; text-align:center }
  .rank1-avatar { margin:0 auto }
  .footer-inner { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; gap:var(--space-4); text-align:center }
  .float-wa { bottom:var(--space-6); right:var(--space-4) }
}
@media(max-width:480px){
  .hero-actions { flex-direction:column }
  .hero-actions .btn { width:100%; justify-content:center }
  .hero-stats { flex-wrap:wrap; gap:var(--space-6) }
  .about-stats-row { gap:var(--space-3) }
}