/* =========================================
   Dark Code - Clean & Fully Responsive CSS
   ========================================= */

/* ── CSS Variables ── */
:root {
    --primary:    #6c63ff;
    --secondary:  #4a44c6;
    --accent:     #ff6584;
    --accent2:    #2ecc71;
    --accent3:    #f39c12;
    --dark:       #0f0f1a;
    --darker:     #070711;
    --light:      #f5f5f7;
    --gray:       #8a8a9c;

    --gradient:  linear-gradient(135deg, var(--primary),  var(--secondary));
    --gradient2: linear-gradient(135deg, var(--accent),   #e74c3c);
    --gradient3: linear-gradient(135deg, var(--accent2),  #27ae60);
    --gradient4: linear-gradient(135deg, var(--accent3),  #e67e22);

    --shadow:    0 8px  25px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.40);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--darker);
    color: var(--light);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ── Accessibility ── */
.sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* ── Layout ── */
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* =====================
   HEADER & NAVIGATION
   ===================== */
header {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(15, 15, 26, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: var(--transition);
}
header.scrolled {
    background: rgba(10, 10, 18, 0.98);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

/* Logo */
.logo {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
    padding: 8px 12px; border-radius: 12px;
    transition: 0.3s ease-in-out;
}
.logo:hover { transform: translateY(-2px); }

.logo-icon img {
    width: 45px; height: 45px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: 0.4s ease-in-out;
}
.logo:hover .logo-icon img {
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 6px 15px rgba(0,128,128,0.5);
}

.logo-text {
    font-size: 29px; font-weight: 700;
    color: teal; letter-spacing: 1px;
    animation: fadeSlide 1s ease forwards;
    transition: 0.4s ease-in-out;
}
.logo:hover .logo-text {
    color: #009f9f;
    text-shadow: 0 2px 10px rgba(0,255,255,0.4);
    transform: translateX(3px);
}

@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Nav Links */
.nav-links {
    display: flex; align-items: center; gap: 30px;
    list-style: none;
}
.nav-link {
    color: var(--light); text-decoration: none;
    font-weight: 500; position: relative;
    padding: 8px 0; display: flex; align-items: center; gap: 5px;
    transition: var(--transition);
}
.nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--gradient);
    border-radius: 2px; transition: var(--transition);
}
.nav-link:hover { color: var(--primary); }
.nav-link:hover::after { width: 100%; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-content {
    position: absolute; top: 100%; left: 0;
    background: rgba(15,15,26,0.95); backdrop-filter: blur(15px);
    min-width: 220px; padding: 15px 0; border-radius: 12px;
    box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.1);
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition); z-index: 1001;
}
.dropdown:hover .dropdown-content {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-content li { padding: 10px 25px; transition: var(--transition); }
.dropdown-content li:hover { background: rgba(108,99,255,0.1); }
.dropdown-content a {
    color: var(--light); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
    transition: var(--transition);
}
.dropdown-content a:hover { color: var(--primary); padding-left: 5px; }

/* Search */
.search-wrapper {
    display: flex; align-items: center; gap: 8px;
    margin-left: 16px; position: relative;
}
.search-toggle {
    background: transparent; border: none;
    color: var(--light); font-size: 1.05rem;
    padding: 8px; border-radius: 8px;
    cursor: pointer; transition: var(--transition);
}
.search-toggle:hover { color: var(--primary); transform: translateY(-2px); }

.search-form {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 6px 8px; border-radius: 12px;
    transition: var(--transition);
}
.search-input {
    background: transparent; border: none; outline: none;
    color: var(--light); width: 220px; font-size: 0.95rem; padding: 6px 4px;
}
.search-submit {
    background: var(--primary); border: none; color: white;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Menu Toggle (mobile) */
.menu-toggle {
    display: none; font-size: 1.5rem; cursor: pointer;
    background: var(--gradient);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    transition: var(--transition);
    border: none;
}
.menu-toggle:hover { transform: scale(1.1); }

/* =====================
   BUTTONS
   ===================== */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px;
    background: var(--gradient); color: white;
    border: none; border-radius: 30px;
    font-weight: 600; font-size: 1rem;
    text-decoration: none; cursor: pointer;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow); transition: var(--transition);
}
.btn::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: var(--transition);
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn:hover::before { left: 100%; }

.btn-primary  { background: var(--gradient); }
.btn-secondary {
    background: transparent;
    border: 2px solid var(--primary);
}
.btn-secondary:hover { background: rgba(108,99,255,0.1); }

/* =====================
   BANNER
   ===================== */
.banner {
    min-height: 100vh; display: flex; align-items: center;
    position: relative; padding-top: 80px;
}
.banner-content {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center;
}
.banner-title {
    font-size: 3.5rem; font-weight: 700;
    line-height: 1.2; margin-bottom: 20px;
}
.title-line { display: block; }
.title-highlight {
    background: var(--gradient);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    position: relative;
}
.title-highlight::after {
    content: ''; position: absolute; bottom: -5px; left: 0;
    width: 100%; height: 3px;
    background: var(--gradient); border-radius: 2px;
}
.banner-subtitle {
    font-size: 1.2rem; color: var(--gray);
    margin-bottom: 35px; line-height: 1.7;
}
.banner-buttons { display: flex; gap: 20px; margin-bottom: 50px; }
.banner-stats   { display: flex; gap: 40px; }

.stat { text-align: center; }
.stat-number {
    font-size: 2.2rem; font-weight: 700;
    background: var(--gradient);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}
.stat-label { color: var(--gray); font-size: 0.9rem; }

/* =====================
   ANIMATION SECTION
   ===================== */
.animation-section {
    display: flex; flex-direction: column;
    align-items: center; gap: 30px;
}
.animation-container {
    width: 300px; height: 400px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.character {
    position: relative; width: 150px; height: 300px;
    display: flex; flex-direction: column; align-items: center;
    transition: transform 0.3s ease;
}
.head {
    width: 70px; height: 70px;
    background: var(--gradient); border-radius: 50%;
    position: relative; z-index: 10;
    box-shadow: 0 5px 15px rgba(108,99,255,0.4);
    transition: all 0.3s ease;
}
.head::after {
    content: ''; position: absolute; top: 20px; left: 15px;
    width: 15px; height: 15px; background: white;
    border-radius: 50%; box-shadow: 25px 0 0 white;
}
.head::before {
    content: ''; position: absolute; top: 45px; left: 25px;
    width: 20px; height: 8px; background: var(--accent); border-radius: 4px;
}
.body {
    width: 80px; height: 120px;
    background: var(--gradient); border-radius: 40px 40px 10px 10px;
    margin-top: -10px; position: relative; z-index: 5;
    box-shadow: 0 5px 15px rgba(108,99,255,0.3);
    transition: all 0.3s ease;
}
.left-arm, .right-arm {
    position: absolute; width: 20px; height: 80px;
    background: var(--gradient); border-radius: 10px; top: 70px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.left-arm  { left:  -25px; transform-origin: top right; }
.right-arm { right: -25px; transform-origin: top left; }
.left-leg, .right-leg {
    position: absolute; width: 25px; height: 90px;
    background: var(--secondary); border-radius: 12px 12px 5px 5px;
    bottom: -90px; transition: all 0.4s ease;
}
.left-leg  { left:  15px; transform-origin: top center; }
.right-leg { right: 15px; transform-origin: top center; }

.animation-controls {
    display: flex; gap: 15px; flex-wrap: wrap; justify-content: center;
}
.control-btn {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 15px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px; color: var(--light);
    cursor: pointer; min-width: 80px;
    box-shadow: var(--shadow); transition: var(--transition);
}
.control-btn:hover {
    background: rgba(108,99,255,0.2);
    border-color: var(--primary); transform: translateY(-3px);
}
.control-btn.active { background: var(--gradient); border-color: transparent; }
.control-btn i    { font-size: 1.5rem; margin-bottom: 5px; }
.control-btn span { font-size: 0.8rem; font-weight: 600; }

.character.dancing .head     { animation: headDance  0.5s ease-in-out infinite alternate; }
.character.dancing .body     { animation: bodyDance  0.5s ease-in-out infinite alternate; }
.character.dancing .left-arm { animation: armDanceLeft  0.5s ease-in-out infinite alternate; }
.character.dancing .right-arm{ animation: armDanceRight 0.5s ease-in-out infinite alternate; }
.character.dancing .left-leg { animation: legDanceLeft  0.5s ease-in-out infinite alternate; }
.character.dancing .right-leg{ animation: legDanceRight 0.5s ease-in-out infinite alternate; }
.character.waving .right-arm { animation: waveArm  1s ease-in-out infinite; }
.character.waving .head      { animation: headTilt 1s ease-in-out infinite; }
.character.jumping           { animation: jump 0.8s ease-in-out infinite; }
.character.jumping .left-leg,
.character.jumping .right-leg{ animation: legsJump 0.8s ease-in-out infinite; }
.character.coding .left-arm  { transform: rotate(-45deg) translateY(10px); }
.character.coding .right-arm { transform: rotate(45deg)  translateY(10px); }
.character.coding .head      { animation: headNod 1s ease-in-out infinite alternate; }

@keyframes headDance     { 0%{transform:rotate(-5deg);}  100%{transform:rotate(5deg);} }
@keyframes bodyDance     { 0%{transform:rotate(-3deg);}  100%{transform:rotate(3deg);} }
@keyframes armDanceLeft  { 0%{transform:rotate(-30deg);} 100%{transform:rotate(10deg);} }
@keyframes armDanceRight { 0%{transform:rotate(30deg);}  100%{transform:rotate(-10deg);} }
@keyframes legDanceLeft  { 0%{transform:rotate(-15deg);} 100%{transform:rotate(5deg);} }
@keyframes legDanceRight { 0%{transform:rotate(15deg);}  100%{transform:rotate(-5deg);} }
@keyframes waveArm  {
    0%,100%{transform:rotate(0deg);}
    25%    {transform:rotate(-90deg);}
    50%    {transform:rotate(-60deg);}
    75%    {transform:rotate(-90deg);}
}
@keyframes headTilt { 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(10deg);} }
@keyframes jump     { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-40px);} }
@keyframes legsJump { 0%,100%{transform:rotate(0deg);}    50%{transform:rotate(-20deg);} }
@keyframes headNod  { 0%{transform:translateY(0);}       100%{transform:translateY(5px);} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }

