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

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;text-decoration:none;border:none;outline:none;}

:root{
  --bg:#060b14;
  --bg2:#0d1526;
  --bg3:#111d35;
  --surface:rgba(255,255,255,0.04);
  --surface-hover:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.08);
  --accent:#6c63ff;
  --accent2:#00d4ff;
  --accent3:#ff6584;
  --text:#fff;
  --text2:#a8b2c8;
  --text3:#6b7a99;
  --grad:linear-gradient(135deg,#6c63ff,#00d4ff);
  --glow:0 0 40px rgba(108,99,255,0.3);
  --radius:16px;
  --radius-sm:8px;
  --trans:.3s ease;
}

html{scroll-behavior:smooth;font-size:62.5%;overflow-x:hidden;}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;overflow-x:hidden;line-height:1.6;}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px;}

/* CURSOR */
/* CURSOR */
.cursor, .cursor-follower {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s, opacity 0.3s ease;
}
.cursor {
  width: 8px;
  height: 8px;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.cursor-follower {
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(108,99,255,.5);
  transform: translate(-50%, -50%);
  transition: transform 0.15s, left 0.1s, top 0.1s, opacity 0.3s ease;
}

/* Hide cursor in hero section */
body:has(.hero:hover) .cursor,
body:has(.hero:hover) .cursor-follower {
  opacity: 0;
}

/* CANVAS */
#particle-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}

/* GLASS */
.glass-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);backdrop-filter:blur(20px);transition:var(--trans);}
.glass-card:hover{background:var(--surface-hover);border-color:rgba(108,99,255,.3);transform:translateY(-4px);box-shadow:var(--glow);}

/* NAV */
.header{position:fixed;top:0;left:0;width:100%;padding:2rem 6%;display:flex;justify-content:space-between;align-items:center;z-index:1000;transition:var(--trans);}
.header.scrolled{background:rgba(6,11,20,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);}
.logo{font-size:2.2rem;font-weight:700;color:var(--text);}
.logo-bracket{color:var(--accent);}
.navbar{display:flex;gap:3rem;}
.nav-link{font-size:1.5rem;color:var(--text2);transition:var(--trans);position:relative;padding:.4rem 0;}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--grad);border-radius:2px;transition:width var(--trans);}
.nav-link:hover,.nav-link.active{color:var(--text);}
.nav-link:hover::after,.nav-link.active::after{width:100%;}
.header-actions{display:flex;align-items:center;gap:1.5rem;}
.btn-outline{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 2rem;border:1.5px solid var(--accent);border-radius:4rem;font-size:1.4rem;color:var(--accent);font-family:'Space Grotesk',sans-serif;cursor:pointer;transition:var(--trans);}
.btn-outline:hover{background:var(--accent);color:#fff;box-shadow:var(--glow);}
.menu-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;padding:.5rem;}
.menu-btn span{display:block;width:24px;height:2px;background:var(--text);transition:var(--trans);}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding:12rem 6% 4rem;position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;animation:orbFloat 8s ease-in-out infinite;}
.orb-1{width:600px;height:600px;background:var(--accent);top:-100px;right:-100px;animation-delay:0s;}
.orb-2{width:400px;height:400px;background:var(--accent2);bottom:-50px;left:-100px;animation-delay:-3s;}
.orb-3{width:300px;height:300px;background:var(--accent3);top:40%;left:40%;animation-delay:-6s;}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-30px) scale(1.1);}}

.hero-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:6rem;width:100%;}
.hero-text{flex:1;}
.hero-badge{display:inline-flex;align-items:center;gap:.8rem;padding:.8rem 1.6rem;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.3);border-radius:4rem;font-size:1.3rem;color:var(--accent2);margin-bottom:2.5rem;}
.badge-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4);}50%{box-shadow:0 0 0 8px rgba(34,197,94,0);}}

.hero-name{font-size:clamp(4.5rem,7vw,9rem);font-weight:700;line-height:1.05;margin-bottom:1.5rem;}
.reveal-text{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fadeSlideUp .8s ease forwards;opacity:0;}
.delay-1{animation-delay:.2s;}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

.hero-role{font-size:2.2rem;color:var(--text2);margin-bottom:2rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:nowrap;white-space:nowrap;overflow:visible;}
.role-prefix{color:var(--text2);flex-shrink:0;}
.typed-role{color:var(--accent);font-weight:600;min-width:2ch;}
.typed-cursor{color:var(--accent)!important;}

