*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
:root{
  --ink:#08080a;
  --paper:#f5f2ed;
  --warm:#ede9e2;
  --cream:#faf8f4;
  --accent:#a259f7;
  --accent2:#c084fc;
  --purple:#7c3aed;
  --gold:#c9a84c;
  --muted:#9a9590;
  --border:rgba(0,0,0,.07);
  --font:'Clash Display','Cabinet Grotesk',sans-serif;
  --body:'Cabinet Grotesk',sans-serif;
  --serif:'Instrument Serif',serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --acc-rgb:162,89,247;
  --s-pad:3rem;
}
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
a,button{cursor:none;-webkit-tap-highlight-color:transparent;user-select:none;outline:none;text-decoration:none}

#bg-canvas{display:none}

/* LOADER */
html.loading,body.loading{overflow:hidden !important;height:100%}
#loader{
  position:fixed;inset:0;z-index:8000;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
#loader.gone{opacity:0;pointer-events:none;transform:translateY(-6px)}
.loader-name{
  font-family:var(--font);font-size:clamp(2rem,8vw,4rem);font-weight:700;
  letter-spacing:-.06em;color:var(--paper);overflow:hidden;
}
.loader-name span{display:inline-block;animation:loaderChars .8s var(--ease-out) forwards;opacity:0}
@keyframes loaderChars{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.loader-bar{width:180px;height:1px;background:#1a1a1a;border-radius:1px;overflow:hidden;margin-top:1.2rem}
.loader-bar-fill{height:100%;background:var(--accent);width:0;border-radius:1px;animation:barFill 1.4s var(--ease-out) forwards}
@keyframes barFill{to{width:100%}}
.loader-count{font-family:var(--font);font-size:.65rem;color:#333;letter-spacing:.12em;margin-top:.5rem}
.dot-loader{display:flex;gap:8px}
.dot-loader span{width:8px;height:8px;background:#fff;border-radius:50%;animation:dotPop 1.2s infinite ease-in-out}
.dot-loader span:nth-child(2){animation-delay:.2s}
.dot-loader span:nth-child(3){animation-delay:.4s}
@keyframes dotPop{0%,80%,100%{transform:scale(.5);opacity:.3}40%{transform:scale(1);opacity:1}}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(1.2rem + var(--safe-top)) 2rem 1.2rem;
  transition:background .4s;
}
nav.scrolled{background:rgba(8,8,10,.92);backdrop-filter:blur(18px)}
.nav-logo{
  font-family:var(--font);font-size:1.1rem;font-weight:700;
  color:var(--paper);letter-spacing:-.04em;
  display:flex;align-items:center;gap:.4rem;
}
.nav-logo-dot{
  width:7px;height:7px;background:var(--accent);border-radius:50%;display:inline-block;
  animation:logoPulse 2.4s ease-in-out infinite;
  box-shadow:0 0 10px rgba(var(--acc-rgb),.5);
}
@keyframes logoPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
.nav-right{display:flex;align-items:center;gap:1.2rem}
.nav-pill{
  font-family:var(--font);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;padding:.3rem 0;
}
.nav-pill:hover{color:var(--paper)}
.nav-cta{
  font-family:var(--font);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.55rem 1.1rem;border:1px solid rgba(255,255,255,.1);border-radius:100px;
  color:var(--paper);position:relative;overflow:hidden;transition:border-color .3s,color .3s;
}
.nav-cta::before{
  content:'';position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform .32s var(--ease-out);border-radius:100px;
}
.nav-cta:hover{border-color:var(--accent);color:var(--ink)}
.nav-cta:hover::before{transform:translateY(0)}
.nav-cta span{position:relative;z-index:1}
@media(max-width:600px){
  .nav-pill{display:none}
  nav{padding:calc(.8rem + var(--safe-top)) 1.2rem .8rem}
}

/* HERO */
#hero{
  min-height:100svh;position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 2rem calc(3.5rem + var(--safe-bot));
  overflow:hidden;
}
.hero-visual{
  position:absolute;inset:0;z-index:0;
  background:url('/bg.png') center 20%/cover no-repeat;
  transform:scale(1.06);
  animation:heroZoom 12s var(--ease-out) forwards;
  will-change:transform;
}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-visual::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(8,8,10,.85) 0%,rgba(8,8,10,.3) 55%,rgba(8,8,10,.0) 100%),
    linear-gradient(to top,var(--ink) 0%,rgba(8,8,10,.7) 30%,transparent 60%);
}
.hero-content{position:relative;z-index:5;max-width:680px}

