/* ══════════════════════════════════════════════════════════════
   PORTFOLIO — Girish Wangikar
   Dark theme · Agentic AI Engineer
   ══════════════════════════════════════════════════════════════ */

/* ── CUSTOM PROPERTIES ── */
:root {
  --bg:           #080c14;
  --bg-2:         #0d1321;
  --bg-3:         #111827;
  --surface:      #141d2e;
  --surface-2:    #1a2540;
  --border:       rgba(99,179,237,0.12);
  --border-hover: rgba(99,179,237,0.38);
  --cyan:         #38bdf8;
  --cyan-dim:     rgba(56,189,248,0.13);
  --cyan-glow:    rgba(56,189,248,0.07);
  --text:         #e2e8f0;
  --text-2:       #94a3b8;
  --text-3:       #8899aa;
  --white:        #ffffff;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-hero:    'Syne', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-body:    'Inter', sans-serif;
  --nav-h:        68px;
  --r:            12px;
  --r-lg:         20px;
  --ease:         cubic-bezier(0.4,0,0.2,1);
  --ease-out:     cubic-bezier(0.16,1,0.3,1);
  --t:            0.2s;
  --t-slow:       0.4s;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.72;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:2px}

/* ── NOISE OVERLAY ── */
body::before{content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;opacity:.45}

/* ── SELECTION ── */
::selection{background:rgba(56,189,248,.3);color:var(--white)}

/* ── PROGRESS BAR ── */
#progress-bar{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--amber));z-index:9999;transition:width .1s linear}

/* ── STARFIELD ── */
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1}

/* ── AMBIENT ORBS ── */
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:1;animation:orb-drift 22s ease-in-out infinite}
.orb-1{width:560px;height:560px;background:radial-gradient(circle,rgba(56,189,248,.04),transparent 70%);top:-180px;right:-120px}
.orb-2{width:420px;height:420px;background:radial-gradient(circle,rgba(245,158,11,.025),transparent 70%);bottom:8%;left:-110px;animation-delay:-11s}
.orb-3{width:340px;height:340px;background:radial-gradient(circle,rgba(168,85,247,.025),transparent 70%);top:45%;right:-80px;animation-delay:-6s}
@keyframes orb-drift{0%,100%{transform:translate(0,0)}33%{transform:translate(28px,-26px)}66%{transform:translate(-18px,18px)}}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.5rem,5vw,4rem);z-index:200;transition:background var(--t) var(--ease),border-bottom var(--t),box-shadow var(--t)}
#nav.scrolled{background:rgba(8,12,20,.85);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid var(--border);box-shadow:0 4px 40px rgba(0,0,0,.3)}
.nav-logo{font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:.05em;color:var(--white);position:relative}
.nav-logo span{color:var(--cyan)}
.nav-logo::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--cyan);transition:width var(--t)}
.nav-logo:hover::after{width:100%}
.nav-links{display:flex;align-items:center;gap:2.6rem}
.nav-links a{font-family:var(--font-mono);font-size:.77rem;color:var(--text-2);letter-spacing:.08em;transition:color var(--t);position:relative}
.nav-links a::before{content:attr(data-num);color:var(--cyan);margin-right:.35em;font-size:.68rem}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--cyan);transition:width var(--t) var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{font-family:var(--font-mono)!important;font-size:.74rem!important;letter-spacing:.1em!important;color:var(--cyan)!important;border:1px solid rgba(56,189,248,.5)!important;padding:.42em 1.1em!important;border-radius:4px;transition:background var(--t),border-color var(--t),box-shadow var(--t)!important}
.nav-cta:hover{background:var(--cyan-dim)!important;border-color:var(--cyan)!important;box-shadow:0 0 20px rgba(56,189,248,.12)!important}
.nav-cta::after{display:none!important}

/* Nav section indicator */
.nav-section-indicator{position:absolute;left:clamp(1.5rem,5vw,4rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:0;height:36px;width:2px;background:rgba(56,189,248,0.1);border-radius:1px}
.nav-indicator-dot{width:6px;height:6px;background:var(--cyan);border-radius:50%;position:absolute;left:-2px;top:0;transition:top .4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 0 8px rgba(56,189,248,0.6)}
@media(max-width:900px){.nav-section-indicator{display:none}}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:10px;min-width:44px;min-height:44px;align-items:center;justify-content:center;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--t)}
.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 menu */
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(8,12,20,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:2rem;border-bottom:1px solid var(--border);z-index:199;flex-direction:column;gap:1.5rem}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--font-mono);font-size:.88rem;color:var(--text-2);padding:.75rem 0;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--border);transition:color var(--t)}
.mobile-menu a:hover{color:var(--cyan)}

