/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:auto}
body{
  background:var(--c-bg);color:var(--c-fg);
  font-family:'DM Sans',sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  scrollbar-width:none;
  transition:background .3s ease,color .3s ease;
}
body::-webkit-scrollbar{display:none}
::selection{background:var(--c-accent-dim)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none;padding:0}

/* ── Theme tokens (dark — cosmic blue) ── */
:root{
  --c-bg:#0B011D;
  --c-card:rgba(168,128,255,0.03);
  --c-elevated:rgba(168,128,255,0.02);
  --c-fg:#e5e2dc;
  --c-fg-body:#c8c5bf;
  --c-fg-mid:#b0ada7;
  --c-fg-muted:#a09d97;
  --c-fg-dim:#8a8783;
  --c-fg-sub:rgba(229,226,220,0.6);
  --c-fg-faint:rgba(229,226,220,0.15);
  --c-fg-ghost:rgba(229,226,220,0.05);
  --c-accent:#A880FF;
  --c-accent-fade:rgba(168,128,255,0.08);
  --c-accent-dim:rgba(168,128,255,0.2);
  --c-accent-faint:rgba(168,128,255,0.12);
  --c-marquee-hover:rgba(168,128,255,0.3);
  --c-border:rgba(168,128,255,0.06);
  --c-border-mid:rgba(168,128,255,0.1);
  --c-nav-bg:rgba(11,1,29,0.85);
  --c-nav-border:rgba(168,128,255,0.1);
  --c-separator:rgba(168,128,255,0.06);
  --c-marquee-border:rgba(168,128,255,0.04);
  --c-marquee-text:rgba(229,226,220,0.05);
  --c-glow:rgba(168,128,255,0.12);
  --c-glow-strong:rgba(168,128,255,0.20);
}
[data-theme="light"]{
  --c-bg:#F5F0FF;
  --c-card:rgba(255,255,255,0.85);
  --c-elevated:rgba(168,128,255,0.04);
  --c-fg:#1a1030;
  --c-fg-body:#2e2050;
  --c-fg-mid:#4a3a6e;
  --c-fg-muted:#6b5c90;
  --c-fg-dim:#9080b0;
  --c-fg-sub:rgba(26,16,48,0.55);
  --c-fg-faint:rgba(26,16,48,0.2);
  --c-fg-ghost:rgba(26,16,48,0.07);
  --c-accent:#A880FF;
  --c-accent-fade:rgba(168,128,255,0.1);
  --c-accent-dim:rgba(168,128,255,0.2);
  --c-accent-faint:rgba(168,128,255,0.12);
  --c-marquee-hover:rgba(168,128,255,0.7);
  --c-border:rgba(168,128,255,0.15);
  --c-border-mid:rgba(168,128,255,0.2);
  --c-nav-bg:rgba(245,240,255,0.85);
  --c-nav-border:rgba(168,128,255,0.12);
  --c-separator:rgba(168,128,255,0.1);
  --c-marquee-border:rgba(168,128,255,0.06);
  --c-marquee-text:rgba(168,128,255,0.08);
  --c-glow:rgba(168,128,255,0.12);
  --c-glow-strong:rgba(168,128,255,0.22);
}

/* ── Utility classes ── */
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 1.5rem}
@media(min-width:640px){.container{padding:0 2.5rem}}
@media(min-width:768px){.container{padding:0 4rem}}

.section-pad{padding-top:7rem;padding-bottom:7rem}
@media(min-width:768px){.section-pad{padding-top:10rem;padding-bottom:10rem}}

.font-mono{font-family:'JetBrains Mono',monospace}

