/* =======================================================
 * Creative Layer — UI/UX Pro Max
 * Type: "Type Light Sans" (1001fonts, public domain) for ALL text
 * Theme: LIGHT background + BLACK text (readable)
 * Accent: green sampled from www.mirkhadjayev.uz
 * Additive overrides on top of the Personal (dark) template.
 * ======================================================= */

/* M PLUS 1 Code — programmingfonts.org (#mplus) — for ALL site text */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: "Type Light Sans";
  src: url("../fonts/TypeLightSans.otf") format("opentype"),
       url("../fonts/TypeLightSans.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --c-bg: #e7eeea;                    /* page backdrop (coder tint) */
  --c-panel: #ffffff;                 /* section container      */
  --c-surface: #f3f6f8;               /* cards                  */
  --c-surface-2: #e9eef1;             /* raised / hover         */
  --c-border: rgba(15, 23, 30, 0.12);
  --c-text: #15181d;                  /* near-black primary     */
  --c-muted: #454b54;                 /* dark gray secondary    */
  --accent: #0f9d4f;                  /* green accent           */
  --accent-text: #0a7d3f;             /* darker green for text/links (AA on white) */
  --accent-fill: #18d26e;             /* bright green for fills  */
  --accent-dark: #0c8c46;             /* hover                   */
  --danger: #d92d0b;
  --accent-soft: rgba(24, 210, 110, 0.14);
  --shadow: 0 10px 30px -16px rgba(15, 23, 30, 0.28);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --type-stack: "M PLUS 1 Code", "Type Light Sans", ui-monospace, monospace, sans-serif;
}

/* ---------- Type Light Sans for ALL text (not <i> icon glyphs) ---------- */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, ul, ol, label, em, strong, b, small, blockquote, td, th,
input, textarea, select, button, .btn, .val {
  font-family: var(--type-stack) !important;
}

/* =======================================================
 * Light page backdrop — override the dark fixed image
 * ======================================================= */
