:root{
  --bg:#fafaf9;
  --bg-card:#ffffff;
  --bg-subtle:#f2f3f5;
  --bg-hover:#eaedf1;

  --text:#0f172a;
  --text-muted:#526079;
  --text-light:#9aa3b2;

  --accent:#245bff;
  --accent-hover:#1d48cc;
  --accent-subtle:rgba(36,91,255,.08);
  --accent-mid:rgba(36,91,255,.18);

  --success:#15803d;
  --success-bg:rgba(21,128,61,.08);
  --success-border:rgba(21,128,61,.22);

  --danger:#dc2626;
  --danger-bg:rgba(220,38,38,.08);
  --danger-border:rgba(220,38,38,.22);

  --border:rgba(15,23,42,.10);
  --border-strong:rgba(15,23,42,.16);

  --sh1:0 1px 0 rgba(15,23,42,.04);
  --sh2:0 10px 26px rgba(15,23,42,.08);
  --sh3:0 18px 44px rgba(15,23,42,.12);
  --sh4:0 34px 88px rgba(15,23,42,.18);

  --r-xs:6px;
  --r:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:28px;
  --r-full:9999px;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:80px;--s10:96px;

  --font-body:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;
  --font-heading:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Fira Code',monospace;

  --lh-tight:1.08;
  --lh-snug:1.28;
  --lh-base:1.6;
  --lh-loose:1.78;

  --d1:120ms;
  --d2:220ms;
  --d3:360ms;

  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(0,0,.2,1);

  --max-w:1180px;
  --nav-h:60px;

  --ring:0 0 0 4px var(--accent-subtle);
  --hairline:inset 0 1px 0 rgba(255,255,255,.75);
  --card-grad:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,1));
}

[data-theme="dark"]{
  --bg:#0b0d12;
  --bg-card:#121622;
  --bg-subtle:#181e2b;
  --bg-hover:#1f2736;

  --text:#eef2ff;
  --text-muted:#a9b4cc;
  --text-light:#51607a;

  --accent:#5b8cff;
  --accent-hover:#79a3ff;
  --accent-subtle:rgba(91,140,255,.12);
  --accent-mid:rgba(91,140,255,.24);

  --success:#22c55e;
  --success-bg:rgba(34,197,94,.10);
  --success-border:rgba(34,197,94,.26);

  --danger:#fb7185;
  --danger-bg:rgba(251,113,133,.10);
  --danger-border:rgba(251,113,133,.26);

  --border:rgba(238,242,255,.08);
  --border-strong:rgba(238,242,255,.14);

  --sh1:0 1px 0 rgba(0,0,0,.35);
  --sh2:0 14px 32px rgba(0,0,0,.42);
  --sh3:0 22px 56px rgba(0,0,0,.55);
  --sh4:0 40px 110px rgba(0,0,0,.70);

  --hairline:inset 0 1px 0 rgba(255,255,255,.06);
  --card-grad:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0d12;
    --bg-card:#121622;
    --bg-subtle:#181e2b;
    --bg-hover:#1f2736;

    --text:#eef2ff;
    --text-muted:#a9b4cc;
    --text-light:#51607a;

    --accent:#5b8cff;
    --accent-hover:#79a3ff;
    --accent-subtle:rgba(91,140,255,.12);
    --accent-mid:rgba(91,140,255,.24);

    --success:#22c55e;
    --success-bg:rgba(34,197,94,.10);
    --success-border:rgba(34,197,94,.26);

    --danger:#fb7185;
    --danger-bg:rgba(251,113,133,.10);
    --danger-border:rgba(251,113,133,.26);

    --border:rgba(238,242,255,.08);
    --border-strong:rgba(238,242,255,.14);

    --sh1:0 1px 0 rgba(0,0,0,.35);
    --sh2:0 14px 32px rgba(0,0,0,.42);
    --sh3:0 22px 56px rgba(0,0,0,.55);
    --sh4:0 40px 110px rgba(0,0,0,.70);

    --hairline:inset 0 1px 0 rgba(255,255,255,.06);
    --card-grad:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;animation-iteration-count:1!important;}
  .hero__scroll{display:none!important;}
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:420;
  line-height:var(--lh-loose);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 12% -8%, var(--accent-subtle), transparent 58%),
    radial-gradient(900px 520px at 112% 8%, color-mix(in srgb,var(--accent-subtle) 70%, transparent), transparent 60%),
    var(--bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--d2) var(--ease),color var(--d2) var(--ease);
}

