/* ============================================
   SCHAMJA SHAHAGA — Portfolio CSS
   Blau-Pastel Design | Leicht anpassbar über :root
   ============================================ */

:root {
    /* ---- FARBEN — hier einfach ändern! ---- */
    --color-bg:           #f0f6ff;      /* Zartes Himmelblau */
    --color-bg-alt:       #e4effc;      /* Etwas tieferes Blau */
    --color-bg-card:      #ffffff;
    --color-bg-card-hover:#eaf3ff;
    --color-accent:       #0099cc;      /* Blau-Türkis */
    --color-accent-glow:  rgba(0,153,204,0.15);
    --color-accent-dark:  #0077aa;
    --color-accent-2:     #1a73e8;      /* Kräftiges Blau */
    --color-accent-3:     #00bcd4;      /* Cyan */
    --color-text:         #0d1b2a;      /* Dunkles Navy */
    --color-text-muted:   #3a5068;
    --color-text-dim:     #7a95b0;
    --color-border:       rgba(0,100,180,0.12);
    --color-border-hover: rgba(0,100,180,0.28);

    /* ---- SCHRIFTEN ---- */
    --font-main: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ---- LAYOUT ---- */
    --max-w:      1200px;
    --section-py: 110px;
    --radius:     12px;
    --radius-sm:  8px;

    /* ---- ANIMATION ---- */
    --t-fast: 0.2s ease;
    --t-med:  0.4s cubic-bezier(.25,.46,.45,.94);
    --t-slow: 0.8s cubic-bezier(.25,.46,.45,.94);
}

/* ============================================ RESET */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-main); background:var(--color-bg); color:var(--color-text); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img,video { max-width:100%; display:block; }
.container { max-width:var(--max-w); margin:0 auto; padding:0 30px; }
.accent { color:var(--color-accent); }

/* ============================================ LANG TOGGLE */
.lang-toggle {
    position:fixed; top:24px; right:24px; z-index:1001;
    background:var(--color-bg-card); border:1px solid var(--color-border);
    border-radius:50px; padding:8px 16px; cursor:pointer;
    display:flex; align-items:center; gap:6px;
    backdrop-filter:blur(12px); transition:var(--t-fast);
    box-shadow: 0 2px 12px rgba(0,100,180,0.08);
}
.lang-toggle:hover { border-color:var(--color-accent); box-shadow:0 0 18px var(--color-accent-glow); }
.lang-option { font-family:var(--font-mono); font-size:0.75rem; font-weight:500; color:var(--color-text-dim); transition:var(--t-fast); }
.lang-option.active { color:var(--color-accent); }
.lang-divider { color:var(--color-text-dim); font-size:0.7rem; }

/* ============================================ NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; transition:var(--t-med); }
.nav.scrolled { background:rgba(240,246,255,0.96); backdrop-filter:blur(20px); border-bottom:1px solid var(--color-border); padding:12px 0; box-shadow:0 2px 20px rgba(0,100,180,0.07); }
.nav-inner { max-width:var(--max-w); margin:0 auto; padding:0 30px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo-img { height:42px; width:auto; display:block; transition:var(--t-fast); }
.nav-logo:hover .nav-logo-img { transform:scale(1.08); }
.nav-logo-name { font-size:.95rem; letter-spacing:.3px; white-space:nowrap; }
.logo-first { color:#5bb8e8; font-weight:800; }
.logo-last  { color:#003f6e; font-weight:700; }
.nav-logo:hover .logo-first { color:#0099cc; }
.nav-logo:hover .logo-last  { color:#002244; }
.nav-links { display:flex; gap:36px; }
.nav-link { font-size:0.85rem; font-weight:500; color:var(--color-text-muted); letter-spacing:.5px; text-transform:uppercase; position:relative; transition:var(--t-fast); }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--color-accent); transition:var(--t-med); }
.nav-link:hover { color:var(--color-accent); }
.nav-link:hover::after { width:100%; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-hamburger span { width:24px; height:2px; background:var(--color-text); transition:var(--t-fast); }
.nav-hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-hamburger.active span:nth-child(2) { opacity:0; }
.nav-hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ============================================ HERO */
.hero {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:100px 0 60px; position:relative; overflow:hidden;
    background:linear-gradient(135deg,#e8f4fd 0%,#dbeeff 30%,#c8e6f7 60%,#d6eeff 100%);
}
/* Deko-Kreis oben rechts */
.hero::after {
    content:''; position:absolute; width:700px; height:700px; border-radius:50%;
    background:radial-gradient(circle,rgba(0,153,204,0.13) 0%,transparent 70%);
    top:-150px; right:-150px; pointer-events:none; z-index:1;
}
/* Deko-Kreis unten links */
.hero::before {
    content:''; position:absolute; width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle,rgba(26,115,232,0.08) 0%,transparent 70%);
    bottom:-100px; left:-100px; pointer-events:none; z-index:1;
}
.hero-grid-bg {
    position:absolute; inset:0;
    background-image:linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);
    background-size:60px 60px; pointer-events:none; z-index:1;
}
.hero-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.particle { position:absolute; background:var(--color-accent); border-radius:50%; opacity:0; animation:particleFloat linear infinite; }
@keyframes particleFloat { 0%{opacity:0;transform:translateY(0) scale(0)} 20%{opacity:0.5} 80%{opacity:0.2} 100%{opacity:0;transform:translateY(-200px) scale(1)} }

