/* =====================================================
   JUNAID ALI PORTFOLIO v2 — PUBLIC CSS
   Yellow (#FFD700) + Dark/Light Themes
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

/* ── Variables ── */
:root{--yellow:#FFD700;--yellow-glow:rgba(255,215,0,.35);--yellow-soft:rgba(255,215,0,.12);--bg:#0d0d0d;--bg2:#141414;--bg3:#1a1a1a;--surface:#1e1e1e;--border:rgba(255,215,0,.15);--text:#f0f0f0;--text-muted:#888;--text-sub:#bbb;--radius:14px;--shadow:0 8px 40px rgba(0,0,0,.6);--transition:all 0.4s cubic-bezier(.25,.8,.25,1);--font:'Poppins',sans-serif;--font-mono:'Space Mono',monospace;--nav-h:70px}
body.day{--bg:#f5f5f0;--bg2:#eeede8;--bg3:#e8e7e0;--surface:#fff;--border:rgba(180,140,0,.2);--text:#111;--text-muted:#666;--text-sub:#444;--shadow:0 8px 40px rgba(0,0,0,.12);--yellow-glow:rgba(255,215,0,.25)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);transition:background .5s,color .5s;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--yellow);border-radius:3px}
::selection{background:var(--yellow);color:#000}

/* ── Cursor ── */
.cursor-glow{width:18px;height:18px;background:var(--yellow);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .2s,height .2s;opacity:.8}
.cursor-glow.big{width:48px;height:48px;opacity:.35}
@media(hover:none){.cursor-glow{display:none}}

/* ── Navbar ── */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;display:flex;align-items:center;padding:0 2rem;transition:var(--transition)}
.navbar.scrolled{background:rgba(13,13,13,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 4px 30px rgba(0,0,0,.4)}
body.day .navbar.scrolled{background:rgba(245,245,240,.92)}
.nav-container{width:100%;max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.3rem;letter-spacing:-.5px}
.logo-badge{width:38px;height:38px;background:var(--yellow);color:#000;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;font-family:var(--font-mono);transform:rotate(-3deg);transition:transform .3s}
.nav-logo:hover .logo-badge{transform:rotate(3deg) scale(1.1)}
.logo-text span{color:var(--yellow)}
.nav-logo-img{height:36px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-link{font-size:.82rem;font-weight:500;color:var(--text-muted);position:relative;transition:color .3s}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--yellow);border-radius:2px;transition:width .3s}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.btn-contact-now{display:flex;align-items:center;gap:8px;padding:9px 20px;background:var(--yellow);color:#000!important;font-weight:700;font-size:.82rem;border-radius:50px;border:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;animation:pulseGlow 2.5s ease-in-out infinite;white-space:nowrap}
.btn-contact-now:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--yellow-glow);animation:none}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 var(--yellow-glow)}50%{box-shadow:0 0 0 10px transparent}}
.theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:var(--transition)}
.theme-toggle:hover{border-color:var(--yellow);transform:rotate(20deg)}
.mobile-controls{display:none;align-items:center;gap:8px}
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:none}
.hamburger span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);padding:1.5rem 2rem;z-index:999;flex-direction:column;gap:1rem;opacity:0;transform:translateY(-10px);transition:var(--transition)}
.mobile-nav.open{display:flex;opacity:1;transform:translateY(0)}
.mobile-nav .nav-link{font-size:1rem;padding:.5rem 0;color:var(--text)}

/* ── Hero ── */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:var(--nav-h)}
#three-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 2rem;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;min-height:calc(100vh - var(--nav-h))}
.hero-text{animation:fadeInLeft .9s ease forwards}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:var(--yellow-soft);border:1px solid var(--border);color:var(--yellow);padding:6px 16px;border-radius:50px;font-size:.78rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:1.5rem}
.hero-tag .dot{width:6px;height:6px;background:var(--yellow);border-radius:50%;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hero-title{font-size:clamp(2.4rem,5vw,4rem);font-weight:900;line-height:1.08;letter-spacing:-2px;margin-bottom:1.2rem}
.hero-title .line{display:block}
.hero-title .accent{color:var(--yellow)}
.hero-sub{font-size:1.05rem;color:var(--text-muted);max-width:480px;line-height:1.75;margin-bottom:2.5rem}
.type-cursor{color:var(--yellow);animation:blink .8s step-end infinite}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}
.btn-primary{padding:14px 32px;background:var(--yellow);color:#000;font-weight:700;border-radius:50px;border:none;cursor:pointer;font-family:var(--font);font-size:.95rem;transition:transform .3s,box-shadow .3s;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 35px var(--yellow-glow)}
.btn-secondary{padding:14px 32px;background:transparent;color:var(--text);font-weight:600;border-radius:50px;border:1px solid var(--border);cursor:pointer;font-family:var(--font);font-size:.95rem;transition:var(--transition);display:inline-flex;align-items:center;gap:8px}
.btn-secondary:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-3px)}
.hero-stats{display:flex;gap:2rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.stat{display:flex;flex-direction:column}
.stat-number{font-size:1.8rem;font-weight:800;color:var(--yellow);letter-spacing:-1px;line-height:1;font-family:var(--font-mono)}
.stat-label{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}

/* Hero photo */
.hero-visual{display:flex;justify-content:center;align-items:center;animation:fadeInRight .9s ease forwards}
.hero-img-wrap{position:relative;width:400px;max-width:100%}
.hero-img-glow{position:absolute;inset:-20px;background:radial-gradient(ellipse,var(--yellow-glow),transparent 65%);border-radius:50%;z-index:0;animation:floatGlow 4s ease-in-out infinite}
@keyframes floatGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.hero-photo{position:relative;z-index:1;width:100%;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--border);object-fit:cover;transition:transform .4s}
.hero-img-wrap:hover .hero-photo{transform:scale(1.02) translateY(-4px)}
.hero-img-badge{position:absolute;z-index:2;background:var(--surface);border:1px solid var(--border);border-radius:50px;padding:8px 16px;font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:6px;box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap}
.hero-img-badge i{color:var(--yellow)}
.hero-img-badge:nth-of-type(1){bottom:28px;left:-20px}
.hero-img-badge--2{top:28px;right:-20px}