img{display:block;max-width:100%;height:auto;}
ul,ol{list-style:none;}
button{cursor:pointer;font-family:inherit;background:none;border:none;}
a{color:var(--accent);text-decoration:none;transition:color var(--d1) var(--ease),opacity var(--d1) var(--ease),transform var(--d1) var(--ease);}
a:hover{color:var(--accent-hover);}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs);}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:860;
  line-height:var(--lh-tight);
  color:var(--text);
  letter-spacing:-.04em;
}
h1{font-size:clamp(2.1rem,4.8vw,3.4rem);font-weight:920;}
h2{font-size:clamp(1.45rem,3.1vw,2.05rem);}
h3{font-size:clamp(1.08rem,2.05vw,1.34rem);letter-spacing:-.03em;}
h4{font-size:1rem;font-weight:740;letter-spacing:-.015em;}

p{margin-bottom:1em;}
p:last-child{margin-bottom:0;}
small{font-size:.8125rem;color:var(--text-muted);}

.mono{font-family:var(--font-mono);}
.label{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.container{width:min(var(--max-w),100% - 3rem);margin-inline:auto;}
main{flex:1;}
.section{padding-block:var(--s10);}
.section--sm{padding-block:var(--s8);}

.nav{
  position:sticky;
  top:0;
  z-index:200;
  height:var(--nav-h);
  background:color-mix(in srgb,var(--bg) 72%, transparent);
  backdrop-filter:blur(22px) saturate(175%);
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  border-bottom:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  transition:background var(--d2) var(--ease),border-color var(--d2) var(--ease);
}

.nav__inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s6);
}

.nav__logo{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  color:var(--text);
  text-decoration:none;
  line-height:1;
  height:var(--nav-h);
  padding:6px 0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease);
}
.nav__logo::before,.nav__logo::after{content:none!important;}
.nav__logo:hover{opacity:.75;transform:translateY(-1px);}
.nav__logo:active{opacity:.62;transform:translateY(0);}
.nav__logo:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px;}

.nav__logo img,
img.nav__logo{
  height:calc(var(--nav-h) - 6px);
  width:auto;
  max-width:none;
  display:block;
  object-fit:contain;
  flex-shrink:0;
  box-shadow:none!important;
  filter:saturate(1.02) contrast(1.02);
  transition:transform var(--d2) var(--ease),opacity var(--d2) var(--ease);
}
.nav__logo:hover img,
.nav__logo:hover img.nav__logo{transform:scale(1.02);opacity:.96;}

.nav__logo span{
  color:var(--text);
  font-weight:920;
  letter-spacing:-.055em;
  position:relative;
  padding-bottom:2px;
}
.nav__logo span::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-3px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;
  transform:translateY(2px);
  transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease);
}
.nav__logo:hover span::after{opacity:1;transform:translateY(0);}

.nav__links{display:flex;align-items:center;gap:6px;}

.nav__link{
  font-size:.82rem;
  font-weight:650;
  color:color-mix(in srgb,var(--text-muted) 92%, transparent);
  padding:10px 12px;
  border-radius:999px;
  transition:color var(--d1) var(--ease),background var(--d1) var(--ease),transform var(--d1) var(--ease),border-color var(--d1) var(--ease);
  position:relative;
  border:1px solid transparent;
}
.nav__link::after{display:none;}
.nav__link:hover{
  color:var(--text);
  background:color-mix(in srgb,var(--bg-subtle) 80%, transparent);
  border-color:color-mix(in srgb,var(--border) 70%, transparent);
  transform:translateY(-1px);
}
.nav__link:active{transform:translateY(0);}
.nav__link.active{
  color:var(--text);
  background:color-mix(in srgb,var(--accent-subtle) 75%, transparent);
  border-color:var(--accent-mid);
}

.nav__actions{display:flex;align-items:center;gap:10px;}

.theme-toggle{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:color-mix(in srgb,var(--bg-card) 70%, transparent);
  color:var(--text-muted);
  font-size:.78rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color var(--d1) var(--ease),color var(--d1) var(--ease),background var(--d1) var(--ease),transform var(--d1) var(--ease);
  line-height:1;
  box-shadow:none;
}
.theme-toggle:hover{
  border-color:var(--accent-mid);
  color:var(--accent);
  background:var(--accent-subtle);
  transform:translateY(-1px);
}
.theme-toggle:active{transform:translateY(0);}

