*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --ink:#050505;
  --ink-2:#0a0a0a;
  --paper:#ffffff;
  --dim:#9a9a9a;
  --dim-2:#5c5c5c;
  --blue:#ffffff;
  --blue-soft:rgba(255,255,255,0.06);
  --blue-line:rgba(255,255,255,0.28);
  --amber:#ffffff;
  --line:rgba(255,255,255,0.12);
  --line-soft:rgba(255,255,255,0.06);
  --border-base:rgba(136,136,136,0.267);
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --display:'Anton', sans-serif;
  --serif:'Cormorant Garamond', serif;
  --body:'DM Sans', sans-serif;
}

html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  overflow-x:hidden;
  position:relative;
}

.logo-path{
  stroke-dashoffset:1px;
  stroke-dasharray:220px 0;
  animation:logoGrow 10s ease forwards infinite;
  transform-origin:center;
}
@keyframes logoGrow{
  0%{stroke-dashoffset:1px;stroke-dasharray:0 220px;opacity:0;}
  10%{opacity:1;}
  40%{stroke-dasharray:220px 0;}
  85%{stroke-dasharray:220px 0;}
  95%,100%{stroke-dasharray:0 220px;}
}
@media (prefers-reduced-motion:reduce){
  .logo-path{animation:none !important;stroke-dasharray:unset !important;}
}

#art-plum{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at center, transparent 0%, black 62%);
  -webkit-mask-image:radial-gradient(ellipse at center, transparent 0%, black 62%);
}
@media (max-width:640px){
  #art-plum{
    mask-image:radial-gradient(ellipse at center, transparent 0%, black 48%);
    -webkit-mask-image:radial-gradient(ellipse at center, transparent 0%, black 48%);
  }
}

a{color:inherit;}

::selection{background:rgba(136,136,136,0.27);color:var(--paper);}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:#111;border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:#222;}

/* NAV — static element at the top of the page, scrolls away with content */
nav{
  position:relative;
  padding:2rem;
  display:grid;
  grid-template-columns:auto max-content;
  align-items:center;
  box-sizing:border-box;
  z-index:10;
}
nav > *{pointer-events:auto;}
.nav-logo{
  width:3rem;height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav-logo svg{width:100%;height:100%;}
.nav-links{
  grid-column:2;
  display:grid;
  grid-gap:1.2rem;
  grid-auto-flow:column;
  align-items:center;
  list-style:none;
  font-family:var(--body);
  font-weight:400;
  font-size:0.92rem;
}
.nav-links a{
  text-decoration:none;
  color:var(--paper);
  opacity:0.6;
  transition:opacity .2s ease;
  display:flex;
  align-items:center;
}
.nav-links a:hover{opacity:1;}
.nav-links svg{width:17px;height:17px;}
@media (max-width:640px){
  .nav-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0.9rem;font-size:0.82rem;max-width:65vw;}
  .nav-word{display:none;}
}

.scroll-top{
  position:fixed;
  right:0.9rem;bottom:0.9rem;
  width:2.5rem;height:2.5rem;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--ink);
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s, background .2s;
}
.scroll-top.visible{opacity:0.3;pointer-events:auto;}
.scroll-top:hover{opacity:1 !important;background:#8883;}
.scroll-top svg{width:18px;height:18px;}

/* HERO */
.hero{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:1.5rem 1.8rem 4rem;
  position:relative;
  z-index:1;
  max-width:680px;
  margin:0 auto;
}

.hero-headline{
  font-family:var(--display);
  font-size:clamp(2.4rem, 6vw, 3.6rem);
  line-height:1.1;
  text-transform:none;
  margin-bottom:1.4rem;
  opacity:0;
  animation:fadeUp .9s ease .25s forwards;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.22);
  padding:2px 8px 2px 6px;
  margin:0 1px;
  border-radius:5px;
  font-size:0.92em;
  font-weight:500;
  color:var(--paper);
  white-space:nowrap;
  transition:background .2s, border-color .2s;
}
.pill svg{width:13px;height:13px;flex-shrink:0;opacity:0.9;}
a.pill{text-decoration:none !important;}
a.pill:hover{background:rgba(255,255,255,0.16);border-color:var(--paper);}