/* ── Gradient text (hen-ry.com style) ── */
.gradient-text{
  background:linear-gradient(180deg, var(--c-fg) 0%, rgba(229,226,220,0.5) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="light"] .gradient-text{
  background:none;
  -webkit-background-clip:unset;background-clip:unset;
  -webkit-text-fill-color:var(--c-fg);
  color:var(--c-fg);
}

/* ── Shimmer ── */
@keyframes shimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.shimmer{
  background:linear-gradient(135deg,var(--c-fg),var(--c-accent),#C4A0FF,var(--c-fg));
  background-size:300% 300%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 8s ease infinite;
}

/* ── Scroll indicator ── */
@keyframes pulse-line{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
.scroll-anim{animation:pulse-line 2s ease-in-out infinite}

/* ── Marquee ── */
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 40s linear infinite;
}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{
  font-size:clamp(14px,2vw,18px);font-weight:300;letter-spacing:.15em;text-transform:uppercase;
  color:var(--c-marquee-text);transition:color .5s;
  white-space:nowrap;padding:0 1.5rem;
}
.marquee-sep{color:var(--c-accent);opacity:.4;padding:0 .5rem;font-size:12px}

/* ── Image hover ── */
.img-hover{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.group:hover .img-hover{transform:scale(1.03)}

/* ── Phone mockup ── */
.phone-mockup{border-radius:2.5rem;padding:0}

/* ── CTA fill ── */
.cta-fill{position:relative;overflow:hidden}
.cta-fill::before{
  content:'';position:absolute;inset:0;
  background:var(--c-fg);border-radius:inherit;
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cta-fill:hover{color:var(--c-bg);border-color:var(--c-fg)}
.cta-fill:hover::before{transform:scaleY(1)}
.cta-fill>*{position:relative;z-index:1}

/* ── Glass card (hen-ry.com inspired) ── */
.glass-card{
  position:relative;
  background:var(--c-card);
  border:1px solid var(--c-border-mid);
  border-radius:1.25rem;
  padding:2.5rem;
  overflow:hidden;
  transition:border-color .5s ease;
}
.glass-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--c-glow), transparent 40%);
  opacity:0;transition:opacity .5s ease;
  pointer-events:none;z-index:0;
}
.glass-card:hover::before{opacity:1}
.glass-card:hover{border-color:rgba(168,128,255,0.18)}
.glass-card>*{position:relative;z-index:1}
[data-theme="light"] .glass-card{
  background:rgba(255,255,255,0.6);
  border-color:rgba(28,26,24,0.08);
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .glass-card:hover{border-color:rgba(74,144,217,0.25)}
[data-theme="light"] .glass-card::before{
  background:radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(74,144,217,0.06), transparent 40%);
}

/* ── Nav (two-pill design) ── */
.nav-blur{
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;
  border-radius:0;
  max-width:none;
  min-width:0;
  margin:0;
  padding:0;
}
.nav-blur .container > a,
.nav-blur .container > div {
  background:var(--c-nav-bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--c-nav-border);
  border-radius:9999px;
  transition:background .3s ease,border-color .3s ease;
  height:44px;
  display:inline-flex;
  align-items:center;
  padding:0 1.25rem;
}

/* ── Theme toggle ── */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--c-border-mid);background:transparent;
  cursor:pointer;color:var(--c-fg-sub);
  transition:border-color .2s,color .2s;flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--c-accent);color:var(--c-accent)}
.theme-icon-dark,.theme-icon-light{display:none}
html:not([data-theme="light"]) .theme-icon-dark{display:block}
html[data-theme="light"] .theme-icon-light{display:block}

/* ── Layout helpers ── */
.flex{display:flex}.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}
.items-start{align-items:start}.items-end{align-items:end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}
.gap-20{gap:5rem}.gap-24{gap:6rem}
.mb-1{margin-bottom:.25rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}
.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}.mt-3{margin-top:.75rem}
.mt-5{margin-top:1.25rem}.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.pt-32{padding-top:8rem}.pt-40{padding-top:10rem}
.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.w-full{width:100%}.w-px{width:1px}.h-px{height:1px}
.min-h-screen{min-height:100vh}
.max-w-lg{max-width:32rem}
.overflow-hidden{overflow:hidden}
.relative{position:relative}.absolute{position:absolute}
.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.right-0{right:0}
.z-50{z-index:50}.shrink-0{flex-shrink:0}
.text-center{text-align:center}
.rounded-full{border-radius:9999px}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.origin-left{transform-origin:left}
.inline-flex{display:inline-flex}
.hidden{display:none}
.space-y-3>*+*{margin-top:.75rem}
.space-y-6>*+*{margin-top:1.5rem}
.space-y-20>*+*{margin-top:5rem}
.space-y-24>*+*{margin-top:6rem}
.space-y-32>*+*{margin-top:8rem}

@media(min-width:640px){.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}}
@media(min-width:768px){
  .md\:flex{display:flex}
  .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .md\:grid-cols-\[1\.3fr_1fr\]{grid-template-columns:1.3fr 1fr}
  .md\:grid-cols-\[1fr_1\.2fr\]{grid-template-columns:1fr 1.2fr}
  .md\:grid-cols-\[1fr_1\.4fr\]{grid-template-columns:1fr 1.4fr}
  .md\:order-1{order:1}
  .md\:order-2{order:2}
  .md\:gap-20{gap:5rem}
  .md\:gap-16{gap:4rem}
  .md\:gap-24{gap:6rem}
  .md\:px-16{padding-left:4rem;padding-right:4rem}
  .md\:mx-0{margin-left:0;margin-right:0}
  .md\:w-\[280px\]{width:280px}
  .md\:col-span-2{grid-column:span 2}
}
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
}