.nav__hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:36px;
  height:36px;
  padding:8px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:transparent;
  box-shadow:none;
}
.nav__hamburger:hover{background:color-mix(in srgb,var(--bg-subtle) 80%, transparent);}
.nav__hamburger span{
  display:block;
  height:1.8px;
  width:100%;
  background:color-mix(in srgb,var(--text) 88%, transparent);
  border-radius:2px;
  transition:all var(--d2) var(--ease);
}

@media (max-width:720px){
  .nav__hamburger{
    display:flex;
  }

  .nav__links{
    position:fixed;
    top:0;
    left:0;
    right:0;
    padding:14px 16px 18px;
    background:color-mix(in srgb,var(--bg-card) 96%, transparent);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    transform:translateY(-100%);
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    z-index:9999;
    box-shadow:var(--sh3);
    backdrop-filter:blur(18px) saturate(165%);
    -webkit-backdrop-filter:blur(18px) saturate(165%);
    border-bottom-left-radius:18px;
    border-bottom-right-radius:18px;
    transition:
      transform var(--d3) var(--ease-out),
      opacity var(--d2) var(--ease),
      visibility 0s linear var(--d3);
  }

  .nav__links.open{
    transform:translateY(var(--nav-h));
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:
      transform var(--d3) var(--ease-out),
      opacity var(--d2) var(--ease),
      visibility 0s linear 0s;
  }

  .nav__link{
    padding:12px 14px;
    font-size:.95rem;
    border-radius:14px;
  }
}
.hero{
  padding-top:clamp(var(--s9),11vw,140px);
  padding-bottom:clamp(var(--s8),9vw,120px);
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  top:-32%;
  right:-14%;
  width:56vmax;
  height:56vmax;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent-subtle) 0%, transparent 62%);
  pointer-events:none;
}

.hero > .container{position:relative;z-index:1;}

.hero__label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--s5);
  padding:7px 12px;
  background:color-mix(in srgb,var(--accent-subtle) 90%, transparent);
  border:1px solid color-mix(in srgb,var(--accent-mid) 85%, transparent);
  border-radius:999px;
}

.hero__label::before{display:none;}
.hero__label .label{color:var(--accent);}

.hero__title{
  font-size:clamp(2.6rem,6.6vw,5.15rem);
  font-weight:950;
  line-height:1.0;
  letter-spacing:-.05em;
  margin-bottom:var(--s5);
  max-width:16ch;
}
.hero__title em{font-style:normal;color:var(--accent);display:block;}

.hero__sub{
  font-size:clamp(.98rem,1.65vw,1.18rem);
  color:var(--text-muted);
  max-width:56ch;
  margin-bottom:var(--s7);
  font-weight:460;
  line-height:var(--lh-loose);
}

.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

.hero__scroll{
  position:absolute;
  bottom:var(--s6);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:color-mix(in srgb,var(--text-light) 95%, transparent);
  font-family:var(--font-mono);
  font-size:.56rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  animation:heroScroll 2.2s var(--ease) infinite;
  pointer-events:none;
  user-select:none;
}
.hero__scroll::after{content:"";width:1px;height:30px;background:currentColor;display:block;}
@keyframes heroScroll{
  0%,100%{transform:translateX(-50%) translateY(0);}
  60%{transform:translateX(-50%) translateY(8px);}
}

@media (max-width:720px){
  .hero{
    padding-bottom:clamp(110px, 24vw, 150px);
  }

  .hero__scroll{
    bottom:14px;
  }
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:.89rem;
  font-weight:760;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
  padding:.72rem 1.18rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease),transform var(--d1) var(--ease),box-shadow var(--d1) var(--ease);
}
.btn:active{transform:scale(.98);}

.btn--primary{
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 88%, #ffffff 12%), var(--accent));
  color:#fff;
  border-color:color-mix(in srgb,var(--accent) 82%, transparent);
  box-shadow:0 12px 26px rgba(36,91,255,.22);
}
.btn--primary:hover{
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent-hover) 88%, #ffffff 12%), var(--accent-hover));
  border-color:color-mix(in srgb,var(--accent-hover) 82%, transparent);
  box-shadow:0 16px 34px rgba(36,91,255,.26);
  transform:translateY(-1px);
}
.btn--primary:active{transform:translateY(0) scale(.985);}

