/* ════════════════════════════════════════════════════════
   BLUE PREMIUM THEME — Advanced Animations
   🌍 Blue = পৃথিবীর সবচেয়ে জনপ্রিয় রঙ (৩৩%+ globally)
   index.php / portfolio.php তে:
   <link rel="stylesheet" href="assets/css/style-blue.css">
   ════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

/* ── CSS Variables ──────────────────────────────────── */
:root {
    --accent:       #3B82F6;
    --accent2:      #60A5FA;
    --accent3:      #06B6D4;   /* Cyan complement */
    --accent-hover: #5B9AFF;
    --accent-glow:  rgba(59,130,246,.28);
    --accent-faint: rgba(59,130,246,.07);
    --grad:         linear-gradient(135deg,#2563EB,#06B6D4);
    --grad2:        linear-gradient(135deg,#1D4ED8,#3B82F6,#06B6D4);
    --radius:       14px;
    --radius-sm:    10px;
    --transition:   .3s cubic-bezier(.4,0,.2,1);
    --sidebar-w:    290px;
    --font-main:    'Inter','Segoe UI',sans-serif;
    --font-heading: 'Plus Jakarta Sans','Inter',sans-serif;
    --shadow-blue:  0 8px 32px rgba(59,130,246,.22);
}

/* ── DARK MODE ──────────────────────────────────────── */
[data-theme="dark"] {
    --bg:         #060810;
    --bg2:        #090C1A;
    --card:       #0C1120;
    --card2:      #0F1428;
    --border:     rgba(59,130,246,.12);
    --border2:    rgba(59,130,246,.28);
    --text:       #E2E9FF;
    --text2:      #8892C0;
    --muted:      #4A5280;
    --sidebar-bg: #040610;
    --nav-link:   #6070A0;
    --input-bg:   #090C1A;
    --scroll-bar: #0C1120;
    --scroll-thumb:#1E2545;
    --glow-card:  0 0 0 1px rgba(59,130,246,.1),0 4px 24px rgba(0,0,0,.5);
    --bg-pattern: radial-gradient(ellipse at 20% 20%,rgba(37,99,235,.08) 0%,transparent 50%),
                  radial-gradient(ellipse at 80% 80%,rgba(6,182,212,.06) 0%,transparent 50%);
}

/* ── LIGHT MODE ─────────────────────────────────────── */
[data-theme="light"] {
    --bg:         #EEF3FF;
    --bg2:        #E4ECFF;
    --card:       #FFFFFF;
    --card2:      #F5F8FF;
    --border:     rgba(37,99,235,.14);
    --border2:    rgba(37,99,235,.38);
    --text:       #0F1640;
    --text2:      #2C3C78;
    --muted:      #7080B0;
    --sidebar-bg: #FFFFFF;
    --nav-link:   #3A4A88;
    --input-bg:   #F5F8FF;
    --scroll-bar: #E4ECFF;
    --scroll-thumb:#B8C8F0;
    --glow-card:  0 2px 16px rgba(37,99,235,.08);
    --bg-pattern: none;
}

/* ════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ════════════════════════════════════════════════════════ */

/* Entrance: fade + slide up */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:translateY(0);    }
}

/* Entrance: fade in */
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}

/* Gradient background shift */
@keyframes gradientShift {
    0%,100% { background-position:0% 50%; }
    50%      { background-position:100% 50%; }
}

/* Rotating ring around avatar */
@keyframes spinRing {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}

/* Floating (gentle up/down) */
@keyframes float {
    0%,100% { transform:translateY(0px); }
    50%      { transform:translateY(-8px); }
}

/* Pulse glow on buttons */
@keyframes pulseGlow {
    0%,100% { box-shadow:0 0 12px rgba(59,130,246,.35); }
    50%      { box-shadow:0 0 32px rgba(59,130,246,.65),0 0 60px rgba(6,182,212,.25); }
}

/* Shimmer sweep on thumbnails */
@keyframes shimmer {
    from { background-position:-200% 0; }
    to   { background-position: 200% 0; }
}

/* Section title underline expand */
@keyframes lineExpand {
    from { width:0; opacity:0; }
    to   { width:52px; opacity:1; }
}

/* Typewriter cursor */
@keyframes typeCursor {
    0%,100% { border-color:var(--accent2); }
    50%      { border-color:transparent; }
}

/* Stat card value pop */
@keyframes countPop {
    0%   { transform:scale(0.7); opacity:0; }
    70%  { transform:scale(1.08); }
    100% { transform:scale(1);   opacity:1; }
}

