/* A quiet editorial frame for the portfolio's opening screen. */
nav {
    height: 74px;
    padding: 0 max(5%, calc((100vw - 1320px) / 2));
    background: #0c1022 !important;
    border: 0;
    box-shadow: none;
    font-family: 'Segoe UI', Arial, sans-serif;
}
nav .logo {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.6px;
    text-transform: none;
    background: none;
    color: #fff;
    -webkit-text-fill-color: currentColor;
    white-space: nowrap;
}
.nav-links { gap: clamp(16px, 2.2vw, 34px); }
.nav-signin { color: #ececf4; font-size: 13px; text-decoration: none; padding: 8px 16px; border: 1px solid #4a4f6a; border-radius: 6px; white-space: nowrap; transition: border-color .2s, background .2s; }
.nav-signin:hover { border-color: #ae79df; background: #a64eed14; color: #fff; }
.nav-links a { color: #ececf4; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.visit-counter { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 14px; border: 1px solid #2f3550; border-radius: 999px; background: #0c1022b3; color: #aeb5c9; font-size: 13px; }
.visit-counter strong { color: #f0f1f7; font-weight: 600; }
.visit-pulse { width: 8px; height: 8px; border-radius: 50%; background: #1aa3b3; box-shadow: 0 0 0 0 #1aa3b366; animation: visit-pulse 2.4s ease-out infinite; }
@keyframes visit-pulse { to { box-shadow: 0 0 0 9px #1aa3b300; } }
@media (prefers-reduced-motion: reduce) { .visit-pulse { animation: none; } }
.hero {
    min-height: min(900px, 100svh);
    padding: 130px 6% 100px;
    background: #0b1028;
    font-family: 'Segoe UI', Arial, sans-serif;
    isolation: isolate;
}
.hero::before {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: radial-gradient(ellipse at 80% 40%, #30226b80, transparent 60%), linear-gradient(100deg, #0c1022 22%, #090f30 80%);
    animation: none;
    z-index: -3;
}
.hero::after { display: none; }
.hero-lights {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('server-grille.svg') repeat;
    background-size: 160px 160px;
    opacity: .35;
    mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(0deg, transparent, #000 25%, #000 80%, transparent);
    mask-composite: intersect;
}
.hero-lights::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #0c1022e8 12%, transparent 65%), radial-gradient(ellipse at 75% 30%, #8653db20, transparent 65%);
}
.hero-layout { width: 100%; max-width: 1260px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5%; }
.hero-content { align-items: flex-start; text-align: left; max-width: 560px; }
.hero .hero-badge { padding: 0; border: 0; box-shadow: none; background: none; color: #acb0c4; font-size: 10px; font-weight: 500; letter-spacing: 2px; margin: 0 0 25px; }
.hero h1 { font-family: 'Segoe UI', Arial, sans-serif; font-size: clamp(56px, 5.6vw, 88px); font-weight: 300; line-height: 1.04; letter-spacing: -3px; text-transform: none; margin: 0 0 26px; color: #f0f1f7; }
.hero h2 { font-family: inherit; font-size: clamp(22px, 2.1vw, 30px); font-weight: 600; line-height: 1.3; color: #af60ee; letter-spacing: -.5px; margin: 0 0 18px; }
.hero p { color: #bfc3d1; font-size: 15px; line-height: 1.65; letter-spacing: 0; max-width: 440px; margin: 0 0 30px; }
.hero .cta-buttons { justify-content: flex-start; gap: 14px; }
.hero .btn { padding: 14px 22px; border-radius: 5px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; }
.hero .btn-primary { background: #a64eed; color: #100b20; border: 1px solid #a64eed; }
.hero .btn-primary span { margin-left: 14px; }
.hero .btn-secondary { border: 1px solid #e0e1eb; color: #f2f3f9; background: transparent; }
.hero .btn:hover { transform: translateY(-2px); background: #c485f5; color: #100b20; }
.hero-portrait { position: relative; align-self: stretch; min-height: 540px; }
.hero-portrait img { position: absolute; width: 115%; height: 115%; left: -5%; bottom: -70px; object-fit: cover; object-position: center 20%; filter: saturate(.55); mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); border-radius: 45% 45% 0 0; }
.hero-edge { position: absolute; left: 0; bottom: -1px; width: 100%; height: 60px; z-index: 2; }
.stats-section { background: #0c1022; }
@media (max-width: 1000px) {
    nav { padding: 0 5%; }
    .nav-links { gap: 15px; }
    .hero { padding: 120px 6% 85px; }
    .hero-portrait { min-height: 480px; }
}
@media (max-width: 700px) {
    nav { height: 62px; }
    nav .logo { font-size: 18px; }
    .hero { min-height: auto; padding: 105px 7% 50px; }
    .hero-lights { inset: 0; background-size: 120px 120px; opacity: .28; }
    .hero-layout { grid-template-columns: 1fr; gap: 30px; }
    .hero h1 { font-size: 62px; }
    .hero h2 { font-size: 24px; }
    .hero .hero-badge { font-size: 9px; }
    .hero-portrait { min-height: 420px; width: 100%; max-width: 420px; justify-self: center; }
    .hero-portrait img { width: 100%; height: 100%; left: 0; bottom: -20px; }
    .hero-edge { height: 30px; }
}

/* The rest of the portfolio shares the opening screen's restrained palette. */
body { background: #0c1022; }
html { scroll-padding-top: 90px; }
.map-section, .about-section, .skills-section, .journey-section, .contact-section {
    padding: 100px max(6%, calc((100vw - 1260px) / 2));
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #0c1022;
    border-bottom: 1px solid #ffffff0d;
}
.section-kicker { display: block; color: #a899bd; font-size: 10px; font-weight: 600; letter-spacing: 2px; margin-bottom: 20px; }
.section-title { text-align: left; margin: 0 auto 36px; max-width: 1260px; }
.section-title h2, .about-section h2, .journey-section h2 { font-family: 'Segoe UI', Arial, sans-serif; font-size: clamp(30px, 3.3vw, 46px); font-weight: 300; line-height: 1.17; letter-spacing: -1.4px; text-transform: none; color: #f0f1f7; margin: 0 0 20px; }
.section-title p, .about-section p, .journey-section p { font-size: 15px; line-height: 1.8; color: #aeb5c9; max-width: 600px; }
.skills-section::before, .map-section::before, .contact-section::before { display: none; }
.map-container { position: relative; isolation: isolate; max-width: 1260px; border: 1px solid #30364d; border-radius: 12px; overflow: hidden; box-shadow: none; background: #101629; }
#projectMap { height: 430px; border: none; border-radius: 0; background: #131d2a; }
#projectMap .leaflet-layer { filter: grayscale(1) invert(1) hue-rotate(180deg) brightness(.7) contrast(.9); }
#projectMap .leaflet-control-zoom { border: 1px solid #525770; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px #0004; }
#projectMap .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; background: #14192c; color: #e6d9f5; border-bottom: 1px solid #34384f; transition: background .2s, color .2s; }
#projectMap .leaflet-control-zoom a:last-child { border-bottom: 0; }
#projectMap .leaflet-control-zoom a:hover { background: #302244; color: #fff; }
#projectMap .leaflet-control-zoom a:focus-visible { outline: 2px solid #d6a3ff; outline-offset: -3px; }
#projectMap .leaflet-control-zoom a.leaflet-disabled { background: #101426; color: #727d95; cursor: default; }
.map-legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 14px 22px; list-style: none; background: #101629; border-top: 1px solid #ffffff0b; }
.map-legend li { display: flex; align-items: center; gap: 10px; color: #c3c9d9; font-size: 12px; letter-spacing: .4px; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #000; flex-shrink: 0; }
.legend-onsite { background: #00f5ff; box-shadow: 0 0 8px #00f5ff; }
.legend-consulting { background: #ffb627; box-shadow: 0 0 8px #ffb627; }
.map-info { padding: 15px 22px; background: #101629; border-top: 1px solid #ffffff0b; }
.map-info p { color: #9da7bc; font-size: 11px; margin: 0; }
.about-section { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10%; align-items: center; }
.about-copy p { margin-bottom: 18px; }
.about-copy .about-lead { font-size: 20px; color: #d6d9e4; line-height: 1.6; }
.text-link { display: inline-block; margin-top: 10px; color: #bf8deb; text-decoration: none; font-size: 14px; }
.text-link:hover { color: #fff; }
.expertise-card { padding: 26px 20px; border: 1px solid #303449; border-radius: 12px; background: radial-gradient(ellipse at center, #40275e24, transparent 70%), #101426; min-width: 0; }
.card-heading { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 1.7px; color: #b1b6c9; padding: 0 8px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #9e7ccd; }
.radar-container { margin: 15px auto; }
.radar-chart-wrapper { width: 100%; max-width: 330px; height: 280px; }
.expertise-card p { text-align: center; font-size: 13px; color: #d7d9e3; margin: 0; }
.expertise-card p span { font-size: 11px; color: #8f98ad; }
.skills-section { background: #0e1326; }
.skills-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1260px; margin-top: 38px; }
.skill-card { padding: 28px; background: #14192c; border: 1px solid #2b3148; border-radius: 9px; box-shadow: none; }
.skill-card::before { display: none; }
.skill-card:hover { border-color: #80609f; box-shadow: none; transform: translateY(-3px); }
.skill-card h3 { font-family: inherit; font-size: 18px; font-weight: 500; color: #e6d9f5; margin-bottom: 13px; }
.skill-card p { font-size: 13px; color: #a4adc2; line-height: 1.8; }
.journey-section { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12%; align-items: center; background: radial-gradient(ellipse at 90% 50%, #41266338, transparent 60%), #0c1022; }
.journey-section p { margin-bottom: 28px; }
.journey-section .btn, .contact-section .btn { display: inline-block; background: #a64eed; box-shadow: none; color: #100b20; font-size: 14px; border-radius: 5px; text-transform: none; letter-spacing: 0; padding: 13px 22px; }
.rack-preview { display: grid; gap: 10px; max-width: 310px; width: 100%; justify-self: center; padding: 25px 20px 18px; border: 1px solid #4a405f; border-radius: 10px; background: #0a0e1b; text-decoration: none; transform: perspective(900px) rotateY(-12deg); transition: transform .3s; }
.rack-preview:hover { transform: perspective(900px) rotateY(0); }
.rack-unit { height: 39px; border: 1px solid #3a3c51; border-radius: 3px; background: radial-gradient(circle at 92% 50%, #ac84e7 0 2px, transparent 3px), repeating-linear-gradient(90deg, #1e2536 0 2px, #0c101c 2px 6px); background-size: 100% 100%, 80% 70%; background-repeat: no-repeat; background-position: center, 12px center; }
.rack-caption { font-size: 9px; color: #bca8d5; letter-spacing: 2px; text-align: center; padding-top: 12px; }
.contact-section { text-align: center; background: #111629; }
.contact-section .section-title { text-align: center; }
.contact-section .section-title p { margin: auto; }
@media (max-width: 850px) {
    .about-section { gap: 5%; grid-template-columns: 1fr 1fr; }
    .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .radar-chart-wrapper { height: 250px; }
}
@media (max-width: 600px) {
    .map-section, .about-section, .skills-section, .journey-section, .contact-section { padding: 65px 7%; }
    .about-section, .journey-section { grid-template-columns: 1fr; gap: 36px; }
    .expertise-card { width: 100%; max-width: 400px; justify-self: center; }
    .skills-grid { grid-template-columns: 1fr; }
    #projectMap { height: 320px; }
    .map-info p { font-size: 10px; }
}


/* Contact cards */
.contact-content { max-width: 920px; }
.contact-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; }
.contact-link { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #14192c; border: 1px solid #2f3550; border-radius: 10px; color: #e6e8f2; text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400; box-shadow: none; transition: border-color .2s, background .2s, transform .2s; }
.contact-link:hover { border-color: #ae79df; background: #a64eed0f; box-shadow: none; transform: translateY(-2px); }
.contact-link:focus-visible { outline: 2px solid #d6a3ff; outline-offset: 3px; }
.contact-link .icon { width: 22px; height: 22px; flex-shrink: 0; padding: 10px; box-sizing: content-box; border-radius: 9px; background: #a64eed1f; color: #d6b4f5; }
.contact-link span.cl-text { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.contact-link .cl-text strong { font-weight: 600; font-size: 15px; }
.contact-link .cl-text small { color: #8f98ad; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-link span.cl-arrow { margin-left: auto; font-size: 14px; color: #727d95; transition: color .2s, transform .2s; }
.contact-link:hover span.cl-arrow { color: #d6b4f5; transform: translate(2px, -2px); }

/* Footer */
.site-footer { padding: 64px max(6%, calc((100vw - 1260px) / 2)) 28px; background: #0a0d1c; border-top: 1px solid #23283d; color: #aeb5c9; font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; text-align: left; }
.site-footer p { color: inherit; font-size: inherit; letter-spacing: 0; margin: 0; }
.site-footer a { color: #c9cde0; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: #fff; }
.site-footer a:focus-visible { outline: 2px solid #d6a3ff; outline-offset: 3px; border-radius: 3px; }
.site-footer .icon { width: 16px; height: 16px; flex-shrink: 0; color: #a899bd; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #1d2236; }
.footer-logo { display: inline-block; font-size: 20px; font-weight: 600; letter-spacing: -.5px; color: #fff !important; margin-bottom: 14px; }
.footer-brand p { line-height: 1.7; max-width: 360px; }
.footer-brand .footer-tagline { margin-top: 16px; color: #727d95; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; }
.footer-col h3 { margin: 4px 0 16px; color: #f0f1f7; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-contact a, .footer-contact li > span { display: inline-flex; align-items: center; gap: 10px; }
.footer-col .visit-counter { margin-bottom: 16px; }
.footer-lang { margin-bottom: 16px; }
.back-to-top { display: inline-flex; align-items: center; gap: 8px; }
.back-to-top .icon { box-sizing: content-box; width: 15px; height: 15px; padding: 5px; border: 1px solid #2f3550; border-radius: 50%; }
.back-to-top:hover .icon { border-color: #ae79df; color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 24px; color: #8f98ad; }
.footer-legal { display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-top: 14px; color: #636c84; font-size: 11px; line-height: 1.6; }
.footer-legal .privacy-note { max-width: 720px; }
.footer-legal a { color: #9a8bb8; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } .contact-links { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } .site-footer { padding: 48px 7% 24px; } .footer-bottom, .footer-legal { flex-direction: column; } }