/* About strip */
.about-strip{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.8rem 2rem}
.about-strip-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.about-strip-item{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:500;color:var(--text-muted)}
.about-strip-item i{color:var(--yellow);font-size:.9rem}
.about-strip-sep{color:var(--border);font-size:1.2rem}

/* ── Sections ── */
.section{padding:100px 2rem;max-width:1280px;margin:0 auto}
.section-full{padding:100px 2rem;background:var(--bg2)}
.section-full .section{padding:0}
.section-header{text-align:center;margin-bottom:4rem}
.section-label{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--yellow);margin-bottom:.8rem;font-family:var(--font-mono)}
.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-1.5px;line-height:1.1}
.section-title span{color:var(--yellow)}
.section-sub{color:var(--text-muted);max-width:560px;margin:1rem auto 0;font-size:.95rem;line-height:1.8}

/* ── Page Hero (inner pages) ── */
.page-hero-section{position:relative;padding:140px 2rem 90px;text-align:center;overflow:hidden;background:var(--bg)}
.page-hero-bg-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:700px;height:350px;background:radial-gradient(ellipse,var(--yellow-soft),transparent 70%);pointer-events:none}
.page-hero-content{position:relative;z-index:1;max-width:760px;margin:0 auto}
.page-hero-title{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;letter-spacing:-2px;margin:.8rem 0 1rem;line-height:1.08}
.page-hero-title span{color:var(--yellow)}
.page-hero-sub{font-size:1.05rem;color:var(--text-muted);max-width:580px;margin:0 auto;line-height:1.8}
.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.85rem;font-weight:500;transition:color .3s;margin-bottom:.5rem}
.back-link:hover{color:var(--yellow)}

/* ── About grid ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-text p{color:var(--text-sub);line-height:1.9;margin-bottom:1rem;font-size:.97rem}
.about-text strong{color:var(--yellow);font-weight:600}
.about-visual{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;transition:var(--transition);position:relative;overflow:hidden}
.about-stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--yellow);transform:scaleX(0);transition:transform .3s}
.about-stat-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px var(--yellow-soft)}
.about-stat-card:hover::after{transform:scaleX(1)}
.asc-number{font-size:2.4rem;font-weight:900;color:var(--yellow);letter-spacing:-2px;line-height:1;font-family:var(--font-mono)}
.asc-label{font-size:.78rem;color:var(--text-muted);margin-top:.3rem}

/* About page intro */
.about-intro-grid{display:grid;grid-template-columns:380px 1fr;gap:4rem;align-items:start}
.about-intro-img{position:relative}
.about-img-glow{position:absolute;inset:-10px;background:radial-gradient(ellipse,var(--yellow-glow),transparent 70%);border-radius:50%;z-index:0}
.about-photo{position:relative;z-index:1;width:100%;border-radius:24px;box-shadow:var(--shadow);object-fit:cover}
.about-img-badge{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:50px;padding:8px 18px;font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow);white-space:nowrap;z-index:2}
.about-img-badge i{color:var(--yellow)}

