/*
  Hannah Bua — Portfolio styles (clarified edition)
  ------------------------------------------------
  Goals of this pass
  • Keep your visual style exactly the same
  • Make the file easier to scan & maintain
  • Group related rules, add section headers, reduce repetition
  • Add small a11y/perf safeguards (focus-visible, reduced motion)

  Structure (search for these headers):
  01) CSS Reset & Base
  02) Design Tokens (CSS variables)
  03) Layout helpers & Utilities
  04) Global Typography & Links
  05) Header & Navigation
  06) Sections (generic)
  07) Buttons
  08) Hero
  09) Social Icons
  10) About
  11) Portfolio (segmented tabs, grid, cards)
  12) Project Details Modal
  13) Contact
  14) Footer
  15) Preloader
  16) Gallery Modal
  17) Certificates Grid
  18) Tools (skills / stack)
  19) CV Request Modal
  20) Custom Scrollbar (purple theme)
  21) Responsive Queries
  22) Motion Preferences
*/

/* ============================================
   01) CSS Reset & Base
   Keep the reset minimal to avoid specificity wars.
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 10%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }

/* ============================================
   02) Design Tokens (CSS variables)
   Central place for theme colors, radii, spacing.
   ============================================ */
:root {
  color-scheme: dark; /* hint browsers for form controls, etc. */
  --bg: #000;
  --text: #e9e9ef;
  --muted: #b5b7c6;
  --surface: #000;
  --surface-2: #000;
  --border: #23252f;
  --accent: #a78bfa;       /* lavender */
  --accent-2: #7c5dfa;     /* deeper indigo */
  --ring: rgba(167,139,250,.35);
  --radius: 14px;
  --gutter: 0.75rem;       /* horizontal page padding (each side) */
  --container-max: 1300px; /* max content width */
}

/* ============================================
   03) Layout helpers & Utilities
   ============================================ */
.container { width: min(var(--container-max), calc(100% - var(--gutter)*2)); margin-inline: auto; }
.accent { color: var(--accent); }
.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; }
.skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 200; transition: top .25s; font-weight: 600; letter-spacing: .5px; }
.skip-link:focus { top: 8px; outline: 3px solid var(--ring); }
.pattern-dots { background: #000 !important; position: relative; }

/* ============================================
   04) Global Typography & Links
   ============================================ */
body { background: var(--bg); color: var(--text); font: 16px/1.6 "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; }

a { color: var(--accent); text-decoration: none; }
a:hover:not(.nav-link), a:focus:not(.nav-link) { text-decoration: underline; }

/* ============================================
   05) Header & Navigation
   Sticky header with glassy backdrop. Mobile menu uses .nav.is-open
   and body.nav-open (overflow hidden).
   ============================================ */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,.75); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 0; }
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand img { height: 50px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.brand:hover img { filter: drop-shadow(0 2px 10px rgba(124,93,250,.35)); }
.brand:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; border-radius: 8px; }