.btn--outline{
  background:color-mix(in srgb,var(--bg-card) 78%, transparent);
  color:var(--text);
  border-color:color-mix(in srgb,var(--border-strong) 85%, transparent);
  box-shadow:none;
}
.btn--outline:hover{
  background:color-mix(in srgb,var(--bg-subtle) 88%, transparent);
  border-color:color-mix(in srgb,var(--border-strong) 95%, transparent);
  transform:translateY(-1px);
}
.btn--outline:active{transform:translateY(0);}

.btn--sm{font-size:.82rem;padding:.54rem .92rem;}

.btn--danger{
  background:linear-gradient(180deg, color-mix(in srgb,var(--danger) 88%, #ffffff 12%), var(--danger));
  color:#fff;
  border-color:color-mix(in srgb,var(--danger) 82%, transparent);
  box-shadow:0 12px 26px rgba(220,38,38,.22);
}
.btn--danger:hover{box-shadow:0 16px 34px rgba(220,38,38,.26);transform:translateY(-1px);}
.btn--danger:active{transform:translateY(0) scale(.985);}

.card{
  background:var(--card-grad);
  border:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  border-radius:var(--r-xl);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease),transform var(--d2) var(--ease);
  box-shadow:none;
}
.card:hover{
  border-color:color-mix(in srgb,var(--border-strong) 90%, transparent);
  box-shadow:var(--sh3);
  transform:translateY(-6px);
}

.card__img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--bg-subtle);
  flex-shrink:0;
  transition:transform var(--d3) var(--ease),filter var(--d3) var(--ease);
}
.card:hover .card__img{transform:scale(1.045);filter:saturate(1.02) contrast(1.02);}

.card__img-placeholder{
  width:100%;
  aspect-ratio:16/9;
  background:var(--bg-subtle);
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:.6875rem;
  color:var(--text-light);
  letter-spacing:.12em;
  text-transform:uppercase;
  flex-shrink:0;
}

.card__body{
  padding:22px 22px 18px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.card__title{
  font-size:1.08rem;
  margin-bottom:10px;
  line-height:var(--lh-snug);
}
.card__title a{color:var(--text);}
.card__title a:hover{color:var(--accent);}

.card__desc{
  color:var(--text-muted);
  font-size:.9rem;
  line-height:var(--lh-loose);
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:16px;
}

.card__footer{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 22px 18px;
  background:transparent;
  border-top:1px solid color-mix(in srgb,var(--border) 70%, transparent);
  flex-shrink:0;
}

.tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.67rem;
  font-weight:650;
  line-height:1;
  padding:.30rem .62rem;
  border-radius:999px;
  background:transparent;
  color:var(--text-muted);
  border:1px solid color-mix(in srgb,var(--border-strong) 85%, transparent);
  letter-spacing:.03em;
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease),transform var(--d1) var(--ease);
}
.tag:hover,
.tag.active{
  background:var(--accent-subtle);
  color:var(--accent);
  border-color:var(--accent-mid);
  transform:translateY(-1px);
}
.tag:active{transform:translateY(0);}

.grid--3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:22px;}
.grid--2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:32px;}

.section-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s5);
  margin-bottom:var(--s7);
}
.section-header__eyebrow{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}

.divider{height:1px;background:color-mix(in srgb,var(--border) 80%, transparent);border:none;margin-block:var(--s7);}

.about-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:40px;
  align-items:start;
}

.about-avatar{
  width:clamp(170px,14vw,240px);
  aspect-ratio:3/4;
  height:auto;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:transparent;
  
  position:relative;
  flex-shrink:0;
  box-shadow:none !important;
}

.about-avatar::after{display:none;}

.about-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
  box-shadow:none !important;
  filter:none;
}

.skills-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:var(--s5);
}

.skill-item{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:650;
  padding:.34rem .80rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--bg-card) 78%, transparent);
  color:var(--text-muted);
  border:1px solid color-mix(in srgb,var(--border-strong) 85%, transparent);
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease),transform var(--d1) var(--ease);
  white-space:nowrap;
}
.skill-item:hover{
  background:var(--accent-subtle);
  color:var(--accent);
  border-color:var(--accent-mid);
  transform:translateY(-1px);
}
.skill-item:active{transform:translateY(0);}