body {
  background-color: var(--c-bg) !important;
  color: var(--c-text) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.005em;
  line-height: 1.7;
}
body::before {
  background:
    radial-gradient(58% 48% at 86% 8%, rgba(24, 210, 110, 0.13), transparent 60%),
    radial-gradient(50% 44% at 8% 96%, rgba(24, 210, 110, 0.10), transparent 62%),
    linear-gradient(160deg, #edf3f0 0%, #e3ece7 55%, #d9e6df 100%) !important;
}
@media (max-width: 1025px) { body::before { background: linear-gradient(160deg, #edf3f0, #dbe7e0) !important; } }
@media (max-width: 500px)  { body::before { background: linear-gradient(160deg, #edf3f0, #dbe7e0) !important; } }

h1, h2, h3, h4, h5, h6 { color: var(--c-text); font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--accent-text); }
a:hover { color: var(--accent-dark); }
::selection { background: rgba(24, 210, 110, 0.25); color: #0a2114; }

/* Slim scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #e9eef1; }
::-webkit-scrollbar-thumb { background: #c3ccd2; border-radius: 99px; border: 2px solid #e9eef1; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* =======================================================
 * Section content panel — was rgba(0,0,0,.9), now light
 * ======================================================= */
section .container {
  background: var(--c-panel) !important;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* =======================================================
 * HERO (#header sidebar) — light, dark text
 * ======================================================= */
#header::before { content: none !important; }
#header h1 a, #header h1 a:hover {
  color: var(--c-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
#header h2 { color: var(--c-muted) !important; font-weight: 400; font-size: 22px; }
#header h2 span { color: var(--accent-text) !important; border-bottom: none !important; font-weight: 600; }
.type-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px;
  background: var(--accent); animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* Header social chips — light */
#header .social-links a {
  background: #fff !important;
  border: 1px solid var(--c-border);
  color: var(--c-text) !important;
  box-shadow: 0 2px 8px -4px rgba(15,23,30,.25);
  transition: background .25s var(--ease), color .25s, transform .25s;
}
#header .social-links a:hover {
  background: var(--accent-fill) !important;
  color: #06371b !important;
  transform: translateY(-3px);
}

/* =======================================================
 * Navbar — dark links on light, green underline
 * ======================================================= */
.navbar a, .navbar a:focus { color: var(--c-muted) !important; font-weight: 500; }
.navbar a:hover, .navbar a.active, .navbar li:hover > a { color: var(--c-text) !important; }
.navbar a:before { background: var(--accent) !important; height: 2px; }
.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
  visibility: visible; width: 100% !important;
}
/* Scrolled top bar + mobile menu — light */
#header.header-top { background: rgba(255,255,255,0.92) !important; box-shadow: 0 4px 20px -10px rgba(15,23,30,.3); backdrop-filter: blur(8px); }
.navbar-mobile { background: rgba(255,255,255,0.97) !important; }
.navbar-mobile ul { background: #fff; border: 1px solid var(--c-border) !important; box-shadow: var(--shadow); }
.mobile-nav-toggle { color: var(--c-text) !important; }

/* =======================================================
 * Section titles
 * ======================================================= */
.section-title h2 { color: var(--c-text); font-weight: 700; }
.section-title h2::after { background: var(--accent) !important; height: 3px !important; width: 50px !important; border-radius: 2px; }
.section-title p { color: var(--accent-text) !important; font-weight: 500; }

/* =======================================================
 * Cards — light surfaces, subtle border + shadow
 * ======================================================= */
.certificate-box,
.contact .info-box,
.interests .icon-box,
.resume .resume-item {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px -12px rgba(15,23,30,.25);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s, background .25s;
}
.certificate-box:hover, .interests .icon-box:hover,
.contact .info-box:hover, .resume .resume-item:hover {
  transform: translateY(-5px);
  background: #fff !important;
  border-color: rgba(15,157,79,.5) !important;
  box-shadow: 0 16px 34px -18px rgba(15,157,79,.45);
}

/* Interests */
.interests .icon-box { padding: 30px 15px; text-align: center; }
.interests .icon-box i { transition: transform .25s var(--ease); display: inline-block; filter: grayscale(1) brightness(0.85); }
.interests .icon-box:hover i { transform: translateY(-3px) scale(1.1); }
.interests .icon-box h3, .interests .icon-box h3 a { color: var(--c-text) !important; font-weight: 500; font-size: 16px; }

/* Contact info-box */
.contact .info-box i.bx { color: var(--accent) !important; }
.contact .info-box h3 { color: var(--c-text) !important; font-weight: 600; }
.contact .info-box p { color: var(--c-muted) !important; }
.contact .info-box .social-links a {
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border); color: var(--c-text) !important;
  transition: background .25s var(--ease), color .25s, transform .25s;
}
.contact .info-box .social-links a:hover { background: var(--accent-fill) !important; color: #06371b !important; transform: translateY(-3px); }

/* Certificates */
.certificates .certificate-badge {
  background: var(--accent-soft) !important; color: var(--accent-text) !important;
  border: 1px solid rgba(15,157,79,.30) !important; font-weight: 600; letter-spacing: .02em; border-radius: 99px;
}
.certificates .certificate-img-container { border: 1px solid var(--c-border) !important; background: #fff !important; border-radius: 10px; }
.certificates .certificate-box h4 { color: var(--c-text) !important; font-weight: 600; font-size: 17px; }
.certificates .certificate-meta { color: var(--accent-text) !important; font-weight: 500; }
.certificates .certificate-desc { color: var(--c-muted) !important; }

/* Resume timeline */
.resume .resume-item { padding: 20px 20px 12px 28px !important; margin-bottom: 16px; }
.resume .resume-item h4 { color: var(--c-text) !important; text-transform: none; font-weight: 600; font-size: 17px; }
.resume .resume-item h5 {
  background: var(--accent-soft); color: var(--accent-text) !important; display: inline-block;
  padding: 2px 12px; border-radius: 99px; border: 1px solid rgba(15,157,79,.30); font-weight: 500; font-size: 13px;
}
.resume .resume-item::before { background: #fff !important; border: 2px solid var(--accent) !important; box-shadow: 0 0 0 3px rgba(24,210,110,.15); }
.resume .resume-item ul li, .resume .resume-item p { color: var(--c-muted) !important; }
.resume .resume-title { color: var(--c-text) !important; font-weight: 700 !important; }
/* pull the first heading (Education) up closer to the section subtitle */
.resume .row > .col-12 > .resume-title:first-child { margin-top: 0 !important; }

/* =======================================================
 * Skill bars
 * ======================================================= */
.skills .progress-bar-wrap { background: #e3e9ed !important; border-radius: 99px; overflow: hidden; }
.skills .progress-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent-fill)) !important;
  border-radius: 99px; width: 0; transition: width 1.1s var(--ease);
}
.skills .progress .skill { color: var(--c-text) !important; font-weight: 500; font-size: 15px; }
.skills .progress .skill .val { color: var(--accent-text) !important; font-style: normal; }

/* =======================================================
 * Contact form — light inputs
 * ======================================================= */
#feedbackForm input, #feedbackForm textarea {
  background-color: #fff !important; color: var(--c-text) !important;
  border: 1px solid var(--c-border) !important; border-radius: 10px !important; font-weight: 400;
}
#feedbackForm input::placeholder, #feedbackForm textarea::placeholder { color: #8a9099 !important; }
#feedbackForm input:focus, #feedbackForm textarea:focus {
  background-color: #fff !important; color: var(--c-text) !important;
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.contact .form-label { color: var(--c-muted); font-weight: 500; }
#feedbackForm button[type="submit"], .contact .btn-primary {
  background: var(--accent-fill) !important; border: none !important; border-radius: 99px !important;
  padding: 11px 34px !important; font-weight: 600; color: #06371b !important;
  transition: background .25s var(--ease), transform .25s, box-shadow .25s;
}
#feedbackForm button[type="submit"]:hover, .contact .btn-primary:hover {
  background: var(--accent-dark) !important; color: #fff !important; transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(15,157,79,.6);
}

/* --- Feedback message — animated pop-in + glow (re-triggered by JS) --- */
#messageContainer .alert {
  border: none !important; border-radius: 14px !important;
  font-weight: 600; text-align: center; font-size: 15px; padding: 14px 18px;
}
#messageContainer .alert-success {
  background: var(--accent-soft) !important; color: var(--accent-text) !important;
}
#messageContainer .alert-danger {
  background: rgba(217, 45, 11, .12) !important; color: #d92d0b !important;
}
/* the actual entrance — added by feedback.js each time */
#messageContainer .alert.msg-animate {
  animation: msgPop .6s cubic-bezier(.2, .8, .2, 1.4) both;
}
#messageContainer .alert-success.msg-animate {
  animation: msgPop .6s cubic-bezier(.2, .8, .2, 1.4) both, msgGlow 1.8s ease .55s 1;
}
@keyframes msgPop {
  0%   { opacity: 0; transform: translateY(22px) scale(.85); }
  45%  { opacity: 1; transform: translateY(-7px) scale(1.05); }
  70%  { transform: translateY(2px) scale(.99); }
  100% { opacity: 1; transform: none; }
}
@keyframes msgGlow {
  0%, 100% { box-shadow: 0 10px 28px -12px rgba(15, 157, 79, .5); }
  50%      { box-shadow: 0 0 0 7px rgba(24, 210, 110, .20), 0 12px 34px -10px rgba(15, 157, 79, .7); }
}
@media (prefers-reduced-motion: reduce) {
  #messageContainer .alert.msg-animate, #messageContainer .alert-success.msg-animate { animation: none; }
}