/* ── SECTIONS ── */
section{position:relative;z-index:2}
.section-inner{max-width:1100px;margin:0 auto;padding:0 clamp(1.5rem,5vw,4rem)}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3rem);font-weight:700;color:var(--white);line-height:1.15;margin-bottom:1rem;letter-spacing:-.03em}
.section-sub{font-size:1rem;color:var(--text-2);max-width:580px;line-height:1.82}
.section-eyebrow{font-family:var(--font-mono);font-size:.68rem;color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5rem;display:inline-flex;align-items:center;gap:.5rem;background:var(--cyan-dim);border:1px solid rgba(56,189,248,.15);padding:.3em .8em;border-radius:100px}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.79rem;letter-spacing:.08em;color:var(--bg);background:var(--cyan);padding:.74em 1.6em;border-radius:6px;border:1px solid var(--cyan);transition:background var(--t),transform var(--t),box-shadow var(--t);font-weight:500;position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 50%);pointer-events:none}
.btn-primary:hover{background:#7dd3fc;transform:translateY(-2px);box-shadow:0 8px 32px rgba(56,189,248,.28)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.79rem;letter-spacing:.08em;color:var(--cyan);background:transparent;padding:.74em 1.6em;border-radius:6px;border:1px solid rgba(56,189,248,.4);transition:background var(--t),border-color var(--t),transform var(--t),box-shadow var(--t)}
.btn-outline:hover{background:var(--cyan-dim);border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 4px 20px rgba(56,189,248,.12)}

/* ── MAGNETIC BUTTON (JS-enhancement) ── */
.magnetic-btn{transition:transform .08s var(--ease-out)}

/* ── 3D TILT CARDS ── */
.tilt-card{transform-style:preserve-3d;will-change:transform}
.tilt-card .tilt-content{transform-style:preserve-3d}
.tilt-card .tilt-float{transition:transform .2s var(--ease-out)}
.tilt-card:hover .tilt-float{transform:translateZ(20px)}
.tilt-card .tilt-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.04),transparent 60%);opacity:0;transition:opacity .2s}
.tilt-card:hover .tilt-shine{opacity:1}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;align-items:center;padding-top:var(--nav-h);position:relative;overflow:hidden}
#hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 62% 52% at 72% 38%,rgba(56,189,248,.07) 0%,transparent 68%),radial-gradient(ellipse 42% 58% at 18% 72%,rgba(245,158,11,.045) 0%,transparent 58%);pointer-events:none;z-index:1}
#hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(99,179,237,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(99,179,237,.025) 1px,transparent 1px);background-size:62px 62px;pointer-events:none;z-index:1}
.hero-inner{max-width:1100px;margin:0 auto;padding:0 clamp(1.5rem,5vw,4rem);display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:3;perspective:1400px;transform-style:preserve-3d}
.hero-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;color:var(--cyan);background:var(--cyan-dim);border:1px solid rgba(56,189,248,.2);padding:.34em .95em;border-radius:100px;margin-bottom:1.8rem;letter-spacing:.1em}
.hero-tag-dot{position:relative;width:6px;height:6px;flex-shrink:0;display:inline-block}
.hero-tag-dot::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--cyan);animation:sonar-dot 2s ease-out infinite}
.hero-tag-dot::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--cyan);animation:sonar-ring 2s ease-out infinite}
@keyframes sonar-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
@keyframes sonar-ring{0%{opacity:.7;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.5)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
.hero-word{display:inline-block;white-space:nowrap}
.hero-name{font-family:var(--font-hero);font-size:clamp(2.8rem,6.5vw,4.8rem);font-weight:800;line-height:1.02;margin-bottom:.5rem;letter-spacing:-.02em;transform:translateZ(-20px)}
.hero-3d-word{
  display:inline-block;
  white-space:nowrap;
  color:var(--white);
  position:relative;
  text-shadow:
    1px 1px 0 rgba(56,189,248,0.5),
    2px 2px 0 rgba(56,189,248,0.42),
    3px 3px 0 rgba(56,189,248,0.34),
    4px 4px 0 rgba(56,189,248,0.26),
    5px 5px 0 rgba(56,189,248,0.18),
    6px 6px 0 rgba(56,189,248,0.1),
    7px 7px 0 rgba(0,0,0,0.3),
    8px 8px 0 rgba(0,0,0,0.2);
  transition:text-shadow .2s var(--ease), transform .2s var(--ease);
}
.hero-3d-word:hover{
  transform:translateY(-3px) translateX(-2px);
  text-shadow:
    1px 1px 0 rgba(56,189,248,0.6),
    2px 2px 0 rgba(56,189,248,0.52),
    3px 3px 0 rgba(56,189,248,0.44),
    4px 4px 0 rgba(56,189,248,0.36),
    5px 5px 0 rgba(56,189,248,0.28),
    6px 6px 0 rgba(56,189,248,0.2),
    7px 7px 0 rgba(56,189,248,0.12),
    8px 8px 0 rgba(0,0,0,0.35),
    9px 9px 0 rgba(0,0,0,0.25);
}
.hero-3d-word.accent{
  color:var(--cyan);
  text-shadow:
    1px 1px 0 rgba(255,255,255,0.25),
    2px 2px 0 rgba(56,189,248,0.5),
    3px 3px 0 rgba(14,116,144,0.5),
    4px 4px 0 rgba(14,116,144,0.4),
    5px 5px 0 rgba(14,116,144,0.3),
    6px 6px 0 rgba(0,0,0,0.3),
    7px 7px 12px rgba(56,189,248,0.15);
}
.hero-name .accent{color:var(--cyan)}
.hero-role{font-family:var(--font-mono);font-size:clamp(.88rem,2vw,1.08rem);color:var(--text-2);margin-bottom:1.6rem;min-height:1.6em}
.typed-cursor{color:var(--cyan);animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-desc{font-size:.97rem;color:var(--text-2);line-height:1.82;margin-bottom:2.5rem;max-width:480px}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.8rem}

/* Hero social */
.hero-social{display:flex;gap:1.1rem;flex-wrap:wrap}
.hero-social-link{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-decoration:none;transition:transform var(--t)}
.hero-social-link:hover{transform:translateY(-4px)}
.social-icon-box{width:44px;height:44px;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-3);background:var(--surface);transition:color var(--t),border-color var(--t),background var(--t),box-shadow var(--t)}
.social-icon-box.hf-icon{font-size:1.12rem;filter:grayscale(1);opacity:.55;transition:filter var(--t),opacity var(--t),color var(--t),border-color var(--t),background var(--t),box-shadow var(--t)}
.hero-social-link:hover .social-icon-box{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dim);box-shadow:0 4px 20px rgba(56,189,248,.15)}
.hero-social-link:hover .social-icon-box.hf-icon{filter:grayscale(0);opacity:1}
.social-label{font-family:var(--font-mono);font-size:.58rem;color:var(--text-3);letter-spacing:.07em;transition:color var(--t);text-align:center}
.hero-social-link:hover .social-label{color:var(--cyan)}

