/* ============================================
   Nawres Mechergui Portfolio - Modern Dual Theme
   ============================================ */

/* ===== Light Theme (default fallback) ===== */
:root {
    --primary: #6366f1;
    --secondary: #06b6d4;
    --accent: #14b8a6;
    --primary-light: #4f46e5;

    --bg-dark: #f8fafc;
    --bg-card: rgba(255,255,255,0.7);
    --bg-card-hover: rgba(255,255,255,0.95);
    --bg-glass: rgba(255,255,255,0.6);
    --input-bg: rgba(0,0,0,0.03);
    --progress-track: rgba(15,23,42,0.08);
    --gradient-opacity: 0.08;

    --border: rgba(15,23,42,0.08);
    --border-hover: rgba(99,102,241,0.3);

    --text-main: #0f172a;
    --text-dim: #475569;
    --text-muted: #94a3b8;

    --shadow: 0 10px 30px rgba(2,6,23,0.08);
    --shadow-glow: 0 0 30px rgba(99,102,241,0.12);

    --transition: all 0.5s cubic-bezier(0.23,1,0.32,1);
    --radius: 20px;
    --radius-lg: 30px;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
    --primary: #818cf8;
    --secondary: #22d3ee;
    --accent: #2dd4bf;
    --primary-light: #a5b4fc;

    --bg-dark: #0a0a0f;
    --bg-card: rgba(255,255,255,0.03);
    --bg-card-hover: rgba(255,255,255,0.06);
    --bg-glass: rgba(10,10,15,0.7);
    --input-bg: rgba(0,0,0,0.25);
    --progress-track: rgba(255,255,255,0.08);
    --gradient-opacity: 0.12;

    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(99,102,241,0.4);

    --text-main: #f8fafc;
    --text-dim: #94a3b8;
    --text-muted: #64748b;

    --shadow: 0 10px 30px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 30px rgba(99,102,241,0.2);
}

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

body {
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: "Inter", sans-serif;
      line-height: 1.6;
    overflow-x:hidden;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(99,102,241,var(--gradient-opacity)), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(6,182,212,var(--gradient-opacity)), transparent 40%);
    transition: background-color .5s ease, color .5s ease;
}
h1 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -1px;
}

