:root {
    --portfolio-primary: #6366f1;
    --portfolio-secondary: #8b5cf6;
    --portfolio-accent: #22d3ee;
    --portfolio-gold: #f59e0b;
    --portfolio-gradient: linear-gradient(135deg, var(--portfolio-primary), var(--portfolio-secondary));
    --toporahma-color: #10b981;
    --toporahma-glow: rgba(16, 185, 129, 0.4);
    --ysi-color: #f59e0b;
    --ysi-glow: rgba(245, 158, 11, 0.4);
}

.portfolio-nav .nav-btn-platform { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50px; color: var(--text-secondary); font-size: 0.85rem; transition: var(--transition-fast); }
.portfolio-nav .nav-btn-platform:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.portfolio-nav .nav-btn-platform .btn-text { display: none; }
@media (min-width: 1100px) { .portfolio-nav .nav-btn-platform .btn-text { display: inline; } }

.portfolio-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 5% 80px; position: relative; overflow: hidden; }
.portfolio-hero .glow-geo { width: clamp(200px, 30vw, 400px); height: clamp(200px, 30vw, 400px); background: var(--toporahma-color); top: 10%; left: 5%; }
.portfolio-hero .glow-tech { width: clamp(180px, 25vw, 350px); height: clamp(180px, 25vw, 350px); background: var(--portfolio-primary); top: 50%; right: 5%; animation-delay: 1.5s; }
.portfolio-hero .glow-code { width: clamp(150px, 22vw, 300px); height: clamp(150px, 22vw, 300px); background: var(--ysi-color); bottom: 15%; left: 30%; animation-delay: 3s; }
.portfolio-hero .hero-content { text-align: center; z-index: 1; max-width: 900px; }

.hero-intro { margin-bottom: 2rem; }
.greeting { display: block; font-size: clamp(1rem, 2vw, 1.25rem); color: var(--accent-cyan); margin-bottom: 0.5rem; font-weight: 500; }
.hero-name { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 900; line-height: 1.1; margin-bottom: 1rem; }
.name-first { display: block; color: var(--text-primary); }
.name-last { display: block; background: var(--portfolio-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-titles { display: flex; justify-content: center; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: clamp(0.85rem, 1.5vw, 1rem); color: var(--text-secondary); }
.title-separator { color: var(--accent-cyan); opacity: 0.5; }
.hero-tagline { display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.tagline-icon { flex-shrink: 0; color: var(--accent-cyan); }

.hero-brands { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.brand-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; transition: var(--transition-normal); }
.brand-card:hover { transform: translateY(-5px); }
.brand-card.toporahma:hover { border-color: var(--toporahma-color); box-shadow: 0 10px 30px var(--toporahma-glow); }
.brand-card.ysi:hover { border-color: var(--ysi-color); box-shadow: 0 10px 30px var(--ysi-glow); }
.brand-logo { color: inherit; display: flex; align-items: center; justify-content: center; }
.brand-logo-img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
.brand-info { text-align: left; }
.brand-name { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.brand-card.toporahma .brand-name { color: var(--toporahma-color); }
.brand-card.ysi .brand-name { color: var(--ysi-color); }
.brand-card.toporahma .brand-logo { color: var(--toporahma-color); }
.brand-card.ysi .brand-logo { color: var(--ysi-color); }
.brand-desc { display: block; font-size: 0.75rem; color: var(--text-muted); }

.hero-social { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.social-link { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50%; color: var(--text-secondary); transition: var(--transition-fast); }
.social-link:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); transform: translateY(-3px); }

.portfolio-hero .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-muted); }
.portfolio-hero .scroll-indicator span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; }
.scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--accent-cyan), transparent); animation: scrollLine 1.5s ease-in-out infinite; }
@keyframes scrollLine { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.5); opacity: 0.5; } }

.portfolio-page .section-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 3rem; }
.section-number { font-family: var(--font-display); font-size: 0.9rem; color: var(--accent-cyan); opacity: 0.7; }
.portfolio-page .section-title { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.25rem); white-space: nowrap; }
.section-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--glass-border), transparent); }