/* Hero stats */
.hero-stats{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:2rem;border-top:1px solid var(--border)}
.stat-item{display:flex;flex-direction:column}
.stat-num{font-family:var(--font-display);font-size:1.7rem;font-weight:800;color:var(--white);letter-spacing:-.02em}
.stat-num span{color:var(--cyan)}
.stat-label{font-family:var(--font-mono);font-size:.66rem;color:var(--text-3);letter-spacing:.08em}

/* Code card */
.hero-card-wrap{position:relative;transform:translateZ(30px)}
.hero-card-shadow{position:absolute;inset:0;background:rgba(56,189,248,0.04);border:1px solid rgba(56,189,248,0.08);border-radius:var(--r-lg);transform:translate(10px,10px);z-index:0;filter:blur(2px);pointer-events:none}
.hero-card{background:rgba(20,29,46,0.55);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:0 8px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,0.06);z-index:1}
.hero-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.hero-card.card-line-animated::before{transform:scaleX(1)}
.card-topbar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.2rem;background:var(--surface-2);border-bottom:1px solid var(--border)}
.card-dot{width:10px;height:10px;border-radius:50%}
.card-dot.r{background:#ff5f57}.card-dot.a{background:#febc2e}.card-dot.g{background:#28c840}
.card-filename{font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);margin-left:.5rem;letter-spacing:.04em}
.card-body{padding:1.4rem 1.5rem;font-family:var(--font-mono);font-size:.77rem;line-height:1.95}
.cl{display:block}
.cc{color:var(--text-3)}.ck{color:#f472b6}.cs{color:#86efac}.cn{color:#fb923c}.cv{color:#93c5fd}.cf{color:var(--cyan)}.cb{color:var(--text-2)}

/* ── ABOUT ── */
#about{padding:8rem 0;position:relative}
#about::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;max-width:1100px;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.about-header{margin-bottom:3.5rem}
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;align-items:start}
.about-img-wrap{position:relative}
.about-img-frame{width:100%;aspect-ratio:4/5;background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;position:relative}
.about-img-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--cyan-glow),transparent 60%),linear-gradient(to top, rgba(8,12,20,0.55) 0%, transparent 38%)}
.about-photo-glow{position:absolute;inset:-20px;background:url('assets/images/profile_photo.jpg') center/cover;filter:blur(40px) saturate(1.8);opacity:0.18;transform:scale(1.1);z-index:-1;border-radius:50%;pointer-events:none}
.corner-line{position:absolute;width:50px;height:50px;pointer-events:none;opacity:0;z-index:5}
.corner-tl{top:-6px;left:-6px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);border-radius:var(--r) 0 0 0;clip-path:inset(0 100% 100% 0)}
.corner-br{bottom:-6px;right:-6px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);border-radius:0 0 var(--r) 0;clip-path:inset(0 100% 100% 0)}
.corner-line.animated{opacity:1;clip-path:inset(0 0% 0% 0);transition:clip-path .4s ease,opacity .4s ease}
.about-img-frame img{width:100%;height:100%;object-fit:cover}
.about-exp-badge{position:absolute;bottom:.9rem;left:.9rem;z-index:4;background:rgba(13,19,33,0.82);border:1px solid rgba(56,189,248,.35);border-radius:8px;padding:.45rem .8rem;display:flex;flex-direction:row;align-items:center;gap:.5rem;backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(0,0,0,.5);white-space:nowrap}
.badge-num{font-family:var(--font-display);font-size:.78rem;font-weight:800;color:var(--cyan);line-height:1}
.badge-text{font-family:var(--font-mono);font-size:.52rem;color:rgba(226,232,240,0.8);letter-spacing:.04em;line-height:1.4}
.about-intro{font-size:1.05rem!important;color:var(--text)!important;line-height:1.85;margin-bottom:1.45rem}
.about-body p{color:var(--text-2);margin-bottom:1.45rem;font-size:.95rem;line-height:1.85}
.about-body p strong{color:var(--white);font-style:italic}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2rem}
.fact-item{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.73rem;color:var(--text-2)}
.fact-item.fact-chip{background:rgba(20,29,46,0.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(99,179,237,0.14);border-radius:10px;padding:.6rem .9rem;gap:.7rem;transition:border-color .3s,transform .3s,box-shadow .3s}
.fact-item.fact-chip:hover{border-color:rgba(56,189,248,0.35);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.fact-chip-icon{width:28px;height:28px;background:var(--cyan-dim);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fact-chip-icon i{color:var(--cyan);font-size:.72rem}
.about-links{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.link-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.71rem;color:var(--text-2);background:var(--surface);border:1px solid var(--border);padding:.38em .9em;border-radius:100px;transition:color var(--t),border-color var(--t),background var(--t);letter-spacing:.04em}
.link-chip:hover{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dim)}

/* ── SKILLS ── */
#skills{padding:8rem 0;background:var(--bg-2);position:relative}
#skills::before{content:'';position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,var(--bg),var(--bg-2));pointer-events:none;z-index:1}
.skills-intro{margin-bottom:3.5rem}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.skill-category{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem;transition:border-color var(--t),transform var(--t),box-shadow var(--t);position:relative;overflow:hidden}
.skill-category::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow)}
.skill-category:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.skill-category:hover::before{transform:scaleX(1)}
.skill-cat-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--cyan-dim);border-radius:8px;font-size:1rem;color:var(--cyan);margin-bottom:1rem}
.skill-cat-title{font-family:var(--font-display);font-size:.93rem;font-weight:600;color:var(--white);margin-bottom:1.2rem;letter-spacing:.02em}
.skill-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.skill-tag{font-family:var(--font-mono);font-size:.67rem;color:var(--text-2);background:var(--bg-3);border:1px solid var(--border);padding:.28em .72em;border-radius:4px;letter-spacing:.06em;transition:color var(--t),border-color var(--t),background var(--t);cursor:default;display:inline-block}
.skill-tag:hover{color:var(--cyan);border-color:rgba(56,189,248,0.5);background:var(--cyan-dim);transform:scale(1.08);box-shadow:0 0 12px rgba(56,189,248,0.2);transition:all .15s cubic-bezier(0.4,0,0.2,1)}
.skill-category:hover .skill-tag{color:var(--text);border-color:rgba(99,179,237,.22)}