::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg-dark); transition:background-color .5s ease; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--primary),var(--secondary)); border-radius:10px; }

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* --- Navigation --- */
.navbar {
    position:fixed; top:18px; left:50%; transform:translateX(-50%);
    width:min(1180px,94%);
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px 12px 20px; z-index:1000; transition:var(--transition);
    background:var(--bg-glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--border); border-radius:100px; box-shadow:var(--shadow);
}
.navbar.scrolled {
    top:10px; padding:8px 14px 8px 18px; box-shadow:var(--shadow-glow), var(--shadow);
}
.logo {
    display:flex; align-items:center; gap:10px;
    font-weight:800; font-size:1.3rem; letter-spacing:-1px;
    color:var(--text-main); text-decoration:none; transition:color .5s ease;
}
.logo-badge {
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:1rem;
    box-shadow:0 4px 14px rgba(99,102,241,0.4);
}
.logo span {
    background:linear-gradient(135deg,#38bdf8,#c084fc,#f97316);
    background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
nav { display:flex; align-items:center; gap:2px; background:var(--bg-card); padding:6px; border-radius:100px; border:1px solid var(--border); }
nav a {
    color:var(--text-dim); text-decoration:none; font-size:.85rem; font-weight:600;
    padding:10px 16px; border-radius:100px; transition:var(--transition); white-space:nowrap;
}
nav a:hover { color:var(--text-main); background:var(--bg-card-hover); }

.mobile-menu-btn {
    display:none; background:none; border:none; color:var(--text-main);
    font-size:1.5rem; cursor:pointer; z-index:1001; transition:color .5s ease;
}
.mobile-menu {
    position:fixed; top:0; right:-100%; width:70%; max-width:300px; height:100vh;
    background:var(--bg-glass); backdrop-filter:blur(20px);
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:30px;
    z-index:999; transition:var(--transition); border-left:1px solid var(--border);
}
.mobile-menu.active { right:0; }
.mobile-menu a { color:var(--text-dim); text-decoration:none; font-size:1.2rem; font-weight:600; transition:var(--transition); }
.mobile-menu a:hover { color:var(--primary); }

/* --- Language Toggle --- */
.lang-toggle {
    width:44px; height:44px; border-radius:50%; background:var(--bg-card);
    border:1px solid var(--border); color:var(--text-main); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:var(--transition); position:relative; overflow:hidden;
    margin-right:10px; backdrop-filter:blur(10px); font-weight:700; font-size:.85rem;
    letter-spacing:1px;
}
.lang-toggle:hover { transform:scale(1.1); border-color:var(--border-hover); box-shadow:var(--shadow-glow); }
.lang-toggle .lang-label { pointer-events:none; }

/* --- Theme Toggle --- */
.theme-toggle {
    width:44px; height:44px; border-radius:50%; background:var(--bg-card);
    border:1px solid var(--border); color:var(--text-main); cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
    transition:var(--transition); position:relative; overflow:hidden;
    margin-right:15px; backdrop-filter:blur(10px);
}
.theme-toggle:hover { transform:scale(1.1) rotate(15deg); border-color:var(--border-hover); box-shadow:var(--shadow-glow); }
.theme-toggle .fa-sun, .theme-toggle .fa-moon { position:absolute; transition:all .5s cubic-bezier(0.23,1,0.32,1); }

[data-theme="dark"] .theme-toggle .fa-sun { transform:translateY(0) rotate(0); opacity:1; }
[data-theme="dark"] .theme-toggle .fa-moon { transform:translateY(30px) rotate(90deg); opacity:0; }
[data-theme="light"] .theme-toggle .fa-moon { transform:translateY(0) rotate(0); opacity:1; }
[data-theme="light"] .theme-toggle .fa-sun { transform:translateY(30px) rotate(-90deg); opacity:0; }

/* --- Hero --- */
.hero {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden; padding:150px 8% 80px;
    background:
        radial-gradient(circle at 12% 20%, rgba(124,58,237,calc(var(--gradient-opacity) * 2)), transparent 45%),
        radial-gradient(circle at 88% 80%, rgba(6,182,212,calc(var(--gradient-opacity) * 1.6)), transparent 45%),
        radial-gradient(circle at 50% 30%, rgba(167,139,250,calc(var(--gradient-opacity) * 1.2)), transparent 55%);
    transition:background .5s ease;
}

/* Animated background glow blobs */
.hero-bg-glow { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.glow-blob { position:absolute; border-radius:50%; filter:blur(75px); opacity:.55; }
.blob-1 { width:420px; height:420px; top:-12%; left:-8%; background:radial-gradient(circle, rgba(124,58,237,.55), transparent 70%); animation:blobDrift 22s ease-in-out infinite; }
.blob-2 { width:380px; height:380px; bottom:-14%; right:-6%; background:radial-gradient(circle, rgba(56,189,248,.45), transparent 70%); animation:blobDrift 26s ease-in-out infinite -6s; }
.blob-3 { width:300px; height:300px; top:32%; left:42%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); animation:blobDrift 20s ease-in-out infinite -3s; }
@keyframes blobDrift {
    0%,100% { transform:translate(0,0) scale(1); }
    33% { transform:translate(30px,-25px) scale(1.08); }
    66% { transform:translate(-25px,20px) scale(.95); }
}

#particles { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.hero-container { position:relative; z-index:2; display:grid; grid-template-columns:1fr .85fr 1fr; gap:40px; align-items:center; max-width:1400px; margin:0 auto; width:100%; }

/* Glass cards for text content */
.hero-content, .hero-about {
    background:var(--bg-glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:38px 34px; box-shadow:var(--shadow); transition:var(--transition);
}
.hero-content:hover, .hero-about:hover { border-color:var(--border-hover); }

.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:50px; background:var(--bg-card); border:1px solid var(--border); color:var(--primary-light); font-size:.8rem; font-weight:600; margin-bottom:18px; }
.hero-badge i { font-size:.8rem; }
.hero-greeting { font-size:1.1rem; color:var(--primary-light); font-weight:600; margin-bottom:15px; letter-spacing:2px; text-transform:uppercase; transition:color .5s ease; }
.hero-title { font-size:clamp(2.2rem,4.2vw,3.4rem); font-weight:800; line-height:1.1; margin-bottom:20px; color:var(--text-main); letter-spacing:-1px; transition:color .5s ease; }
.gradient-text { background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.typing { font-size:1.2rem; color:var(--text-dim); min-height:32px; margin-bottom:18px; font-weight:600; transition:color .5s ease; }
.hero-tagline { font-size:1rem; color:var(--text-muted); margin-bottom:35px; max-width:440px; transition:color .5s ease; }
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }

.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:16px 32px; border-radius:50px; font-weight:600; font-size:.92rem;
    text-decoration:none; transition:var(--transition); cursor:pointer; border:none; font-family:inherit;
}
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:white; box-shadow:0 10px 25px rgba(99,102,241,0.25); }
.btn-primary:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 14px 32px rgba(99,102,241,0.4), 0 0 0 4px rgba(99,102,241,0.12); }
.btn-outline { background:transparent; color:var(--text-main); border:2px solid var(--border); transition:var(--transition); }
.btn-outline:hover { border-color:var(--primary); background:rgba(124,58,237,0.1); transform:translateY(-2px); box-shadow:0 0 0 4px rgba(124,58,237,0.1); }