/* --- Creative floating-label fields (Name / Email / Your Text) --- */
#feedbackForm .cfield { position: relative; }
#feedbackForm .cfield > i {
  position: absolute; left: 15px; top: 16px; z-index: 2;
  color: var(--c-muted); font-size: 17px; pointer-events: none;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
#feedbackForm .cfield input, #feedbackForm .cfield textarea {
  padding: 15px 14px 15px 44px !important; border-radius: 12px !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s !important;
}
#feedbackForm .cfield label {
  position: absolute; left: 38px; top: 15px; margin: 0; padding: 0 6px;
  color: var(--c-muted); font-weight: 500; pointer-events: none;
  transition: all .18s var(--ease); background: transparent;
}
#feedbackForm .cfield.cfield-area > i { top: 16px; }
#feedbackForm .cfield.cfield-area label { top: 16px; }
/* float up when focused or filled */
#feedbackForm .cfield input:focus ~ label,
#feedbackForm .cfield input:not(:placeholder-shown) ~ label,
#feedbackForm .cfield textarea:focus ~ label,
#feedbackForm .cfield textarea:not(:placeholder-shown) ~ label {
  top: -9px; left: 34px; font-size: 12px; font-weight: 600;
  color: var(--accent-text); background: var(--c-surface);
}
/* icon turns green + nudges on focus */
#feedbackForm .cfield input:focus ~ i,
#feedbackForm .cfield textarea:focus ~ i { color: var(--accent); transform: scale(1.12); }
/* richer focus glow */
#feedbackForm .cfield input:focus, #feedbackForm .cfield textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 8px 22px -12px rgba(15,157,79,.4) !important;
}

/* About content */
.about .content h3 { color: var(--c-text); font-weight: 700; }
.about .content .fst-italic, .about .content li, .about .content span { color: var(--c-muted) !important; font-weight: 400; }
.about .content strong { color: var(--c-text); font-weight: 600; }
.about .content .bi-chevron-right { color: var(--accent) !important; }
.about img.img-fluid { border-radius: 12px; border: 1px solid var(--c-border); box-shadow: var(--shadow); }