/* ── PROJECTS ── */
#projects{padding:8rem 0;position:relative}
#projects::before{content:'';position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,var(--bg-2),var(--bg));pointer-events:none;z-index:1}
.projects-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3.5rem;gap:2rem;flex-wrap:wrap}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.5rem}
.project-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color var(--t),transform var(--t),box-shadow var(--t);cursor:default}
.project-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.06) 0%,transparent 60%);pointer-events:none;opacity:0;transition:opacity var(--t)}
.project-card:hover{border-color:var(--border-hover);transform:translateY(-5px);box-shadow:0 22px 60px rgba(0,0,0,.4)}
.project-card:hover::after{opacity:1}
.project-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.project-icon{width:44px;height:44px;background:var(--cyan-dim);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--cyan)}
.project-links{display:flex;gap:.6rem}
.project-link{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:6px;color:var(--text-3);font-size:.8rem;transition:color var(--t),border-color var(--t),background var(--t)}
.project-link:hover{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dim)}
.project-title{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--white);margin-bottom:.6rem;line-height:1.3;letter-spacing:-.01em}
.project-desc{font-size:.88rem;color:var(--text-2);line-height:1.78;flex:1;margin-bottom:1.5rem}
.project-stack{display:flex;flex-wrap:wrap;gap:.38rem}
.stack-tag{font-family:var(--font-mono);font-size:.62rem;color:var(--cyan);background:var(--cyan-dim);padding:.24em .62em;border-radius:3px;letter-spacing:.06em}