/* --- Profile / Avatar showcase --- */
.hero-image { position:relative; display:flex; justify-content:center; align-items:center; min-height:380px; }

.hero-flow-lines { position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px); z-index:0; pointer-events:none; opacity:.55; }
.flow-path { fill:none; stroke:url(#flowGrad); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:8 10; animation:flowDash 6s linear infinite; }
.flow-path-2 { animation-duration:9s; animation-direction:reverse; opacity:.7; }
@keyframes flowDash { to { stroke-dashoffset:-200; } }

.code-particle {
    position:absolute; font-family:'Courier New',monospace; font-size:.85rem; font-weight:700;
    color:var(--primary-light); opacity:.45; z-index:1; pointer-events:none;
    animation:codeFloat 6s ease-in-out infinite;
}
.cp-1 { top:8%; left:-4%; animation-delay:0s; }
.cp-2 { bottom:12%; left:-9%; animation-delay:1.2s; }
.cp-3 { top:16%; right:-7%; animation-delay:.6s; color:var(--secondary); }
.cp-4 { bottom:20%; right:-3%; animation-delay:1.8s; }
@keyframes codeFloat {
    0%,100% { transform:translateY(0) rotate(0deg); opacity:.3; }
    50% { transform:translateY(-14px) rotate(-4deg); opacity:.7; }
}

.profile-parallax { position:relative; z-index:2; }

.profile-halo {
    position:absolute; inset:-34px; border-radius:50%; z-index:0;
    background:radial-gradient(circle, rgba(167,139,250,.4), rgba(56,189,248,.18) 50%, transparent 72%);
    filter:blur(42px); animation:haloPulse 4s ease-in-out infinite;
}
@keyframes haloPulse {
    0%,100% { transform:scale(1); opacity:.7; }
    50% { transform:scale(1.12); opacity:1; }
}

.profile-wrapper {
    position:relative; z-index:1; width:300px; height:300px; overflow:hidden;
    border:3px solid rgba(124,58,237,0.15);
    box-shadow:0 0 30px rgba(0,245,255,0.3), 0 0 60px rgba(168,85,247,0.2);
    animation:blobMorph 14s ease-in-out infinite, float 8s ease-in-out infinite;
}
.profile-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.profile-ring {
    position:absolute; top:-14px; left:-14px; right:-14px; bottom:-14px; border-radius:50%; z-index:2;
    border:2px solid transparent;
    background:conic-gradient(from 0deg,var(--primary),var(--secondary),var(--accent),var(--primary)) border-box;
    -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.65; animation:rotate 10s linear infinite;
}
@keyframes blobMorph {
    0%,100% { border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; }
    25% { border-radius:58% 42% 38% 62% / 55% 45% 55% 45%; }
    50% { border-radius:45% 55% 65% 35% / 40% 62% 38% 60%; }
    75% { border-radius:62% 38% 45% 55% / 60% 40% 60% 40%; }
}
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes rotate { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* Hero - About Me mini panel */
.hero-about { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:10px; }
.hero-about-tag { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:50px; background:var(--bg-card); border:1px solid var(--border); color:var(--primary-light); font-size:.8rem; font-weight:600; margin-bottom:5px; }
.hero-about-title { font-size:1.7rem; font-weight:800; color:var(--text-main); }
.hero-about-text { font-size:.95rem; color:var(--text-dim); line-height:1.7; max-width:300px; margin-bottom:8px; }
.hero-cv-btn { padding:14px 28px; font-size:.88rem; }

/* Scroll Indicator */
.scroll-indicator { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2; opacity:.7; animation:bounce 2s infinite; }
.scroll-mouse { width:24px; height:40px; border:2px solid var(--text-dim); border-radius:12px; display:flex; justify-content:center; padding-top:8px; }
.scroll-wheel { width:4px; height:8px; background:var(--text-dim); border-radius:2px; animation:scrollWheel 2s infinite; }
.scroll-indicator span { font-size:.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:2px; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-10px);} }
@keyframes scrollWheel { 0%{transform:translateY(0);opacity:1;} 100%{transform:translateY(12px);opacity:0;} }

@media (prefers-reduced-motion:reduce) {
    .glow-blob, .profile-wrapper, .profile-ring, .profile-halo, .flow-path, .code-particle, .scroll-indicator { animation:none !important; }
}

/* --- Sections --- */
section { padding:100px 8%; position:relative; }
.section-title { font-size:clamp(2rem,4vw,3rem); font-weight:800; margin-bottom:60px; text-align:center; }

/* --- About --- */
.about-wrapper { display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; max-width:1100px; margin:0 auto; }
.about-image { display:flex; flex-direction:column; align-items:center; gap:25px; }
.about-img-box { position:relative; width:260px; height:260px; }
.about-img { width:100%; height:100%; object-fit:cover; border-radius:24px; position:relative; z-index:2; border:3px solid rgba(124,58,237,0.15); box-shadow:0 20px 50px rgba(0,0,0,0.3), 0 0 40px rgba(124,58,237,0.08); }
.about-img-ring { position:absolute; top:-10px; left:-10px; right:-10px; bottom:-10px; border-radius:30px; border:2px solid transparent; background:linear-gradient(135deg,var(--primary),var(--secondary)) border-box; -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.3; animation:rotate 45s linear infinite; }
.about-signature { display:flex; flex-direction:column; align-items:center; gap:8px; }
.signature-svg { width:160px; height:48px; }
.signature-name { font-size:.85rem; color:var(--text-dim); font-weight:500; letter-spacing:2px; text-transform:uppercase; opacity:.7; }
.about-content { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.about-label { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:5px; }
.about-tag { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:50px; background:var(--bg-card); border:1px solid var(--border); color:var(--primary-light); font-size:.85rem; font-weight:600; transition:var(--transition); }
.about-tag:hover { background:rgba(124,58,237,0.1); border-color:var(--border-hover); transform:translateY(-2px); }
.about-tag i { font-size:.8rem; }
.about-title { font-size:1.8rem; font-weight:700; line-height:1.3; color:var(--text-main); margin-bottom:5px; }
.about-para { font-size:1.05rem; color:var(--text-dim); line-height:1.8; }
.about-stats { display:flex; gap:35px; margin-top:10px; padding-top:25px; border-top:1px solid var(--border); width:100%; }
.stat-item { display:flex; flex-direction:column; gap:6px; }
.stat-num { font-size:2rem; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.stat-label { font-size:.85rem; color:var(--text-muted); font-weight:500; }
.about-btn { margin-top:10px; gap:10px; }
.about-btn i { font-size:.85rem; transition:var(--transition); }
.about-btn:hover i { transform:translateX(4px); }

/* --- Education Timeline --- */
.timeline { max-width:800px; margin:0 auto; position:relative; padding-left:40px; }
.timeline::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--primary),var(--secondary)); }
.timeline-item { position:relative; margin-bottom:50px; padding-left:40px; }
.timeline-item:last-child { margin-bottom:0; }
.timeline-dot { position:absolute; left:-35px; top:5px; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary)); border:3px solid var(--bg-dark); box-shadow:0 0 0 3px rgba(124,58,237,0.3); }
.timeline-content { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:30px; transition:var(--transition); }
.timeline-content:hover { background:var(--bg-card-hover); border-color:var(--border-hover); transform:translateX(3px); }
.timeline-content h3 { font-size:1.3rem; margin-bottom:8px; color:var(--text-main); }
.timeline-subtitle { display:block; color:var(--primary-light); font-weight:600; font-size:.95rem; margin-bottom:12px; }
.timeline-content p { color:var(--text-dim); font-size:.95rem; line-height:1.7; }