/* Stats row */
.stats-row{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.big-stat{text-align:center;padding:2rem 3rem}
.big-stat-num{font-size:3.5rem;font-weight:900;color:var(--yellow);letter-spacing:-3px;line-height:1;font-family:var(--font-mono)}
.big-stat-lbl{font-size:.85rem;color:var(--text-muted);margin-top:.3rem;text-transform:uppercase;letter-spacing:.8px}
.big-stat-div{width:1px;height:60px;background:var(--border)}

/* Timeline */
.timeline{position:relative;max-width:720px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-left:56px;margin-bottom:3rem}
.timeline-dot{position:absolute;left:11px;top:6px;width:20px;height:20px;background:var(--yellow);border-radius:50%;border:3px solid var(--bg2);z-index:1}
.timeline-year{font-size:.78rem;font-weight:700;color:var(--yellow);text-transform:uppercase;letter-spacing:1px;font-family:var(--font-mono);margin-bottom:.4rem}
.timeline-content h3{font-size:1.1rem;font-weight:700;margin-bottom:.3rem}
.timeline-company{font-size:.85rem;color:var(--text-muted);margin-bottom:.6rem}
.timeline-content p{font-size:.9rem;color:var(--text-sub);line-height:1.7}

/* ── Skills Cards ── */
.skills-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.skill-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;transition:var(--transition);cursor:pointer;text-decoration:none;color:inherit}
.skill-card:hover{border-color:var(--yellow);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 0 1px var(--yellow-glow)}
.skill-card-top{display:flex;align-items:center;gap:.8rem}
.skill-icon-wrap{width:52px;height:52px;border-radius:14px;overflow:hidden;background:var(--bg2);border:1px solid var(--border);flex-shrink:0}
.skill-icon-img{width:100%;height:100%;object-fit:cover}
.skill-icon-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--yellow)}
.skill-card-info{flex:1;min-width:0}
.skill-card-title{font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-cat-badge{display:inline-block;padding:2px 10px;background:var(--yellow-soft);border:1px solid var(--border);border-radius:20px;font-size:.7rem;color:var(--yellow);font-weight:600;margin-top:.2rem}
.skill-pct{font-size:1.1rem;font-weight:800;color:var(--yellow);font-family:var(--font-mono);flex-shrink:0}
.skill-card-desc{font-size:.83rem;color:var(--text-muted);line-height:1.7;flex:1}
.skill-bar-wrap{margin-top:auto}
.skill-bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.skill-bar-fill{height:100%;background:linear-gradient(90deg,var(--yellow),#ff9f00);border-radius:3px;width:0;transition:width 1.2s cubic-bezier(.17,.67,.35,1)}
.skill-card-cta{font-size:.78rem;color:var(--yellow);font-weight:600;display:flex;align-items:center;gap:.4rem;opacity:0;transition:opacity .3s}
.skill-card:hover .skill-card-cta{opacity:1}

/* Skills list (about page) */
.skills-list-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.skill-list-row{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}
.skill-list-row:hover{border-color:var(--yellow)}
.skill-list-left{display:flex;align-items:center;gap:.7rem;min-width:160px}
.skill-list-icon{width:32px;height:32px;border-radius:8px;object-fit:cover;flex-shrink:0}
.skill-list-icon-placeholder{width:32px;height:32px;border-radius:8px;background:var(--yellow-soft);display:flex;align-items:center;justify-content:center;color:var(--yellow);flex-shrink:0}
.skill-list-name{font-size:.88rem;font-weight:600}
.skill-list-bar-wrap{flex:1;display:flex;align-items:center;gap:.7rem}
.skill-list-bar{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.skill-list-pct{font-size:.75rem;color:var(--yellow);font-weight:700;font-family:var(--font-mono);min-width:36px;text-align:right}

/* Skill detail */
.skill-detail-header{display:flex;gap:2rem;align-items:flex-start;padding:2rem;background:var(--surface);border:1px solid var(--border);border-radius:18px;margin-bottom:2rem}
.skill-detail-icon-wrap{width:100px;height:100px;border-radius:20px;overflow:hidden;background:var(--bg2);border:1px solid var(--border);flex-shrink:0}
.skill-detail-icon{width:100%;height:100%;object-fit:cover}
.skill-detail-icon-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--yellow)}
.skill-detail-meta{flex:1}
.skill-meta-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.skill-meta-label{font-size:.78rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.skill-meta-value{font-size:1.2rem;font-weight:800;color:var(--yellow);font-family:var(--font-mono)}
.skill-progress-wrap{margin:.5rem 0}
.skill-progress-track{height:10px;background:var(--bg3);border-radius:5px;overflow:hidden}
.skill-progress-fill{height:100%;background:linear-gradient(90deg,var(--yellow),#ff9f00);border-radius:5px;width:0;transition:width 1.4s cubic-bezier(.17,.67,.35,1)}

/* ── Projects ── */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}
.project-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:var(--transition);cursor:pointer;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.project-card:hover{transform:translateY(-8px);box-shadow:0 25px 60px rgba(0,0,0,.5),0 0 0 1px var(--yellow-glow);border-color:var(--yellow)}
.project-img{height:200px;background:var(--bg3);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.project-img-photo{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.project-card:hover .project-img-photo{transform:scale(1.05)}
.project-img-bg{font-size:4rem;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.project-img-overlay{position:absolute;inset:0;background:linear-gradient(135deg,var(--yellow-soft),transparent)}
.project-badge{position:absolute;top:12px;right:12px;background:var(--yellow);color:#000;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;z-index:1}
.project-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.project-title{font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
.project-desc{font-size:.83rem;color:var(--text-muted);line-height:1.7;margin-bottom:1rem;flex:1}
.project-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.8rem}
.tag{padding:4px 10px;background:var(--yellow-soft);border:1px solid var(--border);border-radius:20px;font-size:.72rem;color:var(--yellow);font-weight:500}
.project-read-more{font-size:.78rem;color:var(--yellow);font-weight:600;display:flex;align-items:center;gap:.4rem;opacity:0;transition:opacity .3s}
.project-card:hover .project-read-more{opacity:1}

/* Project detail image */
.project-detail-img-wrap{border-radius:18px;overflow:hidden;border:1px solid var(--border);margin-bottom:0}
.project-detail-img{width:100%;display:block;max-height:480px;object-fit:cover}

/* ── Detail layout (skill/project pages) ── */
.detail-layout{display:grid;grid-template-columns:1fr 340px;gap:3rem;align-items:start}
.detail-main{}
.detail-section-title{font-size:1.3rem;font-weight:700;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.detail-body{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:2rem}
.detail-prose{font-size:.93rem;color:var(--text-sub);line-height:1.9}.detail-prose p{margin-bottom:1rem}.detail-prose h1,.detail-prose h2,.detail-prose h3,.detail-prose h4{font-weight:700;margin:1.4rem 0 .6rem;color:var(--text)}.detail-prose ul,.detail-prose ol{padding-left:1.5rem;margin-bottom:1rem}.detail-prose li{margin-bottom:.4rem}.detail-prose a{color:var(--yellow);text-decoration:underline}.detail-prose strong{color:var(--text);font-weight:700}.detail-prose img{border-radius:10px;max-width:100%;margin:1rem 0}.detail-prose blockquote{border-left:3px solid var(--yellow);padding:.5rem 1rem;color:var(--text-muted);font-style:italic;margin:1rem 0}
.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.5rem;margin-bottom:1.5rem}
.sidebar-card-title{font-size:1rem;font-weight:700;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.sidebar-info-list{display:flex;flex-direction:column;gap:.7rem}
.sidebar-info-item{display:flex;justify-content:space-between;align-items:center;font-size:.85rem}
.si-label{color:var(--text-muted);font-weight:500}
.si-value{font-weight:600;text-align:right}
.related-item{display:flex;align-items:center;gap:.8rem;padding:.6rem;background:var(--bg);border:1px solid var(--border);border-radius:10px;transition:var(--transition);text-decoration:none;color:inherit}
.related-item:hover{border-color:var(--yellow);background:var(--yellow-soft)}
.related-icon{width:40px;height:40px;border-radius:8px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.related-icon img{width:100%;height:100%;object-fit:cover}
.related-icon i{color:var(--yellow)}
.related-title{font-size:.85rem;font-weight:600}
.related-pct{font-size:.75rem;color:var(--text-muted)}

/* ── Tools / tech chips ── */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem}
.tool-chip{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.8rem 1rem;display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:500;transition:var(--transition)}
.tool-chip:hover{border-color:var(--yellow);transform:translateY(-3px);box-shadow:0 8px 20px var(--yellow-soft)}
.tool-chip i{font-size:1.1rem}

/* ── Approach / process ── */
.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.approach-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.8rem;transition:var(--transition)}
.approach-card:hover{border-color:var(--yellow);transform:translateY(-4px)}
.approach-num{font-size:2.5rem;font-weight:900;color:var(--yellow);opacity:.3;font-family:var(--font-mono);letter-spacing:-2px;line-height:1;margin-bottom:.8rem}
.approach-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.6rem}
.approach-card p{font-size:.85rem;color:var(--text-muted);line-height:1.7}
.process-steps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}
.process-step-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.8rem;transition:var(--transition)}
.process-step-card:hover{border-color:var(--yellow);transform:translateY(-4px)}
.ps-num{font-size:2rem;font-weight:900;color:var(--yellow);opacity:.3;font-family:var(--font-mono);margin-bottom:.8rem}
.process-step-card h3{font-size:1rem;font-weight:700;margin-bottom:.6rem}
.process-step-card p{font-size:.83rem;color:var(--text-muted);line-height:1.7}

/* ── Why cards ── */
.why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.why-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.8rem;transition:var(--transition)}
.why-card:hover{border-color:var(--yellow);transform:translateY(-5px);box-shadow:0 20px 50px var(--yellow-soft)}
.why-icon{width:52px;height:52px;background:var(--yellow-soft);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--yellow);margin-bottom:1rem}
.why-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.6rem}
.why-card p{font-size:.85rem;color:var(--text-muted);line-height:1.7}

/* ── Testimonials ── */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.8rem;transition:var(--transition)}
.testimonial-card:hover{border-color:var(--yellow);transform:translateY(-5px)}
.t-stars{color:var(--yellow);font-size:1rem;margin-bottom:1rem;letter-spacing:2px}
.t-text{font-size:.88rem;color:var(--text-sub);line-height:1.8;margin-bottom:1.2rem;font-style:italic}
.t-author{display:flex;align-items:center;gap:.8rem}
.t-avatar{width:40px;height:40px;background:var(--yellow);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}
.t-author strong{display:block;font-size:.88rem;font-weight:700}
.t-author span{font-size:.78rem;color:var(--text-muted)}

/* ── CTA Strip ── */
.cta-strip{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:4rem 2rem}
.cta-strip-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-strip-text h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-1px}
.cta-strip-text h2 span{color:var(--yellow)}
.cta-strip-text p{color:var(--text-muted);margin-top:.4rem;font-size:.95rem}
.cta-strip-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ── Pricing ── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start}
.pricing-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2rem;position:relative;overflow:hidden;transition:var(--transition)}
.pricing-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.pricing-card.popular{border-color:var(--yellow);transform:scale(1.04);box-shadow:0 0 0 1px var(--yellow),0 20px 60px var(--yellow-soft)}
.pricing-card.popular:hover{transform:scale(1.04) translateY(-8px)}
.popular-badge{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--yellow);color:#000;font-size:.72rem;font-weight:800;padding:5px 20px;border-radius:0 0 12px 12px;text-transform:uppercase;letter-spacing:1px}
.pricing-icon{width:52px;height:52px;background:var(--yellow-soft);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.2rem}
.pricing-name{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:.4rem}
.pricing-price{font-size:2.2rem;font-weight:900;color:var(--yellow);letter-spacing:-2px;line-height:1;margin-bottom:.3rem;font-family:var(--font-mono)}
.pricing-price sup{font-size:1rem;font-family:var(--font);font-weight:600}
.pricing-desc{font-size:.83rem;color:var(--text-muted);margin-bottom:1.5rem;line-height:1.6}
.pricing-features{margin-bottom:2rem;display:flex;flex-direction:column;gap:.7rem}
.feature-item{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text-sub)}
.feature-item .check{width:20px;height:20px;background:var(--yellow-soft);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--yellow);font-size:.7rem;flex-shrink:0}
.btn-pricing{width:100%;padding:12px;border-radius:50px;font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;transition:var(--transition);border:1px solid var(--border);background:transparent;color:var(--text);display:block;text-align:center}
.btn-pricing:hover{background:var(--yellow);color:#000;border-color:var(--yellow);transform:translateY(-2px)}
.pricing-card.popular .btn-pricing{background:var(--yellow);color:#000;border-color:var(--yellow)}

/* Add-ons */
.addons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.addon-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;text-align:center;transition:var(--transition)}
.addon-card:hover{border-color:var(--yellow);transform:translateY(-4px)}
.addon-icon{font-size:1.8rem;margin-bottom:.5rem}
.addon-name{font-size:.88rem;font-weight:600;margin-bottom:.3rem}
.addon-price{font-size:.82rem;color:var(--yellow);font-weight:700}

/* FAQ */
.faq-list{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .3s}
.faq-item.open{border-color:var(--yellow)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;background:none;border:none;color:var(--text);font-family:var(--font);font-size:.95rem;font-weight:600;cursor:pointer;text-align:left;gap:1rem}
.faq-icon{width:28px;height:28px;background:var(--yellow-soft);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;transition:transform .3s,background .3s;color:var(--yellow)}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--yellow);color:#000}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease;font-size:.88rem;color:var(--text-muted);line-height:1.8;padding:0 1.5rem}
.faq-item.open .faq-a{max-height:200px;padding:0 1.5rem 1.2rem}