.hero-desc{font-size:1.6rem;color:var(--text2);max-width:52rem;line-height:1.7;margin-bottom:3rem;}
.hero-cta{display:flex;gap:1.5rem;margin-bottom:3rem;flex-wrap:wrap;}
.btn-primary{display:inline-flex;align-items:center;gap:.8rem;padding:1.2rem 2.8rem;background:var(--grad);border-radius:4rem;font-size:1.5rem;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;cursor:pointer;transition:var(--trans);box-shadow:0 0 30px rgba(108,99,255,.4);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(108,99,255,.6);}
.btn-ghost{display:inline-flex;align-items:center;gap:.8rem;padding:1.2rem 2.8rem;border:1.5px solid var(--border);border-radius:4rem;font-size:1.5rem;color:var(--text2);font-family:'Space Grotesk',sans-serif;cursor:pointer;transition:var(--trans);}
.btn-ghost:hover{border-color:var(--accent);color:var(--text);}
.hero-socials{display:flex;gap:1.2rem;}
.social-link{width:4rem;height:4rem;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--text2);transition:var(--trans);}
.social-link:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px rgba(108,99,255,.3);}

/* 3D HERO CARD */
.hero-visual{flex:0 0 auto;}
.hero-card-3d{perspective:1000px;cursor:pointer;}
.card-inner{width:36rem;padding:3rem;background:var(--surface);border:1px solid var(--border);border-radius:24px;backdrop-filter:blur(30px);transform-style:preserve-3d;transition:transform .5s ease;position:relative;overflow:visible;}
.hero-card-3d:hover .card-inner{transform:rotateY(-8deg) rotateX(5deg);}
.profile-ring{position:relative;width:16rem;height:16rem;margin:0 auto 2rem;}
.ring{position:absolute;border-radius:50%;border:2px solid transparent;animation:spin 6s linear infinite;}
.ring-1{inset:-8px;border-color:var(--accent) transparent;animation-duration:4s;}
.ring-2{inset:-16px;border-color:transparent var(--accent2) transparent;animation-duration:6s;animation-direction:reverse;}
.ring-3{inset:-24px;border-color:var(--accent3) transparent;animation-duration:8s;}
@keyframes spin{to{transform:rotate(360deg);}}
.profile-img-wrap{width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid rgba(108,99,255,.3);}
.profile-img{width:100%;height:100%;object-fit:cover;}

