/* Theme variables (default: dark) set on body so they can toggle) */
body{
  --bg-soft: #12141a;
  --bg-glass: rgba(255,255,255,0.06);
  --text: #e7e9ee;
  --muted: #a5adbc;
  --accent: #6df1a2;
  --accent-2: #6ec7ff;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1600px 800px at 100% -20%, rgba(109,241,162,.15), transparent 75%),
              radial-gradient(1400px 700px at -20% 120%, rgba(110,199,255,.15), transparent 75%), transparent 70%),
              var(--bg);
  overflow-x:hidden;
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Preloader */
#preloader{
  position:fixed; inset:0; display:grid; place-items:center;
  background:var(--bg); z-index:9999;
}
#preloader .preloader-inner{display:grid; place-items:center; gap:.75rem}
.spinner{
  width:40px; height:40px; border-radius:50%;
  border:3px solid var(--bg-soft); border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Cursor */
.cursor{
  position:fixed; pointer-events:none; width:12px; height:12px; border-radius:50%;
  background:var(--accent); mix-blend-mode:exclusion; opacity:.8; z-index:4000; transform:translate(-50%,-50%);
}

/* Background FX */
.fx .blob{
  position:fixed; right:-10vw; top:-20vh; width:min(70vw,700px); color:#2ef0a866; filter:blur(2px);
  z-index:-2;
}
.noise{
  position:fixed; inset:-50%; pointer-events:none; z-index:-1;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"2\" stitchTiles=\"stitch\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\" opacity=\"0.04\"/></svg>');
  opacity:.25;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:3000; backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(12,13,16,.85), rgba(12,13,16,.35));
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.logo{font-family:"Space Grotesk",Inter,sans-serif; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.5px}
.logo .thin{font-weight:600; opacity:.9}
.logo .logo-dot{display:inline-block; width:.65rem; height:.65rem; background:var(--accent); border-radius:50%; margin-right:.4rem; box-shadow:0 0 15px var(--accent)}

.site-nav{display:flex; align-items:center; gap:1rem}
.site-nav a{color:var(--muted); text-decoration:none; padding:.4rem .6rem; position:relative}
.site-nav a:after{content:""; position:absolute; left:10%; bottom:0; width:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s}
.site-nav a:hover,.site-nav a.active{color:var(--text)}
.site-nav a:hover:after,.site-nav a.active:after{width:80%}

.actions{display:flex; align-items:center; gap:.6rem}
.menu{display:none; width:42px; height:42px; border-radius:12px; background:var(--bg-soft); border:1px solid rgba(255,255,255,.06); position:relative}
.menu span{position:absolute; left:10px; right:10px; height:2px; background:var(--text); transition:transform .25s, top .25s, opacity .2s}
.menu span:nth-child(1){top:14px}
.menu span:nth-child(2){top:26px}
.menu.open span:nth-child(1){top:21px; transform:rotate(45deg)}
.menu.open span:nth-child(2){top:21px; transform:rotate(-45deg)}

.chip{
  border:1px solid rgba(255,255,255,.08); background:var(--bg-soft);
  color:var(--text); padding:.5rem .7rem; border-radius:12px; cursor:pointer;
}
.cta,.btn{border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text); padding:.65rem .9rem; border-radius:14px; text-decoration:none; display:inline-block; box-shadow:var(--shadow)
}
.btn.ghost{background:transparent}
.btn + .btn{margin-left:.6rem}

/* Drawer */
.drawer{position:fixed; inset:0 0 0 auto; width:min(84vw,380px); background:rgba(12,13,16,.96); transform:translateX(100%); transition:transform .35s; z-index:2500; border-left:1px solid rgba(255,255,255,.06); padding:5rem 1.2rem}
.drawer.open{transform:none}
.drawer nav{display:grid; gap:1rem}
.drawer a{color:var(--text); text-decoration:none; font-size:1.25rem}