/* BADGE — higher position */
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .85rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;
  margin-bottom:1.8rem;
  margin-left:-40px;
  position:relative;
  font-family:var(--body);font-size:.65rem;font-weight:500;
  color:rgba(255,255,255,.5);letter-spacing:.06em;
  opacity:0;animation:badgeIn .7s .8s var(--ease-out) forwards;
}
.hero-badge-dot{
  width:5px;height:5px;background:var(--accent);border-radius:50%;flex-shrink:0;
  box-shadow:0 0 8px rgba(var(--acc-rgb),.7);
}
@keyframes badgeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(4px)}
}

.hero-h1{
  font-family:var(--font);
  font-size:clamp(3.6rem,10.5vw,8rem);
  font-weight:750;line-height:1.04;letter-spacing:-0.025em;margin-bottom:1.5rem;
}
.hero-h1 .line{display:block;overflow:hidden;margin-bottom:0.26em}
.hero-h1 .small{font-size:0.44em}
.hero-h1 .name{font-size:0.98em;white-space:nowrap;display:inline-flex;align-items:baseline;gap:0.18em}
.hero-h1 .name .word{color:var(--accent)}
.hero-h1 .tagline{font-size:0.41em;white-space:nowrap}
.hero-h1 .word{
  display:inline-block;opacity:0;transform:translateY(100%);
  animation:wordReveal .85s var(--ease-out) forwards;
  font-weight:inherit;margin-right:0.2em;
}
.hero-h1 .line .word:last-child{margin-right:0}
.hero-h1 .accent-italic{font-style:normal;font-weight:inherit;color:var(--accent);font-size:1.2em;margin-left:0.06em}
.hero-h1 .line:nth-child(1) .word{animation-delay:.55s}
.hero-h1 .line:nth-child(2) .word:nth-child(1){animation-delay:.75s}
.hero-h1 .line:nth-child(2) .word:nth-child(2){animation-delay:.9s}
.hero-h1 .line:nth-child(3) .word{animation-delay:1.05s}
@keyframes wordReveal{to{opacity:1;transform:translateY(0)}}

@media(max-width:480px){
  .hero-h1{font-size:clamp(2.9rem,9.5vw,5rem);line-height:1.05}
  .hero-h1 .tagline{white-space:normal}
  #hero{padding:0 1.2rem calc(3rem + var(--safe-bot))}
}

.hero-sub{
  font-size:clamp(.85rem,2.2vw,1rem);color:rgba(255,255,255,.38);
  font-weight:300;line-height:1.7;max-width:340px;margin-bottom:2.4rem;
  opacity:0;animation:fadeUp .7s 1.4s var(--ease-out) forwards;
}
.hero-actions{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  opacity:0;animation:fadeUp .7s 1.55s var(--ease-out) forwards;
}
.btn-primary{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.8rem;background:var(--accent);color:#fff;
  font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-radius:100px;border:none;position:relative;overflow:hidden;
  transition:transform .3s var(--ease-out),box-shadow .3s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(var(--acc-rgb),.35)}
.btn-secondary{
  display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.4rem;
  font-family:var(--font);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.1);border-radius:100px;
  transition:color .3s,border-color .3s,transform .3s;
}
.btn-secondary:hover{color:var(--paper);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

.hero-scroll-cue{
  position:absolute;bottom:2.5rem;right:2rem;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  opacity:0;animation:fadeUp .6s 2s var(--ease-out) forwards;
}
.scroll-cue-line{width:1px;height:60px;background:linear-gradient(to bottom,rgba(255,255,255,.15),transparent);position:relative;overflow:hidden}
.scroll-cue-line::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:30px;
  background:linear-gradient(to bottom,var(--accent),transparent);
  animation:scrollDrop 1.8s ease-in-out infinite;
}
@keyframes scrollDrop{0%{transform:translateY(-30px)}100%{transform:translateY(60px)}}
.scroll-cue-label{font-family:var(--font);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:#2a2a2a;writing-mode:vertical-lr}

/* SHARED */
section{position:relative;z-index:1}
.max-w{max-width:900px;margin:0 auto;padding:0 2rem}
.s-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font);font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.s-eyebrow::before{content:'';width:20px;height:1px;background:var(--accent)}
.s-h2{
  font-family:var(--font);font-size:clamp(2.2rem,7vw,4.5rem);font-weight:700;
  letter-spacing:-.05em;line-height:.95;margin-bottom:1.2rem;
}
.s-h2 em{font-family:var(--serif);color:var(--accent);font-style:italic;font-weight:400}