.floating-badge{position:absolute;padding:.6rem 1.2rem;border-radius:4rem;font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:.5rem;animation:floatBadge 3s ease-in-out var(--delay,0s) infinite;}
/* badge positions */
.badge-flutter{background:rgba(2,117,216,.2);border:1px solid rgba(2,117,216,.4);color:#54c5f8;top:-1rem;right:-2rem;}
.badge-react{background:rgba(97,218,251,.1);border:1px solid rgba(97,218,251,.3);color:#61dafb;top:30%;left:-5rem;}
.badge-kotlin{background:rgba(127,82,255,.2);border:1px solid rgba(127,82,255,.4);color:#c07fff;bottom:10rem;right:-3rem;}
.badge-swift{background:rgba(250,100,50,.15);border:1px solid rgba(250,100,50,.35);color:#fa6432;top:55%;left:-4rem;}
.badge-python{background:rgba(53,168,76,.15);border:1px solid rgba(53,168,76,.3);color:#4caf50;bottom:4rem;left:-2rem;}
.badge-golang{background:rgba(0,172,215,.15);border:1px solid rgba(0,172,215,.3);color:#00acd7;bottom:-1rem;right:0;}
.badge-letter{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;font-size:1rem;font-weight:800;}
.kotlin-k{background:#7f52ff;color:#fff;}
.swift-s{background:#fa6432;color:#fff;}
.go-g{background:#00acd7;color:#fff;font-size:.9rem;width:22px;}
@keyframes floatBadge{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

.stats-strip{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:2rem;padding:1.5rem;background:rgba(0,0,0,.3);border-radius:12px;}
.stat{text-align:center;}
.stat-num{display:block;font-size:2rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat-lbl{font-size:1.1rem;color:var(--text3);}
.stat-div{width:1px;height:3rem;background:var(--border);}

.scroll-indicator{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--text3);font-size:1.2rem;animation:bounce 2s infinite;}
.scroll-line{width:1px;height:4rem;background:linear-gradient(to bottom,var(--accent),transparent);}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);}}

/* SECTIONS */
section{padding:10rem 6%;position:relative;z-index:1;}
.section-header{text-align:center;margin-bottom:6rem;}
.section-tag{font-size:1.3rem;color:var(--accent);letter-spacing:.2em;text-transform:uppercase;font-weight:500;}
.section-title{font-size:clamp(3rem,5vw,5rem);font-weight:700;margin-top:.8rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ABOUT */
.about{background:var(--bg2);}
.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:6rem;align-items:center;}
.about-img-frame{position:relative;border-radius:20px;overflow:visible;margin-bottom:2rem;}
/* ABOUT CAROUSEL — overflow fixed */
.about-carousel-wrap{position:relative;margin-bottom:0;}
.about-carousel{
  position:relative;
  border-radius:20px;
  overflow:hidden;       /* clips slides */
  aspect-ratio:3/4;
  background:var(--bg3);
  width:100%;
  /* decorative border accent outside the clip area */
  box-shadow:8px 8px 0 0 rgba(108,99,255,.25);
  border:1px solid rgba(108,99,255,.2);
}
.carousel-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.carousel-slide{
  min-width:100%;
  max-width:100%;
  height:100%;
  flex:0 0 100%;
  overflow:hidden;
}
.carousel-slide .about-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  border-radius:0;
}
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:3.8rem;
  height:3.8rem;
  background:rgba(6,11,20,.65);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  color:var(--text);
  cursor:pointer;
  transition:var(--trans);
  z-index:10;
}
.carousel-btn:hover{background:var(--accent);border-color:var(--accent);box-shadow:0 0 20px rgba(108,99,255,.5);}
.carousel-prev{left:1rem;}
.carousel-next{right:1rem;}
.carousel-dots{
  position:absolute;
  bottom:1.2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.7rem;
  z-index:10;
}
.carousel-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  cursor:pointer;
  transition:all .3s ease;
  border:none;padding:0;
}
.carousel-dot.active{background:var(--accent);width:22px;border-radius:4px;}

/* CREDENTIAL STRIP — Tightened spacing */
.credential-strip{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-top:1rem;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(108,99,255,.15);
  background:rgba(255,255,255,.02);
}
.credential-uni{
  flex:1;
  display:flex;
  align-items:center;
  gap:0.8rem;
  padding:1rem 1.2rem;
  transition:background var(--trans);
}
.credential-uni:hover{background:rgba(108,99,255,.05);}
.credential-uni-logo{
  width:3.8rem;
  height:3.8rem;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  font-weight:800;
  flex-shrink:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.credential-uni-logo img{width:100%;height:100%;object-fit:contain;padding:.2rem;}
.logo-wm{background:linear-gradient(135deg,rgba(108,99,255,.2),rgba(0,212,255,.1));color:var(--accent);}
.logo-iit{background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(108,99,255,.05));color:var(--accent2);}
.credential-uni-text strong{
  display:block;
  font-size:1.2rem;
  color:var(--text);
  font-weight:600;
  line-height:1.2;
}
.credential-uni-text span{
  font-size:1rem;
  color:var(--text3);
}
.credential-divider{
  width:1px;
  background:rgba(255,255,255,.04);
  flex-shrink:0;
  margin:0.8rem 0;
}

.highlight-uni{color:var(--accent2);font-weight:700;}
.about-text-col h3{font-size:2.4rem;font-weight:600;margin-bottom:2rem;color:var(--text);}
.about-text-col p{font-size:1.6rem;color:var(--text2);line-height:1.8;margin-bottom:1.5rem;}
.about-text-col strong{color:var(--accent);}
.about-highlights{display:flex;flex-direction:column;gap:1rem;margin:2.5rem 0;}
.highlight-item{display:flex;align-items:center;gap:1rem;font-size:1.4rem;color:var(--text2);}
.highlight-item i{color:var(--accent);font-size:1.8rem;}

/* primary tag highlight */
.tag-primary{background:rgba(108,99,255,.2)!important;border-color:rgba(108,99,255,.5)!important;color:var(--accent)!important;font-weight:600;}

/* SKILLS */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));gap:2rem;margin-bottom:5rem;}
.skill-category{padding:2.5rem;}
.skill-cat-icon{font-size:3rem;color:var(--accent);margin-bottom:1.5rem;}
.skill-category h4{font-size:1.8rem;font-weight:600;margin-bottom:1.5rem;}
.skill-tags{display:flex;flex-wrap:wrap;gap:.8rem;}
.tag{padding:.5rem 1.2rem;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.25);border-radius:2rem;font-size:1.3rem;color:var(--accent2);}
.proficiency-bars h3{font-size:2rem;font-weight:600;margin-bottom:2.5rem;text-align:center;}
.bar-list{max-width:70rem;margin:0 auto;display:flex;flex-direction:column;gap:2rem;}
.bar-item{}
.bar-label{display:flex;justify-content:space-between;font-size:1.4rem;color:var(--text2);margin-bottom:.8rem;}
.bar-track{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.bar-fill{height:100%;width:0;background:var(--grad);border-radius:3px;transition:width 1.5s cubic-bezier(.4,0,.2,1);}

/* EXPERIENCE */
.experience{background:var(--bg2);}
.timeline{position:relative;padding-left:3rem;margin-bottom:5rem;}
.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent2));}
.timeline-item{position:relative;padding-left:3rem;margin-bottom:3rem;}
.timeline-dot{position:absolute;left:-3.5rem;top:2.5rem;width:12px;height:12px;border-radius:50%;background:var(--grad);box-shadow:0 0 15px var(--accent);}
.timeline-content{padding:2.5rem;}
.tl-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;}
.tl-header-left{display:flex;align-items:center;gap:1.5rem;}
.company-logo-wrap{width:5rem;height:5rem;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.company-logo-wrap img{width:100%;height:100%;object-fit:contain;padding:.4rem;}
.company-logo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:var(--accent);background:rgba(108,99,255,.1);letter-spacing:0;}
.tl-header h4{font-size:1.9rem;font-weight:600;}
.tl-company{display:block;font-size:1.4rem;color:var(--accent);margin-top:.3rem;}
.tl-date{font-size:1.3rem;color:var(--text3);background:rgba(108,99,255,.1);padding:.4rem 1rem;border-radius:2rem;white-space:nowrap;align-self:flex-start;}
.tl-list{list-style:none;padding:0;margin-bottom:1.5rem;}
.tl-list li{font-size:1.4rem;color:var(--text2);padding:.5rem 0;padding-left:1.5rem;position:relative;}
.tl-list li::before{content:'▹';position:absolute;left:0;color:var(--accent);}
.tl-tags{display:flex;flex-wrap:wrap;gap:.6rem;}
.tl-tags span{font-size:1.2rem;padding:.3rem .9rem;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);border-radius:2rem;color:var(--accent2);}