/* --- Skills --- */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:25px; max-width:1100px; margin:0 auto; }
.skill-category { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:35px; transition:var(--transition); }
.skill-category:hover { background:var(--bg-card-hover); border-color:var(--border-hover); transform:translateY(-3px); box-shadow:var(--shadow-glow); }
.skill-category-header { display:flex; align-items:center; gap:12px; margin-bottom:25px; }
.skill-category-header i { font-size:1.5rem; color:var(--primary); }
.skill-category-header h3 { font-size:1.2rem; font-weight:700; }
.skill-item { margin-bottom:18px; }
.skill-item:last-child { margin-bottom:0; }
.skill-item span { display:block; font-size:.9rem; color:var(--text-dim); margin-bottom:8px; font-weight:500; }
.progress-bar { height:6px; background:var(--progress-track); border-radius:10px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--secondary)); width:0; border-radius:10px; transition:width 1.5s cubic-bezier(0.1,1,0.1,1); }

/* --- Projects --- */
.projects-container { display:flex; flex-direction:column; gap:80px; max-width:1100px; margin:0 auto; }
.project-card { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; position:relative; transform-style:preserve-3d; perspective:1000px; transition:transform .2s ease; will-change:transform; }
.project-card:hover { background:var(--bg-card-hover); border-color:var(--border-hover); transform:translateY(-3px); box-shadow:var(--shadow-glow); }
.project-card.reverse { direction:rtl; }
.project-card.reverse .project-info { direction:ltr; }
.project-card.featured { position:relative; border:2px solid transparent; background:linear-gradient(var(--bg-dark),var(--bg-dark)) padding-box, linear-gradient(135deg,var(--primary),var(--secondary)) border-box; }
.featured-badge { position:absolute; top:-15px; right:30px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:white; padding:8px 20px; border-radius:50px; font-size:.85rem; font-weight:700; display:flex; align-items:center; gap:8px; box-shadow:0 5px 20px rgba(124,58,237,0.3); }
.project-img { width:100%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.project-img img { width:100%; height:280px; object-fit:cover; transition:var(--transition); display:block; }
.project-card:hover .project-img img { transform:scale(1.05); }
.project-info h3 { font-size:1.8rem; margin-bottom:15px; color:var(--text-main); }
.project-info p { color:var(--text-dim); margin-bottom:25px; line-height:1.7; font-size:1rem; }
.tech-stack { display:flex; flex-wrap:wrap; gap:10px; }
.tech-stack span { background:rgba(124,58,237,0.15); color:var(--primary-light); padding:6px 16px; border-radius:50px; font-size:.85rem; font-weight:600; border:1px solid rgba(124,58,237,0.2); }

/* --- Services --- */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; max-width:1100px; margin:0 auto; }
.service-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:45px 35px; text-align:center; transition:var(--transition); }
.service-card:hover { background:var(--bg-card-hover); border-color:var(--border-hover); transform:translateY(-4px); box-shadow:var(--shadow-glow); }
.service-icon { width:70px; height:70px; background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(59,130,246,0.2)); border-radius:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 25px; font-size:1.8rem; color:var(--primary); transition:var(--transition); }
.service-card:hover .service-icon { transform:scale(1.05) rotate(-3deg); background:linear-gradient(135deg,var(--primary),var(--secondary)); color:white; }
.service-card h3 { font-size:1.3rem; margin-bottom:15px; }
.service-card p { color:var(--text-dim); font-size:.95rem; line-height:1.7; }

