/* ============================================================
   MiahsClass v2 ? Main Stylesheet  |  Phase 1
   Design: Premium dark ? Apple / Stripe / Linear inspired
   ============================================================ */

/* -- 1. RESET ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg-base); color: var(--text-primary); overflow-x: hidden; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* -- 2. DESIGN TOKENS --------------------------------------- */
:root {
  --bg-base:        #f7f7f8;
  --bg-surface:     #ffffff;
  --bg-elevated:    #e4f1f7;
  --bg-card:        #ffffff;

  --cyan:           #5b8fa0;
  --blue:           #77a1af;
  --purple:         #2d6e8a;
  --gold:           #f59e0b;
  --green:          #10b981;
  --red:            #ef4444;
  --pink:           #ec4899;

  --text-primary:   #0a1a2a;
  --text-secondary: #434343;
  --text-muted:     #77a1af;

  --border-0:       rgba(91,143,160,0.08);
  --border-1:       rgba(91,143,160,0.18);
  --border-2:       rgba(91,143,160,0.38);

  --glass-bg:       rgba(255,255,255,0.88);
  --glass-border:   rgba(91,143,160,0.22);

  --grad-text:      linear-gradient(135deg, #5b8fa0 0%, #2d6e8a 55%, #1a4a62 100%);
  --grad-cta:       linear-gradient(135deg, #5b8fa0 0%, #77a1af 100%);

  --nav-height:     72px;
  --max-w:          1280px;

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-full: 9999px;

  --shadow-md:   0 4px 20px rgba(91,143,160,0.18);
  --shadow-lg:   0 8px 40px rgba(91,143,160,0.22);

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  --t-fast: 150ms var(--ease);
  --t-base: 250ms var(--ease);
  --t-slow: 400ms var(--ease);
}

/* -- 3. AMBIENT BACKGROUND --------------------------------- */
.v2-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#v2AmbientCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.65;
}
.v2-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: orbFloat 22s ease-in-out infinite alternate;
}
.v2-orb-1 { width:600px; height:600px; background:radial-gradient(circle,rgba(91,143,160,0.22),transparent 70%); top:-180px; left:-80px; animation-duration:22s; }
.v2-orb-2 { width:500px; height:500px; background:radial-gradient(circle,rgba(119,161,175,0.16),transparent 70%); top:20%; right:-150px; animation-duration:18s; animation-delay:-8s; }
.v2-orb-3 { width:400px; height:400px; background:radial-gradient(circle,rgba(45,110,138,0.12),transparent 70%); bottom:10%; left:30%; animation-duration:26s; animation-delay:-14s; }
@keyframes orbFloat {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(30px,-50px) scale(1.05); }
  100% { transform: translate(-20px,20px) scale(0.96); }
}

/* -- 4. CUSTOM CURSOR --------------------------------------- */
.v2-cursor-dot, .v2-cursor-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
}
.v2-cursor-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
}
.v2-cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(0,200,224,0.5);
  transition: width var(--t-base), height var(--t-base), border-color var(--t-base);
}
.v2-cursor-ring.v2-hovering {
  width: 54px; height: 54px;
  border-color: rgba(0,200,224,0.9);
  background: rgba(0,200,224,0.05);
}
@media (pointer:coarse) { .v2-cursor-dot, .v2-cursor-ring { display:none; } }

/* -- 5. NAVBAR ---------------------------------------------- */
.v2-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  transition: background var(--t-slow), box-shadow var(--t-slow), border-color var(--t-slow);
}
.v2-header.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(91,143,160,0.2);
  box-shadow: 0 2px 20px rgba(91,143,160,0.15);
}
.v2-nav {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.v2-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}
.v2-nav-logo:hover { opacity: 0.82; }
.v2-nav-logo img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; }