/* SCROLL REVEAL */
[data-reveal]{opacity:0;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal="up"]{transform:translateY(50px)}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.92)}
[data-reveal].revealed{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.1s}[data-delay="2"]{transition-delay:.2s}
[data-delay="3"]{transition-delay:.3s}[data-delay="4"]{transition-delay:.4s}
[data-delay="5"]{transition-delay:.5s}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ABOUT */
#about{
  padding:var(--s-pad) 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%,rgba(var(--acc-rgb),.055) 0%,transparent 70%),
    radial-gradient(ellipse 50% 70% at 85% 30%,rgba(124,58,237,.04) 0%,transparent 65%);
  position:relative;isolation:isolate;
}
#about::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(var(--acc-rgb),.018) 0px,rgba(var(--acc-rgb),.018) 1px,
    transparent 1px,transparent 80px
  );
}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:7rem;
  align-items:center;position:relative;z-index:1;
}
@media(max-width:700px){.about-grid{grid-template-columns:1fr;gap:2.5rem}}
.about-img-frame{
  width:100%;overflow:hidden;border-radius:1.5rem;
  transition:transform .4s ease,box-shadow .4s;
  transform:translateY(-16px);position:relative;
}
.about-img-frame{
  position:relative;
  width:320px;
  height:280px;
  margin:auto;
  overflow:hidden;

  /* Cool shape */
  border-radius:60% 40% 55% 45% / 45% 35% 65% 55%;

  transition:
    transform .5s ease,
    box-shadow .5s ease,
    border-radius .7s ease;

  box-shadow:0 18px 35px rgba(0,0,0,.18);
}

/* Keep your hover theme */
.about-img-frame:hover{
  transform:translateY(-22px);

  /* subtle morph */
  border-radius:
    45% 55% 40% 60% /
    60% 35% 65% 40%;

  box-shadow:
    0 30px 60px rgba(var(--acc-rgb),.12);
}

.about-img-frame img,
.about-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  border-radius:inherit;

  filter:grayscale(20%);
  transition:
    filter .5s,
    transform .6s ease;
}

.about-img-frame:hover img,
.about-img-frame:hover .about-img{
  filter:grayscale(0%);
  transform:scale(1.05);
}

.about-img-frame::after{
  content:'';
  position:absolute;
  inset:-1px;

  border-radius:inherit;

  border:1px solid rgba(var(--acc-rgb),0);

  transition:
    border-color .4s,
    box-shadow .4s;

  pointer-events:none;
}

.about-img-frame:hover::after{
  border-color:rgba(var(--acc-rgb),.25);
  box-shadow:0 0 40px rgba(var(--acc-rgb),.12);
}

.about-img-placeholder{
  width:100%;
  height:100%;
  background:linear-gradient(
    135deg,
    #111 0%,
    #1a1a1a 100%
  );

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.8rem;

  color:#2a2a2a;
}

.about-img-placeholder i{
  font-size:3rem;
}

.about-img-placeholder span{
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-family:var(--font);
}

.about-stat-pill{
  position:absolute;
  bottom:2rem;
  right:-1.5rem;

  background:rgba(10,6,20,.92);
  border:1px solid rgba(var(--acc-rgb),.15);

  border-radius:16px;
  padding:1rem 1.2rem;

  font-family:var(--font);
  backdrop-filter:blur(12px);
  z-index:3;
}

/* Mobile */
@media (max-width:768px){
  .about-img-frame{
    width:260px;
    height:230px;
  }
}