.section-about-portfolio { background: linear-gradient(180deg, var(--bg-dark), var(--bg-darker)); }
.about-container-portfolio { display: grid; grid-template-columns: 350px 1fr; gap: 4rem; max-width: 1200px; margin: 0 auto; align-items: start; }
.about-image { position: relative; }
.image-frame { position: relative; width: 280px; height: 320px; margin: 0 auto; }
.avatar-placeholder { width: 100%; height: 100%; background: var(--portfolio-gradient); border-radius: 20px; display: flex; align-items: center; justify-content: center; }
.avatar-initials { font-family: var(--font-display); font-size: 5rem; font-weight: 900; color: white; text-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.image-decoration { position: absolute; inset: -15px; border: 2px solid var(--accent-cyan); border-radius: 25px; z-index: -1; opacity: 0.5; }
.experience-badge { position: absolute; bottom: -20px; right: -20px; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1rem 1.5rem; text-align: center; backdrop-filter: blur(10px); }
.exp-number { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--accent-cyan); }
.exp-text { font-size: 0.75rem; color: var(--text-muted); }
.about-headline { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.5rem); margin-bottom: 1.5rem; line-height: 1.4; }
.about-headline .highlight { color: var(--accent-cyan); }
.about-text-portfolio p { color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.8; }
.about-text-portfolio strong { color: var(--text-primary); }
.about-text-portfolio em { color: var(--accent-cyan); font-style: normal; }
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
.skill-category { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.25rem; }
.skill-category h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; margin-bottom: 0.75rem; color: var(--accent-cyan); }
.skill-category ul { list-style: none; }
.skill-category li { font-size: 0.85rem; color: var(--text-secondary); padding: 0.3rem 0; border-bottom: 1px solid var(--glass-border); }
.skill-category li:last-child { border-bottom: none; }
.about-quote { position: relative; padding: 1.5rem; padding-left: 2.5rem; background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1)); border-left: 3px solid var(--portfolio-primary); border-radius: 0 16px 16px 0; margin-top: 2rem; }
.about-quote .quote-icon { position: absolute; top: 0.5rem; left: 0.75rem; font-size: 2rem; color: var(--portfolio-primary); opacity: 0.5; font-family: serif; }
.about-quote p { font-style: italic; color: var(--text-secondary); margin: 0; }

.section-projects { background: var(--bg-darker); }
.projects-showcase { display: grid; gap: 3rem; max-width: 1200px; margin: 0 auto; }
.project-card { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 24px; padding: 2.5rem; transition: var(--transition-normal); }
.project-card:hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.project-card:nth-child(even) { direction: rtl; }
.project-card:nth-child(even) > * { direction: ltr; }
.project-card:not(.featured) { grid-template-columns: 0.8fr 1fr; padding: 2rem; }
.project-visual { position: relative; }
.project-mockup { background: #1a1a2e; border-radius: 16px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.3); }
.mockup-screen { aspect-ratio: 16/10; }
.mockup-header { display: flex; gap: 0.4rem; padding: 0.75rem 1rem; background: rgba(255,255,255,0.05); }
.mockup-header .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; }
.mockup-header .dot:nth-child(2) { background: #ffbd2e; }
.mockup-header .dot:nth-child(3) { background: #27ca40; }
.mockup-content { padding: 1rem; height: calc(100% - 40px); display: flex; gap: 0.75rem; }
.toporahma-mockup .mock-sidebar { width: 25%; background: rgba(16,185,129,0.1); border-radius: 8px; }
.toporahma-mockup .mock-main { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.toporahma-mockup .mock-3d { flex: 1; background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(34,211,238,0.2)); border-radius: 8px; }
.toporahma-mockup .mock-curves { height: 30%; background: repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(16,185,129,0.3) 8px, rgba(16,185,129,0.3) 10px); border-radius: 8px; }
.ysi-mockup .ysi-content { flex-direction: column; align-items: center; justify-content: center; }
.ysi-logo-mock { margin-bottom: 1rem; color: var(--ysi-color); }
.ysi-services { display: flex; gap: 0.5rem; }
.serv-item { width: 50px; height: 50px; background: rgba(245,158,11,0.2); border-radius: 8px; }
.vibe-mockup .vibe-content { flex-direction: column; gap: 0.5rem; }
.vibe-hero-mock { height: 40%; background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(236,72,153,0.3)); border-radius: 8px; }
.vibe-cards-mock { display: flex; gap: 0.5rem; flex: 1; }
.vibe-card-mock { flex: 1; background: rgba(255,255,255,0.05); border-radius: 8px; }
.project-badge { position: absolute; top: 1rem; right: 1rem; padding: 0.4rem 1rem; background: var(--toporahma-color); border-radius: 50px; font-size: 0.7rem; font-weight: 600; color: white; text-transform: uppercase; letter-spacing: 0.05em; }
.project-badge.enterprise { background: var(--ysi-color); }
.project-badge.edu { background: var(--accent-pink); }
.project-info { display: flex; flex-direction: column; }
.project-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.project-icon { color: var(--portfolio-primary); }
.project-name { font-family: var(--font-display); font-size: 1.75rem; }
.project-tagline { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.project-description { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.25rem; }
.project-description strong { color: var(--text-primary); }
.project-features { list-style: none; margin-bottom: 1.25rem; }
.project-features li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); padding: 0.3rem 0; }
.project-features li svg { color: var(--toporahma-color); flex-shrink: 0; }
.project-tech { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.tech-tag { padding: 0.3rem 0.75rem; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3); border-radius: 50px; font-size: 0.75rem; color: var(--portfolio-primary); }
.project-actions { display: flex; gap: 1rem; margin-top: auto; }
.btn-project { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 50px; font-family: var(--font-display); font-size: 0.85rem; transition: var(--transition-fast); cursor: pointer; border: none; }
.btn-project.primary { background: var(--toporahma-color); color: white; }
.btn-project.primary.ysi-btn { background: var(--ysi-color); }
.btn-project.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,185,129,0.4); }
.btn-project.secondary { background: transparent; border: 1px solid var(--glass-border); color: var(--text-secondary); }
.btn-project.secondary:hover { border-color: var(--text-primary); color: var(--text-primary); }