.v2-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.v2-nav-links a {
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.v2-nav-links a:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.v2-nav-links a.active { color: var(--cyan); background: rgba(0,200,224,0.1); }

.v2-nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.v2-btn-ghost {
  padding: 7px 16px;
  border-radius: var(--r-full);
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-1);
  transition: all var(--t-fast);
}
.v2-btn-ghost:hover { color:var(--text-primary); border-color:var(--border-2); background:rgba(255,255,255,0.05); }
.v2-btn-primary {
  padding: 8px 20px;
  border-radius: var(--r-full);
  font-size: 14px; font-weight: 700;
  color: var(--bg-base);
  background: var(--cyan);
  transition: all var(--t-fast);
  white-space: nowrap;
}
.v2-btn-primary:hover { background:#19ddf7; box-shadow:0 0 24px rgba(0,200,224,0.4); transform:translateY(-1px); }

.v2-nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: var(--r-sm);
  margin-left: auto;
}
.v2-nav-hamburger span { display:block; width:22px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform var(--t-base),opacity var(--t-base); }
.v2-nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.v2-nav-hamburger.open span:nth-child(2) { opacity:0; }
.v2-nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* -- 6. MOBILE MENU ------------------------------------------ */
.v2-mobile-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(6,12,24,0.96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-slow);
}
.v2-mobile-overlay.open { opacity:1; pointer-events:auto; }
.v2-mobile-close {
  position: absolute; top:24px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background:var(--border-1); color:var(--text-primary);
  font-size:18px; display:flex; align-items:center; justify-content:center;
  transition: background var(--t-fast);
}
.v2-mobile-close:hover { background:var(--border-2); }
.v2-mobile-menu { text-align:center; padding:48px; }
.v2-mobile-links { display:flex; flex-direction:column; gap:8px; margin-bottom:40px; }
.v2-mobile-links a { font-size:26px; font-weight:700; color:var(--text-secondary); padding:10px 20px; border-radius:var(--r-md); transition:color var(--t-fast),background var(--t-fast); letter-spacing:-0.5px; }
.v2-mobile-links a:hover { color:var(--text-primary); background:var(--border-0); }
.v2-mobile-ctas { display:flex; flex-direction:column; gap:12px; }
.v2-mobile-btn-ghost { padding:14px 32px; border-radius:var(--r-full); font-size:16px; font-weight:600; color:var(--text-primary); border:1px solid var(--border-2); display:block; transition:background var(--t-fast); }
.v2-mobile-btn-ghost:hover { background:var(--border-0); }
.v2-mobile-btn-primary { padding:14px 32px; border-radius:var(--r-full); font-size:16px; font-weight:700; color:var(--bg-base); background:var(--cyan); display:block; transition:box-shadow var(--t-fast); }
.v2-mobile-btn-primary:hover { box-shadow:0 0 32px rgba(0,200,224,0.4); }

/* -- 7. LAYOUT HELPERS -------------------------------------- */
.v2-container { max-width:var(--max-w); margin:0 auto; padding:0 32px; }
.v2-section-eyebrow { font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--cyan); margin-bottom:12px; }
.v2-section-title { font-size:clamp(28px,4vw,48px); font-weight:800; letter-spacing:-0.03em; color:var(--text-primary); line-height:1.15; margin-bottom:16px; }
.v2-section-sub { font-size:17px; color:var(--text-secondary); line-height:1.7; max-width:600px; }
.v2-section-header { text-align:center; margin-bottom:72px; }
.v2-section-header .v2-section-sub { margin:0 auto; }
.v2-gradient-text { background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.v2-section { position:relative; z-index:1; padding:100px 0; }

/* -- 8. HERO ------------------------------------------------ */
.v2-hero {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: var(--nav-height);
  overflow: hidden;
}
.v2-hero-container {
  max-width: var(--max-w); margin: 0 auto;
  padding: 80px 32px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center; width: 100%;
}
.v2-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--cyan);
  background: rgba(91,143,160,0.1); border: 1px solid rgba(91,143,160,0.25);
  padding: 6px 14px; border-radius: var(--r-full); margin-bottom: 24px;
  animation: v2FadeInDown .6s var(--ease-out) both;
}
.v2-eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:v2Pulse 2s ease-in-out infinite; }

.v2-hero-headline {
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 900; letter-spacing: -0.04em;
  line-height: 1.04; color: var(--text-primary); margin-bottom: 24px;
}
.v2-hero-headline .v2-line { display:block; animation:v2FadeInUp .7s var(--ease-out) both; }
.v2-hero-headline .v2-line-1 { animation-delay:.1s; }
.v2-hero-headline .v2-line-2 { animation-delay:.2s; }
.v2-hero-headline .v2-line-3 { animation-delay:.3s; }

.v2-hero-sub { font-size:18px; color:var(--text-secondary); line-height:1.7; margin-bottom:40px; animation:v2FadeInUp .7s var(--ease-out) .35s both; }