.grid{display:grid}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}

/* ── Reveal animation (JS-driven) ── */
[data-reveal]{opacity:0;transform:translateY(28px);transition:none}
[data-reveal].revealed{opacity:1;transform:none}
[data-stagger] > *{opacity:0;transform:translateY(20px)}
[data-stagger] > *.revealed{opacity:1;transform:none}
.separator-line{transform:scaleX(0);transform-origin:left}

/* ── Hero ── */
.hero-name{font-size:clamp(3rem,10vw,6.5rem);font-weight:700;letter-spacing:-.04em;line-height:.9}
.hero-img{width:clamp(160px,18vw,280px);height:clamp(160px,18vw,280px)}
.phone-w-220{width:220px}
.phone-w-240{width:240px}
.mx-auto{margin-left:auto;margin-right:auto}

/* Hero radial glow */
.hero-glow{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120%;max-width:1400px;height:100%;
  background:radial-gradient(50% 60% at 50% 10%, var(--c-glow-strong) 0%, transparent 100%);
  pointer-events:none;z-index:0;
}
.hero .container{position:relative;z-index:1}

/* Section glow (between sections) */
.section-glow{position:relative;overflow:visible}
.section-glow::before{
  content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);
  width:70%;height:160px;
  background:radial-gradient(ellipse at center, var(--c-glow) 0%, transparent 70%);
  pointer-events:none;z-index:0;
}

/* ── Coin flip ── */
@keyframes coin-flip{
  0%,42%{transform:rotateY(0deg)}
  48%,92%{transform:rotateY(180deg)}
  98%,100%{transform:rotateY(360deg)}
}
.coin-flip{perspective:800px}
.coin-inner{
  width:100%;height:100%;
  position:relative;
  transform-style:preserve-3d;
  animation:coin-flip 12s cubic-bezier(.4,0,.2,1) infinite;
}
.coin-front,.coin-back{
  position:absolute;inset:0;
  width:100%;height:100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.coin-back{transform:rotateY(180deg)}

/* Nav links hover */
.nav-link{transition:color .5s}

/* ── Language toggle ── */
.lang-toggle{
  display:flex;align-items:center;gap:6px;
  background:transparent;border:none;
  cursor:pointer;padding:4px 2px;font-family:inherit;flex-shrink:0;
}
.lang-opt{
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-fg-muted);transition:color .2s;
}
.lang-opt.active{color:var(--c-fg)}
.lang-sep{font-size:10px;color:var(--c-fg-muted);opacity:.4;pointer-events:none}

/* ── Hero two-column layout ── */
.hero-flex{display:flex;align-items:center;gap:3rem;justify-content:center}
.hero-text-col{flex:0 1 460px;min-width:0}
.hero-img-col{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-name-row{display:flex;align-items:center;gap:1.5rem}
.hero-profile-desktop{
  width:clamp(280px,30vw,400px);height:clamp(280px,30vw,400px);
  border-radius:9999px;border:1px solid var(--c-border-mid);overflow:hidden;
  box-shadow:0 0 60px var(--c-glow), 0 0 120px rgba(168,128,255,0.05);
}
.hero-profile-desktop img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .hero-flex{display:block}
  .hero-img-col{display:none}
  .hero-profile-mobile{width:100px;height:100px}
}
@media(max-width:500px){
  .hero-profile-mobile{width:80px;height:80px}
}
@media(min-width:861px){
  .hero-profile-mobile{display:none!important}
}

/* ── Project image order on mobile ── */
.order-1{order:1}
.order-2{order:2}
.order-3{order:3}
@media(min-width:768px){.md\:order-1{order:1}.md\:order-2{order:2}.md\:order-3{order:3}.md\:row-span-2{grid-row:span 2}}

/* ── Mobile contact buttons ── */
@media(max-width:480px){
  #contact .cta-fill{padding:.625rem 1rem!important;font-size:9px!important}
}

/* ── Marquee section ── */
.marquee-section{
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  padding:1.5rem 0;
  overflow:hidden;
}

/* ── Gradient text strong (purple accent) ── */
.gradient-text-strong{
  background:linear-gradient(135deg,#A880FF 0%,#C4A0FF 50%,#8B5CF6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="light"] .gradient-text-strong{
  background:none;
  -webkit-background-clip:unset;background-clip:unset;
  -webkit-text-fill-color:var(--c-fg);
  color:var(--c-fg);
}

/* ── Stat row ── */
.stat-row{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin-top:3.5rem}
.stat-card{display:flex;flex-direction:column;gap:.25rem}
.stat-value{font-size:clamp(36px,4vw,48px);font-weight:700;letter-spacing:-.03em;color:var(--c-fg);line-height:1}
.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--c-fg-dim)}