/* Progress bar fill + shimmer */
@keyframes barFill {
    from { width:0; }
    to   { width:var(--target-width); }
}
@keyframes barShimmer {
    from { background-position:-100% 0; }
    to   { background-position: 200% 0; }
}

/* Card hover line sweep */
@keyframes lineSweep {
    from { transform:scaleX(0); transform-origin:left; }
    to   { transform:scaleX(1); transform-origin:left; }
}

/* Dot availability pulse */
@keyframes dotPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.6); }
    50%      { box-shadow:0 0 0 6px rgba(34,197,94,0); }
}

/* Social icon bounce */
@keyframes socialBounce {
    0%,100% { transform:translateY(0) scale(1); }
    40%      { transform:translateY(-6px) scale(1.1); }
    60%      { transform:translateY(-3px) scale(1.05); }
}

/* Button gradient move */
@keyframes btnGrad {
    0%   { background-position:0% 50%; }
    100% { background-position:100% 50%; }
}

/* ════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
    font-family:var(--font-main);
    background:var(--bg);
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
    transition:background var(--transition),color var(--transition);
    background-image:var(--bg-pattern);
}

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--scroll-bar); }
::-webkit-scrollbar-thumb {
    background:var(--scroll-thumb);
    border-radius:3px;
    transition:background .3s;
}
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

.layout-wrap { display:flex; min-height:100vh; }

/* ════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════ */
.sidebar {
    width:var(--sidebar-w);
    min-height:100vh;
    background:var(--sidebar-bg);
    border-right:1px solid var(--border);
    position:fixed;
    top:0; left:0; z-index:200;
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow-y:auto;
    scrollbar-width:none;
    transition:transform var(--transition),background var(--transition);
    box-shadow:4px 0 30px rgba(0,0,0,.2);
}
.sidebar::-webkit-scrollbar { display:none; }

/* Animated mesh background on sidebar */
.sidebar::after {
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 50% 10%,rgba(59,130,246,.12) 0%,transparent 55%),
        radial-gradient(ellipse at 20% 90%,rgba(6,182,212,.07) 0%,transparent 50%);
    pointer-events:none;
    z-index:0;
    animation:gradientShift 8s ease infinite;
    background-size:200% 200%;
}

.sidebar-bg-img {
    position:relative;
    width:100%;
    z-index:1;
    overflow:hidden;
}
.sidebar-bg-img::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 20%,var(--sidebar-bg) 100%);
    z-index:1;
}
.sidebar-bg-img img {
    width:100%; height:200px;
    object-fit:cover;
    opacity:1.12;
    display:block;

}

/* Profile */
.sidebar-profile {
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center;
    margin-top:-55px;
    padding:0 20px 16px;
    text-align:center;
    animation:fadeInUp .7s ease both;
}

/* Rotating ring around avatar */
.profile-avatar {
    width:110px; height:110px;
    border-radius:50%;
    object-fit:cover;
    background:var(--card);
    position:relative;
    z-index:1;
    transition:transform .4s ease;
    /* The ring is created via the ::before on a wrapper - but since img can't have pseudo, we use box-shadow layers */
    box-shadow:
        0 0 0 3px var(--sidebar-bg),
        0 0 0 5px var(--accent),
        0 0 0 9px rgba(59,130,246,.2),
        0 0 30px rgba(59,130,246,.25);
    animation:float 5s ease-in-out infinite;
}
.profile-avatar:hover {
    transform:scale(1.07) rotate(3deg);
    box-shadow:0 0 0 3px var(--sidebar-bg), 0 0 0 5px var(--accent2),
               0 0 0 9px rgba(96,165,250,.3), 0 0 50px rgba(59,130,246,.5);
    animation:none;
}
.profile-avatar.placeholder {
    display:flex; align-items:center; justify-content:center;
    font-size:2.8rem; color:var(--accent2);
    background:var(--card);
}

.profile-name {
    font-family:var(--font-heading);
    font-size:1.18rem; font-weight:700;
    color:var(--text);
    margin-top:14px; letter-spacing:.2px;
    display:flex; align-items:center; gap:8px;
    justify-content:center;
}

/* Online dot */
.profile-name::after {
    content:'';
    width:8px; height:8px;
    border-radius:50%;
    background:#22c55e;
    flex-shrink:0;
    animation:dotPulse 2.5s ease-in-out infinite;
}