/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.availability{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,100,.1);border:1px solid rgba(0,200,100,.25);color:#00c864;padding:8px 18px;border-radius:50px;font-size:.8rem;font-weight:600}
.availability .dot{width:7px;height:7px;background:#00c864;border-radius:50%;animation:blink 1.2s ease-in-out infinite}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;transition:var(--transition)}
.contact-card:hover{border-color:var(--yellow);transform:translateX(5px)}
.contact-icon{width:44px;height:44px;background:var(--yellow-soft);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;border:1px solid var(--border)}
.contact-card-title{font-weight:600;font-size:.88rem;margin-bottom:.3rem}
.contact-card-value{font-size:.85rem;color:var(--text-muted)}
.process-steps{display:flex;flex-direction:column;gap:1rem;margin-top:.5rem}
.process-step{display:flex;gap:1rem;align-items:flex-start}
.step-num{width:32px;height:32px;background:var(--yellow-soft);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--yellow);flex-shrink:0;margin-top:2px;font-family:var(--font-mono)}
.step-title{font-size:.9rem;font-weight:600;margin-bottom:.2rem}
.step-desc{font-size:.82rem;color:var(--text-muted);line-height:1.6}
.contact-form{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2.5rem}
.form-group{margin-bottom:1.4rem}
.form-label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.5rem;color:var(--text-sub);text-transform:uppercase;letter-spacing:.5px}
.form-input,.form-textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 16px;font-family:var(--font);font-size:.95rem;color:var(--text);transition:var(--transition);outline:none;resize:none}
.form-input:focus,.form-textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 3px var(--yellow-soft)}
.form-textarea{min-height:130px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.char-count{font-size:.75rem;color:var(--text-muted);text-align:right;margin-top:4px}
.btn-submit{width:100%;padding:14px;background:var(--yellow);color:#000;font-weight:700;font-size:.95rem;border:none;border-radius:50px;cursor:pointer;font-family:var(--font);transition:transform .3s,box-shadow .3s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-submit:hover{transform:translateY(-3px);box-shadow:0 12px 35px var(--yellow-glow)}
.form-success{display:none;text-align:center;padding:1rem;background:var(--yellow-soft);border:1px solid var(--border);border-radius:10px;color:var(--yellow);font-weight:600;margin-top:1rem}
.social-row{display:flex;gap:8px;flex-wrap:wrap}
.social-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:50px;font-size:.8rem;color:var(--text-muted);transition:var(--transition);font-family:var(--font);cursor:pointer;font-weight:500;text-decoration:none}
.social-btn:hover{border-color:var(--social-color,var(--yellow));color:var(--social-color,var(--yellow));transform:translateY(-2px)}
.map-placeholder{position:relative;height:240px;background:var(--surface);border:1px solid var(--border);border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;color:var(--text-muted);font-size:.88rem;margin-top:2rem;overflow:hidden}
.map-grid-bg{position:absolute;inset:0;background:repeating-linear-gradient(0deg,var(--border) 0,var(--border) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,var(--border) 0,var(--border) 1px,transparent 1px,transparent 40px);opacity:.4}
.map-pin{font-size:2rem;position:relative;z-index:1;animation:bounce 1.5s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── Filter bar ── */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:3rem}
.filter-btn{padding:8px 20px;border-radius:50px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-family:var(--font);font-size:.83rem;font-weight:500;cursor:pointer;transition:var(--transition)}
.filter-btn:hover,.filter-btn.active{background:var(--yellow);color:#000;border-color:var(--yellow)}

/* ── Footer ── */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:4rem 2rem 2rem}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:3rem}
.footer-brand p{font-size:.85rem;color:var(--text-muted);line-height:1.8;max-width:280px;margin-top:.6rem}
.footer-logo{margin-bottom:.8rem;display:inline-flex}
.footer-col-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:1rem}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-link{font-size:.85rem;color:var(--text-muted);transition:color .3s}
.footer-link:hover{color:var(--yellow)}
.social-links{display:flex;gap:8px;margin-top:1.2rem;flex-wrap:wrap}
.social-link{width:36px;height:36px;background:var(--surface);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:var(--transition);color:var(--text-muted)}
.social-link:hover{background:var(--social-color,var(--yellow));color:#fff;border-color:var(--social-color,var(--yellow));transform:translateY(-3px)}
.footer-bottom{padding-top:2rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--text-muted)}