.nav { display: flex; gap: 40px; }
.nav-link { position: relative; padding: 4px 2px 2px; color: #f1f1f6; font-weight: 600; letter-spacing: .2px; transition: color .2s ease; text-decoration: none; }
.nav-link:hover:not(.active):not([aria-current="page"]),
.nav-link:focus:not(.active):not([aria-current="page"]) { color: #ffffff; text-decoration: none; }
.nav-link.active:focus,
.nav-link[aria-current="page"]:focus { color: var(--accent); }
.nav-link.active, .nav-link[aria-current="page"] { color: var(--accent); }
.nav-link.active:hover, .nav-link[aria-current="page"]:hover { color: var(--accent); }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-link.active::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Mobile nav toggle */
.nav-toggle { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 50px; height: 50px; border-radius: 14px; border: 1px solid #23252f; background: #000; cursor: pointer; position: relative; transition: background .3s ease, border-color .3s ease, box-shadow .35s ease; }
.nav-toggle span { display: block; width: 26px; height: 3px; border-radius: 2px; background: #ededf6; transition: transform .45s cubic-bezier(.22,.82,.25,1), opacity .35s ease, background .3s ease; }
.nav-toggle:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-2), 0 6px 18px -4px rgba(0,0,0,.55); }
.nav-toggle:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
body.nav-open { overflow: hidden; }

@media (max-width: 860px) {
  .nav { position: fixed; top: 72px; right: 12px; left: 12px; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 26px 28px; background: #000; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 28px 60px -16px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04) inset; transform: translateY(-14px) scale(.95); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .5s cubic-bezier(.22,.82,.25,1); }
  .nav.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .nav-link { font-size: 18px; padding: 10px 2px; width: 100%; text-align: left; }
  .nav-toggle { display: inline-flex; margin-left: auto; order: 3; }
  .header-inner { gap: 14px; }
}

/* ============================================
   06) Sections (generic)
   ============================================ */
.section { padding: 50px 0; scroll-margin-top: 96px; }
.section-title { margin: 0 0 10px; letter-spacing: .2px; }
.section-title-mega { font-family: "Playfair Display", serif; font-weight: 700; font-size: 90px; line-height: .95; }
.section-title-display { font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(36px,6vw,64px); color: var(--accent); line-height: 1; }
.section-lead { color: var(--muted); max-width: 80ch; margin: 0 0 24px; }

/* ============================================
   07) Buttons
   ============================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: #e7e7f1; box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); }
.btn:hover { border-color: var(--accent); color: #fff; }
.btn-primary { border: 0; background: linear-gradient(180deg,#8a7cf1,#6f5de6); color: #fff; box-shadow: 0 10px 24px rgba(124,93,250,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.btn-primary:hover { filter: brightness(1.05); }
.btn:focus-visible { outline: 3px solid var(--ring); }

/* ============================================
   08) Hero
   ============================================ */
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 32px; }
.hero-eyebrow { margin: 0 0 0 8px; font-size: 36px; opacity: .9; }
.hero-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(44px,8vw,85px); line-height: .95; margin: 0; }
.name-line { display: block; color: var(--accent); }
.hero-subtitle { font-size: clamp(18px,3vw,24px); margin: 18px 0 24px; }
@keyframes caret { 50% { opacity: 0; } }
.hero-art { position: relative; display: inline-block; width: max-content; justify-self: end; }
.hero-glow {
  position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; transform: translate(-50%,-50%); border-radius: 50%;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(167,139,250,.55), transparent 65%),
    radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.85), transparent 75%);
  filter: blur(22px); z-index: 0;
}
.hero-art img { position: relative; z-index: 1; width: min(520px,90vw); border-radius: 20px; filter: drop-shadow(0 20px 60px rgba(0,0,0,.6)); }

/* ============================================
   09) Social Icons
   ============================================ */