/* --- Contact --- */
.contact-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1000px; margin:0 auto; align-items:center; }
.contact-info h3 { font-size:2rem; margin-bottom:15px; }
.contact-info p { color:var(--text-dim); margin-bottom:35px; font-size:1.1rem; }
.social-links { display:flex; gap:15px; }
.social-link { width:50px; height:50px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:1.2rem; text-decoration:none; transition:var(--transition); }
.social-link:hover { background:linear-gradient(135deg,var(--primary),var(--secondary)); border-color:transparent; color:white; transform:translateY(-2px); box-shadow:0 10px 25px rgba(124,58,237,0.3); }
.contact-form { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; }
.input-group { margin-bottom:20px; }
input, textarea { width:100%; padding:16px 20px; background:var(--input-bg); border:1px solid var(--border); border-radius:12px; color:var(--text-main); font-family:inherit; font-size:.95rem; outline:none; transition:var(--transition); }
input::placeholder, textarea::placeholder { color:var(--text-muted); }
input:focus, textarea:focus { border-color:var(--primary); background:rgba(124,58,237,0.05); box-shadow:0 0 0 3px rgba(124,58,237,0.1); }
.contact-form button { width:100%; }

/* --- Footer --- */
.footer { padding:30px 8%; text-align:center; border-top:1px solid var(--border); }
.footer p { color:var(--text-muted); font-size:.9rem; }