.profile-roles { min-height:48px; margin-top:8px; padding:0 10px; }
.role-text {
    color:var(--accent2);
    font-size:.82rem; font-weight:500;
    border-right:2.5px solid var(--accent);
    display:inline-block;
    white-space:nowrap; overflow:hidden;
    animation:typeCursor .7s step-end infinite;
}

/* Social links */
.social-links {
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:7px; margin-top:14px; padding:0 14px;
}
.social-link {
    width:34px; height:34px;
    border-radius:10px;
    background:var(--card);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); font-size:.82rem;
    text-decoration:none;
    transition:all .28s cubic-bezier(.34,1.56,.64,1);
    position:relative; overflow:hidden;
}
.social-link::before {
    content:'';
    position:absolute; inset:0;
    background:var(--grad);
    opacity:0;
    transition:opacity .28s;
}
.social-link:hover {
    color:#fff;
    border-color:transparent;
    transform:translateY(-4px) scale(1.12);
    box-shadow:0 8px 20px rgba(59,130,246,.4);
    animation:socialBounce .5s ease;
}
.social-link:hover::before { opacity:1; }
.social-link i { position:relative; z-index:1; }

/* Sidebar Nav */
.sidebar-nav {
    width:100%; padding:10px 12px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    margin-top:14px;
}
.nav-section-label {
    font-size:.6rem; font-weight:700;
    text-transform:uppercase; letter-spacing:1.5px;
    color:var(--muted); padding:8px 10px 4px;
    display:block; opacity:.5;
}
.sidebar-nav a {
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; text-decoration:none;
    color:var(--nav-link); font-size:.85rem; font-weight:500;
    border-radius:10px; margin:2px 0;
    transition:all .25s; position:relative;
    overflow:hidden;
}
/* Animated fill background on hover */
.sidebar-nav a::before {
    content:'';
    position:absolute; inset:0;
    background:var(--grad);
    opacity:0;
    transition:opacity .3s;
    border-radius:10px;
}
/* Left indicator bar */
.sidebar-nav a::after {
    content:'';
    position:absolute;
    left:0; top:18%; bottom:18%;
    width:2.5px;
    background:var(--accent2);
    border-radius:0 2px 2px 0;
    transform:scaleY(0);
    transition:transform .25s;
}
.sidebar-nav a:hover { color:#208eff; transform:translateX(3px); }
.sidebar-nav a:hover::before { opacity:.15; }
.sidebar-nav a.active {
    color:var(--accent2);
    background:rgba(59,130,246,.08);
    box-shadow:inset 0 0 0 1px rgba(59,130,246,.2);
}
.sidebar-nav a.active::after { transform:scaleY(1); }
.sidebar-nav a i { width:18px; text-align:center; font-size:.88rem; position:relative; z-index:1; }
.sidebar-nav a span { position:relative; z-index:1; }

/* Sidebar Buttons */
.sidebar-buttons { display:flex; flex-direction:column; gap:10px; padding:16px 16px; width:100%; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 20px; border-radius:var(--radius-sm);
    font-family:var(--font-main); font-size:.85rem; font-weight:600;
    text-decoration:none; cursor:pointer; border:none;
    transition:all .28s; letter-spacing:.2px;
    position:relative; overflow:hidden;
}
.btn-primary {
    background:var(--grad);
    background-size:200% 200%;
    color:#fff;
    box-shadow:0 4px 16px rgba(37,99,235,.4);
    animation:pulseGlow 3s ease-in-out infinite;
}
.btn-primary:hover {
    background-size:120% 120%;
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(37,99,235,.55),0 0 60px rgba(6,182,212,.2);
    animation:none;
    color:#fff;
}
/* Ripple effect on click */
.btn-primary::after {
    content:'';
    position:absolute; inset:0;
    background:rgba(255,255,255,.15);
    transform:scale(0);
    border-radius:inherit;
    transition:transform .4s;
}
.btn-primary:active::after { transform:scale(2); opacity:0; }

.btn-outline {
    background:transparent;
    color:var(--accent2);
    border:1.5px solid rgba(59,130,246,.4);
}
.btn-outline:hover {
    background:rgba(59,130,246,.08);
    border-color:var(--accent);
    color:var(--accent2);
    transform:translateY(-2px);
    box-shadow:0 4px 16px rgba(59,130,246,.2);
}

/* ── Mobile Header ───────────────────────────────────── */
.mobile-avatar{
    width: 40px;
    height: 40px;
    border-radius: 20%;
    object-fit: cover;
    background: var(--card);
    position: relative;
    z-index: 1;
    transition: transform .4s ease;
    box-shadow: 0 0 0 3px var(--sidebar-bg), 0 0 0 5px var(--accent), 0 0 0 9px rgba(59, 130, 246, .2), 0 0 30px rgba(59, 130, 246, .25);
}

.profile{
   display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end; 
    
}
.mobile-profile-name{
margin-left: 15px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    margin-top: -10px
}
.mh{
    text-decoration: none;
}
.mobile-header {
    display:none;
    position:fixed; top:0; left:0; right:0; height:80px;
    background:var(--sidebar-bg);
    border-bottom:1px solid var(--border);
    z-index:300;
    align-items:center; justify-content:space-between;
    padding:0 16px; gap:12px;
    backdrop-filter:blur(16px);
    box-shadow:0 2px 20px rgba(0,0,0,.2);
}
.mobile-logo {
    font-family:var(--font-heading);
    font-weight:800; color:var(--accent2);
    font-size:1.05rem; text-decoration:none;
    background:var(--grad2);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.mobile-actions { display:flex; align-items:center; gap:10px; }

.hamburger {
    background:none; border:none; cursor:pointer;
    color:var(--text2); font-size:1.35rem;
    display:flex; align-items:center; padding:4px;
    transition:color var(--transition);
}
.hamburger:hover { color:var(--accent2); }

.sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(4,6,16,.75); z-index:150;
    backdrop-filter:blur(4px);
}
.sidebar-overlay.active { display:block; }

/* ── Theme Toggle ────────────────────────────────────── */
.theme-toggle {
    width:34px; height:34px; border-radius:9px;
    background:var(--card); border:1px solid var(--border);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--text2); font-size:.9rem;
    transition:all .28s; flex-shrink:0;
}
.theme-toggle:hover {
    background:var(--grad); color:#fff; border-color:transparent;
    box-shadow:0 4px 14px rgba(59,130,246,.4);
    transform:rotate(15deg) scale(1.05);
}

