/* ====================================================
   SAKSHI GOSWAMI PORTFOLIO — STYLESHEET
   Theme: Refined Dark · Indigo Accent · Glass + Aurora
   ==================================================== */

:root {
  --bg:       #06070f;
  --bg-1:     #0b0d1e;
  --bg-2:     #0f1128;
  --glass:    rgba(255,255,255,0.03);
  --glass-md: rgba(255,255,255,0.06);
  --border:   rgba(129,140,248,0.12);
  --border-h: rgba(129,140,248,0.35);

  --indigo:   #818cf8;
  --indigo-d: #6366f1;
  --indigo-l: #a5b4fc;
  --violet:   #a78bfa;
  --pink:     #f472b6;
  --cyan:     #67e8f9;
  --green:    #4ade80;

  --glow:     rgba(129,140,248,0.22);
  --glow-lg:  rgba(129,140,248,0.10);

  --text:     #eef0ff;
  --text-2:   #8892b0;
  --text-3:   #4a5070;

  --r:  14px;
  --r2: 20px;
  --r3: 28px;

  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --font: 'Outfit', sans-serif;
  --font-display: 'Fraunces', serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--indigo) var(--bg-1)}
html::-webkit-scrollbar{width:4px}
html::-webkit-scrollbar-track{background:var(--bg-1)}
html::-webkit-scrollbar-thumb{background:var(--indigo);border-radius:2px}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.7;overflow-x:hidden}

/* ===================== AURORA ===================== */
.aurora-wrap{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aurora{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.55;animation:auroraMove 18s ease-in-out infinite}
.a1{width:700px;height:700px;background:radial-gradient(circle,rgba(99,102,241,.35),transparent 70%);top:-200px;right:-150px;animation-delay:0s;animation-duration:22s}
.a2{width:600px;height:600px;background:radial-gradient(circle,rgba(167,139,250,.3),transparent 70%);bottom:-180px;left:-100px;animation-delay:-7s;animation-duration:28s}
.a3{width:400px;height:400px;background:radial-gradient(circle,rgba(244,114,182,.2),transparent 70%);top:40%;left:40%;animation-delay:-14s;animation-duration:20s}
.a4{width:500px;height:500px;background:radial-gradient(circle,rgba(103,232,249,.15),transparent 70%);top:20%;left:-80px;animation-delay:-4s;animation-duration:32s}
@keyframes auroraMove{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(.95)}}

/* Grain */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.025;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-repeat:repeat;background-size:200px}

/* Code Canvas */
#codeCanvas{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:1}

/* ===================== CURSOR ===================== */
.cur-dot,.cur-ring{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
.cur-dot{width:5px;height:5px;background:var(--indigo);box-shadow:0 0 10px var(--indigo)}
.cur-ring{width:30px;height:30px;border:1.5px solid rgba(129,140,248,.5);transition:width .2s var(--ease),height .2s var(--ease),background .2s}
@media(pointer:coarse){.cur-dot,.cur-ring{display:none}}

/* Scroll progress */
.scroll-prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--indigo),var(--violet),var(--pink));z-index:10000;width:0;box-shadow:0 0 10px var(--indigo)}

/* ===================== LAYOUT ===================== */
.container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.sec{padding:110px 0;position:relative}

/* Section header */
.sec-hd{text-align:center;margin-bottom:64px}
.eyebrow{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:4px;color:var(--indigo);margin-bottom:14px;padding:5px 16px;border:1px solid rgba(129,140,248,.25);border-radius:50px;background:rgba(129,140,248,.06)}
.sec-title{font-family:var(--font-display);font-size:clamp(30px,5vw,52px);font-weight:700;line-height:1.1;letter-spacing:-.5px;color:var(--text)}
.sec-title em{font-style:italic;color:var(--indigo);font-weight:700}