@media (max-width:480px){
  .about-img-frame{
    width:220px;
    height:190px;
  }
}
.about-stat-num{font-size:1.8rem;font-weight:700;color:var(--paper);letter-spacing:-.06em;line-height:1}
.about-stat-lbl{font-size:.58rem;color:#3a3a3a;letter-spacing:.1em;text-transform:uppercase;margin-top:.2rem}
@media(max-width:700px){.about-stat-pill{right:1rem;bottom:-1rem}}
.about-text .s-h2{margin-top:1rem}
.about-body{font-size:.9rem;color:#555;line-height:1.85;font-weight:300;margin-bottom:2rem}
.about-body strong{color:#888;font-weight:500}
.skill-cloud{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2.2rem}
.sk{
  font-family:var(--font);font-size:.65rem;font-weight:600;letter-spacing:.06em;
  padding:.42rem .85rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.06);color:#404040;background:rgba(255,255,255,.02);
  transition:border-color .3s,color .3s,background .3s,transform .3s;position:relative;overflow:hidden;
}
.sk::before{
  content:'';position:absolute;inset:0;background:rgba(var(--acc-rgb),.09);
  transform:translateX(-101%);transition:transform .3s var(--ease-out);border-radius:100px;
}
.sk:hover{border-color:rgba(var(--acc-rgb),.4);color:var(--accent);transform:translateY(-2px)}
.sk:hover::before{transform:translateX(0)}

/* PROJECTS */
#projects{padding:var(--s-pad) 0}
.projects-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:2.5rem;gap:1rem;flex-wrap:wrap;
}
.projects-count{font-family:var(--font);font-size:.65rem;color:#2a2a2a;letter-spacing:.12em;text-transform:uppercase;align-self:flex-start;padding-top:.5rem}
.project-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;
  padding:1.6rem 0;border-top:1px solid rgba(255,255,255,.05);
  transition:border-color .3s;position:relative;
}
.project-row::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.05)}
.project-row:last-child::after{display:none}
.project-num{font-family:var(--font);font-size:.6rem;color:#1e1e1e;letter-spacing:.12em;font-weight:600;align-self:flex-start;padding-top:.2rem;min-width:28px}
.project-body{flex:1}
.project-tags-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.55rem}
.p-tag{
  font-family:var(--font);font-size:.54rem;color:#2e2e2e;border:1px solid #1c1c1c;
  border-radius:100px;padding:.1rem .5rem;letter-spacing:.06em;text-transform:uppercase;transition:border-color .3s,color .3s;
}
.project-row:hover .p-tag{border-color:rgba(var(--acc-rgb),.22);color:rgba(var(--acc-rgb),.55)}
.project-title{
  font-family:var(--font);font-size:clamp(1.3rem,3.5vw,1.9rem);font-weight:700;
  letter-spacing:-.04em;color:var(--paper);margin-bottom:.4rem;transition:color .3s;line-height:1.05;
}
.project-row:hover .project-title{color:var(--accent)}
.project-desc{font-size:.8rem;color:#383838;line-height:1.65;font-weight:300;max-width:500px}
.project-actions{display:flex;gap:.6rem;align-self:center;flex-shrink:0}
.p-btn{
  width:42px;height:42px;border-radius:12px;background:#0c0c0c;border:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;color:#252525;font-size:.75rem;
  transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.p-btn:hover{background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.3);color:var(--accent);transform:translate(2px,-2px)}
.live-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--font);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;
  color:#3ddc84;background:rgba(61,220,132,.06);border:1px solid rgba(61,220,132,.15);
  border-radius:100px;padding:.1rem .5rem;margin-bottom:.55rem;
}
.live-dot{width:4px;height:4px;background:#3ddc84;border-radius:50%;animation:ldBlink 1.6s ease-in-out infinite}
@keyframes ldBlink{0%,100%{opacity:1}50%{opacity:.15}}
@media(max-width:600px){
  .project-row{grid-template-columns:auto 1fr;grid-template-rows:auto auto}
  .project-actions{grid-column:2;margin-top:.5rem}
}

/* STACK */
.stack-section{padding:2.5rem 0;overflow:hidden}
.stack-outer{position:relative;overflow:hidden}
.stack-outer::before,.stack-outer::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.stack-outer::before{left:0;background:linear-gradient(to right,var(--ink),transparent)}
.stack-outer::after{right:0;background:linear-gradient(to left,var(--ink),transparent)}
.stack-track{display:flex;gap:1rem;width:max-content;padding:4px 0;animation:stackRoll 35s linear infinite}
.stack-track:hover{animation-play-state:paused}
@keyframes stackRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.stack-card{
  flex-shrink:0;width:160px;background:#0a0a0a;border:1px solid rgba(255,255,255,.05);
  border-radius:18px;padding:1.2rem;transition:border-color .3s,transform .35s;
}
.stack-card:hover{border-color:rgba(var(--acc-rgb),.25);transform:translateY(-6px)}
.stack-icon{
  width:36px;height:36px;border-radius:10px;background:#111;border:1px solid #1a1a1a;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--accent);margin-bottom:.8rem;
}
.stack-name{font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.15rem}
.stack-cat{font-size:.6rem;color:#2a2a2a;letter-spacing:.08em;text-transform:uppercase}

/* CERTIFICATES */
#certificates{padding:var(--s-pad) 0}
.cert-list{display:flex;flex-direction:column;gap:0;margin-top:2.2rem}
.cert-item{
  display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:1.5rem;
  padding:1.3rem 0;border-top:1px solid rgba(255,255,255,.04);
  position:relative;transition:padding .3s;cursor:default;
}
.cert-item::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.04)}
.cert-item:last-child::after{display:none}
.cert-item:hover{padding-left:.8rem}
.cert-num{font-family:var(--font);font-size:2.2rem;font-weight:800;letter-spacing:-.08em;color:#131313;transition:color .4s;line-height:1}
.cert-item:hover .cert-num{color:rgba(var(--acc-rgb),.2)}
.cert-info .cert-name{
  font-family:var(--font);font-size:clamp(.95rem,2.5vw,1.25rem);font-weight:700;
  letter-spacing:-.03em;color:var(--paper);margin-bottom:.2rem;transition:color .3s;
}
.cert-item:hover .cert-name{color:var(--accent)}
.cert-info .cert-issuer{font-size:.72rem;color:#303030;font-weight:400}
.cert-info .cert-meta{display:flex;align-items:center;gap:.5rem;margin-top:.35rem;flex-wrap:wrap}
.cert-yr{font-family:var(--font);font-size:.58rem;color:#252525;letter-spacing:.1em}
.cert-bdg{
  font-family:var(--font);font-size:.53rem;padding:.08rem .42rem;
  background:rgba(var(--acc-rgb),.07);border:1px solid rgba(var(--acc-rgb),.2);
  color:rgba(var(--acc-rgb),.75);border-radius:100px;letter-spacing:.06em;text-transform:uppercase;
}
.cert-arrow{
  width:36px;height:36px;border-radius:10px;background:#0a0a0a;border:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;color:#1c1c1c;font-size:.7rem;
  transition:background .3s,border-color .3s,color .3s,transform .3s;flex-shrink:0;
}
.cert-item:hover .cert-arrow{background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.3);color:var(--accent);transform:translate(3px,-3px)}
@media(max-width:480px){
  .cert-item{grid-template-columns:42px 1fr auto;gap:.9rem}
  .cert-num{font-size:1.6rem}
}



/* CONTACT — performance optimised, no lag */ #contact{ min-height:100svh;display:flex;align-items:center; position:relative;overflow:hidden;background:var(--ink); background-image: radial-gradient(ellipse 55% 45% at 80% 90%,rgba(var(--acc-rgb),.04) 0%,transparent 65%), radial-gradient(ellipse 40% 40% at 10% 10%,rgba(124,58,237,.03) 0%,transparent 60%); } /* removed grain SVG filter & stripeShift — both caused heavy repaints */ .contact-grain{display:none} .contact-stripe{display:none} .contact-bg-word{ position:absolute;font-family:var(--font);font-size:clamp(6rem,22vw,18rem);font-weight:800; letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.022); text-transform:uppercase;white-space:nowrap;bottom:-0.5rem;right:-1rem; pointer-events:none;user-select:none;line-height:1;z-index:0; } .contact-wrap{ position:relative;z-index:2;max-width:900px;margin:0 auto; padding:4rem 2rem calc(4rem + var(--safe-bot));width:100%; contain:layout; } .ct-avail{display:flex;align-items:center;gap:.6rem;margin-bottom:2rem;flex-wrap:wrap} .ct-avail-dot{ width:8px;height:8px;background:#3ddc84;border-radius:50%;flex-shrink:0; animation:availRing 2.2s ease-out infinite;will-change:box-shadow; } @keyframes availRing{ 0%{box-shadow:0 0 0 0 rgba(61,220,132,.4)} 70%{box-shadow:0 0 0 9px rgba(61,220,132,0)} 100%{box-shadow:0 0 0 0 rgba(61,220,132,0)} } .ct-avail-text{font-family:var(--font);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3ddc84} .ct-avail-sep{width:1px;height:14px;background:#1e1e1e;margin:0 .3rem} .ct-avail-role{font-family:var(--font);font-size:.62rem;color:#2a2a2a;letter-spacing:.08em} .ct-big{ font-family:var(--font);font-weight:800; font-size:clamp(3rem,12vw,9rem); letter-spacing:-.07em;line-height:.87;margin-bottom:2.2rem; contain:layout style; } .ct-big .row{display:block;overflow:hidden} .ct-big .word{ display:inline-block;opacity:0;transform:translateY(110%); transition:opacity .75s var(--ease-out),transform .75s var(--ease-out); will-change:transform,opacity; } .ct-big.vis .word{opacity:1;transform:translateY(0)} .ct-big.vis .word:nth-child(1){transition-delay:.05s} .ct-big.vis .word:nth-child(2){transition-delay:.14s} .ct-big.vis .word:nth-child(3){transition-delay:.23s} .ct-big.vis .word:nth-child(4){transition-delay:.32s} .ct-big .w-accent{color:var(--accent)} .ct-big .w-ghost{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.15)} .ct-split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;margin-bottom:3rem} @media(max-width:700px){.ct-split{grid-template-columns:1fr;gap:2rem}} .ct-desc{font-size:.9rem;color:#3a3a3a;line-height:1.75;font-weight:300} .ct-desc strong{color:#666;font-weight:500} .ct-link-list{display:flex;flex-direction:column;gap:.5rem} .ct-lnk{ display:flex;align-items:center;gap:1rem;padding:.88rem 1.1rem; border:1px solid rgba(255,255,255,.04);border-radius:16px;background:#080808; position:relative;overflow:hidden; transition:transform .22s var(--ease-out),opacity .22s; transform:translateZ(0); } .ct-lnk::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--accent);transform:scaleY(0) translateZ(0);transform-origin:bottom; transition:transform .3s var(--ease-out); } .ct-lnk:hover{transform:translateX(7px) translateZ(0)} .ct-lnk:hover::before{transform:scaleY(1) translateZ(0)} .ct-lnk-icon{ width:40px;height:40px;border-radius:12px;background:#101010;border:1px solid #181818; display:flex;align-items:center;justify-content:center;font-size:1rem;color:#2a2a2a;flex-shrink:0; transition:color .25s,box-shadow .25s; } .ct-lnk:hover .ct-lnk-icon{color:var(--accent);box-shadow:0 0 16px rgba(var(--acc-rgb),.14)} .ct-lnk-info{flex:1;min-width:0} .ct-lnk-lbl{font-family:var(--font);font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1e1e1e;margin-bottom:.1rem;transition:color .22s} .ct-lnk:hover .ct-lnk-lbl{color:rgba(var(--acc-rgb),.5)} .ct-lnk-val{font-family:var(--font);font-size:.88rem;font-weight:700;color:#fff;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ct-lnk-arr{color:#1a1a1a;font-size:.7rem;flex-shrink:0;transition:color .22s,transform .22s} .ct-lnk:hover .ct-lnk-arr{color:var(--accent);transform:translate(3px,-3px)} .ct-email-hero{ position:relative;overflow:hidden;padding:2.4rem 2rem;border-radius:24px; border:1px solid rgba(var(--acc-rgb),.12); background:linear-gradient(135deg,rgba(var(--acc-rgb),.06) 0%,transparent 60%); margin-bottom:2.5rem; } .ct-email-hero::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,var(--accent),rgba(var(--acc-rgb),.2),transparent); } .ct-email-lbl{font-family:var(--font);font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--acc-rgb),.55);margin-bottom:.6rem} .ct-email-big{font-family:var(--font);font-size:clamp(1rem,4vw,1.8rem);font-weight:800;letter-spacing:-.04em;color:var(--paper);margin-bottom:1.5rem;word-break:break-all} .ct-copy{ display:inline-flex;align-items:center;gap:.55rem;padding:.72rem 1.4rem; background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.2);border-radius:100px; font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--accent); transition:background .22s,transform .18s,box-shadow .22s; } .ct-copy:hover{background:rgba(var(--acc-rgb),.18);transform:translateY(-2px);box-shadow:0 10px 28px rgba(var(--acc-rgb),.15)} .ct-copy.done{color:#3ddc84;border-color:rgba(61,220,132,.3);background:rgba(61,220,132,.07)} .ct-foot{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem; padding-top:2rem;border-top:1px solid #0e0e0e; } .ct-foot-brand{font-family:var(--font);font-size:.8rem;font-weight:700;color:#1a1a1a;letter-spacing:-.03em} .ct-foot-links{display:flex;gap:1.5rem} .ct-foot-links a{font-family:var(--font);font-size:.6rem;color:#1a1a1a;letter-spacing:.08em;text-transform:uppercase;transition:color .22s} .ct-foot-links a:hover{color:#444} .ct-foot-yr{font-size:.62rem;color:#141414}  

/* contact mobile */ @media(max-width:700px){ .contact-wrap{padding:3rem 1.2rem calc(3rem + var(--safe-bot))} .ct-big{font-size:clamp(2.8rem,11vw,5rem);line-height:.9} .ct-email-hero{padding:1.6rem 1.2rem} .ct-email-big{font-size:clamp(.9rem,4.5vw,1.3rem)} .ct-lnk-val{font-size:.8rem} .ct-foot{flex-direction:column;align-items:flex-start} .contact-bg-word{font-size:clamp(4rem,18vw,9rem)} } @media(max-width:400px){ .ct-big{font-size:clamp(2.4rem,10vw,4rem)} .ct-avail-sep,.ct-avail-role{display:none} }  

/* HERO TAPE */
.hero-tape{
  position:absolute;top:42%;left:0;right:0;
  transform:translateY(-50%);z-index:2;text-align:center;pointer-events:none;opacity:.14;
}
.tape-word{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);
  font-family:var(--font);font-size:clamp(3rem,10vw,7rem);font-weight:700;
  letter-spacing:-.04em;text-transform:uppercase;opacity:0;filter:blur(6px);
}
.tape-word.active{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1);transition:all .5s ease}