/* ── Scroll Reveal ── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:translateY(0)}
.stagger>*{opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s}
.stagger.visible>*:nth-child(1){transition-delay:.05s}
.stagger.visible>*:nth-child(2){transition-delay:.15s}
.stagger.visible>*:nth-child(3){transition-delay:.25s}
.stagger.visible>*:nth-child(4){transition-delay:.35s}
.stagger.visible>*:nth-child(5){transition-delay:.45s}
.stagger.visible>*:nth-child(6){transition-delay:.55s}
.stagger.visible>*:nth-child(7){transition-delay:.65s}
.stagger.visible>*:nth-child(8){transition-delay:.75s}
.stagger.visible>*{opacity:1;transform:translateY(0)}

@keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* Admin CSS sidebar section labels */
.sidebar-section-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(136,136,136,.5);padding:.6rem 1rem .2rem;display:block}

/* ── Responsive ── */
@media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}.pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}.pricing-card.popular{transform:scale(1)}.detail-layout{grid-template-columns:1fr}.detail-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}
@media(max-width:900px){.hero-content{grid-template-columns:1fr;text-align:center;gap:2rem;padding-top:3rem}.hero-visual{justify-content:center}.hero-ctas{justify-content:center}.hero-stats{justify-content:center}.hero-img-wrap{width:280px}.about-grid{grid-template-columns:1fr}.about-intro-grid{grid-template-columns:1fr}.about-intro-img{max-width:300px;margin:0 auto}.contact-grid{grid-template-columns:1fr}.cta-strip-inner{flex-direction:column;text-align:center}.cta-strip-actions{justify-content:center}}
@media(max-width:768px){.nav-links{display:none}.mobile-controls{display:flex}.projects-grid{grid-template-columns:1fr}.skills-cards-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:.5rem;text-align:center}.approach-grid{grid-template-columns:1fr}.skills-list-grid{grid-template-columns:1fr}.big-stat-div{display:none}.stats-row{gap:1rem}.big-stat{padding:1rem 2rem}.footer-grid{grid-template-columns:1fr}.detail-sidebar{grid-template-columns:1fr}}
@media(max-width:480px){.about-visual{grid-template-columns:1fr 1fr}.hero-img-badge{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   EXTRACTED INLINE STYLES — previously scattered across blade templates
   ══════════════════════════════════════════════════════════════════════════ */

/* layouts/app.blade.php — mobile nav "Contact Now" button */
.mobile-nav .btn-contact-now {
    width: fit-content;
    margin-top: .5rem;
}

/* layouts/app.blade.php — footer tagline paragraph */
.footer-brand-tagline {
    margin-top: .5rem;
    font-size: .82rem;
    color: var(--text-muted);
    max-width: 280px;
    line-height: 1.7;
}

/* pages/about.blade.php — about intro heading */
.about-intro-title {
    text-align: left;
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
}

/* pages/about.blade.php — about description block (summernote output) */
.about-description-body {
    color: var(--text-sub);
    line-height: 1.9;
    margin-bottom: 2rem;
}
.about-description-body p { margin-bottom: .9rem; }
.about-description-body strong { color: var(--text); font-weight: 700; }
.about-description-body ul, .about-description-body ol { padding-left: 1.4rem; margin-bottom: .9rem; }

/* pages/about.blade.php — CTA button row */
.about-cta-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* pages/about.blade.php — skills & timeline "view all" centred link */
.section-view-all {
    text-align: center;
    margin-top: 2.5rem;
}

/* pages/about.blade.php — empty-state messages */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}
.empty-state a {
    color: var(--yellow);
}

/* welcome.blade.php — about body (summernote) */
.home-about-body {
    color: var(--text-sub);
    line-height: 1.9;
}
.home-about-body p { margin-bottom: .9rem; }

/* welcome.blade.php — about-section CTA button row */
.about-section-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* pages/project-detail.blade.php — page-hero narrower variant */
.page-hero-section--narrow {
    padding-bottom: 2rem;
}
.page-hero-content--800 {
    max-width: 800px;
}
.page-hero-content--700 {
    max-width: 700px;
}

/* project-detail — badge label margin */
.section-label--mt {
    margin-top: 1rem;
    display: inline-block;
}

/* project-detail — hero CTA row */
.hero-cta-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.5rem;
}