/* --- Scroll Reveal --- */
.reveal { opacity:0; transform:translateY(20px); transition:all .6s cubic-bezier(0.23,1,0.32,1); }
.reveal.active { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* --- Responsive --- */
@media (max-width:1200px) {
    .hero-container { grid-template-columns:1fr; text-align:center; gap:50px; }
    .hero-content { order:2; align-items:center; }
    .hero-image { order:1; }
    .hero-about { order:3; align-items:center; text-align:center; }
    .hero-badge { margin-left:auto; margin-right:auto; }
    .hero-tagline { margin:0 auto 35px; }
    .hero-buttons { justify-content:center; }
    .hero-about-text { margin-left:auto; margin-right:auto; }
    .hero-flow-lines, .code-particle { display:none; }
    nav { display:none; }
    .mobile-menu-btn { display:block; }
}
@media (max-width:992px) {
    .profile-wrapper { width:240px; height:240px; }
    .project-card, .project-card.reverse { grid-template-columns:1fr; direction:ltr; gap:30px; }
    .project-card.reverse .project-info { direction:ltr; }
    .contact-wrapper { grid-template-columns:1fr; text-align:center; }
    .social-links { justify-content:center; }
    .about-wrapper { grid-template-columns:1fr; text-align:center; gap:50px; }
    .about-image { order:-1; }
    .about-img-box { width:220px; height:220px; }
    .about-content { align-items:center; }
    .about-label { justify-content:center; }
    .about-title { font-size:1.5rem; }
    .about-stats { justify-content:center; }
}
@media (max-width:768px) {
    .navbar { top:12px; padding:10px 12px; width:92%; }
    .navbar.scrolled { top:8px; }
    .logo { font-size:1.1rem; }
    section { padding:80px 5%; }
    .hero { padding:130px 6% 70px; }
    .timeline { padding-left:30px; }
    .timeline-item { padding-left:25px; }
    .project-card { padding:25px; }
    .featured-badge { right:15px; padding:6px 14px; font-size:.75rem; }
    .services-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
    .hero-title { font-size:2.2rem; }
    .profile-wrapper { width:190px; height:190px; }
    .btn { padding:14px 28px; font-size:.9rem; }
    .section-title { font-size:1.8rem; }
    .project-info h3 { font-size:1.4rem; }
    .contact-form { padding:25px; }
    .about-img-box { width:190px; height:190px; }
    .stat-num { font-size:1.6rem; }
    .about-stats { gap:25px; }
}


.project-links {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.project-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent, #7c3aed);
    text-decoration: none;
    transition: opacity 0.2s;
}
.project-link:hover {
    opacity: 0.75;
}






.project-card { cursor: pointer; }

        .project-img-mobile {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 0;
        }
        .phone-mockup {
            position: relative;
            width: 230px;
            max-width: 60%;
            background: linear-gradient(180deg, rgba(124,58,237,0.18), rgba(10,10,15,1) 30%, rgba(10,10,15,1) 70%, rgba(34,211,238,0.08));
            border-radius: 40px;
            padding: 16px 12px;
            box-shadow:
                0 35px 70px -18px rgba(0,0,0,0.65),
                0 0 0 2px rgba(255,255,255,0.06),
                0 0 0 1px rgba(124,58,237,0.25) inset;
            border: 1px solid rgba(255,255,255,0.06);
            transform: translateZ(0);
        }

        .phone-mockup img {
            width: 100%;
            display: block;
            border-radius: 20px;
        }
        .phone-notch {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 55px;
            height: 16px;
            background: #0a0a0f;
            border-radius: 10px;
            z-index: 2;
        }
        .phone-home-indicator {
            position: absolute;
            bottom: 16px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 4px;
            background: rgba(255,255,255,0.35);
            border-radius: 4px;
        }

.project-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(5, 5, 10, 0.78);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 24px;
        }
        .project-modal-overlay.active { display: flex; }
        .project-modal {
            position: relative;
            background: var(--card-bg, #12121a);
            color: var(--text-color, #fff);
            width: 100%;
            max-width: 920px;
            max-height: 88vh;
            overflow-y: auto;
            border-radius: 20px;
            padding: 36px;
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 36px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.5);
        }
        @media (max-width: 760px) {
            .project-modal { grid-template-columns: 1fr; padding: 24px; }
        }
        .project-modal-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.08);
            color: inherit;
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .project-modal-close:hover { background: rgba(255,255,255,0.18); }
        .project-modal-gallery { display: flex; flex-direction: column; gap: 12px; }