/* CONTACT FIX — add at very bottom */

.ct-big{
  line-height:1 !important;
  margin-bottom:3rem !important;
  letter-spacing:-0.05em !important;
}

.ct-big .row{
  overflow:visible !important;
  padding:.08em 0 !important;
}

@media(max-width:700px){
  .ct-big{
    line-height:1 !important;
    margin-bottom:2.2rem !important;
  }

  .ct-big .row{
    padding:.06em 0 !important;
  }
}

@media(max-width:400px){
  .ct-big{
    line-height:1 !important;
  }
}



/* CONNECT MODAL */

.popup{
position:fixed;
inset:0;

display:none;
justify-content:center;
align-items:center;

padding:1.5rem;

background:rgba(8,8,10,.62);

backdrop-filter:blur(14px);

z-index:9999;

opacity:0;

transition:opacity .35s var(--ease-out);
}

.popup.active{
display:flex;
opacity:1;
}

.popup-box{

position:relative;

width:100%;
max-width:380px;

padding:2rem;

background:
linear-gradient(
180deg,
rgba(22,22,26,.98),
rgba(12,12,14,.98)
);

border:1px solid rgba(255,255,255,.06);

border-radius:28px;

overflow:hidden;

box-shadow:
0 25px 60px rgba(0,0,0,.45);

animation:modalEnter .45s var(--ease-out);
}

