/* ═══════════════════════════════════════════════════════════════
   JAY DENGLE PORTFOLIO — ENHANCED ULTRA EDITION
   Font: Space Grotesk (body) + Syne (display)
   Palette: Deep space dark + electric violet + neon cyan accents
════════════════════════════════════════════════════════════════ */

:root {
  --clr-bg:          #07070f;
  --clr-surface:     #0d0d1a;
  --clr-surface-2:   #11111f;
  --clr-surface-3:   #161628;
  --clr-border:      rgba(120, 80, 255, 0.15);
  --clr-border-2:    rgba(120, 80, 255, 0.30);
  --clr-violet:      #7c3aed;
  --clr-violet-light:#a855f7;
  --clr-cyan:        #06b6d4;
  --clr-pink:        #ec4899;
  --clr-gold:        #f59e0b;
  --grad-primary:    linear-gradient(135deg, #7c3aed, #a855f7, #06b6d4);
  --grad-card:       linear-gradient(135deg, rgba(124,58,237,0.12), rgba(6,182,212,0.06));
  --grad-glow:       linear-gradient(135deg, rgba(124,58,237,0.6), rgba(168,85,247,0.4));
  --grad-text:       linear-gradient(135deg, #a855f7, #06b6d4);
  --text-1: #f0f0ff;
  --text-2: #b0a8d0;
  --text-3: #7a6e9e;
  --shadow-sm:   0 4px 20px rgba(124,58,237,0.15);
  --shadow-md:   0 8px 40px rgba(124,58,237,0.20);
  --shadow-lg:   0 16px 60px rgba(124,58,237,0.25);
  --shadow-glow: 0 0 30px rgba(124,58,237,0.4);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ff-body:     'Space Grotesk', sans-serif;
  --ff-display:  'Syne', sans-serif;
  --fs-1: 26px; --fs-2: 20px; --fs-3: 18px; --fs-4: 16px;
  --fs-5: 15px; --fs-6: 14px; --fs-7: 13px; --fs-8: 11px;
}

/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; }
li { list-style: none; }
img, ion-icon, a, button, time, span { display: block; }
button { font: inherit; background: none; border: none; text-align: left; cursor: pointer; }
input, textarea { display: block; width: 100%; background: none; font: inherit; }
::selection { background: var(--clr-violet); color: #fff; }
:focus { outline: 2px solid rgba(124,58,237,0.5); outline-offset: 2px; }
html { font-family: var(--ff-body); scroll-behavior: smooth; }
body {
  background: var(--clr-bg);
  color: var(--text-1);
  position: relative;
  overflow-x: hidden;
  cursor: none;
}

/* ─── BACKGROUNDS ────────────────────────────────────────────── */
#cosmos-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.bg-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora-blob { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; animation: aurora 20s ease-in-out infinite; }
.aurora-blob.a1 { width:700px;height:700px;background:radial-gradient(circle,rgba(124,58,237,0.25),transparent 70%);top:-250px;left:-200px;animation-duration:18s; }
.aurora-blob.a2 { width:550px;height:550px;background:radial-gradient(circle,rgba(6,182,212,0.18),transparent 70%);top:20%;right:-200px;animation-duration:24s;animation-delay:-6s; }
.aurora-blob.a3 { width:450px;height:450px;background:radial-gradient(circle,rgba(236,72,153,0.15),transparent 70%);bottom:-100px;left:25%;animation-duration:28s;animation-delay:-12s; }
.aurora-blob.a4 { width:400px;height:400px;background:radial-gradient(circle,rgba(168,85,247,0.2),transparent 70%);top:55%;left:5%;animation-duration:22s;animation-delay:-4s; }
@keyframes aurora { 0%,100%{transform:translate(0,0) scale(1);}25%{transform:translate(60px,50px) scale(1.08);}50%{transform:translate(30px,100px) scale(0.94);}75%{transform:translate(-50px,40px) scale(1.04);} }

.noise-overlay { position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px 200px; }

/* ─── SCROLL PROGRESS ────────────────────────────────────────── */
#scroll-progress { position:fixed;top:0;left:0;height:2px;width:0%;background:var(--grad-primary);z-index:9999;transition:width 0.1s linear;box-shadow:0 0 10px rgba(168,85,247,0.8); }

/* ─── CUSTOM CURSOR ──────────────────────────────────────────── */
#cursor-dot, #cursor-ring { position:fixed;pointer-events:none;z-index:9998;border-radius:50%;transform:translate(-50%,-50%);transition:opacity 0.3s; }
#cursor-dot { width:6px;height:6px;background:var(--clr-violet-light);box-shadow:0 0 10px var(--clr-violet-light); }
#cursor-ring { width:32px;height:32px;border:1.5px solid rgba(168,85,247,0.6);transition:width 0.4s var(--ease-out),height 0.4s var(--ease-out),border-color 0.3s,background 0.3s; }
body.cursor-hover #cursor-ring { width:56px;height:56px;border-color:var(--clr-violet-light);background:rgba(124,58,237,0.08); }
body.cursor-hover #cursor-dot { opacity:0; }
#cursor-text { position:fixed;pointer-events:none;z-index:9997;font-family:var(--ff-display);font-size:10px;font-weight:600;color:var(--clr-violet-light);letter-spacing:2px;text-transform:uppercase;transform:translate(-50%,-50%);opacity:0;transition:opacity 0.2s;white-space:nowrap; }

/* ─── PAGE LOADER ────────────────────────────────────────────── */
#page-loader { position:fixed;inset:0;z-index:99999;background:var(--clr-bg);display:flex;align-items:center;justify-content:center;transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out); }
#page-loader.hidden { opacity:0;transform:scale(1.05);pointer-events:none; }
.loader-inner { text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px; }
.loader-orb { width:80px;height:80px;border-radius:50%;background:var(--grad-primary);animation:loaderOrb 3s ease-in-out infinite;box-shadow:0 0 40px rgba(124,58,237,0.6),0 0 80px rgba(124,58,237,0.3);margin-bottom:8px; }
@keyframes loaderOrb { 0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(124,58,237,0.6),0 0 80px rgba(124,58,237,0.3);}50%{transform:scale(1.12);box-shadow:0 0 60px rgba(168,85,247,0.8),0 0 120px rgba(168,85,247,0.4);} }
.loader-name { display:flex;gap:10px;overflow:hidden; }
.loader-first,.loader-last { font-family:var(--ff-display);font-size:36px;font-weight:800;display:inline-block;transform:translateY(100%);animation:loaderSlide 0.9s var(--ease-out) 0.3s forwards; }
.loader-first { background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.loader-last { color:var(--text-1);animation-delay:0.45s; }
@keyframes loaderSlide { to { transform:translateY(0); } }
.loader-tagline { font-size:12px;color:var(--text-3);letter-spacing:3px;text-transform:uppercase;opacity:0;animation:fadeIn 0.6s ease 1s forwards; }
@keyframes fadeIn { to { opacity:1; } }
.loader-bar-wrap { width:200px;height:2px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;position:relative;margin-top:8px; }
.loader-bar-fill { height:100%;background:var(--grad-primary);width:0;border-radius:2px;animation:loaderFill 3s var(--ease-out) 0.5s forwards;box-shadow:0 0 8px rgba(168,85,247,0.8); }
@keyframes loaderFill { to { width:100%; } }
.loader-percentage { position:absolute;right:0;top:-18px;font-size:10px;color:var(--clr-violet-light);font-weight:600; }

/* ─── MAIN LAYOUT ────────────────────────────────────────────── */
main { position:relative;z-index:1;margin:15px 12px;margin-bottom:75px;min-width:259px; }

/* ─── SIDEBAR & ARTICLE BASE ─────────────────────────────────── */
.sidebar, article {
  background: rgba(13,13,26,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--clr-border);
  border-radius: 24px;
  padding: 15px;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 1;
  position: relative;
}

.sidebar { margin-bottom:15px;max-height:112px;overflow:hidden;transition:max-height 0.6s var(--ease-out),border-color 0.4s; }
.sidebar.active { max-height:450px; }
.sidebar:hover { border-color:var(--clr-border-2);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,0.06); }
.sidebar-info { position:relative;display:flex;align-items:center;gap:15px; }

/* ─── AVATAR ─────────────────────────────────────────────────── */
.avatar-box { position:relative;border-radius:20px;flex-shrink:0; }
.avatar-glow-ring { position:absolute;inset:-3px;border-radius:23px;background:conic-gradient(var(--clr-violet),var(--clr-cyan),var(--clr-pink),var(--clr-violet));animation:conicSpin 4s linear infinite;z-index:-1;opacity:0;transition:opacity 0.4s; }
.avatar-box:hover .avatar-glow-ring { opacity:1; }
@keyframes conicSpin { to { transform:rotate(360deg); } }
.avatar-box img { border-radius:20px;animation:avatarFloat 5s ease-in-out infinite;position:relative;z-index:1; }
@keyframes avatarFloat { 0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);} }