/* Reveal animations */
.rv-l,.rv-r,.rv-u,.rv-f{opacity:0;transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv-l{transform:translateX(-50px)}
.rv-r{transform:translateX(50px)}
.rv-u{transform:translateY(40px)}
.rv-f{transform:scale(.95)}
.vis{opacity:1!important;transform:none!important}

/* ===================== NAVBAR ===================== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0;transition:all .3s var(--ease)}
.navbar.stuck{background:rgba(6,7,15,.88);backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.nav-c{max-width:1200px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between}

/* Logo */
.logo{display:flex;align-items:center;gap:2px;text-decoration:none;font-family:var(--font);font-size:20px;font-weight:800}
.lb{color:var(--indigo);font-weight:300;font-size:22px}
.ln{color:var(--text);letter-spacing:-.5px}

.nav-links{display:flex;list-style:none;gap:2px}
.nl{text-decoration:none;color:var(--text-2);font-size:14px;font-weight:500;padding:8px 14px;border-radius:8px;transition:.25s var(--ease);position:relative}
.nl::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--indigo);border-radius:2px;transition:width .3s;box-shadow:0 0 8px var(--indigo)}
.nl:hover,.nl.active{color:var(--text);background:rgba(129,140,248,.07)}
.nl:hover::after,.nl.active::after{width:50%}
.nl-cta{border:1px solid var(--border-h)!important;border-radius:10px!important}
.nl-cta:hover{background:rgba(129,140,248,.12)!important;border-color:var(--indigo)!important;color:var(--indigo)!important}

.burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:1.5px;background:var(--text);border-radius:2px;transition:.3s var(--ease)}
.burger.open span:first-child{transform:translateY(7.5px) rotate(45deg)}
.burger.open span:last-child{transform:translateY(-7.5px) rotate(-45deg)}

/* ===================== HERO ===================== */
.hero{min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:center;padding-top:90px;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(129,140,248,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(129,140,248,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent);z-index:0}

.hero-c{max-width:1200px;margin:0 auto;padding:60px 24px 40px;display:grid;grid-template-columns:1fr 430px;gap:64px;align-items:center;position:relative;z-index:2}

/* Availability pill */
.avail-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border:1px solid rgba(74,222,128,.25);border-radius:50px;background:rgba(74,222,128,.06);font-size:13px;color:#4ade80;font-weight:500;margin-bottom:28px;animation:fadeUp .7s var(--ease) both}
.ap-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;animation:dotPulse 2s infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 6px #4ade80}50%{box-shadow:0 0 18px #4ade80}}

/* Hero name */
.h-name{font-family:var(--font-display);font-size:clamp(48px,8vw,90px);font-weight:900;line-height:.92;letter-spacing:-3px;margin-bottom:20px}
.hn-line{display:block;overflow:hidden}
.hn-line > span,.hn-line{animation:slideUp .75s var(--spring) var(--d,0s) both}
.hn-big{font-size:clamp(60px,10vw,108px)}
.hn-accent{background:linear-gradient(135deg,var(--indigo),var(--violet),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@keyframes slideUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}

/* Typewriter */
.typewriter-row{display:flex;align-items:center;gap:2px;margin-bottom:22px;font-size:18px;color:var(--text-2);font-weight:400;animation:fadeUp .7s .45s var(--ease) both}
.tw-cur{color:var(--indigo);animation:blink .8s infinite;font-weight:300}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.hero-bio{font-size:17px;color:var(--text-2);line-height:1.8;max-width:520px;margin-bottom:36px;animation:fadeUp .7s .55s var(--ease) both}

/* CTA buttons */
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:36px;animation:fadeUp .7s .65s var(--ease) both}
.btn-fill{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:linear-gradient(135deg,var(--indigo-d),var(--indigo));color:#fff;border-radius:12px;text-decoration:none;font-weight:600;font-size:15px;transition:.3s var(--ease);box-shadow:0 4px 24px rgba(99,102,241,.35);border:none;cursor:pointer;position:relative;overflow:hidden}
.btn-fill::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.12);opacity:0;transition:.3s}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(99,102,241,.5)}
.btn-fill:hover::before{opacity:1}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:transparent;color:var(--text);border-radius:12px;text-decoration:none;font-weight:600;font-size:15px;transition:.3s var(--ease);border:1px solid var(--border-h)}
.btn-outline:hover{background:rgba(129,140,248,.08);border-color:var(--indigo);color:var(--indigo);box-shadow:0 0 20px var(--glow)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:13px 20px;background:var(--glass);color:var(--text-2);border-radius:12px;text-decoration:none;font-weight:500;font-size:14px;transition:.3s var(--ease);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--border-h);background:var(--glass-md)}