.hero-inner-wrap {
    display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px;
    max-width:var(--max-w); width:100%; margin:0 auto; padding:0 30px; position:relative; z-index:2;
}
.hero-content { position:relative; z-index:2; }

.hero-tag {
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(0,153,204,0.12); border:1px solid rgba(0,153,204,0.30);
    border-radius:50px; padding:10px 24px; font-size:0.9rem; font-weight:600;
    color:#0077aa; margin-bottom:36px; letter-spacing:.3px; backdrop-filter:blur(8px);
}
.tag-dot { width:8px; height:8px; background:var(--color-accent); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }

.hero-name { margin-bottom:20px; }
.hero-line { display:block; font-size:clamp(4rem,9vw,7.5rem); font-weight:800; line-height:.95; letter-spacing:-4px; }
.line-1 { color:#0d1b2a; }
.line-2 { color:#0099cc; text-shadow:0 0 40px rgba(0,153,204,0.25); }

.hero-roles { font-family:var(--font-mono); font-size:1.35rem; color:#1a73e8; margin-bottom:28px; min-height:2em; font-weight:400; letter-spacing:.5px; }
.cursor { animation:blink .8s infinite; color:var(--color-accent); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-desc { color:#3a5068; font-size:1.15rem; max-width:540px; margin-bottom:42px; line-height:1.85; }

.hero-cta { display:flex; gap:16px; margin-bottom:50px; flex-wrap:wrap; }

/* Buttons */
.btn { display:inline-flex; align-items:center; padding:16px 38px; border-radius:50px; font-weight:700; font-size:1rem; letter-spacing:.3px; transition:var(--t-med); cursor:pointer; border:none; }
.btn-primary { background:#0099cc; color:#fff; box-shadow:0 4px 25px rgba(0,153,204,.35); }
.btn-primary:hover { background:#0077aa; box-shadow:0 6px 35px rgba(0,153,204,.5); transform:translateY(-3px); }
.btn-outline { background:transparent; border:1px solid rgba(0,100,180,.3); color:#0d1b2a; padding:15px 37px; }
.btn-outline:hover { border-color:var(--color-accent); color:var(--color-accent); transform:translateY(-3px); }

.hero-stats { display:flex; gap:40px; padding-top:10px; border-top:1px solid rgba(0,100,180,.15); }
.stat-number { display:block; font-size:2.4rem; font-weight:800; color:#0099cc; line-height:1; }
.stat-label { font-size:.78rem; color:#5a7a90; text-transform:uppercase; letter-spacing:1.5px; margin-top:4px; }

/* Hero Visual */
.hero-visual { display:flex; justify-content:center; align-items:center; position:relative; z-index:2; }
.hero-image-frame { position:relative; width:400px; height:400px; }
.hero-image { width:100%; height:100%; object-fit:cover; border-radius:50%; border:3px solid var(--color-accent); filter:contrast(1.05); }
.frame-decoration {
    position:absolute; top:-12px; left:-12px; right:-12px; bottom:-12px;
    border:1px solid var(--color-accent); border-radius:50%; opacity:.35;
    animation:rotateSlow 20s linear infinite; border-top-color:transparent; border-left-color:transparent;
}
@keyframes rotateSlow { to{transform:rotate(360deg)} }

.scroll-indicator { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); }
.scroll-line { width:1px; height:60px; background:linear-gradient(to bottom,var(--color-accent),transparent); animation:scrollPulse 2s infinite; }
@keyframes scrollPulse { 0%{opacity:0;transform:scaleY(0);transform-origin:top} 50%{opacity:1;transform:scaleY(1)} 100%{opacity:0} }

/* ============================================ SECTIONS SHARED */
.section { padding:var(--section-py) 0; position:relative; }
.section-label { display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:.8rem; color:var(--color-accent); text-transform:uppercase; letter-spacing:2px; margin-bottom:16px; }
.label-number { opacity:.5; }
.section-title { font-size:clamp(2rem,4vw,3rem); font-weight:700; letter-spacing:-1px; line-height:1.2; margin-bottom:60px; }
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ============================================ ABOUT */
.about { background:var(--color-bg-alt); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.about-text p { color:var(--color-text-muted); font-size:1.05rem; margin-bottom:40px; line-height:1.9; }
.about-highlights { display:flex; flex-direction:column; gap:20px; }
.highlight { display:flex; gap:16px; align-items:flex-start; padding:20px; background:var(--color-bg-card); border-radius:var(--radius); border:1px solid var(--color-border); transition:var(--t-med); }
.highlight:hover { border-color:var(--color-accent); transform:translateX(8px); box-shadow:-4px 0 20px var(--color-accent-glow); }
.highlight-icon { flex-shrink:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--color-accent-glow); border-radius:var(--radius-sm); color:var(--color-accent); }
.highlight h3 { font-size:1rem; font-weight:600; margin-bottom:4px; }
.highlight p { font-size:.85rem !important; color:var(--color-text-dim) !important; margin-bottom:0 !important; }

/* Terminal */
.terminal { background:#0e1520; border-radius:var(--radius); border:1px solid rgba(0,0,0,.15); overflow:hidden; font-family:var(--font-mono); position:sticky; top:120px; box-shadow:0 20px 60px rgba(0,0,0,.12); }
.terminal-header { display:flex; align-items:center; gap:8px; padding:14px 18px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.06); }
.terminal-dot { width:12px; height:12px; border-radius:50%; }
.terminal-dot.red{background:#ff5f57} .terminal-dot.yellow{background:#ffbd2e} .terminal-dot.green{background:#28ca42}
.terminal-title { margin-left:auto; font-size:.72rem; color:#4a5568; }
.terminal-body { padding:20px; font-size:.82rem; line-height:1.8; }
.terminal-line { color:#7a8fa8; margin-bottom:12px; }
.prompt { color:#00bcd4; margin-right:8px; }
.terminal-output { color:#4a6080; font-size:.78rem; white-space:pre-wrap; line-height:1.7; }

/* ============================================ SKILLS */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:28px; }
.skill-category { padding:28px; background:var(--color-bg-card); border-radius:var(--radius); border:1px solid var(--color-border); transition:var(--t-med); }
.skill-category:hover { border-color:var(--color-accent); box-shadow:0 10px 40px rgba(0,153,204,.07); transform:translateY(-4px); }
.skill-category h3 { font-size:.88rem; font-weight:600; color:var(--color-accent); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--color-border); }
.skill-tags { display:flex; flex-wrap:wrap; gap:8px; }
.skill-tag { padding:6px 14px; font-size:.8rem; font-weight:500; background:rgba(0,100,180,.05); border:1px solid var(--color-border); border-radius:50px; color:var(--color-text-muted); transition:var(--t-fast); }
.skill-tag:hover { border-color:var(--color-accent); color:var(--color-accent); }
.skill-tag.featured { background:var(--color-accent-glow); border-color:rgba(0,153,204,.3); color:var(--color-accent); }

/* ============================================ TIMELINE */
.experience { background:var(--color-bg-alt); }
.timeline { position:relative; padding-left:40px; }
.timeline::before { content:''; position:absolute; left:7px; top:10px; bottom:10px; width:1px; background:linear-gradient(to bottom,var(--color-accent),var(--color-border)); }
.timeline-item { position:relative; margin-bottom:44px; }
.timeline-item:last-child { margin-bottom:0; }
.timeline-marker { position:absolute; left:-40px; top:6px; width:15px; height:15px; border-radius:50%; border:2px solid var(--color-text-dim); background:var(--color-bg-alt); transition:var(--t-fast); }
.timeline-marker.current { border-color:var(--color-accent); background:var(--color-accent); box-shadow:0 0 15px var(--color-accent-glow); }
.timeline-content { padding:22px 26px; background:var(--color-bg-card); border-radius:var(--radius); border:1px solid var(--color-border); transition:var(--t-med); }
.timeline-content:hover { border-color:var(--color-accent); transform:translateX(6px); }
.timeline-period { font-family:var(--font-mono); font-size:.78rem; color:var(--color-accent); margin-bottom:8px; letter-spacing:.5px; display:block; }
.timeline-content h3 { font-size:1.12rem; font-weight:700; margin-bottom:4px; }
.timeline-content h4 { font-size:.9rem; font-weight:400; color:var(--color-text-muted); margin-bottom:12px; }
.timeline-content p { font-size:.9rem; color:var(--color-text-dim); line-height:1.8; }

/* ============================================ PORTFOLIO */
.portfolio-subtitle { font-size:1.1rem; font-weight:600; color:var(--color-text-muted); margin-bottom:28px; padding-left:16px; border-left:3px solid var(--color-accent); }
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-bottom:55px; }
.portfolio-card { background:var(--color-bg-card); border-radius:var(--radius); border:1px solid var(--color-border); overflow:hidden; transition:var(--t-med); }
.portfolio-card:hover { border-color:var(--color-accent); transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,100,180,.1); }
.portfolio-image { position:relative; overflow:hidden; aspect-ratio:4/3; }
.portfolio-image img { width:100%; height:100%; object-fit:cover; transition:var(--t-slow); }
.portfolio-card:hover .portfolio-image img { transform:scale(1.07); }
.portfolio-overlay { position:absolute; inset:0; background:rgba(0,153,204,.88); display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--t-med); }
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-tag { color:#fff; font-weight:600; font-size:.85rem; padding:8px 20px; border:2px solid #fff; border-radius:50px; }
.portfolio-card h4 { padding:16px 20px 4px; font-size:1rem; font-weight:600; }
.portfolio-card p { padding:0 20px 16px; font-size:.82rem; color:var(--color-text-dim); }
.portfolio-video { aspect-ratio:16/9; background:#000; }
.portfolio-video video { width:100%; height:100%; object-fit:cover; }
.featured-video { grid-column:1 / -1; border:2px solid var(--color-accent); box-shadow:0 8px 40px rgba(0,153,204,.18); }
.featured-video .portfolio-video { aspect-ratio:16/7; }

/* ============================================ HERO LOGO */
.hero-logo-frame { display:flex; align-items:center; justify-content:center; width:280px; height:280px; border-radius:50%; background:linear-gradient(135deg,rgba(91,184,232,.15),rgba(0,153,204,.08)); border:2px solid rgba(0,153,204,.2); box-shadow:0 8px 40px rgba(0,100,180,.12); animation:float 4s ease-in-out infinite; }
.hero-logo-big { width:180px; height:180px; object-fit:contain; filter:drop-shadow(0 4px 24px rgba(0,153,204,.3)); }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ============================================ BROWSER MOCKUP */
.browser-mock { display:flex; flex-direction:column; border-radius:10px 10px 0 0; overflow:hidden; }
.browser-bar { display:flex; align-items:center; gap:6px; padding:9px 14px; background:#e2ecf7; border-bottom:1px solid #ccddf0; flex-shrink:0; }
.browser-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.browser-url { flex:1; background:#fff; border-radius:20px; padding:3px 12px; font-size:.68rem; color:#6b8caa; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #d0e4f5; }
.browser-body { flex:1; padding:16px 14px 12px; display:flex; flex-direction:column; gap:10px; }
.bm-hero { display:flex; align-items:center; gap:10px; }
.bm-logo-box { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800; flex-shrink:0; }
.bm-lines { flex:1; display:flex; flex-direction:column; gap:5px; }
.bm-lines span { height:8px; border-radius:4px; background:rgba(255,255,255,.55); }
.bm-lines span:first-child { width:70%; }
.bm-lines span:last-child  { width:45%; }
.bm-nav { display:flex; gap:8px; }
.bm-nav span { height:7px; border-radius:4px; background:rgba(255,255,255,.4); flex:1; }
.bm-cards { display:flex; gap:8px; flex:1; }
.bm-cards div { flex:1; border-radius:6px; background:rgba(255,255,255,.22); min-height:36px; }
.bm-podcast-row { display:flex; gap:8px; }
.bm-ep { flex:1; height:44px; border-radius:8px; background:rgba(255,255,255,.22); }
.bm-wave { height:20px; border-radius:4px; background:rgba(255,255,255,.18); position:relative; overflow:hidden; }
.bm-wave::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0px,rgba(255,255,255,.3) 3px,transparent 3px,transparent 7px); }
.browser-mock--rotonda { background:linear-gradient(160deg,#1a3a5c 0%,#0d5a8a 60%,#1470a8 100%); }
.browser-mock--rotonda .bm-logo-box { background:#fff; color:#0d5a8a; }
.browser-mock--podcast { background:linear-gradient(160deg,#2d1b4e 0%,#5b2d8a 60%,#7b44b0 100%); }
.browser-mock--podcast .bm-logo-box { background:rgba(255,255,255,.15); color:#fff; font-size:1.1rem; }
.browser-mock--hv { background:linear-gradient(160deg,#003366 0%,#004d99 60%,#1a6fbf 100%); }
.browser-mock--hv .bm-logo-box { background:#fff; color:#003366; font-size:.72rem; font-weight:900; }

/* ============================================ WEB CARDS */
.web-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.web-card { display:flex; flex-direction:column; cursor:pointer; text-decoration:none; }
.web-card:hover { transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,100,180,.14); border-color:var(--color-accent); }
.web-card-preview { position:relative; aspect-ratio:16/9; overflow:hidden; }
.web-card-body { padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; gap:10px; }
.web-card-header { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.web-card-header h4 { font-size:1.05rem; font-weight:700; color:var(--color-text); flex:1; }
.web-card-body p { font-size:.88rem; color:var(--color-text-muted); line-height:1.75; flex:1; }
.web-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.web-tags span { font-size:.75rem; font-weight:500; padding:3px 10px; background:rgba(0,100,180,.06); border:1px solid var(--color-border); border-radius:50px; color:var(--color-text-dim); }
.web-live-btn-bottom { display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:10px 22px; border-radius:50px; border:2px solid var(--color-accent); color:var(--color-accent); font-size:.85rem; font-weight:700; transition:var(--t-fast); align-self:flex-start; }
.web-card:hover .web-live-btn-bottom { background:var(--color-accent); color:#fff; }

/* ============================================ CONTACT */
.contact { background:var(--color-bg-alt); }
.contact-subtitle { font-size:1.05rem; color:var(--color-text-muted); margin-top:-40px; margin-bottom:48px; max-width:540px; line-height:1.8; }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.contact-card { padding:30px; background:var(--color-bg-card); border-radius:var(--radius); border:1px solid var(--color-border); text-align:center; transition:var(--t-med); display:block; }
.contact-card:hover { border-color:var(--color-accent); transform:translateY(-6px); box-shadow:0 15px 40px rgba(0,153,204,.1); }
.contact-icon { width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:var(--color-accent-glow); border-radius:50%; margin:0 auto 16px; color:var(--color-accent); transition:var(--t-med); }
.contact-card:hover .contact-icon { background:var(--color-accent); color:#fff; }
.contact-card h3 { font-size:1rem; font-weight:600; margin-bottom:4px; }
.contact-card p { font-size:.85rem; color:var(--color-text-dim); }

/* ============================================ FOOTER */
.footer { padding:28px 0; border-top:1px solid var(--color-border); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--color-text-dim); flex-wrap:wrap; gap:10px; }
.footer-links a { color:var(--color-accent); transition:var(--t-fast); }
.footer-links a:hover { text-decoration:underline; }

/* ============================================ RESPONSIVE — TABLET */
@media (max-width:900px) {
    :root { --section-py:80px; }
    .hero { padding-top:130px; }
    .hero-inner-wrap { grid-template-columns:1fr; text-align:center; gap:40px; padding:0 24px; }
    .hero-content { order:2; }
    .hero-visual { order:1; }
    .hero-desc,.hero-tag { margin-left:auto; margin-right:auto; }
    .hero-cta,.hero-stats { justify-content:center; }
    .hero-image-frame { width:260px; height:260px; }
    .about-grid { grid-template-columns:1fr; }
    .terminal { position:static; }
    .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(240,246,255,.99); backdrop-filter:blur(20px); flex-direction:column; padding:28px; gap:18px; border-bottom:1px solid var(--color-border); box-shadow:0 8px 30px rgba(0,100,180,.08); }
    .nav.open .nav-links { display:flex; }
    .nav-hamburger { display:flex; }
}

/* ============================================ RESPONSIVE — MOBILE */
@media (max-width:600px) {
    :root { --section-py:60px; }
    .hero-line { letter-spacing:-1px; }
    .hero-stats { gap:24px; }
    .stat-number { font-size:1.8rem; }
    .skills-grid,.portfolio-grid,.contact-grid { grid-template-columns:1fr; }
    .section-title { font-size:1.8rem; margin-bottom:36px; }
    .lang-toggle { top:16px; right:16px; }
    .featured-video { grid-column:1; }
}