/* =======================================================
 * Scroll-reveal
 * ======================================================= */
[data-aos], .reveal,
.certificate-box, .interests .icon-box, .resume .resume-item,
.contact .info-box, .skills .progress, .section-title {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: opacity, transform;
}
.in-view { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-aos], .reveal,
  .certificate-box, .interests .icon-box, .resume .resume-item,
  .contact .info-box, .skills .progress, .section-title { opacity: 1; transform: none; }
}

/* =======================================================
 * CREATIVE PAGES LAYER
 * Decorative backdrop, panel accents, creative section
 * headers, hero orbs — applied per "page" (section).
 * ======================================================= */

/* --- Coder backdrop: blueprint graph-paper grid (major + fine) --- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    /* major grid 120px */
    linear-gradient(rgba(15, 157, 79, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 157, 79, 0.08) 1px, transparent 1px),
    /* fine grid 24px */
    linear-gradient(rgba(15, 157, 79, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 157, 79, 0.035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
}

/* --- Section "page" panel — floating card with accent --- */
section .container {
  border-radius: 20px !important;
  box-shadow: 0 24px 60px -28px rgba(15, 23, 30, 0.30), 0 2px 0 rgba(255,255,255,.6) inset !important;
  position: relative;
  overflow: hidden;
}
/* gradient accent strip along the top of every page */
section .container::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent-fill), #34e0c0 55%, transparent);
}
/* faint corner glow */
section .container::after {
  content: "";
  position: absolute; top: -60px; right: -60px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(24,210,110,.14), transparent 70%);
  pointer-events: none;
}

/* --- Creative section titles — flanked kicker + bigger heading --- */
.section-title { margin-bottom: 28px; }
.section-title h2 {
  font-size: 40px; font-weight: 700; letter-spacing: -0.02em;
}
.section-title p {
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 14px; margin-top: 6px;
}
.section-title p::before, .section-title p::after {
  content: ""; width: 28px; height: 2px; border-radius: 2px;
  background: var(--accent); display: inline-block;
}

/* --- Cards: accent top line revealed on hover --- */
.certificate-box, .contact .info-box, .interests .icon-box, .resume .resume-item {
  overflow: hidden;
}
.certificate-box::before, .contact .info-box::before, .interests .icon-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-fill), #34e0c0);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.certificate-box:hover::before, .contact .info-box:hover::before, .interests .icon-box:hover::before {
  transform: scaleX(1);
}

/* Certificate image — gentle zoom on hover */
.certificates .certificate-img-container { overflow: hidden; }
.certificates .certificate-img-container img { transition: transform .5s var(--ease); }
.certificates .certificate-box:hover .certificate-img-container img { transform: scale(1.06); }

/* --- Hero: live coding terminal (STACKED below the intro, dark island) --- */
#header {
  background: radial-gradient(135% 100% at 50% 0%, #0c1512 0%, #060a08 72%) !important;
  flex-direction: column;       /* stack intro on top, terminal below */
  justify-content: center;
  gap: 30px;
  height: auto;
  min-height: 100vh;
  padding: 92px 0 44px;
}
#header > .container { order: 1; position: relative; z-index: 2; }
#header h1, #header h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
#header h1 a, #header h1 a:hover { color: #eafff3 !important; }
#header h2 { color: rgba(234, 255, 243, 0.82) !important; }
#header h2 span { color: #4ceb95 !important; }
/* Hero menu — light pills with BLACK text (readable) */
#header .navbar a, #header .navbar a:focus,
#header .navbar a:hover, #header .navbar a.active, #header .navbar li:hover > a {
  color: #0d0d0d !important;
  background: rgba(255, 255, 255, 0.90);
  border-radius: 999px;
  padding: 7px 17px !important;
  justify-content: center; gap: 6px;
  text-shadow: none !important;
  transition: background .25s var(--ease), color .25s, transform .25s;
}
#header .navbar a:hover, #header .navbar a.active, #header .navbar li:hover > a {
  background: #ffffff; transform: translateY(-1px);
}
#header .navbar a:before { display: none !important; } /* pills replace the underline */
#header .social-links a { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #eafff3 !important; }
#header .social-links a:hover { background: var(--accent-fill) !important; color: #06371b !important; }

