body {
  font-family: "Source Sans 3", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(194, 106, 61, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(31, 58, 52, 0.1), transparent 24%),
    linear-gradient(180deg, #f8f5ef 0%, #f3efe7 42%, #fcfbf8 100%);
  color: #111827;
  transition: background 250ms ease, color 250ms ease;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

html {
  scrollbar-gutter: stable;
}

::selection {
  background: rgba(194, 106, 61, 0.22);
  color: #111827;
}

html.dark ::selection {
  background: rgba(246, 200, 176, 0.2);
  color: #f8fafc;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(31, 58, 52, 0.24);
}

html.dark body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(194, 106, 61, 0.08), rgba(31, 58, 52, 0.04));
}

.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #c26a3d, #1f3a34 70%);
  box-shadow: 0 0 18px rgba(194, 106, 61, 0.3);
  transform-origin: left center;
  transition: width 140ms ease-out;
}

html.dark .scroll-progress {
  background: linear-gradient(90deg, rgba(246, 200, 176, 0.06), rgba(59, 130, 246, 0.04));
}

html.dark .scroll-progress__bar {
  background: linear-gradient(90deg, #f6c8b0, #60a5fa 70%);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.25);
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

html.dark body {
  background:
    radial-gradient(circle at top left, rgba(194, 106, 61, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 24%),
    linear-gradient(180deg, #0f172a 0%, #111827 45%, #0b1120 100%);
  color: #e5e7eb;
}

.font-display {
  font-family: "Space Grotesk", sans-serif;
}

.brand-signature {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  letter-spacing: -0.045em;
  text-rendering: geometricPrecision;
}

.brand-anchor {
  min-width: 0;
}

.nav-profile-chip {
  width: 0;
  height: 0;
  opacity: 0;
  transform: scale(0.72);
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
  transition:
    width 240ms ease,
    height 240ms ease,
    opacity 180ms ease,
    transform 240ms ease,
    margin-right 240ms ease;
}

.nav-profile-chip__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

.nav-profile-chip.is-visible {
  width: 2.4rem;
  height: 2.4rem;
  opacity: 1;
  transform: scale(1);
}


.text-ink {
  color: #111827;
}

.text-accent {
  color: #c26a3d;
}

.typing-text {
  display: inline-flex;
  align-items: center;
  min-height: 1em;
}

.typing-text::after {
  content: "";
  width: 2px;
  height: 0.95em;
  margin-left: 0.22rem;
  background: currentColor;
  animation: blink-caret 0.9s steps(1) infinite;
}

@keyframes blink-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.text-pine {
  color: #1f3a34;
}

.bg-pine {
  background-color: #1f3a34;
}

.shadow-soft {
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.08);
}

.border-ink\/15 {
  border-color: rgba(17, 24, 39, 0.15);
}

.section-shell {
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease,
    background-color 260ms ease;
}

html.dark .section-shell {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
}

.surface-card {
  background: rgba(255, 255, 255, 0.92);
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 260ms ease,
    border-color 260ms ease;
}

html.dark .surface-card {
  background: rgba(15, 23, 42, 0.94);
}

.soft-panel {
  background: #f8f5ef;
}

html.dark .soft-panel {
  background: rgba(30, 41, 59, 0.88);
}

.theme-chip {
  background: #f4ece0;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 220ms ease;
}

html.dark .theme-chip {
  background: rgba(51, 65, 85, 0.9);
  color: #dbe4f0;
}

html.dark nav {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.78);
}

nav {
  transition:
    background-color 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    transform 260ms ease;
}

nav.is-scrolled {
  box-shadow: 0 14px 38px rgba(17, 24, 39, 0.08);
}

html.dark nav.is-scrolled {
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.34);
}

html.dark .text-ink,
html.dark h1,
html.dark h2,
html.dark h3 {
  color: #f8fafc;
}

html.dark .text-gray-700 {
  color: #cbd5e1;
}

html.dark .text-gray-600,
html.dark .text-gray-500 {
  color: #94a3b8;
}

html.dark .text-pine {
  color: #d7e6df;
}

html.dark .bg-white,
html.dark .bg-white\/10,
html.dark .bg-white\/80,
html.dark .bg-white\/95 {
  background-color: rgba(15, 23, 42, 0.9) !important;
}

html.dark .border-black\/5,
html.dark .border-black\/10,
html.dark .border-ink\/15,
html.dark .border-white\/20 {
  border-color: rgba(148, 163, 184, 0.16);
}

html.dark footer {
  border-color: rgba(148, 163, 184, 0.12);
  background: linear-gradient(180deg, rgba(8, 15, 32, 0.92), rgba(10, 18, 36, 0.98));
  color: #aebed3;
}

.footer-panel {
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.footer-link {
  transition: color 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-link--icon,
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.social-icon svg {
  width: 100%;
  height: 100%;
}

.footer-link:hover {
  color: #c26a3d;
  transform: translateX(2px);
}

.more-menu-link {
  color: #374151;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html.dark .more-menu-link {
  color: #e2e8f0;
}

html.dark .nav-profile-chip {
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.3);
}

html.dark .footer-panel {
  border-color: rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(28, 38, 61, 0.88), rgba(20, 29, 47, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark footer .text-ink,
html.dark footer h2,
html.dark footer h3 {
  color: #f8fafc;
}

html.dark footer .text-gray-700 {
  color: #d3dbe7;
}

html.dark footer .text-gray-600,
html.dark footer .text-gray-500 {
  color: #93a4bb;
}

html.dark footer .border-black\/5,
html.dark footer .border-ink\/15 {
  border-color: rgba(148, 163, 184, 0.16);
}

html.dark footer .bg-pine {
  background-color: #1d4b43;
}

html.dark footer .hover\:bg-ink:hover {
  background-color: #0f172a;
}

html.dark footer .footer-link {
  color: #dbe6f3;
}

html.dark footer .footer-link:hover {
  color: #f6c8b0;
}

html.dark footer a.rounded-full.border.border-ink\/15 {
  color: #e8eef7;
  background: rgba(255, 255, 255, 0.02);
}

html.dark footer a.rounded-full.border.border-ink\/15:hover {
  color: #f6c8b0;
  border-color: rgba(246, 200, 176, 0.55);
}

.theme-icon {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 180ms ease, opacity 180ms ease;
}

html.dark .theme-icon {
  transform: rotate(-28deg);
}

.hover\:bg-ink:hover {
  background-color: #111827;
}

.hover\:text-accent:hover {
  color: #c26a3d;
}

.hover\:border-accent:hover {
  border-color: #c26a3d;
}

.hover\:text-pine:hover {
  color: #1f3a34;
}

.hamburglar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  overflow: hidden;
  line-height: 1;
  vertical-align: middle;
}

.theme-ring-toggle .path-burger {
  opacity: 0;
}

.theme-ring-toggle .burger-ring {
  inset: 1px;
}

.theme-ring-toggle .theme-icon {
  position: relative;
  z-index: 1;
}

.burger-icon,
.burger-ring,
.path-burger,
.animate-path {
  position: absolute;
  inset: 0;
}

.burger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.burger-container {
  position: relative;
  width: 1.35rem;
  height: 0.9rem;
}

.burger-bun-top,
.burger-bun-bot,
.burger-filling {
  position: absolute;
  left: 0;
  display: block;
  width: 1.35rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.burger-bun-top {
  top: 0;
  transform-origin: calc(100% - 2px) 1px;
}

.burger-filling {
  top: 0.39rem;
}

.burger-bun-bot {
  bottom: 0;
  transform-origin: calc(100% - 2px) 1px;
}

.svg-ring {
  width: 100%;
  height: 100%;
}

.path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  stroke-linejoin: round;
}

.path-burger {
  -webkit-mask: url(#more-menu-mask);
  mask: url(#more-menu-mask);
}

#more-button {
  margin-left: 0.1rem;
}

nav .hamburglar > span {
  pointer-events: none;
}

.path-rotation {
  width: 50%;
  height: 50%;
  margin: 50% 50% 0 0;
  transform: rotate(0deg);
  transform-origin: 100% 0;
}

.path-rotation::before {
  content: "";
  display: block;
  width: calc(100% - 4px);
  height: 100%;
  margin-right: 4px;
  background: currentColor;
}

.hamburglar.is-open .path {
  animation: dash-in 0.6s linear forwards;
}

.hamburglar.is-closed .path {
  animation: dash-out 0.6s linear forwards;
}

.hamburglar.is-open .animate-path {
  animation: rotate-in 0.6s linear forwards;
}

.hamburglar.is-closed .animate-path {
  animation: rotate-out 0.6s linear forwards;
}

.hamburglar.is-open .burger-bun-top {
  animation: bun-top-in 0.6s linear forwards;
}

.hamburglar.is-open .burger-bun-bot {
  animation: bun-bot-in 0.6s linear forwards;
}

.hamburglar.is-closed .burger-bun-top {
  animation: bun-top-out 0.6s linear forwards;
}

.hamburglar.is-closed .burger-bun-bot {
  animation: bun-bot-out 0.6s linear forwards;
}

.hamburglar.is-open .burger-filling {
  animation: burger-fill-in 0.6s linear forwards;
}

.hamburglar.is-closed .burger-filling {
  animation: burger-fill-out 0.6s linear forwards;
}

@keyframes rotate-out {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-in {
  0% {
    transform: rotate(360deg);
  }
  40% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes dash-in {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash-out {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}

@keyframes bun-top-out {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(15deg);
  }
  80% {
    transform: translateX(-0.22rem) rotate(-60deg);
  }
  100% {
    transform: translateX(-0.22rem) translateY(1px) rotate(-45deg);
  }
}

@keyframes bun-bot-out {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  80% {
    transform: translateX(-0.22rem) rotate(60deg);
  }
  100% {
    transform: translateX(-0.22rem) rotate(45deg);
  }
}

@keyframes bun-top-in {
  0% {
    transform: translateX(-0.22rem) translateY(1px) rotate(-45deg);
  }
  20% {
    transform: translateX(-0.22rem) rotate(-60deg);
  }
  80% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes bun-bot-in {
  0% {
    transform: translateX(-0.22rem) rotate(45deg);
  }
  20% {
    transform: translateX(-0.22rem) rotate(60deg);
  }
  80% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes burger-fill-in {
  0% {
    width: 0;
    left: 1.35rem;
  }
  40% {
    width: 0;
    left: 1.5rem;
  }
  80% {
    width: 1.35rem;
    left: -0.25rem;
  }
  100% {
    width: 1.35rem;
    left: 0;
  }
}

@keyframes burger-fill-out {
  0% {
    width: 1.35rem;
    left: 0;
  }
  20% {
    width: 1.55rem;
    left: -0.25rem;
  }
  40% {
    width: 0;
    left: 1.5rem;
  }
  100% {
    width: 0;
    left: 1.35rem;
  }
}

.nav-link {
  position: relative;
  transition: color 180ms ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #c26a3d;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  opacity: 0.9;
}

.nav-link:hover::after,
.nav-link.text-accent::after {
  transform: scaleX(1);
}

.section-shell:hover,
.surface-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(17, 24, 39, 0.12);
}

html.dark .section-shell:hover,
html.dark .surface-card:hover {
  box-shadow: 0 24px 56px rgba(2, 6, 23, 0.34);
}

.theme-chip:hover {
  transform: translateY(-1px);
}

a.rounded-full,
button.rounded-full {
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

a.rounded-full:hover,
button.rounded-full:hover {
  transform: translateY(-1px);
}

a.rounded-full:active,
button.rounded-full:active {
  transform: translateY(0);
}

.profile-frame img {
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms ease,
    box-shadow 420ms ease;
}

.profile-frame:hover img {
  transform: scale(1.02);
  filter: saturate(1.04) contrast(1.02);
}

.profile-frame::after {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%);
  pointer-events: none;
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .profile-frame {
    transform: translateY(-5rem);
  }
}

.project-card {
  overflow: hidden;
}

.case-study-trigger[aria-expanded="true"] {
  border-color: #c26a3d;
  color: #c26a3d;
}

.project-preview {
  display: block;
  width: 100%;
  height: 14rem;
  margin-bottom: 1.25rem;
  border-radius: 1.35rem;
  object-fit: cover;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: linear-gradient(135deg, rgba(31, 58, 52, 0.1), rgba(194, 106, 61, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease,
    filter 320ms ease;
}

.project-card:hover .project-preview {
  transform: scale(1.022);
  filter: saturate(1.05);
  box-shadow: 0 18px 34px rgba(17, 24, 39, 0.12);
}

.certificate-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.certificate-trigger img {
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms ease,
    filter 260ms ease;
}

.certificate-trigger:hover img {
  transform: translateY(-4px) scale(1.01);
  filter: saturate(1.04);
  box-shadow: 0 18px 34px rgba(17, 24, 39, 0.12);
}

.case-study-modal,
.certificate-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.case-study-modal.hidden,
.certificate-lightbox.hidden {
  display: none;
}

.case-study-modal.is-open,
.certificate-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.case-study-modal__backdrop,
.certificate-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 240ms ease;
}

.case-study-modal__content,
.certificate-lightbox__content {
  position: relative;
  z-index: 1;
  width: min(100%, 64rem);
  max-height: calc(100vh - 3rem);
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.36);
  overflow-x: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition:
    opacity 240ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-study-modal__content {
  width: min(58rem, calc(100vw - 3rem));
  max-height: calc(100vh - 3rem);
  padding: 1.5rem;
  overflow-y: auto;
}

.case-study-modal.is-open .case-study-modal__backdrop,
.certificate-lightbox.is-open .certificate-lightbox__backdrop {
  opacity: 1;
}

.case-study-modal.is-open .case-study-modal__content,
.certificate-lightbox.is-open .certificate-lightbox__content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.case-study-modal__close,
.certificate-lightbox__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.case-study-modal__close:hover,
.case-study-modal__close:focus-visible {
  color: #c26a3d;
}

.certificate-lightbox__image {
  display: block;
  width: 100%;
  max-height: calc(100vh - 5rem);
  border-radius: 1rem;
  object-fit: contain;
  background: #ffffff;
}

html.dark .project-preview {
  border-color: rgba(148, 163, 184, 0.18);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.32));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark .case-study-trigger[aria-expanded="true"] {
  border-color: rgba(246, 200, 176, 0.55);
  color: #f6c8b0;
}

html.dark .case-study-modal__content,
html.dark .certificate-lightbox__content {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.35);
}

html.dark .case-study-modal__close,
html.dark .certificate-lightbox__close {
  background: #0f172a;
  color: #f8fafc;
}

.education-panel {
  position: relative;
  overflow: hidden;
  --education-progress: 0;
  --education-track-top: 1.75rem;
  --education-track-bottom: 1.75rem;
  --education-orb-size: 0.8rem;
}

.education-scroll {
  max-height: 32rem;
  overflow-y: auto;
  padding-right: 0.2rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.education-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.education-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.education-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(194, 106, 61, 0.35);
}

html.dark .education-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
}

.education-panel::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: var(--education-track-top);
  bottom: var(--education-track-bottom);
  width: 1px;
  background: linear-gradient(180deg, rgba(194, 106, 61, 0.45), rgba(194, 106, 61, 0));
}

.education-panel::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: var(--education-track-top);
  width: 2px;
  height: calc((100% - var(--education-track-top) - var(--education-track-bottom)) * var(--education-progress));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(194, 106, 61, 0.95), rgba(194, 106, 61, 0.18));
  box-shadow: 0 0 18px rgba(194, 106, 61, 0.22);
  transition: height 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.education-orb {
  position: absolute;
  left: calc(1.5rem - 0.38rem);
  top: calc(
    var(--education-track-top) +
    ((100% - var(--education-track-top) - var(--education-track-bottom) - var(--education-orb-size)) * var(--education-progress))
  );
  height: 0.8rem;
  width: 0.8rem;
  border-radius: 999px;
  background: #c26a3d;
  box-shadow: 0 0 0 8px rgba(194, 106, 61, 0.12);
  transition:
    top 340ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms ease,
    transform 260ms ease;
}

.education-panel.is-scrolling .education-orb {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px rgba(194, 106, 61, 0.12),
    0 0 18px rgba(194, 106, 61, 0.3);
}

.edu-metric {
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(248, 245, 239, 0.9);
}

html.dark .edu-metric {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(30, 41, 59, 0.8);
}

html.dark .education-panel::before {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.32), rgba(148, 163, 184, 0.02));
}

html.dark .education-panel::after {
  background: linear-gradient(180deg, rgba(246, 200, 176, 0.95), rgba(96, 165, 250, 0.22));
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.16);
}