.v2-hero-ctas { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:56px; animation:v2FadeInUp .7s var(--ease-out) .45s both; }
.v2-cta-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 30px; border-radius:var(--r-full);
  font-size:16px; font-weight:700; color:var(--bg-base); background:var(--cyan);
  transition:all var(--t-base); position:relative; overflow:hidden;
}
.v2-cta-primary:hover { transform:translateY(-2px); box-shadow:0 8px 40px rgba(0,200,224,0.4); }
.v2-cta-primary svg { transition:transform var(--t-fast); }
.v2-cta-primary:hover svg { transform:translateX(4px); }
.v2-cta-secondary {
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 24px; border-radius:var(--r-full);
  font-size:16px; font-weight:600; color:var(--text-secondary);
  border:1px solid var(--border-1); transition:all var(--t-base);
}
.v2-cta-secondary:hover { color:var(--text-primary); border-color:var(--border-2); background:rgba(255,255,255,0.04); transform:translateY(-1px); }
.v2-play-ring { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--border-1); font-size:10px; transition:all var(--t-fast); }
.v2-cta-secondary:hover .v2-play-ring { background:rgba(255,255,255,0.1); border-color:var(--border-2); }

.v2-hero-stats { display:flex; align-items:center; animation:v2FadeInUp .7s var(--ease-out) .55s both; }
.v2-hero-stat { padding:0 24px; }
.v2-hero-stat:first-child { padding-left:0; }
.v2-stat-number { font-size:28px; font-weight:800; color:var(--text-primary); letter-spacing:-.03em; line-height:1; margin-bottom:4px; }
.v2-stat-number .v2-count { display:inline; }
.v2-stat-plus { font-size:18px; color:var(--cyan); font-weight:700; }
.v2-stat-label { font-size:11px; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.v2-stat-divider { width:1px; height:36px; background:var(--border-1); flex-shrink:0; }

/* Hero Visual */
.v2-hero-visual {
  position:relative; display:flex; align-items:center; justify-content:center;
  animation:v2FadeInRight .9s var(--ease-out) .2s both;
}
.v2-card-stack { position:relative; width:400px; height:480px; }

.v2-device {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:220px; z-index:5;
  animation:v2DeviceFloat 6s ease-in-out infinite;
}
.v2-device-screen {
  background:#1d3d4f; border-radius:18px; overflow:hidden;
  border:1px solid rgba(91,143,160,0.35);
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.v2-ds-header { background:#152d3c; padding:10px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid rgba(255,255,255,0.06); }
.v2-ds-dot { width:10px; height:10px; border-radius:50%; }
.v2-ds-dot.r{background:#ff5f57;} .v2-ds-dot.y{background:#febc2e;} .v2-ds-dot.g{background:#28c840;}
.v2-ds-title { margin-left:auto; font-size:11px; color:rgba(255,255,255,0.5); font-weight:600; }
.v2-ds-body { padding:20px; text-align:center; }
.v2-ds-logo { width:44px; height:44px; border-radius:12px; background:var(--grad-cta); color:#fff; font-weight:900; font-size:22px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.v2-ds-score { font-size:28px; font-weight:900; color:#fff; letter-spacing:-.03em; }
.v2-ds-label { font-size:11px; color:rgba(255,255,255,0.5); margin-bottom:16px; text-transform:uppercase; letter-spacing:.08em; }
.v2-ds-chart { display:flex; align-items:flex-end; justify-content:center; gap:6px; height:60px; }
.v2-dc-bar { flex:1; background:linear-gradient(to top,var(--cyan),var(--blue)); border-radius:4px 4px 0 0; position:relative; max-width:28px; animation:v2BarGrow 1.5s var(--ease-out) .8s both; }
.v2-dc-bar span { position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:10px; color:rgba(255,255,255,0.5); font-weight:600; }

.v2-sfc {
  position:absolute; background:var(--glass-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:var(--r-lg);
  padding:12px 14px; min-width:130px; box-shadow:var(--shadow-md); z-index:6;
}
.v2-sfc-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.v2-sfc-icon { font-size:20px; }
.v2-sfc-label { font-size:13px; font-weight:600; color:var(--text-primary); }
.v2-sfc-bar-track { height:3px; background:var(--border-1); border-radius:2px; overflow:hidden; }
.v2-sfc-bar-fill { height:100%; background:var(--grad-cta); border-radius:2px; animation:v2BarGrow 1.2s var(--ease-out) 1s both; }
.v2-sfc-1 { top:0; left:-20px; animation:v2Float1 7s ease-in-out infinite; }
.v2-sfc-2 { top:0; right:-20px; animation:v2Float2 8s ease-in-out infinite; animation-delay:-2s; }
.v2-sfc-3 { bottom:60px; left:-30px; animation:v2Float1 9s ease-in-out infinite; animation-delay:-4s; }
.v2-sfc-4 { bottom:20px; right:-20px; animation:v2Float2 7.5s ease-in-out infinite; animation-delay:-3s; }

.v2-ai-badge {
  position:absolute; top:-20px; right:20px; z-index:7;
  background:linear-gradient(135deg,rgba(91,143,160,0.15),rgba(45,110,138,0.1));
  border:1px solid rgba(91,143,160,0.4); border-radius:var(--r-full);
  padding:6px 14px; font-size:12px; font-weight:700; color:#2d6e8a;
  display:flex; align-items:center; gap:6px;
  animation:v2Float2 5s ease-in-out infinite;
}
.v2-ai-pulse { width:8px; height:8px; border-radius:50%; background:#5b8fa0; animation:v2Pulse 1.5s ease-in-out infinite; }

.v2-hero-scroll {
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-muted); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  animation:v2FadeIn 1s var(--ease-out) 1.5s both;
}
.v2-scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,transparent,var(--text-muted)); animation:v2ScrollPulse 2s ease-in-out infinite; }

/* Hero keyframes */
@keyframes v2FadeInDown  { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes v2FadeInUp    { from{opacity:0;transform:translateY(24px)}  to{opacity:1;transform:translateY(0)} }
@keyframes v2FadeInRight { from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:translateX(0)} }
@keyframes v2FadeIn      { from{opacity:0} to{opacity:1} }
@keyframes v2DeviceFloat { 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-12px)} }
@keyframes v2Float1 { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(0deg)} }
@keyframes v2Float2 { 0%,100%{transform:translateY(0) rotate(2deg)} 50%{transform:translateY(-14px) rotate(-1deg)} }
@keyframes v2BarGrow { from{transform:scaleY(0);transform-origin:bottom} to{transform:scaleY(1);transform-origin:bottom} }
@keyframes v2ScrollPulse { 0%,100%{opacity:.4;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(.8)} }
@keyframes v2Pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.85)} }