/* terminal card — its own row beneath the intro (fully visible, no overlap) */
#hero-term {
  order: 2; position: relative; z-index: 2; margin: 0 auto;
  width: min(540px, 90vw);
  background: #0d1117; border: 1px solid #233044; border-radius: 14px; overflow: hidden;
  opacity: 0.25;   /* 75% transparent */
  box-shadow: 0 26px 64px -30px rgba(0, 0, 0, 0.75), 0 0 60px -22px rgba(24, 210, 110, 0.4);
}
#hero-term .ht-bar { background: #161b22; padding: 9px 12px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #233044; }
#hero-term .ht-dot { width: 11px; height: 11px; border-radius: 50%; }
#hero-term .ht-name { margin-left: auto; font: 12px "JetBrains Mono", monospace; color: #8b949e; }
#hero-term pre { margin: 0; padding: 14px 16px; font: 13px/1.6 "JetBrains Mono", monospace; color: #c9d1d9; min-height: 208px; white-space: pre-wrap; }
#hero-term .tcur { display: inline-block; width: 7px; height: 14px; background: #18d26e; vertical-align: -2px; animation: heroCaret 1s steps(1) infinite; }
@keyframes heroCaret { 50% { opacity: 0; } }
#hero-term .g { color: #18d26e; } #hero-term .b { color: #58a6ff; } #hero-term .y { color: #e3b341; }
#hero-term .m { color: #d2a8ff; } #hero-term .c { color: #56d4dd; } #hero-term .d { color: #8b949e; }

/* scrolled top-bar reverts to the light theme + collapses the hero height */
#header.header-top { background: rgba(255, 255, 255, 0.92) !important; min-height: 0 !important; padding: 0 !important; gap: 0 !important; }
#header.header-top #hero-term { display: none; }
#header.header-top h1 a { color: var(--c-text) !important; text-shadow: none; }
#header.header-top .navbar a { color: var(--c-muted) !important; }
#header.header-top .navbar a:hover, #header.header-top .navbar a.active { color: var(--c-text) !important; }

/* Mobile: terminal STAYS visible (below the text) — just smaller */
@media (max-width: 768px) {
  #header { gap: 24px; padding: 84px 0 36px; }
  #hero-term { width: 92vw; }
  #hero-term pre { font-size: 12px; min-height: 168px; padding: 13px 14px; }
}

/* --- Hero: floating gradient orbs behind the intro --- */
#header .container { position: relative; }
#header .container::before, #header .container::after {
  content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none;
  filter: blur(8px);
}
#header .container::before {
  width: 260px; height: 260px; top: -70px; left: -90px;
  background: radial-gradient(circle, rgba(24,210,110,.20), transparent 68%);
  animation: floatA 9s ease-in-out infinite alternate;
}
#header .container::after {
  width: 200px; height: 200px; bottom: -60px; right: -60px;
  background: radial-gradient(circle, rgba(52,224,192,.18), transparent 68%);
  animation: floatB 11s ease-in-out infinite alternate;
}
@keyframes floatA { to { transform: translate(24px, 18px); } }
@keyframes floatB { to { transform: translate(-22px, -16px); } }

/* Bigger, tighter hero name */
#header h1 { font-size: 60px; }
@media (max-width: 992px) { #header h1 { font-size: 38px; } .section-title h2 { font-size: 32px; } }

/* --- Reveal each page panel with a soft entrance --- */
section.section-show .container { animation: pageIn .55s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(16px) scale(.995); } to { opacity: 1; transform: none; } }

/* --- Portfolio-details page (separate file) --- */
.portfolio-details { padding: 60px 0; }
.portfolio-details .container {
  background: var(--c-panel); border: 1px solid var(--c-border);
  border-radius: 20px; box-shadow: var(--shadow); padding: 34px;
}
.portfolio-details .portfolio-title { color: var(--c-text); font-weight: 700; margin-bottom: 22px; }
.portfolio-details .portfolio-info h3 { color: var(--c-text); font-weight: 600; }
.portfolio-details .portfolio-info ul li { color: var(--c-muted); }
.portfolio-details .portfolio-info p { color: var(--c-muted); }

/* =======================================================
 * SKILLS — compact tech-logo chips (no percentages)
 * ======================================================= */