.tl-sub-info { font-size: 1.1rem; color: var(--text3); font-style: italic; margin-left: 0.5rem; }
.tl-badge { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; padding: 0.4rem 1rem; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 4px; color: #22c55e; font-size: 1.2rem; font-weight: 600; }
.tl-header h4 small { font-size: 1.3rem; color: var(--text3); font-weight: 400; margin-left: 0.5rem; }

/* SHOW MORE */
.timeline-hidden,.edu-hidden{max-height:0;overflow:hidden;transition:max-height .8s cubic-bezier(.4,0,.2,1),opacity .5s ease;opacity:0;}
.timeline-hidden.expanded,.edu-hidden.expanded{max-height:200rem;opacity:1;}
.show-more-wrap{display:flex;justify-content:center;margin:2rem 0 4rem;}
.show-more-btn{display:inline-flex;align-items:center;gap:.8rem;padding:1.1rem 2.5rem;background:transparent;border:1.5px solid var(--border);border-radius:4rem;font-size:1.4rem;color:var(--text2);font-family:'Space Grotesk',sans-serif;cursor:pointer;transition:var(--trans);}
.show-more-btn:hover{border-color:var(--accent);color:var(--accent);}
.show-more-icon{transition:transform .4s ease;font-size:1.8rem;}
.show-more-btn.open .show-more-icon{transform:rotate(180deg);}

/* EDUCATION ITEMS */
.edu-timeline{display:flex;flex-direction:column;gap:2rem;}
#edu-timeline-visible { gap: 0; }
#edu-timeline-visible .edu-item { border-bottom: none; border-radius: 0; }
#edu-timeline-visible .edu-item:first-child { border-radius: 16px 16px 0 0; }
#edu-timeline-visible .edu-item:last-child { border-radius: 0 0 16px 16px; border-bottom: 1px solid var(--border); }
.edu-item{display:flex;align-items:center;gap:2rem;padding:2rem 2.5rem;flex-wrap:wrap;}
.edu-logos{display:flex;align-items:center;gap:1rem;flex-shrink:0;}
.edu-logo-wrap{width:5.5rem;height:5.5rem;border-radius:12px;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.edu-logo-wrap img{width:100%;height:100%;object-fit:contain;padding:.4rem;}
.edu-logo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;}
.edu-logo-placeholder.wm{color:#6c63ff;background:rgba(108,99,255,.1);}
.edu-logo-placeholder.iit{color:#00d4ff;background:rgba(0,212,255,.1);}
.edu-logo-placeholder.school{color:var(--accent3);background:rgba(255,101,132,.08);font-size:2rem;}
.edu-logo-via{font-size:1.1rem;color:var(--text3);font-style:italic;}
.edu-info{flex:1;}
.edu-info h4{font-size:1.8rem;font-weight:600;margin-bottom:.5rem;}
.edu-award{display:inline-flex;align-items:center;gap:.5rem;font-size:1.3rem;color:#f59e0b;font-weight:600;margin-bottom:.6rem;}
.edu-award i{font-size:1.5rem;}
.edu-primary-uni{font-size:1.5rem;font-weight:600;color:var(--accent2);margin-bottom:.3rem;}
.edu-sub{font-size:1.3rem;color:var(--text3);}
.edu-section h3{font-size:2rem;font-weight:600;margin-bottom:2.5rem;text-align:center;margin-top:4rem;}

/* PROJECTS */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(32rem,1fr));gap:2.5rem;margin-bottom:4rem;}

/* PROJECT SHOWCASE - Mockups */
.project-showcase{
  height:52rem;
  background:rgba(0,0,0,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:2rem;
}

/* PHONE MOCKUP */
.phone-mockup{
  width:23rem;
  height:48rem;
  background:#000;
  border-radius:3.8rem;
  border:10px solid #1a1a1a;
  position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 20px rgba(255,255,255,.05);
  z-index:2;
  overflow:hidden;
}
.phone-speaker{
  position:absolute;
  top:1.8rem;
  left:50%;
  transform:translateX(-50%);
  width:6rem;
  height:.5rem;
  background:#222;
  border-radius:.25rem;
  z-index:3;
}
.phone-home-bar{
  position:absolute;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  width:9rem;
  height:.5rem;
  background:rgba(255,255,255,.2);
  border-radius:.25rem;
  z-index:3;
}
.phone-screen-wrap{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:2.5rem;
  background:#060b14;
  position:relative;
}
.phone-screen-scroll{
  width:100%;
  display:flex;
  flex-direction:column;
  transition:transform 0.5s ease;
}
.phone-screen-scroll img{
  width:100%;
  height:auto;
  display:block;
}

.web-showcase {
  height: 38rem !important;
}

/* LAPTOP MOCKUP */
.laptop-mockup-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.laptop-mockup{
  width:42rem;
  height:26rem;
  background:#111;
  border:12px solid #222;
  border-bottom:none;
  border-radius:1.5rem 1.5rem 0 0;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.laptop-screen{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#060b14;
  position:relative;
}
.laptop-base{
  width:50rem;
  height:1.2rem;
  background:#222;
  border-radius:0 0 1.5rem 1.5rem;
  position:relative;
}
.laptop-base::after{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:8rem;
  height:0.6rem;
  background:#333;
  border-radius:0 0 0.5rem 0.5rem;
}
.web-scroll{
  width:100%;
  display:flex;
  flex-direction:column;
}
.web-scroll img{
  width:100%;
  height:auto;
  display:block;
}

.phone-screen-scroll.scroll-13{
  animation:autoScroll-13 45s infinite ease-in-out alternate;
}
.phone-screen-scroll.scroll-5, 
.web-scroll.scroll-5{
  animation:autoScroll-5 20s infinite ease-in-out alternate;
}
.phone-screen-scroll.scroll-4,
.web-scroll.scroll-4{
  animation:autoScroll-4 15s infinite ease-in-out alternate;
}
.web-scroll.scroll-6{
  animation:autoScroll-6 25s infinite ease-in-out alternate;
}

@keyframes autoScroll-6{
  0%, 12% { transform: translateY(0); }
  20%, 32% { transform: translateY(-16.6%); }
  40%, 52% { transform: translateY(-33.2%); }
  60%, 72% { transform: translateY(-49.8%); }
  80%, 92% { transform: translateY(-66.4%); }
  96%, 100% { transform: translateY(-83%); }
}

.ui-accent{
  position:absolute;
  width:12rem;
  height:12rem;
  background:var(--grad);
  filter:blur(6rem);
  opacity:.15;
  z-index:1;
}
.accent-1{top:-2rem;left:-2rem;}
.accent-2{bottom:-2rem;right:-2rem;}

.phone-screen-scroll.scroll-13{
  animation:autoScroll-13 45s infinite ease-in-out alternate;
}
.phone-screen-scroll.scroll-5{
  animation:autoScroll-5 20s infinite ease-in-out alternate;
}
.phone-screen-scroll.scroll-4{
  animation:autoScroll-4 15s infinite ease-in-out alternate;
}

@keyframes autoScroll-13{
  0%, 4% { transform: translateY(0); }
  7%, 11% { transform: translateY(-7.6%); }
  14%, 18% { transform: translateY(-15.3%); }
  21%, 25% { transform: translateY(-23%); }
  28%, 32% { transform: translateY(-30.6%); }
  35%, 39% { transform: translateY(-38.3%); }
  42%, 46% { transform: translateY(-46%); }
  49%, 53% { transform: translateY(-53.6%); }
  56%, 60% { transform: translateY(-61.3%); }
  63%, 67% { transform: translateY(-69%); }
  70%, 74% { transform: translateY(-76.6%); }
  77%, 81% { transform: translateY(-84.3%); }
  85%, 100% { transform: translateY(-92.3%); }
}

@keyframes autoScroll-5{
  0%, 15% { transform: translateY(0); }
  25%, 40% { transform: translateY(-18.5%); }
  50%, 65% { transform: translateY(-37%); }
  75%, 90% { transform: translateY(-55.5%); }
  95%, 100% { transform: translateY(-74%); }
}

@keyframes autoScroll-4{
  0%, 20% { transform: translateY(0); }
  30%, 50% { transform: translateY(-25%); }
  60%, 80% { transform: translateY(-50%); }
  90%, 100% { transform: translateY(-75%); }
}

.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(34rem,1fr));gap:3rem;}
.project-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--trans);height:100%;display:flex;flex-direction:column;}
.project-card:hover{transform:translateY(-1rem);border-color:var(--accent);box-shadow:var(--glow);}
.project-img-wrap{height:25rem;overflow:hidden;position:relative;}
.project-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.project-card:hover .project-img{transform:scale(1.05);}
.project-overlay{position:absolute;inset:0;background:rgba(6,11,20,.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--trans);backdrop-filter:blur(4px);}
.project-card:hover .project-overlay{opacity:1;}
.project-link-btn{padding:1rem 2rem;background:var(--accent);color:#fff;border-radius:3rem;font-size:1.4rem;font-weight:600;display:flex;align-items:center;gap:.8rem;transform:translateY(2rem);transition:var(--trans);}
.project-card:hover .project-link-btn{transform:translateY(0);}

.project-body{padding:2.5rem;}
.project-num{font-size:4rem;font-weight:700;color:rgba(108,99,255,0.15);line-height:1;margin-bottom:0.5rem;}
.project-body h4{font-size:2rem;font-weight:600;margin-bottom:1rem;}
.project-body p,
.project-tech,
.project-links {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover .project-body p {
  max-height: 20rem;
  opacity: 1;
  margin-bottom: 1.5rem;
}

.project-card:hover .project-tech {
  max-height: 10rem;
  opacity: 1;
  margin-bottom: 1.5rem;
}

.project-card:hover .project-links {
  max-height: 5rem;
  opacity: 1;
}

.project-tech span{font-size:1.2rem;padding:.3rem .9rem;background:rgba(108,99,255,0.1);border:1px solid rgba(108,99,255,0.2);border-radius:2rem;color:var(--accent);}
.project-links{display:flex;gap:1.5rem;}
.project-links a{display:inline-flex;align-items:center;gap:.5rem;font-size:1.4rem;color:var(--accent2);transition:var(--trans);}
.project-links a:hover{color:var(--text);}
.projects-cta{text-align:center;}

/* SERVICES */
.services{background:var(--bg2);}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(28rem,1fr));gap:2.5rem;}
.service-card{padding:3rem;position:relative;overflow:hidden;}
.service-card::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:0;transition:var(--trans);}
.featured-service{border-color:rgba(108,99,255,.4);}
.featured-service::before{opacity:.05;}
.service-badge{position:absolute;top:1.5rem;right:1.5rem;font-size:1.1rem;padding:.4rem 1rem;background:var(--grad);border-radius:2rem;color:#fff;font-weight:600;}
.service-icon-wrap{font-size:4rem;color:var(--accent);margin-bottom:1.5rem;position:relative;}
.service-card h4{font-size:2rem;font-weight:600;margin-bottom:1rem;position:relative;}
.service-card p{font-size:1.4rem;color:var(--text2);line-height:1.7;margin-bottom:1.5rem;position:relative;}
.service-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;position:relative;}
.service-list li{font-size:1.3rem;color:var(--text3);padding-left:1.5rem;position:relative;}
.service-list li::before{content:'▹';position:absolute;left:0;color:var(--accent);}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start;}
.contact-intro{font-size:1.7rem;color:var(--text2);line-height:1.8;margin-bottom:3rem;}
.contact-items{display:flex;flex-direction:column;gap:1.5rem;}
.contact-item{display:flex;align-items:center;gap:1.5rem;padding:1.8rem;color:inherit;}
.contact-item:hover{transform:translateX(6px);}
.ci-icon{width:4.5rem;height:4.5rem;background:rgba(108,99,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--accent);flex-shrink:0;}
.contact-item strong{display:block;font-size:1.5rem;margin-bottom:.2rem;}
.contact-item span{font-size:1.3rem;color:var(--text2);}
.contact-form{padding:3rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.form-group{margin-bottom:1.5rem;}
.form-group label{display:block;font-size:1.3rem;color:var(--text2);margin-bottom:.6rem;}
.form-group input,.form-group textarea{width:100%;padding:1.2rem 1.5rem;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1.5rem;font-family:'Space Grotesk',sans-serif;transition:var(--trans);}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 20px rgba(108,99,255,.15);}
.form-group textarea{resize:vertical;}
.form-submit{width:100%;justify-content:center;}