/* -- 9. SKILLS 3D SECTION ----------------------------------- */
.v2-skills-3d-section {
  background: linear-gradient(160deg, #1a3a4f 0%, #0f2535 100%);
  padding: 100px 0 80px;
  position: relative; z-index: 1;
}
.v2-skills-3d-grid {
  max-width: 1200px; margin: 0 auto;
  padding: 20px 48px 60px;
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 28px;
  perspective: 2000px;
  overflow: visible;
}

/* -- Card base -- */
.v2-skill-3d {
  position: relative;
  height: 210px;
  border-radius: 22px;
  overflow: visible;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.38);
  transform-style: preserve-3d;
  transition: 0.9s cubic-bezier(0.2,0.8,0.2,1);
  cursor: pointer;
  z-index: 1;
}
.v2-skill-3d::before {
  content: ''; position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(135deg,rgba(91,143,160,0.35),rgba(255,255,255,0.02));
  opacity: 0; transition: 0.9s;
}
.v2-skill-3d.active {
  transform: scale(1.12) rotateX(8deg) rotateY(-10deg) translateY(-18px);
  z-index: 20;
  background: rgba(255,255,255,0.14);
  box-shadow: 0 70px 130px rgba(0,0,0,0.6);
}
.v2-skill-3d.active::before { opacity: 1; }
.v2-skill-3d.dimmed {
  opacity: 0.45; filter: brightness(0.65);
  transform: scale(0.97);
}

/* -- Title -- */
.v2-3d-title {
  position: absolute; left: 26px; top: 26px;
  color: #fff; font-size: 26px; font-weight: 700; letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 10px;
  transition: 0.85s cubic-bezier(0.2,0.8,0.2,1);
}
.v2-3d-icon { font-size: 24px; }
.v2-skill-3d.active .v2-3d-title { transform: translateZ(45px); }