/* ── CERTIFICATIONS — Compact 2-col grid ── */
#certifications{padding:8rem 0;background:var(--bg-2);position:relative}
#certifications::before{content:'';position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,var(--bg),var(--bg-2));pointer-events:none;z-index:1}
.cert-header{margin-bottom:3rem}
.cert-showcase{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2.5rem}
.cert-showcase-item{display:flex;align-items:center;gap:.85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.75rem 1rem;transition:border-color var(--t),background var(--t),transform var(--t),box-shadow var(--t);text-decoration:none;cursor:default;position:relative;overflow:hidden}
.cert-showcase-item:hover{border-color:var(--border-hover);background:var(--surface-2);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.cert-showcase-icon{width:32px;height:32px;background:var(--cyan-dim);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:.78rem;flex-shrink:0}
.cert-showcase-body{flex:1;min-width:0}
.cert-showcase-title{font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--white);margin-bottom:.08rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cert-showcase-org{font-family:var(--font-mono);font-size:.6rem;color:var(--text-3);letter-spacing:.04em}
.cert-showcase-link{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.62rem;color:var(--cyan);background:var(--cyan-dim);border:1px solid rgba(56,189,248,.25);padding:.28em .65em;border-radius:4px;transition:background var(--t),border-color var(--t),color var(--t);white-space:nowrap;flex-shrink:0;text-decoration:none;letter-spacing:.04em}
.cert-showcase-link:hover{background:rgba(56,189,248,.22);border-color:var(--cyan)}
.cert-showcase-link i{font-size:.6rem}
@media(max-width:700px){.cert-showcase{grid-template-columns:1fr}}

/* ── WRITING — Promotional section ── */
#writing{padding:8rem 0;position:relative}
#writing::before{content:'';position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,var(--bg-2),var(--bg));pointer-events:none;z-index:1}
.writing-promo{display:grid;grid-template-columns:1.2fr 1fr;gap:5rem;align-items:center}
.writing-desc{font-size:1rem;color:var(--text-2);line-height:1.82;margin-bottom:2rem;max-width:480px}
.writing-topics{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.writing-topic{font-family:var(--font-mono);font-size:.7rem;color:var(--cyan);background:var(--cyan-dim);border:1px solid rgba(56,189,248,.2);padding:.35em .85em;border-radius:100px;letter-spacing:.04em}
.writing-cta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--white);background:var(--surface);border:1px solid var(--border);padding:.75em 1.6em;border-radius:8px;transition:background var(--t),border-color var(--t),transform var(--t),box-shadow var(--t)}
.writing-cta:hover{background:var(--surface-2);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.writing-cta i{font-size:1.1rem;color:var(--cyan)}
.writing-visual{display:flex;flex-direction:column;gap:2rem}

.writing-counter{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;text-align:center}
.writing-counter-num{display:block;font-family:var(--font-display);font-size:2.8rem;font-weight:800;color:var(--cyan);line-height:1}
.writing-counter-label{font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase;margin-top:.4rem;display:block}
.writing-platforms{display:flex;flex-direction:column;gap:.75rem}
.writing-platform{display:flex;align-items:center;gap:.85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.9rem 1.2rem;transition:border-color var(--t)}
.writing-platform:hover{border-color:var(--border-hover)}
.writing-platform i{font-size:1.2rem;color:var(--text-2);width:28px;text-align:center}
.writing-platform-name{display:block;font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--white);line-height:1.3}
.writing-platform-handle{display:block;font-family:var(--font-mono);font-size:.64rem;color:var(--text-3);letter-spacing:.04em}