/* ════════════════════════════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════════════════════════════ */
.main-content { margin-left:var(--sidebar-w); flex:1; min-height:100vh; }
.topbar { display:flex; justify-content:flex-end; padding:18px 44px 0; gap:10px; }

/* ── Sections ────────────────────────────────────────── */
section { padding:50px 35px; }
section:not(:last-child) { border-bottom:1px solid var(--border); }

/* Section entrance animation (triggered by IntersectionObserver in main.js) */
section { animation:fadeInUp .6s ease both; }

.section-eyebrow {
    font-size:.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:2.5px;
    color:var(--accent); display:block;
    margin-bottom:6px; opacity:.85;
}
.section-title {
    font-family:var(--font-heading);
    font-size:1.9rem; font-weight:800;
    color:var(--text); display:inline-block;
    margin-bottom:8px; letter-spacing:-.4px;
    position:relative;
}
/* Animated gradient text on section titles */
.section-title {
    background:linear-gradient(120deg,var(--text2) 0%,var(--accent) 60%,var(--text) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; background-size:200%;
    animation:gradientShift 5s ease infinite;
}
/* Animated underline */
.section-title::after {
    content:'';
    position:absolute; bottom:-7px; left:0;
    height:3px; width:0;
    background:var(--grad);
    border-radius:2px;
    animation:lineExpand .8s .4s cubic-bezier(.34,1.56,.64,1) both;
}
.section-subtitle {
    color:var(--text2); font-size:1rem;
    margin-top:10px; margin-bottom:5px;
}

/* ════════════════════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════════════════════ */
 .about-subtitle{
color: #266ce9; 
font-size: 1.5rem;
 font-weight: bold; 
 }  
   
.about-text {
    color:var(--text2); line-height:1.9;
    font-size:.95rem;
    animation:fadeIn .8s ease both;
}
.about-text p { margin-bottom:14px; }
.about-text strong { color:var(--accent2); font-weight:600; }
.about-text h2 {
    font-family:var(--font-heading); font-size:1.2rem; font-weight:700;
    color:var(--text); margin:28px 0 10px;
    background:var(--grad); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
}
.about-text ul { margin:10px 0 14px 20px; }
.about-text ul li { margin-bottom:5px; }

/* ── Services ────────────────────────────────────────── */
.services-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:18px; margin-top:46px;
}
.service-card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px 22px;
    transition:all .32s cubic-bezier(.34,1.56,.64,1);
    position:relative; overflow:hidden;
    box-shadow:var(--glow-card);
    animation:fadeInUp .6s ease both;
}
/* Animated gradient top line */
.service-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--grad);
    transform:scaleX(0); transform-origin:left;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