/* Socials */
.hero-socs{display:flex;gap:8px;animation:fadeUp .7s .75s var(--ease) both}
.hs{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--border);color:var(--text-2);text-decoration:none;transition:.3s var(--ease)}
.hs svg{width:17px;height:17px}
.hs:hover{background:rgba(129,140,248,.1);border-color:var(--indigo);color:var(--indigo);transform:translateY(-3px);box-shadow:0 8px 20px rgba(129,140,248,.2)}

/* Profile card */
.pcard{position:relative;background:rgba(11,13,30,.7);border:1px solid var(--border);border-radius:var(--r3);padding:36px 32px 28px;backdrop-filter:blur(24px);text-align:center;animation:fadeRight .9s .3s var(--ease) both}
.pcard-ring{position:absolute;border-radius:50%;border:1px solid;pointer-events:none}
.pr1{inset:-20px;border-color:rgba(129,140,248,.08);animation:spinRing 16s linear infinite}
.pr2{inset:-40px;border-color:rgba(167,139,250,.05);animation:spinRing 28s linear infinite reverse}
@keyframes spinRing{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.pcard-orb{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(129,140,248,.12),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.pcard-photo{width:164px;height:164px;border-radius:50%;overflow:hidden;margin:0 auto 22px;border:2.5px solid rgba(129,140,248,.3);box-shadow:0 0 40px rgba(129,140,248,.18);background:var(--bg-2)}
.ph-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(11,13,30,.6));font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:1.5px;gap:6px}
.ph-placeholder svg{width:70px;opacity:.5}

.pcard-chip{position:absolute;display:flex;align-items:center;gap:6px;padding:7px 14px;background:rgba(11,13,30,.88);border:1px solid var(--border-h);border-radius:50px;font-size:12px;font-weight:600;color:var(--text);backdrop-filter:blur(16px);white-space:nowrap}
.chip-tl{top:20px;left:-20px;animation:floatChip 4s ease-in-out infinite}
.chip-br{bottom:80px;right:-20px;animation:floatChip 4s ease-in-out infinite reverse}
@keyframes floatChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.pstat{position:absolute;background:rgba(11,13,30,.9);border:1px solid var(--border);border-radius:10px;padding:8px 14px;text-align:center;backdrop-filter:blur(16px)}
.pstat b{display:block;font-size:17px;font-weight:800;color:var(--indigo);line-height:1}
.pstat small{font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.8px}
.ps1{bottom:20px;left:-10px;animation:floatStat 5s 0s ease-in-out infinite}
.ps2{top:30px;right:-10px;animation:floatStat 5s 1.5s ease-in-out infinite}
.ps3{bottom:20px;right:10px;animation:floatStat 5s 3s ease-in-out infinite}
@keyframes floatStat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Preview section */
.preview-section{max-width:1200px;margin:0 auto;padding:60px 24px 80px;position:relative;z-index:2}
.preview-divider{display:flex;align-items:center;gap:18px;margin-bottom:32px}
.pd-line{flex:1;height:1px;background:var(--border)}
.pd-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:4px;color:var(--indigo)}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-bottom:32px}
.preview-more{text-align:center}

/* ===================== PROJECT CARD ===================== */
.proj-card{background:rgba(11,13,30,.7);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;transition:.3s var(--ease);backdrop-filter:blur(18px);position:relative}
.proj-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(129,140,248,.04),transparent);opacity:0;transition:.3s}
.proj-card:hover{transform:translateY(-6px);border-color:rgba(129,140,248,.3);box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 30px rgba(129,140,248,.12)}
.proj-card:hover::before{opacity:1}
.pc-thumb{height:150px;background:linear-gradient(135deg,var(--bg-2),rgba(129,140,248,.06));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pc-thumb-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(129,140,248,.1);border:1px solid rgba(129,140,248,.2);box-shadow:0 0 24px rgba(129,140,248,.12)}
.pc-cat{position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:50px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;background:rgba(129,140,248,.12);color:var(--indigo-l);border:1px solid rgba(129,140,248,.2)}
.pc-body{padding:18px 20px 20px}
.pc-title{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:7px;color:var(--text)}
.pc-desc{font-size:13px;color:var(--text-2);line-height:1.65;margin-bottom:13px}
.pc-stack{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.pctag{padding:3px 9px;border-radius:50px;font-size:11px;font-weight:600;background:rgba(129,140,248,.07);color:var(--indigo-l);border:1px solid rgba(129,140,248,.14)}
.pc-links{display:flex;gap:8px}
.pcl{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text-2);text-decoration:none;padding:6px 12px;border-radius:8px;border:1px solid transparent;transition:.25s var(--ease)}
.pcl:hover{color:var(--indigo);border-color:rgba(129,140,248,.25);background:rgba(129,140,248,.06)}
.pcl svg{width:13px;height:13px}