.skills-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin-top: 8px;
}
.skill-chip {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 92px; padding: 16px 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 4px 14px -12px rgba(15, 23, 30, 0.30);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background .25s;
  /* reveal */
  opacity: 0; transform: translateY(14px);
}
.skill-chip.in-view { opacity: 1; transform: none; }
.skill-chip:hover {
  transform: translateY(-5px);
  background: #fff;
  border-color: rgba(15, 157, 79, 0.5);
  box-shadow: 0 16px 28px -18px rgba(15, 157, 79, 0.45);
}
.skill-chip i { font-size: 38px; line-height: 1; filter: grayscale(1); transition: transform .25s var(--ease), filter .3s var(--ease); }
.skill-chip img { width: 38px; height: 38px; object-fit: contain; filter: grayscale(1); transition: transform .25s var(--ease), filter .3s var(--ease); }
.skill-chip:hover i, .skill-chip:hover img { transform: scale(1.12); }
.skill-chip span {
  font-size: 12.5px; font-weight: 500; color: var(--c-text) !important;
  text-align: center; line-height: 1.25;
}
@media (prefers-reduced-motion: reduce) {
  .skill-chip { opacity: 1; transform: none; }
}

/* =======================================================
 * MOBILE — smaller sizes + tidier arrangement
 * ======================================================= */
@media (max-width: 768px) {
  /* page panels — tighter padding */
  section .container { padding: 24px 18px !important; border-radius: 16px !important; }

  /* hero */
  #header h1 { font-size: 34px !important; }
  #header h2 { font-size: 18px; }
  #header .social-links a { width: 38px; height: 38px; }

  /* section headings */
  .section-title { margin-bottom: 20px; }
  .section-title h2 { font-size: 26px; }
  .section-title p { font-size: 11px; letter-spacing: 0.16em; }

  /* skills — smaller chips, neat 4-per-row */
  .skills-grid { gap: 10px; }
  .skill-chip {
    width: calc((100% - 30px) / 4);   /* 4 chips per row */
    min-width: 70px; padding: 12px 6px; gap: 7px; border-radius: 12px;
  }
  .skill-chip i { font-size: 30px; }
  .skill-chip img { width: 30px; height: 30px; }
  .skill-chip span { font-size: 11px; }

  /* interests — 2 per row on phone (was full width) */
  .interests .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .interests .icon-box { padding: 20px 10px; }

  /* resume / cards spacing */
  .resume .resume-item { padding: 16px 16px 10px 24px !important; }
}

@media (max-width: 480px) {
  section .container { padding: 20px 14px !important; }
  #header h1 { font-size: 29px !important; }
  #header h2 { font-size: 16px; }
  .section-title h2 { font-size: 23px; }

  /* skills — clean 3-per-row grid on small phones */
  .skills-grid { gap: 9px; }
  .skill-chip { width: calc((100% - 18px) / 3); min-width: 0; padding: 12px 4px; }
  .skill-chip i { font-size: 28px; }
  .skill-chip img { width: 28px; height: 28px; }
  .skill-chip span { font-size: 10.5px; }
}

/* =======================================================
 * MOBILE BOTTOM DOCK — floating pill + labels (≤991px)
 * Variant A: frosted floating bar, icon over a tiny label,
 * active = soft green pill. Mobile-only; theme untouched.
 * ======================================================= */
@media (max-width: 991px) {
  /* hide the template hamburger (dock replaces it) */
  .mobile-nav-toggle { display: none !important; }

  /* hero nav list -> floating bottom dock */
  #navbar.navbar ul,
  #header .navbar ul,
  .navbar ul {
    display: flex !important;
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: calc(100% - 20px);
    max-width: 440px;
    margin: 0 !important;
    padding: 7px 6px !important;
    gap: 2px;
    justify-content: space-between;
    list-style: none;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 24px;
    box-shadow: 0 16px 38px -14px rgba(6, 24, 16, 0.38),
                0 2px 10px -5px rgba(0, 0, 0, 0.14);
    z-index: 1000;
  }
  .navbar li { flex: 1; padding: 0 !important; margin: 0 !important; }

  /* each item: icon stacked over a tiny label */
  #header .navbar a, #header .navbar a:focus,
  #header.header-top .navbar a,
  .navbar a, .navbar a:focus {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 52px;
    padding: 7px 2px !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #6a7a71 !important;
    font-size: 9.5px !important;
    font-weight: 600;
    line-height: 1;
    text-shadow: none !important;
    transition: color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
  }
  .navbar a i { font-size: 21px !important; line-height: 1; }
  .navbar a span { font-size: 9.5px; letter-spacing: .01em; }

  /* active item — soft green pill */
  #header .navbar a.active, #header .navbar li:hover > a,
  #header.header-top .navbar a.active,
  .navbar a.active, .navbar a:hover {
    color: var(--accent-text) !important;
    background: rgba(24, 210, 110, 0.13) !important;
    transform: none !important;
  }
  #header .navbar a.active i, .navbar a.active i { transform: translateY(-1px); }
  .navbar a:before { display: none !important; }

  /* keep section content clear of the dock */
  section.section-show { padding-bottom: 94px !important; }
}