/* project-detail — project image outer wrapper */
.project-detail-img-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* project-detail / skill-detail — sidebar action button stack */
.sidebar-btn-stack {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 1.5rem;
}
.sidebar-btn-stack .btn-primary,
.sidebar-btn-stack .btn-secondary {
    justify-content: center;
}

/* project-detail — sidebar tech stack label */
.sidebar-tech-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-muted);
    margin-bottom: .7rem;
    margin-top: 1.2rem;
    display: block;
}

/* project-detail — related projects list */
.related-list {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

/* project-detail — related icon with overflow hidden */
.related-icon--img {
    border-radius: 8px;
    overflow: hidden;
}
.related-icon--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* skill-detail — related skills list */
.related-skills-list {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

/* skill-detail — sidebar hire button */
.sidebar-hire-btn {
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
}

/* skill-detail — skill-meta bottom row */
.skill-meta-row--mt {
    margin-top: .8rem;
}

/* packages/welcome — pricing icon popular margin */
.pricing-icon--popular {
    margin-top: 1.5rem;
}

/* packages — price suffix */
.pricing-price-suffix {
    font-size: .85rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* packages — note below grid */
.pricing-note {
    text-align: center;
    color: var(--text-muted);
    font-size: .84rem;
    margin-top: 2rem;
}
.pricing-note a {
    color: var(--yellow);
}

/* about — timeline empty state */
.timeline-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}
.timeline-empty a {
    color: var(--yellow);
}

/* ══════════════════════════════════════════════════════════════════════════
   FULL RESPONSIVE OVERHAUL — xxl / xl / lg / md / sm / xs
   Using Bootstrap 5 breakpoint equivalents:
     xs   <576px   (extra-small / phones)
     sm   576-767px
     md   768-991px
     lg   992-1199px
     xl   1200-1399px
     xxl  1400px+
   ══════════════════════════════════════════════════════════════════════════ */

/* ── XXL (1400px+) — already the default design, just ensure grid max-widths */
@media (min-width: 1400px) {
    .section { max-width: 1400px; }
    .nav-container { max-width: 1400px; }
    .footer-inner { max-width: 1400px; }
    .hero-content { max-width: 1400px; }
    .hero-title { font-size: 4.4rem; }
}

/* ── XL (1200–1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
    .hero-content { gap: 3rem; }
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* ── LG (992–1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .hero-content { gap: 2.5rem; }
    .hero-img-wrap { width: 340px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .pricing-grid { grid-template-columns: 1fr 1fr; }
    .pricing-card.popular { transform: scale(1); }
    .detail-layout { grid-template-columns: 1fr 300px; gap: 2rem; }
}

/* ── MD (768–991px) — tablets */
@media (max-width: 991px) and (min-width: 768px) {
    .hero-content { grid-template-columns: 1fr; text-align: center; gap: 2.5rem; padding-top: 3rem; }
    .hero-visual { justify-content: center; }
    .hero-ctas, .hero-cta-row { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-img-wrap { width: 300px; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .about-grid { grid-template-columns: 1fr; }
    .about-intro-grid { grid-template-columns: 1fr; }
    .about-intro-img { max-width: 300px; margin: 0 auto; }
    .about-intro-title { text-align: center; }
    .about-cta-row { justify-content: center; }
    .contact-grid { grid-template-columns: 1fr; }
    .cta-strip-inner { flex-direction: column; text-align: center; }
    .cta-strip-actions { justify-content: center; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
    .pricing-card.popular { transform: scale(1); }
    .detail-layout { grid-template-columns: 1fr; }
    .detail-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .approach-grid { grid-template-columns: 1fr; }
    .skills-list-grid { grid-template-columns: 1fr; }
}

/* ── SM (576–767px) — large phones / phablets */
@media (max-width: 767px) {
    :root { --nav-h: 64px; }
    .section { padding: 70px 1.2rem; }
    .section-full { padding: 70px 1.2rem; }
    .nav-links { display: none; }
    .mobile-controls { display: flex; }
    /* Hero */
    .hero-content { grid-template-columns: 1fr; text-align: center; gap: 2rem; padding-top: 2rem; min-height: auto; padding-bottom: 3rem; }
    .hero-visual { justify-content: center; }
    .hero-ctas, .hero-cta-row { justify-content: center; }
    .hero-stats { justify-content: center; gap: 1.5rem; }
    .hero-img-wrap { width: 260px; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-title { font-size: clamp(2rem, 8vw, 2.8rem); letter-spacing: -1px; }
    /* Grids → single column */
    .projects-grid { grid-template-columns: 1fr; }
    .skills-cards-grid { grid-template-columns: 1fr; }
    .skills-list-grid { grid-template-columns: 1fr; }
    .approach-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
    .addons-grid { grid-template-columns: repeat(2, 1fr); }
    .process-steps-grid { grid-template-columns: 1fr; }
    /* Form */
    .form-row { grid-template-columns: 1fr; }
    /* About */
    .about-grid { grid-template-columns: 1fr; }
    .about-intro-grid { grid-template-columns: 1fr; }
    .about-intro-img { max-width: 260px; margin: 0 auto; }
    .about-intro-title { text-align: center; font-size: 1.8rem; }
    .about-cta-row { justify-content: center; }
    .about-visual { grid-template-columns: 1fr 1fr; }
    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }
    /* CTA */
    .cta-strip-inner { flex-direction: column; text-align: center; }
    .cta-strip-actions { justify-content: center; }
    /* Pricing */
    .pricing-grid { grid-template-columns: 1fr; max-width: 100%; }
    .pricing-card.popular { transform: scale(1); }
    /* Detail pages */
    .detail-layout { grid-template-columns: 1fr; }
    .detail-sidebar { grid-template-columns: 1fr; }
    .skill-detail-header { flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
    /* Footer */
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
    /* Hero badges — hide on small */
    .hero-img-badge { display: none; }
    /* Filter bar */
    .filter-bar { gap: 6px; }
    .filter-btn { padding: 6px 14px; font-size: .78rem; }
    /* Packages — sidebar button stack */
    .sidebar-btn-stack { flex-direction: row; flex-wrap: wrap; }
    .sidebar-btn-stack .btn-primary,
    .sidebar-btn-stack .btn-secondary { flex: 1 1 45%; justify-content: center; padding: 10px 14px; font-size: .82rem; }
}

/* ── XS (<576px) — small phones */
@media (max-width: 575px) {
    :root { --nav-h: 60px; }
    .section { padding: 56px 1rem; }
    .section-full { padding: 56px 1rem; }
    .hero-content { gap: 1.5rem; padding-top: 1.5rem; }
    .hero-img-wrap { width: 220px; }
    .hero-title { font-size: clamp(1.8rem, 9vw, 2.4rem); }
    .hero-stats { gap: 1rem; flex-wrap: wrap; }
    .stat-number { font-size: 1.4rem; }
    .btn-primary, .btn-secondary { padding: 11px 20px; font-size: .88rem; }
    .hero-ctas { flex-direction: column; align-items: center; gap: .8rem; }
    .about-strip-inner { gap: .8rem; }
    .about-strip-sep { display: none; }
    /* Stat cards 2-col on xs */
    .about-visual { grid-template-columns: 1fr 1fr; gap: .8rem; }
    .about-stat-card { padding: 1rem; }
    .asc-number { font-size: 1.6rem; }
    .asc-label { font-size: .7rem; }
    /* Tools 2 col */
    .tools-grid { grid-template-columns: 1fr 1fr; }
    .addons-grid { grid-template-columns: 1fr 1fr; }
    /* Project image container */
    .project-detail-img-container { padding: 0 1rem; }
    /* Pricing */
    .pricing-price { font-size: 1.8rem; }
    /* CTA strip */
    .cta-strip { padding: 2.5rem 1rem; }
    .cta-strip-text h2 { font-size: 1.4rem; }
    /* Contact */
    .contact-form { padding: 1.5rem 1rem; }
    /* Footer */
    .footer-inner { padding-left: 1rem; padding-right: 1rem; }
    footer { padding: 3rem 1rem 1.5rem; }
    /* Skill detail header on xs */
    .skill-detail-header { padding: 1.2rem; }
    .skill-detail-icon-wrap { width: 80px; height: 80px; }
    /* Detail body */
    .detail-body { padding: 1.2rem; }
    /* Sidebar card */
    .sidebar-card { padding: 1.2rem; }
    /* Navbar padding */
    .navbar { padding: 0 1rem; }
    /* Mobile nav */
    .mobile-nav { padding: 1.2rem 1rem; }
    /* Section headers */
    .section-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
    /* Page hero */
    .page-hero-section { padding: 5rem 1rem 2rem; }
    .page-hero-title { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}

/* ── Portfolio empty state icon ── */
.empty-state-icon {
    font-size: 3rem;
    opacity: .2;
    display: block;
    margin-bottom: 1rem;
}

/* ── Tool chip icon colors via CSS custom property ── */
.tool-chip i { color: var(--tool-color, var(--yellow)); }

/* ── Contact page ── */
.contact-section-title {
    text-align: left;
    font-size: 1.8rem;
    letter-spacing: -1px;
    margin-bottom: .8rem;
}
.contact-section-sub {
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.8;
    max-width: 360px;
}
.contact-email-link {
    color: var(--yellow);
    font-size: .85rem;
}
.contact-social-label {
    font-size: .78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: .8rem;
    display: block;
}
.contact-process-label {
    font-size: .78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    display: block;
    margin-bottom: .5rem;
}
.contact-form-heading {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .4rem;
}
.contact-form-sub {
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}
.form-error-box {
    display: none;
    padding: 1rem;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 10px;
    color: #ef4444;
    font-size: .85rem;
    margin-bottom: 1rem;
}
.form-select { cursor: pointer; }
.map-location-label {
    position: relative;
    z-index: 1;
    font-weight: 600;
}
.map-location-sub {
    font-size: .75rem;
    opacity: .5;
    position: relative;
    z-index: 1;
}

/* Contact intro block spacing */
.contact-intro-block {
    margin: 1.5rem 0;
}

/* typing text span */
.typing-text {
    color: var(--yellow);
    font-weight: 600;
}