/* ===================== ABOUT ===================== */
.about-sec{background:rgba(11,13,30,.6)}
.about-grid{display:grid;grid-template-columns:360px 1fr;gap:60px;align-items:center}
.ai-card{position:relative;border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);background:var(--glass)}
.ai-photo{aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(99,102,241,.1),rgba(6,7,15,.5));font-size:11px;color:var(--text-3);gap:10px;text-transform:uppercase;letter-spacing:2px}
.ai-photo svg{width:100px;opacity:.45}
.ai-glow{position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(129,140,248,.14),transparent);pointer-events:none}
.ai-badge{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:8px 20px;background:rgba(6,7,15,.88);border:1px solid var(--border-h);border-radius:50px;font-size:13px;font-weight:600;color:var(--text);backdrop-filter:blur(16px);white-space:nowrap}
.ai-badge b{color:var(--indigo)}

.at-greet{font-family:var(--font-display);font-size:26px;font-weight:700;margin-bottom:18px;color:var(--text)}
.at-p{color:var(--text-2);margin-bottom:16px;font-size:15.5px}
.at-p strong{color:var(--indigo-l);font-weight:500}
.at-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.atag{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:500;background:rgba(129,140,248,.07);border:1px solid rgba(129,140,248,.15);color:var(--indigo-l);transition:.25s var(--ease)}
.atag:hover{background:rgba(129,140,248,.14);transform:translateY(-2px)}
.at-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--glass-md);border:1px solid var(--border);border-radius:var(--r);padding:20px;backdrop-filter:blur(16px)}
.af{display:flex;flex-direction:column;gap:3px}
.afl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-3)}
.afv{font-size:14px;font-weight:500;color:var(--text)}
.afv.green{color:var(--green)}

/* ===================== SKILLS ===================== */
.skills-sec{background:var(--bg)}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.sk-card{background:rgba(11,13,30,.75);border:1px solid var(--border);border-radius:var(--r2);padding:26px;backdrop-filter:blur(18px);transition:.3s var(--ease);opacity:0;transform:translateY(30px)}
.sk-card.vis{opacity:1;transform:none}
.sk-card:hover{border-color:rgba(129,140,248,.28);box-shadow:0 8px 32px rgba(0,0,0,.3),0 0 18px rgba(129,140,248,.07);transform:translateY(-4px)}
.skh{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.skh-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(129,140,248,.08);border:1px solid rgba(129,140,248,.18)}
.skh-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text)}
.sk-items{display:flex;flex-direction:column;gap:13px}
.ski-top{display:flex;justify-content:space-between;margin-bottom:5px}
.ski-name{font-size:13.5px;font-weight:500;color:var(--text)}
.ski-pct{font-size:12px;font-weight:700;color:var(--indigo)}
.ski-bar{height:3.5px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.ski-fill{height:100%;background:linear-gradient(90deg,var(--indigo-d),var(--violet));border-radius:4px;width:0;transition:width 1.2s var(--ease);box-shadow:0 0 6px rgba(129,140,248,.4)}

/* ===================== TIMELINE ===================== */
.edu-sec{background:rgba(11,13,30,.6)}
.exp-sec{background:var(--bg)}
.timeline{position:relative;max-width:800px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:32px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--indigo) 8%,var(--indigo) 92%,transparent);opacity:.25}
.tl-item{display:flex;gap:24px;margin-bottom:32px;opacity:0;transform:translateX(-30px);transition:.6s var(--ease)}
.tl-item.vis{opacity:1;transform:none}
.tl-dot{flex-shrink:0;width:64px;height:64px;border-radius:var(--r);background:rgba(11,13,30,.9);border:1px solid rgba(129,140,248,.28);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 20px rgba(129,140,248,.1);z-index:1;backdrop-filter:blur(16px)}
.tl-content{background:rgba(11,13,30,.7);border:1px solid var(--border);border-radius:var(--r2);padding:22px 26px;flex:1;transition:.3s var(--ease);backdrop-filter:blur(16px)}
.tl-content:hover{border-color:rgba(129,140,248,.25);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.tl-year{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--indigo);background:rgba(129,140,248,.08);border:1px solid rgba(129,140,248,.2);padding:3px 10px;border-radius:50px;margin-bottom:9px}
.tl-title{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:4px;color:var(--text)}
.tl-org{font-size:13px;font-weight:500;color:var(--indigo-l);margin-bottom:9px}
.tl-desc{font-size:13.5px;color:var(--text-2);line-height:1.7}