.avatar-status { position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;background:rgba(13,13,26,0.95);border:1px solid rgba(16,185,129,0.4);border-radius:20px;padding:3px 8px;white-space:nowrap;z-index:2;opacity:0;pointer-events:none;transition:opacity 0.3s; }
.avatar-box:hover .avatar-status { opacity:1; }
.status-dot { width:6px;height:6px;background:#10b981;border-radius:50%;display:block;animation:statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.6);}50%{box-shadow:0 0 0 4px rgba(16,185,129,0);} }
.status-text { font-size:9px;color:#10b981;font-weight:600;letter-spacing:0.5px; }

/* ─── NAME & TITLE ───────────────────────────────────────────── */
.info-content .name { font-family:var(--ff-display);font-size:var(--fs-3);font-weight:700;letter-spacing:-0.5px;margin-bottom:8px;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;cursor:default;transition:letter-spacing 0.3s; }
.info-content .name:hover { letter-spacing:1px; }
.name-char { display:inline-block; }
.name-space { display:inline; }
.info-content .title { background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);border-radius:8px;padding:3px 12px;width:max-content; }
.title-inner { font-size:var(--fs-8);font-weight:500;color:var(--clr-violet-light);letter-spacing:1px;text-transform:uppercase; }
.title-inner::after { content:'|';margin-left:2px;animation:blink 0.8s step-end infinite;opacity:0.7; }
@keyframes blink { 0%,100%{opacity:1;}50%{opacity:0;} }

/* ─── SHOW MORE BTN ──────────────────────────────────────────── */
.info_more-btn { position:absolute;top:-15px;right:-15px;border-radius:0 15px;font-size:12px;color:var(--clr-violet-light);background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);padding:10px;transition:all 0.3s var(--ease-spring); }
.info_more-btn:hover { background:rgba(124,58,237,0.3);border-color:rgba(168,85,247,0.6);transform:scale(1.05);box-shadow:0 0 20px rgba(124,58,237,0.3); }
.info_more-btn span { display:none; }
.sidebar-info_more { opacity:0;visibility:hidden;transition:opacity 0.5s ease,visibility 0.5s ease; }
.sidebar.active .sidebar-info_more { opacity:1;visibility:visible; }

