:root {
   --navy: #071a2f;
   --navy-2: #0b2746;
   --blue: #1768d4;
   --blue-light: #eaf3ff;
   --orange: #ff842d;
   --orange-2: #ff9c48;
   --ink: #10253e;
   --muted: #63748a;
   --white: #fff;
   --tint: #f3f8fe;
   --line: #dce7f3;
   --radius: 18px;
   --shadow: 0 16px 42px rgba(12, 42, 75, .08);
 }

 * {
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
   scroll-padding-top: 84px;
 }

 body {
   margin: 0;
   font-family: "DM Sans", sans-serif;
   color: var(--ink);
   background: var(--white);
   line-height: 1.65;
 }

 a {
   color: inherit;
   text-decoration: none;
 }

 button,
 input,
 textarea {
   font: inherit;
 }

 .container {
   width: min(1120px, calc(100% - 48px));
   margin-inline: auto;
 }

 .site-header {
   height: 78px;
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(7, 26, 47, .96);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(255, 255, 255, .08);
 }

 .nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
   gap: 24px;
 }

 .brand {
   display: flex;
   align-items: center;
   gap: 12px;
   color: white;
   min-width: max-content;
 }

 .brand-mark {
   font: 700 27px "Space Grotesk", sans-serif;
   letter-spacing: -2px;
   color: white;
   line-height: 1;
 }

 .brand-mark span {
   color: var(--orange);
 }

 .brand-copy {
   display: flex;
   flex-direction: column;
   line-height: 1.3;
 }

 .brand-copy strong {
   font-size: 13px;
   letter-spacing: -.2px;
 }

 .brand-copy small {
   font-size: 10px;
   color: #b8c7d9;
   margin-top: 4px;
 }

 .nav-links {
   display: flex;
   align-items: center;
   gap: 25px;
 }

 .nav-link {
   color: #d6e1ed;
   font-size: 12px;
   font-weight: 600;
   transition: color .2s;
 }

 .nav-link:hover,
 .nav-link.active {
   color: white;
 }

 .nav-link.active {
   position: relative;
 }

 .nav-link.active::after {
   content: "";
   height: 2px;
   width: 18px;
   background: var(--orange);
   position: absolute;
   left: 0;
   bottom: -10px;
 }

 .menu-toggle {
   display: none;
   border: 1px solid #29415b;
   background: transparent;
   color: white;
   border-radius: 10px;
   padding: 8px;
 }

 .button {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 9px;
   border-radius: 10px;
   padding: 13px 19px;
   font-size: 13px;
   font-weight: 700;
   border: 1px solid transparent;
   cursor: pointer;
   transition: transform .2s, box-shadow .2s, background .2s;
 }

 .button:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 24px rgba(0, 0, 0, .13);
 }

 .button svg,
 .text-link svg,
 .social-link svg,
 .hero-bottom svg {
   width: 16px;
   height: 16px;
 }

 .button-orange {
   background: linear-gradient(120deg, var(--orange), var(--orange-2));
   color: #172438;
 }

 .cv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  background: #172438;
  color: #ffff;
  border-radius: 10px;
  margin-top: 20px;
 }

 .button-small {
   padding: 10px 13px;
   font-size: 11px;
   border-radius: 8px;
 }

 .button-outline {
   border-color: #c3d3e5;
   color: white;
   background: transparent;
 }

 .section-dark {
   background: radial-gradient(ellipse at 75% 45%, #12345b 0, var(--navy) 56%);
   color: white;
   position: relative;
   overflow: hidden;
 }

 .hero {
   padding: 78px 0 24px;
   min-height: 565px;
 }

 .hero-grid {
   display: grid;
   grid-template-columns: 1.08fr .92fr;
   align-items: center;
   gap: 44px;
   position: relative;
   z-index: 1;
 }

 .eyebrow {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 1.7px;
   color: #a9c8ed;
   margin: 0 0 18px;
 }

 .eyebrow-blue {
   color: var(--blue);
 }

 .status-dot {
   display: inline-block;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #67d9a4;
   margin-right: 7px;
   box-shadow: 0 0 0 4px rgba(103, 217, 164, .1);
 }

 .hello {
   margin: 0 0 3px;
   color: #c7d7e9;
   font-size: 19px;
 }

 h1,
 h2,
 h3,
 h4,
 p {
   margin-top: 0;
 }

 h1,
 h2,
 h3 {
   font-family: "Space Grotesk", sans-serif;
 }

 h1 {
   font-size: clamp(40px, 5.3vw, 64px);
   letter-spacing: -2.8px;
   line-height: 1.08;
   margin-bottom: 16px;
 }

 h1 span,
 .section-heading h2 span,
 .contact-grid h2 span {
   color: var(--orange);
 }

 .hero-content h2 {
   font: 600 15px "DM Sans", sans-serif;
   color: #e1eaf5;
   margin: 0 0 20px;
 }

 .hero-content h2 b {
   color: var(--orange);
   padding: 0 5px;
 }

 .hero-description {
   max-width: 570px;
   font-size: 14px;
   line-height: 1.85;
   color: #c2d1e2;
   margin-bottom: 12px;
 }

 .hero-description strong {
   color: white;
 }

 .hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 25px;
 }

 .social-links {
   display: flex;
   gap: 11px;
   margin-top: 25px;
 }

 .social-link {
   display: grid;
   place-items: center;
   width: 36px;
   height: 36px;
   border: 1px solid #2a4562;
   border-radius: 10px;
   color: #d9e5f1;
   transition: .2s;
 }

 .social-link:hover {
   color: white;
   border-color: var(--orange);
   background: rgba(255, 132, 45, .12);
 }

 .social-link svg {
   width: 17px;
   height: 17px;
 }

 .hero-visual {
   min-height: 390px;
   display: grid;
   place-items: center;
   position: relative;
 }

 .orbit {
   position: absolute;
   border-radius: 50%;
 }

 .orbit-large {
   width: min(360px, 88%);
   aspect-ratio: 1;
   border: 1px solid rgba(139, 180, 229, .28);
   background: radial-gradient(circle at 65% 30%, rgba(255, 132, 45, .12), rgba(23, 104, 212, .12) 45%, transparent 70%);
 }

 .orbit-small {
   width: min(270px, 68%);
   aspect-ratio: 1;
   border: 1px dashed rgba(255, 255, 255, .24);
 }

 .hero-monogram {
   width: 240px;
   height: 280px;
   display: grid;
   place-items: center;
   border-radius: 48% 48% 20px 20px;
   background: linear-gradient(155deg, #ff9a46, #e85f23 44%, #0d3965 44%, #0b2340);
   color: rgba(255, 255, 255, .94);
   font: 700 82px "Space Grotesk", sans-serif;
   letter-spacing: -10px;
   padding-right: 10px;
   box-shadow: 0 28px 65px rgba(0, 0, 0, .28);
   position: relative;
   overflow: hidden;
 }

 img.hero-img {
   width: 240px;
 }

 .floating-card {
   position: absolute;
   z-index: 2;
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(16, 42, 69, .94);
   border: 1px solid rgba(184, 210, 240, .2);
   border-radius: 13px;
   padding: 12px 14px;
   box-shadow: 0 15px 35px rgba(0, 0, 0, .18);
 }

 .floating-card>svg {
   color: var(--orange);
   width: 22px;
   height: 22px;
 }

 .floating-card span {
   display: flex;
   flex-direction: column;
 }

 .floating-card strong {
   font-size: 11px;
 }

 .floating-card small {
   font-size: 9px;
   color: #aebfd1;
 }

 .card-data {
   top: 60px;
   right: -3px;
 }

 .card-community {
   bottom: 43px;
   left: -15px;
 }

 .visual-caption {
   position: absolute;
   right: 0;
   bottom: 12px;
   font: 600 14px "Space Grotesk", sans-serif;
   color: #c6d7e8;
   line-height: 1.4;
   transform: rotate(-5deg);
 }

 .visual-caption span {
   color: var(--orange);
 }

 .hero-bottom {
   display: flex;
   flex-wrap: wrap;
   gap: 25px;
   padding-top: 35px;
   margin-top: 30px;
   border-top: 1px solid rgba(255, 255, 255, .1);
   color: #b8c8da;
   font-size: 11px;
   position: relative;
   z-index: 1;
 }

 .hero-bottom span {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .hero-bottom svg {
   color: var(--orange);
   width: 14px;
   height: 14px;
 }

 .hero-glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(1px);
   pointer-events: none;
 }

 .glow-one {
   width: 280px;
   height: 280px;
   background: rgba(23, 104, 212, .09);
   top: 40px;
   right: -70px;
 }

 .glow-two {
   width: 160px;
   height: 160px;
   border: 1px solid rgba(255, 132, 45, .13);
   bottom: -70px;
   left: 42%;
 }

 .section {
   padding: 90px 0;
 }

 .section-white {
   background: white;
 }

 .section-tint {
   background: var(--tint);
 }

 .section-heading {
   margin-bottom: 38px;
 }

 .section-heading .eyebrow {
   margin-bottom: 12px;
 }

 .section-heading h2,
 .contact-grid h2 {
   font-size: clamp(30px, 3.8vw, 43px);
   line-height: 1.15;
   letter-spacing: -1.5px;
   margin-bottom: 15px;
 }

 .section-heading h2 span {
   color: var(--blue);
 }

 .section-intro {
   color: var(--muted);
   max-width: 550px;
   font-size: 14px;
   margin-bottom: 0;
 }

 .heading-row {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 35px;
 }

 .heading-row .section-intro {
   max-width: 400px;
   padding-bottom: 5px;
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 75px;
   align-items: start;
 }

 .about-copy p {
   color: #596c82;
   font-size: 14px;
   line-height: 1.95;
   margin-bottom: 18px;
 }

 .text-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--blue);
   font-size: 12px;
   font-weight: 700;
   margin-top: 7px;
 }

 .text-link:hover {
   color: #084ba5;
   gap: 12px;
 }

 .about-panel {
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 25px;
   background: linear-gradient(145deg, #f7fbff, #edf5ff);
 }

 .panel-top {
   display: flex;
   gap: 14px;
   align-items: center;
   padding-bottom: 22px;
   border-bottom: 1px solid #d8e6f5;
   margin-bottom: 20px;
 }

 .panel-icon {
   width: 45px;
   height: 45px;
   display: grid;
   place-items: center;
   border-radius: 13px;
   background: #dbeaff;
   color: var(--blue);
 }

 .panel-icon svg {
   width: 22px;
 }

 .panel-top h3 {
   font-size: 16px;
   margin-bottom: 4px;
 }

 .panel-top p,
 .focus-item p {
   color: var(--muted);
   font-size: 11px;
   margin: 0;
 }

 .focus-item {
   display: flex;
   gap: 15px;
   margin: 17px 0;
 }

 .focus-number {
   font: 700 14px "Space Grotesk", sans-serif;
   color: var(--orange);
 }

 .focus-item strong {
   font-size: 13px;
 }

 .focus-item p {
   margin-top: 3px;
   line-height: 1.6;
 }

 .skills-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
 }

 .skill-card {
   display: flex;
   align-items: center;
   gap: 14px;
   min-height: 95px;
   padding: 18px;
   border: 1px solid #e0eaf5;
   background: rgba(255, 255, 255, .9);
   border-radius: 14px;
   box-shadow: 0 5px 20px rgba(20, 60, 100, .025);
   transition: transform .2s, box-shadow .2s;
 }

 .skill-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow);
 }

 .skill-icon {
   flex: 0 0 43px;
   width: 43px;
   height: 43px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   font: 700 19px "Space Grotesk", sans-serif;
 }

 .skill-icon svg {
   width: 22px;
   height: 22px;
 }

 .python {
   background: #fff0cf;
   color: #24639c;
 }

 .r-icon {
   background: #e7efff;
   color: #2764a8;
 }

 .sql-icon {
   background: #e2f0ff;
   color: #0877ce;
 }

 .powerbi {
   background: #fff4cc;
   color: #b88600;
 }

 .streamlit {
   background: #ffebe6;
   color: #d84a32;
 }

 .scraper {
   background: #e6f7ed;
   color: #198653;
 }

 .web-icon {
   background: #ffede6;
   color: #e45c2e;
 }

 .geo-icon {
   background: #e5f4ed;
   color: #20825a;
 }

 .automation {
   background: #fce9f0;
   color: #d13f78;
 }

 .skill-card h3 {
   font: 700 13px "DM Sans", sans-serif;
   margin: 0 0 5px;
 }

 .skill-card p {
   color: var(--muted);
   font-size: 10px;
   margin: 0;
   line-height: 1.5;
 }

 .skills-note {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 20px 0 0;
   color: #75859a;
   font-size: 11px;
 }

 .skills-note svg {
   width: 15px;
   height: 15px;
   color: var(--blue);
   flex-shrink: 0;
 }

 .projects-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 22px;
 }

 .project-card {
   border: 1px solid var(--line);
   border-radius: 16px;
   overflow: hidden;
   background: white;
   transition: transform .2s, box-shadow .2s;
 }

 .project-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow);
 }

 .project-art {
   height: 190px;
   position: relative;
   overflow: hidden;
   display: grid;
   place-items: center;
 }

 .art-map {
   background: linear-gradient(135deg, #0b2440, #123e68);
 }

 .map-lines {
   position: absolute;
   inset: 0;
   opacity: .7;
   background-image: linear-gradient(35deg, transparent 47%, rgba(111, 177, 221, .22) 48%, transparent 49%), linear-gradient(120deg, transparent 48%, rgba(111, 177, 221, .19) 49%, transparent 50%), linear-gradient(0deg, transparent 48%, rgba(111, 177, 221, .14) 49%, transparent 50%);
   background-size: 56px 42px, 68px 62px, 35px 35px;
   transform: rotate(-7deg) scale(1.2);
 }

 .map-pin {
   position: absolute;
   width: 13px;
   height: 13px;
   border-radius: 50% 50% 50% 0;
   background: var(--orange);
   transform: rotate(-45deg);
   box-shadow: 0 0 0 7px rgba(255, 132, 45, .12);
 }

 .pin-one {
   top: 32%;
   left: 35%;
 }

 .pin-two {
   top: 55%;
   left: 62%;
 }

 .pin-three {
   top: 70%;
   left: 44%;
 }

 .art-label {
   position: absolute;
   bottom: 17px;
   left: 17px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 9px;
   letter-spacing: 1px;
   color: white;
   background: rgba(3, 17, 31, .7);
   padding: 9px 11px;
   border-radius: 8px;
 }

 .art-label svg {
   width: 15px;
   color: var(--orange);
 }

 .art-dashboard {
   background: linear-gradient(135deg, #dceaff, #eff5ff);
 }

 .mini-dash {
   background: white;
   border: 1px solid #d5e4f7;
   border-radius: 9px;
   width: 68%;
   height: 75%;
   padding: 14px;
   box-shadow: 0 12px 25px rgba(15, 61, 120, .12);
 }

 .dash-bar {
   height: 7px;
   border-radius: 4px;
   background: #e6edf6;
   width: 80%;
   margin-bottom: 15px;
 }

 .dash-metrics {
   display: flex;
   gap: 8px;
 }

 .dash-metrics i {
   display: block;
   height: 27px;
   flex: 1;
   border-radius: 4px;
   background: #e9f2ff;
   border-top: 3px solid #2f7fe0;
 }

 .dash-chart {
   height: 52px;
   display: flex;
   align-items: end;
   gap: 8px;
   padding: 8px 5px 0;
   border-bottom: 1px solid #dce7f3;
   margin-top: 6px;
 }

 .dash-chart span {
   display: block;
   flex: 1;
   background: #5a9bec;
   border-radius: 3px 3px 0 0;
 }

 .dash-chart span:nth-child(1) {
   height: 40%
 }

 .dash-chart span:nth-child(2) {
   height: 75%
 }

 .dash-chart span:nth-child(3) {
   height: 52%
 }

 .dash-chart span:nth-child(4) {
   height: 90%
 }

 .dash-chart span:nth-child(5) {
   height: 62%
 }

 .dash-chart span:nth-child(6) {
   height: 100%
 }

 .dash-chart span:nth-child(7) {
   height: 73%
 }

 .dash-line {
   margin-top: 9px;
   height: 4px;
   width: 50%;
   background: #dce7f3;
   border-radius: 4px;
 }

 .art-code {
   background: #0a1725;
 }

 .code-window {
   width: 76%;
   padding: 20px;
   background: #101f30;
   border: 1px solid #263b50;
   border-radius: 10px;
   box-shadow: 0 15px 30px rgba(0, 0, 0, .25);
   transform: rotate(-2deg);
 }

 .code-dots {
   display: flex;
   gap: 5px;
   margin-bottom: 17px;
 }

 .code-dots b {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #fa766e;
 }

 .code-dots b:nth-child(2) {
   background: #ffc45d
 }

 .code-dots b:nth-child(3) {
   background: #63d59b
 }

 .code-window p {
   font: 10px monospace;
   color: #d1deeb;
   margin: 7px 0;
 }

 .code-window p span {
   color: #c792ea;
 }

 .code-window em {
   color: #82c7ff;
   font-style: normal;
 }

 .code-window strong {
   color: #c3e88d;
 }

 .code-window .indent {
   padding-left: 13px;
 }

 .code-window .indent2 {
   padding-left: 26px;
 }

 .art-community {
   background: linear-gradient(140deg, #0d3470, #1768d4);
   color: white;
   text-align: center;
 }

 .community-mark {
   font: 700 46px "Space Grotesk", sans-serif;
   letter-spacing: -4px;
 }

 .community-mark span {
   color: var(--orange);
 }

 .art-community h4 {
   font: 600 15px "Space Grotesk", sans-serif;
   line-height: 1.5;
   margin: 7px 0 13px;
 }

 .community-bars {
   display: flex;
   gap: 5px;
   justify-content: center;
 }

 .community-bars i {
   height: 4px;
   width: 35px;
   background: var(--orange);
   border-radius: 3px;
 }

 .community-bars i:nth-child(2) {
   opacity: .65
 }

 .community-bars i:nth-child(3) {
   opacity: .35
 }

 .project-body {
   padding: 22px;
 }

 .project-topline {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
 }

 .project-type {
   color: var(--blue);
   font-size: 9px;
   letter-spacing: 1px;
   font-weight: 700;
 }

 .project-index {
   color: #a9b8c9;
   font: 600 12px "Space Grotesk", sans-serif;
 }

 .project-body h3 {
   font-size: 18px;
   line-height: 1.35;
   margin-bottom: 10px;
 }

 .project-body p {
   color: var(--muted);
   font-size: 12px;
   line-height: 1.8;
   min-height: 66px;
   margin-bottom: 17px;
 }

 .tag-list {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin: 15px 0;
 }

 .tag-list span {
   background: #eef5ff;
   color: #285b94;
   padding: 5px 9px;
   border-radius: 6px;
   font-size: 9px;
   font-weight: 600;
 }

 .experience-section {
   background: linear-gradient(130deg, #071a2f, #0c2a4a);
 }

 .experience-section .section-heading h2 {
   color: white;
 }

 .experience-section .section-heading h2 span {
   color: var(--orange);
 }

 .timeline {
   max-width: 850px;
   margin-left: 8px;
   position: relative;
 }

 .timeline::before {
   content: "";
   position: absolute;
   top: 20px;
   bottom: 20px;
   left: 22px;
   width: 1px;
   background: #34516e;
 }

 .timeline-item {
   display: grid;
   grid-template-columns: 46px 1fr;
   gap: 22px;
   position: relative;
   margin: 0 0 30px;
 }

 .timeline-marker {
   width: 46px;
   height: 46px;
   display: grid;
   place-items: center;
   border-radius: 13px;
   border: 1px solid #355474;
   background: #102e4e;
   color: var(--orange);
   z-index: 1;
 }

 .timeline-marker svg {
   width: 20px;
 }

 .timeline-content {
   padding: 4px 0 25px;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
 }

 .timeline-item:last-child .timeline-content {
   border-bottom: 0;
 }

 .timeline-meta {
   display: flex;
   justify-content: space-between;
   gap: 15px;
   color: #9eb9d6;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 1.2px;
   margin-bottom: 9px;
 }

 .timeline-meta span:last-child {
   color: var(--orange);
   white-space: nowrap;
 }

 .timeline-content h3 {
   color: white;
   font-size: 18px;
   margin-bottom: 10px;
 }

 .timeline-content p {
   color: #b7c8da;
   font-size: 12px;
   line-height: 1.9;
   max-width: 720px;
   margin-bottom: 12px;
 }

 .tag-list-dark span {
   background: #173653;
   color: #c2d6eb;
 }

 .contact-grid {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 80px;
   align-items: start;
 }

 .contact-grid h2 {
   font-size: clamp(31px, 4vw, 44px);
 }

 .contact-grid h2 span {
   color: var(--blue);
 }

 .contact-details {
   display: grid;
   gap: 18px;
   margin-top: 32px;
 }

 .contact-row {
   display: flex;
   gap: 13px;
   align-items: center;
   width: fit-content;
 }

 .contact-icon {
   display: grid;
   place-items: center;
   width: 42px;
   height: 42px;
   background: white;
   border: 1px solid var(--line);
   border-radius: 12px;
   color: var(--blue);
 }

 .contact-icon svg {
   width: 18px;
 }

 .contact-row span:last-child {
   display: flex;
   flex-direction: column;
 }

 .contact-row small {
   color: var(--muted);
   font-size: 10px;
 }

 .contact-row strong {
   font-size: 12px;
   font-weight: 600;
 }

 .contact-form {
   background: white;
   padding: 28px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
 }

 .contact-form h3 {
   font-size: 21px;
   margin-bottom: 4px;
 }

 .contact-form>p {
   color: var(--muted);
   font-size: 11px;
   margin-bottom: 20px;
 }

 .form-row {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 14px;
 }

 .form-row label {
   font-size: 11px;
   font-weight: 700;
 }

 .form-row input,
 .form-row textarea {
   width: 100%;
   border: 1px solid #dce5ef;
   border-radius: 9px;
   padding: 12px 13px;
   outline: none;
   font-size: 12px;
   color: var(--ink);
   background: #fbfdff;
   transition: border .2s, box-shadow .2s;
 }

 .form-row input:focus,
 .form-row textarea:focus {
   border-color: #75a9ee;
   box-shadow: 0 0 0 3px rgba(23, 104, 212, .1);
 }

 .form-row textarea {
   resize: vertical;
   min-height: 110px;
 }

 .button-submit {
   width: 100%;
   border: 0;
 }

 .form-note {
   margin: 12px 0 0 !important;
   font-size: 10px !important;
 }

 .form-note code {
   background: #eef5ff;
   padding: 2px 4px;
   border-radius: 4px;
 }

 .site-footer {
   background: #061525;
   color: #d6e2ee;
   padding: 30px 0 17px;
 }

 .footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding-bottom: 25px;
 }

 .footer-brand .brand-mark {
   font-size: 25px;
 }

 .footer-inner>p {
   color: #94a9bf;
   font-size: 11px;
   margin: 0;
 }

 .back-top {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   color: #c9d8e7;
 }

 .back-top svg {
   width: 14px;
 }

 .footer-bottom {
   display: flex;
   justify-content: space-between;
   gap: 15px;
   padding-top: 16px;
   border-top: 1px solid #20354a;
   color: #7f95aa;
   font-size: 9px;
 }

 .toast {
   position: fixed;
   bottom: 22px;
   left: 50%;
   transform: translate(-50%, 20px);
   background: #102d4b;
   color: white;
   padding: 12px 18px;
   border-radius: 10px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
   font-size: 12px;
   opacity: 0;
   pointer-events: none;
   transition: .25s;
   z-index: 200;
   max-width: calc(100% - 30px);
 }

 .toast.show {
   opacity: 1;
   transform: translate(-50%, 0);
 }

 @media (max-width: 980px) {
   .nav-links {
     gap: 15px;
   }

   .nav-link {
     font-size: 11px;
   }

   .nav-links .button {
     display: none;
   }

   .hero-grid {
     gap: 15px;
   }

   .hero {
     padding-top: 60px;
   }

   .hero-visual {
     min-height: 340px;
   }

   .hero-monogram {
     width: 205px;
     height: 245px;
   }

   .about-grid,
   .contact-grid {
     gap: 38px;
   }

   .skills-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 740px) {
   .container {
     width: min(100% - 34px, 560px);
   }

   .site-header {
     height: 70px;
   }

   .brand-copy strong {
     font-size: 12px;
   }

   .brand-copy small {
     font-size: 9px;
   }

   .menu-toggle {
     display: grid;
     place-items: center;
   }

   .nav-links {
     display: none;
     position: absolute;
     top: 69px;
     left: 0;
     right: 0;
     padding: 18px 24px 22px;
     background: #081c32;
     border-bottom: 1px solid #203a56;
     flex-direction: column;
     align-items: stretch;
     gap: 0;
   }

   .nav-links.open {
     display: flex;
   }

   .nav-link {
     padding: 12px 0;
     font-size: 13px;
   }

   .nav-link.active::after {
     display: none;
   }

   .nav-links .button {
     display: inline-flex;
     margin-top: 8px;
   }

   .hero {
     padding: 52px 0 20px;
   }

   .hero-grid {
     grid-template-columns: 1fr;
     gap: 10px;
   }

   .hero-content {
     order: 1;
   }

   .hero-visual {
     order: 2;
     min-height: 300px;
     margin-top: 5px;
   }

   .hero-monogram {
     width: 190px;
     height: 220px;
     font-size: 70px;
   }

   .orbit-large {
     width: 270px;
   }

   .orbit-small {
     width: 215px;
   }

   .card-data {
     right: 0;
     top: 26px;
   }

   .card-community {
     left: 0;
     bottom: 26px;
   }

   .visual-caption {
     right: 8px;
     bottom: 0;
     font-size: 11px;
   }

   .hero-bottom {
     margin-top: 18px;
     padding-top: 20px;
     gap: 12px 20px;
   }

   .hero-bottom span {
     font-size: 10px;
   }

   h1 {
     font-size: clamp(42px, 12vw, 60px);
   }

   .hero-content h2 {
     line-height: 1.7;
   }

   .desktop-break {
     display: none;
   }

   .section {
     padding: 65px 0;
   }

   .section-heading {
     margin-bottom: 27px;
   }

   .heading-row {
     display: block;
   }

   .heading-row .section-intro {
     margin-top: 10px;
   }

   .about-grid,
   .contact-grid {
     grid-template-columns: 1fr;
     gap: 30px;
   }

   .about-panel {
     padding: 21px;
   }

   .skills-grid {
     grid-template-columns: 1fr;
     gap: 10px;
   }

   .skill-card {
     min-height: 80px;
   }

   .projects-grid {
     grid-template-columns: 1fr;
     gap: 17px;
   }

   .project-art {
     height: 180px;
   }

   .project-body p {
     min-height: auto;
   }

   .contact-form {
     padding: 22px;
   }

   .footer-inner {
     align-items: flex-start;
     flex-direction: column;
   }

   .footer-inner>p {
     order: 3;
   }

   .footer-bottom {
     flex-direction: column;
     gap: 5px;
   }

   .timeline-item {
     gap: 14px;
     grid-template-columns: 42px 1fr;
   }

   .timeline-marker {
     width: 42px;
     height: 42px;
   }

   .timeline::before {
     left: 20px;
   }

   .timeline-content h3 {
     font-size: 16px;
   }

   .timeline-meta {
     flex-wrap: wrap;
   }
 }

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

   *,
   *::before,
   *::after {
     transition-duration: .01ms !important;
     animation-duration: .01ms !important;
   }
 }