.section-cv { background: linear-gradient(180deg, var(--bg-darker), var(--bg-dark)); }
.cv-container { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; max-width: 1100px; margin: 0 auto; }
.cv-sidebar { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2rem; text-align: center; position: sticky; top: 100px; height: fit-content; }
.cv-photo { margin-bottom: 1.5rem; }
.photo-frame { width: 120px; height: 120px; margin: 0 auto; background: var(--portfolio-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.photo-initials { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: white; }
.cv-name { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.25rem; }
.cv-title { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.cv-contact-mini { margin-bottom: 1.5rem; }
.cv-contact-mini .contact-item { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.cv-languages { margin-bottom: 1.5rem; text-align: left; }
.cv-languages h4 { font-size: 0.85rem; margin-bottom: 1rem; color: var(--text-muted); }
.lang-item { margin-bottom: 0.75rem; }
.lang-name { font-size: 0.85rem; color: var(--text-secondary); display: block; margin-bottom: 0.25rem; }
.lang-level { height: 4px; background: var(--glass-border); border-radius: 2px; overflow: hidden; }
.lang-fill { height: 100%; background: var(--accent-cyan); border-radius: 2px; }
.cv-download { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--portfolio-gradient); border-radius: 50px; color: white; font-size: 0.9rem; transition: var(--transition-fast); }
.cv-download:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99,102,241,0.4); }
.cv-main { display: flex; flex-direction: column; gap: 2.5rem; }
.cv-section-title { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--glass-border); color: var(--accent-cyan); }
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--glass-border); }
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-marker { position: absolute; left: -2rem; top: 0.25rem; width: 12px; height: 12px; background: var(--portfolio-primary); border-radius: 50%; transform: translateX(-5px); }
.timeline-content { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.25rem; }
.timeline-date { display: inline-block; font-size: 0.75rem; color: var(--accent-cyan); margin-bottom: 0.5rem; }
.timeline-content h5 { font-size: 1rem; margin-bottom: 0.25rem; }
.timeline-company { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.timeline-desc { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6; }
.skills-bars { display: flex; flex-direction: column; gap: 1.25rem; }
.skill-bar-item { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1rem 1.25rem; }
.skill-info { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.skill-name { font-size: 0.9rem; }
.skill-percent { font-size: 0.85rem; color: var(--accent-cyan); font-family: var(--font-code); }
.skill-bar { height: 6px; background: var(--glass-border); border-radius: 3px; overflow: hidden; }
.skill-progress { height: 100%; background: var(--portfolio-gradient); border-radius: 3px; transition: width 1s ease; }

.section-gallery { background: var(--bg-dark); }
.gallery-filters { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.gallery-filter { padding: 0.5rem 1.25rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50px; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; transition: var(--transition-fast); }
.gallery-filter:hover { border-color: var(--accent-cyan); color: var(--text-primary); }
.gallery-filter.active { background: var(--portfolio-gradient); border-color: transparent; color: white; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.gallery-item { position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; cursor: pointer; }
.gallery-item.large { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--text-muted); }
.gallery-label { font-size: 0.9rem; }
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; opacity: 0; transition: var(--transition-fast); }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.overlay-title { font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.25rem; color: white; }
.overlay-cat { font-size: 0.8rem; color: var(--accent-cyan); }

.section-contact { background: linear-gradient(180deg, var(--bg-dark), var(--bg-darker)); }
.contact-intro { text-align: center; max-width: 600px; margin: 0 auto 3rem; color: var(--text-secondary); font-size: 1.1rem; }
.contact-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; max-width: 1000px; margin: 0 auto; }
.contact-info-cards { display: flex; flex-direction: column; gap: 1rem; }
.contact-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.5rem; text-align: center; transition: var(--transition-fast); }
.contact-card:hover { border-color: var(--accent-cyan); }
.contact-card .contact-icon { color: var(--accent-cyan); margin-bottom: 0.75rem; }
.contact-card h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.contact-card p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; }
.contact-link { color: var(--accent-cyan); font-size: 0.85rem; }
.contact-note { font-size: 0.8rem; color: var(--text-muted); }
.contact-form { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.85rem 1rem; background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); border-radius: 10px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem; transition: var(--transition-fast); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--portfolio-primary); box-shadow: 0 0 20px rgba(99,102,241,0.2); }
.form-group textarea { resize: vertical; min-height: 120px; }
.btn-submit { width: 100%; }