/* Layout helpers */
.container{max-width:1120px; margin:0 auto; padding:min(6vw,32px)}
.section-head{display:grid; gap:.6rem; margin-bottom:1.6rem}
.section-head h2{font-family:"Space Grotesk",Inter,sans-serif; font-size:clamp(1.6rem, 2.8vw, 2.6rem)}
.section-head p{color:var(--muted)}

/* Hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:2rem; min-height:70vh}
.hero h1{font-family:"Space Grotesk",Inter,sans-serif; font-size:clamp(2rem, 5vw, 4rem); line-height:1.05}
.hero h1 .accent{background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:var(--muted); max-width:60ch}
.hero-cta{margin-top:2rem}
.stats{display:flex; gap:1.5rem; margin-top:1rem}
.stats .num{font-weight:800; font-size:1.8rem}
.stats small{display:block; color:var(--muted)}

.hero-media{position:relative; display:grid; place-items:center}
.portrait{
  width:min(380px, 72%); aspect-ratio:1/1; border-radius:28px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:var(--shadow);
}
.portrait img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.1) contrast(1.05)}
.floating-tags{position:static; display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-start; margin-top:.9rem}
.floating-tags span{background:var(--bg-glass); border:1px solid rgba(255,255,255,.08); padding:.4rem .6rem; border-radius:999px; font-size:.85rem}

/* Projects */
.projects
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:1rem}
.card{
  grid-column: span 6; background:var(--bg-glass); border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; transition:transform .2s;
  box-shadow:var(--shadow); position:relative;
}
.card img{width:100%; height:220px; object-fit:cover; display:block; filter:contrast(1.05) saturate(1.05)}
.card-body{padding:1rem}
.card h3{margin:.2rem 0 .4rem; font-size:1.2rem}
.card p{color:var(--muted); margin:0 0 .6rem}
.card .more{color:var(--accent); text-decoration:none}
.card:hover{transform:translateY(-2px)}

@media (max-width: 880px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero-media .floating-tags{position:relative; right:auto; top:auto; justify-content:center; margin-top:1rem}
  .projects .grid{grid-template-columns:repeat(6,1fr)}
  .card{grid-column:span 6}
  .menu{display:inline-block}
  .site-nav{display:none}
}

/* Contact */
.contact .contact-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:1rem}
.contact-card{grid-column:span 6; background:var(--bg-glass); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1rem 1.1rem; text-decoration:none; color:var(--text)}
.contact-card:hover{outline:1px solid var(--accent)}
@media (max-width:880px){.contact .contact-grid{grid-template-columns:repeat(6,1fr)} .contact-card{grid-column:span 6}}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:3500}
.modal.open{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px)}
.modal-card{position:relative; z-index:1; width:min(980px,92vw); margin:8vh auto; background:var(--bg); border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr}
.modal-media img{width:100%; height:100%; object-fit:cover; display:block}
.modal-body{padding:1rem 1.2rem}
.modal-close{position:absolute; top:.6rem; right:.6rem; background:transparent; border:none; color:var(--text); font-size:1.6rem; cursor:pointer}
@media (max-width:860px){.modal-card{grid-template-columns:1fr}}

/* Footer */
.site-footer{padding:2rem 1rem; color:var(--muted); text-align:center}

/* Utilities */
.split .char{display:inline-block}
[data-magnet]{position:relative}
[data-tilt]{transform-style:preserve-3d; will-change:transform}

/* Extra top spacing for sections after hero to clear gradient line */
.projects{padding-top:2.2rem}
.contact{padding-top:2.2rem}

/* Contact icon buttons */
.contact-icons{grid-template-columns:repeat(8,1fr)}
.contact-btn{
  grid-column:span 2; display:flex; align-items:center; gap:.55rem;
  background:var(--bg-glass); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:.8rem 1rem; color:var(--text); text-decoration:none;
  justify-content:center; font-weight:600;
}
.contact-btn:hover{outline:1px solid var(--accent)}
@media (max-width:880px){
  .contact-icons{grid-template-columns:repeat(6,1fr)}
  .contact-btn{grid-column:span 3}
}