/* Glow background on hover */
.service-card::after {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 0%,rgba(59,130,246,.08) 0%,transparent 60%);
    opacity:0; transition:opacity .3s;
}
.service-card:hover {
    border-color:rgba(59,130,246,.4);
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 24px 50px rgba(0,0,0,.35),0 0 0 1px rgba(59,130,246,.25),0 0 40px rgba(59,130,246,.12);
}
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover::after  { opacity:1; }

.service-icon {
    width:50px; height:50px; border-radius:12px;
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; color:var(--accent2);
    margin-bottom:18px;
    transition:all .32s cubic-bezier(.34,1.56,.64,1);
    position:relative; z-index:1;
}
.service-card:hover .service-icon {
    background:var(--grad); color:#fff;
    border-color:transparent;
    transform:rotate(-5deg) scale(1.1);
    box-shadow:0 8px 24px rgba(59,130,246,.4);
}
.service-card h3 {
    font-size:.92rem; font-weight:600; color:var(--text);
    margin-bottom:8px; position:relative; z-index:1;
}
.service-card p {
    font-size:.82rem; color:var(--text2);
    line-height:1.7; position:relative; z-index:1;
}

/* ── Stats ───────────────────────────────────────────── */
.stats-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:16px; margin-top:46px;
}
.stat-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:28px 18px;
    text-align:center;
    transition:all .32s cubic-bezier(.34,1.56,.64,1);
    position:relative; overflow:hidden;
    animation:countPop .7s cubic-bezier(.34,1.56,.64,1) both;
}
.stat-card::before {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 0%,rgba(59,130,246,.07) 0%,transparent 70%);
    opacity:0; transition:opacity .3s;
}
.stat-card::after {
    content:'';
    position:absolute; bottom:0; left:0; right:0; height:2px;
    background:var(--grad);
    transform:scaleX(0);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.stat-card:hover {
    border-color:rgba(59,130,246,.35);
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 14px 36px rgba(0,0,0,.3),0 0 0 1px rgba(59,130,246,.2);
}
.stat-card:hover::before { opacity:1; }
.stat-card:hover::after  { transform:scaleX(1); }

.stat-value {
    font-family:var(--font-heading);
    font-size:2.4rem; font-weight:800;
    background:var(--grad2);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; line-height:1; margin-bottom:8px;
}
.stat-label {
    font-size:.73rem; color:var(--muted); font-weight:500;
    text-transform:uppercase; letter-spacing:1px;
}

/* ════════════════════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════════════════════ */
#testimonials { background:var(--bg2); }
.testimonials-wrap { position:relative; overflow:hidden; }
.testimonials-slider { display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.testimonial-slide { min-width:100%; padding:4px; }
.testimonial-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:32px 28px;
    position:relative; overflow:hidden;
    box-shadow:var(--glow-card);
    transition:border-color .3s;
}
.testimonial-card::before {
    content:'\201C';
    position:absolute; top:12px; left:22px;
    font-size:6rem;
    background:var(--grad);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    font-family:Georgia,serif; line-height:1; opacity:.18;
    pointer-events:none;
}
.testimonial-card::after {
    content:'';
    position:absolute; top:0; right:0;
    width:140px; height:140px;
    background:radial-gradient(circle,rgba(59,130,246,.07) 0%,transparent 70%);
    pointer-events:none;
}
.testimonial-text {
    color:var(--text2); font-size:.9rem;
    line-height:1.85; margin-bottom:22px; font-style:italic;
}
.testimonial-author { display:flex; align-items:center; gap:12px; }
.author-avatar {
    width:46px; height:46px; border-radius:12px;
    background:var(--grad); display:flex;
    align-items:center; justify-content:center;
    font-weight:700; color:#fff; font-size:1rem; flex-shrink:0;
    box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.author-name { font-weight:600; color:var(--text); font-size:.9rem; }
.author-location { font-size:.76rem; color:var(--muted); }
.testimonial-stars {
    color:var(--accent2); font-size:.8rem; margin-top:2px;
    text-shadow:0 0 8px rgba(59,130,246,.4);
}

.slider-controls {
    display:flex; align-items:center; justify-content:center;
    gap:12px; margin-top:26px;
}
.slider-btn {
    width:40px; height:40px; border-radius:10px;
    background:var(--card); border:1px solid var(--border);
    color:var(--text2); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:.9rem; transition:all .28s;
}
.slider-btn:hover {
    background:var(--grad); color:#fff; border-color:transparent;
    transform:scale(1.08);
    box-shadow:var(--shadow-blue);
}
.slider-dots { display:flex; gap:7px; }
.slider-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--border); cursor:pointer;
    transition:all .3s; border:none; padding:0;
}
.slider-dot.active {
    background:var(--accent); width:22px; border-radius:4px;
    box-shadow:0 0 10px rgba(59,130,246,.5);
}