.social-icons a { text-decoration: none; color: #ababab; font-size: 30px; margin-right: 16px; display: inline-block; transition: transform .5s; }
.social-icons a:hover { color: var(--accent); transform: translateY(-5px); }
/* Fallback SVGs (inline) appear if Font Awesome fails */
.social-icons .soc-fallback { display: none; line-height: 1; }
.social-icons .show-fallback i { display: none !important; }
.social-icons .show-fallback .soc-fallback { display: inline-block; }

/* ============================================
   10) About
   Tabs controlled with .about-tab.is-active and matching .about-panel.is-active
   ============================================ */
.about-section { padding: 5px 0; scroll-margin-top: 96px; min-height: 600px; position: relative; margin-bottom: 0; }
.about-grid { display: grid; grid-template-columns: 35% 60%; gap: 40px; align-items: start; grid-template-areas: "intro side"; height: 100%; }
.about-intro { grid-area: intro; }
.about-intro p { color: #e5e5ee; font-size: 18px; line-height: 1.8; max-width: 60ch; margin: 80px 0 0 0; text-align: justify; letter-spacing: 0.2px; text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.about-intro .tw-cursor { display: inline-block; margin-left: 2px; color: var(--accent); animation: blink 1s steps(1) infinite; }
.about-intro .tw-cursor.done { animation: blink 1.2s steps(1) 4, fadeCursor .6s ease forwards 4.8s; }
/* Ghost reservation technique for typewriter (prevents layout shift) */
.about-intro .about-typewriter { position: relative; }
.about-typewriter .ghost-line { visibility: hidden; pointer-events: none; display: block; }
.about-typewriter .tw-layer { position: absolute; inset: 0; display: block; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fadeCursor { to { opacity: 0; transform: translateY(-2px); } }
.about-side { grid-area: side; display: flex; flex-direction: column; gap: 22px; }
.about-tabs { display: flex; gap: 26px; align-items: center; border-top: 3px solid var(--accent); padding-top: 32px; margin-top: -48px; padding-left: 20px; flex-wrap: nowrap; }
.about-tab { background: none; border: 0; color: #d9d9e2; font-weight: 800; letter-spacing: .15px; padding: 0 0 6px; cursor: pointer; position: relative; font-size: clamp(.95rem,2.4vw,1.18rem); white-space: nowrap; transition: color .25s ease, text-shadow .4s ease; }
.about-tab:hover, .about-tab:focus-visible { color: #fff; }
.about-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg,var(--accent),#7c5dfa); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,.82,.25,1); }
.about-tab.is-active { color: #fff; text-shadow: 0 0 6px rgba(167,139,250,.35); }
.about-tab.is-active::after { transform: scaleX(1); }
.about-panels { margin-top: 4px; min-height: 400px; position: relative; }
.about-panel[hidden] { display: none; }
.about-panel { width: 100%; position: absolute; top: 0; left: 0; padding: 8px 10px 14px 24px; background: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .45s cubic-bezier(.22,.82,.25,1); }
.about-panel.is-active { opacity: 1; transform: translateY(0); }
.about-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.about-entry-year { color: var(--accent); font-weight: 800; font-size: 1.15rem; }
.about-entry-title { color: #e9e9ef; margin-top: 2px; font-size: 16px; line-height: 1.6; }
.about-bullets { list-style: none; margin: 4px 0 0 0; padding: 0; }
.about-bullets li { position: relative; padding-left: 16px; color: #dcdce7; }
.about-bullets li::before { content: "•"; position: absolute; left: 0; top: 0; color: #d0d1dc; }
.about-subtitle { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; letter-spacing: .3px; color: #fff; position: relative; }
.about-subtitle::after { content: ""; display: block; height: 2px; background: var(--accent); border-radius: 2px; margin-top: 6px; opacity: .8; }
.about-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; padding-right: 20px; }
.about-list li { background: #000; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.about-list-title { display: block; color: #f0f0f7; font-weight: 600; font-size: 16px; line-height: 1.6; }
.about-list-meta { display: block; color: var(--muted); font-size: .92rem; margin-top: 2px; }

/* ============================================
   11) Portfolio (section + segmented filters + grid + cards)
   ============================================ */
.portfolio-section { margin: 0; padding: 54px 0 72px; text-align: center; width: 100%; }
@media (min-width: 1200px) { .portfolio-section { padding-top: 48px; } }
.portfolio-section h2 { font-size: 64px; font-weight: 700; color: #ffffff; margin-bottom: 24px; }
.portfolio-section p { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 800px; margin: 0 auto 12px; }

/* Segmented control */
.segmented { display: inline-flex; gap: 4px; flex-wrap: nowrap; background: #000; border: 1px solid rgba(255,255,255,0.1); padding: 8px; margin: 10px auto 26px; justify-content: center; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); width: fit-content; max-width: 100%; }
.seg-item { appearance: none; border: 0; background: transparent; color: #cfd0db; padding: 14px 60px; min-width: 250px; border-radius: 12px; font-weight: 600; font-size: 16px; cursor: pointer; text-align: center; transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.seg-item:hover { color: #fff; }
.seg-item.is-active { color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.seg-item::before { content: ""; position: absolute; inset: 0; background: #1B1E38; opacity: 0; transition: opacity .3s ease; }
.seg-item.is-active::before { opacity: 1; }
.seg-item span { position: relative; z-index: 1; }

/* Grid + cards */
.grid { margin: 4px auto 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap: 40px; max-width: 1300px; padding: 0; width: 100%; }
.card { background: #0d0d11; border: 1px solid var(--border); border-radius: 20px; padding: 0; box-shadow: 0 8px 30px rgba(0,0,0,.4); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.card-thumb-wrap { padding: 18px 18px 10px; display: flex; justify-content: center; align-items: center; }
.card-thumb-wrap .card-image { border-radius: 10px; border: 1px solid #2a2d39; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.card-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

/* Achievement tweaks */
.achievement-card .card-thumb-wrap { padding-bottom: 18px; }
.achievement-card .card-image { aspect-ratio: auto; max-height: 420px; object-fit: contain; background: #0d0d11; }

/* Programming Languages emphasis */
#panel-programming-languages .about-bullets li { font-size: 1.18rem; font-weight: 600; letter-spacing: .3px; }

.card-content { padding: 24px 24px 0; text-align: left; flex: 1; display: flex; flex-direction: column; }
.card-title { margin: 0 0 12px; font-size: clamp(18px,1.25vw,21px); font-weight: 600; color: var(--accent); line-height: 1.4; }
.achievement-card .card-title { color: #ffffff; }
.card-text { margin: 0 0 20px; color: var(--muted); line-height: 1.6; font-size: 15px; flex: 1; }

/* Single and multi action links */
.card-link { display: inline-flex; align-items: center; width: calc(100% - 48px); padding: 14px 20px; background: #0d0d11; border: 1px solid #2a2d39; border-radius: 12px; color: #f1f1f6; font-weight: 500; font-size: 15px; text-align: center; justify-content: center; margin: 0 24px 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); text-decoration: none; }
.card-link:hover { text-decoration: none; }
.card-link, .card-link:visited, .card-link:hover, .card-link:focus { text-decoration: none !important; }

.card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 24px 24px; }
.card-actions .card-link { margin: 0; width: auto; flex: 1 1 auto; position: relative; overflow: hidden; cursor: pointer; background: #000; border: 1px solid #2b2f3a; transition: background .35s, box-shadow .35s, transform .35s, border-color .35s, color .35s; }
.card-actions .card-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(circle at 30% 20%, rgba(180,170,255,.35), rgba(120,110,255,0) 60%); mix-blend-mode: screen; opacity: 0; transition: opacity .4s ease; }
.card-actions .card-link:hover::after { opacity: .9; }
.card-actions .card-link:hover, .card-actions .card-link:focus-visible { background: #050505; border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2), 0 0 18px -2px var(--accent-2), 0 4px 18px -4px rgba(0,0,0,.55); transform: translateY(-2px); color: #fff; }
.card-actions .card-link:active { transform: translateY(0); box-shadow: 0 0 0 1px var(--accent), 0 0 10px -2px var(--accent); }
.card-actions .card-link:focus-visible { outline: 0; }

@keyframes pulseButtonGlow {
  0% { box-shadow: 0 0 0 0 rgba(140,130,255,.0); }
  40% { box-shadow: 0 0 0 4px rgba(140,130,255,.18); }
  70% { box-shadow: 0 0 0 0 rgba(140,130,255,.0); }
  100% { box-shadow: 0 0 0 0 rgba(140,130,255,.0); }
}
.card-actions .card-link { animation: pulseButtonGlow 3s ease .6s 1; }

/* ============================================
   12) Project Details Modal
   ============================================ */
.proj-modal { position: fixed; inset: 0; z-index: 1010; display: none; place-items: center; background: rgba(0,0,0,.8); backdrop-filter: blur(6px); }
.proj-modal.is-visible { display: grid; }
.proj-modal-backdrop { position: absolute; inset: 0; }
.proj-modal-panel { position: relative; z-index: 2; width: min(860px,92%); max-height: 86vh; overflow: auto; border-radius: 20px; background: #000; border: 1px solid #272b35; box-shadow: 0 20px 55px -10px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04) inset; padding: 34px 38px 42px; animation: scaleIn .45s cubic-bezier(.4,0,.2,1); }
.proj-modal-title { margin: 0 0 26px; font-size: clamp(26px,4.2vw,42px); font-weight: 700; line-height: 1.1; color: #fff; font-family: "Playfair Display", serif; text-shadow: 0 4px 22px rgba(0,0,0,.5); }
.proj-subtitle { margin: 22px 0 10px; font-size: 17px; font-weight: 600; letter-spacing: .4px; color: var(--accent); text-transform: uppercase; }
.proj-section:first-of-type .proj-subtitle { margin-top: 0; }
.proj-features, .proj-tech { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.proj-features li::before { content: "•"; color: var(--accent); margin-right: 6px; }
.proj-features li { display: flex; align-items: flex-start; line-height: 1.5; color: #e6e7ef; }
.proj-desc { color: #cfcfd7; line-height: 1.65; margin: 0; }
.proj-tech { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.proj-tech li { background: #1c1f29; border: 1px solid #2f3341; padding: 6px 14px; border-radius: 30px; font-size: 13px; color: #e1e2eb; letter-spacing: .3px; }
.proj-close { position: absolute; top: 12px; right: 14px; width: 42px; height: 42px; border-radius: 12px; background: #181a21; color: #d4d5dd; font-size: 28px; line-height: 1; font-weight: 600; border: 1px solid #2a2d37; cursor: pointer; }
.proj-close:hover { background: #20232c; color: #fff; }
@keyframes scaleIn { 0% { transform: translateY(18px) scale(.92); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }

/* ============================================
   13) Contact
   ============================================ */
.contact-section { padding-top: 60px; }
.contact-heading { margin: 0 0 10px; text-align: left; color: #ffffff; }
.contact-intro { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 60ch; margin: -6px 0 4px; text-align: left; letter-spacing: .2px; }
.contact-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.contact-info { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-list li { display: flex; gap: 12px; align-items: center; margin: 0; }
.icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.icon i { font-size: 14px; line-height: 1; }

.contact-form { background: #000; border: 1px solid var(--border); border-radius: 16px; padding: 24px 28px; box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; grid-column: 2 / 3; width: 100%; max-width: 100%; justify-self: stretch; }
.contact-form label { display: block; font-family: inherit; font-weight: 600; letter-spacing: .3px; font-size: 14px; }
.contact-form input, .contact-form textarea { width: 100%; background: #0b0c12; color: #e8e8f1; border: 1px solid #2a2d39; border-radius: 12px; padding: 14px 16px; outline: 0; font-family: inherit; font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: .2px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { font-family: inherit; color: #7d7f8d; opacity: 1; letter-spacing: .2px; }
.contact-form textarea { resize: none; min-height: 260px; max-height: 480px; }
@media (max-width: 960px) { .contact-form { grid-column: 1 / -1; } }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--ring); }
.contact-form input.invalid, .contact-form textarea.invalid { border-color: #ff5e5e; box-shadow: 0 0 0 3px rgba(255,94,94,.35); }
.contact-form .full { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 20px; }
#contact-status { flex: 1; text-align: left; font-size: 12.5px; color: var(--muted); padding: 8px 4px 0 2px; min-height: 18px; line-height: 1.3; }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============================================
   14) Footer
   ============================================ */
.site-footer { border-top: 1px solid var(--border); background: #0a0a0f; }
.footer-inner { padding: 28px 0; text-align: center; }
.footer-text { margin: 0; color: var(--muted); }
.heart { color: var(--accent); }

/* ============================================
   15) Preloader
   ============================================ */
#preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: auto; opacity: 1; transition: opacity .6s ease, visibility .6s ease; visibility: visible; background: #050505; background-image: radial-gradient(circle at 50% 45%, rgba(30,30,30,.9) 0, rgba(10,10,10,.85) 35%, rgba(5,5,5,.92) 60%, #000 100%); }
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pre-inner { text-align: center; transform: translateY(4vh); max-width: 820px; padding: 0 20px; }
.pre-icons { display: flex; gap: 18px; justify-content: center; margin-bottom: 30px; }
.pre-icon { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #e7e7ec; font-weight: 700; font-size: 18px; letter-spacing: .5px; background: #000; border: 1px solid #1f1f23; box-shadow: 0 4px 14px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.03) inset; position: relative; isolation: isolate; overflow: hidden; }
.pre-icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.08), rgba(0,0,0,0)); mix-blend-mode: overlay; pointer-events: none; }
.pre-icon img { width: 28px; height: auto; opacity: .95; }
.pre-title { font-family: "Poppins", system-ui, sans-serif; font-weight: 800; line-height: 1.05; margin: 0 0 24px; font-size: clamp(32px,5vw,52px); color: #f1f1f5; text-shadow: 0 8px 32px rgba(0,0,0,.65); }
.pre-handle { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 12px; background: #121212; border: 1px solid #242428; color: #d3d4de; box-shadow: 0 6px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset; font-weight: 500; font-size: .95rem; letter-spacing: .3px; }
.pre-globe { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #0e0f15; border: 1px solid #2b2d39; }

/* Typewriter caret helper */
.type-caret { position: relative; white-space: nowrap; }
.type-caret::after { content: "|"; margin-left: 6px; color: var(--accent); animation: caret 1s steps(1) infinite; }

/* ============================================
   16) Gallery Modal
   ============================================ */
.gallery-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 1000; display: none; place-items: center; padding: 20px; }
.gallery-modal.is-visible { display: grid; }
.gallery-content { background: transparent; border: 0; border-radius: 0; width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.gallery-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: #fff; font-size: 24px; cursor: pointer; z-index: 10; display: grid; place-items: center; transition: all .3s ease; }
.gallery-close:hover { background: var(--accent); border-color: var(--accent); }
.gallery-inner { height: 100%; width: 100%; display: flex; flex-direction: column; }
.gallery-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(12px,4vw,60px); overflow: hidden; position: relative; }
.gallery-image, .gallery-video { max-width: min(92vw,1600px); max-height: 90vh; object-fit: contain; border-radius: 14px; box-shadow: 0 18px 60px -8px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05) inset; transition: opacity .4s ease; }
.gallery-video { width: auto; height: auto; background: #000; display: block; margin: 0 auto; }
.gallery-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 1002; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); background: rgba(20,20,26,.55); backdrop-filter: blur(6px); display: grid; place-items: center; color: #f5f5f8; font-size: 30px; font-weight: 500; cursor: pointer; transition: background .3s ease, box-shadow .3s ease, transform .25s ease, color .3s ease; }
.gallery-nav:hover { background: rgba(34,34,44,.85); box-shadow: 0 10px 34px -4px rgba(0,0,0,.6), 0 0 0 3px var(--ring); color: #ffffff; }
.gallery-nav:focus-visible { outline: 0; background: rgba(50,50,60,.95); box-shadow: 0 0 0 4px var(--ring), 0 10px 34px -4px rgba(0,0,0,.7); }
.gallery-close:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.gallery-nav:active { transform: translateY(-50%) scale(.9); }
.gallery-prev { left: 24px; }
.gallery-next { right: 24px; }
@media (max-width: 900px) { .gallery-nav { width: 46px; height: 46px; font-size: 24px; } .gallery-prev { left: 12px; } .gallery-next { right: 12px; } }
@media (max-width: 580px) { .gallery-nav { width: 42px; height: 42px; font-size: 22px; } .gallery-prev { left: 8px; } .gallery-next { right: 8px; } }

/* ============================================
   17) Certificates Grid
   ============================================ */
.certificate-card { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; box-shadow: none; position: relative; }
.certificate-card .certificate-thumb { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: block; border-radius: 18px; line-height: 0; box-shadow: 0 4px 18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset; transition: transform .35s ease, box-shadow .35s ease; position: relative; overflow: hidden; }
.certificate-card .certificate-thumb img { width: 100%; height: auto; display: block; border-radius: 14px; aspect-ratio: 16/9; object-fit: cover; transition: transform .5s ease; }
.certificate-card .certificate-thumb .certificate-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); backdrop-filter: blur(2px); opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .45s cubic-bezier(.22,.82,.25,1); text-shadow: 0 4px 18px rgba(0,0,0,.65); letter-spacing: .5px; }
.certificate-card .certificate-thumb:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.7), 0 0 0 1px var(--accent); }
.certificate-card .certificate-thumb:hover img { transform: scale(1.06); }
.certificate-card .certificate-thumb:hover .certificate-overlay { opacity: 1; transform: scale(1); }
.certificate-title { display: none; }
.certificate-card.is-hidden-initial { display: none; }
.certificate-actions { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 12px; }
.certificate-actions .btn { min-width: 160px; font-size: 15px; font-weight: 600; }

/* ============================================
   18) Tools (skills / stack)
   ============================================ */
.tool-card { background: #14151c; border: 1px solid #20222c; border-radius: 22px; padding: 34px 10px 30px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; box-shadow: 0 18px 34px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset; position: relative; isolation: isolate; transition: transform .4s cubic-bezier(.22,.82,.25,1), box-shadow .45s ease, background .5s ease; }
.tool-card i[class^="devicon-"], .tool-card i[class*=" devicon-"] { font-size: 46px; line-height: 1; display: block; }
/* Make colored variant visible on dark bg; some (like GitHub) have default monochrome */
.tool-card i.devicon-github-original { color: #ffffff; }
.tool-card i.devicon-vscode-plain.colored { color: #3ea6ff; }
.tool-card i.devicon-arduino-plain.colored { color: #00979d; }
.tool-card i.devicon-docker-plain.colored { color: #2496ed; }
.tool-card i.devicon-postgresql-plain.colored { color: #336791; }
.tool-card i.devicon-canva-original.colored { color: #00c4cc; }
.tool-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 30%, rgba(124,93,250,.12), transparent 70%); opacity: .65; pointer-events: none; mix-blend-mode: color-dodge; }
.tool-card:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -14px rgba(0,0,0,.75), 0 0 0 1px var(--accent); background: #181924; }
.tool-card:focus-within { outline: 3px solid var(--ring); outline-offset: 4px; }
.tool-icon { display: block; font-size: 62px; line-height: 1; color: #e9e9ef; position: relative; filter: drop-shadow(0 6px 24px rgba(0,0,0,.55)); }
.tool-icon i { font-size: inherit; line-height: 1; }
.tool-icon img { width: 64px; height: 64px; display: block; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0,0,0,.55)); }
.tool-icon img[alt*="AutoCAD"],
.tool-icon img[alt*="Cisco"],
.tool-icon img[alt*="CVAT"],
.tool-icon img[alt*="DipTrace"],
.tool-icon img[alt*="Workspace"],
.tool-icon img[alt*="Office"],
.tool-icon img[alt*="Multisim"],
.tool-icon img[alt*="Roboflow"],
.tool-icon img[alt*="TinkerCAD"] { width: 60px; height: 60px; }
.tool-icon img[alt="GitHub"] { filter: invert(1) drop-shadow(0 4px 14px rgba(0,0,0,.55)); }
.tool-name { font-weight: 600; font-size: 17px; letter-spacing: .4px; color: #f5f5fb; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.grid.tools-mode { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 34px; }
.grid.tools-mode .tool-card { padding: 34px 12px 32px; }
.tool-card.is-hidden-initial { display: none; }
.tool-actions { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 12px; }
.tool-actions .btn { min-width: 160px; font-size: 15px; font-weight: 600; }
.glyph-diptrace { display: inline-block; font-weight: 700; font-family: Poppins,system-ui,sans-serif; font-size: .9em; letter-spacing: .5px; color: #FFB347; background: linear-gradient(180deg,#2a2d33,#1b1d22); padding: 10px 14px; border-radius: 14px; border: 1px solid #343741; box-shadow: 0 6px 18px -4px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset; }
.glyph-cvat, .glyph-roboflow { display: inline-block; font-weight: 700; font-family: Poppins,system-ui,sans-serif; font-size: .9em; letter-spacing: .5px; padding: 10px 14px; border-radius: 14px; border: 1px solid #343741; box-shadow: 0 6px 18px -4px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset; }
.glyph-cvat { color: #ff6b3d; background: linear-gradient(180deg,#2f2622,#1b1614); }
.glyph-roboflow { color: #9F6BFF; background: linear-gradient(180deg,#262330,#18161f); }

/* ============================================
   19) CV Request Modal
   ============================================ */
.cv-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 30px; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.cv-modal[hidden] { display: none; }
.cv-modal-panel { position: relative; width: min(560px,100%); background: #0d0d11; border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px 30px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04) inset; font-family: inherit; }
.cv-modal-title { margin: 0 0 6px; font-size: 30px; font-weight: 700; color: #ffffff; letter-spacing: .5px; }
.cv-modal-desc { margin: 0 0 20px; font-size: 15px; color: var(--muted); }
.cv-field { display: block; margin: 0 0 14px; }
.cv-field input { width: 100%; background: #16171d; border: 1px solid #2a2d39; border-radius: 10px; padding: 16px 18px; font: 600 15px/1.4 Poppins,system-ui,sans-serif; color: #fff; outline: 0; box-shadow: 0 4px 14px rgba(0,0,0,.45) inset, 0 0 0 0 var(--ring); transition: border-color .25s ease, box-shadow .3s ease; }
.cv-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring), 0 4px 14px rgba(0,0,0,.45) inset; }
.cv-field input.invalid { border-color: #ff5e5e; box-shadow: 0 0 0 3px rgba(255,94,94,.35); }
.cv-error { display: block; font-size: .75rem; color: #ff7676; font-weight: 500; margin: 6px 2px 0; min-height: 14px; }
.cv-actions { display: flex; gap: 18px; align-items: center; margin: 4px 0 14px; }
.cv-actions .btn { flex: 1; }
.cv-actions .modal-cancel { background: #121217; color: #e5e5ec; border: 1px solid #2a2d39; }
.cv-actions .modal-cancel:hover { border-color: var(--accent); color: #fff; }
.cv-note { margin: 0; font-size: 11.5px; color: #7d7f8d; letter-spacing: .3px; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #2a2d39; background: #15161b; color: #fff; font-size: 20px; display: grid; place-items: center; cursor: pointer; transition: background .3s ease, border-color .3s ease, transform .25s ease; }
.modal-close:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.modal-submit.clicked { animation: pressPulse .7s ease; }
@keyframes pressPulse { 0% { transform: translateY(0); box-shadow: 0 10px 22px -6px rgba(124,93,250,.5); } 40% { transform: translateY(2px); box-shadow: 0 2px 10px -4px rgba(124,93,250,.3); } 100% { transform: translateY(0); box-shadow: 0 10px 22px -6px rgba(124,93,250,.5); } }

/* ============================================
   20) Custom Scrollbar (purple theme)
   ============================================ */
/* Firefox */
body { scrollbar-width: thin; scrollbar-color: #a88cff var(--surface-2); }
/* WebKit */
::-webkit-scrollbar { width: 11px; background: var(--surface-2); }
::-webkit-scrollbar-track { background: linear-gradient(180deg,var(--surface-2),#0c0c11); border-left: 1px solid #1a1c24; }
::-webkit-scrollbar-track:hover { background: linear-gradient(180deg,var(--surface-2),#101117); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#d5caff,#b9a4ff 45%,#8d6bff 75%,#6a49e6);
  border: 2px solid var(--surface-2);
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset;
  transition: background .35s, box-shadow .35s, filter .25s;
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); box-shadow: 0 4px 12px rgba(0,0,0,.6), 0 0 0 1px var(--accent) inset; }
::-webkit-scrollbar-thumb:active { filter: brightness(.95); background: linear-gradient(180deg,#c0b0ff,#a086ff 50%,#7a55f2 80%,#5a3fd1); }
::-webkit-scrollbar-corner { background: var(--surface); }
@media (max-width: 640px) { ::-webkit-scrollbar { width: 9px; } }
@media (forced-colors: active) { body { scrollbar-color: auto; } }

/* ============================================
   21) Responsive Queries (layout tweaks only)
   Keep these grouped so overrides are predictable.
   ============================================ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 18px; }
  .hero-art { order: -1; display: grid; place-items: center; }
  .about-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "side"; }
  .about-tabs { margin-top: 8px; padding-top: 38px; flex-wrap: wrap; gap: 18px; }
  .about-tab { font-size: 1.05rem; }
  .about-panel { position: static; transform: none; opacity: 1; margin-top: 4px; padding: 6px 8px 12px 20px; }
  .contact-inner { grid-template-columns: 1fr; }
  .portfolio-section h2 { font-size: clamp(42px,7.2vw,56px); }
  .seg-item { padding: 12px 44px; min-width: 220px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 36px; }
  .card-actions .card-link { padding: 12px 16px; font-size: 14.5px; }
  .about-intro p { margin: 60px 0 0; }
}
@media (max-width: 860px) {
  .segmented { flex-wrap: wrap; padding: 10px 10px 6px; gap: 6px; margin: 16px auto 22px; }
  .seg-item { min-width: calc(50% - 8px); padding: 12px 18px; font-size: 15px; }
}
@media (max-width: 640px) {
  .seg-item { min-width: 100%; padding: 12px 16px; font-size: 14px; }
  .portfolio-section h2 { font-size: clamp(34px,10vw,48px); margin-bottom: 14px; }
  .portfolio-section p { font-size: 16px; margin: 0 auto 14px; }
  .grid { gap: 30px; }
  .card-title { font-size: 19px; }
  .card-actions { gap: 10px; margin: 0 18px 20px; }
  .card-actions .card-link { padding: 12px 14px; font-size: 14px; margin: 0; border-radius: 10px; }
  .contact-intro { font-size: 16px; margin: -4px 0 6px; }
  .about-intro p { margin: 50px 0 0; }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 26px; }
  .card-thumb-wrap { padding: 14px 14px 8px; }
  .card-image { aspect-ratio: 16/10; }
  .card-title { font-size: 18px; margin: 0 0 10px; }
  .card-actions .card-link { font-size: 13.5px; padding: 11px 12px; }
  .contact-form { padding: 22px 22px; }
  .hero-subtitle { font-size: clamp(16px,4.2vw,22px); }
  .pre-inner { transform: translateY(6vh); }
}
@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
  .seg-item { font-size: 13.5px; }
  .card-actions { flex-direction: column; }
  .card-actions .card-link { width: 100%; }
}
@media (min-width: 1400px) {
  .hero-title { font-size: clamp(72px,6vw,110px); }
  .portfolio-section h2 { font-size: clamp(56px,4.2vw,78px); }
  .section { padding: 60px 0; }
}
@media (min-width: 1700px) {
  .container { width: min(var(--container-max), calc(100% - var(--gutter)*4)); }
  .grid { max-width: 1500px; }
}
@media (max-width: 1200px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); }
}
@supports (padding: max(0px)) {
  body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .site-header { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
}

/* ============================================
   22) Motion Preferences (a11y)
   Reduce non-essential animation for users who prefer less motion.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card-actions .card-link { animation: none; }
}