/* ===================== PROJECTS ===================== */
.proj-sec{background:rgba(11,13,30,.6)}
.proj-filter{display:flex;gap:8px;justify-content:center;margin-bottom:40px;flex-wrap:wrap}
.pf{padding:8px 20px;border-radius:50px;font-size:13px;font-weight:600;background:transparent;border:1px solid var(--border);color:var(--text-2);cursor:pointer;transition:.25s var(--ease)}
.pf:hover,.pf.active{background:rgba(129,140,248,.1);border-color:var(--indigo);color:var(--text);box-shadow:0 0 14px rgba(129,140,248,.12)}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}

/* ===================== CONTACT ===================== */
.contact-sec{background:var(--bg)}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.cl-h{font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:14px;color:var(--text)}
.cl-p{color:var(--text-2);font-size:15px;margin-bottom:30px;line-height:1.8}
.cl-details{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.cld{display:flex;align-items:flex-start;gap:14px}
.cld-icon{width:42px;height:42px;flex-shrink:0;border-radius:11px;border:1px solid var(--border);background:var(--glass);display:flex;align-items:center;justify-content:center;color:var(--indigo)}
.cld-icon svg{width:17px;height:17px}
.cld-l{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-3);margin-bottom:2px}
.cld-v{font-size:14px;font-weight:500;color:var(--text)}
.cl-socs{display:flex;gap:8px;flex-wrap:wrap}
.cls{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:9px;border:1px solid var(--border);background:var(--glass);color:var(--text-2);text-decoration:none;font-size:13px;font-weight:600;transition:.25s var(--ease)}
.cls:hover{border-color:var(--indigo);color:var(--indigo);background:rgba(129,140,248,.07)}