/* ── Platforms ───────────────────────────────────────── */
#platforms { padding:52px 44px; }
.platforms-grid {
    display:flex; flex-wrap:wrap; gap:18px;
    justify-content:center; margin-top:32px;
}
.platform-card {
    width:96px; height:96px; border-radius:var(--radius);
    background:var(--card); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
    transition:all .32s cubic-bezier(.34,1.56,.64,1);
    overflow:hidden; position:relative;
    box-shadow:var(--glow-card);
}
.platform-card::before {
    content:'';
    position:absolute; inset:0;
    background:var(--grad); opacity:0;
    transition:opacity .3s;
}
.platform-card img {
    width:56px; height:56px;
    object-fit:contain;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
    position:relative; z-index:1;
}
.platform-card:hover {
    border-color:rgba(59,130,246,.4);
    transform:translateY(-8px) rotate(-3deg) scale(1.05);
    box-shadow:0 18px 40px rgba(0,0,0,.3),0 0 0 1px rgba(59,130,246,.25),0 0 30px rgba(59,130,246,.15);
}
.platform-card:hover::before { opacity:.08; }
.platform-card:hover img { transform:scale(1.2) rotate(5deg); }

/* ════════════════════════════════════════════════════════
   SKILLS / RESUME
   ════════════════════════════════════════════════════════ */
#resume .skills-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
    gap:22px; margin-top:10px;
}
.skill-category {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:26px 22px;
    box-shadow:var(--glow-card);
    transition:border-color .3s,transform .3s;
    animation:fadeInUp .6s ease both;
}
.skill-category:hover { border-color:rgba(59,130,246,.3); transform:translateY(-3px); }
.skill-cat-title {
    font-size:.99rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1.5px; color:var(--accent2); margin-bottom:18px;
    display:flex; align-items:center; gap:8px;
}
.skill-cat-title::after {
    content:''; flex:1; height:1px;
    background:linear-gradient(90deg,rgba(59,130,246,.3),transparent);
}
.skill-cat-title i { color:var(--accent); }

.skill-badges { display:flex; flex-wrap:wrap; gap:8px; }
.skill-badge {
    background:rgba(59,130,246,.08);
    border:1px solid rgba(59,130,246,.2);
    color:var(--text2); padding:5px 13px;
    border-radius:20px; font-size:.78rem; font-weight:500;
    transition:all .28s cubic-bezier(.34,1.56,.64,1);
    cursor:default;
}
.skill-badge:hover {
    background:var(--grad); color:#fff; border-color:transparent;
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 6px 16px rgba(59,130,246,.35);
}