/* Business card 3D flip */
.contact-card-3d{
  width:280px; height:180px; margin:2rem auto;
  perspective:1000px;
}
.contact-card-3d .card-inner{
  position:relative; width:100%; height:100%; text-align:center;
  transition:transform 0.8s; transform-style:preserve-3d;
}
.contact-card-3d:hover .card-inner{
  transform:rotateY(180deg);
}
.card-front,.card-back{
  position:absolute; width:100%; height:100%; backface-visibility:hidden;
  border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:var(--shadow); background:var(--bg-soft); border:1px solid rgba(255,255,255,.08);
}
.card-front h3{margin:0;font-size:1.4rem}
.card-front p{color:var(--muted); margin-top:.2rem}
.card-back{
  transform:rotateY(180deg); gap:.4rem; padding:1rem;
}
.card-back a{
  display:block; padding:.4rem .6rem; border-radius:8px; background:var(--bg-glass);
  text-decoration:none; color:var(--text); border:1px solid rgba(255,255,255,.08);
}
.card-back a:hover{outline:1px solid var(--accent)}

/* Soft corner extension to avoid abrupt blur end */
body::before{
  content:""; position:fixed; inset:auto -20vw -20vh auto; width:60vw; height:60vh;
  background: radial-gradient(50% 60% at 100% 100%, rgba(110,199,255,.18), transparent 70%);
  pointer-events:none; z-index:-1; filter:blur(0.5px);
}

.gsap-marker-start,.gsap-marker-end,.gsap-marker-scroller-start,.gsap-marker-scroller-end{display:none !important}

.bizcard-wrap{display:grid; place-items:center; margin-top:1rem}
.business-card{
  position:relative; display:block; width:min(820px, 95%); padding:1.2rem;
  border-radius:20px; border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow); overflow:hidden; transform-style:preserve-3d;
}
.business-card .shine{
  position:absolute; inset:-40% -20% auto auto; width:120%; height:180%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.25) 15%, transparent 30%);
  transform: translateX(-60%) rotate(8deg);
  opacity:.0; pointer-events:none; mix-blend-mode:soft-light;
}
.business-card:hover .shine{ animation: sheen 1.4s ease forwards }
@keyframes sheen{ to{ transform: translateX(40%) rotate(8deg); opacity:.45 } }

.bc-top{display:flex; align-items:center; gap:.9rem}
.bc-avatar{width:60px; height:60px; border-radius:50%; overflow:hidden; border:1px solid rgba(255,255,255,.12)}
.bc-avatar img{width:100%; height:100%; object-fit:cover}
.bc-name{display:grid; line-height:1.1}
.bc-name strong{font-size:1.2rem}
.bc-name span{color:var(--muted); font-size:.95rem}
.bc-logo{margin-left:auto; font-weight:800; letter-spacing:.5px; opacity:.9}

.bc-links{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.bc-links a{display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem;
  border-radius:12px; text-decoration:none; color:var(--text);
  background:var(--bg-glass); border:1px solid rgba(255,255,255,.08);
}
.bc-links a:hover{outline:1px solid var(--accent)}
.stats{display:none !important}
/* Animated gradient overlay for depth */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04), transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(255,255,255,0.03), transparent 50%);
  animation: bgmove 18s ease-in-out infinite alternate;
}
@keyframes bgmove{
  0%{background-position: 20% 30%, 80% 70%}
  100%{background-position: 25% 35%, 75% 65%}
}

/* Portrait depth tilt */
.portrait{transform-style:preserve-3d}
.portrait img{transform:translateZ(30px) scale(1.03); transform-origin:center}