@media (max-width:720px){
  .about-grid{grid-template-columns:1fr;gap:var(--s6);}
  .about-avatar{max-width:160px;}
}

.project-hero{
  padding:var(--s8) 0;
  background:
    radial-gradient(760px 340px at 12% 0%, var(--accent-subtle), transparent 58%),
    var(--bg-subtle);
  border-bottom:1px solid color-mix(in srgb,var(--border) 80%, transparent);
}

.project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s5);
  align-items:center;
  margin-bottom:var(--s5);
}
.project-meta__item{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.69rem;
  color:var(--text-muted);
  letter-spacing:.06em;
}
.project-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5);}

.project-content{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:56px;
  align-items:start;
  padding:var(--s8) 0;
}
.project-body{font-size:1rem;line-height:var(--lh-loose);min-width:0;}
.project-body p{color:var(--text-muted);}
.project-body h2,.project-body h3{margin-top:var(--s6);margin-bottom:var(--s3);}
.project-body ul,.project-body ol{list-style:initial;padding-left:var(--s5);margin-bottom:var(--s4);color:var(--text-muted);}

.project-body code{
  font-family:var(--font-mono);
  font-size:.875em;
  background:color-mix(in srgb,var(--bg-subtle) 90%, transparent);
  border:1px solid color-mix(in srgb,var(--border-strong) 85%, transparent);
  padding:.16em .48em;
  border-radius:10px;
  color:var(--accent);
}

.project-body pre{
  background:color-mix(in srgb,var(--bg-subtle) 92%, transparent);
  border:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  border-radius:var(--r-lg);
  padding:22px;
  overflow-x:auto;
  margin-block:var(--s5);
  box-shadow:none;
}
.project-body pre code{background:none;border:none;padding:0;color:inherit;}

.project-sidebar{position:sticky;top:calc(var(--nav-h) + var(--s4));}
.sidebar-box{
  background:var(--card-grad);
  border:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  border-radius:var(--r-lg);
  padding:18px;
  margin-bottom:12px;
  box-shadow:none;
}
.sidebar-box__title{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 80%, transparent);
}

@media (max-width:900px){
  .project-content{grid-template-columns:1fr;}
  .project-sidebar{position:static;}
}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
  margin-block:var(--s5);
}

.gallery__item{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  aspect-ratio:4/3;
  background:var(--bg-subtle);
  cursor:zoom-in;
  box-shadow:none;
  transition:transform var(--d2) var(--ease),border-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease);
}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--d3) var(--ease),filter var(--d3) var(--ease);}
.gallery__item:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--border-strong) 90%, transparent);
  box-shadow:var(--sh2);
}
.gallery__item:hover img{transform:scale(1.06);filter:saturate(1.03) contrast(1.02);}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s6);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--d2) var(--ease);
}
.lightbox.active{opacity:1;pointer-events:all;}
.lightbox img{max-width:90vw;max-height:88vh;object-fit:contain;border-radius:var(--r-lg);box-shadow:0 55px 140px rgba(0,0,0,.80);}
.lightbox__close{
  position:absolute;
  top:var(--s5);
  right:var(--s5);
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--d1) var(--ease),transform var(--d1) var(--ease);
}
.lightbox__close:hover{background:rgba(255,255,255,.18);transform:translateY(-1px);}
.lightbox__close:active{transform:translateY(0);}

.form-group{margin-bottom:var(--s5);}
.form-label{
  display:block;
  font-size:.82rem;
  font-weight:760;
  letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:10px;
}

.form-input,
.form-textarea,
.form-select{
  width:100%;
  background:color-mix(in srgb,var(--bg-card) 86%, transparent);
  border:1px solid color-mix(in srgb,var(--border-strong) 86%, transparent);
  border-radius:16px;
  padding:.78rem .95rem;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--text);
  line-height:1.5;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease),background var(--d1) var(--ease),transform var(--d1) var(--ease);
  box-shadow:none;
}
.form-input::placeholder,.form-textarea::placeholder{color:color-mix(in srgb,var(--text-light) 88%, transparent);}
.form-input:hover,.form-textarea:hover,.form-select:hover{
  border-color:color-mix(in srgb,var(--border-strong) 96%, transparent);
  background:color-mix(in srgb,var(--bg-card) 92%, transparent);
}
.form-input:focus,.form-textarea:focus,.form-select:focus{
  border-color:var(--accent-mid);
  box-shadow:var(--ring);
}
.form-textarea{min-height:140px;resize:vertical;line-height:var(--lh-loose);}
.form-error{display:block;font-size:.82rem;color:var(--danger);margin-top:8px;font-weight:700;}
.form-hint{display:block;font-size:.82rem;color:var(--text-muted);margin-top:8px;}