/* ─── SKILL MARQUEE ──────────────────────────────────────────── */
.skill-marquee { overflow:hidden;border-top:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border);padding:8px 0;margin:10px -15px;position:relative; }
.skill-marquee::before,.skill-marquee::after { content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2; }
.skill-marquee::before { left:0;background:linear-gradient(to right,var(--clr-surface),transparent); }
.skill-marquee::after  { right:0;background:linear-gradient(to left,var(--clr-surface),transparent); }
.marquee-track { display:flex;gap:20px;width:max-content;animation:marqueeRoll 20s linear infinite; }
.marquee-track span { font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;white-space:nowrap;color:var(--text-3);transition:color 0.3s; }
.marquee-track span:hover { color:var(--clr-violet-light); }
@keyframes marqueeRoll { to { transform:translateX(-50%); } }

/* ─── SEPARATOR ──────────────────────────────────────────────── */
.separator { width:100%;height:1px;background:linear-gradient(to right,transparent,var(--clr-border-2),transparent);margin:16px 0;position:relative;overflow:visible; }
.separator::after { content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(168,85,247,0.5),transparent);animation:separatorShimmer 3s ease-in-out infinite; }
@keyframes separatorShimmer { 100% { left:160%; } }

/* ─── CONTACTS ───────────────────────────────────────────────── */
.contacts-list { display:grid;gap:14px; }
.contact-item { display:flex;align-items:center;gap:14px;border-radius:10px;padding:4px 6px;transition:all 0.3s var(--ease-spring); }
.contact-item:hover { transform:translateX(6px);background:rgba(124,58,237,0.08); }
.icon-box { width:34px;height:34px;border-radius:10px;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--clr-violet-light);flex-shrink:0;transition:all 0.3s; }
.contact-item:hover .icon-box { background:rgba(124,58,237,0.3);box-shadow:0 0 16px rgba(124,58,237,0.4); }
.contact-title { font-size:var(--fs-8);color:var(--text-3);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px; }
.contact-info :is(.contact-link,time,address) { font-size:var(--fs-7);color:var(--text-2); }
.contact-info address { font-style:normal; }
.contact-link:hover { color:var(--clr-violet-light); }

.contact-link {
  word-break: break-all;
  white-space: normal;
}

/* ─── SOCIAL ─────────────────────────────────────────────────── */
.social-list { display:flex;gap:12px;padding-left:4px; }
.social-link { width:38px;height:38px;border-radius:10px;background:rgba(124,58,237,0.1);border:1px solid rgba(124,58,237,0.2);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-3);transition:all 0.35s var(--ease-spring);position:relative; }
.social-link::before { content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:rgba(13,13,26,0.95);border:1px solid var(--clr-border-2);border-radius:6px;padding:4px 8px;font-size:10px;color:var(--text-2);white-space:nowrap;opacity:0;pointer-events:none;transition:all 0.2s; }
.social-link:hover::before { opacity:1;transform:translateX(-50%) translateY(0); }
.social-link:hover { background:rgba(124,58,237,0.3);border-color:rgba(168,85,247,0.5);color:var(--clr-violet-light);transform:translateY(-4px) scale(1.1);box-shadow:0 8px 20px rgba(124,58,237,0.3); }