.reveal {
  opacity: 1;
  transform: translateY(0);
}

html.reveal-enabled .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.reveal-enabled .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

main section[id] {
  scroll-margin-top: 6.5rem;
}

.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(194, 106, 61, 0.9);
  background: rgba(194, 106, 61, 0.06);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  z-index: 9999;
  opacity: 0;
  transition:
    opacity 180ms ease,
    width 220ms ease,
    height 220ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    transform 120ms ease;
  will-change: transform, opacity;
  contain: layout style paint;
  backface-visibility: hidden;
  box-shadow: 0 0 0 8px rgba(194, 106, 61, 0.08);
}

.cursor-ring.is-visible {
  opacity: 1;
}

.cursor-ring.is-active {
  width: 30px;
  height: 30px;
  border-color: rgba(31, 58, 52, 0.85);
  background: rgba(31, 58, 52, 0.08);
}

.cursor-ring.is-hovering {
  width: 28px;
  height: 28px;
  border-color: rgba(194, 106, 61, 0.72);
  background: rgba(194, 106, 61, 0.08);
}

.touch-ripple-host {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.touch-ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(194, 106, 61, 0.34) 0%, rgba(194, 106, 61, 0.16) 45%, rgba(194, 106, 61, 0.04) 68%, rgba(194, 106, 61, 0) 78%);
  transform: translate3d(-50%, -50%, 0) scale(0.4);
  opacity: 0;
  animation: touch-ripple 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.dark .touch-ripple {
  background: radial-gradient(circle, rgba(246, 200, 176, 0.4) 0%, rgba(96, 165, 250, 0.22) 44%, rgba(96, 165, 250, 0.08) 66%, rgba(96, 165, 250, 0) 80%);
}

