/* ------------------------------
   1. Design tokens & reset
--------------------------------- */
:root {
  color-scheme: light;
  --color-primary: #5b46e8;
  --color-primary-hover: #4935ce;
  --color-primary-soft: #ece9ff;
  --color-accent: #00a982;
  --color-bg: #f7f8fc;
  --color-surface: #ffffff;
  --color-surface-alt: #eff1f8;
  --color-text: #171825;
  --color-text-muted: #606477;
  --color-border: #dfe2ec;
  --color-header: rgba(247, 248, 252, 0.86);
  --shadow-sm: 0 8px 24px rgba(31, 27, 69, 0.08);
  --shadow-lg: 0 24px 60px rgba(31, 27, 69, 0.14);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --container: 74rem;
  --header-height: 4.75rem;
  --transition: 220ms cubic-bezier(.2, .75, .25, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #9587ff;
  --color-primary-hover: #afa5ff;
  --color-primary-soft: #29254a;
  --color-accent: #55d8b7;
  --color-bg: #101118;
  --color-surface: #181a24;
  --color-surface-alt: #20222e;
  --color-text: #f4f3fb;
  --color-text-muted: #aaaebe;
  --color-border: #303341;
  --color-header: rgba(16, 17, 24, 0.88);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.34);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
body { margin: 0; min-width: 20rem; background: var(--color-bg); color: var(--color-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background-color var(--transition), color var(--transition); }
body.menu-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.035em; }
::selection { background: var(--color-primary); color: #fff; }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 1000; top: 0.75rem; left: 0.75rem; padding: 0.65rem 1rem; border-radius: 0.5rem; background: var(--color-text); color: var(--color-bg); transform: translateY(-150%); transition: transform var(--transition); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(5rem, 9vw, 8rem); }
.section-tinted { background: var(--color-surface-alt); }

/* ------------------------------
   2. Header & navigation
--------------------------------- */
.site-header { position: sticky; z-index: 100; top: 0; height: var(--header-height); border-bottom: 1px solid transparent; background: var(--color-header); backdrop-filter: blur(16px); transition: border-color var(--transition), box-shadow var(--transition); }
.site-header.is-scrolled { border-color: var(--color-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }
.nav-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; }
.brand { justify-self: start; font-size: 1.75rem; font-weight: 900; letter-spacing: -0.08em; }
.brand-dot, h1 span, h2 span { color: var(--color-primary); }
.nav-list { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); }
.nav-list a { position: relative; padding-block: 0.4rem; color: var(--color-text-muted); font-size: 0.9rem; font-weight: 650; }
.nav-list a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--color-primary); content: ""; transform: scaleX(0); transform-origin: right; transition: transform var(--transition); }
.nav-list a:hover, .nav-list a.active { color: var(--color-text); }
.nav-list a:hover::after, .nav-list a.active::after { transform: scaleX(1); transform-origin: left; }
.icon-button { display: grid; width: 2.65rem; height: 2.65rem; padding: 0; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: transform var(--transition), border-color var(--transition), background var(--transition); }
.icon-button:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.theme-toggle { justify-self: end; }
.theme-toggle svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.theme-toggle .moon-icon { display: none; fill: currentColor; stroke: none; }
[data-theme="dark"] .theme-toggle .sun-icon { display: none; }
[data-theme="dark"] .theme-toggle .moon-icon { display: block; }
.menu-toggle { display: none; }

/* ------------------------------
   3. Hero
--------------------------------- */
.hero { position: relative; display: grid; min-height: calc(100svh - var(--header-height)); align-items: center; overflow: hidden; }
.hero::before { position: absolute; top: 8%; left: -8rem; width: 25rem; height: 25rem; border-radius: 50%; background: var(--color-primary-soft); content: ""; filter: blur(2px); opacity: 0.7; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(23rem, 0.9fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.eyebrow, .section-index { color: var(--color-primary); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.3rem; }
.status-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 18%, transparent); animation: pulse 2.2s infinite; }
.hero h1 { max-width: 13ch; margin-bottom: 1.5rem; font-size: clamp(3rem, 6.2vw, 5.5rem); }
.hero-copy { max-width: 43rem; margin-bottom: 2rem; color: var(--color-text-muted); font-size: clamp(1.05rem, 1.8vw, 1.22rem); }
.button-group, .project-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.button { display: inline-flex; min-height: 3.15rem; padding: 0.7rem 1.25rem; align-items: center; justify-content: center; gap: 0.75rem; border: 1px solid transparent; border-radius: 0.75rem; font-weight: 750; line-height: 1; cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition); }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--color-primary); color: #fff; box-shadow: 0 9px 22px color-mix(in srgb, var(--color-primary) 28%, transparent); }
.button-primary:hover { background: var(--color-primary-hover); box-shadow: 0 13px 30px color-mix(in srgb, var(--color-primary) 36%, transparent); }
.button-secondary { border-color: var(--color-border); background: var(--color-surface); }
.button-secondary:hover { border-color: var(--color-primary); }
.social-links { display: flex; gap: 0.65rem; margin-top: 2rem; }
.social-links a { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-muted); transition: color var(--transition), border-color var(--transition), transform var(--transition); }
.social-links a:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-3px); }
.social-links svg { width: 1.1rem; fill: currentColor; }