.fab-platform { position: fixed; bottom: 2rem; right: 2rem; display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; background: var(--portfolio-gradient); border-radius: 50px; color: white; font-family: var(--font-display); font-size: 0.9rem; box-shadow: 0 10px 30px rgba(99,102,241,0.4); z-index: 100; transition: var(--transition-normal); }
.fab-platform:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(99,102,241,0.5); }
.fab-text { display: none; }
@media (min-width: 768px) { .fab-text { display: inline; } }

.portfolio-footer .footer-tagline { color: var(--portfolio-primary); }

@media (max-width: 1024px) {
    .about-container-portfolio { grid-template-columns: 1fr; gap: 3rem; }
    .about-image { display: flex; justify-content: center; }
    .skills-grid { grid-template-columns: 1fr; }
    .project-card { grid-template-columns: 1fr !important; direction: ltr !important; }
    .project-card > * { direction: ltr !important; }
    .cv-container { grid-template-columns: 1fr; }
    .cv-sidebar { position: relative; top: 0; max-width: 350px; margin: 0 auto; }
    .contact-container { grid-template-columns: 1fr; }
    .contact-info-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .contact-card { flex: 1; min-width: 200px; }
}

/* Gallery image styles */
.gallery-img { width: 100%; height: 100%; object-fit: cover; }
.gallery-img-contain { object-fit: contain !important; background: rgba(0,0,0,0.3); padding: 1rem; }

/* Avatar image styles */
.avatar-img { width: 100%; height: 100%; object-fit: fill; border-radius: 20px; }

/* Navbar logo image */
.nav-logo-img { height: 28px; width: auto; object-fit: contain; }
.nav-logo-toporahma { display: flex; align-items: center; gap: 0.5rem; }

/* Button spinner */
.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .portfolio-hero { padding: 100px 4% 60px; }
    .hero-brands { flex-direction: column; align-items: center; }
    .brand-card { width: 100%; max-width: 280px; }
    .hero-titles { flex-direction: column; gap: 0.25rem; }
    .title-separator { display: none; }
    .hero-tagline { flex-direction: column; text-align: center; }
    .portfolio-page .section-header { flex-wrap: wrap; }
    .section-line { display: none; }
    .gallery-item.large { grid-column: span 1; grid-row: span 1; }
    .gallery-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-row { grid-template-columns: 1fr; }
    .fab-platform { bottom: 1.5rem; right: 1.5rem; padding: 0.85rem; border-radius: 50%; }
    .contact-info-cards { flex-direction: column; }
    .contact-card { min-width: auto; }
    /* Projects cards */
    .projects-showcase { gap: 2rem; }
    .project-card { padding: 1.5rem; gap: 1.5rem; }
    .project-name { font-size: 1.3rem; }
    /* CV sidebar */
    .cv-sidebar { padding: 1.5rem; }
    .image-frame { width: 220px; height: 260px; }
}

@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .hero-name { font-size: clamp(2rem, 10vw, 3rem); }
    .brand-card { padding: 0.85rem 1.25rem; }
}