.alert{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid;
  margin-bottom:var(--s5);
  font-size:.9rem;
  line-height:var(--lh-base);
  box-shadow:none;
}
.alert--success{background:var(--success-bg);border-color:var(--success-border);color:var(--success);}
.alert--error{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger);}
.alert--info{background:var(--accent-subtle);border-color:var(--accent-mid);color:var(--accent);}

.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--s10);align-items:start;}
@media (max-width:720px){.contact-grid{grid-template-columns:1fr;gap:var(--s7);}}

.contact-info__item{display:flex;align-items:flex-start;gap:16px;margin-bottom:var(--s5);}
.contact-info__icon{
  width:42px;
  height:42px;
  border-radius:16px;
  background:color-mix(in srgb,var(--bg-subtle) 88%, transparent);
  border:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  flex-shrink:0;
  box-shadow:none;
}

.footer{
  border-top:1px solid color-mix(in srgb,var(--border) 80%, transparent);
  padding-block:var(--s6);
}
.footer__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);}
.footer__copy{font-family:var(--font-mono);font-size:.685rem;color:var(--text-muted);letter-spacing:.04em;}
.footer__links{display:flex;gap:var(--s5);}
.footer__link{font-family:var(--font-mono);font-size:.685rem;color:var(--text-muted);letter-spacing:.04em;transition:color var(--d1) var(--ease),opacity var(--d1) var(--ease);}
.footer__link:hover{color:var(--text);opacity:.95;}

.admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh;}

.admin-sidebar{
  background:color-mix(in srgb,var(--bg-card) 92%, transparent);
  border-right:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  padding:22px 16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.admin-sidebar__logo{
  font-size:.98rem;
  font-weight:900;
  letter-spacing:-.04em;
  color:var(--text);
  display:block;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 80%, transparent);
  text-decoration:none;
}
.admin-sidebar__logo span{color:var(--accent);}

.admin-nav__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  font-size:.82rem;
  font-weight:720;
  color:var(--text-muted);
  text-decoration:none;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),transform var(--d1) var(--ease),border-color var(--d1) var(--ease);
  margin-bottom:6px;
  border:1px solid transparent;
}
.admin-nav__item:hover{
  background:color-mix(in srgb,var(--bg-subtle) 86%, transparent);
  color:var(--text);
  border-color:color-mix(in srgb,var(--border) 75%, transparent);
  transform:translateY(-1px);
}
.admin-nav__item:active{transform:translateY(0);}
.admin-nav__item.active{
  background:var(--accent-subtle);
  color:var(--accent);
  border-color:var(--accent-mid);
}

.admin-main{padding:var(--s6) var(--s7);min-width:0;overflow-x:hidden;}

.admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  margin-bottom:var(--s7);
  padding-bottom:18px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 80%, transparent);
}
.admin-header h1{font-size:1.58rem;letter-spacing:-.045em;}

.admin-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.admin-table th{
  text-align:left;
  padding:10px 14px;
  font-size:.675rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  border-bottom:1px solid color-mix(in srgb,var(--border-strong) 80%, transparent);
  background:color-mix(in srgb,var(--bg-subtle) 86%, transparent);
  white-space:nowrap;
}
.admin-table td{
  padding:.86rem 14px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 80%, transparent);
  color:var(--text);
  vertical-align:middle;
}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tbody tr{transition:background var(--d1) var(--ease);}
.admin-table tbody tr:hover td{background:color-mix(in srgb,var(--bg-subtle) 70%, transparent);}

.status-badge{
  display:inline-block;
  padding:.28rem .56rem;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1;
}
.status-badge--published{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border);}
.status-badge--draft{background:color-mix(in srgb,var(--bg-subtle) 86%, transparent);color:var(--text-muted);border:1px solid color-mix(in srgb,var(--border-strong) 85%, transparent);}