.hero-sub p{margin-bottom:0.02rem;}
.hero-sub p:first-child{margin-bottom:1.1rem;}
.hero-sub p:last-child{margin-bottom:0;}
.hero-sub p.hero-sub-space{margin-bottom:1.1rem;}
.hl{color:var(--paper) !important;font-weight:500;}

.hero-call-line{
  font-size:0.95rem !important;
  color:var(--dim) !important;
  margin-top:0.4rem;
}
.hero-call-line .hl{color:var(--paper) !important;}
.hero-call-line .pill{margin-left:2px;}

.hero-sub{
  font-size:1.05rem;
  color:var(--dim);
  line-height:1.5;
  margin-bottom:1.6rem;
  opacity:0;
  animation:fadeUp .9s ease .4s forwards;
}
.hero-sub > p > a:not(.pill){
  color:var(--paper);
  font-weight:600;
  text-decoration:none;
  border-bottom:1.5px solid rgba(255,255,255,0.55);
  transition:border-color .3s ease-in-out;
}
.hero-sub > p > a:not(.pill):hover{border-bottom-color:var(--paper);}

.hero-divider{
  border:none;
  border-top:1px solid var(--line);
  margin:2rem 0 1.6rem;
  opacity:0;
  animation:fadeUp .9s ease .55s forwards;
}

/* CONTACT — "Find me on", exact pattern from antfu.me:
   plain text links, icon at op75, underline (border-bottom) on hover only */
.hero-social{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem 1.35rem;
}
.hero-social a{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  text-decoration:none;
  color:var(--paper);
  font-size:0.95rem;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:border-color .3s ease-in-out;
}
.hero-social a:hover{border-bottom-color:var(--paper);}
.hero-social svg{width:16px;height:16px;opacity:0.75;flex-shrink:0;}

.hero-extra{margin-bottom:1.8rem;}
.hero-extra:last-child{margin-bottom:0;}

.hero-label{
  font-size:0.95rem;
  color:var(--dim);
  margin-bottom:0.9rem;
}

.hero-mail{
  font-size:0.95rem;
  color:var(--dim);
  margin-top:1.1rem;
}
.hero-mail a{
  font-family:var(--mono);
  color:var(--paper);
  text-decoration:none;
  border-bottom:1.5px solid rgba(255,255,255,0.55);
  transition:border-color .3s ease-in-out;
}
.hero-mail a:hover{border-bottom-color:var(--paper);}

/* SUPPORT — visually matches antfu.me's sponsor buttons: visible border,
   dimmed-but-legible text/icon at rest, full brand color on hover */