/* -- Details -- */
.v2-3d-details {
  position: absolute; left: 26px; top: 86px;
  width: calc(100% - 175px);
  opacity: 0; color: rgba(255,255,255,0.9); line-height: 1.6;
  transform: translateX(-28px);
  transition: 0.85s cubic-bezier(0.2,0.8,0.2,1);
  pointer-events: none;
}
.v2-3d-details p    { font-size: 13px; margin-bottom: 10px; }
.v2-3d-phases       { font-size: 11px; font-weight: 700; color: #add8e6; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 12px; }
.v2-3d-cta {
  display: inline-block; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(91,143,160,0.5); border: 1px solid rgba(255,255,255,0.25);
  padding: 5px 14px; border-radius: 99px; text-decoration: none; transition: background 0.2s;
}
.v2-3d-cta:hover { background: rgba(91,143,160,0.8); }
.v2-skill-3d.active .v2-3d-details { opacity: 1; transform: translateX(0); pointer-events: auto; }

/* -- Image -- */
.v2-3d-img {
  position: absolute; width: 140px; height: 140px;
  right: 20px; top: 28px;
  border-radius: 18px; overflow: hidden;
  transform-style: preserve-3d;
  transition: 1s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
}
.v2-3d-img img { width:100%; height:100%; object-fit:cover; display:block; }
.v2-skill-3d.active .v2-3d-img {
  transform: translateZ(120px) rotate(-6deg) scale(1.2);
  right: 8px; top: -32px;
}

/* -- Ground shadow -- */
.v2-3d-shadow {
  position: absolute; width: 70%; height: 28px;
  background: #000; opacity: 0.2; filter: blur(18px);
  bottom: -22px; left: 50%; transform: translateX(-50%);
  border-radius: 50%; transition: 0.9s;
}
.v2-skill-3d.active .v2-3d-shadow { width: 95%; opacity: 0.5; }

@media (max-width:960px) { .v2-skills-3d-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px) {
  .v2-skills-3d-grid { grid-template-columns:1fr; padding:20px 20px 50px; }
  .v2-skill-3d { height:180px; }
  .v2-skill-3d.active { transform:scale(1.05) rotateX(4deg) rotateY(-6deg) translateY(-10px); }
  .v2-3d-img { width:110px; height:110px; }
}

/* -- 10. LEVELS SECTION ------------------------------------- */
.v2-levels-inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:72px; align-items:center;
}
.v2-levels-list { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.v2-level-item {
  display:flex; align-items:center; gap:16px;
  padding:14px 16px; background:var(--border-0);
  border:1px solid var(--border-1); border-radius:var(--r-md);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.v2-level-item:hover { border-color:var(--border-2); background:var(--glass-bg); }
.v2-level-badge {
  width:56px; height:36px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; letter-spacing:.05em; flex-shrink:0;
}
.v2-ge01  { background:rgba(16,185,129,.15);  color:#34d399; border:1px solid rgba(16,185,129,.3); }
.v2-ge02  { background:rgba(59,130,246,.15);   color:#60a5fa; border:1px solid rgba(59,130,246,.3); }
.v2-ge03  { background:rgba(139,92,246,.15);   color:#a78bfa; border:1px solid rgba(139,92,246,.3); }
.v2-ielts { background:rgba(245,158,11,.15);   color:#fbbf24; border:1px solid rgba(245,158,11,.3); }
.v2-level-info strong { display:block; font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.v2-level-info span   { font-size:13px; color:var(--text-secondary); }

.v2-levels-visual { display:flex; align-items:center; justify-content:center; }
.v2-level-path { display:flex; flex-direction:column; align-items:center; gap:0; position:relative; padding:20px 0; }
.v2-lp-cap { width:60px; height:60px; border-radius:50%; border:2px solid var(--border-2); background:var(--bg-elevated); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; position:relative; z-index:2; }
.v2-lp-start { color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.v2-lp-end   { font-size:24px; border-color:var(--gold); background:rgba(245,158,11,.1); }
.v2-lp-track { position:relative; display:flex; flex-direction:column; align-items:center; padding:12px 0; }
.v2-lp-line { position:absolute; width:2px; top:0; bottom:0; left:50%; transform:translateX(-50%); background:linear-gradient(to bottom,var(--border-2),var(--gold)); }
.v2-lp-node {
  position:relative; z-index:1; width:84px; height:46px; border-radius:var(--r-full);
  background:var(--bg-elevated); border:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--text-secondary);
  margin:10px 0; transition:all var(--t-base);
  animation:v2LevelPop .6s var(--ease-spring) calc(var(--i)*0.12s + .3s) both;
}
.v2-lp-node:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,200,224,.06); }
.v2-lp-node.gold  { border-color:var(--gold); color:var(--gold); background:rgba(245,158,11,.06); }
@keyframes v2LevelPop { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:scale(1)} }

/* -- 11. LIBRARY SHELF (dark-theme overrides) --------------- */
.v2-library-section { position:relative; z-index:1; padding:100px 0; }
.v2-library-wrap {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.06), transparent 48%),
    linear-gradient(160deg, #0d2033, #091520 60%, #060f1c);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-lg);
  position: relative;
  margin-top: 38px;
  padding: 24px 54px 30px;
}
/* Category tabs */
.v2-library-wrap .library-category-tab {
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.85) !important;
  font-family: 'Inter', sans-serif !important;
}
.v2-library-wrap .library-category-tab.active {
  background: rgba(91,143,160,.2) !important;
  border-color: rgba(91,143,160,.6) !important;
  color: #fff !important;
}
/* Modal dark */
.library-modal-card {
  background: #0f1a2e !important;
  border: 1px solid var(--border-2);
}
.library-modal-topic { color: var(--text-primary) !important; font-family: 'Inter', sans-serif !important; }
.library-modal-desc  { color: var(--text-secondary) !important; }
.library-modal-close { background: var(--border-1) !important; color: var(--text-secondary) !important; }
.library-modal-read  { background: var(--cyan) !important; color: var(--bg-base) !important; font-family: 'Inter', sans-serif !important; }
.library-modal-cover { background: var(--bg-elevated) !important; }
.library-page-indicator { font-family: 'Inter', sans-serif !important; }

/* -- 11b. WHY SECTION --------------------------------------- */
.v2-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.v2-why-grid .v2-section-sub { max-width: 100%; margin-bottom: 28px; }
.v2-why-chips { display:flex; flex-wrap:wrap; gap:10px; }
.v2-chip {
  font-size: 12px; font-weight: 700;
  color: var(--cyan); background: rgba(0,200,224,0.08);
  border: 1px solid rgba(0,200,224,0.25);
  border-radius: var(--r-full); padding: 5px 14px;
  letter-spacing: .04em;
}
.v2-why-img-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
}
.v2-why-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@media (max-width:900px) {
  .v2-why-grid { grid-template-columns:1fr; gap:40px; }
  .v2-why-img-wrap { max-width:480px; }
}

/* -- 12. PROOF STRIP ---------------------------------------- */
.v2-proof-strip { position:relative; z-index:1; padding:48px 0; border-top:1px solid rgba(91,143,160,0.15); background:#eaf4f8; }
.v2-proof-text { text-align:center; font-size:17px; color:var(--text-muted); line-height:1.6; }
.v2-proof-text strong { color:var(--text-secondary); }

/* -- 13. CTA SECTION ---------------------------------------- */
.v2-cta-bg {
  background:
    linear-gradient(135deg, rgba(30,65,90,0.88) 0%, rgba(37,78,99,0.84) 100%),
    url('/why.jpg') center / cover no-repeat;
  background-attachment: fixed;
}
.v2-cta-section { position:relative; z-index:1; padding:100px 32px; }
.v2-cta-box {
  max-width:860px; margin:0 auto; position:relative;
  background:var(--glass-bg); border:1px solid var(--border-1);
  border-radius:var(--r-2xl); padding:80px 64px; text-align:center;
  overflow:hidden; backdrop-filter:blur(16px);
}
.v2-cta-glow { position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(91,143,160,.2),transparent 60%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; animation:orbFloat 12s ease-in-out infinite alternate; }
.v2-cta-eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#add8e6; margin-bottom:12px; }
.v2-cta-headline { font-size:clamp(28px,4vw,52px); font-weight:900; letter-spacing:-.03em; color:#fff; margin-bottom:16px; }
.v2-cta-sub { font-size:17px; color:rgba(255,255,255,0.8); line-height:1.6; max-width:520px; margin:0 auto 40px; }
.v2-cta-btns { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.v2-cta-btn-primary { padding:15px 34px; border-radius:var(--r-full); font-size:16px; font-weight:700; color:var(--bg-card); background:#add8e6; transition:all var(--t-base); }
.v2-cta-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 40px rgba(91,143,160,.4); }
.v2-cta-btn-secondary { padding:15px 28px; border-radius:var(--r-full); font-size:16px; font-weight:600; color:rgba(255,255,255,0.85); border:1px solid rgba(255,255,255,0.35); transition:all var(--t-base); }
.v2-cta-btn-secondary:hover { color:#fff; border-color:rgba(255,255,255,0.7); background:rgba(255,255,255,.08); }

/* -- 14. FOOTER --------------------------------------------- */
.v2-footer { position:relative; z-index:1; background:#254e63; }
.v2-skyline { line-height:0; }
.v2-skyline svg { width:100%; height:110px; display:block; }
.v2-footer-body { padding:72px 32px 40px; background:#254e63; }
.v2-footer-inner {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 2fr;
  gap:72px; padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:32px;
}
.v2-footer-brand { max-width:300px; }
.v2-footer-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:#fff; margin-bottom:16px; transition:opacity var(--t-fast); }
.v2-footer-logo:hover { opacity:.8; }
.v2-footer-logo img { width:34px; height:34px; object-fit:contain; border-radius:8px; }
.v2-footer-tagline { font-size:14px; color:rgba(255,255,255,0.6); line-height:1.6; margin-bottom:24px; }
.v2-footer-social { display:flex; gap:10px; }
.v2-social-link {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.6); transition:all var(--t-base);
}
.v2-social-link svg { width:17px; height:17px; }
.v2-social-link:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.3); color:#fff; transform:translateY(-2px); }

.v2-footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.v2-footer-col h4 { font-size:12px; font-weight:700; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.v2-footer-col ul { display:flex; flex-direction:column; gap:10px; }
.v2-footer-col a  { font-size:14px; color:rgba(255,255,255,0.55); transition:color var(--t-fast); }
.v2-footer-col a:hover { color:#fff; }

.v2-footer-bottom {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:rgba(255,255,255,0.4); flex-wrap:wrap; gap:8px;
}

.v2-footer-stars { position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:.4; }

/* -- 15. SCROLL REVEAL -------------------------------------- */
.v2-reveal { opacity:0; transform:translateY(28px); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.v2-reveal.visible { opacity:1; transform:translateY(0); }
.v2-reveal.d1 { transition-delay:.08s; } .v2-reveal.d2 { transition-delay:.16s; }
.v2-reveal.d3 { transition-delay:.24s; } .v2-reveal.d4 { transition-delay:.32s; }
.v2-reveal.d5 { transition-delay:.40s; } .v2-reveal.d6 { transition-delay:.48s; }

/* -- 16. RESPONSIVE ----------------------------------------- */
@media (max-width:1100px) {
  .v2-skills-grid { grid-template-columns:repeat(2,1fr); }
  .v2-hero-container { gap:40px; }
}
@media (max-width:900px) {
  .v2-hero-container { grid-template-columns:1fr; }
  .v2-hero-visual { display:none; }
  .v2-hero-content { max-width:100%; }
  .v2-levels-inner { grid-template-columns:1fr; }
  .v2-levels-visual { display:none; }
  .v2-footer-inner { grid-template-columns:1fr; gap:48px; }
  .v2-footer-brand { max-width:100%; }
}
@media (max-width:768px) {
  .v2-nav-links, .v2-nav-actions { display:none; }
  .v2-nav-hamburger { display:flex; }
  .v2-skills-grid { grid-template-columns:1fr; }
  .v2-hero-headline { font-size:42px; }
  .v2-hero-ctas { flex-direction:column; align-items:flex-start; }
  .v2-hero-stats { flex-wrap:wrap; gap:20px; }
  .v2-stat-divider { display:none; }
  .v2-footer-links { grid-template-columns:repeat(2,1fr); }
  .v2-footer-bottom { flex-direction:column; text-align:center; }
  .v2-cta-box { padding:48px 24px; }
  .v2-library-wrap { padding-left:48px; padding-right:48px; }
}
@media (max-width:480px) {
  .v2-footer-links { grid-template-columns:1fr; }
  .v2-library-wrap { padding-left:42px; padding-right:42px; }
}