/* Floating orbs */
.orbs{position:fixed; inset:0; pointer-events:none; z-index:-1}
.orb{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(110,199,255,.18), transparent 65%);
  filter: blur(2px);
  mix-blend-mode:screen; opacity:.9;
}
.orb:nth-child(2){ width:520px; height:520px; background: radial-gradient(50% 50%, rgba(109,241,162,.18), transparent 65%) }
.orb:nth-child(3){ width:360px; height:360px; background: radial-gradient(50% 50%, rgba(110,199,255,.14), transparent 65%); opacity:.5 }
.orb:nth-child(4){ width:480px; height:480px; background: radial-gradient(50% 50%, rgba(109,241,162,.14), transparent 65%); opacity:.5 }

body.theme-auto{
  --bg-glass: rgba(255,255,255,0.06);
  --text: #e7e9ee;
  --muted: #a5adbc;
  --accent: #6df1a2;
  --accent-2: #6ec7ff;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
}

.contact-chips{display:grid; grid-template-columns:repeat(12,1fr); gap:1rem}
.contact-chip{grid-column:span 3; display:flex; align-items:center; gap:.6rem; justify-content:center;
  padding:.95rem 1.1rem; border-radius:14px; background:var(--bg-glass); border:1px solid rgba(255,255,255,.08);
  text-decoration:none; color:var(--text); font-weight:700; position:relative; overflow:hidden}
.contact-chip span{background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.contact-chip::after{content:""; position:absolute; inset:0; opacity:0;
  background: radial-gradient(120% 120% at var(--mx,50%) var(--my,50%), rgba(109,241,162,.24), transparent 40%),
              radial-gradient(120% 120% at var(--mx,50%) var(--my,50%), rgba(110,199,255,.24), transparent 60%);
  transition:opacity .25s}
.contact-chip:hover::after{opacity:1}
@media (max-width:880px){.contact-chip{grid-column:span 6}}

body.theme-dark{
  --bg-soft: #12141a;
  --bg-glass: rgba(255,255,255,0.10);
  --text: #e7e9ee;
  --muted: #a5adbc;
  --accent: #6df1a2;
  --accent-2: #6ec7ff;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
  background-color: var(--bg);
  color: var(--text);
}

/* Section fade mask to hide next title under previous section */
main > section{position:relative; z-index:1}
main > section::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:120px; z-index:-1;
  background: linear-gradient(180deg, rgba(12,13,16,0) 0%, var(--bg) 80%);
  pointer-events:none;
}
/* Contact panel */
.contact-panel{
  position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:2rem;
  padding:2rem; min-height:380px;
  border-radius:24px; border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  overflow:hidden; box-shadow: var(--shadow);
}
.contact-left h2{font-size:clamp(1.8rem, 3.2vw, 2.6rem)}
.contact-left p{color:var(--muted); max-width:60ch}
.contact-right{display:grid; align-content:center}
.contact-panel .contact-grid.lg .contact-chip{
  grid-column:span 6; padding:1.1rem 1.2rem; border-radius:16px; font-size:1.05rem
}
@media (max-width:880px){
  .contact-panel{grid-template-columns:1fr; padding:1.4rem}
  .contact-panel .contact-grid.lg .contact-chip{grid-column:span 6}
}

.contact-panel:hover .contact-shine{opacity:1}

/* Override: remove bottom fade masks between sections */
main > section::after, .hero.container::after{display:none !important}

/* Section divider before Projects */
.projects{position:relative; margin-top:3rem}
.projects::before{
  content:""; position:absolute; left:0; right:0; top:-28px; height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 25%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.14) 75%, transparent 100%);
  opacity:.18;
}
/* Tiny glow below divider */
.projects::after{
  content:""; position:absolute; left:0; right:0; top:-40px; height:60px; pointer-events:none;
  background: radial-gradient(60% 80% at 50% 10%, rgba(109,241,162,.10), transparent 70%);
  opacity:.18;
}

.projects .grid{margin-top:1.2rem}