/* =====================
   SECTIONS
   ===================== */
.section { padding: 100px 0; position: relative; }
.section-content {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center;
}
.reverse      { direction: rtl; }
.reverse > *  { direction: ltr; }
.section-text { padding: 20px 0; }

.section-title {
    font-size: 2.8rem; font-weight: 700; margin-bottom: 20px;
    background: linear-gradient(135deg, var(--light) 0%, var(--gray) 100%);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: fadeInUp 0.8s ease-out;
}
.section-subtitle {
    font-size: 1.1rem; color: var(--gray);
    margin-bottom: 30px; line-height: 1.7;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}
.section-visual {
    display: flex; justify-content: center; align-items: center; height: 400px;
}

/* =====================
   FEATURES
   ===================== */
.features, .game-features { margin-bottom: 30px; }

.feature {
    display: flex; align-items: flex-start; gap: 15px; margin-bottom: 25px;
}
.feature i {
    width: 45px; height: 45px; background: var(--gradient);
    border-radius: 10px; display: flex; align-items: center;
    justify-content: center; font-size: 1.2rem; color: white; flex-shrink: 0;
}
.feature h3 { font-size: 1.2rem; margin-bottom: 5px; }
.feature p  { color: var(--gray); font-size: 0.9rem; }

.game-feature {
    display: flex; align-items: flex-start;
    padding: 1.5rem; margin-bottom: 25px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; backdrop-filter: blur(10px);
    transition: var(--transition);
}
.game-feature:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(108,99,255,0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.game-feature i {
    font-size: 1.8rem; padding: 0.8rem; border-radius: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white; min-width: 50px; text-align: center;
    transition: var(--transition);
}
.game-feature:hover i { transform: scale(1.1) rotate(5deg); }
.game-feature h3 { font-size: 1.3rem; font-weight: 600; color: white; margin-bottom: 0.5rem; }
.game-feature p  { color: var(--light); line-height: 1.5; margin: 0; }

/* =====================
   LANGUAGES GRID
   ===================== */
.languages-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.lang-card {
    background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 15px;
    padding: 25px; text-align: center; transition: var(--transition);
}
.lang-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow); border-color: var(--primary);
}
.lang-icon {
    width: 70px; height: 70px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin: 0 auto 15px; color: white;
}
.lang-icon.python { background: #3776AB; }
.lang-icon.js     { background: #F7DF1E; color: #000; }
.lang-icon.java   { background: #007396; }
.lang-icon.html   { background: #E34F26; }
.lang-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.lang-card p  { color: var(--gray); font-size: 0.9rem; }

/* =====================
   SKILLS PROGRESS
   ===================== */
.skills-progress { margin-bottom: 30px; }
.skill            { margin-bottom: 20px; }
.skill-info {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 8px;
}
.skill-info span:first-child { font-weight: 600; }
.skill-info span:last-child  { color: var(--primary); font-weight: 600; }
.skill-bar {
    width: 100%; height: 8px;
    background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;
}
.skill-progress {
    height: 100%; background: var(--gradient);
    border-radius: 4px; width: 0;
    transition: width 1.5s ease-in-out;
}
.more-skills {
    display: flex; align-items: center; gap: 8px;
    padding: 10px; color: var(--gray); font-size: 0.9rem;
}
.more-skills i { color: var(--primary); }

/* =====================
   SKILLS ANIMATION (Orbs)
   ===================== */
.skills-animation {
    position: relative; width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.skills-animation::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(108,99,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,101,132,0.1) 0%, transparent 50%);
    border-radius: 50%; animation: backgroundShift 10s ease-in-out infinite;
}

.skill-orb {
    position: absolute; width: 70px; height: 70px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: white;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: var(--shadow); cursor: pointer;
    animation: orbFloat 8s ease-in-out infinite;
    z-index: 10; transition: var(--transition);
}
.skill-orb:hover { transform: scale(1.2); box-shadow: 0 15px 35px rgba(0,0,0,0.4); }
.skill-orb:hover .orb-glow { opacity: 1; transform: scale(1.5); }
.orb-glow {
    position: absolute; inset: 0; border-radius: 50%;
    background: inherit; filter: blur(15px);
    opacity: 0.5; z-index: -1; transition: var(--transition);
}

.orb-1 { background: linear-gradient(135deg,#667eea,#764ba2); top:15%; left:15%; animation-delay:0s; }
.orb-2 { background: linear-gradient(135deg,#f093fb,#f5576c); top:15%; right:15%; animation-delay:1.5s; }
.orb-3 { background: linear-gradient(135deg,#4facfe,#00f2fe); bottom:15%; left:15%; animation-delay:3s; }
.orb-4 { background: linear-gradient(135deg,#43e97b,#38f9d7); bottom:15%; right:15%; animation-delay:4.5s; }
/* FIX #4: orb-5 and orb-6 previously had `transform: translateY(-50%)` which conflicts
   with the orbFloat keyframe animation (both set `transform`). Removed inline transform
   and used top + margin-top trick instead to vertically center them. */
.orb-5 { background: linear-gradient(135deg,#00B4DB,#0083B0); top:calc(50% - 35px); left:5%; animation-delay:6s; }
.orb-6 { background: linear-gradient(135deg,#FF6B6B,#FF8E8E); top:calc(50% - 35px); right:5%; animation-delay:7.5s; }

.central-orb {
    position: absolute; top:50%; left:50%;
    transform: translate(-50%,-50%);
    width: 90px; height: 90px; border-radius: 50%;
    background: linear-gradient(135deg,#667eea,#764ba2);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: white;
    box-shadow: 0 0 30px rgba(102,126,234,0.6), inset 0 2px 0 rgba(255,255,255,0.3);
    animation: centralSpin 15s linear infinite; z-index: 5;
}

.pulse-ring {
    position: absolute; top:50%; left:50%;
    transform: translate(-50%,-50%);
    width: 120px; height: 120px;
    border: 2px solid rgba(102,126,234,0.4); border-radius: 50%;
    animation: pulse 3s ease-out infinite;
}
.ring-2 { width:150px; height:150px; animation-delay:1.5s; }

.connection-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(108,99,255,0.3), transparent);
    height: 2px; transform-origin: left center; z-index: 1;
}
.line-1 { top:50%; left:50%; width:120px; transform:translate(0,-50%) rotate(45deg);  animation:lineGlow 4s ease-in-out infinite; }
.line-2 { top:50%; left:50%; width:120px; transform:translate(0,-50%) rotate(135deg); animation:lineGlow 4s ease-in-out infinite 1s; }
.line-3 { top:50%; left:50%; width:120px; transform:translate(0,-50%) rotate(225deg); animation:lineGlow 4s ease-in-out infinite 2s; }
.line-4 { top:50%; left:50%; width:120px; transform:translate(0,-50%) rotate(315deg); animation:lineGlow 4s ease-in-out infinite 3s; }

@keyframes orbFloat {
    0%,100%{ transform:translate(0,0)       scale(1)    rotate(0deg); }
    25%    { transform:translate(20px,-30px) scale(1.1)  rotate(5deg); }
    50%    { transform:translate(-15px,20px) scale(0.95) rotate(-5deg); }
    75%    { transform:translate(10px,25px)  scale(1.05) rotate(3deg); }
}
@keyframes centralSpin    { to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes pulse          { 0%{transform:translate(-50%,-50%) scale(0.8); opacity:1;} 100%{transform:translate(-50%,-50%) scale(1.3); opacity:0;} }
@keyframes lineGlow       { 0%,100%{opacity:0.3;} 50%{opacity:1; background:linear-gradient(90deg,transparent,rgba(108,99,255,0.8),transparent);} }
@keyframes backgroundShift{ 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} }

/* =====================
   GAME SECTION
   ===================== */
.game-animation {
    position: relative; width: 400px; height: 400px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 20px;
    background: rgba(255,255,255,0.05); backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.game-animation::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(108,99,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(255,209,102,0.1) 0%, transparent 50%);
    animation: backgroundRotate 15s linear infinite;
}

.game-controller {
    position: relative; font-size: 6rem; color: #fee140;
    animation: gameBounce 3s ease-in-out infinite; z-index: 10;
    text-shadow: 0 0 20px rgba(255,209,102,0.5);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}
.controller-glow {
    position: absolute; top:50%; left:50%;
    transform: translate(-50%,-50%);
    width:120px; height:120px;
    background: #fee140; border-radius: 50%; filter: blur(30px);
    opacity: 0.3; animation: glowPulse 2s ease-in-out infinite; z-index: -1;
}

.controller-light {
    position: absolute; width:12px; height:12px;
    border-radius: 50%; animation: lightBlink 1.5s ease-in-out infinite;
}
.light-1 { top:25%; left:30%;  background:#ff6584; animation-delay:0s; }
.light-2 { top:25%; right:30%; background:#6c63ff; animation-delay:0.5s; }
.light-3 { bottom:25%; left:50%; transform:translateX(-50%); background:var(--primary); animation-delay:1s; }

.game-elements { position: absolute; inset: 0; }
.game-element {
    position: absolute; width:50px; height:50px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-weight:bold; font-size:1.4rem; color:white;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    animation: elementFloat 6s ease-in-out infinite;
    cursor:pointer; z-index:5; transition: var(--transition);
}
.game-element:hover { transform: scale(1.3) !important; z-index:20; }
.element-glow {
    position:absolute; inset:0; border-radius:12px;
    background:inherit; filter:blur(15px); opacity:0.5;
    z-index:-1; transition: var(--transition);
}
.game-element:hover .element-glow { opacity:0.8; filter:blur(20px); }

.el-1 { background:linear-gradient(135deg,#667eea,#764ba2); top:15%;  right:25%;  animation-delay:0s; }
.el-2 { background:linear-gradient(135deg,#f093fb,#f5576c); bottom:25%; left:20%;  animation-delay:2s; }
.el-3 { background:linear-gradient(135deg,#4facfe,#00f2fe); top:60%;  right:15%;  animation-delay:4s; }
.el-4 { background:linear-gradient(135deg,#43e97b,#ff6584); top:25%;  left:15%;   animation-delay:1s; }
.el-5 { background:linear-gradient(135deg,#fa709a,#9D4EDD); bottom:15%; right:30%; animation-delay:3s; }

.particles { position:absolute; inset:0; }
.particle {
    position:absolute; width:6px; height:6px;
    background:#fee140; border-radius:50%;
    animation: particleFloat 8s linear infinite; opacity:0;
}
.particle:nth-child(1){top:10%; left:20%; animation-delay:0s;}
.particle:nth-child(2){top:80%; left:70%; animation-delay:1s;}
.particle:nth-child(3){top:40%; left:10%; animation-delay:2s;}
.particle:nth-child(4){top:60%; left:80%; animation-delay:3s;}
.particle:nth-child(5){top:20%; left:60%; animation-delay:4s;}
.particle:nth-child(6){top:70%; left:30%; animation-delay:5s;}
.particle:nth-child(7){top:30%; left:90%; animation-delay:6s;}
.particle:nth-child(8){top:90%; left:40%; animation-delay:7s;}

@keyframes gameBounce {
    0%,100%{ transform:translateY(0)    rotate(0deg)  scale(1); }
    25%    { transform:translateY(-25px) rotate(-5deg) scale(1.05); }
    50%    { transform:translateY(-10px) rotate(5deg)  scale(1.02); }
    75%    { transform:translateY(-20px) rotate(-3deg) scale(1.03); }
}
@keyframes elementFloat {
    0%,100%{ transform:translate(0,0)       scale(1)    rotate(0deg); }
    20%    { transform:translate(15px,-20px) scale(1.1)  rotate(10deg); }
    40%    { transform:translate(-10px,15px) scale(0.95) rotate(-5deg); }
    60%    { transform:translate(20px,10px)  scale(1.05) rotate(5deg); }
    80%    { transform:translate(-15px,-15px)scale(0.98) rotate(-8deg); }
}
@keyframes glowPulse {
    0%,100%{ opacity:0.2; transform:translate(-50%,-50%) scale(1); }
    50%    { opacity:0.4; transform:translate(-50%,-50%) scale(1.2); }
}
@keyframes lightBlink {
    0%,100%{ opacity:0.3; box-shadow:0 0 5px currentColor; }
    50%    { opacity:1;   box-shadow:0 0 15px currentColor, 0 0 25px currentColor; }
}
@keyframes particleFloat {
    0%  { transform:translate(0,0)       scale(0); opacity:0; }
    10% { transform:translate(10px,-15px) scale(1); opacity:1; }
    90% { opacity:1; }
    100%{ transform:translate(20px,-30px) scale(0); opacity:0; }
}
@keyframes backgroundRotate { to{ transform:rotate(360deg); } }

/* =====================
   QUIZ SECTION
   ===================== */
.quiz-stats { margin-bottom: 30px; }
.quiz-stat {
    display:flex; align-items:flex-start; gap:15px;
    margin-bottom:25px; animation: fadeInUp 0.8s ease-in-out 0.4s both;
}
.quiz-stat i {
    width:45px; height:45px;
    background: linear-gradient(135deg, var(--accent3), #9D4EDD);
    border-radius:10px; display:flex; align-items:center;
    justify-content:center; font-size:1.2rem; color:white; flex-shrink:0;
}

.quiz-animation {
    position:relative; width:350px; height:350px;
    display:flex; align-items:center; justify-content:center;
}
.quiz-bubble {
    position:relative; width:140px; height:140px;
    background: var(--gradient); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    animation: quizPulse 3s ease-in-out infinite;
    box-shadow: 0 0 50px rgba(108,99,255,0.5), inset 0 4px 10px rgba(255,255,255,0.2);
    z-index:10;
}
.bubble-glow {
    position:absolute; inset:0; background:var(--gradient);
    border-radius:50%; filter:blur(30px);
    opacity:0.6; animation:glowPulse 2s ease-in-out infinite; z-index:-1;
}
.question-mark {
    font-size:3rem; color:white; font-weight:bold;
    animation: quizSpin 4s linear infinite;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.thinking-dots {
    position:absolute; bottom:-40px; left:50%;
    transform:translateX(-50%); display:flex; gap:8px;
}
.dot {
    width:8px; height:8px; background:#ff6584; border-radius:50%;
    animation: thinking 1.4s ease-in-out infinite;
}
.dot:nth-child(2){ animation-delay:0.2s; }
.dot:nth-child(3){ animation-delay:0.4s; }

.quiz-options { position:absolute; inset:0; }
.quiz-option {
    position:absolute; width:50px; height:50px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:white; font-weight:bold; font-size:1.1rem;
    animation: quizOrbit 6s linear infinite;
    box-shadow: 0 0 20px rgba(78,205,196,0.4);
    cursor:pointer; z-index:5; transition: var(--transition);
}
.quiz-option:hover { transform:scale(1.3) !important; z-index:20; }
.option-glow {
    position:absolute; inset:0; border-radius:50%;
    background:inherit; filter:blur(15px);
    opacity:0.5; z-index:-1; transition: var(--transition);
}
.quiz-option:hover .option-glow { opacity:0.8; filter:blur(20px); }

.quiz-option:nth-child(1){ top:10%; left:50%; background:linear-gradient(135deg,#ff6584,#e74c3c); animation-delay:0s; }
.quiz-option:nth-child(2){ top:50%; right:10%; background:linear-gradient(135deg,#6c63ff,#764ba2); animation-delay:1.5s; }
.quiz-option:nth-child(3){ bottom:10%; left:50%; background:linear-gradient(135deg,#f39c12,#e67e22); animation-delay:3s; }
.quiz-option:nth-child(4){ top:50%; left:10%; background:linear-gradient(135deg,#2ecc71,#27ae60); animation-delay:4.5s; }

.quiz-connections { position:absolute; inset:0; }
.connection {
    position:absolute; top:50%; left:50%; height:2px;
    background: linear-gradient(90deg,transparent,rgba(108,99,255,0.3),transparent);
    transform-origin: left center;
    animation: connectionPulse 3s ease-in-out infinite;
}
.connection:nth-child(1){ width:120px; transform:translate(0,-50%) rotate(0deg);   animation-delay:0s; }
.connection:nth-child(2){ width:120px; transform:translate(0,-50%) rotate(90deg);  animation-delay:0.75s; }
.connection:nth-child(3){ width:120px; transform:translate(0,-50%) rotate(180deg); animation-delay:1.5s; }
.connection:nth-child(4){ width:120px; transform:translate(0,-50%) rotate(270deg); animation-delay:2.25s; }

@keyframes quizPulse {
    0%,100%{ transform:scale(1)   rotate(0deg); box-shadow:0 0 50px rgba(108,99,255,0.5); }
    50%    { transform:scale(1.1) rotate(5deg); box-shadow:0 0 70px rgba(108,99,255,0.7); }
}
@keyframes quizSpin {
    0%  { transform:rotate(0deg)   scale(1); }
    50% { transform:rotate(180deg) scale(1.1); }
    100%{ transform:rotate(360deg) scale(1); }
}
@keyframes quizOrbit {
    0%  { transform:translateX(-50%) rotate(0deg)   translateY(-120px) rotate(0deg); }
    100%{ transform:translateX(-50%) rotate(360deg) translateY(-120px) rotate(-360deg); }
}
@keyframes thinking {
    0%,100%{ transform:translateY(0);    opacity:0.3; }
    50%    { transform:translateY(-10px); opacity:1; }
}
@keyframes connectionPulse {
    0%,100%{ opacity:0; width:0; }
    50%    { opacity:1; width:120px; background:linear-gradient(90deg,transparent,rgba(108,99,255,0.6),transparent); }
}

/* ══════════════════════════════════════
   PDF RESOURCES SECTION
   ══════════════════════════════════════ */
.pdf-section {
    background: var(--darker);
}

.pdf-features { margin-bottom: 30px; }
.pdf-feature {
    display: flex; align-items: flex-start; gap: 15px;
    padding: 1.4rem; margin-bottom: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}
.pdf-feature:hover {
    background: rgba(108,99,255,0.1);
    border-color: rgba(108,99,255,0.3);
    transform: translateX(6px);
}
.pdf-feature i {
    width: 46px; height: 46px; min-width: 46px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: white;
}
.pdf-feature:nth-child(2) i { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.pdf-feature h3 { font-size: 1.1rem; margin-bottom: 5px; }
.pdf-feature p  { color: var(--gray); font-size: 0.9rem; line-height: 1.6; }

.pdf-animation {
    position: relative;
    width: 380px; height: 380px;
    display: flex; align-items: center; justify-content: center;
}

.pdf-doc--main {
    position: relative;
    width: 160px; height: 200px;
    background: linear-gradient(135deg, #1e1e35, #2a2a4a);
    border: 1px solid rgba(231,76,60,0.4);
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 0 40px rgba(231,76,60,0.2), 0 15px 35px rgba(0,0,0,0.4);
    z-index: 3;
    animation: pdfFloat 3.5s ease-in-out infinite;
}
.pdf-doc-header {
    display: flex; gap: 6px; margin-bottom: 14px;
}
.pdf-dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.pdf-dot.red    { background: #e74c3c; }
.pdf-dot.yellow { background: #f39c12; }
.pdf-dot.green  { background: #2ecc71; }
.pdf-doc-lines { display: flex; flex-direction: column; gap: 8px; }
.pdf-line {
    height: 8px; border-radius: 4px;
    background: rgba(255,255,255,0.12);
    animation: shimmer 2.5s ease-in-out infinite;
}
.pdf-line--title { height: 12px; background: rgba(231,76,60,0.5); }
.pdf-line.short  { width: 60%; }
.pdf-line:nth-child(2) { animation-delay: 0.3s; }
.pdf-line:nth-child(3) { animation-delay: 0.6s; }
.pdf-line:nth-child(4) { animation-delay: 0.9s; }
.pdf-line:nth-child(5) { animation-delay: 1.2s; }
.pdf-badge {
    position: absolute; bottom: -14px; right: -14px;
    width: 38px; height: 38px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: white;
    box-shadow: 0 4px 14px rgba(231,76,60,0.5);
    animation: pdfBadgePulse 2s ease-in-out infinite;
}
.pdf-doc-glow {
    position: absolute; inset: -20px;
    background: radial-gradient(circle, rgba(231,76,60,0.15) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}

.pdf-mini-card {
    position: absolute;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 30px;
    font-size: 0.78rem; font-weight: 600; color: var(--light);
    backdrop-filter: blur(10px);
    white-space: nowrap;
    z-index: 2;
}
.pdf-mini-card i { font-size: 1rem; }
.mc-1 { top: 12%;  left: -10%; animation: pdfCardFloat 4s ease-in-out infinite; }
.mc-2 { top: 12%;  right: -5%; animation: pdfCardFloat 4s ease-in-out infinite 1s; }
.mc-3 { bottom: 20%; left: -5%; animation: pdfCardFloat 4s ease-in-out infinite 2s; }
.mc-4 { bottom: 20%; right: -8%; animation: pdfCardFloat 4s ease-in-out infinite 3s; }
.mc-1 i { color: #3776AB; }
.mc-2 i { color: #F7DF1E; }
.mc-3 i { color: #00adb5; }
.mc-4 i { color: #61DAFB; }

.pdf-download-pulse {
    position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
    width: 50px; height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: white;
    box-shadow: 0 0 20px rgba(108,99,255,0.5);
    z-index: 3;
}
.pdf-download-pulse .pulse-ring {
    position: absolute; inset: -10px;
    border: 2px solid rgba(108,99,255,0.4);
    border-radius: 50%;
    animation: pulseSpin 2s ease-in-out infinite;
}
.pdf-download-pulse .ring-2 {
    inset: -20px;
    border-color: rgba(108,99,255,0.2);
    animation-delay: 0.5s;
}

.pdf-particles { position: absolute; inset: 0; pointer-events: none; }
.pdf-particles .particle {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(231,76,60,0.6);
    animation: particleDrift 5s ease-in-out infinite;
}
.pdf-particles .particle:nth-child(1){ top:15%; left:20%; animation-delay:0s; }
.pdf-particles .particle:nth-child(2){ top:25%; right:25%; animation-delay:1s; background:rgba(108,99,255,0.6); }
.pdf-particles .particle:nth-child(3){ bottom:30%; left:30%; animation-delay:2s; }
.pdf-particles .particle:nth-child(4){ bottom:15%; right:15%; animation-delay:3s; background:rgba(46,204,113,0.6); }
.pdf-particles .particle:nth-child(5){ top:50%; right:10%; animation-delay:1.5s; }

@keyframes pdfFloat {
    0%,100%{ transform: translateY(0) rotate(-2deg); }
    50%    { transform: translateY(-14px) rotate(2deg); }
}
@keyframes pdfCardFloat {
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(-8px); }
}
@keyframes pdfBadgePulse {
    0%,100%{ box-shadow: 0 4px 14px rgba(231,76,60,0.4); transform: scale(1); }
    50%    { box-shadow: 0 4px 24px rgba(231,76,60,0.7); transform: scale(1.15); }
}
@keyframes shimmer {
    0%,100%{ opacity: 0.5; }
    50%    { opacity: 1; }
}
@keyframes pulseSpin {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}
@keyframes particleDrift {
    0%,100%{ transform: translateY(0) translateX(0); opacity: 0.6; }
    50%    { transform: translateY(-20px) translateX(10px); opacity: 1; }
}


/* ══════════════════════════════════════
   ROADMAP SECTION
   ══════════════════════════════════════ */
.roadmap-section {
    background: var(--darker);
}

.roadmap-paths { margin-bottom: 30px; }
.roadmap-path {
    display: flex; align-items: flex-start; gap: 15px;
    margin-bottom: 20px;
}
.rp-icon {
    width: 46px; height: 46px; min-width: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: white;
    flex-shrink: 0;
}
.roadmap-path:nth-child(1) .rp-icon { background: linear-gradient(135deg, #6c63ff, #4a44c6); }
.roadmap-path:nth-child(2) .rp-icon { background: linear-gradient(135deg, #f39c12, #e67e22); }
.roadmap-path:nth-child(3) .rp-icon { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.roadmap-path h3 { font-size: 1.1rem; margin-bottom: 4px; }
.roadmap-path p  { color: var(--gray); font-size: 0.9rem; line-height: 1.6; }

.roadmap-animation {
    position: relative;
    width: 340px; height: 400px;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: space-between;
    padding: 20px 0;
}

.rm-spine {
    position: absolute;
    left: 22px; top: 30px; bottom: 30px;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--accent2));
    border-radius: 4px;
    opacity: 0.4;
}

.rm-step {
    position: relative;
    display: flex; align-items: center; gap: 18px;
    z-index: 2;
    animation: rmStepIn 0.6s ease-out both;
}
.rm-step--1 { animation-delay: 0.1s; }
.rm-step--2 { animation-delay: 0.3s; }
.rm-step--3 { animation-delay: 0.5s; }
.rm-step--4 { animation-delay: 0.7s; }

.rm-node {
    position: relative;
    width: 46px; height: 46px; min-width: 46px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: white;
    box-shadow: 0 0 20px rgba(108,99,255,0.5);
    z-index: 2;
    animation: rmNodePulse 3s ease-in-out infinite;
}
.rm-node--final {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    box-shadow: 0 0 20px rgba(243,156,18,0.6);
    animation: rmNodePulse 3s ease-in-out infinite;
}
.rm-node-glow {
    position: absolute; inset: -8px;
    border: 2px solid rgba(108,99,255,0.3);
    border-radius: 50%;
    animation: pulseSpin 2.5s ease-in-out infinite;
}
.rm-node--final .rm-node-glow { border-color: rgba(243,156,18,0.4); }

.rm-step-card {
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px 18px;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}
.rm-step-card:hover {
    background: rgba(108,99,255,0.1);
    border-color: rgba(108,99,255,0.3);
    transform: translateX(6px);
}
.rm-step-card--final { border-color: rgba(243,156,18,0.3); }
.rm-label    { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); }
.rm-step-card--final .rm-label { color: #f39c12; }
.rm-sublabel { font-size: 0.92rem; font-weight: 600; color: var(--light); }

.rm-progress-dot {
    position: absolute; left: 16px; top: 30px;
    width: 14px; height: 14px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,255,255,0.8);
    animation: rmDotTravel 4s ease-in-out infinite;
    z-index: 3;
}

.rm-chip {
    position: absolute;
    padding: 5px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    font-size: 0.75rem; font-weight: 600; color: var(--light);
    backdrop-filter: blur(8px);
    z-index: 2;
    animation: pdfCardFloat 4s ease-in-out infinite;
}
.chip-1 { top: 8%;  right: 0;    animation-delay: 0s; }
.chip-2 { top: 42%; right: -5%;  animation-delay: 1.2s; }
.chip-3 { bottom: 8%; right: 5%; animation-delay: 2.4s; }

@keyframes rmStepIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes rmNodePulse {
    0%,100%{ box-shadow: 0 0 20px rgba(108,99,255,0.5); }
    50%    { box-shadow: 0 0 35px rgba(108,99,255,0.9); }
}
@keyframes rmDotTravel {
    0%   { top: 30px;  opacity: 1; }
    90%  { top: calc(100% - 30px); opacity: 1; }
    100% { top: 30px;  opacity: 0; }
}


/* ══════════════════════════════════════
   SERVICES SECTION
   ══════════════════════════════════════ */
.services-section {
    padding: 100px 0 120px;
    background: var(--darker);
    position: relative;
    overflow: hidden;
}

.svc-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.svc-blob-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(108,99,255,0.12) 0%, transparent 70%);
    top: -100px; left: -150px;
    animation: blobDrift 18s ease-in-out infinite alternate;
}
.svc-blob-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,101,132,0.08) 0%, transparent 70%);
    bottom: 0; right: -100px;
    animation: blobDrift 22s ease-in-out infinite alternate-reverse;
}
.svc-blob-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(46,204,113,0.07) 0%, transparent 70%);
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    animation: blobDrift 15s ease-in-out infinite alternate;
}
@keyframes blobDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(40px, 30px) scale(1.1); }
}

.services-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}
.svc-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(108,99,255,0.12);
    border: 1px solid rgba(108,99,255,0.25);
    padding: 6px 18px;
    border-radius: 20px;
    margin-bottom: 18px;
}
.services-header .section-title { font-size: 2.8rem; margin-bottom: 16px; }
.services-header .section-subtitle { max-width: 580px; margin: 0 auto; }

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    position: relative;
    z-index: 1;
}

.svc-card {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 32px 24px 28px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}
.svc-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(108,99,255,0.5);
    box-shadow: 0 24px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(108,99,255,0.15);
}
.svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(108,99,255,0.06), transparent 60%);
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.svc-card:hover::before { opacity: 1; }

.svc-card--featured {
    border-color: rgba(108,99,255,0.35);
    background: rgba(108,99,255,0.07);
}
.svc-card--featured:hover {
    border-color: var(--primary);
    box-shadow: 0 24px 48px rgba(108,99,255,0.25), 0 0 0 1px var(--primary);
}
.svc-featured-badge {
    position: absolute;
    top: 16px; right: 16px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex; align-items: center; gap: 4px;
}

.svc-card-glow {
    position: absolute;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(108,99,255,0.25) 0%, transparent 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}
.svc-card:hover .svc-card-glow { opacity: 1; }

.svc-card-inner { position: relative; z-index: 1; }

.svc-number {
    position: absolute;
    top: -10px; right: 14px;
    font-size: 5rem;
    font-weight: 900;
    color: rgba(255,255,255,0.03);
    line-height: 1;
    user-select: none;
    transition: color 0.3s ease;
}
.svc-card:hover .svc-number { color: rgba(108,99,255,0.08); }

.svc-icon-wrap {
    position: relative;
    width: 58px; height: 58px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
}
.svc-icon-ring {
    position: absolute; inset: 0;
    border-radius: 16px;
    border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(108,99,255,0.5), rgba(255,101,132,0.3)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    transition: transform 0.4s ease;
}
.svc-card:hover .svc-icon-ring { transform: rotate(90deg) scale(1.1); }
.svc-icon-wrap > i {
    font-size: 1.6rem;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.svc-card:hover .svc-icon-wrap > i { transform: scale(1.2) rotate(-5deg); }

.svc-card[data-service="web"]      .svc-icon-wrap > i { color: #667eea; }
.svc-card[data-service="app"]      .svc-icon-wrap > i { color: #f093fb; }
.svc-card[data-service="ai"]       .svc-icon-wrap > i { color: #4facfe; }
.svc-card[data-service="security"] .svc-icon-wrap > i { color: #43e97b; }
.svc-card[data-service="cloud"]    .svc-icon-wrap > i { color: #fa709a; }
.svc-card[data-service="data"]     .svc-icon-wrap > i { color: #30cfd0; }
.svc-card[data-service="design"]   .svc-icon-wrap > i { color: #f9ca24; }

.svc-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}
.svc-card:hover .svc-body h3 { color: white; }
.svc-body p {
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.55;
    margin-bottom: 16px;
}

.svc-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 20px;
}
.svc-tags span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 3px 9px;
    border-radius: 10px;
    transition: all 0.25s ease;
}
.svc-card:hover .svc-tags span {
    color: rgba(255,255,255,0.8);
    background: rgba(108,99,255,0.15);
    border-color: rgba(108,99,255,0.3);
}

.svc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37,211,102,0.25);
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
}
.svc-cta:hover {
    background: linear-gradient(135deg, #128C7E, #075E54);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37,211,102,0.35);
}
.svc-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}
.svc-cta:hover .svc-arrow { transform: translateX(3px); }


/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
.footer {
    background: #050510;
    position: relative;
    overflow: hidden;
}

.footer-wave {
    display: block;
    line-height: 0;
    overflow: hidden;
    background: var(--darker);
}
.footer-wave svg {
    display: block;
    width: 100%; height: 80px;
}

.footer-newsletter-bar {
    background: linear-gradient(135deg, rgba(108,99,255,0.18), rgba(255,101,132,0.12));
    border-top: 1px solid rgba(108,99,255,0.2);
    border-bottom: 1px solid rgba(108,99,255,0.12);
    padding: 22px 0;
}
.newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.newsletter-text {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}
.newsletter-text i {
    color: #fee140;
    font-size: 1.1rem;
    animation: boltFlash 2.5s ease-in-out infinite;
}
@keyframes boltFlash {
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.6; transform:scale(1.2); }
}
.newsletter-form {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 40px;
    padding: 4px 4px 4px 16px;
    min-width: 340px;
    transition: border-color 0.3s ease;
}
.newsletter-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.15);
}
.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 0.9rem;
    padding: 8px 0;
}
.newsletter-form input::placeholder { color: var(--gray); }
.newsletter-form button {
    background: var(--gradient);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.newsletter-form button:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(108,99,255,0.35);
}

.footer-body { padding: 70px 0 50px; }
.footer-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1.2fr;
    gap: 50px;
}

.footer-brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 20px;
}
.footer-brand-logo img {
    width: 48px; height: 48px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.4s ease;
}
.footer-brand-logo:hover img { transform: rotate(10deg) scale(1.1); }
.footer-brand-logo span {
    font-size: 1.6rem;
    font-weight: 800;
    color: teal;
    letter-spacing: 0.5px;
}
.footer-tagline {
    font-size: 0.9rem;
    color: var(--gray);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 300px;
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.f-social {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
    overflow: hidden;
}
.f-social:hover { transform: translateY(-4px) scale(1.1); }

.f-social--fb { background: rgba(24,119,242,0.15); border: 1px solid rgba(24,119,242,0.3); }
.f-social--fb:hover { background: #1877f2; border-color: #1877f2; box-shadow: 0 8px 20px rgba(24,119,242,0.4); }
.f-social--wa { background: rgba(37,211,102,0.15); border: 1px solid rgba(37,211,102,0.3); }
.f-social--wa:hover { background: #25D366; border-color: #25D366; box-shadow: 0 8px 20px rgba(37,211,102,0.4); }
.f-social--ig { background: rgba(193,53,132,0.15); border: 1px solid rgba(193,53,132,0.3); }
.f-social--ig:hover { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; box-shadow: 0 8px 20px rgba(193,53,132,0.4); }
.f-social--li { background: rgba(10,102,194,0.15); border: 1px solid rgba(10,102,194,0.3); }
.f-social--li:hover { background: #0a66c2; border-color: #0a66c2; box-shadow: 0 8px 20px rgba(10,102,194,0.4); }
.f-social--gh { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
.f-social--gh:hover { background: #333; border-color: #666; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }

.footer-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.f-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    font-size: 0.72rem;
    color: var(--gray);
    transition: all 0.3s ease;
}
.f-stat-pill:hover {
    background: rgba(108,99,255,0.1);
    border-color: rgba(108,99,255,0.25);
    transform: translateY(-2px);
}
.f-stat-n {
    font-size: 1.1rem;
    font-weight: 800;
    background: var(--gradient);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 2px;
}

.footer-col-title {
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-col-title i { color: var(--primary); font-size: 0.9rem; }

.footer-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-nav-list a {
    color: var(--gray);
    text-decoration: none;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.25s ease;
}
.footer-nav-list a i {
    font-size: 0.6rem;
    color: transparent;
    transition: all 0.25s ease;
}
.footer-nav-list a:hover {
    color: white;
    padding-left: 6px;
}
.footer-nav-list a:hover i {
    color: var(--primary);
}
.footer-badge {
    font-size: 0.65rem;
    background: linear-gradient(135deg, var(--accent3), #e67e22);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    margin-left: 4px;
}

.footer-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.f-contact-icon {
    width: 36px; height: 36px;
    background: rgba(108,99,255,0.12);
    border: 1px solid rgba(108,99,255,0.2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.footer-contact-list li:hover .f-contact-icon {
    background: var(--primary);
    color: white;
    transform: scale(1.1) rotate(-5deg);
}
.footer-contact-list > li > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.f-contact-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray);
    font-weight: 600;
}
.footer-contact-list span,
.footer-contact-list a {
    font-size: 0.87rem;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-contact-list a:hover { color: white; }

.footer-bottom-bar {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 22px 0;
    background: rgba(0,0,0,0.25);
}
.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-copy {
    font-size: 0.82rem;
    color: var(--gray);
}
.footer-copy strong { color: rgba(255,255,255,0.7); }
.footer-made {
    font-size: 0.82rem;
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 6px;
}
.footer-made i { color: var(--accent); animation: heartBeat 1.8s ease-in-out infinite; }
@keyframes heartBeat {
    0%,100%{ transform:scale(1); }
    14%    { transform:scale(1.3); }
    28%    { transform:scale(1); }
    42%    { transform:scale(1.3); }
    70%    { transform:scale(1); }
}
.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
}
.footer-legal-links a {
    color: var(--gray);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-legal-links a:hover { color: var(--primary); }
.footer-legal-links span { color: rgba(255,255,255,0.2); }

/* =====================
   RESPONSIVE – 1200px
   ===================== */
@media (max-width: 1200px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid   { grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
    .footer-col--brand { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
    .footer-tagline { max-width: 100%; }
}
/* ===== SCROLL TO TOP BUTTON ===== */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #6c5ce7, #a363d9);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(2px);
}

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.scroll-top-btn:hover {
    transform: translateY(-5px);
    background: linear-gradient(135deg, #5a4ad4, #8f4bc7);
    box-shadow: 0 12px 28px rgba(108, 92, 231, 0.5);
}

.scroll-top-btn:active {
    transform: translateY(0px);
}

.scroll-top-btn i {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

@media (max-width: 768px) {
    .scroll-top-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
        bottom: 20px;
        right: 20px;
    }
}

/* =====================
   RESPONSIVE – 1024px
   ===================== */
@media (max-width: 1024px) {
    .banner-content,
    .section-content  { grid-template-columns: 1fr; gap: 40px; }
    .banner-title     { font-size: 3rem; }
    .services-grid    { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .footer-grid      { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-col--brand { grid-column: 1 / -1; display: block; }
}

/* =====================
   RESPONSIVE – 768px
   ===================== */
@media (max-width: 768px) {
    .nav-links {
        position: fixed; top: 80px; left: 0; width: 100%;
        background: rgba(15,15,26,0.98); backdrop-filter: blur(15px);
        flex-direction: column; padding: 20px; gap: 15px;
        transform: translateY(-100%); opacity: 0; visibility: hidden;
        transition: var(--transition);
        border-top: 1px solid rgba(255,255,255,0.05);
        z-index: 999;
    }
    .nav-links.active { transform: translateY(0); opacity: 1; visibility: visible; }
    .menu-toggle      { display: block; }
    .logo-text        { font-size: 1.5rem; }
    .search-form {
        position: absolute; top: 56px; right: 10px;
        width: calc(100% - 40px); max-width: 420px;
        opacity: 0; visibility: hidden;
        transform: translateY(-6px) scale(0.98);
        pointer-events: none; z-index: 1100;
    }
    .search-wrapper.active .search-form {
        opacity: 1; visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .search-input { width: 100%; }
    .banner-title     { font-size: 2.5rem; }
    .section-title    { font-size: 2.2rem; }
    .banner-buttons   { flex-direction: column; }
    .languages-grid   { grid-template-columns: 1fr; }
    .banner-stats     { gap: 20px; }
    .animation-controls { gap: 10px; }
    .control-btn        { padding: 12px; min-width: 70px; }
    .skills-animation,
    .game-animation { width: 320px; height: 320px; }
    .quiz-animation { width: 300px; height: 300px; }
    .section-visual { height: auto; padding: 20px 0; }

    .pdf-animation   { width: 300px; height: 300px; }
    .roadmap-animation { width: 280px; height: 360px; }
    .mc-1, .mc-2, .mc-3, .mc-4 { font-size: 0.72rem; padding: 6px 10px; }
    .rm-step-card { padding: 8px 14px; }
    .rm-sublabel  { font-size: 0.85rem; }

    .services-section { padding: 70px 0 80px; }
    .services-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .svc-card { padding: 24px 18px 22px; }
    .svc-number { font-size: 3.5rem; }

    .newsletter-inner { flex-direction: column; align-items: flex-start; }
    .newsletter-form { min-width: unset; width: 100%; }

    .footer-body { padding: 50px 0 40px; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-col--brand { display: block; }
    .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
}

/* =====================
   RESPONSIVE – 480px
   ===================== */
@media (max-width: 480px) {
    .banner-title  { font-size: 2rem; }
    .section-title { font-size: 1.8rem; }
    .btn { padding: 12px 24px; }
    .section-visual     { height: 300px; }
    .animation-container{ width: 250px; height: 350px; }
    .character          { transform: scale(0.9); }
    .skills-animation,
    .game-animation     { width: 260px; height: 260px; }
    .quiz-animation  { width: 260px; height: 260px; }
    .quiz-bubble     { width: 110px; height: 110px; }
    .question-mark   { font-size: 2.5rem; }
    .quiz-option     { width: 40px; height: 40px; font-size: 1rem; }
    .banner-stats    { flex-wrap: wrap; justify-content: center; gap: 15px; }
    .stat-number     { font-size: 1.8rem; }
    .footer { padding: 0; }

    .pdf-animation   { width: 260px; height: 260px; }
    .pdf-doc--main   { width: 130px; height: 165px; }
    .mc-1, .mc-3     { left: -2%; }
    .mc-2, .mc-4     { right: -2%; }
    .roadmap-animation { width: 240px; height: 320px; }
    .rm-chip         { display: none; }
    .rm-step-card    { padding: 6px 12px; }
    .rm-sublabel     { font-size: 0.8rem; }
    .footer-body { padding: 40px 0 30px; }

    .services-grid { grid-template-columns: 1fr; gap: 14px; }
    .svc-card { padding: 24px 20px; }
    .services-header .section-title { font-size: 2rem; }
}

/* =====================
   RESPONSIVE – 360px
   ===================== */
@media (max-width: 360px) {
    .banner-title    { font-size: 1.7rem; }
    .section-title   { font-size: 1.5rem; }
    .logo-text       { font-size: 1.2rem; }
    .skills-animation,
    .game-animation  { width: 220px; height: 220px; }
    .quiz-animation  { width: 220px; height: 220px; }
    .quiz-bubble     { width: 90px; height: 90px; }
    .question-mark   { font-size: 2rem; }
    .control-btn     { min-width: 60px; padding: 10px 8px; }
    .btn             { padding: 10px 18px; font-size: 0.9rem; }

    .pdf-animation   { width: 200px; height: 220px; }
    .pdf-doc--main   { width: 115px; height: 145px; padding: 12px; }
    .roadmap-animation { width: 210px; }
    .rm-node         { width: 38px; height: 38px; min-width: 38px; font-size: 0.85rem; }
}



/* ═══════════════════════════════════════════
   FOUNDER / CEO SECTION
   ═══════════════════════════════════════════ */
.founder-section {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--darker) 0%, rgba(108,99,255,0.04) 50%, var(--darker) 100%);
}
.founder-bg-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(108,99,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.founder-wrapper {
    display: flex;
    align-items: center;
    gap: 70px;
    justify-content: center;
}
 
/* ── Photo side ── */
.founder-photo-wrap {
    position: relative;
    flex-shrink: 0;
    width: 280px; height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.founder-photo-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: ring-spin 8s linear infinite;
}
.founder-ring-1 {
    inset: -20px;
    border-color: rgba(108,99,255,0.4) transparent transparent transparent;
    animation-duration: 6s;
}
.founder-ring-2 {
    inset: -36px;
    border-color: transparent rgba(255,101,132,0.3) transparent transparent;
    animation-duration: 10s;
    animation-direction: reverse;
}
.founder-ring-3 {
    inset: -52px;
    border-color: rgba(46,204,113,0.2) transparent rgba(46,204,113,0.2) transparent;
    animation-duration: 14s;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
 
.founder-photo-frame {
    width: 260px; height: 260px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(108,99,255,0.6);
    box-shadow: 0 0 40px rgba(108,99,255,0.35), 0 0 80px rgba(108,99,255,0.15);
    position: relative;
    z-index: 2;
}
.founder-photo {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}
.founder-photo-frame:hover .founder-photo { transform: scale(1.05); }
.founder-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(108,99,255,0.25));
    pointer-events: none;
}
.founder-badge {
    position: absolute;
    bottom: 10px; right: 10px;
    width: 46px; height: 46px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    z-index: 3;
    box-shadow: 0 4px 15px rgba(243,156,18,0.5);
    animation: badge-pulse 2.5s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%,100% { box-shadow: 0 4px 15px rgba(243,156,18,0.5); }
    50%      { box-shadow: 0 4px 30px rgba(243,156,18,0.8), 0 0 0 8px rgba(243,156,18,0.1); }
}
.founder-float-tag {
    position: absolute;
    background: rgba(108,99,255,0.15);
    border: 1px solid rgba(108,99,255,0.4);
    color: #a9a4ff;
    font-size: 0.72rem;
    font-family: 'Courier New', monospace;
    padding: 5px 10px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    z-index: 3;
    animation: float-tag 4s ease-in-out infinite;
}
.f-tag-1 { top: 10px; right: -30px; animation-delay: 0s; }
.f-tag-2 { bottom: 30px; left: -40px; animation-delay: 2s; }
@keyframes float-tag {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
 
/* ── Info side ── */
.founder-info {
    max-width: 520px;
}
.founder-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(108,99,255,0.1);
    border: 1px solid rgba(108,99,255,0.25);
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 16px;
}
.founder-name {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    background: linear-gradient(135deg, #fff 30%, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.15;
    margin-bottom: 6px;
}
.founder-title {
    font-size: 0.95rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.founder-bio {
    color: rgba(245,245,247,0.75);
    line-height: 1.8;
    font-size: 0.97rem;
    margin-bottom: 28px;
}
 
/* Stats row */
.founder-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.f-stat { text-align: center; }
.f-stat-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
.f-stat-lbl {
    font-size: 0.75rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.f-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.1);
}
 
/* Social buttons */
.founder-socials {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.f-social-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #fff;
    text-decoration: none;
    transition: var(--transition);
}
.f-fb  { background: #1877f2; }
.f-li  { background: #0a66c2; }
.f-wa  { background: #25d366; }
.f-em  { background: var(--primary); }
.f-social-btn:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
 
/* CTA button */
.btn-founder {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: var(--transition);
    box-shadow: 0 6px 25px rgba(108,99,255,0.4);
    position: relative;
    overflow: hidden;
}
.btn-founder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.btn-founder:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(108,99,255,0.55); }
.btn-founder:hover::before { opacity: 1; }
 
/* ═══════════════════════════════════════════
   SANTO MODAL
   ═══════════════════════════════════════════ */
.santo-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.santo-modal.is-open {
    opacity: 1;
    pointer-events: all;
}
.santo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 7, 17, 0.88);
    backdrop-filter: blur(10px);
    cursor: pointer;
}
.santo-modal-box {
    position: relative;
    z-index: 1;
    width: min(96vw, 960px);
    height: min(92vh, 750px);
    background: #0f0f1a;
    border-radius: 20px;
    border: 1px solid rgba(108,99,255,0.3);
    box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(108,99,255,0.15);
    overflow: hidden;
    transform: translateY(30px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
    opacity: 0;
    display: flex;
    flex-direction: column;
}
.santo-modal.is-open .santo-modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.santo-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
}
.santo-modal-close:hover { background: rgba(255,101,132,0.3); transform: scale(1.1) rotate(90deg); }
.santo-modal-iframe-wrap {
    flex: 1;
    overflow: hidden;
}
.santo-iframe {
    width: 100%; height: 100%;
    border: none;
    display: block;
    background: #070711;
}
 
/* ── Responsive Founder ── */
@media (max-width: 820px) {
    .founder-wrapper {
        flex-direction: column;
        gap: 44px;
        text-align: center;
    }
    .founder-stats { justify-content: center; }
    .founder-socials { justify-content: center; }
    .btn-founder { margin: 0 auto; }
    .f-tag-1 { right: -10px; }
    .f-tag-2 { left: -10px; }
}
@media (max-width: 480px) {
    .founder-photo-wrap { width: 220px; height: 220px; }
    .founder-photo-frame { width: 200px; height: 200px; }
}


/* .nb {
  width: 100%;
  height: 42px;
  background: #0d0d12;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nb-msg {
  position: absolute;
  left: 40px;
  right: 40px;
  text-align: center;
  font-size: clamp(14px, 2.5vw, 16px);
  color: rgba(200, 195, 230, 0.8);
  letter-spacing: 0.015em;
  opacity: 0;
  transform: translateY(40px);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-msg.show {
  opacity: 1;
  transform: translateY(0);
}
.nb-msg.hide {
  opacity: 0;
  transform: translateY(-36px);
  transition: transform 0.4s ease-in, opacity 0.3s ease;
}
.nb-msg strong {
  color: #a89cf7;
  font-weight: 600;
}
.nb-line-wrap {
  position: absolute;
  bottom: 0;
  left: 370px;
  right: 320px;
  height: 2px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.nb-line {
  height: 100%;
  width: 0%;
  background: #6c5ce7;
  border-radius: 2px;
}

@media (max-width: 480px) {
  .nb-msg {
    left: 20px;
    right: 20px;
    white-space: normal;
    line-height: 1.4;
    font-size: 11.5px;
  }
  .nb {
    height: auto;
    min-height: 42px;
    padding: 8px 0;
  }
  .nb-line-wrap {
    left: 20px;
    right: 20px;
  }
} */