.support-links{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}
.support-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:0.45rem !important;
  border:1px solid rgba(255,255,255,0.22) !important;
  border-radius:4px !important;
  padding:0.3rem 0.65rem !important;
  font-size:0.92rem !important;
  font-weight:400 !important;
  color:var(--dim) !important;
  text-decoration:none !important;
  background:transparent !important;
  opacity:1 !important;
  transition:color .2s ease-out, border-color .2s ease-out, background-color .2s ease-out !important;
}
.support-btn:hover{color:var(--paper) !important;border-color:rgba(255,255,255,0.4) !important;}
.support-btn.stripe:hover{color:#8f8cff !important;border-color:#635bff !important;background:rgba(99,91,255,0.12) !important;}
.support-btn.revolut:hover{color:#4a9bff !important;border-color:#0666eb !important;background:rgba(6,102,235,0.12) !important;}
.support-btn.paypal:hover{color:#4db4ff !important;border-color:#0070ba !important;background:rgba(0,112,186,0.12) !important;}
.support-btn svg{
  width:16px !important;
  height:16px !important;
  flex-shrink:0;
  fill:none !important;
  stroke:currentColor;
  stroke-width:2;
  opacity:0.85;
  transition:all .2s ease-out;
}
.support-btn:hover svg{opacity:1;}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

@media (prefers-reduced-motion:reduce){
  .hero-headline,.hero-sub,.hero-divider,.hero-social{animation:none;opacity:1;}
}

.call-section{
  border-top:1px solid var(--line);
  padding:6rem 1.5rem 6.5rem;
  display:flex;
  justify-content:center;
  position:relative;
  z-index:1;
}
.call-shell{width:100%;max-width:1080px;}
.call-head{max-width:680px;margin:0 auto 2.8rem;text-align:center;}
.call-title{
  font-family:var(--display);
  font-size:clamp(1.6rem, 4vw, 2.2rem);
  line-height:1.1;
  text-transform:none;
}

.cal-inline-box{
  position:relative;
  width:100%;
  min-height:780px;
  border:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden;
}
.cal-inline-box::before,.cal-inline-box::after{
  content:'';position:absolute;width:16px;height:16px;
  border-color:var(--blue-line);border-style:solid;z-index:2;pointer-events:none;
}
.cal-inline-box::before{top:-1px;left:-1px;border-width:1px 0 0 1px;}
.cal-inline-box::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}

#cal-booking-home{width:100%;min-height:780px;margin:0!important;padding:0!important;}
#cal-booking-home > div,
#cal-booking-home #skeleton-container,
#cal-booking-home #skeleton,
#cal-booking-home #wrapper{margin:0!important;padding:0!important;}
#cal-booking-home #skeleton-container{min-height:0!important;height:auto!important;max-height:780px!important;overflow:hidden!important;}
#cal-booking-home #skeleton-container,
#cal-booking-home #skeleton,
#cal-booking-home #wrapper{background:var(--ink-2)!important;border-radius:0!important;}
#cal-booking-home img[alt="Cal.com Logo"]{display:none!important;}

/* FOOTER */
footer,
rights{
  display:block;
  max-width:680px;
  margin:0 auto;
  padding:2rem 1.8rem 3rem;
  text-align:left;
  font-family:var(--body);
  font-weight:300;
  font-size:0.85rem;
  color:var(--dim-2);
  position:relative;
  z-index:1;
}
footer a,
rights a{color:var(--dim);text-decoration:none;}
footer a:hover,
rights a:hover{color:var(--paper);}
@media (max-width:700px){
  footer,
  rights{padding:1.5rem 1rem 2.5rem;}
}

@media (max-width:700px){
  nav{padding:1rem 1.2rem;}
  .hero{padding:1.2rem 1rem 3rem;}
  .call-section{padding:4rem 1rem;}
  .cal-inline-box,#cal-booking-home{min-height:700px;}
}
/* PROJECTS PAGE — icon + stem + title/role/meta/description grid */
.projects-wrap{
  max-width:900px;
  margin:0 auto;
  padding:0 1.8rem 6rem;
  position:relative;
  z-index:1;
}
.proj-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:4rem;
  row-gap:3.2rem;
  margin-top:1rem;
}
.proj-item{
  display:flex;
  gap:1.6rem;
  text-decoration:none;
  color:var(--paper);
}
.proj-item:nth-child(2n){
  padding-left:4rem;
  border-left:1px solid var(--line);
}
.proj-icon-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:none;
}
.proj-icon{
  width:56px;
  height:56px;
  flex:none;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s, background .2s;
}
.proj-icon svg{width:24px !important;height:24px !important;flex-shrink:0;}
.proj-stem{
  width:1px;
  flex:1;
  min-height:1.4rem;
  background:var(--line);
  margin-top:0.9rem;
}
.proj-item:hover .proj-icon{background:rgba(255,255,255,0.1);border-color:var(--blue-line);}
.proj-body{min-width:0;}
.proj-name{
  font-family:var(--display);
  font-size:1.15rem;
  font-weight:400;
  text-transform:none;
  letter-spacing:0.01em;
  margin-bottom:0.2rem;
}
.proj-role{
  font-weight:500;
  font-size:0.96rem;
  color:var(--paper);
  margin-bottom:0.6rem;
}
.proj-meta{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--dim-2);
  margin-bottom:0.9rem;
}
.proj-desc{
  font-size:0.9rem;
  line-height:1.8;
  color:var(--dim);
  max-width:42ch;
}
@media (max-width:760px){
  .proj-grid{grid-template-columns:1fr;row-gap:2.4rem;}
  .proj-item:nth-child(2n){padding-left:0;border-left:none;}
}