@keyframes touch-ripple {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(8.5);
  }
}

html.dark .cursor-ring {
  border-color: rgba(246, 200, 176, 0.9);
  background: rgba(246, 200, 176, 0.08);
  box-shadow: 0 0 0 8px rgba(246, 200, 176, 0.06);
}

html.dark .cursor-ring.is-active {
  border-color: rgba(96, 165, 250, 0.86);
  background: rgba(96, 165, 250, 0.08);
}

html.dark .cursor-ring.is-hovering {
  border-color: rgba(246, 200, 176, 0.76);
  background: rgba(246, 200, 176, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (pointer: coarse) {
  .cursor-ring {
    display: none;
  }
}

@media (max-width: 1023px) {
  nav .mx-auto {
    padding-left: clamp(0.9rem, 2.4vw, 1.15rem);
    padding-right: clamp(0.9rem, 2.4vw, 1.15rem);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  main {
    padding-left: clamp(1rem, 2.6vw, 1.35rem);
    padding-right: clamp(1rem, 2.6vw, 1.35rem);
    padding-top: 1.5rem;
  }

  #home > section:first-child {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }

  #home h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.02;
    max-width: 100%;
  }

  #home .mt-10.grid.gap-4.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .profile-frame {
    order: -1;
  }

  .profile-frame .section-shell {
    padding: 1rem;
  }

  .profile-frame img {
    height: clamp(16rem, 42vw, 20rem);
    width: 100%;
    border-radius: 1.35rem;
    object-position: center 14%;
  }

  #certificates img {
    height: 10.5rem;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.35rem;
  }

  #certificates .grid.gap-6.lg\:grid-cols-2.xl\:grid-cols-3 {
    grid-template-columns: 1fr;
  }

  html.dark #certificates img {
    background: rgba(15, 23, 42, 0.92);
  }

  #certificates article {
    height: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #home > section:first-child {
    grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
    align-items: center;
    gap: 1.5rem;
  }

  #home h1 {
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    max-width: 100%;
  }

  .profile-frame {
    order: 0;
  }

  .profile-frame .section-shell {
    padding: 0.9rem;
  }

  .profile-frame img {
    height: clamp(20rem, 36vw, 22rem);
    object-position: center 10%;
  }

  #home .mt-10.grid.gap-4.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #certificates .grid.gap-6.lg\:grid-cols-2.xl\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  #certificates article.md\:col-span-2.xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  #certificates img {
    height: 11.25rem;
  }
}