/* subtle top accent line */
.popup-box::before{

content:"";

position:absolute;

top:0;
left:50%;

transform:translateX(-50%);

width:70px;
height:3px;

border-radius:50px;

background:rgba(var(--acc-rgb),.7);
}

@keyframes modalEnter{

from{
opacity:0;
transform:translateY(18px) scale(.96);
}

to{
opacity:1;
transform:none;
}
}

.close-popup{

position:absolute;

top:14px;
right:18px;

width:32px;
height:32px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.03);

color:var(--muted);

font-size:1rem;

transition:.3s;
}

.close-popup:hover{

background:rgba(255,255,255,.07);

color:var(--paper);

transform:rotate(90deg);
}

.popup-box h3{

font-family:var(--font);

font-size:clamp(1.4rem,5vw,1.8rem);

letter-spacing:-.05em;

margin-bottom:.45rem;
}

.popup-text{

font-size:.88rem;

line-height:1.6;

color:var(--muted);

margin-bottom:1.2rem;
}

.popup-box input{

width:100%;

height:54px;

padding:0 16px;

border:none;

outline:none;

border-radius:16px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

color:var(--paper);

font-family:var(--body);

font-size:.92rem;

transition:.3s;
}

.popup-box input:focus{

border-color:rgba(var(--acc-rgb),.35);

background:rgba(255,255,255,.06);
}