/* SKILLS PAGE — ordered list with smooth filled progress bars */
.skills-wrap{
  max-width:680px;
  margin:0 auto;
  padding:0 1.8rem 6rem;
  position:relative;
  z-index:1;
}
.skills-list{
  display:flex;
  flex-direction:column;
  gap:1.7rem;
  margin-top:2.2rem;
}
.skill-row{width:100%;}
.skill-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:0.6rem;
}
.skill-name{
  font-size:1rem;
  font-weight:500;
  color:var(--paper);
}
.skill-pct{
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.03em;
  color:var(--dim);
}
.skill-track{
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid var(--line);
  overflow:hidden;
}
.skill-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0.55), var(--paper));
  transition:width 1.1s cubic-bezier(.16,1,.3,1);
}
@media (max-width:700px){
  .skills-wrap{padding:0 1rem 4rem;}
}
/* SHARED PAGE HEADER — small tag + heading, used on free/masterclass content sections */
.page-section{max-width:680px;margin:0 auto;padding:3.2rem 1.8rem 0;position:relative;z-index:1;}
.page-tag{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--dim-2);
  margin-bottom:0.7rem;
}
.page-heading{
  font-family:var(--display);
  font-size:clamp(1.5rem, 3.2vw, 2rem);
  line-height:1.15;
  text-transform:none;
  margin-bottom:1.2rem;
}
.page-text{font-size:0.98rem;line-height:1.85;color:var(--dim);}
.page-text strong{color:var(--paper);font-weight:600;}
@media (max-width:700px){.page-section{padding:2.2rem 1rem 0;}}

/* CTA button — bordered, bigger than a pill, used for primary page actions */
.cta-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  border:1px solid rgba(255,255,255,0.4) !important;
  border-radius:6px !important;
  padding:0.8rem 1.5rem !important;
  font-size:0.95rem !important;
  font-weight:500 !important;
  color:var(--paper) !important;
  text-decoration:none !important;
  background:transparent !important;
  transition:background .2s ease, border-color .2s ease !important;
}
.cta-btn:hover{background:rgba(255,255,255,0.1) !important;border-color:var(--paper) !important;}
.cta-btn svg{
  width:16px !important;
  height:16px !important;
  flex-shrink:0;
  fill:none !important;
  stroke:currentColor;
  stroke-width:2;
}

/* VIDEO EMBED — same bordered/corner-bracket frame language as .cal-inline-box */
.video-wrap{max-width:900px;margin:2.4rem auto 0;padding:0 1.8rem;position:relative;z-index:1;}
.video-box{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden;
}
.video-box::before,.video-box::after{
  content:'';position:absolute;width:16px;height:16px;
  border-color:var(--blue-line);border-style:solid;z-index:2;pointer-events:none;
}
.video-box::before{top:-1px;left:-1px;border-width:1px 0 0 1px;}
.video-box::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.video-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  margin-top:1.3rem;
}
.video-note{font-size:0.9rem;color:var(--dim);}
@media (max-width:700px){.video-wrap{padding:0 1rem;}}

/* BENEFIT PILLS ROW — plain (non-link) pills used on the masterclass page */
.benefit-pills{display:flex;flex-wrap:wrap;gap:0.6rem;margin:1.6rem 0;}