/* Form */
.c-right{background:rgba(11,13,30,.75);border:1px solid var(--border);border-radius:var(--r3);padding:34px;backdrop-filter:blur(24px)}
form{display:flex;flex-direction:column;gap:15px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-2)}
.fg input,.fg textarea{padding:11px 15px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font);font-size:14px;transition:.25s var(--ease);resize:none;outline:none}
.fg input::placeholder,.fg textarea::placeholder{color:var(--text-3)}
.fg input:focus,.fg textarea:focus{border-color:var(--indigo);background:rgba(129,140,248,.04);box-shadow:0 0 0 3px rgba(129,140,248,.1)}
.ferr{display:block;font-size:11px;color:#f87171;min-height:14px;margin-top:2px}
.fstatus{padding:11px 16px;border-radius:9px;font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:9px;animation:fadeUp .3s var(--ease)}
.fstatus.ok{background:rgba(74,222,128,.09);border:1px solid rgba(74,222,128,.25);color:#4ade80}
.fstatus.err{background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.25);color:#f87171}
.btn-submit{width:100%;justify-content:center;padding:15px;font-size:15px}
@keyframes spinAnim{to{transform:rotate(360deg)}}
.spinsv{animation:spinAnim .8s linear infinite}
.ejs-note{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;color:var(--text-3);text-align:center;margin-top:4px}
.ejs-note svg{color:var(--indigo);flex-shrink:0}
.ejs-note a{color:var(--indigo);text-decoration:none}
.ejs-note a:hover{text-decoration:underline}

/* ===================== FOOTER ===================== */
.footer{background:var(--bg);border-top:1px solid var(--border);padding:56px 0 28px;position:relative;overflow:hidden}
.footer-glow{position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:700px;height:200px;background:radial-gradient(ellipse,rgba(129,140,248,.06),transparent);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:48px;margin-bottom:40px;position:relative;z-index:1}
.fb-tagline{color:var(--text-2);font-size:14px;line-height:1.7;margin:14px 0 22px;max-width:280px}
.fb-socs{display:flex;gap:8px}
.fbs-i{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-2);text-decoration:none;transition:.25s var(--ease)}
.fbs-i svg{width:15px;height:15px}
.fbs-i:hover{border-color:var(--indigo);color:var(--indigo);background:rgba(129,140,248,.08)}
.fch{font-family:var(--font-display);font-size:13px;font-weight:700;margin-bottom:16px;color:var(--text)}
.fcl{list-style:none;display:flex;flex-direction:column;gap:10px}
.fcl a{color:var(--text-2);text-decoration:none;font-size:14px;transition:.2s var(--ease)}
.fcl a:hover{color:var(--indigo);padding-left:4px}
.fci{list-style:none;display:flex;flex-direction:column;gap:12px}
.fci li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text-2);line-height:1.5}
.fci svg{flex-shrink:0;margin-top:2px;opacity:.6}
.footer-btm{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border);font-size:13px;color:var(--text-3);position:relative;z-index:1}
.back-top{color:var(--indigo);text-decoration:none;transition:.2s}
.back-top:hover{color:var(--indigo-l)}

/* Scroll top button */
.stb{position:fixed;bottom:30px;right:30px;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--indigo-d),var(--indigo));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 20px rgba(99,102,241,.4);transition:.3s var(--ease);opacity:0;pointer-events:none;z-index:100;transform:translateY(20px)}
.stb.show{opacity:1;pointer-events:all;transform:none}
.stb:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(99,102,241,.55)}
.stb svg{width:19px;height:19px}

/* ===================== MISC ANIMATIONS ===================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1024px){
  .hero-c{grid-template-columns:1fr;gap:40px;padding:60px 24px 20px}
  .hero-right{display:flex;justify-content:center;order:-1}
  .pcard{max-width:380px}
  .about-grid{grid-template-columns:1fr}
  .about-img{max-width:340px;margin:0 auto}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links{position:fixed;top:68px;left:0;right:0;background:rgba(6,7,15,.97);backdrop-filter:blur(24px);flex-direction:column;padding:16px 20px 24px;gap:2px;border-bottom:1px solid var(--border);transform:translateY(-110%);transition:transform .4s var(--ease);z-index:999}
  .nav-links.open{transform:translateY(0)}
  .nl{padding:13px 16px;font-size:15px}
  .burger{display:flex}
  .hero-c{padding-top:30px}
  .sec{padding:80px 0}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-btm{flex-direction:column;gap:8px;text-align:center}
  .hn-big{font-size:clamp(52px,14vw,80px)}
  .h-name{letter-spacing:-2px}
  .chip-tl,.chip-br,.pstat{display:none}
  .about-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column;align-items:flex-start}
  .btn-fill,.btn-outline,.btn-ghost{width:100%;justify-content:center}
  .c-right{padding:22px 16px}
  .stb{bottom:20px;right:20px}
}
.pc-links {
  position: relative;
  z-index: 50;
}

.pcl {
  position: relative;
  z-index: 60;
  pointer-events: auto;
}
.pcard-photo {
  width: 180px;
  height: 180px;   /* IMPORTANT: same width & height */
  border-radius: 50%;  /* makes it circle */
  overflow: hidden;
  position: relative;
  margin: auto;
}

.profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.pcard-photo {
  box-shadow: 0 0 25px rgba(129,140,248,0.6);
  border: 3px solid rgba(129,140,248,0.4);
}
.ai-photo {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20px; /* keep card style */
}

.about-profile {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 🔥 keeps same size without stretch */
  display: block;
}

/* Keep name overlay same style */
.ai-photo span {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.about-profile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%; 
}