/* Animated progress bars */
.skill-bars { display:flex; flex-direction:column; gap:18px; }
.skill-bar-header {
    display:flex; justify-content:space-between;
    align-items:center; margin-bottom:7px;
}
.skill-bar-name { font-size:.84rem; color:var(--text); font-weight:500; }
.skill-bar-pct { font-size:.76rem; color:var(--accent2); font-weight:700; }
.skill-bar-track {
    height:6px; background:rgba(59,130,246,.1);
    border-radius:3px; overflow:hidden; position:relative;
}
.skill-bar-fill {
    height:100%; width:0; border-radius:3px;
    background:linear-gradient(90deg,#1D4ED8,#3B82F6,#06B6D4);
    background-size:200% 100%;
    transition:width 1.4s cubic-bezier(.4,0,.2,1);
    position:relative;
}
.skill-bar-fill.animated {
    width:var(--target-width);
    animation:barShimmer 2.5s .5s ease infinite;
}
/* Shimmer sweep on filled bar */
.skill-bar-fill::after {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
    background-size:200% 100%;
    animation:shimmer 2.5s 1s ease infinite;
}
.skill-bar-fill { box-shadow:0 0 12px rgba(59,130,246,.4); }

/* ════════════════════════════════════════════════════════
   PORTFOLIO / WORKS
   ════════════════════════════════════════════════════════ */
#works .portfolio-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    gap:20px; margin-top:10px;
}
.portfolio-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    text-decoration:none; display:block;
    transition:all .35s cubic-bezier(.34,1.56,.64,1);
    box-shadow:var(--glow-card);
    animation:fadeInUp .6s ease both;
}
.portfolio-card:hover {
    border-color:rgba(59,130,246,.38);
    transform:translateY(-8px) scale(1.015);
    box-shadow:0 26px 55px rgba(0,0,0,.4),0 0 0 1px rgba(59,130,246,.25),0 0 40px rgba(59,130,246,.12);
}
.portfolio-thumb {
    position:relative; padding-top:60%; overflow:hidden;
    background:var(--card2);
}
.portfolio-thumb img {
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.portfolio-card:hover .portfolio-thumb img { transform:scale(1.1); }
.portfolio-thumb-placeholder {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-size:3rem; color:var(--accent); opacity:.25;
}
.portfolio-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(37,99,235,.88),rgba(6,182,212,.82));
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .3s;
}
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-overlay i { font-size:2rem; color:#fff; }

.portfolio-info { padding:18px 20px; }
.portfolio-info-top {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:6px; margin-bottom:7px;
}
.portfolio-cat {
    font-size:.85rem; font-weight:700; color:var(--accent2);
    text-transform:uppercase; letter-spacing:1.2px;
}
.portfolio-title {
    font-size:.9rem; font-weight:600; color:var(--text);
    transition:color .3s; line-height:1.4;
}
.portfolio-card:hover .portfolio-title { color:var(--accent2); }

/* Platform badges on cards */
.portfolio-platform {
    display:inline-flex; align-items:center; gap:4px;
    font-size:.67rem; font-weight:700; padding:3px 9px;
    border-radius:20px; letter-spacing:.3px; flex-shrink:0;
    transition:all .28s; border:1px solid transparent;
}
.portfolio-card:hover .portfolio-platform { transform:translateY(-1px); }
.plat-fiverr   { background:rgba(29,191,115,.12); color:#1DBF73; border-color:rgba(29,191,115,.28); }
.plat-upwork   { background:rgba(111,218,68,.12); color:#5aaa20; border-color:rgba(111,218,68,.28); }
.plat-facebook { background:rgba(24,119,242,.12); color:#4096FF; border-color:rgba(24,119,242,.28); }
.plat-kwork    { background:rgba(255,239,53,.12);  color:#ffef35; border-color:rgba(255,230,55,.28);  }
.plat-others   { background:rgba(59,130,246,.1);  color:var(--accent2); border-color:var(--border); }

.empty-state { text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state i { font-size:2.8rem; margin-bottom:16px; display:block; opacity:.3; }

.fa-fiverr:before {
    content: "\f3a2";
}

/* ════════════════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════════════════ */
#contact .contact-grid {
    display:grid; grid-template-columns:1fr 1.4fr;
    gap:40px; margin-top:10px;
}
.contact-info h3 {
    font-size:1.05rem; font-weight:600;
    color:var(--text); margin-bottom:20px;
}
.contact-info-item {
    display:flex; gap:14px; margin-bottom:20px;
    align-items:flex-start;
}
.contact-info-icon {
    width:42px; height:42px; border-radius:11px;
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.2);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent2); font-size:.95rem; flex-shrink:0;
    transition:all .28s cubic-bezier(.34,1.56,.64,1);
}
.contact-info-item:hover .contact-info-icon {
    background:var(--grad); color:#fff; border-color:transparent;
    transform:scale(1.1) rotate(-5deg);
    box-shadow:0 6px 18px rgba(59,130,246,.35);
}
.contact-info-label {
    font-size:.7rem; color:var(--muted); text-transform:uppercase;
    letter-spacing:1px; margin-bottom:3px; font-weight:600;
}
.contact-info-val { font-size:.88rem; color:var(--text2); }
.contact-info-val a { color:var(--text2); text-decoration:none; transition:color .3s; }
.contact-info-val a:hover { color:var(--accent2); }

.contact-form-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:32px 28px;
    box-shadow:var(--glow-card);
    transition:border-color .3s;
}
.contact-form-card:hover { border-color:rgba(59,130,246,.25); }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { margin-bottom:16px; }
.form-group label {
    display:block; font-size:.72rem; font-weight:600;
    color:var(--muted); margin-bottom:7px;
    text-transform:uppercase; letter-spacing:.7px;
}
.form-control {
    width:100%; padding:11px 15px;
    background:var(--input-bg);
    border:1.5px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text); font-family:var(--font-main);
    font-size:.87rem; transition:all .28s; outline:none;
}
.form-control:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(59,130,246,.15),0 0 20px rgba(59,130,246,.1);
    background:var(--card2);
}
.form-control::placeholder { color:var(--muted); opacity:.7; }
textarea.form-control { resize:vertical; min-height:130px; }
.form-submit {
    width:100%; padding:13px;
    background:var(--grad); color:#fff; border:none;
    border-radius:var(--radius-sm);
    font-size:.92rem; font-weight:700; cursor:pointer;
    font-family:var(--font-main);
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:all .28s; position:relative; overflow:hidden;
    box-shadow:0 4px 20px rgba(37,99,235,.4);
}
.form-submit:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(37,99,235,.55),0 0 60px rgba(6,182,212,.2);
}
.form-submit::after {
    content:''; position:absolute; inset:0;
    background:rgba(255,255,255,.12);
    transform:translateX(-100%); transition:transform .4s;
}
.form-submit:hover::after { transform:translateX(100%); }