/* ─── NAVBAR ─────────────────────────────────────────────────── */
.navbar { position:fixed;bottom:0;left:0;width:100%;background:rgba(7,7,15,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--clr-border);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,0.4),inset 0 1px 0 rgba(168,85,247,0.1);z-index:5; }
.navbar-list { display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:0 10px;gap:2px; }
.navbar-link { color:var(--text-3);font-size:var(--fs-8);font-weight:500;letter-spacing:0.5px;padding:18px 8px;transition:color 0.3s;position:relative; }
.navbar-link::after { content:'';position:absolute;bottom:12px;left:50%;width:0;height:2px;background:var(--grad-text);border-radius:2px;transform:translateX(-50%);transition:width 0.3s var(--ease-out); }
.navbar-link:hover { color:var(--text-2); }
.navbar-link.active { color:var(--clr-violet-light);text-shadow:0 0 20px rgba(168,85,247,0.5); }
.navbar-link.active::after,.navbar-link:hover::after { width:20px; }

/* ─── ARTICLES ───────────────────────────────────────────────── */
article { display:none; }
article.active { display:block;animation:pageIn 0.5s var(--ease-out) backwards; }
@keyframes pageIn { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
.h2,.h3,.h4,.h5 { color:var(--text-1); }
.h2 { font-family:var(--ff-display);font-size:var(--fs-1);font-weight:700; }
.h3 { font-family:var(--ff-display);font-size:var(--fs-2);font-weight:600; }
.h4 { font-size:var(--fs-4);font-weight:500; }
.h5 { font-size:var(--fs-7);font-weight:500; }

.article-title { position:relative;padding-bottom:12px;margin-bottom:20px; }
.article-title::after { content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background:var(--grad-primary);border-radius:3px;box-shadow:0 0 10px rgba(168,85,247,0.6);transition:width 0.7s var(--ease-out) 0.2s; }
article.active .article-title::after { width:40px; }

/* ─── ABOUT ──────────────────────────────────────────────────── */
.about-text { color:var(--text-2);font-size:var(--fs-6);line-height:1.8;margin-bottom:30px; }
.about-text p { margin-bottom:15px; }
.highlight-text { background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:600; }

/* ─── STATS ──────────────────────────────────────────────────── */
.stats-row { display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:35px; }
.stat-card { background:rgba(124,58,237,0.08);border:1px solid var(--clr-border);border-radius:16px;padding:20px;text-align:center;transition:all 0.35s var(--ease-spring);position:relative;overflow:hidden; }
.stat-card::before { content:'';position:absolute;inset:0;background:var(--grad-card);opacity:0;transition:opacity 0.3s; }
.stat-card:hover { border-color:rgba(168,85,247,0.4);transform:translateY(-4px) scale(1.02);box-shadow:0 10px 30px rgba(124,58,237,0.2); }
.stat-card:hover::before { opacity:1; }
.stat-number { font-family:var(--ff-display);font-size:32px;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline; }
.stat-plus { font-family:var(--ff-display);font-size:24px;font-weight:700;color:var(--clr-cyan);display:inline; }
.stat-label { font-size:11px;color:var(--text-3);letter-spacing:1px;text-transform:uppercase;margin-top:4px; }

/* ─── SERVICE ────────────────────────────────────────────────── */
.service { margin-bottom:40px; }
.service-title { margin-bottom:20px; }
.service-list { display:grid;grid-template-columns:1fr;gap:16px; }
.service-item { position:relative;background:rgba(13,13,26,0.9);border:1px solid var(--clr-border);padding:20px;border-radius:16px;transition:all 0.4s var(--ease-spring);overflow:hidden;opacity:0;transform:translateY(30px) scale(0.97); }
.service-item.visible { opacity:1;transform:translateY(0) scale(1); }
.service-item::before { content:'';position:absolute;inset:0;background:var(--grad-card);opacity:0;transition:opacity 0.3s; }
.service-item::after { content:'';position:absolute;top:0;left:-100%;width:60%;height:1px;background:linear-gradient(to right,transparent,rgba(168,85,247,0.6),transparent);transition:left 0.6s var(--ease-out); }
.service-item:hover { border-color:rgba(168,85,247,0.4);transform:translateY(-6px) scale(1.01);box-shadow:0 20px 40px rgba(124,58,237,0.2),0 0 0 1px rgba(168,85,247,0.15); }
.service-item:hover::before { opacity:1; }
.service-item:hover::after { left:200%; }
.service-icon-box { margin-bottom:12px;transition:transform 0.4s var(--ease-spring),filter 0.3s; }
.service-item:hover .service-icon-box { transform:scale(1.15) rotate(-8deg);filter:drop-shadow(0 0 12px rgba(168,85,247,0.6)); }
.service-icon-box img { margin:0 auto; }
.service-content-box { text-align:center; }
.service-item-title { margin-bottom:6px; }
.service-item-text { color:var(--text-3);font-size:var(--fs-6);line-height:1.6; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS — CLEAN FIX
═══════════════════════════════════════════════════════════════ */
.testimonials { margin-bottom:35px; }
.testimonials-title { margin-bottom:20px; }

.testimonials-list {
  display: flex;
  gap: 16px;
  margin: 0 -15px;
  padding: 15px;
  padding-bottom: 25px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
}
.testimonials-list::-webkit-scrollbar { height:4px; }
.testimonials-list::-webkit-scrollbar-track { background:rgba(255,255,255,0.03);border-radius:4px; }
.testimonials-list::-webkit-scrollbar-thumb { background:rgba(168,85,247,0.4);border-radius:4px; }

.testimonials-item { min-width:100%;scroll-snap-align:center; }

/* CARD — no absolute positioning for avatar anymore */
.content-card {
  position: relative;
  background: rgba(17,17,31,0.9);
  border: 1px solid var(--clr-border);
  padding: 20px;
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s var(--ease-out);
  display: flex;
  flex-direction: column;
}

.content-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.content-card:hover::before { transform:scaleX(1); }
.content-card:hover { transform:translateY(-5px);border-color:var(--clr-border-2);box-shadow:0 20px 40px rgba(124,58,237,0.2); }

/* CARD HEADER — avatar + name side by side */
.card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

/* AVATAR BOX — stays inside card now */
.testimonials-avatar-box {
  position: relative;
  transform: none;
  background: rgba(13,13,26,0.9);
  border: 2px solid rgba(124,58,237,0.3);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  flex-shrink: 0;
  overflow: hidden;
}

.testimonials-item-title {
  font-size: var(--fs-5);
  margin-bottom: 0;
  color: var(--text-1);
}

.testimonials-text { color:var(--text-3);font-size:var(--fs-6);line-height:1.7;-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden; }
.testimonials-text time { font-size:var(--fs-8);color:var(--clr-violet-light);font-weight:600;letter-spacing:1px;margin-bottom:8px;display:block; }

/* ─── MODAL ──────────────────────────────────────────────────── */
.modal-container { position:fixed;inset:0;z-index:20;display:flex;justify-content:center;align-items:center;pointer-events:none;visibility:hidden; }
.modal-container.active { pointer-events:all;visibility:visible; }
.overlay { position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:all 0.3s;z-index:1; }
.overlay.active { opacity:1;visibility:visible; }
.testimonials-modal { background:var(--clr-surface-2);border:1px solid var(--clr-border-2);border-radius:20px;padding:20px;margin:15px;box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(168,85,247,0.1);transform:scale(0.9) translateY(20px);opacity:0;transition:all 0.4s var(--ease-spring);z-index:2;max-width:500px;width:100%; }
.modal-container.active .testimonials-modal { transform:scale(1) translateY(0);opacity:1; }
.modal-close-btn { position:absolute;top:15px;right:15px;background:rgba(255,255,255,0.05);border:1px solid var(--clr-border);border-radius:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:18px;transition:all 0.2s; }
.modal-close-btn:hover { background:rgba(124,58,237,0.2);color:var(--clr-violet-light); }
.modal-avatar-box { border-radius:14px;margin-bottom:15px; }
.modal-img-wrapper > img { display:none; }
.modal-title { margin-bottom:4px; }
.modal-content time { font-size:var(--fs-6);color:var(--clr-violet-light);font-weight:600;letter-spacing:1px;margin-bottom:10px;display:block; }
.modal-content p { color:var(--text-2);font-size:var(--fs-6);line-height:1.7; }

/* ─── CERTIFICATES ───────────────────────────────────────────── */
.clients { margin-bottom:25px; }
.clients-title { margin-bottom:20px; }
.clients-list { display:flex;gap:16px;padding:20px 15px;overflow-x:auto;scroll-snap-type:inline mandatory; }
.clients-list::-webkit-scrollbar { height:4px; }
.clients-list::-webkit-scrollbar-thumb { background:rgba(168,85,247,0.4);border-radius:4px; }
.clients-item { min-width:130px;padding:16px;border-radius:14px;background:rgba(17,17,31,0.9);border:1px solid var(--clr-border);scroll-snap-align:start;display:flex;align-items:center;justify-content:center;transition:all 0.35s var(--ease-spring); }
.clients-item:hover { transform:translateY(-6px) scale(1.04);border-color:rgba(168,85,247,0.5);box-shadow:0 10px 30px rgba(124,58,237,0.25); }
.clients-item img { width:100%;max-width:100px;opacity:0.5;filter:grayscale(1) brightness(1.2);transition:all 0.35s; }
.clients-item:hover img { opacity:1;filter:grayscale(0) brightness(1.3); }

/* ─── RESUME ─────────────────────────────────────────────────── */
.article-title { margin-bottom:30px; }
.timeline { margin-bottom:35px; }
.title-wrapper { display:flex;align-items:center;gap:14px;margin-bottom:25px; }
.timeline-list { margin-left:45px;font-size:var(--fs-6); }
.timeline-item { position:relative;opacity:0;transform:translateX(-20px);transition:all 0.6s var(--ease-out); }
.timeline-item.visible { opacity:1;transform:translateX(0); }
.timeline-item:not(:last-child) { margin-bottom:22px; }
.timeline-item-title { font-size:var(--fs-6);font-weight:600;color:var(--text-1);margin-bottom:5px; }
.timeline-list span { color:var(--clr-violet-light);font-size:var(--fs-7);font-weight:500;letter-spacing:0.5px;margin-bottom:4px;display:block; }
.timeline-item:not(:last-child)::before { content:'';position:absolute;top:-22px;left:-30px;width:1px;height:calc(100% + 44px);background:linear-gradient(to bottom,var(--clr-violet),transparent); }
.timeline-item::after { content:'';position:absolute;top:6px;left:-33px;height:8px;width:8px;background:var(--clr-violet-light);border-radius:50%;box-shadow:0 0 12px rgba(168,85,247,0.7),0 0 0 3px rgba(124,58,237,0.2); }
.timeline-item:hover { transform:translateX(6px); }
.timeline-text { color:var(--text-3);line-height:1.7; }

/* ─── SKILLS ─────────────────────────────────────────────────── */
.skills-title { margin-bottom:20px; }
.skills-list { padding:24px; }
.skills-item:not(:last-child) { margin-bottom:24px; }
.skill .title-wrapper { display:flex;align-items:baseline;gap:6px;margin-bottom:10px; }
.skill .title-wrapper .h5 { font-size:var(--fs-6);color:var(--text-1);font-weight:500; }
.skill .title-wrapper data { color:var(--clr-violet-light);font-size:var(--fs-7);font-weight:600;margin-left:auto; }
.skill-progress-bg { background:rgba(255,255,255,0.05);border-radius:10px;height:6px;overflow:visible;position:relative; }
.skill-progress-fill { height:100%;border-radius:inherit;background:var(--grad-primary);width:0;transition:width 1.4s cubic-bezier(0.76,0,0.24,1);position:relative;box-shadow:0 0 10px rgba(168,85,247,0.5); }
.skill-progress-fill::after { content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--clr-violet-light);box-shadow:0 0 12px rgba(168,85,247,0.8),0 0 0 3px rgba(124,58,237,0.2); }

/* ─── PROJECTS ───────────────────────────────────────────────── */
.filter-list { display:none; }
.filter-select-box { position:relative;margin-bottom:25px; }
.filter-select { background:rgba(17,17,31,0.9);color:var(--text-2);display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;border:1px solid var(--clr-border);border-radius:12px;font-size:var(--fs-6);transition:border-color 0.3s; }
.filter-select:hover { border-color:var(--clr-border-2); }
.filter-select.active .select-icon { transform:rotate(0.5turn); }
.select-list { background:rgba(17,17,31,0.97);backdrop-filter:blur(20px);position:absolute;top:calc(100% + 6px);width:100%;padding:6px;border:1px solid var(--clr-border-2);border-radius:12px;z-index:2;opacity:0;visibility:hidden;pointer-events:none;transition:all 0.2s;box-shadow:0 10px 30px rgba(0,0,0,0.5); }
.filter-select.active + .select-list { opacity:1;visibility:visible;pointer-events:all; }
.select-item button { color:var(--text-2);font-size:var(--fs-6);width:100%;padding:8px 12px;border-radius:8px;transition:all 0.2s; }
.select-item button:hover { background:rgba(124,58,237,0.15);color:var(--clr-violet-light); }
.project-list { display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:10px; }
.project-item { display:none; }
.project-item.active { display:block;animation:projectPop 0.4s var(--ease-spring) forwards; }
@keyframes projectPop { from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;} }
.project-img { position:relative;width:100%;height:200px;border-radius:14px;overflow:hidden;margin-bottom:12px; }
.project-img::before { content:'';position:absolute;inset:0;background:transparent;z-index:1;transition:background 0.3s; }
.project-item > a:hover .project-img::before { background:rgba(7,7,15,0.6); }
.project-overlay { position:absolute;bottom:12px;left:12px;z-index:2;opacity:0;transform:translateY(8px);transition:all 0.3s var(--ease-out); }
.project-item > a:hover .project-overlay { opacity:1;transform:translateY(0); }
.project-tag { background:rgba(124,58,237,0.85);border:1px solid rgba(168,85,247,0.5);color:#fff;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:20px;backdrop-filter:blur(8px); }
.project-item-icon-box { background:rgba(124,58,237,0.85);color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);font-size:20px;padding:16px;border-radius:12px;opacity:0;z-index:2;transition:all 0.3s var(--ease-spring);backdrop-filter:blur(8px); }
.project-item > a:hover .project-item-icon-box { transform:translate(-50%,-50%) scale(1);opacity:1;box-shadow:0 0 30px rgba(124,58,237,0.5); }
.project-img img { width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease-out); }
.project-item > a:hover img { transform:scale(1.08); }
.project-title { color:var(--text-1);font-size:var(--fs-5);font-weight:500;margin-left:2px;transition:color 0.3s; }
.project-category { color:var(--text-3);font-size:var(--fs-7);margin-left:2px;margin-top:4px; }
.project-item > a:hover .project-title { color:var(--clr-violet-light); }