.project-modal-gallery-viewport {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .modal-frame {
            display: none;
        }

        .modal-frame.is-active {
            display: block;
        }

        .project-modal-thumbnails {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 10px 4px 4px;
            scroll-snap-type: x mandatory;
        }

        .modal-thumb {
            flex: 0 0 auto;
            width: 72px;
            height: 48px;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.03);
            box-shadow: 0 10px 25px rgba(0,0,0,0.25);
            cursor: pointer;
            scroll-snap-align: start;
            transform: translateZ(0);
            transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
            opacity: 0.75;
        }

        .modal-thumb:hover { transform: translateY(-2px) scale(1.02); opacity: 1; border-color: rgba(99,102,241,0.55); }
        .modal-thumb.is-active { opacity: 1; border-color: rgba(99,102,241,0.9); box-shadow: 0 0 0 4px rgba(99,102,241,0.18), 0 10px 25px rgba(0,0,0,0.35); }

        .modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

        .modal-swipe-zone {
            width: 100%;
            touch-action: pan-y;
            user-select: none;
            -webkit-user-select: none;
        }

        .modal-swipe-zoneWeb { touch-action: pan-y; }

        .modal-swipe-zone img {
            width: 100%;
            display: block;
            border-radius: 20px;
            transition: transform 180ms ease, opacity 180ms ease;
            will-change: transform, opacity;
        }

        .modal-frame--mobile .modal-swipe-zone img {
            border-radius: 20px;
        }

        .modal-frame--web .modal-swipe-zone img {
            border-radius: 16px;
        }

        .fade-in { opacity: 1 !important; transform: scale(1) !important; }
        .fade-out { opacity: 0 !important; transform: scale(0.98) !important; }

        .browser-frame {
            width: 100%;
            max-width: 640px;
            margin: 0 auto;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 18px;
            padding: 12px 12px 10px;
            box-shadow: 0 25px 60px rgba(0,0,0,0.55);
        }

        .browser-topbar {
            height: 26px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 10px;
            border-radius: 12px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 10px;
        }

        .browser-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; opacity: 0.9; }
        .browser-dot--red { background: #ff5f57; }
        .browser-dot--yellow { background: #febc2e; }
        .browser-dot--green { background: #28c840; }
        .browser-url { margin-left: 6px; font-size: 12px; color: rgba(255,255,255,0.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .browser-bottombar { height: 10px; }

        /* --- Overlay nav --- */
        .gallery-nav--overlay {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 14px;
            width: calc(100% - 24px);
            pointer-events: none;
        }

        .gallery-nav--overlay button,
        .gallery-nav--overlay .gallery-counter { pointer-events: auto; }

        .gallery-nav--overlay {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .gallery-control {
            background: rgba(255,255,255,0.09);
            border: 1px solid rgba(255,255,255,0.14);
            color: #fff;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 12px;
            width: 40px;
            height: 40px;
            box-shadow: 0 14px 30px rgba(0,0,0,0.35);
            transition: transform .18s ease, background .18s ease, border-color .18s ease;
        }
        .gallery-control:hover { transform: translateY(-2px); border-color: rgba(99,102,241,0.7); background: rgba(99,102,241,0.18); }

        .gallery-counter {
            font-size: 0.9rem;
            opacity: 0.9;
            padding: 10px 14px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 999px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .phone-mockup--modal {
            width: 100%;
            max-width: 320px;
            margin: 0 auto;
        }

        .project-modal-gallery {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }


.project-modal-gallery-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.project-modal-gallery-frame img {
    width: 100%;
    display: block;
    transition: opacity .18s ease, transform .18s ease;
}

.project-modal-gallery-frame img.fade-in {
    opacity: 1;
    transform: scale(1);
}

.project-modal-gallery-frame img.fade-out {
    opacity: 0;
    transform: scale(0.98);
}


        .gallery-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .gallery-nav button {
            background: var(--accent, #7c3aed);
            color: #fff;
            border: none;
            border-radius: 8px;
            width: 34px;
            height: 34px;
            cursor: pointer;
            font-size: 0.95rem;
        }
        .gallery-counter { font-size: 0.85rem; opacity: 0.7; }
        .project-modal-details h3 { margin-top: 0; font-size: 1.5rem; }
        .project-modal-details p { opacity: 0.85; line-height: 1.6; }
        .project-modal-details .tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 16px 0;
        }
        .project-modal-details .tech-stack span {
            background: rgba(124,58,237,0.12);
            color: #a78bfa;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 600;
        }
.project-modal-details .project-links { display: flex; gap: 14px; margin-top: 10px; }

/* =========================================================
   Premium Project Modal (Adaptive Frames + Gallery)
   ========================================================= */

.project-modal-overlay {
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.project-modal-gallery-viewport {
    position: relative;
    border-radius: 18px;
    padding: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}

.modal-frame {
    display: none;
    width: 100%;
}

.modal-frame.is-active {
    display: block;
}

.modal-frame--mobile .phone-mockup--modal {
    width: 250px;
    max-width: 72%;
    margin: 0 auto;
    border-radius: 44px;
    background: linear-gradient(180deg, rgba(124,58,237,0.22), rgba(10,10,15,1) 35%, rgba(10,10,15,1) 70%, rgba(34,211,238,0.08));
    padding: 18px 12px;
}

.phone-mockup--modal {
    position: relative;
    transform: translateZ(0);
    box-shadow:
        0 35px 70px -18px rgba(0,0,0,0.65),
        0 0 0 2px rgba(255,255,255,0.06),
        0 0 0 1px rgba(124,58,237,0.25) inset;
    border: 1px solid rgba(255,255,255,0.06);
}

/* swipe area respects original portrait aspect ratio */
.modal-swipe-zone {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 26px;
    background: rgba(0,0,0,0.25);
}

.modal-swipe-zone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 26px;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-y; /* vertical scroll allowed */
}

.modal-frame--mobile .modal-swipe-zone {
    aspect-ratio: 9 / 19.5;
}

/* Web frame */
.modal-frame--web .browser-frame {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.browser-frame {
    position: relative;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}

.browser-topbar {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.browser-dot { width: 10px; height: 10px; border-radius: 50%; opacity: .9; }
.browser-dot--red { background: #ff5f57; }
.browser-dot--yellow { background: #febc2e; }
.browser-dot--green { background: #28c840; }
.browser-url {
    margin-left: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.modal-frame--web .modal-swipe-zone {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    margin: 14px;
}

.modal-frame--web .modal-swipe-zone img {
    border-radius: 12px;
    object-fit: contain;
    touch-action: pan-y;
}

.browser-bottombar {
    height: 12px;
    background: rgba(255,255,255,0.02);
}

/* Overlay nav */
.gallery-nav--overlay {
    position: absolute;
    inset: auto 16px 16px 16px;
    background: rgba(10,10,15,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 10px 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gallery-nav--overlay .gallery-control {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: white;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.gallery-nav--overlay .gallery-control:hover {
    transform: translateY(-1px);
    background: rgba(124,58,237,0.22);
    border-color: rgba(124,58,237,0.45);
}

.gallery-counter {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}

/* Thumbnails strip */
.project-modal-thumbnails {
    margin-top: 14px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(70px, 1fr);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.project-modal-thumbnails::-webkit-scrollbar { height: 8px; }
.project-modal-thumbnails::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,var(--primary),var(--secondary));
    border-radius: 10px;
}

.modal-thumb {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 14px;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease, outline .2s ease;
    outline: none;
}

.modal-thumb img {
    width: 100%;
    height: 46px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}

.modal-thumb:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.35);
}

.modal-thumb.is-active {
    opacity: 1;
    outline: 2px solid rgba(124,58,237,0.55);
    box-shadow: 0 12px 25px rgba(124,58,237,0.18);
}

/* Smooth fade/scale transition used by existing JS */
.fade-in { opacity: 1 !important; transform: scale(1) !important; }
.fade-out { opacity: 0 !important; transform: scale(0.98) !important; }

@media (max-width: 760px) {
    .modal-frame--web .modal-swipe-zone { aspect-ratio: 4 / 3; }
    .gallery-nav--overlay { inset: auto 12px 12px 12px; }
}