.alert { padding:12px 16px; border-radius:var(--radius-sm); font-size:.85rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.alert-success { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:#86efac; }
.alert-error   { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.25);  color:#fca5a5; }

/* ════════════════════════════════════════════════════════
   PORTFOLIO DETAIL PAGE
   ════════════════════════════════════════════════════════ */
.portfolio-detail-wrap { padding:60px 44px; }
.portfolio-detail-wrap h1 {
    font-family:var(--font-heading);
    font-size:2rem; font-weight:800;
    background:var(--grad2); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:24px; letter-spacing:-.4px; line-height:1.2;
}
.portfolio-detail-meta {
    display:flex; flex-wrap:wrap;
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    margin-bottom:28px; box-shadow:var(--glow-card);
}
.meta-item {
    padding:16px 20px;
    border-right:1px solid var(--border);
    flex:1; min-width:140px;
}
.meta-item:last-child { border-right:none; }
.meta-label {
    font-size:.67rem; font-weight:700;
    text-transform:uppercase; letter-spacing:1.2px;
    color:var(--accent2); margin-bottom:5px;
}
.meta-val { font-size:.86rem; color:var(--text2); }
.portfolio-detail-img {
    width:100%; border-radius:var(--radius);
    border:1px solid var(--border); overflow:hidden;
    margin-bottom:28px; box-shadow:var(--glow-card);
}
.portfolio-detail-img img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s ease;
}
.portfolio-detail-img:hover img { transform:scale(1.02); }
.portfolio-detail-desc { color:var(--text2); line-height:1.9; font-size:.93rem; }
.portfolio-detail-desc p { margin-bottom:16px; }
.detail-nav {
    display:flex; gap:10px; margin-top:36px;
    padding-top:26px; border-top:1px solid var(--border);
    flex-wrap:wrap;
}

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
    background:var(--bg2); border-top:1px solid var(--border);
    text-align:center; padding:22px;
    color:var(--muted); font-size:.8rem;
}
.site-footer a { color:var(--accent2); text-decoration:none; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
    :root { --sidebar-w:260px; }
    section { padding:60px 28px; }
    #contact .contact-grid { grid-template-columns:1fr; }
    .portfolio-detail-wrap { padding:50px 28px; }
}
@media (max-width:768px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); box-shadow:8px 0 40px rgba(0,0,0,.6); }
    .mobile-header { display:flex; }
    .main-content { margin-left:0; padding-top:60px; }
    .topbar { display:none; }
    section { padding:48px 18px; }
    .section-title { font-size:1.55rem; }
    .form-row { grid-template-columns:1fr; }
    .portfolio-detail-wrap { padding:36px 18px; }
    .portfolio-detail-img img { height:230px; }
    .portfolio-detail-meta { flex-direction:column; }
    .meta-item { border-right:none; border-bottom:1px solid var(--border); }
    .meta-item:last-child { border-bottom:none; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    /* On mobile: disable some heavy animations for performance */
    .profile-avatar { animation:none; }
    .service-card { animation:none; }
}
@media (max-width:480px) {
    .services-grid { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    #platforms { padding:36px 18px; }
    .sidebar-buttons { padding:14px 12px; }
    .contact-form-card { padding:22px 16px; }
}