/* =======================================================
 * CONTACT — "Save My Contact" card (vCard + QR)
 * ======================================================= */
.vcard-box {
  display: flex !important; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px; width: 100%; text-align: left !important;
}
.vcard-box .vcard-text { flex: 1; min-width: 240px; }
.vcard-box h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 20px !important; font-weight: 700; color: var(--c-text) !important; margin: 0 0 8px !important;
}
.contact .vcard-box h3 i { font-size: 1.3rem !important; color: var(--accent-text) !important; }
.vcard-box p { color: var(--c-muted) !important; font-size: 14px; line-height: 1.55; margin: 0 0 18px !important; }
.vcard-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--type-stack); font-size: 14.5px; font-weight: 600;
  padding: 12px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-fill); color: var(--accent-dark, #06371b);
  box-shadow: 0 12px 24px -12px rgba(24, 210, 110, 0.7);
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.contact .vcard-btn { color: #06371b !important; }
.contact .vcard-btn i { font-size: 1rem !important; color: #06371b !important; }
.vcard-btn:hover { transform: translateY(-2px); background: var(--accent); box-shadow: 0 16px 30px -12px rgba(24, 210, 110, 0.8); }
.vcard-qr {
  padding: 11px; background: #fff; border: 1px solid var(--c-border);
  border-radius: 16px; line-height: 0; box-shadow: var(--shadow);
}
.vcard-qr:empty { display: none; }
.vcard-qr img, .vcard-qr canvas { display: block; border-radius: 6px; }
@media (max-width: 575px) {
  .vcard-box { justify-content: center; text-align: center !important; }
  .vcard-box h3 { justify-content: center; }
}

/* Anonymous message form — subtitle */
.anon-sub {
  text-align: center; color: var(--c-muted); font-size: 13.5px;
  margin: 0 auto 20px; max-width: 460px; line-height: 1.55;
}
.contact .info-box h3 .bi-incognito { color: var(--accent-text); margin-right: 4px; }

/* =======================================================
 * #3 TILT helper — depth + GPU hint (JS drives rotation inline)
 * ======================================================= */
.certificates .certificate-box { transform-style: preserve-3d; will-change: transform; }

/* =======================================================
 * NEW INTERACTIONS — cursor · dot-nav · blur-in · signature
 *                    rings · gradient name · back-to-top
 * ======================================================= */

/* #1 — custom cursor: FOCUS BRACKETS (4 corner brackets, camera-focus style);
   native cursor hidden via JS class. JS drives transform (translate3d + scale). */
.cur-brk { position: fixed; top: 0; left: 0; width: 0; height: 0;
  pointer-events: none; z-index: 99999; will-change: transform; }
.cur-brk i { position: absolute; width: 9px; height: 9px; border: 2px solid var(--accent); }
.cur-brk i:nth-child(1) { top: -13px; left: -13px; border-right: 0; border-bottom: 0; }
.cur-brk i:nth-child(2) { top: -13px; left: 4px;   border-left: 0;  border-bottom: 0; }
.cur-brk i:nth-child(3) { top: 4px;   left: -13px; border-right: 0; border-top: 0; }
.cur-brk i:nth-child(4) { top: 4px;   left: 4px;   border-left: 0;  border-top: 0; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto !important; }

/* #2 — vertical dot-nav (desktop only; mirrors the menu) */
.side-dotnav { position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 600; }
.side-dotnav button { width: 11px; height: 11px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
  background: rgba(15, 23, 42, 0.18); position: relative; transition: transform .25s var(--ease), background .25s; }
.side-dotnav button.on { background: var(--accent); transform: scale(1.35); }
.side-dotnav button::after { content: attr(data-label); position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%); background: var(--c-text); color: #fff; font-size: 11px; padding: 3px 9px;
  border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.side-dotnav button:hover::after { opacity: 1; }
@media (max-width: 991px) { .side-dotnav { display: none; } }

/* #3 — word blur-in reveal */
[data-blurin] span { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(6px);
  transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease); }
[data-blurin] span.show { opacity: 1; filter: blur(0); transform: none; }

/* #8 — animated gradient on the hero name */
#header h1 { text-shadow: none !important; }
#header h1 a, #header h1 a:hover {
  background: linear-gradient(90deg, #eafff3, #4ceb95, #18d26e, #4ceb95, #eafff3);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  animation: heroGrad 5s linear infinite;
}
@keyframes heroGrad { to { background-position: 200% center; } }

/* #10 — back-to-top with scroll progress ring */
.to-top { position: fixed; right: 20px; bottom: 22px; width: 46px; height: 46px; padding: 0; border: 0;
  background: transparent; cursor: pointer; z-index: 600; opacity: 0; transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.to-top.show { opacity: 1; transform: none; }
.to-top svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top .tt-trk { fill: #fff; stroke: var(--c-border); stroke-width: 2.5; }
.to-top .tt-val { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.to-top .tt-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--accent-text); font-size: 18px; }
@media (max-width: 991px) { .to-top { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); right: 16px; } }

@media (prefers-reduced-motion: reduce) {
  #header h1 a { animation: none; }
  .cur-ring { transition: none; }
}

/* =======================================================
 * SKILLS RADAR — core competencies (pure SVG)
 * ======================================================= */
.skills-radar { max-width: 560px; margin: 40px auto 6px; text-align: center; }
.radar-title {
  color: var(--c-text) !important; font-weight: 600; font-size: 17px; margin-bottom: 4px;
}
.radar-title::after {
  content: ""; display: block; width: 40px; height: 3px; margin: 8px auto 0;
  background: var(--accent); border-radius: 2px;
}
#skillRadar { width: 100%; height: auto; display: block; overflow: visible; }
.radar-grid { fill: none; stroke: var(--c-border); stroke-width: 1; }
.radar-spoke { stroke: var(--c-border); stroke-width: 1; }
.radar-area {
  fill: rgba(24, 210, 110, 0.18); stroke: var(--accent);
  stroke-width: 2; stroke-linejoin: round;
}
.radar-dot { fill: var(--accent-fill); stroke: #fff; stroke-width: 1.5; }
.radar-data {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0.25); opacity: 0;
  transition: transform .9s var(--ease), opacity .6s var(--ease);
}
.skills-radar.in-view .radar-data { transform: scale(1); opacity: 1; }
.radar-label {
  font-size: 12px; font-weight: 600; line-height: 1.18;
  color: var(--c-muted); text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .radar-data { transform: none; opacity: 1; }
}
@media (max-width: 480px) {
  .skills-radar { max-width: 380px; }
  .radar-label { font-size: 10px; font-weight: 500; }
}

/* =======================================================
 * MOBILE FIXES — overflow / hero / dock
 * (tested with Chrome headless @ 320–430px)
 * ======================================================= */
@media (max-width: 768px) {
  /* NOTE: do NOT put `overflow-x: hidden` on html/body here — this layout
     positions each section absolutely, and overflow-x:hidden forces
     overflow-y to `auto`, turning <body> into its own scroll container and
     capping the document scroll at one viewport (every section then looked
     empty/cut off on phones). The hero name below is constrained instead, so
     there is no sideways overflow to hide. */

  /* hero text must FIT the viewport and wrap — never clip on the right.
     #header uses align-items:center, which shrink-wraps .container to the
     widest (un-wrapped) child; forcing the name to wrap keeps everything
     inside the screen. */
  #header, #header > .container, #header h1, #header h2 { max-width: 100vw !important; }
  #header > .container {
    width: 100% !important;
    padding-left: 18px; padding-right: 18px;
    text-align: center;
  }
  #header h1 { width: 100%; font-size: 30px !important; line-height: 1.14; }
  #header h1 a {
    display: block !important;
    max-width: calc(100vw - 40px);
    margin: 0 auto;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  #header h2 {
    width: 100%;
    margin-left: auto; margin-right: auto;
    white-space: normal !important;
  }

  /* terminal card never spills past the screen edge */
  #hero-term { width: min(92vw, 540px); max-width: calc(100vw - 24px); }
  #hero-term pre { white-space: pre-wrap; overflow-wrap: break-word; }
}

/* Large phones incl. iPhone 15/16 Pro Max (430–440px CSS width). Raised from
   430 → 480 so the 16 Pro Max (440px) gets the same tuned hero sizing as the
   other Pro Max models; 480 stays well below the tablet breakpoints (600/768). */
@media (max-width: 480px) {
  #header h1 { font-size: 25px !important; }
  #header h2 { font-size: 15px; }
}

/* bottom dock — make sure ALL FIVE items fit on the smallest phones */
@media (max-width: 380px) {
  #navbar.navbar ul, #header .navbar ul, .navbar ul {
    padding: 6px 3px !important;
  }
  #header .navbar a, #header.header-top .navbar a, .navbar a, .navbar a:focus {
    padding: 6px 1px !important;
    font-size: 8.5px !important;
  }
  .navbar a i { font-size: 19px !important; }
  .navbar a span { font-size: 8.5px; }
}