:root {
    --bg: #07111f;
    --bg-2: #0b1728;
    --surface: #0f1e31;
    --surface-2: #14263b;
    --surface-3: #182d45;
    --text: #f4f7fb;
    --muted: #a7b6c8;
    --line: rgba(255,255,255,.09);
    --blue: #4f8cff;
    --cyan: #32c7d9;
    --teal: #26b89a;
    --violet: #8b6cf6;
    --amber: #f1b84b;
    --green: #45c98c;
    --sky: #68b7ff;
    --shadow: 0 18px 44px rgba(0,0,0,.28);
    --radius: 18px;
    --shell: 1340px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 0%, rgba(79,140,255,.13), transparent 26%),
        radial-gradient(circle at 88% 16%, rgba(50,199,217,.08), transparent 24%),
        linear-gradient(180deg, #07111f 0%, #081523 35%, #0a1625 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
h1,h2,h3,p { margin-top: 0; }
.section-shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.section { padding: 34px 0; }

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(7,17,31,.88);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
.nav-shell { width: min(calc(100% - 48px), var(--shell)); margin: auto; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg,var(--blue),var(--cyan)); color: #fff; box-shadow: 0 8px 20px rgba(79,140,255,.24); }
.brand-text { font-size: .92rem; }
.main-nav { display: flex; align-items: center; gap: 19px; }
.main-nav a { color: #b7c4d3; text-decoration: none; font-size: .8rem; font-weight: 700; }
.main-nav a:hover { color: #fff; }
.main-nav .nav-cta { padding: 8px 13px; border-radius: 10px; background: linear-gradient(135deg,var(--blue),var(--cyan)); color: #fff; }
.menu-button { display: none; background: none; border: 0; padding: 8px; }
.menu-button span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; }

.hero {
    margin-top: 16px;
    padding: 26px;
    display: grid;
    grid-template-columns: minmax(0,1.28fr) minmax(300px,.72fr);
    gap: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(20,38,59,.96), rgba(11,23,40,.98) 60%, rgba(17,41,58,.96));
    box-shadow: var(--shadow);
}
.location-pill { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(104,183,255,.12); border: 1px solid rgba(104,183,255,.22); color: #bfe0ff; font-size: .76rem; font-weight: 800; }
.location-pill span { color: var(--sky); font-size: .62rem; }
.hero-name { margin-bottom: 5px; font-size: clamp(2.2rem,5vw,4.1rem); line-height: .98; letter-spacing: -.045em; }
.hero-role { margin-bottom: 7px; color: #9fdcff; font-size: clamp(1.55rem,2.8vw,2.2rem); font-weight: 850; letter-spacing: -.025em; }
.hero-focus { margin-bottom: 14px; color: #c0ccda; font-size: .92rem; font-weight: 700; }
.hero-summary { max-width: 760px; margin-bottom: 16px; color: #b7c6d7; font-size: .92rem; }
.status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.status-pills span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .01em;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.status-pills span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 8px;
    box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}
.status-canada {
    color: #ddfff0;
    background: linear-gradient(180deg, rgba(33,93,80,.45), rgba(19,58,50,.72));
    border-color: rgba(98,231,182,.34) !important;
}
.status-canada::before {
    background: #62e7b6;
    box-shadow: 0 0 0 4px rgba(98,231,182,.14);
}
.status-h1b {
    color: #ece8ff;
    background: linear-gradient(180deg, rgba(62,51,128,.46), rgba(36,31,90,.74));
    border-color: rgba(152,128,255,.36) !important;
}
.status-h1b::before {
    background: #9c86ff;
    box-shadow: 0 0 0 4px rgba(156,134,255,.14);
}
.status-relocate {
    color: #fff0c7;
    background: linear-gradient(180deg, rgba(108,82,24,.44), rgba(72,53,13,.76));
    border-color: rgba(255,204,93,.35) !important;
}
.status-relocate::before {
    background: #ffcf67;
    box-shadow: 0 0 0 4px rgba(255,207,103,.14);
}
.contact-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.contact-link { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 11px; border-radius: 13px; text-decoration: none; border: 1px solid var(--line); transition: transform .15s ease, border-color .15s ease; }
.contact-link:hover { transform: translateY(-2px); }
.contact-link > span:last-child { min-width: 0; }
.contact-link strong,.contact-link small { display: block; }
.contact-link strong { font-size: .8rem; }
.contact-link small { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9c7d6; font-size: .66rem; }
.contact-icon { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: .68rem; font-weight: 900; }
.linkedin { background: rgba(56,130,246,.10); border-color: rgba(56,130,246,.25); }
.linkedin .contact-icon { background: #2f73d7; }
.github { background: rgba(139,108,246,.10); border-color: rgba(139,108,246,.25); }
.github .contact-icon { background: #6b55cf; }
.email { background: rgba(38,184,154,.10); border-color: rgba(38,184,154,.25); }
.email .contact-icon { background: #1f9d84; }
.phone { background: rgba(241,184,75,.10); border-color: rgba(241,184,75,.25); }
.phone .contact-icon { background: #b98526; }
.hero-side { display: grid; gap: 12px; align-content: start; }
.profile-card { overflow: hidden; min-height: 0; border-radius: 18px; border: 1px solid rgba(255,255,255,.11); background: #0a1727; }
.profile-card img { width: 100%; height: 310px; object-fit: cover; object-position: center 18%; }
.strengths-card { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.mini-heading { margin-bottom: 9px; color: #dce7f3; font-size: .82rem; font-weight: 900; }
.strength-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.strength-pills span { padding: 6px 9px; border-radius: 999px; font-size: .7rem; font-weight: 850; border: 1px solid; }
.strength-blue { color: #cfe0ff; background: rgba(79,140,255,.10); border-color: rgba(79,140,255,.28)!important; }
.strength-cyan { color: #c6f7fb; background: rgba(50,199,217,.10); border-color: rgba(50,199,217,.28)!important; }
.strength-violet { color: #e0d6ff; background: rgba(139,108,246,.10); border-color: rgba(139,108,246,.28)!important; }
.strength-amber { color: #ffe6a9; background: rgba(241,184,75,.10); border-color: rgba(241,184,75,.28)!important; }
.strength-green { color: #c9f5e1; background: rgba(69,201,140,.10); border-color: rgba(69,201,140,.28)!important; }
.strength-sky { color: #d7ebff; background: rgba(104,183,255,.10); border-color: rgba(104,183,255,.28)!important; }

.section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.section-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg,rgba(79,140,255,.22),rgba(50,199,217,.16)); border: 1px solid rgba(104,183,255,.18); color: #bfe2ff; font-size: .88rem; font-weight: 900; }
.section-heading h2 { margin: 0; font-size: clamp(1.55rem,2.5vw,2rem); line-height: 1; letter-spacing: -.025em; }
.section-intro { max-width: 900px; margin: -2px 0 15px 40px; color: #a9bbcd; font-size: .88rem; }

.about-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg,rgba(79,140,255,.09),rgba(50,199,217,.045) 55%,rgba(139,108,246,.07)); border: 1px solid var(--line); }
.about-statement { padding: 15px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.about-statement strong { display: block; margin-bottom: 6px; color: #fff; font-size: 1.28rem; line-height: 1.25; }
.about-statement span { color: #aac0d5; font-size: .86rem; }
.about-copy { display: grid; gap: 8px; align-content: center; color: #b7c6d7; }
.about-copy p { margin: 0; }

.experience-list { display: grid; gap: 12px; }
.experience-card { position: relative; overflow: hidden; padding: 17px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.experience-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; }
.experience-blue::before { background: var(--blue); }
.experience-violet::before { background: var(--violet); }
.experience-amber::before { background: var(--amber); }
.experience-head { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 13px; margin-bottom: 11px; }
.company-logo { width: 72px; height: 72px; object-fit: contain; border-radius: 14px; padding: 5px; background: #fff; border: 1px solid rgba(255,255,255,.12); }
.experience-title h3 { margin: 0 0 2px; font-size: 1.08rem; }
.experience-title p { margin: 0; color: #8fd6de; font-weight: 800; }
.experience-meta { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; max-width: 280px; }
.meta-pill { padding: 5px 8px; border-radius: 999px; font-size: .68rem; font-weight: 850; border: 1px solid var(--line); }
.date-pill { color: #d3e4ff; background: rgba(79,140,255,.10); border-color: rgba(79,140,255,.22); }
.location-meta { color: #c6f3e7; background: rgba(38,184,154,.09); border-color: rgba(38,184,154,.22); }
.experience-card ul {
    list-style: none;
    margin: 2px 0 12px;
    padding: 0;
    display: grid;
    gap: 6px;
    color: #b7c7d8;
    font-size: .84rem;
}
.experience-card li {
    position: relative;
    margin: 0;
    padding: 7px 10px 7px 30px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.045);
    line-height: 1.45;
}
.experience-card li::before {
    content: "";
    position: absolute;
    left: 11px;
    top: .9em;
    width: 7px;
    height: 7px;
    border-radius: 3px;
    transform: rotate(45deg);
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(79,140,255,.10);
}
.experience-violet li::before {
    background: var(--violet);
    box-shadow: 0 0 0 4px rgba(139,108,246,.10);
}
.experience-amber li::before {
    background: var(--amber);
    box-shadow: 0 0 0 4px rgba(242,183,75,.10);
}
.experience-card li strong {
    color: #f4f8fc;
    font-weight: 800;
}
.tag-row,.skill-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-row span,.skill-cloud span { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); color: #c4d3e2; font-size: .68rem; font-weight: 800; }

.projects-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.project-card { padding: 17px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.project-blue { border-top: 3px solid var(--blue); }
.project-cyan { border-top: 3px solid var(--cyan); }
.project-violet { border-top: 3px solid var(--violet); }
.project-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.project-date,.project-type { padding: 5px 8px; border-radius: 999px; font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.project-date { color: #d8e7ff; background: rgba(79,140,255,.11); border: 1px solid rgba(79,140,255,.21); }
.project-type { color: #c8f4eb; background: rgba(38,184,154,.09); border: 1px solid rgba(38,184,154,.21); }
.project-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.project-card > p { margin-bottom: 10px; color: #afbfce; font-size: .84rem; }
.project-card ul {
    list-style: none;
    margin: 3px 0 12px;
    padding: 0;
    display: grid;
    gap: 6px;
    color: #b2c2d2;
    font-size: .8rem;
}
.project-card li {
    position: relative;
    margin: 0;
    padding: 7px 10px 7px 29px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.045);
    line-height: 1.45;
}
.project-card li::before {
    content: "✓";
    position: absolute;
    left: 9px;
    top: 7px;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ddebff;
    background: rgba(79,140,255,.15);
    border: 1px solid rgba(79,140,255,.30);
    font-size: .58rem;
    font-weight: 900;
}
.project-cyan li::before {
    color: #ccfbf4;
    background: rgba(50,199,217,.13);
    border-color: rgba(50,199,217,.28);
}
.project-violet li::before {
    color: #ece5ff;
    background: rgba(139,108,246,.14);
    border-color: rgba(139,108,246,.30);
}

.skills-list { display: grid; gap: 8px; }
.skill-row { display: grid; grid-template-columns: 170px 1fr; align-items: start; gap: 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.skill-row:nth-child(3n+1) { border-left: 3px solid var(--blue); }
.skill-row:nth-child(3n+2) { border-left: 3px solid var(--cyan); }
.skill-row:nth-child(3n+3) { border-left: 3px solid var(--violet); }
.skill-row h3 { margin: 3px 0 0; font-size: .86rem; }

.cert-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.cert-card { display: flex; align-items: center; gap: 10px; min-height: 94px; padding: 12px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line); }
.cert-card img { width: 45px; height: 45px; object-fit: contain; padding: 4px; border-radius: 10px; background: #fff; }
.cert-card h3 { margin: 0 0 2px; font-size: .82rem; line-height: 1.2; }
.cert-card p { margin: 0 0 1px; color: #8fd6de; font-size: .72rem; font-weight: 800; }
.cert-card span { color: #8fa3b7; font-size: .66rem; }
.cert-indigo { border-top: 3px solid var(--blue); }
.cert-violet { border-top: 3px solid var(--violet); }
.cert-amber { border-top: 3px solid var(--amber); }
.cert-blue { border-top: 3px solid var(--sky); }

.education-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.education-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line); }
.education-card img { width: 58px; height: 58px; object-fit: contain; padding: 4px; border-radius: 12px; background: #fff; }
.education-card span { color: #a8c7ff; font-size: .67rem; font-weight: 900; }
.education-card h3 { margin: 2px 0 2px; font-size: .9rem; }
.education-card p { margin: 0; color: #9fb0c1; font-size: .72rem; }

.contact-section { margin-top: 16px; padding: 34px 0; background: linear-gradient(135deg,#0b1a2d,#122943 58%,#123b4b); border-top: 1px solid var(--line); }
.contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.contact-inner h2 { margin: 0 0 6px; font-size: 1.75rem; }
.contact-inner p { max-width: 680px; margin: 0; color: #aebed0; }
.contact-actions { display: grid; gap: 5px; min-width: 220px; }
.contact-actions a { color: #d9e7f5; text-decoration: none; font-weight: 800; font-size: .8rem; }
.site-footer { padding: 17px 0; background: #050d17; color: #7f93a7; font-size: .7rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 15px; }
.back-to-top { position: fixed; right: 16px; bottom: 16px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; text-decoration: none; background: linear-gradient(135deg,var(--blue),var(--cyan)); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .18s ease; box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }

@media (max-width: 1020px) {
    .menu-button { display: block; }
    .main-nav { display: none; position: absolute; top: 59px; left: 18px; right: 18px; flex-direction: column; align-items: stretch; padding: 12px; border-radius: 14px; background: #0f1e31; border: 1px solid var(--line); box-shadow: var(--shadow); }
    .main-nav.open { display: flex; }
    .main-nav a { padding: 8px; }
    .hero { grid-template-columns: 1fr; }
    .hero-side { grid-template-columns: 220px 1fr; align-items: start; }
    .profile-card img { height: 255px; }
    .contact-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cert-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
    .section-shell,.nav-shell { width: min(calc(100% - 22px),var(--shell)); }
    .section { padding: 28px 0; }
    .brand-text { display: none; }
    .hero { margin-top: 10px; padding: 18px; border-radius: 18px; }
    .hero-name { font-size: clamp(2.15rem,12vw,3.25rem); }
    .hero-role { font-size: 1.45rem; }
    .contact-links { grid-template-columns: 1fr; }
    .hero-side { grid-template-columns: 1fr; }
    .profile-card { max-width: 250px; margin-inline: auto; }
    .profile-card img { height: 290px; }
    .about-panel { grid-template-columns: 1fr; }
    .experience-head { grid-template-columns: 64px 1fr; }
    .company-logo { width: 64px; height: 64px; }
    .experience-meta { grid-column: 2; justify-content: flex-start; }
    .projects-grid,.education-grid { grid-template-columns: 1fr; }
    .skill-row { grid-template-columns: 1fr; gap: 8px; }
    .cert-grid { grid-template-columns: 1fr; }
    .contact-inner { flex-direction: column; align-items: flex-start; }
    .footer-inner { flex-direction: column; }
}

.skill-row h3 { display:flex; align-items:center; gap:8px; }
.skill-icon { width:26px; height:26px; display:inline-grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:#dce7f3; font-size:.72rem; font-weight:900; flex:0 0 26px; }

/* Compact recruiter-focused redesign */
:root {
    --surface: #142941;
    --surface-2: #1a3551;
    --surface-3: #213f5e;
}
body { font-size: 13px; line-height: 1.48; }
.section { padding: 24px 0; }
.nav-shell { min-height: 58px; }
.hero {
    margin-top: 10px;
    padding: 20px;
    grid-template-columns: minmax(0,1.32fr) minmax(280px,.68fr);
    gap: 20px;
    border-radius: 20px;
}
.location-pill { margin-bottom: 9px; padding: 5px 9px; font-size: .7rem; }
.hero-name { margin-bottom: 3px; font-size: clamp(2.15rem,4vw,3.2rem); line-height: .96; }
.hero-role { margin-bottom: 8px; font-size: clamp(1.3rem,2.1vw,1.72rem); }
.hero-summary { margin: 11px 0 12px; max-width: 700px; font-size: .84rem; line-height: 1.48; }

.hero-focus-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin: 7px 0 10px;
}
.hero-focus-grid > span {
    display: grid;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
}
.hero-focus-grid strong { font-size: .76rem; line-height: 1.2; }
.hero-focus-grid small { color: #9eb0c3; font-size: .61rem; line-height: 1.25; }
.focus-backend { box-shadow: inset 3px 0 0 var(--blue); }
.focus-cloud { box-shadow: inset 3px 0 0 var(--violet); }
.focus-realtime { box-shadow: inset 3px 0 0 var(--cyan); }
.focus-fullstack { box-shadow: inset 3px 0 0 var(--green); }
.focus-backend strong { color: #b9d2ff; }
.focus-cloud strong { color: #d7ccff; }
.focus-realtime strong { color: #baf2f6; }
.focus-fullstack strong { color: #c8f2df; }

.status-pills { gap: 8px; margin-bottom: 11px; }
.status-pills span { min-height: 34px; padding: 7px 12px; font-size: .69rem; }
.contact-links { gap: 6px; }
.contact-link { padding: 8px 9px; border-radius: 11px; }
.contact-icon { flex-basis: 26px; height: 26px; border-radius: 7px; }
.contact-icon svg { width: 15px; height: 15px; }
.contact-link strong { font-size: .74rem; }
.contact-link small { font-size: .6rem; }

.hero-side { gap: 9px; }
.profile-card { border-radius: 15px; }
.profile-card img { height: 250px; object-position: center 15%; }
.strengths-card { padding: 11px; border-radius: 14px; background: linear-gradient(145deg,#19314b,#14283f); }
.mini-heading { margin-bottom: 7px; font-size: .74rem; letter-spacing: .03em; }
.strength-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.strength-item {
    display: grid;
    grid-template-columns: 8px 1fr;
    align-items: start;
    gap: 7px;
    min-width: 0;
    padding: 8px 9px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.055);
}
.strength-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb,currentColor 16%,transparent); }
.strength-item strong,.strength-item small { display:block; }
.strength-item strong { font-size: .66rem; line-height: 1.2; }
.strength-item small { margin-top: 2px; color: #95a9bd; font-size: .55rem; line-height: 1.25; }
.strength-blue { color: #9fc2ff; }
.strength-cyan { color: #77e1eb; }
.strength-violet { color: #beaaff; }
.strength-amber { color: #ffd274; }
.strength-green { color: #8de1bb; }
.strength-sky { color: #9cd2ff; }

.section-heading { gap: 8px; margin-bottom: 10px; }
.section-icon { width: 28px; height: 28px; border-radius: 8px; }
.section-icon svg,.skill-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.section-heading h2 { font-size: clamp(1.38rem,2vw,1.7rem); }
.section-intro { margin: -1px 0 10px 36px; font-size: .8rem; }

.about-panel { gap: 13px; padding: 14px; border-radius: 15px; }
.about-statement { padding: 12px; border-radius: 11px; }
.about-statement strong { margin-bottom: 4px; font-size: 1.08rem; }
.about-statement span,.about-copy { font-size: .8rem; }

.experience-list { gap: 9px; }
.experience-card { padding: 13px 14px; border-radius: 15px; background: linear-gradient(145deg,#172d46,#14283f); }
.experience-head { grid-template-columns: 58px 1fr auto; gap: 10px; margin-bottom: 8px; }
.company-logo { width: 58px; height: 58px; border-radius: 11px; }
.experience-title h3 { font-size: .98rem; }
.experience-title p { font-size: .78rem; }
.meta-pill { padding: 4px 7px; font-size: .61rem; }
.experience-card ul { margin-bottom: 8px; font-size: .77rem; }
.experience-card li { margin-bottom: 4px; }

.projects-grid { gap: 9px; }
.project-card { padding: 14px; border-radius: 15px; background: linear-gradient(145deg,#172d46,#14283f); }
.project-card h3 { font-size: .98rem; }
.project-card > p { font-size: .76rem; }
.project-card ul { font-size: .73rem; }
.project-date,.project-type { padding: 4px 7px; font-size: .59rem; }

.skills-list { gap: 7px; }
.skill-row {
    --skill-accent: var(--blue);
    grid-template-columns: 150px 1fr;
    gap: 12px;
    padding: 9px 11px;
    border-radius: 12px;
    background: linear-gradient(100deg,#1b3450,#162b43);
    border-color: rgba(255,255,255,.11);
    box-shadow: inset 3px 0 0 var(--skill-accent);
}
.skill-row:nth-child(7n+1) { --skill-accent: var(--blue); }
.skill-row:nth-child(7n+2) { --skill-accent: var(--cyan); }
.skill-row:nth-child(7n+3) { --skill-accent: var(--violet); }
.skill-row:nth-child(7n+4) { --skill-accent: var(--sky); }
.skill-row:nth-child(7n+5) { --skill-accent: var(--teal); }
.skill-row:nth-child(7n+6) { --skill-accent: var(--amber); }
.skill-row:nth-child(7n) { --skill-accent: var(--green); }
.skill-row { border-left: 1px solid var(--line) !important; }
.skill-row h3 { margin: 0; font-size: .78rem; }
.skill-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 8px;
    color: var(--skill-accent);
    background: color-mix(in srgb,var(--skill-accent) 12%,#13263c);
    border-color: color-mix(in srgb,var(--skill-accent) 30%,transparent);
}
.skill-cloud { gap: 5px; }
.skill-cloud span,.tag-row span {
    padding: 5px 8px;
    border-radius: 8px;
    font-size: .62rem;
    letter-spacing: .01em;
    background: linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.11);
    color: #e2ebf5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.skill-row .skill-cloud span {
    color: color-mix(in srgb,var(--skill-accent) 72%,#ffffff);
    background: linear-gradient(180deg,
        color-mix(in srgb,var(--skill-accent) 18%,#1a3049),
        color-mix(in srgb,var(--skill-accent) 9%,#14283f));
    border-color: color-mix(in srgb,var(--skill-accent) 38%,transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 10px rgba(0,0,0,.08);
}
.skill-row .skill-cloud span:hover {
    color: color-mix(in srgb,var(--skill-accent) 84%,#ffffff);
    border-color: color-mix(in srgb,var(--skill-accent) 58%,transparent);
    background: color-mix(in srgb,var(--skill-accent) 18%,#172c45);
}

.cert-grid { gap: 8px; }
.cert-card { min-height: 78px; padding: 10px; border-radius: 12px; background: linear-gradient(145deg,#172d46,#14283f); }
.cert-card img { width: 38px; height: 38px; border-radius: 8px; }
.cert-card h3 { font-size: .73rem; }
.cert-card p { font-size: .64rem; }
.cert-card span { font-size: .59rem; }
.education-card { padding: 11px; border-radius: 12px; background: linear-gradient(145deg,#172d46,#14283f); }
.education-card img { width: 48px; height: 48px; border-radius: 9px; }
.education-card h3 { font-size: .82rem; }
.education-card p { font-size: .66rem; }
.contact-section { padding: 26px 0; }
.contact-inner h2 { font-size: 1.45rem; }

@media (max-width: 1020px) {
    .hero { grid-template-columns: 1fr; }
    .hero-side { grid-template-columns: 200px 1fr; }
    .profile-card img { height: 225px; }
}
@media (max-width: 760px) {
    .section { padding: 22px 0; }
    .hero { padding: 15px; }
    .hero-name { font-size: clamp(2rem,11vw,2.75rem); }
    .hero-focus-grid { grid-template-columns: 1fr 1fr; }
    .hero-side { grid-template-columns: 1fr; }
    .profile-card img { height: 260px; }
    .experience-head { grid-template-columns: 52px 1fr; }
    .company-logo { width: 52px; height: 52px; }
    .skill-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Merge strengths into focus grid and show full profile photo */
.hero-focus-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
}
.hero-focus-grid > span {
    min-height: 52px;
    align-content: center;
}
.focus-performance { box-shadow: inset 3px 0 0 var(--amber); }
.focus-security { box-shadow: inset 3px 0 0 var(--green); }
.focus-performance strong { color: #ffd274; }
.focus-security strong { color: #8de1bb; }

.hero-side {
    align-self: center;
    justify-items: center;
}
.profile-card-compact {
    width: min(100%, 252px);
    height: 308px;
    padding: 0;
    overflow: hidden;
    background: #eef3f8;
}
.profile-card-compact img {
    width: 100%;
    height: 100% !important;
    max-height: none;
    object-fit: cover !important;
    object-position: center 16% !important;
    transform: scale(1.055);
    border-radius: 0;
}
.strengths-card { display: none !important; }

@media (max-width: 980px) {
    .hero-focus-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .profile-card-compact { width: min(100%, 230px); height: 282px; }
}

@media (max-width: 620px) {
    .hero-focus-grid { grid-template-columns: 1fr; }
    .profile-card-compact { width: min(100%, 210px); height: 258px; }
}

/* Layout refinement: tighter sections, profile-side contacts, simplified dates */
.section { padding: 16px 0; }
.section-heading { margin-bottom: 8px; }
.section-intro { margin-bottom: 8px; }
.hero {
    margin-top: 8px;
    padding: 17px;
    grid-template-columns: minmax(0,1.38fr) minmax(330px,.62fr);
    gap: 16px;
}
.hero-copy { align-self: center; }
.hero-side { gap: 8px; }
.profile-card img { height: 230px; }
.hero-side .contact-links {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
}
.hero-side .contact-link {
    min-height: 52px;
    padding: 8px 9px;
}
.hero-side .contact-link small { max-width: 128px; }
.status-pills { margin-bottom: 0; }

.experience-list { gap: 8px; }
.experience-card { padding-block: 12px; }
.experience-head { grid-template-columns: 58px 1fr auto; margin-bottom: 7px; }
.experience-meta { max-width: none; }
.experience-meta .location-meta {
    padding: 5px 9px;
    font-size: .64rem;
}

.projects-grid { gap: 8px; }
.project-meta { margin-bottom: 8px; }
.project-date { min-width: 42px; text-align: center; }

.skills-list { gap: 7px; }
.certification-grid, .education-grid { gap: 8px; }
.contact-section { margin-top: 8px; padding: 20px 0; }

@media (max-width: 980px) {
    .hero { grid-template-columns: 1fr; }
    .hero-side { grid-template-columns: 200px 1fr; align-items: start; }
    .hero-side .contact-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
    .section { padding: 14px 0; }
    .hero { padding: 14px; gap: 12px; }
    .hero-side { grid-template-columns: 1fr; }
    .hero-side .contact-links { grid-template-columns: 1fr 1fr; }
    .profile-card img { height: 215px; }
    .experience-head { grid-template-columns: 52px 1fr; }
    .experience-meta { grid-column: 2; justify-content: flex-start; }
}


/* Location and contact refinements */
.location-pill { display:none !important; }
.hero-location-card {
    display:inline-flex;
    align-items:center;
    gap:9px;
    width:max-content;
    margin:2px 0 9px;
    padding:7px 11px;
    border-radius:13px;
    background:linear-gradient(135deg,rgba(79,140,255,.15),rgba(50,199,217,.12));
    border:1px solid rgba(104,183,255,.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.hero-location-icon {
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(104,183,255,.16);
    color:#8ecbff;
    border:1px solid rgba(104,183,255,.22);
    flex:0 0 27px;
}
.hero-location-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hero-location-card > span:last-child { display:grid; gap:0; line-height:1.15; }
.hero-location-card small { color:#8fa6bc; font-size:.59rem; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.hero-location-card strong { color:#eaf4ff; font-size:.78rem; }

.contact-inner { align-items:center; }
.contact-copy { max-width:670px; }
.contact-actions-cards {
    grid-template-columns:repeat(2,minmax(185px,1fr));
    gap:8px;
    min-width:min(440px,100%);
}
.contact-actions-cards .contact-link { min-height:58px; }
.contact-actions-cards .contact-link strong { font-size:.78rem; }
.contact-actions-cards .contact-link small { font-size:.66rem; }
.contact-actions-cards .contact-icon { width:30px; height:30px; flex:0 0 30px; }
.contact-actions-cards a { color:inherit; }

@media (max-width: 760px) {
    .hero-location-card { width:100%; }
    .contact-actions-cards { grid-template-columns:1fr; width:100%; min-width:0; }
}

/* Technology Stack: slightly larger typography only */
#skills .section-heading h2 { font-size: 1.8rem; }
#skills .skill-row h3 { font-size: .92rem; }
#skills .skill-cloud span { font-size: .72rem; }

/* Experience location cards: match hero location styling without the "Based in" label */
.experience-location-card {
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    padding:6px 10px;
    border-radius:12px;
    background:linear-gradient(135deg,rgba(79,140,255,.14),rgba(50,199,217,.11));
    border:1px solid rgba(104,183,255,.27);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.experience-location-icon {
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:rgba(104,183,255,.15);
    color:#8ecbff;
    border:1px solid rgba(104,183,255,.21);
    flex:0 0 25px;
}
.experience-location-icon svg {
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.experience-location-card strong {
    color:#eaf4ff;
    font-size:.72rem;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}


/* Navigation and mobile polish */
.nav-shell {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 44px;
    align-items: center;
    gap: 12px;
}
.main-nav {
    grid-column: 1;
    justify-self: center;
    gap: 22px;
}
.menu-button { grid-column: 2; justify-self: end; }

@media (min-width: 1021px) {
    .menu-button { visibility: hidden; pointer-events: none; width: 0; padding: 0; }
}

@media (max-width: 1020px) {
    .nav-shell { grid-template-columns: 1fr 40px; }
    .main-nav {
        grid-column: 1 / -1;
        justify-self: stretch;
        top: 54px;
        left: 0;
        right: 0;
        display: none;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 6px;
        padding: 10px;
        background: #0d1d30;
    }
    .main-nav.open { display: grid; }
    .main-nav a {
        padding: 9px 10px;
        border-radius: 9px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.06);
        text-align: center;
    }
    .main-nav .nav-cta { margin: 0; }
}

@media (max-width: 620px) {
    .section-shell, .nav-shell { width: min(calc(100% - 14px), var(--shell)); }
    .site-header { border-bottom-color: rgba(255,255,255,.06); }
    .nav-shell { min-height: 50px; }
    .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: .68rem; }
    .menu-button { padding: 5px; }
    .menu-button span { width: 20px; margin: 4px 0; }

    .hero {
        margin-top: 6px;
        padding: 12px;
        gap: 10px;
        border-radius: 15px;
    }
    .hero-name {
        font-size: clamp(1.85rem, 10vw, 2.35rem);
        line-height: .98;
        margin-bottom: 2px;
    }
    .hero-role { font-size: 1.1rem; margin-bottom: 6px; }
    .hero-location-card { padding: 5px 8px; margin-bottom: 6px; }
    .hero-location-icon { width: 23px; height: 23px; flex-basis: 23px; }
    .hero-location-card strong { font-size: .68rem; }
    .hero-location-card small { font-size: .5rem; }

    .hero-focus-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 5px;
        margin: 5px 0 7px;
    }
    .hero-focus-grid > span { min-height: 44px; padding: 6px 7px; border-radius: 9px; }
    .hero-focus-grid strong { font-size: .66rem; }
    .hero-focus-grid small { font-size: .51rem; }
    .hero-summary { margin: 7px 0 8px; font-size: .69rem; line-height: 1.42; }
    .status-pills { gap: 6px; }
    .status-pills span { min-height: 28px; padding: 5px 9px; font-size: .58rem; }
    .status-pills span::before { width: 6px; height: 6px; flex-basis: 6px; }

    .hero-side {
        display: grid;
        grid-template-columns: 124px 1fr;
        gap: 8px;
        align-items: stretch;
        width: 100%;
    }
    .profile-card-compact {
        width: 124px;
        height: 154px;
        margin: 0;
        border-radius: 12px;
    }
    .profile-card-compact img { transform: scale(1.07); object-position: center 14% !important; }
    .hero-side .contact-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
    }
    .hero-side .contact-link {
        min-height: 34px;
        padding: 5px 6px;
        border-radius: 9px;
        grid-template-columns: 24px minmax(0,1fr);
        gap: 6px;
    }
    .hero-side .contact-icon { width: 24px; height: 24px; flex-basis: 24px; font-size: .59rem; }
    .hero-side .contact-link strong { font-size: .62rem; }
    .hero-side .contact-link small {
        font-size: .49rem;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .section { padding: 11px 0; }
    .section-heading h2 { font-size: 1.38rem; }
    .section-icon { width: 30px; height: 30px; }
    .about-panel, .experience-card, .project-card, .skill-row, .cert-card, .education-card { border-radius: 12px; }
    .experience-card, .project-card { padding: 10px; }
    .experience-card ul, .project-card ul { padding-left: 16px; }
    .experience-card li, .project-card li { margin-bottom: 4px; }
    .tag-row { gap: 4px; }
    .tag-row span { padding: 4px 6px; font-size: .52rem; }
}


/* ===== Recruiter scan polish ===== */
.hero-focus-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 920px;
}
.hero-focus-primary > span {
    min-height: 54px;
    padding: 9px 11px;
}
.hero-focus-primary strong { font-size: .84rem; }
.hero-focus-primary small { font-size: .64rem; }
.hero-summary {
    max-width: 920px;
    margin-top: 11px;
    margin-bottom: 13px;
    font-size: .88rem;
    line-height: 1.55;
}

.about-value-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px;
    padding: 12px;
}
.about-value {
    padding: 13px 14px;
    border-radius: 13px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
}
.about-value:nth-child(1) { border-top: 2px solid var(--blue); }
.about-value:nth-child(2) { border-top: 2px solid var(--cyan); }
.about-value:nth-child(3) { border-top: 2px solid var(--green); }
.about-value strong {
    display: block;
    margin-bottom: 5px;
    color: #f5f8fc;
    font-size: .93rem;
}
.about-value span {
    display: block;
    color: #aebfd0;
    font-size: .76rem;
    line-height: 1.45;
}

.project-context {
    max-width: none;
    margin-left: 0;
    margin-bottom: 12px;
    padding: 9px 12px;
    border-radius: 11px;
    background: rgba(79,140,255,.07);
    border: 1px solid rgba(79,140,255,.13);
    color: #aec2d7;
}
.project-context strong { color: #dbe9ff; }

.experience-card ul,
.project-card ul {
    gap: 5px;
}
.experience-card li,
.project-card li {
    padding-top: 6px;
    padding-bottom: 6px;
}

.project-card > p {
    margin-bottom: 8px;
    line-height: 1.5;
}
.project-card {
    padding: 15px 16px;
}
.project-card h3 {
    margin-bottom: 6px;
}
.tag-row {
    margin-top: 2px;
}

@media (max-width: 760px) {
    .hero-focus-primary { grid-template-columns: 1fr 1fr !important; }
    .about-value-grid { grid-template-columns: 1fr !important; }
    .project-context { margin-left: 0; }
}


/* ===== Visual storytelling additions, layered onto the original design ===== */
.impact-strip {
    margin-top: 10px;
    padding: 13px 16px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(18,41,65,.96), rgba(12,31,47,.96));
}
.impact-intro { display: grid; gap: 3px; }
.impact-intro span {
    color: #77c4ff;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .10em;
}
.impact-intro strong { color: #f2f7fc; font-size: .88rem; }
.impact-metrics {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px;
}
.impact-metrics article {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
}
.impact-metrics article:nth-child(1) strong { color: #8dc2ff; }
.impact-metrics article:nth-child(2) strong { color: #c0a8ff; }
.impact-metrics article:nth-child(3) strong { color: #77ead5; }
.impact-metrics article:nth-child(4) strong { color: #ffd072; }
.impact-metrics article:nth-child(5) strong { color: #86e6c6; }
.impact-metrics strong { display:block; font-size: 1.05rem; line-height:1; }
.impact-metrics span { display:block; margin-top:5px; color:#9eb0c3; font-size:.60rem; }

.approach-heading { align-items: center; }
.section-number {
    flex: 0 0 auto;
    min-width: 36px;
    height: 30px;
    padding: 0 8px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #82c7ff;
    background: rgba(79,140,255,.12);
    border: 1px solid rgba(104,183,255,.22);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .05em;
}
.architecture-panel {
    display: grid;
    grid-template-columns: minmax(280px,.85fr) minmax(0,1.65fr);
    gap: 22px;
    align-items: center;
    padding: 18px;
    border-radius: 17px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg,rgba(24,49,76,.90),rgba(14,34,52,.95));
}
.architecture-kicker {
    color: #55d6e6;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
}
.architecture-copy h3 { margin: 7px 0 7px; font-size: 1.18rem; color:#f4f8fc; }
.architecture-copy p { margin:0; color:#aebfd0; font-size:.78rem; line-height:1.55; }
.architecture-flow {
    display: grid;
    grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
    align-items: center;
}
.flow-node {
    min-height: 84px;
    padding: 11px 12px;
    display: grid;
    align-content: center;
    gap: 4px;
    border-radius: 13px;
    border: 1px solid rgba(104,183,255,.18);
    background: rgba(29,59,91,.78);
}
.flow-node small { color:#72bbf5; font-size:.54rem; font-weight:900; }
.flow-node strong { color:#f4f8fc; font-size:.78rem; }
.flow-node span { color:#8fa9c0; font-size:.58rem; }
.flow-line {
    position: relative;
    height: 1px;
    background: linear-gradient(90deg,rgba(50,199,217,.25),rgba(50,199,217,.8),rgba(50,199,217,.25));
    overflow: hidden;
}
.flow-line::after {
    content:"";
    position:absolute;
    top:-1px;
    left:-10px;
    width:16px;
    height:3px;
    border-radius:999px;
    background:#58d9e8;
    box-shadow:0 0 10px rgba(88,217,232,.75);
    animation: flowPulse 2.8s linear infinite;
}
@keyframes flowPulse { to { transform: translateX(40px); } }

.approach-values {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
}
.approach-values article {
    padding:13px 14px;
    border-radius:13px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
}
.approach-values article:nth-child(1) { border-top:2px solid var(--blue); }
.approach-values article:nth-child(2) { border-top:2px solid var(--cyan); }
.approach-values article:nth-child(3) { border-top:2px solid var(--violet); }
.approach-values strong { display:block; margin-bottom:5px; color:#f4f8fc; font-size:.82rem; }
.approach-values span { color:#a9bacb; font-size:.69rem; line-height:1.45; }

.project-context-bar {
    margin:0 0 10px;
    padding:8px 10px;
    border:1px solid rgba(79,140,255,.18);
    border-radius:10px;
    background:rgba(79,140,255,.06);
    color:#aebfd0;
    font-size:.68rem;
}
.project-context-bar strong { color:#dce9ff; }

.flagship-project {
    position:relative;
    padding:16px;
    border-radius:17px;
    border:1px solid rgba(79,140,255,.34);
    border-left:3px solid var(--blue);
    background:linear-gradient(145deg,rgba(26,56,86,.96),rgba(21,45,68,.94));
    box-shadow:0 14px 28px rgba(0,0,0,.10);
}
.flagship-topline,.project-card-top {
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    margin-bottom:8px;
}
.flagship-label,.project-card-top span {
    color:#9bcaff;
    font-size:.55rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.project-type {
    padding:4px 8px;
    border-radius:999px;
    color:#a8f3e1;
    background:rgba(37,176,151,.10);
    border:1px solid rgba(37,176,151,.24);
    font-size:.55rem;
    font-weight:850;
}
.flagship-project h3 { margin:0 0 4px; font-size:1.08rem; }
.flagship-summary { margin:0 0 10px; color:#aec0d0; font-size:.72rem; }
.project-story {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.project-story article {
    padding:10px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.035);
}
.project-story small {
    display:block;
    color:#75bfff;
    font-size:.49rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.project-story strong { display:block; margin:4px 0; color:#f2f7fc; font-size:.72rem; }
.project-story span { display:block; color:#9eb0c3; font-size:.57rem; line-height:1.4; }
.flagship-results {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin:8px 0;
}
.flagship-results span,.project-result-list span {
    padding:7px 9px;
    border-radius:10px;
    color:#b6c8d9;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    font-size:.62rem;
    line-height:1.4;
}

.major-projects-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
}
.major-project-card {
    padding:14px;
    border-radius:15px;
    border:1px solid rgba(50,199,217,.24);
    border-top:2px solid var(--cyan);
    background:rgba(24,49,76,.80);
}
.major-project-card.major-violet {
    border-color:rgba(139,108,246,.24);
    border-top-color:var(--violet);
}
.major-project-card h3 { margin:0 0 5px; font-size:.92rem; }
.major-project-card > p { margin:0 0 8px; color:#9fb2c5; font-size:.66rem; line-height:1.45; }
.project-result-list { display:grid; gap:6px; margin-bottom:8px; }

.exploratory-projects { margin-top:14px; }
.exploratory-heading { margin-bottom:8px; }
.exploratory-heading > span {
    color:#79bfff;
    font-size:.52rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.09em;
}
.exploratory-heading h3 { margin:3px 0 0; font-size:.88rem; }
.exploratory-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.exploratory-grid article {
    padding:12px;
    border-radius:13px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.028);
}
.exploratory-grid small {
    color:#54d7c5;
    font-size:.49rem;
    font-weight:900;
    text-transform:uppercase;
}
.exploratory-grid strong { display:block; margin:4px 0 5px; color:#eef5fb; font-size:.74rem; }
.exploratory-grid p { margin:0 0 8px; color:#99adbf; font-size:.59rem; line-height:1.45; }

@media (prefers-reduced-motion: reduce) {
    .flow-line::after { animation:none; }
}
@media (max-width:980px) {
    .impact-strip { grid-template-columns:1fr; }
    .impact-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .architecture-panel { grid-template-columns:1fr; }
    .architecture-flow { grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr; }
}
@media (max-width:700px) {
    .impact-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .architecture-flow { grid-template-columns:1fr; gap:6px; }
    .flow-line { width:1px; height:16px; margin:auto; }
    .flow-line::after { display:none; }
    .approach-values,.project-story,.major-projects-grid,.exploratory-grid,.flagship-results { grid-template-columns:1fr; }
}


/* ===============================================================
   STUDIO REVAMP
   A narrative, interaction-led portfolio layer.
   The original hero stays structurally intact.
   =============================================================== */

html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at 12% 18%, rgba(79,140,255,.07), transparent 27%),
        radial-gradient(circle at 84% 35%, rgba(50,199,217,.055), transparent 25%),
        linear-gradient(180deg,#07111e 0%,#081523 48%,#07111d 100%);
}
body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    opacity:.16;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,black,transparent 78%);
}

/* Hero: only the four allowed focus boxes get new personality. */
.hero-focus-grid.hero-focus-primary > span {
    position:relative;
    overflow:hidden;
    padding:20px 11px 9px;
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.hero-focus-grid.hero-focus-primary > span::after {
    content:"";
    position:absolute;
    inset:auto -20% -70% auto;
    width:110px;
    height:110px;
    border-radius:50%;
    opacity:0;
    transition:opacity .2s ease,transform .25s ease;
    filter:blur(4px);
}
.hero-focus-grid.hero-focus-primary > span:hover {
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.16);
    box-shadow:0 12px 24px rgba(0,0,0,.13);
}
.hero-focus-grid.hero-focus-primary > span:hover::after { opacity:.14; transform:scale(1.15); }
.hero-focus-grid.hero-focus-primary b {
    position:absolute;
    left:10px;
    top:7px;
    color:#6f8296;
    font-size:.48rem;
    font-weight:900;
}
.hero-focus-grid.hero-focus-primary i {
    position:absolute;
    right:9px;
    top:7px;
    color:#71879b;
    font-size:.46rem;
    font-style:normal;
    font-weight:900;
    letter-spacing:.13em;
}
.focus-backend::after { background:var(--blue); }
.focus-cloud::after { background:var(--violet); }
.focus-realtime::after { background:var(--cyan); }
.focus-fullstack::after { background:var(--green); }
.focus-backend i { color:#82adff!important; }
.focus-cloud i { color:#aa91ff!important; }
.focus-realtime i { color:#5adce8!important; }
.focus-fullstack i { color:#64dfa7!important; }

/* Scroll progress */
.scroll-progress {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:2px;
    z-index:1000;
    pointer-events:none;
    background:transparent;
}
.scroll-progress span {
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));
    box-shadow:0 0 12px rgba(50,199,217,.45);
}

/* Marquee creates a distinct break after the static hero */
.signal-marquee {
    margin-top:12px;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
    background:rgba(5,15,27,.76);
}
.marquee-track {
    width:max-content;
    display:flex;
    align-items:center;
    gap:18px;
    padding:8px 0;
    animation:marqueeMove 28s linear infinite;
}
.marquee-track span {
    color:#718ba3;
    font-size:.54rem;
    font-weight:900;
    letter-spacing:.16em;
}
.marquee-track b { color:#2c9eae; font-size:.45rem; }
@keyframes marqueeMove { to { transform:translateX(-50%); } }

/* Scene system */
.studio-section {
    position:relative;
    padding:46px 0;
}
.studio-section:nth-of-type(even) {
    background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.024),rgba(255,255,255,.012));
}
.scene-shell {
    width:min(calc(100% - 48px),1340px);
    margin:auto;
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    gap:28px;
}
.scene-rail {
    position:sticky;
    top:88px;
    align-self:start;
    display:grid;
    gap:4px;
    padding-top:4px;
}
.scene-rail > span {
    color:#63bdf3;
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.13em;
}
.scene-rail strong { color:#dfeaf4; font-size:.78rem; }
.scene-rail small { color:#5f768b; font-size:.56rem; }
.scene-content { min-width:0; }
.scene-intro { max-width:850px; margin-bottom:16px; }
.scene-intro.compact { max-width:760px; }
.scene-intro.split {
    max-width:none;
    display:grid;
    grid-template-columns:1fr .75fr;
    gap:30px;
    align-items:end;
}
.eyebrow {
    color:#5fbce8;
    font-size:.52rem;
    font-weight:900;
    letter-spacing:.14em;
}
.scene-intro h2 {
    margin:6px 0 7px;
    color:#f4f7fb;
    font-size:clamp(1.8rem,3.1vw,3rem);
    line-height:1.02;
    letter-spacing:-.04em;
}
.scene-intro > p,.scene-intro.split > p {
    margin:0;
    color:#91a7ba;
    font-size:.72rem;
    line-height:1.55;
}

/* Approach */
.system-map {
    display:grid;
    grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;
    align-items:center;
    margin:12px 0 10px;
}
.system-map article {
    position:relative;
    overflow:hidden;
    min-height:110px;
    display:grid;
    align-content:center;
    gap:4px;
    padding:14px;
    border-radius:15px;
    background:linear-gradient(145deg,rgba(31,64,97,.82),rgba(21,46,70,.9));
    border:1px solid rgba(255,255,255,.07);
    transition:transform .2s ease,border-color .2s ease;
}
.system-map article:hover { transform:translateY(-4px); border-color:rgba(104,183,255,.2); }
.system-map article::after {
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    border-radius:50%;
    right:-35px;
    bottom:-45px;
    opacity:.10;
}
.system-map article[data-tone="blue"]::after { background:var(--blue); }
.system-map article[data-tone="violet"]::after { background:var(--violet); }
.system-map article[data-tone="cyan"]::after { background:var(--cyan); }
.system-map article[data-tone="green"]::after { background:var(--green); }
.system-map article span { color:#6f96b6; font-size:.52rem; font-weight:900; }
.system-map article strong { color:#f1f6fb; font-size:.84rem; }
.system-map article small { color:#8fa6b9; font-size:.58rem; }
.system-link {
    position:relative;
    height:1px;
    overflow:hidden;
    background:linear-gradient(90deg,rgba(50,199,217,.15),rgba(50,199,217,.75),rgba(50,199,217,.15));
}
.system-link i {
    position:absolute;
    left:-12px;
    top:-1px;
    width:14px;
    height:3px;
    border-radius:999px;
    background:#5cd8e7;
    box-shadow:0 0 10px rgba(92,216,231,.7);
    animation:packetTravel 2.6s linear infinite;
}
@keyframes packetTravel { to { transform:translateX(48px); } }
.principle-strip {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.principle-strip article {
    padding:12px 13px;
    border-radius:12px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.055);
}
.principle-strip span { color:#5f8eaf; font-size:.47rem; font-weight:900; letter-spacing:.12em; }
.principle-strip strong { display:block; margin:4px 0; color:#eff5fb; font-size:.72rem; }
.principle-strip p { margin:0; color:#8198ac; font-size:.56rem; }

/* Journey */
.journey-path { display:grid; gap:10px; }
.journey-panel {
    position:relative;
    overflow:hidden;
    padding:15px;
    border-radius:16px;
    background:linear-gradient(145deg,rgba(24,50,77,.9),rgba(17,38,59,.95));
    border:1px solid rgba(255,255,255,.065);
    transition:transform .22s ease,border-color .22s ease;
}
.journey-panel::after {
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:var(--blue);
}
.journey-panel[data-accent="violet"]::after { background:var(--violet); }
.journey-panel[data-accent="amber"]::after { background:var(--amber); }
.journey-panel:hover { transform:translateX(5px); border-color:rgba(104,183,255,.14); }
.journey-top {
    display:grid;
    grid-template-columns:56px 1fr auto;
    gap:10px;
    align-items:center;
}
.journey-top img {
    width:56px;
    height:56px;
    object-fit:contain;
    padding:4px;
    border-radius:12px;
    background:#fff;
}
.journey-top span { color:#6d91ae; font-size:.47rem; font-weight:900; letter-spacing:.1em; }
.journey-top h3 { margin:3px 0 1px; font-size:.9rem; }
.journey-top p { margin:0; color:#79c7d0; font-size:.61rem; font-weight:750; }
.journey-top b { color:#304e68; font-size:2.8rem; line-height:1; }
.journey-impact {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin:11px 0 8px;
}
.journey-impact div {
    padding:8px 9px;
    border-radius:10px;
    background:rgba(255,255,255,.026);
    border:1px solid rgba(255,255,255,.05);
}
.journey-impact small { display:block; color:#5c809e; font-size:.47rem; }
.journey-impact strong { display:block; margin-top:2px; color:#dce8f3; font-size:.62rem; }
.journey-summary { margin:0 0 8px; color:#91a8ba; font-size:.61rem; line-height:1.5; }

/* Projects */
.project-feature,.project-card-studio {
    --mx:50%;
    --my:50%;
    position:relative;
    overflow:hidden;
}
.spotlight-card::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(280px circle at var(--mx) var(--my),rgba(104,183,255,.11),transparent 55%);
    transition:opacity .18s ease;
}
.spotlight-card:hover::before { opacity:1; }
.project-feature {
    padding:17px;
    border-radius:18px;
    border:1px solid rgba(79,140,255,.27);
    box-shadow:inset 3px 0 0 var(--blue),0 14px 28px rgba(0,0,0,.13);
    background:linear-gradient(145deg,rgba(28,58,88,.96),rgba(18,41,64,.96));
}
.project-feature-head {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr auto;
    gap:18px;
    align-items:start;
}
.project-index { color:#6faada; font-size:.48rem; font-weight:900; letter-spacing:.12em; }
.project-feature h3 { margin:6px 0 4px; font-size:1.2rem; }
.project-feature-head p { max-width:840px; margin:0; color:#9bb0c2; font-size:.64rem; }
.project-badge {
    margin-top:10px;
    padding:5px 8px;
    border-radius:999px;
    color:#a4efd9;
    background:rgba(38,184,154,.09);
    border:1px solid rgba(38,184,154,.20);
    font-size:.49rem;
    font-weight:900;
}
.project-journey {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 24px 1fr 24px 1fr;
    align-items:center;
    gap:5px;
    margin:11px 0 8px;
}
.project-journey > span { color:#4d8ebf; text-align:center; }
.project-journey article {
    min-height:96px;
    padding:9px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.055);
}
.project-journey small { color:#6b91af; font-size:.46rem; font-weight:900; letter-spacing:.09em; }
.project-journey strong { display:block; margin:4px 0; color:#f2f6fb; font-size:.69rem; }
.project-journey p { margin:0; color:#8fa6b9; font-size:.55rem; line-height:1.4; }
.project-proof {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-bottom:8px;
}
.project-proof span {
    padding:7px 9px;
    border-radius:9px;
    color:#abc0d0;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.05);
    font-size:.55rem;
}
.project-duo {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-top:9px;
}
.project-card-studio {
    padding:14px;
    border-radius:15px;
    background:linear-gradient(145deg,rgba(24,49,76,.88),rgba(17,39,60,.94));
    border:1px solid rgba(255,255,255,.06);
}
.project-card-studio[data-accent="cyan"] { box-shadow:inset 0 2px 0 var(--cyan); }
.project-card-studio[data-accent="violet"] { box-shadow:inset 0 2px 0 var(--violet); }
.project-card-studio h3 { margin:5px 0; font-size:.86rem; }
.project-card-studio > p { margin:0 0 8px; color:#93a9bc; font-size:.59rem; line-height:1.45; }
.project-card-studio ul { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:5px; }
.project-card-studio li {
    position:relative;
    padding-left:16px;
    color:#91a7b8;
    font-size:.54rem;
}
.project-card-studio li::before { content:"↳"; position:absolute; left:0; color:#5dbdcc; }

.lab { margin-top:15px; padding-top:13px; border-top:1px solid rgba(255,255,255,.055); }
.lab-title { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:8px; }
.lab-title > span { color:#5fbce8; font-size:.46rem; font-weight:900; letter-spacing:.12em; }
.lab-title h3 { margin:0; font-size:.78rem; }
.lab-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.lab-rail article {
    padding:10px;
    border-radius:11px;
    background:rgba(255,255,255,.022);
    border:1px solid rgba(255,255,255,.05);
    transition:transform .18s ease;
}
.lab-rail article:hover { transform:translateY(-3px); }
.lab-rail small { color:#54d7c5; font-size:.43rem; font-weight:900; }
.lab-rail strong { display:block; margin:4px 0; color:#edf4fa; font-size:.63rem; }
.lab-rail p { margin:0; color:#849bad; font-size:.51rem; line-height:1.45; }

/* Toolbox */
.stack-console {
    overflow:hidden;
    margin-bottom:9px;
    border-radius:14px;
    border:1px solid rgba(104,183,255,.13);
    background:#07121f;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.console-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:7px 10px;
    color:#6d859b;
    background:#0c1a2a;
    border-bottom:1px solid rgba(255,255,255,.05);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.53rem;
}
.console-head div { display:flex; gap:4px; }
.console-head i { width:7px; height:7px; border-radius:50%; background:#27425c; }
.console-head i:nth-child(1) { background:#e87878; }
.console-head i:nth-child(2) { background:#d8b259; }
.console-head i:nth-child(3) { background:#59bf86; }
.console-body { padding:12px; }
.console-command { margin-bottom:9px; color:#91a8bb; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; }
.console-command span { color:#58dbe7; margin-right:7px; }
.primary-stack { display:flex; flex-wrap:wrap; gap:6px; }
.primary-stack span {
    padding:7px 10px;
    border-radius:8px;
    color:#e6f1ff;
    background:rgba(79,140,255,.10);
    border:1px solid rgba(104,183,255,.18);
    font-size:.59rem;
    font-weight:850;
}
.stack-deck {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}
.stack-deck article {
    position:relative;
    overflow:hidden;
    min-height:118px;
    padding:11px;
    border-radius:12px;
    background:rgba(255,255,255,.024);
    border:1px solid rgba(255,255,255,.055);
}
.stack-deck article::after {
    content:"";
    position:absolute;
    inset:auto -30px -50px auto;
    width:100px;
    height:100px;
    border-radius:50%;
    opacity:.07;
}
.stack-deck article[data-tone="blue"]::after { background:var(--blue); }
.stack-deck article[data-tone="violet"]::after { background:var(--violet); }
.stack-deck article[data-tone="cyan"]::after { background:var(--cyan); }
.stack-deck article[data-tone="green"]::after { background:var(--green); }
.stack-deck article[data-tone="amber"]::after { background:var(--amber); }
.stack-deck article[data-tone="sky"]::after { background:var(--sky); }
.stack-deck article > span { color:#668eae; font-size:.44rem; font-weight:900; letter-spacing:.1em; }
.stack-deck h3 { margin:4px 0; font-size:.7rem; }
.stack-deck p { margin:0; color:#859caf; font-size:.52rem; line-height:1.5; }

/* Learning */
.learning-road {
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}
.learning-road::before {
    content:"";
    position:absolute;
    left:4%;
    right:4%;
    top:19px;
    height:1px;
    background:linear-gradient(90deg,rgba(79,140,255,.15),rgba(50,199,217,.45),rgba(139,108,246,.18));
}
.learning-road article {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:38px 1fr;
    gap:8px;
    align-items:center;
    padding:14px 10px 10px;
    border-radius:12px;
    background:rgba(14,31,49,.94);
    border:1px solid rgba(255,255,255,.055);
}
.learning-marker {
    position:absolute;
    top:15px;
    left:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    transform:translateX(-50%);
    background:#57d8e6;
    box-shadow:0 0 0 4px rgba(87,216,230,.10);
}
.learning-road img { width:38px; height:38px; object-fit:contain; padding:4px; border-radius:8px; background:white; margin-top:11px; }
.learning-road small { color:#5f829f; font-size:.44rem; font-weight:900; }
.learning-road h3 { margin:3px 0 1px; font-size:.62rem; }
.learning-road p { margin:0; color:#7890a4; font-size:.50rem; }

/* Education */
.education-stage { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.education-monument {
    display:grid;
    grid-template-columns:70px 1fr;
    gap:12px;
    align-items:center;
    min-height:115px;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(145deg,rgba(27,55,83,.74),rgba(15,35,54,.86));
    border:1px solid rgba(255,255,255,.06);
}
.education-monument img { width:70px; height:70px; object-fit:contain; padding:5px; border-radius:12px; background:white; }
.education-monument span { color:#607f9a; font-size:.47rem; font-weight:900; }
.education-monument h3 { margin:4px 0 2px; font-size:.75rem; }
.education-monument p { margin:0; color:#70b9c3; font-size:.58rem; font-weight:800; }

/* Closing */
.closing-scene {
    margin-top:28px;
    padding:42px 0;
    border-top:1px solid rgba(255,255,255,.055);
    background:
        radial-gradient(circle at 85% 50%,rgba(50,199,217,.10),transparent 27%),
        radial-gradient(circle at 18% 100%,rgba(139,108,246,.07),transparent 31%),
        linear-gradient(135deg,#10243a,#0a1b2d);
}
.closing-shell {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:34px;
    align-items:center;
}
.closing-statement > span { color:#57d7e5; font-size:.49rem; font-weight:900; letter-spacing:.14em; }
.closing-statement h2 {
    max-width:720px;
    margin:7px 0 8px;
    font-size:clamp(2rem,4vw,3.4rem);
    line-height:.98;
    letter-spacing:-.045em;
}
.closing-statement p { max-width:720px; margin:0; color:#95aabd; font-size:.67rem; line-height:1.55; }
.closing-links { display:grid; gap:6px; }
.closing-links a {
    display:grid;
    grid-template-columns:70px 1fr auto;
    gap:10px;
    align-items:center;
    padding:10px 11px;
    border-radius:10px;
    color:#eaf2f9;
    text-decoration:none;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    transition:transform .16s ease,background .16s ease;
}
.closing-links a:hover { transform:translateX(4px); background:rgba(255,255,255,.05); }
.closing-links span { color:#66839d; font-size:.48rem; font-weight:900; }
.closing-links strong { font-size:.61rem; }
.closing-links b { color:#66d8e3; }

.studio-footer .footer-inner { justify-content:space-between; color:#5e778d; font-size:.52rem; }

/* Motion and focus */
.motion-ready [data-reveal] { opacity:0; transform:translateY(16px); }
.motion-ready [data-reveal].in-view {
    opacity:1;
    transform:none;
    transition:opacity .55s cubic-bezier(.2,.75,.25,1),transform .55s cubic-bezier(.2,.75,.25,1);
}
.main-nav a.active { color:#fff; }
.main-nav a.active:not(.nav-cta)::after {
    content:"";
    display:block;
    height:2px;
    margin-top:4px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
}

/* Responsive */
@media (max-width:980px) {
    .scene-shell { grid-template-columns:1fr; gap:12px; }
    .scene-rail { position:static; display:flex; align-items:center; gap:8px; }
    .scene-rail small { margin-left:auto; }
    .scene-intro.split,.closing-shell { grid-template-columns:1fr; }
    .system-map { grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr; }
    .stack-deck { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .learning-road { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .learning-road::before { display:none; }
}
@media (max-width:700px) {
    .studio-section { padding:30px 0; }
    .scene-shell { width:min(calc(100% - 24px),1340px); }
    .signal-marquee { margin-top:7px; }
    .scene-intro h2 { font-size:1.85rem; }
    .system-map { grid-template-columns:1fr; gap:5px; }
    .system-link { width:1px; height:14px; margin:auto; }
    .system-link i { display:none; }
    .principle-strip,.journey-impact,.project-duo,.lab-rail,.stack-deck,.learning-road,.education-stage { grid-template-columns:1fr; }
    .journey-top { grid-template-columns:48px 1fr; }
    .journey-top img { width:48px; height:48px; }
    .journey-top b { display:none; }
    .project-feature-head { grid-template-columns:1fr; }
    .project-badge { width:max-content; margin-top:0; }
    .project-journey { grid-template-columns:1fr; }
    .project-journey > span { transform:rotate(90deg); }
    .project-proof { grid-template-columns:1fr; }
    .lab-title { display:grid; }
    .closing-scene { padding:30px 0; }
    .closing-links a { grid-template-columns:58px 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .marquee-track,.system-link i { animation:none!important; }
    .motion-ready [data-reveal] { opacity:1!important; transform:none!important; }
}


/* ===============================================================
   STUDIO V2 - DEPTH + SECTION-SPECIFIC MOTION
   Each section has its own visual behavior and atmosphere.
   =============================================================== */

:root {
    --ease-out: cubic-bezier(.16,.82,.24,1);
    --ease-spring: cubic-bezier(.2,1.15,.35,1);
}

/* More section depth, without changing hero layout */
.studio-section {
    isolation: isolate;
    overflow: clip;
}
.studio-section::before,
.studio-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    filter: blur(22px);
    opacity: .16;
}
.approach-scene::before {
    width: 340px; height: 340px;
    right: 5%; top: 8%;
    background: rgba(50,199,217,.18);
}
.journey-scene::before {
    width: 380px; height: 380px;
    left: -120px; top: 18%;
    background: rgba(79,140,255,.17);
}
.projects-scene::before {
    width: 420px; height: 420px;
    right: -150px; top: 12%;
    background: rgba(139,108,246,.16);
}
.toolbox-scene::before {
    width: 360px; height: 360px;
    left: 10%; bottom: -180px;
    background: rgba(50,199,217,.14);
}
.learning-scene::before {
    width: 320px; height: 320px;
    right: 14%; top: 20%;
    background: rgba(241,184,75,.11);
}
.education-scene::before {
    width: 300px; height: 300px;
    left: 40%; bottom: -160px;
    background: rgba(79,140,255,.12);
}

/* 01 APPROACH - diagram comes alive node-by-node */
.approach-scene .system-map article {
    opacity: .74;
    transform: translateY(8px) scale(.985);
}
.approach-scene .system-map.in-view article {
    animation: nodeRise .5s var(--ease-out) forwards;
}
.approach-scene .system-map.in-view article:nth-of-type(1) { animation-delay: .04s; }
.approach-scene .system-map.in-view article:nth-of-type(2) { animation-delay: .14s; }
.approach-scene .system-map.in-view article:nth-of-type(3) { animation-delay: .24s; }
.approach-scene .system-map.in-view article:nth-of-type(4) { animation-delay: .34s; }
@keyframes nodeRise {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.approach-scene .system-link {
    transform: scaleX(0);
    transform-origin: left;
}
.approach-scene .system-map.in-view .system-link {
    animation: drawLink .55s var(--ease-out) forwards;
}
.approach-scene .system-map.in-view .system-link:nth-of-type(1) { animation-delay: .18s; }
.approach-scene .system-map.in-view .system-link:nth-of-type(2) { animation-delay: .30s; }
.approach-scene .system-map.in-view .system-link:nth-of-type(3) { animation-delay: .42s; }
@keyframes drawLink { to { transform: scaleX(1); } }

.principle-strip article {
    position: relative;
    overflow: hidden;
}
.principle-strip article::after {
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:2px;
    transform:scaleX(0);
    transform-origin:left;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    transition:transform .28s var(--ease-out);
}
.principle-strip article:hover::after { transform:scaleX(1); }

/* 02 JOURNEY - scroll-linked rail + staggered chapter entry */
.journey-path {
    position: relative;
    padding-left: 26px;
}
.journey-path::before {
    content:"";
    position:absolute;
    left:8px; top:9px; bottom:9px;
    width:2px;
    background:linear-gradient(180deg,rgba(79,140,255,.75),rgba(139,108,246,.72),rgba(241,184,75,.65));
    box-shadow:0 0 14px rgba(79,140,255,.12);
}
.journey-panel::before {
    content:"";
    position:absolute;
    left:-25px;
    top:28px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--blue);
    border:3px solid #0c1b2c;
    box-shadow:0 0 0 3px rgba(79,140,255,.15),0 0 16px rgba(79,140,255,.35);
}
.journey-panel[data-accent="violet"]::before {
    background:var(--violet);
    box-shadow:0 0 0 3px rgba(139,108,246,.14),0 0 16px rgba(139,108,246,.28);
}
.journey-panel[data-accent="amber"]::before {
    background:var(--amber);
    box-shadow:0 0 0 3px rgba(241,184,75,.14),0 0 16px rgba(241,184,75,.26);
}
.journey-panel {
    transform-origin:left center;
}
.journey-panel.in-view {
    animation: chapterIn .56s var(--ease-out) both;
}
.journey-panel:nth-child(2).in-view { animation-delay:.10s; }
.journey-panel:nth-child(3).in-view { animation-delay:.20s; }
@keyframes chapterIn {
    from { opacity:0; transform:translateX(28px) scale(.985); }
    to { opacity:1; transform:translateX(0) scale(1); }
}
.journey-panel:hover {
    transform: translateX(7px) scale(1.006);
}

/* 03 PROJECTS - cursor spotlight + perspective tilt + flowing case path */
.projects-scene {
    perspective: 1400px;
}
.project-feature,
.project-card-studio {
    transform-style: preserve-3d;
    will-change: transform;
}
.project-feature.tilt-active,
.project-card-studio.tilt-active {
    transition: transform .08s linear;
}
.project-feature:not(.tilt-active),
.project-card-studio:not(.tilt-active) {
    transition: transform .25s var(--ease-out), border-color .2s ease;
}
.project-feature-head,
.project-journey,
.project-proof,
.project-feature .tag-row,
.project-card-studio > * {
    transform: translateZ(16px);
}
.project-journey > span {
    position:relative;
    overflow:visible;
    animation: arrowPulse 1.7s ease-in-out infinite;
}
@keyframes arrowPulse {
    0%,100% { opacity:.4; transform:translateX(0); }
    50% { opacity:1; transform:translateX(3px); }
}
.project-feature::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(120deg,transparent 15%,rgba(255,255,255,.035) 45%,transparent 75%);
    transform:translateX(-120%);
}
.project-feature:hover::after {
    animation: projectSweep 1.1s var(--ease-out);
}
@keyframes projectSweep { to { transform:translateX(120%); } }

/* 04 TOOLBOX - terminal gets a real "live console" feel */
.stack-console {
    position:relative;
}
.stack-console::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,.012) 4px
        );
    mix-blend-mode:screen;
}
.console-command::after {
    content:"_";
    display:inline-block;
    margin-left:4px;
    color:#58dbe7;
    animation:cursorBlink .8s steps(1,end) infinite;
}
@keyframes cursorBlink { 50% { opacity:0; } }
.primary-stack span {
    transform:translateY(4px);
    opacity:.75;
}
.stack-console.in-view .primary-stack span {
    animation:stackChip .4s var(--ease-spring) forwards;
}
.stack-console.in-view .primary-stack span:nth-child(1){animation-delay:.05s}
.stack-console.in-view .primary-stack span:nth-child(2){animation-delay:.10s}
.stack-console.in-view .primary-stack span:nth-child(3){animation-delay:.15s}
.stack-console.in-view .primary-stack span:nth-child(4){animation-delay:.20s}
.stack-console.in-view .primary-stack span:nth-child(5){animation-delay:.25s}
.stack-console.in-view .primary-stack span:nth-child(6){animation-delay:.30s}
.stack-console.in-view .primary-stack span:nth-child(7){animation-delay:.35s}
.stack-console.in-view .primary-stack span:nth-child(8){animation-delay:.40s}
@keyframes stackChip { to { transform:translateY(0); opacity:1; } }

.stack-deck article {
    transition:transform .22s var(--ease-out),background .22s ease,border-color .22s ease;
}
.stack-deck article:hover {
    transform:translateY(-5px);
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.12);
}
.stack-deck article:hover::after {
    opacity:.14;
    transform:scale(1.18);
}
.stack-deck article::after {
    transition:opacity .25s ease,transform .25s ease;
}

/* 05 LEARNING - line writes itself and cards rise from the timeline */
.learning-road {
    --road-progress: 0%;
}
.learning-road::before {
    background:rgba(255,255,255,.055);
}
.learning-road::after {
    content:"";
    position:absolute;
    left:4%;
    top:19px;
    width:var(--road-progress);
    max-width:92%;
    height:2px;
    background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet),var(--amber));
    box-shadow:0 0 10px rgba(50,199,217,.2);
    transition:width .12s linear;
}
.learning-road article {
    transform:translateY(12px);
    opacity:.82;
}
.learning-road.in-view article {
    animation:certRise .48s var(--ease-out) forwards;
}
.learning-road.in-view article:nth-child(1){animation-delay:.05s}
.learning-road.in-view article:nth-child(2){animation-delay:.14s}
.learning-road.in-view article:nth-child(3){animation-delay:.23s}
.learning-road.in-view article:nth-child(4){animation-delay:.32s}
@keyframes certRise {
    to { transform:translateY(0); opacity:1; }
}
.learning-marker {
    animation:markerPulse 2.2s ease-in-out infinite;
}
.learning-road article:nth-child(2) .learning-marker{animation-delay:.3s}
.learning-road article:nth-child(3) .learning-marker{animation-delay:.6s}
.learning-road article:nth-child(4) .learning-marker{animation-delay:.9s}
@keyframes markerPulse {
    0%,100% { box-shadow:0 0 0 4px rgba(87,216,230,.10); }
    50% { box-shadow:0 0 0 8px rgba(87,216,230,0); }
}

/* 06 EDUCATION - layered "credential" cards with light sweep */
.education-monument {
    position:relative;
    overflow:hidden;
    transition:transform .24s var(--ease-out),box-shadow .24s ease,border-color .24s ease;
}
.education-monument::before {
    content:"";
    position:absolute;
    left:-30%;
    top:-70%;
    width:42%;
    height:240%;
    transform:rotate(18deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
    transition:transform .7s var(--ease-out);
}
.education-monument:hover {
    transform:translateY(-5px) rotateX(1.5deg);
    box-shadow:0 18px 35px rgba(0,0,0,.14);
    border-color:rgba(104,183,255,.14);
}
.education-monument:hover::before {
    transform:translateX(360%) rotate(18deg);
}
.education-monument img {
    transition:transform .28s var(--ease-out);
}
.education-monument:hover img {
    transform:scale(1.045) rotate(-1deg);
}

/* CONTACT - magnetic hover and stronger ending */
.closing-links a {
    will-change:transform;
}
.closing-links a.magnetic {
    transition:transform .08s linear,background .16s ease;
}
.closing-links a:not(.magnetic) {
    transition:transform .22s var(--ease-out),background .16s ease,border-color .16s ease;
}
.closing-links a:hover {
    border-color:rgba(104,183,255,.14);
}
.closing-statement h2 {
    position:relative;
}
.closing-statement h2::after {
    content:"";
    display:block;
    width:68px;
    height:3px;
    margin-top:12px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    transform:scaleX(.3);
    transform-origin:left;
    transition:transform .35s var(--ease-out);
}
.closing-scene:hover .closing-statement h2::after {
    transform:scaleX(1);
}

/* Desktop section transitions: subtle visual separators with different character */
.approach-scene { border-top:1px solid rgba(50,199,217,.06); }
.journey-scene { border-top:1px solid rgba(79,140,255,.06); }
.projects-scene { border-top:1px solid rgba(139,108,246,.06); }
.toolbox-scene { border-top:1px solid rgba(50,199,217,.06); }
.learning-scene { border-top:1px solid rgba(241,184,75,.05); }
.education-scene { border-top:1px solid rgba(104,183,255,.05); }

@media (max-width:700px) {
    .journey-path { padding-left:18px; }
    .journey-path::before { left:4px; }
    .journey-panel::before { left:-18px; }
    .project-feature,
    .project-card-studio { transform:none!important; }
    .education-monument:hover { transform:translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .system-map article,
    .system-link,
    .journey-panel,
    .primary-stack span,
    .learning-road article {
        animation:none!important;
        opacity:1!important;
        transform:none!important;
    }
    .project-journey > span,
    .console-command::after,
    .learning-marker {
        animation:none!important;
    }
}


/* ===============================================================
   STUDIO V3 - BACKEND-FIRST + HIGHER CONTRAST INTERACTION
   =============================================================== */

/* Hero focus now establishes backend as primary */
.hero-focus-grid.backend-first {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
.backend-first .backend-hero-card {
    grid-column: 1 / -1;
    min-height: 78px !important;
    padding: 24px 12px 10px !important;
    background:
        radial-gradient(circle at 88% 50%,rgba(79,140,255,.13),transparent 30%),
        linear-gradient(135deg,rgba(34,67,101,.75),rgba(25,52,80,.72)) !important;
    border-color:rgba(104,183,255,.23) !important;
    box-shadow:inset 4px 0 0 var(--blue),0 10px 24px rgba(0,0,0,.12);
}
.backend-hero-card strong {
    font-size:.92rem !important;
}
.backend-hero-card > small {
    max-width:520px;
}
.backend-focus-chips {
    display:flex !important;
    flex-wrap:wrap;
    gap:5px !important;
    margin-top:6px;
}
.backend-focus-chips em {
    position:static !important;
    padding:3px 6px;
    border-radius:6px;
    color:#9bc9ff !important;
    background:rgba(79,140,255,.10);
    border:1px solid rgba(104,183,255,.14);
    font-size:.46rem !important;
    letter-spacing:0 !important;
    font-style:normal;
}
.backend-hero-card::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:42%;
    height:1px;
    background:linear-gradient(90deg,transparent,#79c2ff,transparent);
    animation:backendScan 3.4s ease-in-out infinite;
}
@keyframes backendScan {
    0%,100% { transform:translateX(-100%); opacity:0; }
    35%,65% { opacity:1; }
    50% { transform:translateX(260%); }
}

/* Backend section is deliberately denser and more technical */
.backend-scene {
    background:
        radial-gradient(circle at 85% 20%,rgba(79,140,255,.07),transparent 25%),
        linear-gradient(180deg,rgba(4,13,24,.18),rgba(15,35,54,.18));
}
.backend-intro {
    max-width:920px;
}
.backend-intro h2 {
    max-width:840px;
}
.backend-control-room {
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(260px,.55fr);
    gap:10px;
}
.request-console,
.backend-live-panel {
    overflow:hidden;
    border-radius:15px;
    border:1px solid rgba(104,183,255,.12);
    background:linear-gradient(145deg,rgba(14,32,50,.98),rgba(8,22,37,.99));
    box-shadow:0 18px 42px rgba(0,0,0,.16);
}
.request-console-head,
.backend-live-head {
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 11px;
    background:#0b1a2a;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:#6d879e;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.49rem;
    font-weight:850;
    letter-spacing:.08em;
}
.live-indicator {
    display:flex;
    align-items:center;
    gap:5px;
    color:#65d6a1;
}
.live-indicator i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#54db9d;
    box-shadow:0 0 0 4px rgba(84,219,157,.08),0 0 10px rgba(84,219,157,.35);
    animation:healthPulse 1.8s ease-in-out infinite;
}
@keyframes healthPulse {
    50% { box-shadow:0 0 0 7px rgba(84,219,157,0),0 0 16px rgba(84,219,157,.5); }
}

.request-route {
    display:grid;
    grid-template-columns:1fr 26px 1fr 26px 1.15fr 26px 1fr 26px 1fr;
    align-items:center;
    padding:18px 12px 13px;
}
.route-node {
    position:relative;
    min-height:95px;
    display:grid;
    align-content:center;
    gap:4px;
    padding:10px;
    border-radius:12px;
    background:rgba(255,255,255,.027);
    border:1px solid rgba(255,255,255,.06);
    transition:transform .2s var(--ease-out),background .2s ease,border-color .2s ease;
}
.route-node:hover {
    transform:translateY(-5px) scale(1.018);
    background:rgba(255,255,255,.045);
    border-color:rgba(104,183,255,.18);
}
.route-node small {
    color:#557795;
    font-size:.44rem;
    font-weight:900;
}
.route-node strong {
    color:#edf4fa;
    font-size:.66rem;
}
.route-node span {
    color:#7790a6;
    font-size:.49rem;
}
.route-node::after {
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    bottom:7px;
    height:2px;
    border-radius:999px;
    opacity:.45;
}
.route-client::after { background:var(--sky); }
.route-auth::after { background:var(--violet); }
.route-api::after { background:var(--blue); }
.route-data::after { background:var(--cyan); }
.route-events::after { background:var(--green); }

.route-wire {
    position:relative;
    height:1px;
    background:rgba(104,183,255,.16);
}
.route-wire::after {
    content:"";
    position:absolute;
    top:-2px;
    left:-7px;
    width:7px;
    height:5px;
    border-radius:999px;
    background:#73c9ff;
    box-shadow:0 0 10px rgba(115,201,255,.7);
    animation:requestPacket 1.8s linear infinite;
}
.route-wire:nth-of-type(2)::after { animation-delay:.22s; }
.route-wire:nth-of-type(3)::after { animation-delay:.44s; }
.route-wire:nth-of-type(4)::after { animation-delay:.66s; }
@keyframes requestPacket {
    from { transform:translateX(0); opacity:.2; }
    20% { opacity:1; }
    to { transform:translateX(33px); opacity:.15; }
}

.request-response {
    display:grid;
    grid-template-columns:auto auto 1fr;
    gap:8px;
    align-items:center;
    margin:0 12px 12px;
    padding:8px 10px;
    border-radius:9px;
    background:rgba(84,219,157,.05);
    border:1px solid rgba(84,219,157,.12);
}
.request-response > span {
    padding:3px 6px;
    border-radius:5px;
    color:#9df0c4;
    background:rgba(84,219,157,.09);
    font-size:.47rem;
    font-weight:900;
}
.request-response strong {
    color:#dff8eb;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.63rem;
}
.request-response small {
    color:#6f8a7c;
    font-size:.48rem;
}

.backend-live-panel {
    display:grid;
    grid-template-rows:auto 1fr auto;
}
.backend-live-head b {
    color:#65d6a1;
    font-size:.47rem;
}
.backend-log {
    min-height:214px;
    padding:12px 11px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:7px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.backend-log p {
    margin:0;
    padding:0;
    color:#73899d;
    font-size:.49rem;
    line-height:1.4;
    opacity:.45;
    transform:translateX(-4px);
    transition:opacity .25s ease,transform .25s ease,color .25s ease;
}
.backend-log p.log-active {
    opacity:1;
    transform:none;
    color:#abc2d6;
}
.backend-log p span {
    display:inline-block;
    min-width:37px;
    margin-right:5px;
    color:#5ebee7;
    font-weight:900;
}
.backend-log p:nth-child(2) span { color:#ac90ff; }
.backend-log p:nth-child(3) span { color:#61d8c2; }
.backend-log p:nth-child(4) span { color:#67daa2; }
.backend-log p:nth-child(5) span { color:#ffd06d; }
.backend-log p b {
    color:#dce7f1;
    font-weight:700;
}
.backend-health {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    padding:10px;
    border-top:1px solid rgba(255,255,255,.045);
}
.backend-health span {
    display:flex;
    align-items:center;
    gap:6px;
    color:#698398;
    font-size:.47rem;
}
.backend-health i {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#53d89b;
    box-shadow:0 0 8px rgba(83,216,155,.4);
}

.backend-principles {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:9px;
}
.backend-principles article {
    position:relative;
    overflow:hidden;
    min-height:124px;
    padding:14px 13px 13px 46px;
    border-radius:13px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.055);
    transition:transform .22s var(--ease-out),background .22s ease,border-color .22s ease;
}
.backend-principles article:hover {
    transform:translateY(-5px);
    background:rgba(255,255,255,.042);
    border-color:rgba(104,183,255,.15);
}
.backend-principles article > span {
    position:absolute;
    left:13px;
    top:13px;
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:7px;
    color:#8dc6ff;
    background:rgba(79,140,255,.09);
    border:1px solid rgba(104,183,255,.13);
    font-size:.48rem;
    font-weight:900;
}
.backend-principles strong {
    display:block;
    margin-bottom:5px;
    color:#eef4f9;
    font-size:.74rem;
}
.backend-principles p {
    margin:0;
    color:#829aad;
    font-size:.57rem;
    line-height:1.5;
}

/* Project backend blueprint */
.backend-blueprint {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    margin:0 0 8px;
    padding:7px 8px;
    border-radius:9px;
    background:rgba(6,18,30,.35);
    border:1px solid rgba(104,183,255,.08);
}
.backend-blueprint span {
    padding:4px 6px;
    border-radius:6px;
    color:#a5c8e5;
    background:rgba(79,140,255,.07);
    font-size:.49rem;
    font-weight:800;
}
.backend-blueprint i {
    color:#4b87b4;
    font-size:.54rem;
    font-style:normal;
    animation:blueprintArrow 1.5s ease-in-out infinite;
}
.backend-blueprint i:nth-of-type(2){animation-delay:.15s}
.backend-blueprint i:nth-of-type(3){animation-delay:.30s}
.backend-blueprint i:nth-of-type(4){animation-delay:.45s}
@keyframes blueprintArrow {
    50% { transform:translateX(2px); color:#78d2e0; }
}

/* Backend core strip inside Toolbox */
.backend-core-strip {
    display:grid;
    grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
    align-items:center;
    gap:4px;
    margin:0 0 9px;
    padding:9px;
    border-radius:11px;
    background:linear-gradient(90deg,rgba(79,140,255,.05),rgba(50,199,217,.045));
    border:1px solid rgba(104,183,255,.09);
}
.backend-core-strip > div {
    padding:7px 8px;
    border-radius:8px;
    background:rgba(255,255,255,.025);
}
.backend-core-strip small {
    display:block;
    color:#6085a4;
    font-size:.42rem;
    font-weight:900;
}
.backend-core-strip strong {
    display:block;
    margin-top:2px;
    color:#d7e5f1;
    font-size:.56rem;
}
.backend-core-strip > span {
    color:#4a86b3;
    text-align:center;
    font-size:.62rem;
}

/* Bigger, more rewarding hover states */
.journey-impact div {
    transition:transform .18s var(--ease-out),background .18s ease,border-color .18s ease;
}
.journey-impact div:hover {
    transform:translateY(-4px) scale(1.015);
    background:rgba(255,255,255,.045);
    border-color:rgba(104,183,255,.12);
}
.journey-impact div:hover strong {
    color:#fff;
}
.lab-rail article {
    position:relative;
    overflow:hidden;
}
.lab-rail article::after {
    content:"";
    position:absolute;
    inset:auto 10px 7px;
    height:2px;
    transform:scaleX(0);
    transform-origin:left;
    background:linear-gradient(90deg,var(--cyan),var(--violet));
    transition:transform .22s var(--ease-out);
}
.lab-rail article:hover::after {
    transform:scaleX(1);
}
.learning-road article:hover {
    transform:translateY(-6px)!important;
    background:rgba(255,255,255,.038);
    border-color:rgba(104,183,255,.12);
}
.closing-links a:hover b {
    transform:translate(2px,-2px);
}
.closing-links b {
    transition:transform .18s var(--ease-out);
}

/* Backend-specific nav emphasis when section is active */
body.backend-active .main-nav a[href="#about"] {
    color:#8fd0ff;
}
body.backend-active .site-header {
    box-shadow:0 10px 30px rgba(20,73,112,.08);
}

/* Responsive */
@media (max-width:1100px) {
    .backend-control-room { grid-template-columns:1fr; }
    .backend-live-panel { min-height:220px; }
    .backend-log { min-height:150px; }
}
@media (max-width:980px) {
    .hero-focus-grid.backend-first {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .backend-first .backend-hero-card { grid-column:1 / -1; }
    .request-route {
        grid-template-columns:1fr 18px 1fr 18px 1fr;
        row-gap:8px;
    }
    .request-route .route-data { grid-column:1; grid-row:3; }
    .request-route .route-events { grid-column:3; grid-row:3; }
    .request-route .route-wire:nth-of-type(4) { display:none; }
    .backend-core-strip { grid-template-columns:1fr; }
    .backend-core-strip > span { transform:rotate(90deg); }
}
@media (max-width:700px) {
    .hero-focus-grid.backend-first {
        grid-template-columns:1fr !important;
    }
    .backend-first .backend-hero-card { grid-column:auto; }
    .backend-focus-chips { display:none!important; }
    .request-route { grid-template-columns:1fr; gap:5px; }
    .request-route .route-node { grid-column:auto!important; grid-row:auto!important; min-height:70px; }
    .route-wire { width:1px; height:14px; margin:auto; }
    .route-wire::after { display:none; }
    .request-response { grid-template-columns:auto auto; }
    .request-response small { grid-column:1 / -1; }
    .backend-principles { grid-template-columns:1fr; }
    .backend-blueprint { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    .backend-hero-card::before,
    .route-wire::after,
    .live-indicator i,
    .backend-blueprint i {
        animation:none!important;
    }
}


/* ===============================================================
   STUDIO V4 - CLOSER, LARGER, DEEPER
   =============================================================== */

/* Pull the whole post-hero experience closer to the viewer. */
.scene-shell {
    width: min(calc(100% - 44px), 1180px) !important;
    grid-template-columns: 112px minmax(0,1fr) !important;
    gap: 24px !important;
}
.studio-section { padding: 38px 0 !important; }
.scene-intro { margin-bottom: 20px !important; }
.scene-intro h2 {
    font-size: clamp(2rem,3.3vw,3.25rem) !important;
}
.scene-intro > p,
.scene-intro.split > p {
    font-size: .88rem !important;
    line-height: 1.62 !important;
}
.eyebrow { font-size: .64rem !important; }
.scene-rail > span { font-size:.68rem !important; }
.scene-rail strong { font-size:.94rem !important; }
.scene-rail small { font-size:.68rem !important; }

/* Stop using microcopy-sized body text across the page. */
.journey-top span,
.project-index,
.project-card-studio li,
.project-feature-head p,
.project-journey p,
.project-proof span,
.lab-rail p,
.stack-deck p,
.console-head,
.learning-road p,
.education-monument span,
.closing-statement p,
.backend-log p,
.route-node span,
.route-node small,
.backend-principles p,
.backend-blueprint span {
    font-size: .68rem !important;
}
.journey-top p,
.journey-summary,
.project-card-studio > p,
.stack-deck article > span,
.lab-rail small,
.learning-road small {
    font-size: .72rem !important;
}
.tag-row span { font-size:.66rem !important; padding:5px 8px !important; }

/* EXPERIENCE: more content with clear hierarchy. */
.journey-panel { padding:18px !important; }
.journey-top { grid-template-columns:64px 1fr auto !important; }
.journey-top img { width:64px !important; height:64px !important; }
.journey-top h3 { font-size:1.08rem !important; }
.journey-impact { gap:9px !important; margin:14px 0 10px !important; }
.journey-impact div { padding:10px 11px !important; }
.journey-impact small { font-size:.62rem !important; }
.journey-impact strong { font-size:.78rem !important; }
.journey-detail-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:10px 0 11px;
}
.journey-detail-grid.journey-detail-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.journey-detail-grid article {
    min-height:132px;
    padding:12px 13px;
    border-radius:11px;
    background:rgba(255,255,255,.028);
    border:1px solid rgba(255,255,255,.055);
    transition:transform .22s var(--ease-out),background .22s ease,border-color .22s ease;
}
.journey-detail-grid article:hover {
    transform:translateY(-6px) rotateX(2deg);
    background:rgba(255,255,255,.045);
    border-color:rgba(104,183,255,.14);
}
.journey-detail-grid small {
    color:#6e97b8;
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.09em;
}
.journey-detail-grid strong {
    display:block;
    margin:5px 0;
    color:#f0f6fb;
    font-size:.78rem;
}
.journey-detail-grid p {
    margin:0;
    color:#95aabd;
    font-size:.70rem;
    line-height:1.5;
}

/* Stronger tilt / depth. */
.project-feature,
.project-card-studio {
    transform-style: preserve-3d;
}
.project-feature.tilt-active,
.project-card-studio.tilt-active {
    box-shadow:0 24px 50px rgba(0,0,0,.20);
}
.project-card-studio:hover { border-color:rgba(104,183,255,.18); }

/* PROJECTS: increase body sizing. */
.project-feature { padding:20px !important; }
.project-feature h3 { font-size:1.35rem !important; }
.project-card-studio h3 { font-size:1rem !important; }
.project-journey article { min-height:112px !important; padding:11px 12px !important; }
.project-journey strong { font-size:.78rem !important; }
.project-journey small { font-size:.60rem !important; }

/* LAB: feature-like, visual, and no longer an afterthought. */
.lab-expanded {
    margin-top:20px !important;
    padding:17px !important;
    border-radius:16px;
    border:1px solid rgba(50,199,217,.10);
    background:
        radial-gradient(circle at 10% 100%,rgba(50,199,217,.07),transparent 26%),
        radial-gradient(circle at 90% 20%,rgba(139,108,246,.06),transparent 30%),
        rgba(6,18,30,.26);
}
.lab-expanded .lab-title {
    align-items:end;
    margin-bottom:12px !important;
}
.lab-expanded .lab-title > div > span {
    color:#5fd8e7;
    font-size:.62rem !important;
    font-weight:900;
    letter-spacing:.13em;
}
.lab-expanded .lab-title h3 { margin:4px 0 0; font-size:1.15rem !important; }
.lab-expanded .lab-title p {
    max-width:520px;
    font-size:.72rem !important;
    line-height:1.5;
}
.lab-stage {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    grid-template-rows:auto auto;
    gap:9px;
}
.lab-feature {
    grid-row:1 / span 2;
    position:relative;
    overflow:hidden;
    min-height:360px;
    padding:18px;
    display:grid;
    grid-template-columns:1fr 160px;
    gap:16px;
    border-radius:15px;
    background:linear-gradient(145deg,rgba(20,46,71,.92),rgba(12,31,48,.98));
    border:1px solid rgba(50,199,217,.12);
}
.lab-feature::before {
    content:"";
    position:absolute;
    left:-20%;
    bottom:-55%;
    width:380px;
    height:380px;
    border-radius:50%;
    background:rgba(50,199,217,.07);
}
.lab-feature-copy { position:relative; z-index:1; align-self:center; }
.lab-feature small,
.lab-side > small {
    color:#58d7c4;
    font-size:.58rem !important;
    font-weight:900;
    letter-spacing:.09em;
}
.lab-feature h4,.lab-side h4 {
    margin:6px 0 7px;
    color:#f3f7fb;
    font-size:1rem;
}
.lab-feature p,.lab-side p {
    margin:0 0 11px;
    color:#9aafc1;
    font-size:.72rem !important;
    line-height:1.55;
}
.lab-detail-list {
    display:grid;
    gap:5px;
    margin-bottom:11px;
}
.lab-detail-list span {
    padding:6px 8px;
    border-radius:8px;
    background:rgba(255,255,255,.028);
    border:1px solid rgba(255,255,255,.05);
    color:#a9becf;
    font-size:.64rem;
}
.lab-bars {
    display:flex;
    align-items:end;
    gap:8px;
    padding:20px 4px;
}
.lab-bars i {
    flex:1;
    height:var(--h);
    min-height:34px;
    border-radius:7px 7px 3px 3px;
    background:linear-gradient(180deg,#5bdccb,#357fb6);
    box-shadow:0 0 18px rgba(91,220,203,.10);
    animation:barFloat 2.8s ease-in-out infinite alternate;
}
.lab-bars i:nth-child(2){animation-delay:.2s}
.lab-bars i:nth-child(3){animation-delay:.4s}
.lab-bars i:nth-child(4){animation-delay:.6s}
.lab-bars i:nth-child(5){animation-delay:.8s}
.lab-bars i:nth-child(6){animation-delay:1s}
@keyframes barFloat { to { transform:translateY(-7px); filter:brightness(1.15); } }

.lab-side {
    position:relative;
    overflow:hidden;
    min-height:175px;
    padding:15px;
    border-radius:14px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.06);
    transition:transform .24s var(--ease-out),border-color .24s ease;
}
.lab-side:hover { transform:translateY(-6px) rotateY(-2deg); border-color:rgba(104,183,255,.14); }
.lab-orbit {
    position:absolute;
    width:120px;height:120px;
    right:-35px;top:-30px;
    border:1px solid rgba(139,108,246,.12);
    border-radius:50%;
    animation:labOrbit 8s linear infinite;
}
.lab-orbit::before,.lab-orbit::after {
    content:"";
    position:absolute;inset:16px;border:1px solid rgba(139,108,246,.10);border-radius:50%;
}
.lab-orbit::after { inset:34px; }
.lab-orbit i {
    position:absolute;width:7px;height:7px;border-radius:50%;background:#9d85ff;box-shadow:0 0 9px rgba(157,133,255,.5);
}
.lab-orbit i:nth-child(1){left:14px;top:24px}
.lab-orbit i:nth-child(2){right:9px;top:56px}
.lab-orbit i:nth-child(3){left:50px;bottom:2px}
@keyframes labOrbit { to { transform:rotate(360deg); } }
.lab-text-stream {
    display:flex;
    gap:6px;
    margin-bottom:9px;
}
.lab-text-stream span {
    padding:4px 6px;border-radius:6px;
    background:rgba(50,199,217,.06);
    border:1px solid rgba(50,199,217,.10);
    color:#72c9d4;font-size:.55rem;
    animation:textStream 2.4s ease-in-out infinite alternate;
}
.lab-text-stream span:nth-child(2){animation-delay:.2s}
.lab-text-stream span:nth-child(3){animation-delay:.4s}
.lab-text-stream span:nth-child(4){animation-delay:.6s}
@keyframes textStream { to { transform:translateY(-3px); background:rgba(50,199,217,.11); } }

/* TOOLBOX: larger and closer. */
.stack-console { margin-bottom:12px !important; }
.console-body { padding:15px !important; }
.console-command { font-size:.76rem !important; }
.primary-stack span { font-size:.72rem !important; padding:8px 11px !important; }
.backend-core-strip { padding:11px !important; margin-bottom:12px !important; }
.backend-core-strip small { font-size:.55rem !important; }
.backend-core-strip strong { font-size:.69rem !important; }
.stack-deck { gap:9px !important; }
.stack-deck article { min-height:145px !important; padding:14px !important; }
.stack-deck article > span { font-size:.57rem !important; }
.stack-deck h3 { font-size:.88rem !important; }
.stack-deck p { font-size:.67rem !important; line-height:1.55 !important; }

/* LEARNING: completely new radar layout. */
.learning-radar-scene {
    background:
        radial-gradient(circle at 28% 50%,rgba(50,199,217,.055),transparent 28%),
        linear-gradient(180deg,rgba(255,255,255,.008),rgba(255,255,255,.016));
}
.learning-radar {
    display:grid;
    grid-template-columns:380px 1fr;
    gap:18px;
    align-items:center;
}
.radar-core {
    position:relative;
    width:340px;
    aspect-ratio:1;
    margin:auto;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:radial-gradient(circle,rgba(16,47,67,.75),rgba(5,19,31,.35) 62%,transparent 63%);
}
.radar-ring {
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(79,198,214,.13);
}
.ring-1{inset:8%}.ring-2{inset:24%}.ring-3{inset:39%}
.radar-core::before,.radar-core::after {
    content:"";
    position:absolute;
    background:rgba(79,198,214,.08);
}
.radar-core::before{width:1px;height:84%}
.radar-core::after{height:1px;width:84%}
.radar-sweep {
    position:absolute;
    inset:8%;
    border-radius:50%;
    background:conic-gradient(from 0deg,rgba(86,219,230,.22),transparent 18%,transparent);
    animation:radarSweep 5.5s linear infinite;
}
@keyframes radarSweep { to{transform:rotate(360deg)} }
.radar-center {
    position:relative;
    z-index:2;
    width:150px;
    aspect-ratio:1;
    display:grid;
    place-content:center;
    text-align:center;
    border-radius:50%;
    background:#0d2436;
    border:1px solid rgba(86,219,230,.16);
    box-shadow:0 0 36px rgba(86,219,230,.08);
}
.radar-center span{color:#5dd8e6;font-size:.54rem;font-weight:900;letter-spacing:.09em}
.radar-center strong{margin:5px 0;color:#f0f6fb;font-size:.9rem}
.radar-center small{color:#7893a8;font-size:.58rem;line-height:1.4}
.learning-cards { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.learning-cards article {
    position:relative;
    overflow:hidden;
    min-height:120px;
    display:grid;
    grid-template-columns:52px 1fr;
    gap:10px;
    align-items:center;
    padding:13px;
    border-radius:13px;
    background:linear-gradient(145deg,rgba(25,51,79,.86),rgba(15,35,55,.92));
    border:1px solid rgba(255,255,255,.06);
    transition:transform .24s var(--ease-out),border-color .24s ease;
}
.learning-cards article:hover {
    transform:translateY(-7px) rotateX(2deg) rotateY(-2deg);
    border-color:rgba(104,183,255,.14);
}
.learning-cards img {
    width:52px;height:52px;object-fit:contain;padding:5px;border-radius:11px;background:#fff;
}
.learning-cards small{color:#6888a4;font-size:.57rem;font-weight:900}
.learning-cards h3{margin:3px 0;font-size:.78rem}
.learning-cards p{margin:0;color:#7f9aad;font-size:.64rem}
.learning-cards > article > span {
    position:absolute;right:8px;top:8px;
    color:#4e7898;font-size:.45rem;font-weight:900;letter-spacing:.08em;
}

/* EDUCATION: academic route instead of two generic cards. */
.academic-route-scene {
    background:
        radial-gradient(circle at 82% 80%,rgba(79,140,255,.05),transparent 28%),
        rgba(255,255,255,.006);
}
.academic-route {
    display:grid;
    grid-template-columns:1fr 130px 1fr;
    gap:14px;
    align-items:center;
}
.academic-stop {
    position:relative;
    min-height:250px;
    display:grid;
    grid-template-columns:88px 1fr;
    gap:14px;
    align-items:center;
    padding:18px;
    border-radius:17px;
    background:linear-gradient(145deg,rgba(27,55,83,.82),rgba(14,34,53,.93));
    border:1px solid rgba(255,255,255,.06);
    transition:transform .25s var(--ease-out),border-color .25s ease;
}
.academic-stop:hover { transform:translateY(-7px) rotateX(2deg); border-color:rgba(104,183,255,.14); }
.academic-country {
    position:absolute;top:10px;right:11px;
    color:#4f7898;font-size:.52rem;font-weight:900;letter-spacing:.13em;
}
.academic-logo img {
    width:88px;height:88px;object-fit:contain;padding:6px;border-radius:14px;background:#fff;
}
.academic-copy small{color:#668aa7;font-size:.61rem;font-weight:900}
.academic-copy h3{margin:5px 0 0;font-size:1rem}
.academic-copy strong{display:block;color:#8fd5df;font-size:.8rem}
.academic-copy p{margin:4px 0 10px;color:#91a8ba;font-size:.7rem}
.academic-chips{display:flex;flex-wrap:wrap;gap:5px}
.academic-chips span{
    padding:4px 6px;border-radius:999px;
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
    color:#99afc1;font-size:.55rem;
}
.academic-journey-line {
    display:grid;
    justify-items:center;
    gap:8px;
    color:#597b97;
}
.academic-journey-line > span{font-size:.49rem;font-weight:900;letter-spacing:.09em}
.academic-journey-line i {
    width:1px;height:58px;
    background:linear-gradient(180deg,rgba(79,140,255,.14),rgba(50,199,217,.75),rgba(79,140,255,.14));
}
.academic-journey-line b {
    width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
    color:#70d1df;background:#0d2839;border:1px solid rgba(50,199,217,.15);
    animation:routePulse 2s ease-in-out infinite;
}
@keyframes routePulse{50%{box-shadow:0 0 0 9px rgba(50,199,217,0),0 0 18px rgba(50,199,217,.15)}}

/* Mobile / tablet */
@media (max-width:980px) {
    .scene-shell { grid-template-columns:1fr !important; width:min(calc(100% - 28px),1180px)!important; }
    .journey-detail-grid,.journey-detail-grid.journey-detail-3 { grid-template-columns:1fr 1fr; }
    .lab-stage { grid-template-columns:1fr; grid-template-rows:auto; }
    .lab-feature { grid-row:auto; min-height:300px; }
    .learning-radar { grid-template-columns:1fr; }
    .radar-core { width:300px; }
    .academic-route { grid-template-columns:1fr; }
    .academic-journey-line { grid-template-columns:auto 1fr auto 1fr auto; }
    .academic-journey-line i { width:100%;height:1px; }
}
@media (max-width:700px) {
    .journey-detail-grid,.journey-detail-grid.journey-detail-3,.learning-cards { grid-template-columns:1fr; }
    .lab-feature { grid-template-columns:1fr; }
    .lab-bars { height:150px; }
    .radar-core { width:240px; }
    .academic-stop { grid-template-columns:68px 1fr; min-height:210px; }
    .academic-logo img { width:68px;height:68px; }
    .academic-journey-line { grid-template-columns:auto 1fr auto 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
    .lab-bars i,.lab-orbit,.lab-text-stream span,.radar-sweep,.academic-journey-line b { animation:none!important; }
}


/* ===============================================================
   STUDIO V5 - COHESIVE / READABLE / FULL-WIDTH
   =============================================================== */

/* Every major section now uses the exact same desktop width as the hero. */
.scene-shell {
    width: min(calc(100% - 48px), var(--shell)) !important;
    grid-template-columns: 132px minmax(0,1fr) !important;
    gap: 30px !important;
}

/* Readable-at-a-glance typography. */
.scene-intro h2 {
    font-size: clamp(2.15rem,3.4vw,3.45rem) !important;
    line-height: 1.02 !important;
}
.scene-intro > p,
.scene-intro.split > p {
    font-size: .98rem !important;
    line-height: 1.62 !important;
}
.eyebrow { font-size:.72rem !important; }
.scene-rail > span { font-size:.75rem !important; }
.scene-rail strong { font-size:1.02rem !important; }
.scene-rail small { font-size:.76rem !important; }

.studio-section p,
.studio-section li {
    font-size: .82rem;
    line-height: 1.55;
}
.studio-section small { line-height:1.4; }
.tag-row span {
    font-size:.72rem !important;
    padding:6px 9px !important;
}

/* Backend control room text is allowed to be technical, but not tiny. */
.request-console-head,
.backend-live-head { font-size:.62rem !important; }
.route-node small { font-size:.62rem !important; }
.route-node strong { font-size:.80rem !important; }
.route-node span { font-size:.68rem !important; }
.request-response > span { font-size:.62rem !important; }
.request-response strong { font-size:.76rem !important; }
.request-response small { font-size:.61rem !important; }
.backend-log p { font-size:.62rem !important; line-height:1.5 !important; }
.backend-health span { font-size:.60rem !important; }
.backend-principles strong { font-size:.84rem !important; }
.backend-principles p { font-size:.72rem !important; }

/* EXPERIENCE readability. */
.journey-top span { font-size:.64rem !important; }
.journey-top h3 { font-size:1.18rem !important; }
.journey-top p { font-size:.78rem !important; }
.journey-impact small { font-size:.66rem !important; }
.journey-impact strong { font-size:.84rem !important; }
.journey-detail-grid small { font-size:.62rem !important; }
.journey-detail-grid strong { font-size:.86rem !important; }
.journey-detail-grid p { font-size:.76rem !important; }

/* Project readability. */
.project-index { font-size:.62rem !important; }
.project-feature-head p,
.project-card-studio > p { font-size:.78rem !important; }
.project-feature h3 { font-size:1.45rem !important; }
.project-card-studio h3 { font-size:1.08rem !important; }
.project-journey small { font-size:.62rem !important; }
.project-journey strong { font-size:.82rem !important; }
.project-journey p { font-size:.72rem !important; }
.project-proof span,
.backend-blueprint span { font-size:.68rem !important; }

/* Stronger, visible tilt instead of barely-moving hover. */
.project-feature.tilt-active,
.project-card-studio.tilt-active {
    box-shadow:0 30px 65px rgba(0,0,0,.25) !important;
}
.journey-impact div:hover {
    box-shadow:0 16px 28px rgba(0,0,0,.13);
}

/* LAB - one visual language: experiment / analysis. */
.lab-v5 {
    margin-top:22px !important;
    padding:20px !important;
    border-radius:18px;
    border:1px solid rgba(50,199,217,.11);
    background:
        linear-gradient(180deg,rgba(9,27,43,.78),rgba(7,21,34,.82));
}
.lab-title-v5 {
    align-items:end !important;
    margin-bottom:14px !important;
}
.lab-title-v5 > div > span {
    color:#57d9e6;
    font-size:.68rem !important;
    font-weight:900;
    letter-spacing:.13em;
}
.lab-title-v5 h3 { margin:4px 0 0 !important; font-size:1.45rem !important; }
.lab-title-v5 > p {
    max-width:640px !important;
    font-size:.82rem !important;
    line-height:1.55;
}
.lab-notebook {
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:10px;
}
.lab-project {
    position:relative;
    overflow:hidden;
    padding:18px;
    border-radius:15px;
    background:linear-gradient(145deg,rgba(25,52,79,.88),rgba(13,33,51,.95));
    border:1px solid rgba(255,255,255,.06);
    transition:transform .24s var(--ease-out),border-color .24s ease,box-shadow .24s ease;
}
.lab-project:hover {
    transform:translateY(-6px);
    border-color:rgba(104,183,255,.16);
    box-shadow:0 20px 38px rgba(0,0,0,.16);
}
.lab-project-regression {
    grid-row:1 / span 2;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,.65fr);
    gap:20px;
    align-items:center;
}
.lab-project-copy { position:relative; z-index:2; }
.lab-project-copy > small {
    color:#61ddc9;
    font-size:.65rem !important;
    font-weight:900;
    letter-spacing:.08em;
}
.lab-project h4 {
    margin:6px 0 7px;
    color:#f4f8fc;
    font-size:1.12rem;
}
.lab-project-copy > p {
    margin:0 0 13px;
    color:#a2b5c6;
    font-size:.80rem !important;
}
.lab-method-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-bottom:10px;
}
.lab-method-grid.compact { grid-template-columns:1fr 1fr; }
.lab-method-grid div {
    padding:8px 9px;
    border-radius:9px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
}
.lab-method-grid span {
    display:block;
    color:#678aa7;
    font-size:.56rem;
    font-weight:900;
}
.lab-method-grid strong {
    display:block;
    margin-top:2px;
    color:#e4eef6;
    font-size:.72rem;
}
.lab-notes {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-bottom:11px;
}
.lab-notes span {
    padding:5px 7px;
    border-radius:7px;
    color:#9eb5c7;
    background:rgba(50,199,217,.045);
    border:1px solid rgba(50,199,217,.08);
    font-size:.64rem;
}

/* Regression chart draws itself in a way that matches the actual experiment. */
.model-chart {
    position:relative;
    min-height:260px;
    overflow:hidden;
    border-radius:13px;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
        rgba(5,20,32,.42);
    background-size:36px 36px;
    border:1px solid rgba(50,199,217,.08);
}
.model-chart svg {
    position:absolute;
    inset:18px 14px 36px;
    width:calc(100% - 28px);
    height:calc(100% - 54px);
    overflow:visible;
}
.chart-line {
    fill:none;
    stroke:#5fe0ce;
    stroke-width:4;
    stroke-linecap:round;
    stroke-dasharray:800;
    stroke-dashoffset:800;
}
.lab-project-regression.in-view .chart-line {
    animation:drawModelLine 1.3s var(--ease-out) forwards .15s;
}
.chart-area {
    fill:url(#none);
    stroke:none;
    opacity:.13;
}
.model-chart circle {
    fill:#071c2b;
    stroke:#71ead8;
    stroke-width:4;
    opacity:0;
}
.lab-project-regression.in-view circle {
    animation:showPoint .3s var(--ease-out) forwards;
}
.lab-project-regression.in-view circle:nth-of-type(1){animation-delay:.25s}
.lab-project-regression.in-view circle:nth-of-type(2){animation-delay:.42s}
.lab-project-regression.in-view circle:nth-of-type(3){animation-delay:.58s}
.lab-project-regression.in-view circle:nth-of-type(4){animation-delay:.74s}
.lab-project-regression.in-view circle:nth-of-type(5){animation-delay:.90s}
.lab-project-regression.in-view circle:nth-of-type(6){animation-delay:1.06s}
@keyframes drawModelLine { to { stroke-dashoffset:0; } }
@keyframes showPoint { to { opacity:1; transform:scale(1); } }
.chart-label {
    position:absolute;
    left:12px;right:12px;bottom:10px;
    display:flex;justify-content:space-between;align-items:center;
    color:#58788f;font-size:.56rem;
}
.chart-label strong { color:#7bcfc8;font-size:.61rem; }

.lab-project-vision,
.lab-project-nlp {
    display:grid;
    grid-template-columns:150px 1fr;
    gap:14px;
    align-items:center;
}
.vision-demo {
    position:relative;
    min-height:160px;
    border-radius:12px;
    overflow:hidden;
    background:#071b2a;
    border:1px solid rgba(139,108,246,.10);
}
.vision-grid {
    position:absolute;inset:0;
    opacity:.22;
    background-image:
        linear-gradient(rgba(139,108,246,.20) 1px,transparent 1px),
        linear-gradient(90deg,rgba(139,108,246,.20) 1px,transparent 1px);
    background-size:20px 20px;
}
.vision-object {
    position:absolute;
    left:42px;top:35px;
    width:66px;height:74px;
    border:2px solid #9d88ff;
    border-radius:24px 28px 30px 26px;
}
.vision-object span {
    position:absolute;
    width:18px;height:9px;
    left:27px;top:-10px;
    border-radius:100% 0;
    background:#63cfa9;
    transform:rotate(-25deg);
}
.vision-scan {
    position:absolute;
    left:18px;right:18px;top:22px;
    height:2px;
    background:#5bd9e6;
    box-shadow:0 0 13px rgba(91,217,230,.8);
    animation:visionScan 2.5s ease-in-out infinite alternate;
}
@keyframes visionScan { to { transform:translateY(105px); } }
.vision-label {
    position:absolute;left:10px;bottom:8px;
    padding:4px 6px;border-radius:6px;
    color:#c7bfff;background:rgba(139,108,246,.13);
    font-size:.54rem;font-weight:900;
}
.parser-demo {
    min-height:160px;
    display:grid;
    grid-template-columns:1fr 24px 1fr;
    gap:6px;
    align-items:center;
}
.parser-document {
    height:132px;padding:13px 10px;
    display:grid;align-content:center;gap:8px;
    border-radius:10px;
    background:#f1f4f7;
}
.parser-document i {
    height:5px;border-radius:999px;background:#b7c3ce;
}
.parser-document i:nth-child(2){width:82%}
.parser-document i:nth-child(3){width:94%}
.parser-document i:nth-child(4){width:69%}
.parser-document i:nth-child(5){width:88%}
.parser-arrow { color:#58cbd8;text-align:center;font-size:1rem;animation:parserArrow 1.4s ease-in-out infinite; }
@keyframes parserArrow { 50% { transform:translateX(3px); } }
.parser-fields { display:grid;gap:6px; }
.parser-fields span {
    padding:6px 7px;border-radius:7px;
    color:#90e0d4;background:rgba(50,199,217,.07);border:1px solid rgba(50,199,217,.10);
    font-size:.58rem;
}

/* TOOLBOX - fewer, bigger, much more readable groups. */
.toolbox-v5 .scene-content { min-width:0; }
.toolbox-intro { margin-bottom:16px !important; }
.backend-stack-map {
    padding:16px;
    margin-bottom:11px;
    border-radius:15px;
    background:linear-gradient(145deg,rgba(21,49,76,.90),rgba(10,29,46,.96));
    border:1px solid rgba(104,183,255,.10);
}
.backend-stack-title {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:end;
    margin-bottom:10px;
}
.backend-stack-title span { color:#65bdf1;font-size:.62rem;font-weight:900;letter-spacing:.1em; }
.backend-stack-title strong { color:#eaf3fa;font-size:.88rem; }
.backend-stack-flow {
    display:grid;
    grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
    gap:4px;
    align-items:center;
}
.backend-stack-flow article {
    min-height:100px;
    padding:11px;
    border-radius:10px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    transition:transform .2s var(--ease-out),background .2s ease;
}
.backend-stack-flow article:hover { transform:translateY(-5px);background:rgba(255,255,255,.05); }
.backend-stack-flow small { display:block;color:#6387a4;font-size:.56rem;font-weight:900; }
.backend-stack-flow strong { display:block;margin:4px 0;color:#edf4fa;font-size:.76rem; }
.backend-stack-flow article span { color:#8ca4b7;font-size:.62rem; }
.backend-stack-flow > i { color:#4f91be;text-align:center;font-style:normal;animation:stackArrow 1.5s ease-in-out infinite; }
@keyframes stackArrow { 50% { transform:translateX(3px);color:#64d9e5; } }

.toolbox-columns {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:10px;
}
.toolbox-major,
.toolbox-secondary {
    padding:17px;
    border-radius:15px;
    background:rgba(255,255,255,.027);
    border:1px solid rgba(255,255,255,.06);
}
.toolbox-major {
    border-left:3px solid var(--blue);
    background:linear-gradient(145deg,rgba(28,56,85,.74),rgba(15,36,56,.88));
}
.toolbox-side-stack { display:grid;gap:10px; }
.toolbox-cloud { border-left:3px solid var(--cyan); }
.toolbox-product { border-left:3px solid var(--violet); }
.toolbox-card-head > span { color:#6693b5;font-size:.59rem;font-weight:900;letter-spacing:.1em; }
.toolbox-card-head h3 { margin:5px 0 3px;font-size:1.03rem; }
.toolbox-card-head p { margin:0 0 12px;color:#8da4b7;font-size:.74rem; }
.skill-groups { display:grid;gap:13px;margin-top:13px; }
.skill-groups small { display:block;margin-bottom:6px;color:#668ba7;font-size:.58rem;font-weight:900; }
.skill-cloud.large { display:flex;flex-wrap:wrap;gap:6px; }
.skill-cloud.large span {
    padding:7px 9px !important;
    border-radius:8px;
    color:#d6e5f1;
    background:rgba(104,183,255,.065);
    border:1px solid rgba(104,183,255,.10);
    font-size:.70rem !important;
    font-weight:800;
    transition:transform .18s var(--ease-out),background .18s ease,border-color .18s ease;
}
.skill-cloud.large span:hover {
    transform:translateY(-3px);
    background:rgba(104,183,255,.11);
    border-color:rgba(104,183,255,.18);
}

/* LEARNING - clear modules with useful context. */
.learning-v5 {
    background:
        radial-gradient(circle at 90% 10%,rgba(139,108,246,.045),transparent 25%),
        rgba(255,255,255,.005);
}
.learning-modules {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.learning-module {
    position:relative;
    overflow:hidden;
    min-height:180px;
    display:grid;
    grid-template-columns:66px 1fr;
    gap:13px;
    align-items:center;
    padding:16px;
    border-radius:15px;
    background:linear-gradient(145deg,rgba(26,52,79,.84),rgba(14,34,54,.94));
    border:1px solid rgba(255,255,255,.06);
    transition:transform .24s var(--ease-out),border-color .24s ease,box-shadow .24s ease;
}
.learning-module:hover {
    transform:translateY(-6px);
    border-color:rgba(104,183,255,.15);
    box-shadow:0 22px 42px rgba(0,0,0,.14);
}
.learning-logo img {
    width:66px;height:66px;object-fit:contain;padding:7px;border-radius:13px;background:#fff;
}
.learning-module-copy > span {
    color:#6586a3;font-size:.58rem;font-weight:900;letter-spacing:.07em;
}
.learning-module-copy h3 { margin:5px 0 2px;font-size:.94rem; }
.learning-module-copy > p { margin:0 0 10px;color:#79b9c2;font-size:.70rem; }
.learning-module-copy strong { display:block;margin-bottom:3px;color:#dfeaf3;font-size:.68rem; }
.learning-module-copy small { display:block;color:#95aabd;font-size:.72rem;line-height:1.5; }
.module-mark {
    position:absolute;right:12px;top:10px;
    color:#3e607c;font-size:2rem;font-weight:950;letter-spacing:-.05em;
    opacity:.35;
}
.learning-direction {
    margin-top:10px;
    padding:13px 15px;
    border-radius:12px;
    background:rgba(79,140,255,.045);
    border:1px solid rgba(79,140,255,.08);
}
.learning-direction span { color:#62b9e9;font-size:.57rem;font-weight:900;letter-spacing:.11em; }
.learning-direction strong { display:block;margin:4px 0;color:#e9f2f9;font-size:.82rem; }
.learning-direction p { margin:0;color:#8da4b6;font-size:.70rem; }

/* EDUCATION - readable academic cards. */
.degree-stack { display:grid;gap:10px; }
.degree-card {
    position:relative;
    overflow:hidden;
    min-height:190px;
    display:grid;
    grid-template-columns:90px 1fr;
    gap:16px;
    align-items:center;
    padding:18px;
    border-radius:16px;
    background:linear-gradient(145deg,rgba(27,55,83,.80),rgba(14,34,54,.93));
    border:1px solid rgba(255,255,255,.06);
    transition:transform .24s var(--ease-out),border-color .24s ease;
}
.degree-card:hover { transform:translateY(-5px);border-color:rgba(104,183,255,.14); }
.degree-year {
    position:absolute;right:14px;top:4px;
    color:#2c4a64;font-size:4.3rem;font-weight:950;line-height:1;letter-spacing:-.06em;
}
.degree-logo img {
    width:90px;height:90px;object-fit:contain;padding:7px;border-radius:15px;background:#fff;
}
.degree-copy { position:relative;z-index:1; }
.degree-copy > span { color:#6689a5;font-size:.62rem;font-weight:900;letter-spacing:.08em; }
.degree-copy h3 { margin:5px 0 5px;font-size:1.05rem; }
.degree-copy p { max-width:760px;margin:0 0 11px;color:#94aabc;font-size:.77rem; }
.degree-focus { display:flex;flex-wrap:wrap;gap:6px; }
.degree-focus span {
    padding:5px 8px;border-radius:999px;
    color:#a7bdce;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
    font-size:.64rem;
}
.degree-canada { box-shadow:inset 3px 0 0 var(--blue); }
.degree-india { box-shadow:inset 3px 0 0 var(--amber); }

/* Mobile/tablet */
@media (max-width:1100px) {
    .lab-notebook,.toolbox-columns { grid-template-columns:1fr; }
    .lab-project-regression { grid-row:auto; }
    .learning-modules { grid-template-columns:1fr 1fr; }
}
@media (max-width:980px) {
    .scene-shell {
        width:min(calc(100% - 28px),var(--shell))!important;
        grid-template-columns:1fr!important;
    }
    .backend-stack-flow { grid-template-columns:1fr; }
    .backend-stack-flow > i { transform:rotate(90deg); }
}
@media (max-width:700px) {
    .scene-shell { width:min(calc(100% - 20px),var(--shell))!important; }
    .lab-project-regression,.lab-project-vision,.lab-project-nlp { grid-template-columns:1fr; }
    .model-chart { min-height:220px; }
    .learning-modules { grid-template-columns:1fr; }
    .degree-card { grid-template-columns:72px 1fr; }
    .degree-logo img { width:72px;height:72px; }
    .degree-year { font-size:3rem;opacity:.65; }
}

@media (prefers-reduced-motion: reduce) {
    .chart-line,
    .model-chart circle,
    .vision-scan,
    .parser-arrow,
    .backend-stack-flow > i {
        animation:none!important;
    }
    .chart-line { stroke-dashoffset:0!important; }
    .model-chart circle { opacity:1!important; }
}


/* ===============================================================
   V5.2 - THE LAB: 3 EQUAL COLUMNS
   =============================================================== */

.lab-three-column {
    padding: 18px !important;
}

.lab-three-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lab-card-equal {
    min-height: 520px;
    display: flex !important;
    flex-direction: column;
    padding: 16px !important;
}

.lab-card-equal .lab-project-copy {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lab-card-equal h4 {
    min-height: 48px;
    margin-bottom: 7px;
}

.lab-card-equal .lab-project-copy > p {
    min-height: 74px;
}

.compact-three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-bottom: 10px;
}

.compact-three div {
    min-height: 58px;
}

.compact-three strong {
    font-size: .68rem !important;
}

.compact-chart {
    min-height: 205px !important;
    margin: 4px 0 12px;
}

.vision-demo-wide {
    min-height: 205px !important;
    margin-bottom: 13px;
}

.vision-demo-wide .vision-object {
    left: 50%;
    top: 46%;
    width: 82px;
    height: 92px;
    transform: translate(-50%, -50%);
}

.vision-demo-wide .vision-scan {
    left: 12%;
    right: 12%;
    top: 25px;
    animation-duration: 2.8s;
}

.parser-demo-wide {
    min-height: 205px !important;
    grid-template-columns: 1fr 28px 1fr !important;
    margin-bottom: 13px;
    padding: 10px 4px;
}

.parser-demo-wide .parser-document {
    height: 145px;
}

.parser-demo-wide .parser-fields span {
    font-size: .62rem !important;
    padding: 7px 8px;
}

.lab-card-equal .tag-row {
    margin-top: auto;
    padding-top: 8px;
}

/* Keep the hover/animation treatment consistent across all three cards. */
.lab-card-equal:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 42px rgba(0,0,0,.17);
}

@media (max-width: 1050px) {
    .lab-three-grid {
        grid-template-columns: 1fr;
    }

    .lab-card-equal {
        min-height: auto;
    }

    .lab-card-equal h4,
    .lab-card-equal .lab-project-copy > p {
        min-height: auto;
    }
}


/* ===============================================================
   V5.2.1 - LAB 3-COLUMN FIX
   The older vision/NLP rules left align-items:center on cards after
   switching them from grid to flex, which collapsed the visual area.
   =============================================================== */

.lab-three-grid .lab-card-equal {
    align-items: stretch !important;
}

.lab-three-grid .lab-card-equal > .vision-demo,
.lab-three-grid .lab-card-equal > .parser-demo,
.lab-three-grid .lab-card-equal > .lab-project-copy {
    width: 100%;
    min-width: 0;
}

.lab-three-grid .vision-demo-wide {
    display: block;
    flex: 0 0 205px;
    width: 100%;
    min-height: 205px !important;
}

.lab-three-grid .vision-demo-wide .vision-grid {
    width: 100%;
    height: 100%;
}

.lab-three-grid .vision-demo-wide .vision-object {
    left: 50% !important;
    top: 46% !important;
}

.lab-three-grid .parser-demo-wide {
    display: grid !important;
    flex: 0 0 205px;
    width: 100%;
    min-height: 205px !important;
    align-items: center !important;
}

/* Keep all three cards visually balanced. */
.lab-three-grid .lab-project-copy {
    flex: 1 1 auto;
}

.lab-three-grid .lab-card-equal .tag-row {
    margin-top: auto;
}

/* Make the visual region read clearly instead of disappearing into card bg. */
.lab-three-grid .vision-demo-wide,
.lab-three-grid .parser-demo-wide,
.lab-three-grid .compact-chart {
    border-color: rgba(104,183,255,.10);
    background-color: rgba(5,20,32,.52);
}

@media (max-width:1050px) {
    .lab-three-grid .vision-demo-wide,
    .lab-three-grid .parser-demo-wide {
        flex-basis: 190px;
        min-height: 190px !important;
    }
}


/* ===============================================================
   V5.2.3 - PURPOSEFUL PROJECT ANIMATIONS
   Visuals mirror what each system actually does.
   =============================================================== */

.project-live {
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    border-radius: 11px;
    border: 1px solid rgba(104,183,255,.08);
    background: rgba(5,19,31,.42);
}

/* FLAGSHIP: work-order state machine */
.project-workflow-demo {
    padding: 10px 11px;
}
.project-live-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 9px;
}
.project-live-head span {
    color: #65bff0;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .10em;
}
.project-live-head strong {
    color: #6e8ca4;
    font-size: .58rem;
    font-weight: 800;
}
.workflow-track {
    display: grid;
    grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;
    gap: 3px;
    align-items: center;
}
.workflow-track article {
    position: relative;
    min-height: 62px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 8px 9px;
    border-radius: 9px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    transition: transform .2s var(--ease-out), background .2s ease;
}
.workflow-track article:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.05);
}
.workflow-track small {
    color: #557998;
    font-size: .50rem !important;
    font-weight: 900;
}
.workflow-track strong {
    color: #eaf3fa;
    font-size: .68rem;
}
.workflow-track > i {
    position: relative;
    height: 1px;
    background: rgba(83,196,224,.18);
}
.workflow-track > i b {
    position: absolute;
    left: -5px;
    top: -2px;
    width: 8px;
    height: 5px;
    border-radius: 999px;
    background: #68d5e4;
    box-shadow: 0 0 10px rgba(104,213,228,.6);
    animation: workflowPacket 1.8s linear infinite;
}
.workflow-track > i:nth-of-type(2) b { animation-delay: .35s; }
.workflow-track > i:nth-of-type(3) b { animation-delay: .7s; }
@keyframes workflowPacket {
    from { transform: translateX(0); opacity: .2; }
    20% { opacity: 1; }
    to { transform: translateX(39px); opacity: .15; }
}
.workflow-branch em {
    position: absolute;
    right: 7px;
    top: 7px;
    color: #b89cff;
    font-style: normal;
    animation: reworkSpin 2.2s ease-in-out infinite;
}
@keyframes reworkSpin {
    50% { transform: rotate(-180deg); color: #d4c6ff; }
}
.workflow-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
}
.workflow-status span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6f899d;
    font-size: .55rem;
}
.workflow-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #58d7a0;
    box-shadow: 0 0 7px rgba(88,215,160,.45);
    animation: statusBlink 2.1s ease-in-out infinite;
}
.workflow-status span:nth-child(2) i { animation-delay: .4s; }
.workflow-status span:nth-child(3) i { animation-delay: .8s; }
@keyframes statusBlink {
    50% { box-shadow: 0 0 0 5px rgba(88,215,160,0), 0 0 11px rgba(88,215,160,.5); }
}

/* HR: identity -> lifecycle modules -> granular access */
.hr-live-demo {
    min-height: 118px;
    display: grid;
    grid-template-columns: 84px 34px 1fr 34px 100px;
    gap: 7px;
    align-items: center;
    padding: 10px 12px;
}
.hr-person {
    position: relative;
    height: 90px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    border-radius: 10px;
    background: rgba(50,199,217,.04);
    border: 1px solid rgba(50,199,217,.08);
}
.person-head {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(96,218,202,.65);
}
.person-body {
    width: 40px;
    height: 25px;
    border-radius: 18px 18px 8px 8px;
    background: rgba(96,218,202,.28);
}
.hr-person small {
    color: #81c8cf;
    font-size: .52rem !important;
}
.hr-flow {
    position: relative;
    height: 1px;
    background: rgba(50,199,217,.17);
}
.hr-flow i {
    position: absolute;
    left: -5px;
    top: -2px;
    width: 7px;
    height: 5px;
    border-radius: 999px;
    background: #59d4e0;
    animation: hrPacket 1.65s linear infinite;
}
.hr-flow:nth-of-type(2) i { animation-delay: .55s; }
.hr-flow b {
    position: absolute;
    right: -2px;
    top: -9px;
    color: #4d91bb;
    font-size: .62rem;
}
@keyframes hrPacket { to { transform: translateX(40px); } }
.hr-module-stack {
    display: grid;
    gap: 5px;
}
.hr-module-stack span {
    padding: 6px 8px;
    border-radius: 7px;
    color: #b5c8d8;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    font-size: .57rem;
    animation: modulePulse 2.8s ease-in-out infinite;
}
.hr-module-stack span:nth-child(2) { animation-delay: .35s; }
.hr-module-stack span:nth-child(3) { animation-delay: .7s; }
@keyframes modulePulse {
    50% { transform: translateX(3px); background: rgba(50,199,217,.07); }
}
.hr-access {
    min-height: 90px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 3px;
    border-radius: 10px;
    background: rgba(38,184,154,.04);
    border: 1px solid rgba(38,184,154,.08);
}
.shield-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px 10px 14px 14px;
    color: #9cf0cf;
    background: rgba(38,184,154,.12);
    border: 1px solid rgba(38,184,154,.20);
    box-shadow: 0 0 16px rgba(38,184,154,.06);
    animation: shieldGlow 2.3s ease-in-out infinite;
}
@keyframes shieldGlow {
    50% { box-shadow: 0 0 24px rgba(38,184,154,.16); transform: translateY(-2px); }
}
.hr-access strong { color: #dff6ed; font-size: .62rem; }
.hr-access small { color: #6f9284; font-size: .47rem !important; }

/* INFRASTRUCTURE: CI/CD -> container -> NAS + secure tunnel */
.infra-live-demo {
    min-height: 118px;
    display: grid;
    grid-template-columns: 1fr 34px 1fr 34px 1fr;
    gap: 6px;
    align-items: center;
    padding: 12px;
}
.infra-node {
    min-height: 74px;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 3px;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    transition: transform .2s var(--ease-out), border-color .2s ease;
}
.infra-node:hover {
    transform: translateY(-4px);
    border-color: rgba(139,108,246,.16);
}
.infra-node small {
    color: #6d88a0;
    font-size: .50rem !important;
    font-weight: 900;
}
.infra-node strong {
    color: #e7eef6;
    font-size: .64rem;
}
.infra-link {
    position: relative;
    height: 1px;
    background: rgba(139,108,246,.18);
}
.infra-link i {
    position: absolute;
    left: -5px;
    top: -2px;
    width: 8px;
    height: 5px;
    border-radius: 999px;
    background: #a28aff;
    box-shadow: 0 0 10px rgba(162,138,255,.55);
    animation: deployPacket 1.9s linear infinite;
}
.infra-link:nth-of-type(2) i { animation-delay: .55s; }
@keyframes deployPacket { to { transform: translateX(41px); } }
.infra-tunnel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: #788da3;
    font-size: .52rem;
}
.infra-tunnel i {
    position: relative;
    height: 1px;
    overflow: hidden;
    background: repeating-linear-gradient(
        90deg,
        rgba(95,216,229,.35) 0 6px,
        transparent 6px 11px
    );
}
.infra-tunnel i::after {
    content: "";
    position: absolute;
    left: -18px;
    top: -2px;
    width: 15px;
    height: 5px;
    border-radius: 999px;
    background: #62d6df;
    animation: tunnelPacket 2.2s linear infinite;
}
@keyframes tunnelPacket { to { transform: translateX(500px); } }
.infra-tunnel span { color: #77ccd4; font-weight: 850; }
.infra-tunnel b { color: #7c8ba0; font-weight: 750; }

/* Let the visuals feel connected to the existing card tilt. */
.project-feature:hover .project-live,
.project-card-studio:hover .project-live {
    border-color: rgba(104,183,255,.14);
}

/* Responsive */
@media (max-width: 900px) {
    .workflow-track {
        grid-template-columns: 1fr;
    }
    .workflow-track > i {
        width: 1px;
        height: 14px;
        margin: auto;
    }
    .workflow-track > i b {
        display: none;
    }
    .hr-live-demo,
    .infra-live-demo {
        grid-template-columns: 1fr;
    }
    .hr-flow,
    .infra-link {
        width: 1px;
        height: 14px;
        margin: auto;
    }
    .hr-flow i,
    .infra-link i {
        display: none;
    }
    .infra-tunnel {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workflow-track > i b,
    .workflow-branch em,
    .workflow-status i,
    .hr-flow i,
    .hr-module-stack span,
    .shield-icon,
    .infra-link i,
    .infra-tunnel i::after {
        animation: none !important;
    }
}


/* ===============================================================
   V5.2.4 - UNIVERSAL TILT + BETTER PROJECT MOTION
   =============================================================== */

/* All major tiles now share the same responsive 3D interaction language. */
.tilt-surface {
    transform-style: preserve-3d;
    will-change: transform;
    transition:
        transform .22s cubic-bezier(.16,.82,.24,1),
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}
.tilt-surface.tilt-active {
    transition: transform .075s linear, box-shadow .1s linear;
    box-shadow: 0 26px 55px rgba(0,0,0,.20);
}
.tilt-surface > * {
    transform: translateZ(10px);
}
.tilt-surface:hover {
    border-color: rgba(104,183,255,.16) !important;
}

/* WORKSHOP: animated operational board rather than a static state strip. */
.workshop-live-demo {
    padding: 11px;
}
.workshop-demo-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}
.workshop-demo-head span {
    color:#67c6ef;
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.10em;
}
.workshop-demo-head strong {
    color:#6f8ba2;
    font-size:.58rem;
}
.workshop-board {
    display:grid;
    grid-template-columns:1fr 30px 1fr 30px 1fr;
    gap:5px;
    align-items:center;
}
.workshop-column {
    min-height:138px;
    padding:9px;
    border-radius:10px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.05);
}
.active-column {
    background:rgba(79,140,255,.035);
    border-color:rgba(104,183,255,.10);
}
.column-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:7px;
}
.column-head span {
    color:#698da9;
    font-size:.51rem;
    font-weight:900;
}
.column-head b {
    min-width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:7px;
    color:#a8d5ff;
    background:rgba(79,140,255,.09);
    font-size:.50rem;
}
.work-card {
    padding:8px 9px;
    border-radius:8px;
    background:#10283d;
    border:1px solid rgba(104,183,255,.07);
    box-shadow:0 7px 14px rgba(0,0,0,.08);
}
.work-card + .work-card { margin-top:6px; }
.work-card small {
    display:block;
    color:#5f84a1;
    font-size:.49rem !important;
    font-weight:900;
}
.work-card strong {
    display:block;
    margin:3px 0;
    color:#eaf3f9;
    font-size:.67rem;
}
.work-card span {
    color:#8097aa;
    font-size:.54rem;
}
.muted-card { opacity:.55; }
.delivered-card {
    border-color:rgba(74,210,158,.11);
}
.moving-card {
    animation:workCardBreathe 2.6s ease-in-out infinite;
}
@keyframes workCardBreathe {
    50% {
        transform:translateY(-4px);
        border-color:rgba(104,183,255,.18);
        box-shadow:0 12px 25px rgba(36,102,154,.14);
    }
}
.board-connector {
    position:relative;
    height:1px;
    background:rgba(82,198,221,.16);
}
.board-connector i {
    position:absolute;
    left:-6px;
    top:-2px;
    width:8px;
    height:5px;
    border-radius:999px;
    background:#64d4e3;
    box-shadow:0 0 10px rgba(100,212,227,.55);
    animation:boardPacket 1.7s linear infinite;
}
.board-connector:nth-of-type(2) i { animation-delay:.55s; }
.board-connector b {
    position:absolute;
    right:-2px;
    top:-9px;
    color:#4c8bb7;
    font-size:.62rem;
}
@keyframes boardPacket { to { transform:translateX(37px); } }
.live-event {
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:8px;
    color:#6e8ba1;
    font-size:.51rem;
}
.live-event i {
    width:6px;height:6px;border-radius:50%;
    background:#67c6ef;
    box-shadow:0 0 9px rgba(103,198,239,.45);
    animation:eventPulse 1.8s ease-in-out infinite;
}
.live-event.success i { background:#58d7a0; }
@keyframes eventPulse {
    50% { box-shadow:0 0 0 6px rgba(103,198,239,0),0 0 11px rgba(103,198,239,.48); }
}
.workshop-event-strip {
    display:flex;
    flex-wrap:wrap;
    gap:7px 13px;
    margin-top:9px;
    padding:7px 8px;
    border-radius:8px;
    background:rgba(5,19,31,.35);
}
.workshop-event-strip span {
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#718da2;
    font-size:.52rem;
}
.workshop-event-strip i {
    width:5px;height:5px;border-radius:50%;background:#55d89d;
}

/* INFRA V2: deployment pipeline + hosted services + secure network */
.infra-v2-demo {
    padding:10px 11px;
}
.infra-v2-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:9px;
}
.infra-v2-top > span {
    color:#9a89f3;
    font-size:.55rem;
    font-weight:900;
    letter-spacing:.09em;
}
.infra-v2-top strong {
    display:flex;
    align-items:center;
    gap:5px;
    color:#70cfa6;
    font-size:.52rem;
}
.infra-v2-top strong i {
    width:6px;height:6px;border-radius:50%;background:#58d7a0;
    box-shadow:0 0 10px rgba(88,215,160,.4);
    animation:hostHealthy 2s ease-in-out infinite;
}
@keyframes hostHealthy { 50% { box-shadow:0 0 0 6px rgba(88,215,160,0),0 0 13px rgba(88,215,160,.45); } }

.infra-pipeline {
    display:grid;
    grid-template-columns:1fr 25px 1fr 25px 1fr 25px 1fr;
    gap:4px;
    align-items:center;
}
.pipeline-node {
    position:relative;
    min-height:80px;
    display:grid;
    align-content:center;
    gap:3px;
    padding:8px;
    text-align:center;
    border-radius:9px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.05);
}
.pipeline-node small {
    color:#6b85a0;
    font-size:.47rem !important;
    font-weight:900;
}
.pipeline-node strong {
    color:#eaf1f7;
    font-size:.61rem;
}
.pipeline-node span {
    color:#73899d;
    font-size:.49rem;
}
.pipeline-wire {
    position:relative;
    height:1px;
    background:rgba(139,108,246,.18);
}
.pipeline-wire i {
    position:absolute;
    left:-5px;top:-2px;
    width:8px;height:5px;border-radius:999px;
    background:#a68cff;
    box-shadow:0 0 10px rgba(166,140,255,.55);
    animation:artifactMove 1.8s linear infinite;
}
.pipeline-wire:nth-of-type(2) i { animation-delay:.35s; }
.pipeline-wire:nth-of-type(3) i { animation-delay:.7s; }
@keyframes artifactMove { to { transform:translateX(32px); } }
.build-progress {
    height:3px;
    margin-top:6px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.05);
}
.build-progress b {
    display:block;
    width:45%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#8f7cff,#5dcddb);
    animation:buildBar 2.3s ease-in-out infinite;
}
@keyframes buildBar {
    0% { transform:translateX(-100%); }
    65%,100% { transform:translateX(220%); }
}
.host-lights {
    display:flex;
    justify-content:center;
    gap:4px;
    margin-top:6px;
}
.host-lights i {
    width:5px;height:5px;border-radius:50%;background:#54d89c;
    animation:serverBlink 1.5s ease-in-out infinite;
}
.host-lights i:nth-child(2){animation-delay:.25s}
.host-lights i:nth-child(3){animation-delay:.5s}
@keyframes serverBlink { 50% { opacity:.25; } }

.infra-network-map {
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    margin-top:9px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.045);
}
.network-service {
    padding:6px 7px;
    border-radius:7px;
    text-align:center;
    background:rgba(79,140,255,.035);
    border:1px solid rgba(79,140,255,.07);
}
.network-service span {
    display:block;
    color:#587a96;
    font-size:.43rem;
    font-weight:900;
}
.network-service b {
    color:#a9c8df;
    font-size:.55rem;
}
.network-core {
    grid-column:1 / -1;
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:6px 8px;
    border-radius:7px;
    background:rgba(255,255,255,.022);
}
.network-core strong { color:#889fb3;font-size:.52rem; }
.network-core span { color:#627a8f;font-size:.49rem; }
.network-tunnel {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:7px;
    align-items:center;
    color:#657e93;
    font-size:.48rem;
}
.network-tunnel > span { color:#65c8d2;font-weight:850; }
.network-tunnel i {
    position:relative;
    height:1px;
    overflow:hidden;
    background:repeating-linear-gradient(90deg,rgba(91,211,224,.34) 0 6px,transparent 6px 11px);
}
.network-tunnel i::after {
    content:"";
    position:absolute;
    left:-15px;top:-2px;
    width:12px;height:5px;border-radius:999px;
    background:#60d3df;
    animation:securePacket 2s linear infinite;
}
@keyframes securePacket { to { transform:translateX(380px); } }

/* Stronger tilt for all visual tile types */
@media (hover:hover) and (pointer:fine) {
    .tilt-surface:hover {
        box-shadow:0 28px 60px rgba(0,0,0,.20);
    }
}

@media (max-width:900px) {
    .workshop-board,
    .infra-pipeline {
        grid-template-columns:1fr;
    }
    .board-connector,
    .pipeline-wire {
        width:1px;
        height:14px;
        margin:auto;
    }
    .board-connector i,
    .pipeline-wire i {
        display:none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .moving-card,
    .board-connector i,
    .live-event i,
    .infra-v2-top strong i,
    .pipeline-wire i,
    .build-progress b,
    .host-lights i,
    .network-tunnel i::after {
        animation:none!important;
    }
}


/* ===============================================================
   V5.2.5 - ARCHITECTURE IS REQUIREMENT-DRIVEN
   Replaces the misleading single "default architecture" path.
   =============================================================== */

.architecture-patterns {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(79,140,255,.05), transparent 32%),
        linear-gradient(145deg,rgba(21,49,76,.90),rgba(10,29,46,.96));
    border: 1px solid rgba(104,183,255,.10);
}

.architecture-patterns-head {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 24px;
    align-items: end;
    margin-bottom: 11px;
}

.architecture-patterns-head > div {
    display: grid;
    gap: 4px;
}

.architecture-patterns-head span {
    color: #65bdf1;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
}

.architecture-patterns-head strong {
    color: #edf4fa;
    font-size: .95rem;
}

.architecture-patterns-head p {
    margin: 0;
    color: #8ea5b8;
    font-size: .72rem;
    line-height: 1.5;
}

.architecture-pattern-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.architecture-pattern-card {
    position: relative;
    overflow: hidden;
    min-height: 165px;
    padding: 12px;
    border-radius: 11px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.055);
    transition:
        transform .22s var(--ease-out),
        background .22s ease,
        border-color .22s ease;
}

.architecture-pattern-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.045);
    border-color: rgba(104,183,255,.15);
}

.architecture-pattern-card::after {
    content:"";
    position:absolute;
    right:-35px;
    bottom:-45px;
    width:120px;
    height:120px;
    border-radius:50%;
    opacity:.08;
    transition: transform .25s ease, opacity .25s ease;
}

.architecture-pattern-card:hover::after {
    transform: scale(1.18);
    opacity:.14;
}

.pattern-api::after { background: var(--blue); }
.pattern-event::after { background: var(--cyan); }
.pattern-integration::after { background: var(--violet); }
.pattern-data::after { background: var(--green); }

.pattern-label {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:7px;
}

.pattern-label span {
    min-width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:7px;
    color:#9bc9ff;
    background:rgba(79,140,255,.09);
    border:1px solid rgba(104,183,255,.12);
    font-size:.52rem;
    font-weight:900;
}

.pattern-label strong {
    color:#eef5fb;
    font-size:.78rem;
}

.architecture-pattern-card > p {
    margin:0 0 10px;
    color:#91a7b9;
    font-size:.68rem;
    line-height:1.5;
}

.pattern-flow {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    margin-bottom:9px;
}

.pattern-flow span {
    padding:5px 7px;
    border-radius:7px;
    color:#b7c9d7;
    background:rgba(104,183,255,.055);
    border:1px solid rgba(104,183,255,.08);
    font-size:.59rem;
    font-weight:800;
}

.pattern-flow i {
    color:#58cbd8;
    font-size:.60rem;
    font-style:normal;
    animation:architectureArrow 1.7s ease-in-out infinite;
}

@keyframes architectureArrow {
    50% { transform:translateX(3px); color:#86dfe7; }
}

.architecture-pattern-card > small {
    color:#678298;
    font-size:.56rem !important;
    font-weight:750;
}

@media (max-width:900px) {
    .architecture-patterns-head,
    .architecture-pattern-grid {
        grid-template-columns:1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pattern-flow i { animation:none!important; }
}


/* ===============================================================
   V5.2.6 - BACKEND TRACE + DECISION STRIP
   =============================================================== */

/* Production trace: remove the dead empty space and make the panel informative. */
.backend-live-panel-v2 {
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    min-height: 0 !important;
}

.backend-live-panel-v2 .backend-live-head {
    min-height: 42px;
    align-items: center;
}

.backend-live-panel-v2 .backend-live-head > div {
    display: grid;
    gap: 2px;
}

.backend-live-panel-v2 .backend-live-head span {
    color: #6f879b;
    font-size: .58rem;
}

.backend-live-panel-v2 .backend-live-head small {
    color: #4e6b82;
    font-size: .49rem !important;
}

.backend-live-panel-v2 .backend-live-head b {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #67d7a3;
    font-size: .53rem;
}

.backend-live-panel-v2 .backend-live-head b i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #57dba1;
    box-shadow: 0 0 10px rgba(87,219,161,.45);
}

.trace-summary {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
    padding: 9px 10px 7px;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.trace-summary div {
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.045);
}

.trace-summary small {
    display: block;
    color: #5d7890;
    font-size: .47rem !important;
    font-weight: 900;
}

.trace-summary strong {
    display: block;
    margin-top: 2px;
    color: #d9e7f1;
    font-size: .64rem;
}

.trace-timeline {
    position: relative;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 10px 10px 8px 16px;
    min-height: 0 !important;
}

.trace-timeline::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        rgba(89,199,232,.22),
        rgba(139,108,246,.18),
        rgba(85,217,160,.22)
    );
}

.trace-timeline article {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: 8px;
    align-items: center;
    min-height: 46px;
    padding: 5px 0;
    opacity: .46;
    transform: translateX(-3px);
    transition: opacity .22s ease, transform .22s ease;
}

.trace-timeline article.trace-active {
    opacity: 1;
    transform: none;
}

.trace-dot {
    position: relative;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #61bee8;
    box-shadow: 0 0 0 4px rgba(97,190,232,.06);
}

.trace-auth { background: #a68cff; }
.trace-sql { background: #5ed2c0; }
.trace-event { background: #5bcf99; }
.trace-done { background: #f1ba53; }

.trace-timeline article > div {
    min-width: 0;
}

.trace-timeline small {
    display: block;
    color: #5f7e98;
    font-size: .46rem !important;
    font-weight: 900;
    letter-spacing: .08em;
}

.trace-timeline strong {
    display: block;
    margin: 1px 0;
    color: #dbe8f2;
    font-size: .59rem;
}

.trace-timeline p {
    margin: 0;
    color: #6e879a;
    font-size: .50rem !important;
    line-height: 1.35;
}

.trace-timeline article > b {
    color: #7890a3;
    font-size: .50rem;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}

.backend-health-v2 {
    grid-template-columns: repeat(3,1fr) !important;
    padding: 8px 10px !important;
}

.backend-health-v2 span {
    justify-content: center;
    font-size: .49rem !important;
}

/* Replace the bulky three generic tiles with one compact, more useful strip. */
.backend-decision-strip {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 16px;
    align-items: center;
    margin-top: 9px;
    padding: 12px 14px;
    border-radius: 12px;
    background:
        linear-gradient(90deg,rgba(79,140,255,.045),rgba(50,199,217,.025));
    border: 1px solid rgba(104,183,255,.08);
}

.decision-strip-copy {
    display: grid;
    gap: 4px;
}

.decision-strip-copy span {
    color: #64bdec;
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .10em;
}

.decision-strip-copy strong {
    color: #e8f2f8;
    font-size: .72rem;
    line-height: 1.35;
}

.decision-points {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
}

.decision-points span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 7px 8px;
    border-radius: 8px;
    color: #9bb0c0;
    background: rgba(255,255,255,.024);
    border: 1px solid rgba(255,255,255,.045);
    font-size: .57rem;
}

.decision-points b {
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #8fc8f9;
    background: rgba(79,140,255,.08);
    border: 1px solid rgba(104,183,255,.10);
    font-size: .46rem;
}

@media (max-width: 980px) {
    .backend-decision-strip {
        grid-template-columns: 1fr;
    }

    .decision-points {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .trace-summary,
    .backend-health-v2 {
        grid-template-columns: 1fr !important;
    }
}


/* ===============================================================
   V5.2.7 - BIGGER TYPE / TIGHTER SECTIONS / UNIVERSAL CURSOR GLOW
   =============================================================== */

/* Make the page denser without shrinking the actual content width. */
.studio-section {
    padding: 28px 0 !important;
}

.scene-intro {
    margin-bottom: 14px !important;
}

.scene-intro h2 {
    margin-bottom: 8px !important;
}

.scene-shell {
    gap: 24px !important;
}

/* Larger type across dense technical sections. */
.architecture-patterns-head span,
.project-index,
.project-live-head span,
.workshop-demo-head span,
.infra-v2-top > span,
.toolbox-card-head > span,
.learning-module-copy > span,
.degree-copy > span {
    font-size: .68rem !important;
}

.architecture-patterns-head strong {
    font-size: 1.05rem !important;
}

.architecture-patterns-head p {
    font-size: .82rem !important;
}

.architecture-pattern-card {
    min-height: 145px !important;
    padding: 14px !important;
}

.pattern-label strong {
    font-size: .90rem !important;
}

.architecture-pattern-card > p {
    font-size: .79rem !important;
    line-height: 1.5 !important;
    margin-bottom: 9px !important;
}

.pattern-flow span {
    font-size: .68rem !important;
    padding: 6px 8px !important;
}

.architecture-pattern-card > small {
    font-size: .64rem !important;
}

/* Backend section: bigger and more readable without oversized empty areas. */
.backend-intro p {
    font-size: .92rem !important;
}

.request-console-head,
.backend-live-head {
    min-height: 40px !important;
}

.route-node {
    min-height: 86px !important;
}

.route-node small {
    font-size: .66rem !important;
}

.route-node strong {
    font-size: .88rem !important;
}

.route-node span {
    font-size: .74rem !important;
}

.request-response {
    padding: 9px 10px !important;
}

.backend-live-panel-v2 .backend-live-head span {
    font-size: .66rem !important;
}

.backend-live-panel-v2 .backend-live-head small {
    font-size: .57rem !important;
}

.trace-summary small {
    font-size: .55rem !important;
}

.trace-summary strong {
    font-size: .74rem !important;
}

.trace-timeline {
    gap: 4px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.trace-timeline article {
    min-height: 42px !important;
}

.trace-timeline small {
    font-size: .54rem !important;
}

.trace-timeline strong {
    font-size: .68rem !important;
}

.trace-timeline p {
    font-size: .58rem !important;
}

.trace-timeline article > b {
    font-size: .57rem !important;
}

.backend-health-v2 span {
    font-size: .56rem !important;
}

/* Journey: larger inner copy, less vertical bulk. */
.journey-panel {
    padding: 16px !important;
}

.journey-top h3 {
    font-size: 1.24rem !important;
}

.journey-top p {
    font-size: .83rem !important;
}

.journey-impact {
    margin: 11px 0 9px !important;
}

.journey-impact strong {
    font-size: .90rem !important;
}

.journey-detail-grid {
    gap: 7px !important;
    margin: 8px 0 9px !important;
}

.journey-detail-grid article {
    min-height: 114px !important;
    padding: 11px 12px !important;
}

.journey-detail-grid strong {
    font-size: .90rem !important;
}

.journey-detail-grid p {
    font-size: .79rem !important;
}

/* Projects / Lab / Toolbox / Learning / Education: readable, not cavernous. */
.project-feature,
.project-card-studio,
.lab-v5,
.toolbox-major,
.toolbox-secondary,
.learning-module,
.degree-card {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.project-feature-head p,
.project-card-studio > p,
.lab-project-copy > p,
.toolbox-card-head p,
.learning-module-copy small,
.degree-copy p {
    font-size: .80rem !important;
}

.skill-cloud.large span,
.tag-row span {
    font-size: .76rem !important;
}

/* Universal cursor-following halo for every tiltable surface. */
.tilt-surface {
    position: relative;
    overflow: hidden;
    --spot-x: 50%;
    --spot-y: 50%;
    --spot-opacity: 0;
}

.tilt-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: var(--spot-opacity);
    background:
        radial-gradient(
            180px circle at var(--spot-x) var(--spot-y),
            rgba(103, 198, 239, .15),
            rgba(103, 198, 239, .06) 34%,
            transparent 70%
        );
    transition: opacity .18s ease;
}

.tilt-surface.tilt-active::after,
.tilt-surface:hover::after {
    --spot-opacity: 1;
}

/* Preserve content above the halo. */
.tilt-surface > * {
    position: relative;
    z-index: 1;
}

/* Different subtle halo accents by context while keeping one interaction language. */
.journey-panel[data-accent="violet"]::after {
    background: radial-gradient(180px circle at var(--spot-x) var(--spot-y),
        rgba(161,138,255,.16), rgba(161,138,255,.05) 35%, transparent 70%);
}

.journey-panel[data-accent="amber"]::after {
    background: radial-gradient(180px circle at var(--spot-x) var(--spot-y),
        rgba(242,188,76,.14), rgba(242,188,76,.045) 35%, transparent 70%);
}

.pattern-event::after,
.pattern-integration::after,
.pattern-data::after {
    z-index: 0 !important;
}

/* Backend main cards should visibly tilt too. */
.request-console.tilt-surface,
.backend-live-panel-v2.tilt-surface {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Compact decision strip text. */
.backend-decision-strip {
    padding: 10px 12px !important;
}

.decision-strip-copy strong {
    font-size: .80rem !important;
}

.decision-points span {
    min-height: 44px !important;
    font-size: .64rem !important;
}

@media (max-width: 900px) {
    .studio-section {
        padding: 24px 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tilt-surface {
        transform: none !important;
    }

    .tilt-surface::after {
        display: none !important;
    }
}


/* ===============================================================
   V5.2.8 - REQUEST TRACE ACTIVITY
   Fills the request panel with meaningful backend traffic instead
   of decorative empty space.
   =============================================================== */

.request-activity {
    margin: 10px 12px 12px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(5,19,31,.34);
    border: 1px solid rgba(104,183,255,.07);
}

.request-activity-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.request-activity-head span {
    color: #63bfea;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .10em;
}

.request-activity-head small {
    color: #536f84;
    font-size: .54rem !important;
}

.request-row {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(180px,1fr) minmax(90px,.55fr) 48px 38px;
    gap: 9px;
    align-items: center;
    min-height: 42px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,.035);
    transition: background .18s ease, transform .18s ease;
}

.request-row:last-child {
    border-bottom: 0;
}

.request-row:hover {
    background: rgba(104,183,255,.035);
    transform: translateX(3px);
}

.request-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 999px;
    background: rgba(104,183,255,.25);
    opacity: 0;
    transition: opacity .18s ease;
}

.request-row:hover::before {
    opacity: 1;
}

.request-method {
    width: max-content;
    padding: 4px 6px;
    border-radius: 6px;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.method-get {
    color: #8ec8ff;
    background: rgba(79,140,255,.09);
    border: 1px solid rgba(104,183,255,.12);
}

.method-post {
    color: #73dfb0;
    background: rgba(74,210,158,.08);
    border: 1px solid rgba(74,210,158,.11);
}

.method-patch {
    color: #cfb7ff;
    background: rgba(139,108,246,.09);
    border: 1px solid rgba(139,108,246,.12);
}

.request-row strong {
    overflow: hidden;
    color: #c8d7e3;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: .62rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-latency {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
}

.request-latency i {
    display: block;
    width: var(--latency);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#4f8cff,#58d5df);
    box-shadow: 0 0 8px rgba(88,213,223,.14);
    transform-origin: left;
    animation: latencyGrow .6s cubic-bezier(.16,.82,.24,1) both;
}

.request-row-2 .request-latency i { animation-delay: .08s; }
.request-row-3 .request-latency i { animation-delay: .16s; }
.request-row-4 .request-latency i { animation-delay: .24s; }
.request-row-5 .request-latency i { animation-delay: .32s; }

@keyframes latencyGrow {
    from { transform: scaleX(0); opacity: .25; }
    to { transform: scaleX(1); opacity: 1; }
}

.request-row > b {
    color: #8da4b6;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: .55rem;
    text-align: right;
}

.request-row > em {
    padding: 3px 5px;
    border-radius: 5px;
    color: #82d9aa;
    background: rgba(74,210,158,.07);
    font-size: .52rem;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

/* The request trace now has enough content to justify its height. */
.request-console {
    min-height: 0 !important;
}

@media (max-width: 900px) {
    .request-row {
        grid-template-columns: 52px minmax(0,1fr) 48px 38px;
    }

    .request-latency {
        display: none;
    }
}

@media (max-width: 600px) {
    .request-row {
        grid-template-columns: 48px minmax(0,1fr) 38px;
    }

    .request-row > b {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .request-latency i {
        animation: none !important;
    }
}


/* ===============================================================
   STUDIO V5.3 - FINAL READABILITY + MOBILE MOTION PASS
   =============================================================== */

/* ----- Global rhythm: less dead space, larger readable copy ----- */
:root {
    --text-main: #eef5fb;
    --text-body: #b9c9d7;
    --text-muted: #91a8ba;
    --text-dim: #7891a5;
    --panel-main: #17324d;
    --panel-soft: #132b43;
    --panel-deep: #0b2033;
}

.studio-section {
    padding: 22px 0 !important;
}

.scene-shell {
    gap: 20px !important;
}

.scene-intro {
    margin-bottom: 12px !important;
}

.scene-intro h2 {
    font-size: clamp(2rem, 3vw, 3.15rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
}

.scene-intro > p,
.scene-intro.split > p,
.backend-intro p {
    color: var(--text-body) !important;
    font-size: .98rem !important;
    line-height: 1.58 !important;
}

.scene-rail strong {
    color: #dce9f3 !important;
}

.scene-rail small {
    color: #8099ad !important;
}

/* ----- Hero: slightly larger supporting text for scanability ----- */
.hero-shell p,
.hero-summary {
    color: #c0cfdb !important;
    font-size: .90rem !important;
    line-height: 1.55 !important;
}

.hero-focus-grid strong {
    font-size: .88rem !important;
}

.hero-focus-grid small {
    color: #a8bdcd !important;
    font-size: .69rem !important;
}

.hero-contact-card small {
    color: #a9becd !important;
    font-size: .67rem !important;
}

/* ----- Backend: readable first, technical second ----- */
.backend-control-room {
    gap: 8px !important;
}

.request-console,
.backend-live-panel {
    background:
        linear-gradient(145deg, rgba(18,43,67,.98), rgba(8,25,40,.99)) !important;
    border-color: rgba(117,193,235,.15) !important;
}

.request-console-head,
.backend-live-head {
    color: #91aabd !important;
}

.route-node {
    min-height: 82px !important;
    padding: 10px !important;
    background: rgba(255,255,255,.038) !important;
}

.route-node small {
    color: #7fa6c4 !important;
    font-size: .66rem !important;
}

.route-node strong {
    color: #f1f6fa !important;
    font-size: .88rem !important;
}

.route-node span {
    color: #9eb2c2 !important;
    font-size: .73rem !important;
}

.request-response small,
.request-activity-head small {
    color: #8fa7b8 !important;
}

.request-row {
    min-height: 40px !important;
}

.request-row strong {
    color: #d7e3ec !important;
    font-size: .68rem !important;
}

.request-row > b {
    color: #a4b7c5 !important;
    font-size: .60rem !important;
}

.trace-summary strong {
    color: #f0f6fa !important;
}

.trace-timeline strong {
    color: #e9f2f8 !important;
    font-size: .70rem !important;
}

.trace-timeline p {
    color: #8fa7b8 !important;
    font-size: .60rem !important;
}

.trace-timeline article > b {
    color: #9fb2c1 !important;
}

/* ----- Experience / Journey: remove visual air, boost details ----- */
.journey-path {
    gap: 9px !important;
}

.journey-panel {
    padding: 15px !important;
}

.journey-top {
    margin-bottom: 9px !important;
}

.journey-top span {
    color: #77a2c2 !important;
    font-size: .65rem !important;
}

.journey-top p {
    color: #8ed2d9 !important;
    font-size: .79rem !important;
}

.journey-impact div {
    padding: 9px 10px !important;
}

.journey-impact small {
    color: #7798b1 !important;
}

.journey-impact strong {
    color: #f1f6fa !important;
}

.journey-detail-grid article {
    min-height: 102px !important;
    padding: 10px 11px !important;
    background: rgba(255,255,255,.035) !important;
}

.journey-detail-grid small {
    color: #7aa3c0 !important;
}

.journey-detail-grid strong {
    color: #eff5fa !important;
    font-size: .91rem !important;
}

.journey-detail-grid p {
    color: #a9bdcc !important;
    font-size: .78rem !important;
    line-height: 1.48 !important;
}

/* ----- Projects: increase contrast and text hierarchy ----- */
.project-feature,
.project-card-studio {
    background: linear-gradient(145deg, rgba(28,57,87,.96), rgba(19,43,66,.98)) !important;
    border-color: rgba(104,183,255,.13) !important;
}

.project-feature-head p,
.project-card-studio > p,
.project-feature p,
.project-card-studio li {
    color: #aec1d0 !important;
    font-size: .80rem !important;
    line-height: 1.52 !important;
}

.project-feature h3,
.project-card-studio h3 {
    color: #f4f8fb !important;
}

.project-journey article,
.project-proof span {
    background: rgba(255,255,255,.035) !important;
}

.project-journey small,
.project-index {
    color: #76a4c5 !important;
}

.project-journey strong {
    color: #eef5fa !important;
}

.workshop-column,
.infra-v2-demo,
.hr-live-demo {
    background-color: rgba(7,27,43,.58) !important;
}

.work-card span,
.live-event,
.workshop-event-strip span,
.pipeline-node span,
.network-core span,
.network-tunnel,
.hr-access small {
    color: #91a9ba !important;
}

/* ----- Architecture patterns: less empty card area, larger type ----- */
.architecture-patterns {
    padding: 14px !important;
}

.architecture-patterns-head {
    margin-bottom: 8px !important;
}

.architecture-patterns-head strong {
    font-size: 1.12rem !important;
}

.architecture-patterns-head p {
    color: #b1c3d1 !important;
    font-size: .88rem !important;
}

.architecture-pattern-grid {
    gap: 7px !important;
}

.architecture-pattern-card {
    min-height: 126px !important;
    padding: 12px !important;
    background: linear-gradient(145deg, rgba(31,60,89,.80), rgba(24,50,76,.90)) !important;
}

.pattern-label strong {
    font-size: .95rem !important;
}

.architecture-pattern-card > p {
    color: #b4c5d2 !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
}

.pattern-flow {
    margin-bottom: 6px !important;
}

.pattern-flow span {
    color: #d5e1ea !important;
    font-size: .72rem !important;
}

.architecture-pattern-card > small {
    color: #88a3b7 !important;
    font-size: .66rem !important;
}

/* ----- Lab: keep visuals, make copy easier to read ----- */
.lab-v5 {
    padding: 15px !important;
}

.lab-title-v5 {
    margin-bottom: 10px !important;
}

.lab-title-v5 h3 {
    font-size: 1.34rem !important;
}

.lab-title-v5 > p {
    color: #b3c5d2 !important;
    font-size: .83rem !important;
}

.lab-project {
    background: linear-gradient(145deg, rgba(27,56,84,.96), rgba(17,39,60,.98)) !important;
}

.lab-project-copy > p {
    color: #adbfcd !important;
    font-size: .80rem !important;
    line-height: 1.48 !important;
}

.lab-method-grid span {
    color: #7fa0b8 !important;
}

.lab-method-grid strong {
    color: #e9f2f8 !important;
    font-size: .74rem !important;
}

/* ----- Toolbox: highest readability pass ----- */
.toolbox-v5 .scene-intro {
    margin-bottom: 10px !important;
}

.toolbox-columns {
    gap: 8px !important;
}

.toolbox-major,
.toolbox-secondary {
    padding: 14px !important;
    background: linear-gradient(145deg, rgba(26,54,81,.90), rgba(16,37,57,.96)) !important;
}

.toolbox-card-head h3 {
    color: #f1f6fa !important;
    font-size: 1.06rem !important;
}

.toolbox-card-head p {
    color: #a8bdcc !important;
    font-size: .79rem !important;
}

.skill-groups {
    gap: 10px !important;
    margin-top: 10px !important;
}

.skill-groups small {
    color: #7ea0ba !important;
    font-size: .63rem !important;
}

.skill-cloud.large {
    gap: 5px !important;
}

.skill-cloud.large span {
    color: #e0eaf1 !important;
    font-size: .75rem !important;
    padding: 6px 8px !important;
    background: rgba(91,173,232,.10) !important;
    border-color: rgba(104,183,255,.16) !important;
}

/* ----- Learning: denser, larger, clearer ----- */
.learning-modules {
    gap: 8px !important;
}

.learning-module {
    min-height: 150px !important;
    padding: 14px !important;
    background: linear-gradient(145deg, rgba(28,55,83,.94), rgba(17,39,60,.98)) !important;
}

.learning-module-copy > span {
    color: #82a4bd !important;
    font-size: .62rem !important;
}

.learning-module-copy h3 {
    color: #f0f6fa !important;
    font-size: .98rem !important;
}

.learning-module-copy > p {
    color: #8bd2da !important;
    font-size: .73rem !important;
}

.learning-module-copy strong {
    color: #e7f0f7 !important;
    font-size: .72rem !important;
}

.learning-module-copy small {
    color: #b1c3d1 !important;
    font-size: .75rem !important;
    line-height: 1.45 !important;
}

/* ----- Education: preserve V4 layout, improve legibility ----- */
.academic-route-scene .scene-intro {
    margin-bottom: 10px !important;
}

.academic-route {
    gap: 10px !important;
}

.academic-stop {
    min-height: 220px !important;
    padding: 16px !important;
    background: linear-gradient(145deg, rgba(29,58,87,.94), rgba(18,40,62,.98)) !important;
}

.academic-copy small {
    color: #789db8 !important;
    font-size: .65rem !important;
}

.academic-copy h3 {
    color: #f2f6fa !important;
    font-size: 1.05rem !important;
}

.academic-copy strong {
    color: #8bd7df !important;
    font-size: .85rem !important;
}

.academic-copy p {
    color: #a9bdcc !important;
    font-size: .76rem !important;
}

.academic-chips span {
    color: #b6c7d4 !important;
    font-size: .61rem !important;
}

/* ----- Universal tile visibility ----- */
.tilt-surface {
    border-color: rgba(106,181,224,.13);
}

/* ----- MOBILE: keep animation personality without desktop hover assumptions ----- */
@media (max-width: 700px) {
    .studio-section {
        padding: 18px 0 !important;
    }

    .scene-shell {
        gap: 10px !important;
    }

    .scene-intro h2 {
        font-size: clamp(1.55rem, 8vw, 2.15rem) !important;
    }

    .scene-intro > p,
    .scene-intro.split > p,
    .backend-intro p {
        font-size: .88rem !important;
    }

    .scene-rail {
        display: grid !important;
        grid-template-columns: auto auto 1fr;
        align-items: baseline;
        gap: 7px;
        margin-bottom: 2px;
    }

    .scene-rail small {
        font-size: .67rem !important;
    }

    .journey-detail-grid,
    .journey-detail-grid.journey-detail-3 {
        grid-template-columns: 1fr !important;
    }

    .architecture-pattern-grid,
    .learning-modules {
        grid-template-columns: 1fr !important;
    }

    .architecture-pattern-card,
    .learning-module,
    .journey-panel,
    .project-card-studio,
    .lab-project,
    .toolbox-major,
    .toolbox-secondary,
    .academic-stop {
        animation: mobileCardIn .55s cubic-bezier(.16,.82,.24,1) both;
        animation-play-state: paused;
    }

    .mobile-in-view {
        animation-play-state: running !important;
    }

    @keyframes mobileCardIn {
        from {
            opacity: .35;
            transform: translateY(18px) scale(.985);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    /* No cursor, so mobile gets a slow ambient light pass instead. */
    .tilt-surface.mobile-in-view::after {
        display: block !important;
        opacity: .65 !important;
        background:
            radial-gradient(
                150px circle at var(--mobile-glow-x, 20%) 50%,
                rgba(103,198,239,.11),
                rgba(103,198,239,.035) 38%,
                transparent 72%
            ) !important;
        animation: mobileGlow 3.8s ease-in-out infinite alternate;
    }

    @keyframes mobileGlow {
        from { --mobile-glow-x: 12%; }
        to { --mobile-glow-x: 88%; }
    }

    .request-row {
        min-height: 38px !important;
    }

    .request-row strong {
        font-size: .61rem !important;
    }

    .academic-route {
        grid-template-columns: 1fr !important;
    }

    .academic-journey-line {
        grid-template-columns: auto 1fr auto 1fr auto !important;
        margin: 2px 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-in-view,
    .tilt-surface.mobile-in-view::after {
        animation: none !important;
    }
}


/* ===============================================================
   STUDIO V5.3.1 - MOBILE LAYOUT REPAIR
   Fixes project visualizations and V4 education layout on narrow screens.
   =============================================================== */

/* Make the academic cards deterministic again on desktop too. */
.academic-stop {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 220px !important;
}

.academic-logo {
    grid-column: 1 !important;
    min-width: 0 !important;
}

.academic-logo img {
    width: 88px !important;
    height: 88px !important;
}

.academic-copy {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: auto !important;
}

.academic-copy h3,
.academic-copy strong,
.academic-copy p {
    max-width: none !important;
    width: auto !important;
}

@media (max-width: 700px) {
    /* Keep the page itself inside the viewport with no side clipping. */
    html,
    body {
        overflow-x: hidden !important;
    }

    .scene-shell,
    .section-shell,
    .hero-shell,
    .closing-shell {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .scene-content,
    .project-feature,
    .project-card-studio,
    .journey-panel,
    .lab-project,
    .toolbox-major,
    .toolbox-secondary,
    .learning-module,
    .academic-stop {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Mobile cards should animate in, but not 3D-tilt while the user scrolls. */
    .tilt-surface {
        transform: none !important;
    }

    /* ---------------- Workshop visualization ----------------
       Preserve the flow left-to-right instead of stacking it into a huge column. */
    .workshop-live-demo {
        padding: 8px !important;
    }

    .workshop-demo-head {
        align-items: flex-start !important;
        margin-bottom: 7px !important;
    }

    .workshop-demo-head span {
        font-size: .52rem !important;
    }

    .workshop-demo-head strong {
        max-width: 130px;
        text-align: right;
        font-size: .47rem !important;
        line-height: 1.25;
    }

    .workshop-board {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        align-items: stretch !important;
    }

    .board-connector {
        display: none !important;
    }

    .workshop-column {
        min-height: 0 !important;
        padding: 6px !important;
    }

    .column-head {
        margin-bottom: 5px !important;
    }

    .column-head span {
        font-size: .43rem !important;
    }

    .column-head b {
        min-width: 17px !important;
        width: 17px !important;
        height: 17px !important;
        font-size: .42rem !important;
    }

    .work-card {
        padding: 6px !important;
        min-width: 0 !important;
    }

    .work-card small {
        font-size: .42rem !important;
    }

    .work-card strong {
        font-size: .56rem !important;
        line-height: 1.2;
    }

    .work-card span {
        font-size: .45rem !important;
        line-height: 1.2;
    }

    .muted-card {
        display: none !important;
    }

    .live-event {
        margin-top: 5px !important;
        font-size: .42rem !important;
        line-height: 1.25;
    }

    .workshop-event-strip {
        gap: 4px 8px !important;
        margin-top: 6px !important;
        padding: 6px !important;
    }

    .workshop-event-strip span {
        font-size: .43rem !important;
    }

    /* ---------------- HR visualization ----------------
       Keep employee -> modules -> access horizontal and compact. */
    .hr-live-demo {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) 72px !important;
        gap: 6px !important;
        min-height: 0 !important;
        padding: 8px !important;
        align-items: center !important;
    }

    .hr-live-demo .hr-flow {
        display: none !important;
    }

    .hr-person,
    .hr-access {
        min-height: 86px !important;
        height: auto !important;
    }

    .person-head {
        width: 20px !important;
        height: 20px !important;
    }

    .person-body {
        width: 36px !important;
        height: 23px !important;
    }

    .hr-person small,
    .hr-access small {
        font-size: .43rem !important;
    }

    .hr-access strong {
        font-size: .56rem !important;
    }

    .hr-module-stack {
        gap: 4px !important;
        min-width: 0 !important;
    }

    .hr-module-stack span {
        padding: 6px !important;
        font-size: .48rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------------- Infrastructure visualization ----------------
       Four deployment stages become a compact 2x2 pipeline instead of 4 tall rows. */
    .infra-v2-demo {
        padding: 8px !important;
    }

    .infra-v2-top {
        margin-bottom: 6px !important;
    }

    .infra-v2-top > span {
        font-size: .50rem !important;
    }

    .infra-v2-top strong {
        font-size: .44rem !important;
    }

    .infra-pipeline {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .pipeline-wire {
        display: none !important;
    }

    .pipeline-node {
        min-height: 76px !important;
        padding: 7px !important;
    }

    .pipeline-node small {
        font-size: .43rem !important;
    }

    .pipeline-node strong {
        font-size: .56rem !important;
    }

    .pipeline-node span {
        font-size: .45rem !important;
    }

    .infra-network-map {
        gap: 4px !important;
        margin-top: 6px !important;
        padding-top: 6px !important;
    }

    .network-service {
        padding: 5px !important;
    }

    .network-service span {
        font-size: .38rem !important;
    }

    .network-service b {
        font-size: .48rem !important;
    }

    .network-core {
        gap: 4px !important;
        padding: 5px 6px !important;
    }

    .network-core strong,
    .network-core span {
        font-size: .41rem !important;
    }

    .network-tunnel {
        gap: 5px !important;
        font-size: .40rem !important;
    }

    /* ---------------- Education ----------------
       Two compact full-width cards with a clean horizontal route between them. */
    .academic-route {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .academic-stop {
        display: grid !important;
        grid-template-columns: 66px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-height: 0 !important;
        padding: 12px !important;
        align-items: center !important;
    }

    .academic-country {
        top: 9px !important;
        right: 10px !important;
        font-size: .45rem !important;
    }

    .academic-logo {
        grid-column: 1 !important;
        align-self: center !important;
    }

    .academic-logo img {
        width: 62px !important;
        height: 62px !important;
        padding: 5px !important;
        border-radius: 11px !important;
    }

    .academic-copy {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .academic-copy small {
        font-size: .54rem !important;
    }

    .academic-copy h3 {
        margin-top: 3px !important;
        font-size: .86rem !important;
        line-height: 1.2 !important;
    }

    .academic-copy strong {
        font-size: .72rem !important;
        line-height: 1.2 !important;
    }

    .academic-copy p {
        margin: 3px 0 7px !important;
        font-size: .64rem !important;
    }

    .academic-chips {
        gap: 4px !important;
    }

    .academic-chips span {
        padding: 4px 6px !important;
        font-size: .49rem !important;
    }

    .academic-journey-line {
        display: grid !important;
        grid-template-columns: auto 1fr 34px 1fr auto !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 36px !important;
        margin: 0 6px !important;
    }

    .academic-journey-line > span {
        font-size: .43rem !important;
    }

    .academic-journey-line i {
        width: 100% !important;
        height: 1px !important;
    }

    .academic-journey-line b {
        width: 32px !important;
        height: 32px !important;
    }

    /* Make project cards visually balanced on narrow screens. */
    .project-card-studio {
        padding: 12px !important;
    }

    .project-card-studio h3 {
        font-size: .92rem !important;
        line-height: 1.28 !important;
    }

    .project-card-studio > p {
        font-size: .70rem !important;
        line-height: 1.45 !important;
    }
}


/* ===============================================================
   STUDIO V5.3.2 - MOBILE GRAY-OUT FIX
   Mobile reveal effects must never reduce content opacity.
   =============================================================== */

@media (max-width: 700px) {
    /* The desktop reveal system was dimming cards while IntersectionObserver
       waited to mark them visible. Mobile content must always stay fully readable. */
    .motion-ready [data-reveal],
    .motion-ready [data-reveal].in-view {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Never pause an animation whose first frame lowers opacity. */
    .architecture-pattern-card,
    .learning-module,
    .journey-panel,
    .project-feature,
    .project-card-studio,
    .lab-project,
    .toolbox-major,
    .toolbox-secondary,
    .academic-stop {
        opacity: 1 !important;
        animation: none !important;
        animation-play-state: running !important;
    }

    .mobile-in-view {
        opacity: 1 !important;
        animation: none !important;
    }

    /* Keep motion personality with movement/glow only, never fading. */
    .mobile-motion-enter {
        animation: mobileSlideIn .48s cubic-bezier(.16,.82,.24,1) both !important;
    }

    @keyframes mobileSlideIn {
        from {
            opacity: 1;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    /* Ambient glow remains visible without darkening the card itself. */
    .tilt-surface.mobile-in-view::after {
        opacity: .48 !important;
        mix-blend-mode: screen;
    }

    /* Ensure no parent card inherits accidental transparency. */
    .journey-panel,
    .project-feature,
    .project-card-studio,
    .lab-project,
    .toolbox-major,
    .toolbox-secondary,
    .learning-module,
    .academic-stop,
    .architecture-pattern-card,
    .request-console,
    .backend-live-panel-v2,
    .hr-live-demo,
    .infra-v2-demo,
    .workshop-live-demo {
        filter: none !important;
    }
}


/* ===============================================================
   STUDIO V5.3.3 - LINKEDIN BRAND MOTIF
   A restrained version of the stepped system-path artwork from the
   LinkedIn banner, integrated into the hero so both profiles match.
   =============================================================== */

.hero.section-shell {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

.linkedin-brand-motif {
    position: absolute;
    right: 2.5%;
    top: 2.5%;
    width: 45%;
    height: 42%;
    z-index: 0;
    pointer-events: none;
    opacity: .34;
}

/* Keep all real hero content above the branding layer. */
.hero.section-shell > *:not(.linkedin-brand-motif) {
    position: relative;
    z-index: 1;
}

.linkedin-brand-motif .brand-path,
.linkedin-brand-motif .brand-rise {
    position: absolute;
    display: block;
    background: linear-gradient(
        90deg,
        rgba(66,132,169,.24),
        rgba(83,170,211,.72),
        rgba(66,132,169,.28)
    );
    box-shadow: 0 0 9px rgba(83,170,211,.035);
}

.linkedin-brand-motif .brand-path {
    height: 2px;
}

.linkedin-brand-motif .brand-rise {
    width: 2px;
    background: linear-gradient(
        180deg,
        rgba(66,132,169,.20),
        rgba(83,170,211,.70)
    );
}

/* Stepped route based on the LinkedIn header artwork. */
.linkedin-brand-motif .path-a {
    left: 3%;
    top: 72%;
    width: 22%;
}

.linkedin-brand-motif .rise-a {
    left: 24.7%;
    top: 52%;
    height: 20%;
}

.linkedin-brand-motif .path-b {
    left: 24.7%;
    top: 52%;
    width: 24%;
}

.linkedin-brand-motif .rise-b {
    left: 48.5%;
    top: 36%;
    height: 16%;
}

.linkedin-brand-motif .path-c {
    left: 48.5%;
    top: 36%;
    width: 23%;
}

.linkedin-brand-motif .rise-c {
    left: 71.2%;
    top: 17%;
    height: 19%;
}

.linkedin-brand-motif .path-d {
    left: 71.2%;
    top: 17%;
    width: 25%;
}

.linkedin-brand-motif .brand-node {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 1px;
    background: #58a9d0;
    box-shadow: 0 0 8px rgba(88,169,208,.18);
}

.linkedin-brand-motif .node-a {
    left: 24.25%;
    top: calc(72% - 3px);
}

.linkedin-brand-motif .node-b {
    left: 48.05%;
    top: calc(52% - 3px);
}

.linkedin-brand-motif .node-c {
    left: 70.75%;
    top: calc(36% - 3px);
}

.linkedin-brand-motif .node-d {
    left: 82%;
    top: calc(17% - 3px);
}

.linkedin-brand-motif .node-e {
    right: 3%;
    top: calc(17% - 3px);
}

.linkedin-brand-motif .brand-node.accent {
    background: #d39432;
    box-shadow: 0 0 10px rgba(211,148,50,.24);
}

@media (prefers-reduced-motion: no-preference) {
    .linkedin-brand-motif .brand-node {
        animation: linkedinBrandPulse 3.6s ease-in-out infinite;
    }

    .linkedin-brand-motif .node-b { animation-delay: .5s; }
    .linkedin-brand-motif .node-c { animation-delay: 1s; }
    .linkedin-brand-motif .node-d { animation-delay: 1.5s; }
    .linkedin-brand-motif .node-e { animation-delay: 2s; }

    @keyframes linkedinBrandPulse {
        0%, 100% {
            opacity: .55;
            transform: scale(.9);
        }
        50% {
            opacity: 1;
            transform: scale(1.16);
        }
    }
}

/* On mobile it becomes a faint banner-like background detail instead of
   competing with the profile content. */
@media (max-width: 700px) {
    .linkedin-brand-motif {
        width: 92%;
        height: 145px;
        right: -15%;
        top: 2px;
        opacity: .16;
    }

    .linkedin-brand-motif .brand-node {
        width: 5px;
        height: 5px;
    }
}


/* ===============================================================
   STUDIO V5.3.4 - BIDIRECTIONAL FLOW MOTION
   Moving connector packets now travel out and return naturally
   instead of snapping back to the starting side each loop.
   =============================================================== */

/* Backend/request flow */
.route-line i,
.request-route > i b,
.backend-blueprint > i,
.backend-core-strip > i {
    animation-direction: alternate !important;
}

/* Workshop / HR / infrastructure flow particles */
.workflow-track > i b,
.hr-flow i,
.infra-link i,
.infra-tunnel i::after,
.board-connector i,
.pipeline-wire i,
.network-tunnel i::after {
    animation-direction: alternate !important;
}

/* Architecture / parser / stack connector motion */
.pattern-flow i,
.parser-arrow,
.backend-stack-flow > i {
    animation-direction: alternate !important;
}

/* Generic packet-style moving indicators that may still be used
   elsewhere in the page. */
.request-packet,
.flow-packet,
.deploy-packet,
.event-packet {
    animation-direction: alternate !important;
}