*, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      min-height: 100vh;
      margin: 0;
      background: linear-gradient(180deg, #161616 0%, #202020 48%, #151515 100%);
      color: rgb(246 247 248 / 0.92);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    p, h1, h2, h3 { margin: 0; }
    .font-serif, h1, h2 { font-family: Georgia, "Times New Roman", ui-serif, serif; }
    #video-bg video {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      min-width: 100%; min-height: 100%;
      object-fit: cover;
      filter: brightness(.88) saturate(1) contrast(.98);
    }
    #video-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      background: #000;
      overflow: hidden;
    }
    #video-bg::before,
    #video-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    #video-bg::before { background: rgba(235, 235, 235, 0.08); }
    #video-bg::after {
      background:
        radial-gradient(ellipse 82% 70% at 18% 34%, rgba(20, 20, 20, .42), transparent 60%),
        linear-gradient(90deg, rgba(16, 16, 16, .54) 0%, rgba(28, 28, 28, .24) 48%, rgba(240, 240, 240, .04) 100%),
        linear-gradient(180deg, rgba(245,245,245,.05), rgba(20,20,20,.34));
    }
    #video-bg > div { display: none; }
    body[data-loaded="true"] #loading {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .pointer-on { pointer-events: auto; }
    .caustics {
      position: fixed; inset: 0; pointer-events: none; z-index: 1;
      background:
        radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255,255,255,0.06), transparent 50%),
        radial-gradient(ellipse 50% 60% at 80% 60%, rgba(255,255,255,0.04), transparent 60%);
      animation: caustic 15s ease-in-out infinite alternate;
    }
    @keyframes caustic {
      0% { transform: translate(0,0) scale(1); }
      50% { transform: translate(-20px,15px) scale(1.05); }
      100% { transform: translate(15px,-10px) scale(0.98); }
    }
    @keyframes blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }
    .typing-cursor::after {
      content: "|";
      animation: blink 0.8s infinite;
      font-weight: 300;
    }
    .sunbeam {
      position: fixed; top: 0; left: 50%; pointer-events: none; z-index: 1;
      width: 120%; height: 70vh;
      background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 70%);
      transform: translateX(-50%) rotate(8deg);
      filter: blur(30px);
    }
    .scroll-reveal { margin: 0; }
    .scroll-reveal-text { display: flex; flex-wrap: wrap; margin: 0; }
    .word { display: inline-block; white-space: pre; }
    #loading {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      background: #181818;
      transition: opacity .5s ease, visibility .5s ease;
    }
    #loading > div {
      font-size: clamp(44px, 7vw, 80px);
      font-style: italic;
      color: rgba(239, 246, 255, .8);
    }
    header {
      pointer-events: none;
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 20;
      padding: 18px 20px;
      background: linear-gradient(180deg, rgba(18, 18, 18, .52), rgba(18, 18, 18, 0));
    }
    nav {
      width: min(100%, 1280px);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: rgba(250, 250, 250, .76);
      text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
    }
    nav > div {
      display: flex;
      gap: 32px;
    }
    .nav-inner {
      display: flex;
      align-items: center;
      gap: 32px;
    }
    .locale-switch {
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(238,238,238,.06);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .locale-switch button {
      appearance: none;
      border: 0;
      border-radius: 0;
      padding: 7px 9px;
      background: transparent;
      color: rgba(250,250,250,.66);
      font: inherit;
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .locale-switch button[aria-pressed="true"] {
      background: rgba(250,250,250,.18);
      color: rgba(250,250,250,.98);
    }
    .pointer-on { pointer-events: auto; }
    nav a:hover, footer a:hover { color: rgba(239, 246, 255, 1); }
    main, footer {
      pointer-events: none;
      position: relative;
      z-index: 10;
    }
    main > section,
    footer {
      width: min(100%, 1280px);
      margin: 0 auto;
      padding: 96px 32px;
      position: relative;
      isolation: isolate;
      min-height: 100vh;
      display: grid;
      align-content: center;
    }
    main > section:not(:first-child)::before,
    footer::before {
      content: none;
    }
    main > section:first-child {
      height: 100vh;
      display: grid;
      align-content: center;
      padding-top: 112px;
      padding-bottom: 80px;
      overflow: hidden;
    }
    main > section:first-child > div { max-width: 1120px; }
    main > section:first-child p:first-child,
    section > div > p:first-child,
    article > p:first-child {
      font-size: 12px;
      letter-spacing: .34em;
      text-transform: uppercase;
      color: rgba(244, 244, 244, .58);
      text-shadow: 0 1px 4px rgba(0,0,0,.35);
    }
    h1 {
      margin-top: 24px;
      font-size: clamp(60px, 7.6vw, 98px);
      line-height: .94;
      color: rgba(248, 250, 252, .98);
      font-weight: 400;
      text-shadow: 0 2px 12px rgba(0,0,0,.40);
    }
    main > section:first-child p:nth-of-type(2) {
      margin-top: 32px;
      max-width: 720px;
      font-size: clamp(18px, 2vw, 24px);
      line-height: 1.65;
      color: rgba(245, 247, 250, .88);
      text-shadow: 0 1px 6px rgba(0,0,0,.35);
    }
    main > section:first-child span {
      color: rgba(250, 250, 250, .96);
      font-weight: 700;
    }
    main > section:first-child a {
      pointer-events: auto;
      display: inline-flex;
      margin-top: 40px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(250, 250, 250, .62);
      font-size: 14px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: rgba(250, 250, 250, .95);
    }
    main > section:nth-child(2) h2 {
      font-size: clamp(28px, 3.5vw, 42px);
      line-height: 1.4;
      color: rgba(250, 250, 250, .82);
      font-weight: 400;
      max-width: 900px;
    }
    #credentials, #work, #projects, #study, footer {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 56px;
    }
    #work { grid-template-columns: .8fr 1.2fr; }
    #projects { grid-template-columns: .9fr 1.1fr; }
    #skills {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
    }
    #credentials h2, #work h2, #projects h2, #skills h2, #study h2, footer h2 {
      margin-top: 16px;
      font-size: clamp(58px, 7vw, 96px);
      line-height: .94;
      color: rgba(250, 250, 250, .98);
      font-weight: 400;
    }
    #credentials > div:last-child {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    #credentials article {
      border: 1px solid rgba(255, 255, 255, .15);
      background: rgba(20, 20, 20, .4);
      padding: 24px;
    }
    #credentials article:nth-child(2) {
      border-color: rgba(255, 255, 255, .22);
      background: rgba(30, 30, 30, .45);
    }
    #credentials article:nth-child(3) {
      grid-column: 1 / -1;
      background: rgba(20, 20, 20, .35);
    }
    #credentials h3, #work h3, #projects h3 {
      margin-top: 12px;
      font-size: clamp(28px, 3vw, 36px);
      line-height: 1.12;
      color: rgba(250, 250, 250, .98);
      font-weight: 600;
    }
    #credentials article:nth-child(2) h3 { font-size: clamp(38px, 4vw, 48px); }
    #credentials article:nth-child(2) p:nth-of-type(2) {
      margin-top: 12px;
      font-size: 24px;
      color: rgba(250, 250, 250, .92);
    }
    #credentials article p:last-child,
    #work article p:last-child,
    #projects article p:last-child,
    #study div:last-child,
    footer {
      color: rgba(238, 238, 238, .80);
    }
    #credentials article p:last-child { margin-top: 16px; font-size: 18px; line-height: 1.7; }
    #credentials article:nth-child(3) p:last-child { font-size: 20px; line-height: 1.8; }
    #work > div:last-child, #projects > div:last-child {
      display: grid;
      gap: 44px;
    }
    #work article p:last-child, #projects article p:last-child {
      margin-top: 16px;
      max-width: 820px;
      line-height: 1.85;
      font-size: 17px;
    }
    #projects article {
      border-top: 1px solid rgba(255, 255, 255, .24);
      padding-top: 32px;
    }
    #skills > div:nth-child(2),
    #skills > div:nth-child(3) {
      display: grid;
      gap: 20px;
      font-size: 26px;
      color: rgba(250, 250, 250, .86);
    }
    #study div:last-child {
      align-self: end;
      font-size: 22px;
      line-height: 1.75;
    }
    #study div:last-child p + p { margin-top: 40px; }
    footer {
      padding-top: 80px;
      padding-bottom: 80px;
      color: rgba(238, 238, 238, .74);
    }
    footer > div {
      display: grid;
      gap: 48px;
      justify-self: end;
    }
    footer > div > div:first-child {
      display: grid;
      gap: 24px;
    }
    footer a, footer p.text-xl {
      pointer-events: auto;
      color: rgba(250, 250, 250, .88);
      font-size: 22px;
    }
    footer a:first-child { font-size: 28px; color: rgba(250, 250, 250, .98); }
    footer > div > div:nth-child(2) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px 32px;
      font-size: 14px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: rgba(235, 235, 235, .58);
    }
    footer > div > p:last-child {
      font-size: 12px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: rgba(235, 235, 235, .48);
    }
    [data-reveal] {
      opacity: 0;
      transform: translateY(30px);
      transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: calc(var(--reveal-delay, 0) * 1s);
    }
    [data-reveal="visible"] { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .caustics { animation: none; }
      [data-reveal] { transition: none; opacity: 1; transform: none; }
    }
    @media (max-width: 760px) {
      header { padding: 18px; }
      .nav-inner { gap: 14px; }
      nav > .nav-inner > div:first-child { display: none; }
      main > section, footer { padding: 84px 20px; }
      #credentials, #work, #projects, #skills, #study, footer {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      #credentials > div:last-child { grid-template-columns: 1fr; }
      #credentials article:nth-child(3) { grid-column: auto; }
      h1 { font-size: clamp(64px, 18vw, 96px); }
      main > section:nth-child(2) h2,
      #credentials h2, #work h2, #projects h2, #skills h2, #study h2, footer h2 {
        font-size: clamp(48px, 14vw, 72px);
      }
      footer > div { justify-self: stretch; }
      footer > div > div:nth-child(2) { grid-template-columns: 1fr; }
    }
    /* FOOTER-UPGRADE-START */
    /* Footer layout upgrade: contact / resume / other sections */
    footer#contact {
      width: 100%;
      max-width: none;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      display: block;
      align-content: initial;
      color: rgba(238, 238, 238, .74);
    }
    footer#contact::before { content: none; }
    .footer-shell {
      width: min(100%, 1280px);
      min-height: 100vh;
      margin: 0 auto;
      padding: 96px 32px 72px;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 56px;
      align-items: center;
      pointer-events: none;
    }
    .footer-hero {
      align-self: start;
      position: sticky;
      top: 120px;
    }
    .footer-eyebrow {
      font-size: 12px;
      letter-spacing: .34em;
      text-transform: uppercase;
      color: rgba(244, 244, 244, .52);
    }
    .footer-hero h2 {
      margin-top: 20px;
      font-size: clamp(54px, 7vw, 92px);
      line-height: .95;
      font-weight: 400;
      color: rgba(250, 250, 250, .98);
      text-shadow: 0 2px 14px rgba(0,0,0,.42);
    }
    .footer-intro {
      margin-top: 28px;
      max-width: 480px;
      font-size: 18px;
      line-height: 1.85;
      color: rgba(238, 238, 238, .72);
    }
    .footer-sections {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      font-size: inherit;
      letter-spacing: normal;
      text-transform: none;
      color: inherit;
    }
    .footer-card {
      pointer-events: auto;
      border: 1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
        rgba(16,16,16,.42);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      padding: 24px;
      transition: transform .35s ease, border-color .35s ease, background .35s ease;
    }
    .footer-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,255,255,.28);
      background:
        linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.045)),
        rgba(18,18,18,.48);
    }
    .footer-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
    }
    .footer-card-head span {
      font-size: 12px;
      letter-spacing: .28em;
      color: rgba(153,246,228,.72);
    }
    .footer-card-head h3 {
      margin: 0;
      font-family: Georgia, "Times New Roman", ui-serif, serif;
      font-size: 30px;
      line-height: 1.1;
      font-weight: 400;
      color: rgba(250,250,250,.96);
    }
    .contact-list {
      display: grid;
      gap: 10px;
    }
    .contact-row {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 18px;
      align-items: baseline;
      padding: 12px 0;
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .contact-row span {
      font-size: 11px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: rgba(238,238,238,.48);
    }
    .contact-row strong {
      font-size: 16px;
      font-weight: 500;
      color: rgba(250,250,250,.88);
      overflow-wrap: anywhere;
    }
    .contact-row:hover strong {
      color: rgba(255,255,255,.98);
    }
    .resume-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .resume-button {
      display: grid;
      gap: 8px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.055);
      transition: transform .3s ease, border-color .3s ease, background .3s ease;
    }
    .resume-button.primary {
      background: rgba(153,246,228,.16);
      border-color: rgba(153,246,228,.35);
    }
    .resume-button span {
      font-size: 17px;
      color: rgba(250,250,250,.96);
    }
    .resume-button em {
      font-size: 11px;
      font-style: normal;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(238,238,238,.52);
    }
    .resume-button:hover {
      transform: translateY(-2px);
      border-color: rgba(255,255,255,.34);
    }
    .footer-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .footer-tags span {
      padding: 8px 11px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(238,238,238,.72);
    }
    .footer-legal {
      margin-top: 26px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.10);
      display: grid;
      gap: 10px;
      font-size: 11px;
      letter-spacing: .14em;
      color: rgba(238,238,238,.42);
    }
    .footer-legal div {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-legal a:hover {
      color: rgba(255,255,255,.72);
    }
    @media (max-width: 760px) {
      .footer-shell {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 84px 20px 56px;
      }
      .footer-hero {
        position: static;
      }
      .resume-actions {
        grid-template-columns: 1fr;
      }
      .contact-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }
    }
    /* FOOTER-UPGRADE-END */