@media (max-width: 479px) {
  nav .mx-auto {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .brand-signature {
    font-size: 1.2rem !important;
    gap: 0.45rem;
  }

  #theme-toggle,
  #menu-button {
    width: 2.55rem;
    height: 2.55rem;
  }

  main {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  #home h1,
  h1 {
    font-size: 1.9rem !important;
    line-height: 1.04 !important;
  }

  #home .mt-8.flex.flex-wrap.gap-4 a {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .profile-frame .section-shell {
    padding: 0.8rem;
  }

  .profile-frame img {
    height: 15.5rem;
    border-radius: 1rem;
  }

  #skills .surface-card,
  #projects article,
  #certificates article,
  #achievements .surface-card,
  #training .surface-card,
  #extracurricular .surface-card {
    padding: 1rem;
  }

  #certificates img,
  .project-preview {
    height: 9.75rem;
  }

  #contact a[href^="mailto:"] {
    font-size: 1.25rem;
  }

  footer h2 {
    font-size: 1.55rem !important;
  }

  footer .grid.gap-6.sm\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 15px;
  }

  .font-display {
    letter-spacing: -0.02em;
  }

  nav .mx-auto {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  nav .text-xl {
    font-size: 1.05rem;
  }

  .brand-signature {
    font-size: 1.5rem !important;
    letter-spacing: -0.04em;
    gap: 0.55rem;
  }

  .nav-profile-chip.is-visible {
    width: 1.9rem;
    height: 1.9rem;
  }

  nav .gap-3 {
    gap: 0.55rem;
  }

  #theme-toggle,
  #menu-button {
    height: 2.7rem;
    width: 2.7rem;
  }

  .hamburglar {
    width: 2.7rem;
    height: 2.7rem;
  }

  #mobile-menu {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
  }

  #mobile-menu ul {
    gap: 0.45rem;
  }

  #mobile-menu .nav-link {
    border-radius: 0.9rem;
    padding: 0.78rem 0.9rem;
    background: rgba(255, 255, 255, 0.5);
  }

  html.dark #mobile-menu .nav-link {
    background: rgba(255, 255, 255, 0.04);
  }

  main {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.25rem;
    padding-bottom: 4rem;
  }

  main section[id] {
    scroll-margin-top: 5.75rem;
  }

  main#home,
  #home {
    max-width: 100%;
  }

  #home > section:first-child {
    gap: 1.2rem;
  }

  main > section,
  main > div,
  main > section + section {
    margin-top: 3.25rem;
  }

  main > section:first-child {
    margin-top: 0;
  }

  main section > .mb-8,
  main section > .mb-10 {
    margin-bottom: 1.4rem;
  }

  .profile-frame::after {
    inset: 0.75rem;
  }

  .profile-frame {
    order: -1;
  }

  .profile-frame .section-shell {
    padding: 0.85rem;
  }

  .profile-frame img {
    height: 18rem;
    width: 100%;
    border-radius: 1.2rem;
    object-position: center 12%;
  }

  h1 {
    font-size: 2.15rem !important;
    line-height: 1.02 !important;
  }

  h2 {
    font-size: 2rem !important;
    line-height: 1.15;
  }

  h3 {
    line-height: 1.15;
  }

  p.text-lg,
  .text-lg {
    font-size: 1rem !important;
    line-height: 1.8rem !important;
  }

  .rounded-\[2rem\],
  .rounded-\[2\.25rem\] {
    border-radius: 1.5rem;
  }

  .section-shell,
  .surface-card {
    border-radius: 1.4rem;
  }

  .section-shell {
    padding: 1.25rem;
  }

  .surface-card {
    padding: 1.15rem;
  }

  .shadow-soft {
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
  }

  .section-shell:hover,
  .surface-card:hover,
  a.rounded-full:hover,
  button.rounded-full:hover {
    transform: none;
  }

  .grid.gap-10,
  .grid.gap-8,
  .grid.gap-6 {
    gap: 1rem;
  }

  .mt-10 {
    margin-top: 1.75rem !important;
  }

  .mt-8 {
    margin-top: 1.35rem !important;
  }

  .mt-6 {
    margin-top: 1rem !important;
  }

  .mt-5,
  .mt-4 {
    margin-top: 0.85rem !important;
  }

  .hero-actions,
  .mt-8.flex.flex-wrap.gap-4,
  .mt-6.flex.flex-wrap.gap-3,
  .mt-7.flex.flex-wrap.gap-4,
  .mt-6.flex.flex-wrap.gap-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .mt-8.flex.flex-wrap.gap-4 a,
  .mt-6.flex.flex-wrap.gap-3 a,
  .mt-7.flex.flex-wrap.gap-4 a,
  .mt-6.flex.flex-wrap.gap-4 a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  #home .font-display.text-sm.font-bold.uppercase.tracking-\[0\.24em\].text-accent {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
  }

  #home p.max-w-2xl,
  #home p.text-lg {
    max-width: 100%;
    font-size: 0.94rem !important;
    line-height: 1.75rem !important;
  }

  #home .mt-8.flex.flex-wrap.gap-4 {
    margin-top: 1.1rem !important;
  }

  #home .rounded-full {
    min-height: 3rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  .mt-10.grid.gap-4.sm\:grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  #home .mt-10.grid.gap-4.sm\:grid-cols-3 > div {
    border-radius: 1.1rem;
    padding: 0.95rem 1rem;
  }

  #home .mt-10.grid.gap-4.sm\:grid-cols-3 p.text-3xl {
    font-size: 1.7rem;
    line-height: 1;
  }

  #home .mt-10.grid.gap-4.sm\:grid-cols-3 p.mt-1 {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.35rem;
  }

  #home .soft-panel {
    margin-top: 0.85rem;
    border-radius: 1.1rem;
    padding: 0.95rem;
  }

  #home .soft-panel p.text-base {
    font-size: 0.93rem;
    line-height: 1.6rem;
  }

  #about .space-y-4,
  #projects ul,
  #internship .grid,
  #skills .grid,
  #achievements .grid,
  #certificates .grid {
    gap: 0.9rem;
  }

  #projects article,
  #certificates article,
  #skills .surface-card,
  #achievements .surface-card,
  #extracurricular .surface-card,
  #training .surface-card {
    padding: 1.1rem;
  }

  #internship .certificate-trigger .flex.items-start.justify-between.gap-4 {
    flex-direction: column;
    align-items: flex-start;
  }

  #internship .certificate-trigger .rounded-full.border.border-accent\/20.bg-accent\/10 {
    align-self: flex-start;
  }

  .project-preview {
    height: 11rem;
    margin-bottom: 1rem;
    border-radius: 1.1rem;
  }

  #projects h3,
  #certificates h3,
  #achievements h3,
  #extracurricular h3,
  #training h3,
  #education h3 {
    font-size: 1.4rem;
  }

  #projects ul {
    font-size: 0.96rem;
    line-height: 1.65rem;
  }

  #projects .theme-chip,
  #internship .theme-chip,
  #education .theme-chip {
    padding: 0.55rem 0.85rem;
  }

  #certificates img {
    height: 11rem;
  }

  .certificate-lightbox {
    padding: 1rem;
  }

  .case-study-modal {
    padding: 1rem;
  }

  .scroll-progress {
    display: none;
  }

  .certificate-lightbox__content {
    width: 100%;
    padding: 0.7rem;
    border-radius: 1.1rem;
  }

  .case-study-modal__content {
    width: 100%;
    max-height: calc(100vh - 2rem);
    padding: 1rem;
    padding-top: 3.75rem;
    border-radius: 1.1rem;
  }

  .certificate-lightbox__close {
    top: 0.5rem;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.7rem;
  }

  .case-study-modal__close {
    top: 0.5rem;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.7rem;
  }

  .certificate-lightbox__image {
    max-height: calc(100vh - 4rem);
    border-radius: 0.85rem;
  }

  .education-scroll {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .education-panel::before {
    left: 1rem;
    top: 1.25rem;
    bottom: 1.25rem;
  }

  .education-orb {
    left: calc(1rem - 0.38rem);
    top: 1.5rem;
  }

  .education-panel .pl-8 {
    padding-left: 1.6rem;
  }

  #education .grid.gap-8 {
    gap: 1.15rem;
  }

  #education .edu-metric {
    padding: 1rem;
  }

  #education .space-y-4 > * + * {
    margin-top: 0.8rem;
  }

  #education article .flex.flex-col.gap-4 {
    gap: 0.8rem;
  }

  #education article .flex.flex-wrap.gap-3 {
    gap: 0.55rem;
  }

  .theme-chip {
    font-size: 0.85rem;
  }

  #contact {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }

  #contact h2 {
    font-size: 2rem !important;
  }

  #contact .rounded-\[2rem\] {
    border-radius: 1.4rem;
  }

  #contact .grid {
    gap: 1rem;
  }

  #contact .relative.rounded-\[2rem\] {
    padding: 1.15rem;
    overflow: hidden;
  }

  #contact .absolute.inset-0.rounded-\[2rem\] {
    border-radius: 1.4rem;
  }

  #contact a[href^="mailto:"] {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 1.55rem;
    line-height: 1.2;
  }

  #contact p {
    max-width: 100%;
  }

  #contact .mt-7.flex.flex-wrap.gap-4 {
    gap: 0.65rem;
  }

  #contact .mt-7.flex.flex-wrap.gap-4 a {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #contact .text-sm.leading-6.text-white\/70 {
    line-height: 1.45rem;
  }

  #contact,
  #contact * {
    min-width: 0;
  }

  #projects,
  #skills,
  #achievements,
  #extracurricular,
  #training,
  #certificates,
  #education,
  #contact {
    overflow: hidden;
  }

  #contact .rounded-full {
    width: 100%;
    justify-content: center;
  }

  #contact .flex.flex-wrap.gap-4 {
    display: grid;
    grid-template-columns: 1fr;
  }

  #more-menu {
    min-width: 12rem;
    right: 0;
  }

  footer {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    line-height: 1.6;
  }

  footer h2 {
    font-size: 1.8rem !important;
    line-height: 1.15;
  }

  footer p.max-w-2xl {
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.65rem;
  }

  footer .mt-6.flex.flex-wrap.gap-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  footer .mt-6.flex.flex-wrap.gap-3 a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  footer .grid.gap-6.sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .footer-panel {
    padding: 1rem;
    border-radius: 1.2rem;
  }

  footer .footer-link {
    min-height: 2.75rem;
    align-items: center;
    padding: 0.15rem 0;
  }

  footer .footer-link--icon {
    gap: 0.75rem;
  }

  footer .social-icon {
    width: 1.05rem;
    height: 1.05rem;
  }

  footer .mx-auto.mt-8.flex.max-w-6xl.justify-center.border-t.border-black\/5.pt-5.text-center.text-sm.text-gray-600 {
    margin-top: 1.25rem;
    padding-top: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
  }
}