.popup-box input::placeholder{

color:rgba(255,255,255,.35);
}

#submitEmail{

width:100%;
height:54px;

margin-top:1rem;

display:flex;
align-items:center;
justify-content:center;
gap:.55rem;

border:none;
outline:none;

border-radius:100px;

background:#1d1d22;

color:var(--paper);

font-family:var(--font);

font-size:.76rem;

font-weight:700;

letter-spacing:.08em;

transition:
transform .3s var(--ease-out),
background .3s var(--ease-out);

overflow:hidden;
}

#submitEmail:hover{

transform:translateY(-2px);

background:#292930;
}

#submitEmail i{

font-size:.8rem;
flex-shrink:0;
}

#submitEmail span{

display:flex;
align-items:center;
}

/* MESSAGE STYLE NOTIFICATION */

#toast{

position:fixed;

top:22px;
left:50%;

transform:translateX(-50%) translateY(-80px);

padding:10px 16px;

border-radius:100px;

background:#151518;

color:var(--paper);

font-size:.85rem;

font-family:var(--body);

display:flex;
align-items:center;
gap:.5rem;

border:1px solid rgba(255,255,255,.06);

opacity:0;

z-index:99999;

transition:
transform .35s var(--ease-out),
opacity .35s var(--ease-out);

white-space:nowrap;
}