/* ─── BLOG ───────────────────────────────────────────────────── */
.blog-posts-list { display:grid;grid-template-columns:1fr;gap:20px; }
.blog-post-item > a { display:block;background:rgba(17,17,31,0.9);border:1px solid var(--clr-border);border-radius:16px;overflow:hidden;transition:all 0.4s var(--ease-spring);opacity:0;transform:translateY(30px); }
.blog-post-item.visible > a { opacity:1;transform:translateY(0); }
.blog-post-item > a:hover { border-color:var(--clr-border-2);transform:translateY(-6px);box-shadow:0 20px 40px rgba(124,58,237,0.2); }
.blog-banner-box { width:100%;height:200px;overflow:hidden; }
.blog-banner-box img { width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease-out),filter 0.4s; }
.blog-post-item > a:hover .blog-banner-box img { transform:scale(1.08);filter:brightness(1.1) saturate(1.2); }
.blog-content { padding:16px; }
.blog-meta { display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.blog-category { background:rgba(124,58,237,0.15);color:var(--clr-violet-light);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:2px 8px;border-radius:20px;border:1px solid rgba(124,58,237,0.3); }
.blog-meta time { font-size:var(--fs-8);color:var(--text-3); }
.blog-meta .dot { width:3px;height:3px;background:var(--text-3);border-radius:50%; }
.blog-item-title { margin-bottom:8px;line-height:1.4;transition:color 0.3s; }
.blog-post-item > a:hover .blog-item-title { color:var(--clr-violet-light); }
.blog-text { color:var(--text-3);font-size:var(--fs-6);line-height:1.6; }

/* ─── CONTACT ────────────────────────────────────────────────── */
.contact-form { margin-bottom:10px; }
.form-title { margin-bottom:20px; }
.input-wrapper { display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px; }
.form-input { color:var(--text-1);font-size:var(--fs-6);padding:14px 18px;border:1px solid var(--clr-border);border-radius:12px;background:rgba(17,17,31,0.6);outline:none;transition:all 0.3s; }
.form-input::placeholder { color:var(--text-3); }
.form-input:focus { border-color:rgba(168,85,247,0.6);background:rgba(17,17,31,0.9);box-shadow:0 0 0 3px rgba(124,58,237,0.12),0 0 20px rgba(124,58,237,0.1);transform:translateY(-2px); }
.form-input:focus:invalid { border-color:rgba(236,72,153,0.6); }
textarea.form-input { min-height:100px;height:130px;max-height:200px;resize:vertical;margin-bottom:20px; }
.form-btn { position:relative;width:100%;background:rgba(124,58,237,0.15);color:var(--clr-violet-light);border:1px solid rgba(124,58,237,0.3);display:flex;justify-content:center;align-items:center;gap:10px;padding:14px 20px;border-radius:12px;font-size:var(--fs-6);font-weight:600;letter-spacing:0.5px;transition:all 0.35s var(--ease-spring);overflow:hidden; }
.form-btn::before { content:'';position:absolute;inset:0;background:var(--grad-primary);opacity:0;transition:opacity 0.3s; }
.form-btn:not([disabled]):hover { border-color:rgba(168,85,247,0.6);color:#fff;transform:translateY(-3px);box-shadow:0 10px 30px rgba(124,58,237,0.4); }
.form-btn:not([disabled]):hover::before { opacity:1; }
.form-btn ion-icon,.form-btn span { position:relative;z-index:1; }
.form-btn:not([disabled]) { animation:btnPulse 2.5s ease-in-out infinite; }
@keyframes btnPulse { 0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,0.4);}50%{box-shadow:0 0 0 10px rgba(124,58,237,0);} }
.form-btn:disabled { opacity:0.4;cursor:not-allowed; }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
.has-scrollbar::-webkit-scrollbar { height:4px;width:4px; }
.has-scrollbar::-webkit-scrollbar-track { background:rgba(255,255,255,0.02);border-radius:4px; }
.has-scrollbar::-webkit-scrollbar-thumb { background:rgba(168,85,247,0.4);border-radius:4px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

@media (min-width: 450px) {
  .clients-item { min-width:calc(33.33% - 12px); }
  .project-img, .blog-banner-box { height:auto; }
  .stats-row { grid-template-columns:repeat(4,1fr); }
}

@media (min-width: 580px) {
  :root { --fs-1:32px;--fs-2:24px;--fs-3:26px;--fs-4:18px;--fs-6:15px;--fs-7:15px;--fs-8:12px; }

  .sidebar, article { width:520px;margin-inline:auto;padding:30px; }
  .article-title { font-weight:700;padding-bottom:15px; }
  .article-title::after { width:40px;height:4px; }
  .icon-box { width:48px;height:48px;border-radius:12px;font-size:18px; }
  main { margin-top:60px;margin-bottom:100px; }
  .sidebar { max-height:180px;margin-bottom:30px; }
  .sidebar.active { max-height:620px; }
  .sidebar-info { gap:25px; }
  .avatar-box { border-radius:30px; }
  .avatar-box img { width:120px; }
  .info-content .name { margin-bottom:15px; }
  .info_more-btn { top:-30px;right:-30px;padding:10px 15px; }
  .info_more-btn span { display:block;font-size:var(--fs-8); }
  .info_more-btn ion-icon { display:none; }
  .separator { margin:28px 0; }
  .contacts-list { gap:20px; }
  .navbar { border-radius:20px 20px 0 0; }
  .navbar-list { gap:10px; }
  .service-item { display:flex;align-items:flex-start;gap:18px;padding:28px; }
  .service-icon-box { margin-bottom:0;margin-top:4px;flex-shrink:0; }
  .service-content-box { text-align:left; }

  /* ── TESTIMONIAL 580px — NO avatar transform, NO margin-left ── */
  .testimonials-list { gap:24px;margin:0 -30px;padding:30px; }
  .content-card { padding:24px; }
  .testimonials-avatar-box { transform:none;border-radius:14px; }
  .testimonials-avatar-box img { width:60px; }
  .testimonials-item-title { margin-bottom:0;margin-left:0; }

  .modal-container { padding:20px; }
  .testimonials-modal { display:flex;gap:25px;padding:28px;border-radius:20px; }
  .modal-img-wrapper { display:flex;flex-direction:column;align-items:center; }
  .modal-avatar-box { margin-bottom:0; }
  .modal-avatar-box img { width:65px; }
  .modal-img-wrapper > img { display:block;flex-grow:1;width:35px; }
  .clients-list { gap:20px;padding:20px; }
  .clients-item { min-width:calc(33.33% - 15px); }
  .timeline-list { margin-left:65px; }
  .timeline-item:not(:last-child)::before { left:-40px; }
  .timeline-item::after { height:10px;width:10px;left:-44px; }
  .blog-posts-list { gap:24px; }
  .blog-content { padding:20px; }
  .input-wrapper { gap:24px; }
}

@media (min-width: 768px) {
  .sidebar, article { width:700px; }
  .contacts-list { grid-template-columns:1fr 1fr;gap:24px 15px; }
  .filter-select-box { display:none; }
  .filter-list { display:flex;align-items:center;gap:20px;padding-left:5px;margin-bottom:28px; }
  .filter-item button { color:var(--text-3);font-size:var(--fs-5);font-weight:500;padding:6px 16px;border-radius:20px;border:1px solid transparent;transition:all 0.3s var(--ease-spring); }
  .filter-item button:hover { color:var(--text-2);border-color:var(--clr-border); }
  .filter-item button.active { color:var(--clr-violet-light);background:rgba(124,58,237,0.12);border-color:rgba(124,58,237,0.3);box-shadow:0 0 15px rgba(124,58,237,0.15);animation:filterPop 0.35s var(--ease-spring); }
  @keyframes filterPop { 0%{transform:scale(0.88);}60%{transform:scale(1.06);}100%{transform:scale(1);} }
  .project-list, .blog-posts-list { grid-template-columns:1fr 1fr; }
  .input-wrapper { grid-template-columns:1fr 1fr; }
  .form-btn { width:max-content;margin-left:auto; }
}

@media (min-width: 1024px) {
  .sidebar, article { width:950px; }
  main { margin-bottom:60px; }
  .main-content { position:relative;width:max-content;margin:auto; }
  .navbar { position:absolute;bottom:auto;top:0;left:auto;right:0;width:max-content;border-radius:0 24px;padding:0 20px;box-shadow:none; }
  .navbar-list { gap:20px;padding:0 10px; }
  .navbar-link { font-weight:500; }
  .service-list { grid-template-columns:1fr 1fr;gap:20px 24px; }
  .testimonials-item { min-width:calc(50% - 12px); }
  .clients-item { min-width:calc(25% - 15px); }
  .project-list { grid-template-columns:repeat(3,1fr); }
}

@media (min-width: 1250px) {
  body::-webkit-scrollbar { width:8px; }
  body::-webkit-scrollbar-track { background:var(--clr-bg); }
  body::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.3);border-radius:8px; }
  .sidebar, article { width:auto; }
  article { min-height:100%; }
  main { max-width:1200px;margin-inline:auto;display:flex;justify-content:center;align-items:stretch;gap:25px; }
  .main-content { min-width:75%;width:75%;margin:0; }
  .sidebar { position:sticky;top:60px;max-height:max-content;height:100%;margin-bottom:0;padding-top:60px;z-index:1; }
  .sidebar-info { flex-direction:column; }
  .avatar-box img { width:150px; }
  .info-content .name { white-space:nowrap;text-align:center; }
  .info-content .title { margin:auto; }
  .info_more-btn { display:none; }
  .sidebar-info_more { opacity:1;visibility:visible; }
  .contacts-list { grid-template-columns:1fr; }
  .separator:last-of-type { margin:10px 0;opacity:0; }
  .social-list { justify-content:center; }
}