/* ── Section label & title ── */
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.28em;color:var(--c-accent);margin-bottom:1.5rem;display:block}
.section-title{font-size:clamp(42px,5vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--c-fg);margin-bottom:3.5rem}
.section-title em{font-style:normal;background:linear-gradient(135deg,#A880FF,#C4A0FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── Big statement ── */
.big-statement{font-size:clamp(30px,3.5vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--c-fg-mid);margin-bottom:3.5rem;max-width:820px}
.big-statement em{font-style:normal;color:var(--c-fg)}

/* ── Benefit card ── */
.benefit-card{position:relative;overflow:hidden;background:var(--c-card);border:1px solid var(--c-border-mid);border-radius:1.25rem;padding:2.5rem;transition:border-color .4s,background .4s}
.benefit-card::before{content:attr(data-num);position:absolute;right:-.25rem;top:-1rem;font-size:130px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--c-fg);opacity:.04;pointer-events:none;z-index:0;user-select:none}
.benefit-card:hover{border-color:rgba(168,128,255,0.2);background:rgba(168,128,255,0.04)}
.benefit-card>*{position:relative;z-index:1}
.benefit-num{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent);margin-bottom:1.25rem}
.benefit-title{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--c-fg);margin-bottom:.75rem;line-height:1.25}
.benefit-desc{font-size:15px;line-height:1.8;color:var(--c-fg-muted)}

/* ── Accent line ── */
.accent-line{width:2.5rem;height:2px;background:var(--c-accent);border-radius:9999px;margin-bottom:1.5rem}

/* ── Work row (large image + text) ── */
.work-row{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem;align-items:center}
.work-row-rev{grid-template-columns:1fr 1.5fr}
.work-row-rev .work-image{order:2}
.work-row-rev .work-text{order:1}
.work-image{border-radius:1rem;overflow:hidden}
.work-image img{width:100%;height:auto;display:block}
.work-title{font-size:clamp(26px,2.5vw,32px);font-weight:700;letter-spacing:-.025em;color:var(--c-fg);margin-bottom:1rem;line-height:1.15}
.work-desc{font-size:15px;line-height:1.85;color:var(--c-fg-muted)}
@media(max-width:768px){
  .work-row,.work-row-rev{grid-template-columns:1fr;gap:2rem}
  .work-row-rev .work-image,.work-row-rev .work-text{order:0}
}

/* ── Detail block ── */
.detail-block{background:var(--c-card);border:1px solid var(--c-border-mid);border-radius:1.25rem;padding:2rem 2.5rem}
.detail-block-heading{font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--c-accent);margin-bottom:1.25rem}

/* ── Phone work row ── */
.phone-work-row{display:grid;grid-template-columns:1fr 2fr;gap:4rem;align-items:center}
.phone-work-row-rev{grid-template-columns:2fr 1fr}
.phone-work-row-rev .pw-phone{order:2}
.phone-work-row-rev .pw-text{order:1}
@media(max-width:768px){
  .phone-work-row,.phone-work-row-rev{grid-template-columns:1fr;gap:2rem}
  .pw-phone{display:flex;justify-content:center}
  .phone-work-row-rev .pw-phone,.phone-work-row-rev .pw-text{order:0}
}

/* ── Tech tag ── */
.tech-tag{font-size:12px;padding:.4rem 1.1rem;border-radius:9999px;border:1px solid var(--c-border-mid);color:var(--c-fg-dim);background:var(--c-card);display:inline-block}

/* ── Tech badge (with icon) ── */
.tech-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:12px;font-weight:500;padding:.4rem .9rem;border-radius:9999px;background:var(--c-card);border:1px solid var(--c-border-mid);color:var(--c-fg-dim);line-height:1.2}
.tech-badge img{width:15px;height:15px;flex-shrink:0;display:block}

/* ── Hero split layout ── */
.hero-split{display:grid;gap:4rem;align-items:center}
@media(min-width:860px){.hero-split{grid-template-columns:var(--hero-cols,1.25fr 1fr)}}
@media(max-width:859px){.hero-split{grid-template-columns:1fr;gap:2.5rem}.hero-split-img{margin-bottom:0}}

/* ── Animated separator ── */
.animated-sep{height:1px;background:linear-gradient(90deg,transparent,rgba(168,128,255,0.15),transparent);margin:0}

/* ── Solid CTA button ── */
.btn-solid{background:var(--c-fg);color:var(--c-bg);transition:opacity .3s}
.btn-solid:hover{opacity:.8}

/* ── Clickable card ── */
.glass-card[data-href]{cursor:pointer}