#toast.show{

opacity:1;

transform:
translateX(-50%)
translateY(0);
}

#toast i{

font-size:.9rem;
}

#toast.success i{
color:#22c55e;
}

#toast.error i{
color:#ef4444;
}

#toast.info i{
color:var(--accent);
}

@media(max-width:500px){

#toast{

max-width:90vw;

white-space:normal;

text-align:center;

}
}



.connected-btn{

opacity:.9;

border-color:
rgba(34,197,94,.25);

background:
rgba(34,197,94,.08);

transition:.35s;
}

.connected-btn i{

font-size:.85rem;
}











/* Freeze all entrance animations while loading */

body.loading .hero-badge,
body.loading .hero-h1 .word,
body.loading .hero-sub,
body.loading .hero-actions,
body.loading .hero-scroll-cue,
body.loading .hero-visual{

animation:none !important;

opacity:0 !important;

transform:
translateY(50px) !important;
}


/* Start animations only after loader ends */

body.loaded .hero-visual{
animation:heroZoom 12s var(--ease-out) forwards;
}

body.loaded .hero-badge{
animation:badgeIn .7s .2s var(--ease-out) forwards;
}

body.loaded .hero-h1 .line:nth-child(1) .word{
animation:wordReveal .85s .45s var(--ease-out) forwards;
}

body.loaded .hero-h1 .line:nth-child(2) .word{
animation:wordReveal .85s .75s var(--ease-out) forwards;
}

body.loaded .hero-h1 .line:nth-child(3) .word{
animation:wordReveal .85s 1s var(--ease-out) forwards;
}

body.loaded .hero-sub{
animation:fadeUp .7s 1.4s var(--ease-out) forwards;
}

body.loaded .hero-actions{
animation:fadeUp .7s 1.6s var(--ease-out) forwards;
}

body.loaded .hero-scroll-cue{
animation:fadeUp .7s 2s var(--ease-out) forwards;
}




.about-img-frame {
  width: 380px;
  height: 330px;
  margin: 2rem auto;
  overflow: hidden;

  /* Initial organic shape */
  border-radius: 60% 40% 55% 45% / 45% 35% 65% 55%;

  box-shadow: 0 15px 40px rgba(0,0,0,0.25);

  /* Continuous movement */
  animation: morph 8s ease-in-out infinite,
             floatImg 4s ease-in-out infinite;
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;

  transition: transform 0.5s ease;
}

/* Hover zoom */
.about-img-frame:hover .about-img {
  transform: scale(1.08);
}

/* Floating animation */
@keyframes floatImg {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Shape morph animation */
@keyframes morph {
  0% {
    border-radius: 60% 40% 55% 45% / 45% 35% 65% 55%;
  }
  33% {
    border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%;
  }
  66% {
    border-radius: 55% 45% 60% 40% / 35% 60% 40% 65%;
  }
  100% {
    border-radius: 60% 40% 55% 45% / 45% 35% 65% 55%;
  }
}

/* Tablet */
@media (max-width:768px){
  .about-img-frame{
    width:320px;
    height:270px;
  }
}

/* Mobile */
@media (max-width:480px){
  .about-img-frame{
    width:260px;
    height:220px;
  }
}