.hero-visual { position: relative; min-height: 29rem; }
.code-window { position: absolute; z-index: 2; top: 50%; left: 50%; width: min(100%, 31rem); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); background: #171824; color: #e9e7f5; box-shadow: var(--shadow-lg); transform: translate(-50%, -50%) rotate(2deg); transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.hero-visual:hover .code-window { transform: translate(-50%, -52%) rotate(0); }
.window-bar { display: flex; height: 3.1rem; padding-inline: 1rem; align-items: center; gap: 0.45rem; border-bottom: 1px solid rgba(255,255,255,.08); background: #202230; }
.window-bar span { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #ff6b6b; }
.window-bar span:nth-child(2) { background: #ffd166; }
.window-bar span:nth-child(3) { background: #55d187; }
.window-bar small { margin-left: auto; color: #9296aa; }
.code-window pre { margin: 0; padding: clamp(1.4rem, 4vw, 2.2rem); font: 500 clamp(0.78rem, 1.5vw, 0.98rem)/1.9 ui-monospace, SFMono-Regular, Consolas, monospace; }
.code-purple { color: #c4a7ff; }.code-green { color: #8ee7b2; }.code-blue { color: #73b9ff; }
.hero-visual::before, .hero-visual::after { position: absolute; border-radius: 50%; content: ""; }
.hero-visual::before { top: 1rem; right: -1rem; width: 14rem; height: 14rem; border: 2px dashed var(--color-primary); opacity: .35; animation: spin 30s linear infinite; }
.hero-visual::after { bottom: 0; left: 0; width: 8rem; height: 8rem; background: var(--color-accent); filter: blur(60px); opacity: .35; }
.floating-tag { position: absolute; z-index: 3; padding: 0.55rem 0.9rem; border: 1px solid var(--color-border); border-radius: 3rem; background: var(--color-surface); box-shadow: var(--shadow-sm); font-size: 0.77rem; font-weight: 800; animation: float 4s ease-in-out infinite; }
.tag-react { top: 3rem; left: 0; color: #1689a5; }.tag-css { right: 0; bottom: 4rem; color: var(--color-primary); animation-delay: -1.5s; }.tag-ts { bottom: 1rem; left: 20%; color: #2875c3; animation-delay: -2.5s; }

/* ------------------------------
   4. Section headings & about
--------------------------------- */
.section-heading { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-heading h2, .contact-copy h2 { margin-bottom: 0; font-size: clamp(2.15rem, 4.2vw, 3.6rem); }
.section-index { margin-bottom: 1rem; }
.section-heading-row { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 2rem; }
.section-heading-row > p { max-width: 30rem; margin: 0; color: var(--color-text-muted); }
.about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 9vw, 8rem); }
.about-copy > p { color: var(--color-text-muted); font-size: 1.08rem; }
.about-copy strong { color: var(--color-text); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--color-border); gap: 1rem; }
.stats div { display: flex; align-items: center; gap: 0.75rem; }
.stats dt { color: var(--color-primary); font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 850; line-height: 1; letter-spacing: -0.06em; }
.stats dd { margin: 0; color: var(--color-text-muted); font-size: 0.72rem; line-height: 1.4; }

/* ------------------------------
   5. Skills
--------------------------------- */
.skills-grid { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; gap: 1.25rem; }
.skill-card { position: relative; min-height: 22rem; padding: clamp(1.5rem, 3vw, 2.2rem); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.skill-card:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); box-shadow: var(--shadow-sm); transform: translateY(-6px); }
.skill-card-featured { background: var(--color-primary); color: #fff; }
.skill-card-featured .card-label { color: rgba(255,255,255,.72); }
.skill-icon { display: grid; width: 3.2rem; height: 3.2rem; margin-bottom: 3.25rem; place-items: center; border-radius: 0.85rem; background: var(--color-primary-soft); color: var(--color-primary); font: 800 1rem ui-monospace, monospace; }
.skill-card-featured .skill-icon { background: rgba(255,255,255,.16); color: #fff; }
.card-label { margin-bottom: 0.4rem; color: var(--color-text-muted); font-size: 0.73rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.skill-card h3 { margin-bottom: 1.5rem; font-size: 1.75rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.tag-list li { padding: 0.35rem 0.7rem; border: 1px solid var(--color-border); border-radius: 2rem; background: var(--color-bg); font-size: 0.78rem; font-weight: 650; }
.skill-card-featured .tag-list li { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.11); }

/* ------------------------------
   6. Projects
--------------------------------- */
.projects-list { display: grid; gap: clamp(3rem, 8vw, 7rem); }
.project-card { display: grid; grid-template-columns: minmax(20rem, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform 350ms cubic-bezier(.2,.75,.25,1), box-shadow 350ms ease; }
.project-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.project-card-reverse .project-preview { order: 2; }
.project-preview { position: relative; display: grid; min-height: 42rem; padding: clamp(1.5rem, 4vw, 3rem); place-items: center; overflow: hidden; }
.preview-luxestay { background: linear-gradient(145deg, #111a3d, #3349a6 58%, #7a73e6); }
.preview-noteflow { background: linear-gradient(145deg, #0f3c35, #167763 60%, #51c59f); }
.project-number { position: absolute; right: 1.5rem; bottom: .2rem; color: rgba(255,255,255,.12); font-size: 8rem; font-weight: 900; line-height: 1; letter-spacing: -.08em; }
.browser-frame { z-index: 1; width: 118%; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: .8rem; background: #f4f5fb; box-shadow: 0 25px 50px rgba(0,0,0,.3); transform: translateX(8%) rotate(-2deg); transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.project-card:hover .browser-frame { transform: translateX(4%) rotate(0); }
.browser-top { display: flex; height: 2rem; align-items: center; gap: .3rem; padding-inline: .7rem; background: #fff; }
.browser-top span { width: .38rem; height: .38rem; border-radius: 50%; background: #fd6b63; }.browser-top span:nth-child(2){background:#f3bd4f}.browser-top span:nth-child(3){background:#55c96d}
.dashboard-mock { display: grid; grid-template-columns: 22% 1fr; min-height: 18rem; }
.mock-sidebar { display: grid; align-content: start; gap: 1rem; padding: 1.2rem .7rem; background: #171b34; }
.mock-sidebar i { height: .45rem; border-radius: 1rem; background: rgba(255,255,255,.18); }.mock-sidebar i:first-child{width:70%;background:#7b74ea}
.mock-content { padding: 1.3rem; }.mock-content > b { display:block;width:35%;height:.7rem;margin-bottom:1.2rem;border-radius:1rem;background:#222b48}
.mock-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem }.mock-metrics i{height:3.2rem;border-radius:.5rem;background:#e1e4f1}.mock-metrics i:nth-child(2){background:#e9e5ff}
.mock-chart { position:relative;height:9rem;margin-top:1rem;border-radius:.5rem;background:repeating-linear-gradient(to bottom,#eef0f7 0 1px,transparent 1px 2rem) }
.mock-chart span { position:absolute;inset:18% 4% 22%;clip-path:polygon(0 75%,17% 45%,34% 65%,51% 18%,68% 45%,84% 5%,100% 30%,100% 100%,0 100%);background:linear-gradient(to bottom,rgba(91,70,232,.42),rgba(91,70,232,.03));border-bottom:2px solid #5b46e8 }
.phone-frame { z-index: 1; width: 15.5rem; min-height: 31rem; padding: .8rem; border: 5px solid #171825; border-radius: 2.5rem; background: #f7f8fc; box-shadow: 0 25px 50px rgba(0,0,0,.3); transform: rotate(4deg); transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.project-card:hover .phone-frame { transform: rotate(0) translateY(-5px); }
.phone-speaker { width: 3rem;height:.35rem;margin:.15rem auto 1.5rem;border-radius:1rem;background:#252634 }
.notes-mock { padding:.7rem;color:#171825 }.notes-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.notes-head b{font-size:1.05rem}.notes-head i{width:1.6rem;height:1.6rem;border-radius:50%;background:#d9f5ec}
.online-pill{display:inline-block;margin-bottom:1.4rem;padding:.25rem .55rem;border-radius:1rem;background:#dff7ef;color:#187f66;font-size:.55rem;font-weight:800}
.note-line{display:grid;grid-template-columns:2.3rem 1fr;gap:.7rem;align-items:center;margin-bottom:.65rem;padding:.75rem;border-radius:.7rem;background:#fff;box-shadow:0 4px 12px rgba(20,70,60,.07)}.note-line i{height:2.3rem;border-radius:.5rem;background:#ddf4ed}.note-line b{height:.45rem;border-radius:1rem;background:#d4d8e2}
.sync-card { position:absolute;z-index:2;right:5%;bottom:16%;display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-radius:.8rem;background:#fff;color:#171825;box-shadow:0 15px 35px rgba(0,0,0,.2);animation:float 4s ease-in-out infinite }.sync-card>span{display:grid;width:1.8rem;height:1.8rem;place-items:center;border-radius:50%;background:#dff7ef;color:#118064;font-weight:900}.sync-card b,.sync-card small{display:block;line-height:1.2}.sync-card b{font-size:.7rem}.sync-card small{margin-top:.2rem;color:#747789;font-size:.55rem}
.project-body { padding: clamp(1.75rem, 5vw, 4rem); }
.project-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; color: var(--color-primary); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.project-meta span + span::before { margin-right: .6rem; color: var(--color-border); content: "•"; }
.project-body h3 { margin-bottom: 1rem; font-size: clamp(2rem, 3.5vw, 3rem); }
.project-body h3 small { display: block; margin-top: .45rem; color: var(--color-text-muted); font-size: .95rem; font-weight: 550; letter-spacing: 0; }
.project-body > p { color: var(--color-text-muted); }
.tech-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-block: 1.25rem 1.5rem; }
.tech-list li { padding: .32rem .65rem; border-radius: .4rem; background: var(--color-primary-soft); color: var(--color-primary); font: 700 .7rem ui-monospace, monospace; }
.contribution-box { padding: 1.35rem; border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-bg); }
.contribution-box h4 { margin-bottom: .8rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.check-list { display: grid; gap: .48rem; }
.check-list li { position: relative; padding-left: 1.35rem; color: var(--color-text-muted); font-size: .82rem; line-height: 1.5; }
.check-list li::before { position: absolute; left: 0; color: var(--color-accent); content: "✓"; font-weight: 900; }
.backend-note { margin-block: 1.15rem; font-size: .78rem; }
.backend-note strong { color: var(--color-text); }
.text-link { padding: .65rem .2rem; color: var(--color-text); font-weight: 750; }
.text-link span { display: inline-block; margin-left: .4rem; transition: transform var(--transition); }.text-link:hover span{transform:translateX(5px)}

/* ------------------------------
   7. Contact & footer
--------------------------------- */
.contact-section { background: var(--color-text); color: var(--color-bg); }
[data-theme="dark"] .contact-section { background: #0b0c12; color: var(--color-text); }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 9vw, 8rem); align-items: start; }
.contact-copy > p:not(.section-index) { max-width: 34rem; margin-block: 1.5rem 2rem; color: color-mix(in srgb, var(--color-bg) 68%, transparent); }
[data-theme="dark"] .contact-copy > p:not(.section-index) { color: var(--color-text-muted); }
.contact-links { display: grid; gap: .6rem; }
.contact-links a { display: flex; width: fit-content; align-items: center; gap: .8rem; }
.contact-links a > span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid color-mix(in srgb, var(--color-bg) 25%, transparent); border-radius: 50%; color: var(--color-primary); font-size: .76rem; font-weight: 850; }
.contact-links small, .contact-links strong { display: block; line-height: 1.4; }.contact-links small{color:color-mix(in srgb,var(--color-bg) 50%,transparent);font-size:.65rem;text-transform:uppercase;letter-spacing:.08em}.contact-links strong{font-size:.85rem}
.contact-form { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid color-mix(in srgb, var(--color-bg) 15%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 5%, transparent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { margin-bottom: 1.15rem; }
.form-field label { display: block; margin-bottom: .42rem; font-size: .75rem; font-weight: 750; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent); border-radius: .65rem; outline: none; background: color-mix(in srgb, var(--color-bg) 7%, transparent); color: inherit; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.form-field input { height: 3rem; padding-inline: .9rem; }.form-field textarea{padding:.8rem .9rem;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder{color:color-mix(in srgb,var(--color-bg) 40%,transparent)}
.form-field input:focus,.form-field textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 25%,transparent);background:color-mix(in srgb,var(--color-bg) 10%,transparent)}
.contact-form .button { border: 0; }
.form-status { min-height: 1.5rem; margin: .7rem 0 0; color: var(--color-accent); font-size: .78rem; }
.site-footer { padding-block: 1.5rem; border-top: 1px solid var(--color-border); background: var(--color-bg); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--color-text-muted); font-size: .76rem; }.footer-inner p{margin:0}.footer-inner a{font-weight:750;color:var(--color-text)}

/* ------------------------------
   8. Reveal & motion
--------------------------------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse { 50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--color-accent) 0%,transparent)} }

/* ------------------------------
   9. Responsive layouts
--------------------------------- */
@media (max-width: 62rem) {
  .hero-grid { grid-template-columns: 1fr .85fr; gap: 2.5rem; }
  .hero-visual { min-height: 24rem; }.floating-tag{display:none}
  .skills-grid { grid-template-columns: 1fr 1fr; }.skill-card-featured{grid-column:1/-1;min-height:auto}.skill-icon{margin-bottom:2rem}
  .project-card { grid-template-columns: 1fr; }.project-card-reverse .project-preview{order:0}.project-preview{min-height:31rem}.browser-frame{width:min(90%,35rem);transform:rotate(-2deg)}.project-card:hover .browser-frame{transform:rotate(0)}
}

@media (max-width: 48rem) {
  :root { --header-height: 4.25rem; }
  .nav-wrap { grid-template-columns: 1fr auto auto; gap: .65rem; }
  .site-nav { order: 3; }
  .menu-toggle { display: flex; flex-direction: column; gap: 4px; border-radius: .7rem; }
  .menu-line { width: 1.15rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--transition), opacity var(--transition); }
  .menu-toggle[aria-expanded="true"] .menu-line:first-child{transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded="true"] .menu-line:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] .menu-line:last-child{transform:translateY(-6px) rotate(-45deg)}
  .nav-list { position: fixed; z-index: -1; top: var(--header-height); right: 0; left: 0; display: grid; padding: 1rem max(1rem, calc((100% - var(--container))/2)); border-bottom: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: opacity var(--transition), transform var(--transition); }
  .nav-list.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-list a { display: block; padding: .75rem; border-radius: .5rem; }.nav-list a::after{display:none}.nav-list a:hover{background:var(--color-bg)}
  .hero { min-height: auto; padding-top: 5.5rem; }.hero-grid{grid-template-columns:1fr}.hero-content{text-align:center}.hero h1,.hero-copy{margin-inline:auto}.eyebrow,.button-group,.social-links{justify-content:center}.hero-visual{min-height:24rem;margin-top:1rem}
  .section-heading-row { display: block; }.section-heading-row > p{margin-top:1.2rem}
  .about-grid,.contact-grid { grid-template-columns: 1fr; }
  .stats { gap: .5rem; }.stats div{display:block}.stats dd{margin-top:.4rem}
  .project-preview{min-height:27rem}.phone-frame{width:13rem;min-height:26rem}.sync-card{right:8%;bottom:10%}
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 30rem) {
  .container { width: min(calc(100% - 1.25rem), var(--container)); }
  .section { padding-block: 4.25rem; }
  .hero { padding-top: 4.25rem; }.hero h1{font-size:clamp(2.55rem,14vw,3.5rem)}
  .button-group .button { width: 100%; }
  .hero-visual{min-height:20rem}.code-window{width:96%}.code-window pre{font-size:.68rem}.window-bar{height:2.6rem}
  .skills-grid { grid-template-columns: 1fr; }.skill-card-featured{grid-column:auto}.skill-card{min-height:auto}.skill-icon{margin-bottom:1.5rem}
  .stats { grid-template-columns: 1fr; }.stats div{display:flex;padding-block:.6rem;border-bottom:1px solid var(--color-border)}
  .project-card { border-radius: 1.25rem; }.project-preview{min-height:23rem}.browser-frame{width:105%}.dashboard-mock{min-height:14rem}.mock-chart{height:6rem}.phone-frame{width:11rem;min-height:22rem}.note-line{padding:.5rem}.sync-card{right:3%;transform:scale(.9)}
  .project-body { padding: 1.35rem; }.contribution-box{padding:1rem}.project-actions .button{width:100%}.project-actions .text-link{margin-inline:auto}
  .contact-links strong { font-size: .75rem; word-break: break-word; }
  .footer-inner { display: grid; text-align: center; }.footer-inner a{justify-self:center}
}

@media (min-width: 75rem) {
  .container { width: min(calc(100% - 4rem), var(--container)); }
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}