.admin-card{
  background:var(--card-grad);
  border:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  border-radius:var(--r-xl);
  padding:18px;
  margin-bottom:14px;
  box-shadow:none;
}
.admin-card__title{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 80%, transparent);
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
  margin-bottom:var(--s6);
}
.stat-card{
  background:var(--card-grad);
  border:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  border-radius:var(--r-xl);
  padding:18px 14px;
  text-align:center;
  transition:transform var(--d2) var(--ease),border-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease);
  box-shadow:none;
}
.stat-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--border-strong) 90%, transparent);
  box-shadow:var(--sh2);
}
.stat-card__value{
  font-size:2.45rem;
  font-weight:980;
  letter-spacing:-.06em;
  line-height:1;
  color:var(--text);
  margin-bottom:10px;
  display:block;
}
.stat-card__label{
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}

@media (max-width:900px){
  .admin-layout{grid-template-columns:1fr;}
  .admin-sidebar{
    position:static;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    border-right:none;
    border-bottom:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  }
  .admin-sidebar__logo{padding:0;margin:0;border:none;}
  .admin-main{padding:var(--s5) var(--s4);}
}

.search-bar{display:flex;gap:10px;margin-bottom:var(--s6);align-items:center;flex-wrap:wrap;}
.search-bar input{flex:1;min-width:180px;}

.filter-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s6);}

.pagination{display:flex;justify-content:center;gap:6px;margin-top:var(--s8);flex-wrap:wrap;}
.pagination__item{
  font-family:var(--font-mono);
  font-size:.685rem;
  font-weight:700;
  padding:.50rem .86rem;
  border:1px solid color-mix(in srgb,var(--border-strong) 85%, transparent);
  border-radius:999px;
  color:var(--text-muted);
  background:color-mix(in srgb,var(--bg-card) 78%, transparent);
  text-decoration:none;
  line-height:1;
  transition:all var(--d1) var(--ease);
}
.pagination__item:hover,
.pagination__item.active{
  background:var(--accent-subtle);
  border-color:var(--accent-mid);
  color:var(--accent);
  transform:translateY(-1px);
}
.pagination__item:active{transform:translateY(0);}

.empty-state{text-align:center;padding:var(--s10) var(--s6);color:var(--text-muted);}
.empty-state__icon{font-size:2rem;margin-bottom:var(--s4);opacity:.16;display:block;}
.empty-state__text{font-family:var(--font-mono);font-size:.9rem;}

.hp-field{display:none!important;visibility:hidden!important;}

.text-center{text-align:center;}
.text-muted{color:var(--text-muted);}
.mt-1{margin-top:var(--s1);} .mt-2{margin-top:var(--s3);}
.mt-3{margin-top:var(--s4);} .mt-4{margin-top:var(--s5);}
.mb-1{margin-bottom:var(--s1);} .mb-2{margin-bottom:var(--s3);}
.mb-3{margin-bottom:var(--s4);} .mb-4{margin-bottom:var(--s5);}
.flex{display:flex;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.gap-1{gap:var(--s2);}
.gap-2{gap:var(--s4);}
.w-full{width:100%;}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
.animate-fadeUp{animation:fadeUp .45s var(--ease-out) both;}
.animate-fadeUp--1{animation-delay:.06s;}
.animate-fadeUp--2{animation-delay:.12s;}
.animate-fadeUp--3{animation-delay:.18s;}
.animate-fadeUp--4{animation-delay:.24s;}

.admin-login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(1000px 500px at 20% 0%, var(--accent-subtle), transparent 58%),
    var(--bg);
  padding:var(--s6);
}
.admin-login-box{
  background:var(--card-grad);
  border:1px solid color-mix(in srgb,var(--border) 85%, transparent);
  border-radius:var(--r-xl);
  padding:var(--s7);
  width:min(420px,100%);
  box-shadow:var(--sh4);
}
.admin-login-box__logo{text-align:center;margin-bottom:var(--s6);}

.form-file{
  display:block;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--text-muted);
  padding:var(--s2) 0;
  cursor:pointer;
}
.form-file::file-selector-button{
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:760;
  padding:.46rem .86rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--border-strong) 85%, transparent);
  background:color-mix(in srgb,var(--bg-subtle) 86%, transparent);
  color:var(--text);
  cursor:pointer;
  margin-right:var(--s3);
  transition:all var(--d1) var(--ease);
}
.form-file::file-selector-button:hover{
  background:color-mix(in srgb,var(--bg-hover) 88%, transparent);
  border-color:color-mix(in srgb,var(--border-strong) 95%, transparent);
  transform:translateY(-1px);
}
.form-file::file-selector-button:active{transform:translateY(0);}