/* ── CONTACT ── */
#contact{padding:8rem 0;background:var(--bg-2);position:relative}
#contact::before{content:'';position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,var(--bg),var(--bg-2));pointer-events:none;z-index:1}
.contact-header{margin-bottom:3rem}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;margin-top:2.5rem;align-items:start}
.contact-info p{font-size:.94rem;color:var(--text-2);line-height:1.82;margin-bottom:2rem}
.contact-method{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.2rem}
.cm-icon{width:40px;height:40px;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.84rem;color:var(--cyan);flex-shrink:0;margin-top:.1rem}
.cm-text{display:flex;flex-direction:column;gap:.18rem}
.cm-label{font-family:var(--font-mono);font-size:.64rem;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;line-height:1}
.cm-value{font-family:var(--font-mono);font-size:.79rem;color:var(--text);line-height:1.4}
.contact-form-wrap{width:100%}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.form-group{display:flex;flex-direction:column;gap:.4rem;width:100%}
.form-group label{font-family:var(--font-mono);font-size:.66rem;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;display:block}
.form-group input,.form-group textarea{background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:.74rem 1rem;color:var(--text);font-family:var(--font-body);font-size:.875rem;outline:none;transition:border-color var(--t),background var(--t),box-shadow var(--t);resize:vertical;width:100%;display:block}
.form-group input:focus,.form-group textarea:focus{border-color:var(--cyan);background:var(--surface-2);box-shadow:0 0 0 3px rgba(56,189,248,.08)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-3)}
.form-submit{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.79rem;letter-spacing:.08em;color:var(--bg);background:var(--cyan);padding:.84em 2em;border-radius:8px;border:1px solid var(--cyan);cursor:pointer;transition:background var(--t),transform var(--t),box-shadow var(--t);align-self:flex-start;font-weight:500}
.form-submit:hover{background:#7dd3fc;transform:translateY(-2px);box-shadow:0 8px 32px rgba(56,189,248,.3)}
.form-submit:active{transform:translateY(0)}
.form-status{margin-top:.5rem;font-family:var(--font-mono);font-size:.75rem;min-height:1.5em}
.form-status.success{color:#4ade80}
.form-status.error{color:#f87171}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:2.5rem 0;position:relative;z-index:2}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 clamp(1.5rem,5vw,4rem);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer-left{font-family:var(--font-mono);font-size:.74rem;color:var(--text-3)}
.footer-left span{color:var(--cyan)}
.footer-social{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:flex-end}
.footer-social-link{display:flex;flex-direction:column;align-items:center;gap:.3rem;transition:transform var(--t)}
.footer-social-link:hover{transform:translateY(-3px)}
.footer-icon-box{width:44px;height:44px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.92rem;color:var(--text-3);background:var(--surface);transition:color var(--t),border-color var(--t),background var(--t)}
.footer-icon-box.hf-icon{font-size:1.05rem;filter:grayscale(1);opacity:.55;transition:filter var(--t),opacity var(--t),color var(--t),border-color var(--t),background var(--t)}
.footer-social-link:hover .footer-icon-box{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dim)}
.footer-social-link:hover .footer-icon-box.hf-icon{filter:grayscale(0);opacity:1}
.footer-social-label{font-family:var(--font-mono);font-size:.56rem;color:var(--text-3);letter-spacing:.06em;transition:color var(--t)}
.footer-social-link:hover .footer-social-label{color:var(--cyan)}

/* ── LOADING SCREEN ── */
#loader{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;background:var(--bg);transition:opacity .4s var(--ease),visibility .4s}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{font-family:var(--font-display);font-size:2.6rem;font-weight:700;letter-spacing:.05em;color:var(--white)}
.loader-logo span{color:var(--cyan)}
.loader-name{font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);letter-spacing:.18em;text-transform:uppercase;margin-top:1.2rem;animation:fade-in-name .4s ease .9s both}
@keyframes fade-in-name{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SCROLL TO TOP ── */
.scroll-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--cyan);font-size:.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s,border-color .3s,box-shadow .3s;pointer-events:none}
.scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(56,189,248,.2);background:var(--surface-2)}