/* FOOTER */
.footer{background:var(--bg2);border-top:1px solid var(--border);padding:4rem 6% 2rem;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem;margin-bottom:3rem;}
.footer-brand p{font-size:1.4rem;color:var(--text3);margin-top:.5rem;}
.footer-links{display:flex;gap:2.5rem;}
.footer-links a{font-size:1.4rem;color:var(--text2);transition:var(--trans);}
.footer-links a:hover{color:var(--accent);}
.footer-socials{display:flex;gap:1rem;}
.footer-socials a{width:3.8rem;height:3.8rem;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--text2);transition:var(--trans);}
.footer-socials a:hover{border-color:var(--accent);color:var(--accent);}
.footer-bottom{text-align:center;font-size:1.3rem;color:var(--text3);padding-top:2rem;border-top:1px solid var(--border);}
.footer-bottom a{color:var(--accent);}

/* SCROLL TOP */
.scroll-top{position:fixed;bottom:3rem;right:3rem;width:4.5rem;height:4.5rem;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:#fff;cursor:pointer;z-index:999;opacity:0;transform:translateY(20px);transition:var(--trans);box-shadow:var(--glow);}
.scroll-top.show{opacity:1;transform:translateY(0);}
.scroll-top:hover{transform:translateY(-4px);}

/* ANIMATIONS */
[data-animate]{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;}
[data-animate].animated{opacity:1;transform:translateY(0);}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-content{flex-direction:column;text-align:center;}
  .hero-cta,.hero-socials{justify-content:center;}
  .card-inner{width:30rem;}
  .about-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  html{font-size:55%;}
  .navbar{display:none;position:fixed;top:0;right:0;width:28rem;height:100vh;flex-direction:column;justify-content:center;align-items:center;background:rgba(6,11,20,.97);backdrop-filter:blur(20px);border-left:1px solid var(--border);gap:3rem;transform:translateX(100%);transition:transform .4s ease;z-index:999;}
  .navbar.open{display:flex;transform:translateX(0);}
  .nav-link{font-size:2rem;}
  .menu-btn{display:flex;z-index:1000;}
  .menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
  .menu-btn.active span:nth-child(2){opacity:0;}
  .menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
  .hero-card-3d{display:none;}
  .form-row{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;text-align:center;}
}
@media(max-width:480px){
  html{font-size:50%;}
  section{padding:8rem 4%;}
  .header{padding:1.5rem 4%;}
}