.reviews{
  overflow:hidden;
  position:relative;
    cursor:pointer;
  padding:var(--s5) 0;
}
.reviews::before,
.reviews::after{
  content:'';
  position:absolute;
  top:0;bottom:0;
  width:120px;
  z-index:2;
  pointer-events:none;
}
.reviews::before{
  left:0;
  background:linear-gradient(to right, var(--bg-subtle), transparent);
}
.reviews::after{
  right:0;
  background:linear-gradient(to left, var(--bg-subtle), transparent);
}
.reviews__track{
  display:flex;
  gap:var(--s5);
  width:max-content;
  animation:reviewsScroll 18s linear infinite;
}
.reviews__track:hover{
  animation-play-state:paused;
}
@keyframes reviewsScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.review-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s5) var(--s6);
  width:320px;
  flex-shrink:0;
  cursor:pointer;
  pointer-events:auto;   
  user-select:none;
  transition:border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease), transform var(--d1) var(--ease);
  position:relative;
}
.review-card:hover{
  border-color:var(--border-strong);
  box-shadow:var(--sh2);
  transform:translateY(-2px);
}
.review-card__stars{
  display:flex;
  gap:2px;
  margin-bottom:var(--s3);
  color:#f59e0b;
  font-size:.9rem;
}
.review-card__text{
  font-size:.9rem;
  line-height:1.7;
  color:var(--text-muted);
  font-weight:300;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:var(--s4);
}
.review-card__author{
  display:flex;
  align-items:center;
  gap:var(--s3);
}
.review-card__avatar{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--accent-subtle);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;
  font-weight:700;
  color:var(--accent);
  flex-shrink:0;
  overflow:hidden;
  border:1px solid var(--border);
}
.review-card__avatar img{
  width:100%;height:100%;
  object-fit:contain;
  padding:4px;
  border-radius:50%;
}
.review-card__name{
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
}
.review-card__role{
  font-size:.78rem;
  color:var(--text-light);
  font-family:var(--font-mono);
}


.review-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:900;
  align-items:center;
  justify-content:center;
  padding:var(--s5);
  backdrop-filter:blur(4px);
}
.review-modal-overlay.active{
  display:flex;
}
.review-modal{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--s7);
  width:min(560px,100%);
  position:relative;
  box-shadow:var(--sh4);
  max-height:85vh;
  overflow-y:auto;
}
.review-modal__close{
  position:absolute;
  top:var(--s4);right:var(--s4);
  background:none;border:none;
  font-size:1.4rem;
  color:var(--text-muted);
  cursor:pointer;
  line-height:1;
  padding:var(--s2);
  border-radius:var(--r-xs);
  transition:color var(--d1) var(--ease);
}
.review-modal__close:hover{color:var(--text);}
.review-modal__stars{
  display:flex;gap:3px;
  color:#f59e0b;
  font-size:1.1rem;
  margin-bottom:var(--s4);
}
.review-modal__text{
  font-size:1rem;
  line-height:1.85;
  color:var(--text-muted);
  font-weight:300;
  margin-bottom:var(--s5);
}
.review-modal__author{
  display:flex;align-items:center;gap:var(--s3);
  border-top:1px solid var(--border);
  padding-top:var(--s4);
}
.review-modal__avatar{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--accent-subtle);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;
  color:var(--accent);flex-shrink:0;
  overflow:hidden;
  border:1px solid var(--border);
}
.review-modal__avatar img{
  width:100%;height:100%;
  object-fit:contain;
  padding:5px;
  border-radius:50%;
}
.review-modal__name{
  font-size:.95rem;font-weight:600;color:var(--text);
}
.review-modal__role{
  font-size:.82rem;color:var(--text-light);font-family:var(--font-mono);
}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:color-mix(in srgb,var(--bg) 82%, transparent)}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--text) 18%, transparent);
  border:3px solid color-mix(in srgb,var(--bg) 82%, transparent);
  border-radius:999px
}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text) 28%, transparent)}
::-webkit-scrollbar-corner{background:transparent}

*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 22%, transparent) color-mix(in srgb,var(--bg) 82%, transparent)}