/* ── RESPONSIVE ── */ */
@media(max-width:1060px){
  .writing-promo{grid-template-columns:1fr;gap:3rem}
  .writing-visual{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-card-wrap{display:none}
  .about-grid{grid-template-columns:1fr}
  .about-img-wrap{max-width:300px}
  .about-header{margin-bottom:-1rem}
  .contact-grid{grid-template-columns:1fr}
  .writing-promo{grid-template-columns:1fr;gap:2.5rem}
  .writing-visual{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .nav-links{display:none}
  .hamburger{display:flex}
  .hero-name{font-size:clamp(2.4rem,8vw,3.4rem)}
}

@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
  .hero-stats{gap:1.5rem}
  .projects-grid{grid-template-columns:1fr}
  .hero-social{gap:.8rem}
  .about-facts{grid-template-columns:1fr}
  .section-title{font-size:clamp(1.6rem,6vw,2rem)}
  .hero-social-link,.footer-social-link{min-width:44px;min-height:44px}
  .nav-cta{padding:.6em 1.2em!important;min-height:44px;display:inline-flex!important;align-items:center}
  .writing-promo{grid-template-columns:1fr;gap:2rem}
  .writing-visual{grid-template-columns:1fr}
  .writing-counter-num{font-size:2.2rem}
  #writing{padding:5rem 0}
  #certifications{padding:5rem 0}
  #about{padding:5rem 0}
  #skills{padding:5rem 0}
  #projects{padding:5rem 0}
  #contact{padding:5rem 0}
}

@media(max-width:480px){
  .hero-inner{padding:0 1.25rem}
  .hero-name{font-size:clamp(2rem,10vw,2.6rem)}
  .hero-actions{flex-direction:column}
  .hero-actions .btn-primary,.hero-actions .btn-outline{width:100%;justify-content:center}
  .stat-num{font-size:1.3rem}
  .skills-grid{grid-template-columns:1fr}
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  #starfield{display:none}
  .orb{display:none}
  #progress-bar{display:none}
  .tilt-card{transform:none!important}
  .hero-word,.hero-tag,.hero-name,.hero-role,.hero-desc,.hero-actions,.hero-social,.hero-stats,.hero-card,.hero-card-wrap{opacity:1!important;transform:none!important}
  .hero-3d-word{text-shadow:none!important}
  .hero-card::before{transform:scaleX(1)!important}
  .corner-line{opacity:1!important;clip-path:inset(0 0% 0% 0)!important}
}