/* 
 * Duolio Portfolio Stylesheet
 * Modern CSS for the AI/ML portfolio site
 */

/* CSS Custom Properties (Variables) */
:root {
    --c-bg: #0A0A0A;
    --c-surface: #141414;
    --c-border: #262626;
    --c-text-high: #F5F5F5;
    --c-text-mid: #A3A3A3;
    --c-text-low: #737373;
    --c-primary-blue: #6a4291; /* Duolio secondary accent */
    --c-accent-dark: #040404; /* Duolio primary */
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --nav-height: 64px; /* sticky header height */
}

/* Light Mode Theme */
.light-mode {
    --c-bg: #FFFFFF;
    --c-surface: #F9FAFB;
    --c-border: #E2E8F0;
    --c-text-high: #111827;
    --c-text-mid: #4A5568;
    --c-text-low: #718096;
}

/* Theme-Based Logo Display */
.logo-light,
.logo-dark {
    display: none;
}

/* When body has light-mode class */
body.light-mode .logo-light {
    display: inline;
}

body.light-mode .logo-dark {
    display: none;
}

/* When body does not have light-mode class */
body:not(.light-mode) .logo-dark {
    display: inline;
}

body:not(.light-mode) .logo-light {
    display: none;
}

/* Base Styles */
body {
    font-family: var(--font-sans);
    background-color: #040404;
    color: var(--c-text-mid);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light mode body override (previous body rule hard-coded dark) */
body.light-mode {
    background-color: var(--c-bg);
    color: var(--c-text-mid);
}

/* Background Patterns */
.background-layer {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    opacity: 0; 
    z-index: -1;
    transition: opacity 0.3s ease;
}

body.bg-dots .background-layer {
    background-image: radial-gradient(var(--c-border) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3;
}

body.bg-grid .background-layer {
    background-image: linear-gradient(var(--c-border) 1px, transparent 1px), 
                      linear-gradient(to right, var(--c-border) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.2;
}

/* Section containers (always visible now; 'active' retains animation only) */
.page { 
    display: block; 
}

.page.active { 
    animation: fadeIn 0.5s ease-in-out; 
}

@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

/* Utility Classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Navigation Links */
.nav-link { 
    font-weight: 500; 
}

.nav-link.active { 
    color: var(--c-primary-blue) !important; 
    font-weight: 700; 
    position:relative;
}
.nav-link.active:after {content:""; position:absolute; left:50%; top:100%; width:54%; height:3px; background:linear-gradient(90deg,var(--c-primary-blue),#814fb8); border-radius:4px; transform:translateX(-50%) translateY(4px); box-shadow:0 0 10px -2px rgba(129,79,184,.75),0 0 18px -4px rgba(129,79,184,.55);} 

/* Button Components */
.btn {
    font-family: var(--font-sans); 
    font-size: 1rem; 
    font-weight: 600; 
    border-radius: 8px;
    cursor: pointer; 
    transition: all 0.2s ease; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
}

.btn-primary { 
    color: #fff; 
    background: linear-gradient(135deg,#6a4291,#8b5fc0); 
    border: 1px solid #6a4291; 
}

.btn-primary:hover { 
    filter: brightness(1.15); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0, 133, 255, 0.2); 
}

/* Card Components */
.card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 1rem;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

.card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.55); 
}

/* Form Elements */
.form-input {
    background-color: var(--c-surface); 
    border: 1px solid var(--c-border); 
    border-radius: 8px; 
    padding: 12px 16px; 
    width: 100%;
    transition: border-color 0.2s ease; 
    color: var(--c-text-high);
}

.form-input:focus { 
    outline: none; 
    border-color: var(--c-primary-blue); 
}

/* Mobile Menu Animation */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hamburger to X animation */
.hamburger-top, 
.hamburger-middle, 
.hamburger-bottom { 
    transition: all 0.3s; 
}

.hamburger.open .hamburger-top { 
    transform: rotate(45deg) translateY(6px) translateX(6px); 
}

.hamburger.open .hamburger-middle { 
    opacity: 0; 
}

.hamburger.open .hamburger-bottom { 
    transform: rotate(-45deg) translateY(-6px) translateX(6px); 
}

/* Theme-aware Text Elements */
.themed-screenshot-text {
    color: var(--c-text-high);
}

/* Log Display Components */
.log-line {
    color: var(--c-text-high);
}

.log-line.warn { 
    color: #FBBF24; 
}

.log-line.error { 
    color: #F87171; 
}

/* Modal Styles */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* Duolio Project Cards */
.project-card {
    position: relative;
    background: linear-gradient(145deg,var(--c-surface),#101010 70%);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    padding: 1.5rem 1.4rem 1.7rem;
    cursor: pointer;
    transition: border-color .25s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
    overflow: hidden;
    text-align: left;
}
.project-card:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%,rgba(106,66,145,.35),transparent 70%);
    opacity: 0;
    transition: opacity .5s;
}
.project-card .inner { position: relative; z-index: 2; }
.project-card .title { font-size: 1.1rem; font-weight:600; color: var(--c-text-high); margin-bottom:.35rem; }
.project-card .subtitle { font-size:.8rem; line-height:1.25rem; color: var(--c-text-mid); margin-bottom:1rem; }
.project-card .more { font-size:.75rem; letter-spacing:.05em; font-weight:500; color: var(--c-primary-blue); opacity:.85; }
.project-card:hover { border-color: var(--c-primary-blue); transform: translateY(-6px); box-shadow:0 14px 32px -10px rgba(106,66,145,.4); }
.project-card:hover:before { opacity:1; }

/* Service cards (revamped) */
.service-grid {position:relative;}
.service-card {background:linear-gradient(155deg,var(--c-surface),#0d0d0d 68%); border:1px solid var(--c-border); padding:1.5rem 1.35rem 1.6rem; border-radius:22px; position:relative; overflow:hidden; transition:border-color .4s, transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .6s; isolation:isolate;}
.service-card:before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 26% 18%,rgba(106,66,145,.35),transparent 60%); opacity:0; transition:opacity .65s; z-index:0;}
.service-card:after {content:""; position:absolute; inset:-1px; padding:1px; border-radius:inherit; background:linear-gradient(140deg,rgba(106,66,145,.55),rgba(106,66,145,.08) 45%,rgba(106,66,145,0) 65%); 
    /* Gradient border effect using masking (provide both standard + webkit) */
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    /* Composite so only border area shows gradient */
    -webkit-mask-composite:xor; /* Safari / WebKit */
    mask-composite:exclude; /* Standard */
    opacity:0; transition:opacity .6s;}
.service-card .svc-icon {width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.45rem; background:linear-gradient(135deg,rgba(106,66,145,.32),rgba(106,66,145,.12)); border:1px solid var(--c-border); margin:0 0 1rem; position:relative; z-index:2; box-shadow:0 4px 10px -4px rgba(0,0,0,.5);}
.service-card h3 {font-size:1.02rem; font-weight:600; color:var(--c-text-high); margin:0 0 .55rem; letter-spacing:-.01em; position:relative; z-index:2;}
.service-card p {font-size:.78rem; line-height:1.25rem; margin:0 0 .95rem; position:relative; z-index:2;}
.service-card .svc-tags {list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; position:relative; z-index:2;}
.service-card .svc-tags li {font-size:.55rem; letter-spacing:.08em; font-weight:600; text-transform:uppercase; background:rgba(106,66,145,.18); color:var(--c-text-high); padding:.3rem .55rem .28rem; border:1px solid rgba(106,66,145,.35); border-radius:999px; line-height:1; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.service-card:hover {border-color:var(--c-primary-blue); transform:translateY(-8px); box-shadow:0 22px 48px -18px rgba(106,66,145,.55), 0 4px 14px -4px rgba(0,0,0,.6);} 
.service-card:hover:before {opacity:.9;} 
.service-card:hover:after {opacity:1;} 
.service-card:hover .svc-icon {box-shadow:0 6px 18px -6px rgba(106,66,145,.6);} 
body.light-mode .service-card {background:linear-gradient(155deg,#ffffff,#f2f4f7 68%);} 
body.light-mode .service-card:before {background:radial-gradient(circle at 26% 18%,rgba(106,66,145,.18),transparent 60%);} 
body.light-mode .service-card .svc-tags li {background:rgba(106,66,145,.12); color:#1a1a1a; border-color:rgba(106,66,145,.35);} 

/* Service reveal animation */
.svc-reveal {opacity:0; transform:translateY(28px) scale(.96); animation:svcFade .9s forwards; animation-delay:calc(var(--svc-delay) * 1ms);} 
@keyframes svcFade {0%{opacity:0; transform:translateY(28px) scale(.96);} 55%{opacity:1;} 100%{opacity:1; transform:translateY(0) scale(1);} }

/* Subtle hover pointer light following cursor (optional) */
.service-grid.hover-light .service-card {--mx:50%; --my:50%;}
.service-grid.hover-light .service-card .pointer-light {position:absolute; inset:0; background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.15),rgba(255,255,255,0) 55%); opacity:0; mix-blend-mode:overlay; transition:opacity .5s; pointer-events:none;}
.service-grid.hover-light .service-card:hover .pointer-light {opacity:1;}

/* Project Modal */
#project-modal-root { backdrop-filter: blur(10px); }
#project-modal-root .modal-backdrop { background: rgba(0,0,0,.55); }
#project-modal-root .modal-panel { background: linear-gradient(180deg,#111 0%,#0b0b0b 100%); border:1px solid var(--c-border); box-shadow:0 30px 60px -15px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset; }
#project-modal-root .modal-body { font-size:.95rem; line-height:1.55rem; }
#project-modal-root h2 { font-size:1.9rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.35rem; color:var(--c-text-high); }
#project-modal-root .tagline { font-style:italic; color:var(--c-primary-blue); margin-bottom:1.2rem; }
#project-modal-root h3 { margin-top:1.6rem; font-size:1.05rem; font-weight:600; letter-spacing:.02em; color:var(--c-text-high); }
#project-modal-root ul { margin:.6rem 0 0 1.1rem; list-style:disc; }
#project-modal-root li { margin:.25rem 0; }

/* Scrollbar subtle styling */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0d0d0d; }
::-webkit-scrollbar-thumb { background: #242424; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #303030; }

/* Contact form tweaks */
form select.form-input { color: var(--c-text-mid); }
form select.form-input option { background:#0d0d0d; }

/* --- Light Mode Component Overrides --- */
body.light-mode .project-card {
    background: linear-gradient(145deg,#ffffff,#f2f4f7 70%);
    box-shadow: 0 4px 14px -4px rgba(0,0,0,0.12);
}
body.light-mode .project-card:before { background: radial-gradient(circle at 30% 20%,rgba(106,66,145,.15),transparent 70%); }
body.light-mode .project-card:hover { box-shadow:0 10px 28px -8px rgba(0,0,0,.18); }

body.light-mode .service-card { background:#ffffff; box-shadow:0 2px 8px -3px rgba(0,0,0,0.08); }
body.light-mode .service-card:after { background:linear-gradient(135deg,rgba(106,66,145,.10),transparent 55%); }
body.light-mode .service-card:hover { box-shadow:0 8px 22px -6px rgba(0,0,0,0.18); }

body.light-mode #project-modal-root .modal-panel {
    background: linear-gradient(180deg,#ffffff 0%,#f5f7fa 100%);
    box-shadow:0 24px 48px -16px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.04) inset;
}
body.light-mode #project-modal-root .modal-backdrop { background: rgba(0,0,0,.35); }

body.light-mode .form-input { background:#ffffff; border-color:#d0d7e2; color: var(--c-text-high); }
body.light-mode .form-input:focus { border-color:#6a4291; box-shadow:0 0 0 3px rgba(106,66,145,.25); }
body.light-mode form select.form-input option { background:#ffffff; color:#111827; }

body.light-mode .btn-primary { border-color:#6a4291; }
body.light-mode .btn-primary:hover { box-shadow:0 6px 18px -6px rgba(106,66,145,.45); }

/* Scrollbar (light) */
body.light-mode ::-webkit-scrollbar-track { background:#f0f2f5; }
body.light-mode ::-webkit-scrollbar-thumb { background:#cdd3dd; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background:#b9c1cc; }

/* Modal content generic overrides */
body.light-mode .modal-content { background:#ffffff; border-color:#e2e8f0; color:#1a1f29; }
body.light-mode .modal-content p { color:#475569; }
body.light-mode .modal-btn-secondary { background:#e2e8f0; color:#1a1f29; }
body.light-mode .modal-btn-secondary:hover { background:#cbd5e1; }

/* Fade / scale transitions for modal */
.duo-fade-in { animation: duoFade .55s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes duoFade { 0% { opacity:0; transform:translateY(22px) scale(.96);} 100% {opacity:1; transform:translateY(0) scale(1);} }

.modal-content {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-high);
}

.modal-content p {
    color: var(--c-text-mid);
}

.modal-btn-secondary {
    background-color: var(--c-border);
    color: var(--c-text-high);
}

.modal-btn-secondary:hover {
    background-color: var(--c-text-low);
}

/* Application Process Styles */
#application-process {
    position: relative;
}

#application-process .process-list {
    list-style: none;
    counter-reset: step;
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    #application-process .process-list {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 2rem 2.5rem;
    }
}

#application-process .application-step {
    position: relative;
    background: linear-gradient(145deg, var(--c-surface), rgba(255,255,255,0.02));
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    transition: border-color .25s, transform .25s, background .4s;
    cursor: pointer;
    overflow: hidden;
}

#application-process .application-step::before {
    content: attr(data-step-order);
    position: absolute;
    top: -14px;
    right: -8px;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--c-border);
    opacity: 0.15;
    pointer-events: none;
    transition: opacity .3s, transform .4s;
}

#application-process .application-step:hover {
    border-color: var(--c-primary-blue);
    transform: translateY(-4px);
}

#application-process .application-step:hover::before {
    opacity: 0.25;
    transform: translate(-4px, -4px) scale(1.04);
}

#application-process .application-step h4 {
    margin: 0 0 .35rem;
}

#application-process .application-step p {
    margin: 0;
}

/* Step active / viewed state */
#application-process .application-step.is-visible {
    border-color: var(--c-primary-blue);
    box-shadow: 0 0 0 1px var(--c-primary-blue) inset, 0 6px 18px -6px rgba(0,133,255,0.25);
}

#application-process .application-step.is-visible::before {
    opacity: 0.35;
}

/* Progress bar */
.process-progress-wrapper { padding: 0 1.25rem; }
.process-progress-bg { height: 6px; background: linear-gradient(90deg, var(--c-border), var(--c-border)); border-radius: 4px; overflow: hidden; position: relative; }
.process-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--c-primary-blue), #4CA9FF); transition: width .6s cubic-bezier(.4,.8,.4,1); }

/* Animate items in */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

#application-process .application-step[data-animated="true"] { animation: fadeSlideIn .7s ease forwards; }

/* --- New Sections (Solutions / Results / Pricing / CTA) --- */
.solution-card {background:var(--c-surface); border:1px solid var(--c-border); padding:1.4rem 1.25rem 1.55rem; border-radius:18px; position:relative; overflow:hidden; transition:.35s;}
.solution-card .icon-circle {width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(106,66,145,.15); border:1px solid var(--c-border); border-radius:12px; font-size:1.1rem; margin-bottom:.85rem;}
.solution-card:after {content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(106,66,145,.18),transparent 55%); opacity:0; transition:.5s;}
.solution-card h3 {font-size:1rem; font-weight:600; color:var(--c-text-high); margin-bottom:.55rem;}
.solution-card p {font-size:.8rem; line-height:1.25rem;}
.solution-card:hover {border-color:var(--c-primary-blue); transform:translateY(-5px); box-shadow:0 10px 28px -8px rgba(106,66,145,.35);}
.solution-card:hover:after {opacity:1;}

/* KPI Tiles */
.kpi-tile {background:var(--c-surface); border:1px solid var(--c-border); border-radius:18px; padding:1.6rem 1.4rem 1.5rem; position:relative; overflow:hidden; text-align:left; display:flex; flex-direction:column; gap:.4rem;}
.kpi-tile .icon-small {width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(106,66,145,.15); border:1px solid var(--c-border); border-radius:10px; font-size:.95rem; margin-bottom:.4rem;}
.kpi-value {font-size:2.2rem; font-weight:700; letter-spacing:-.02em; color:var(--c-text-high); display:inline-block; min-width:2ch;}
.kpi-suffix {font-size:1.2rem; font-weight:600; margin-left:.15rem; color:var(--c-primary-blue);}
.kpi-label {font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; font-weight:500; color:var(--c-text-mid);}

/* Pricing */
.pricing-tier {background:linear-gradient(145deg,var(--c-surface),#101010 70%); border:2px solid var(--c-border); border-radius:26px; padding:1.8rem 1.55rem 2rem; position:relative; display:flex; flex-direction:column; transition:.45s;}
.pricing-tier .badge {position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--c-primary-blue); color:#fff; font-size:.62rem; letter-spacing:.12em; padding:.45rem .9rem; border-radius:999px; font-weight:600; text-transform:uppercase; box-shadow:0 4px 10px -2px rgba(0,0,0,.4);} 
.pricing-tier .tier-head h3 {font-size:1.05rem; font-weight:600; color:var(--c-text-high); margin:0 0 .35rem;}
.pricing-tier .tier-tagline {font-size:.75rem; color:var(--c-text-mid); margin:0 0 .9rem;}
.pricing-tier .tier-price {display:flex; align-items:flex-end; gap:.35rem; margin-bottom:1.1rem;}
.pricing-tier .tier-price .amount {font-size:2rem; font-weight:700; letter-spacing:-.02em; color:var(--c-text-high);}
.pricing-tier .tier-price .period {font-size:.75rem; font-weight:600; color:var(--c-text-mid); margin-bottom:.4rem;}
.pricing-tier .tier-pricing {display:flex; flex-direction:column; gap:.75rem; margin:.35rem 0 1rem;}
.pricing-tier .tier-pricing .setup-fee {display:flex; align-items:baseline; gap:.45rem;}
.pricing-tier .tier-pricing .setup-fee .amount {font-size:1.1rem; font-weight:600; color:var(--c-text-high); letter-spacing:-.01em;}
.pricing-tier .tier-pricing .setup-fee .label {font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; color:var(--c-text-low); font-weight:600;}
.pricing-tier .tier-pricing .monthly-fee {display:flex; align-items:flex-end; gap:.35rem;}
.pricing-tier .tier-pricing .monthly-fee .amount {font-size:1.9rem; font-weight:700; letter-spacing:-.02em; color:var(--c-text-high);}
.pricing-tier .tier-pricing .monthly-fee .period {font-size:.75rem; font-weight:600; color:var(--c-text-mid); margin-bottom:.4rem;}
.pricing-tier .tier-pricing .amount {line-height:1;}
.pricing-tier .tier-features {list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.75rem;}
.pricing-tier .tier-features li {position:relative; padding-left:1.1rem; color:var(--c-text-mid);} 
.pricing-tier .tier-features li:before {content:'✔'; position:absolute; left:0; top:0; font-size:.7rem; color:var(--c-primary-blue);} 
.pricing-tier.highlighted {border-color:var(--c-primary-blue); box-shadow:0 18px 46px -14px rgba(106,66,145,.55);}
.pricing-tier:hover {transform:translateY(-6px); box-shadow:0 14px 34px -12px rgba(0,0,0,.55);} 
/* Ensure pricing feature area grows so buttons align at bottom for balanced card height */
.pricing-tier .tier-features {flex-grow:1;}
/* Override top margin so buttons sit flush at bottom while keeping spacing if content short */
.pricing-tier > .btn {margin-top:auto !important;}

/* Light mode overrides */
body.light-mode .solution-card {background:#ffffff;}
body.light-mode .kpi-tile {background:#ffffff;}
body.light-mode .pricing-tier {background:linear-gradient(145deg,#ffffff,#f2f4f7 70%); box-shadow:0 4px 14px -4px rgba(0,0,0,.12);} 
body.light-mode .pricing-tier.highlighted {box-shadow:0 12px 30px -10px rgba(106,66,145,.35);} 

/* KPI count animation (will be set via JS) */
.kpi-animated {transition:color .4s;}

/* Contact Section Shell */
.contact-shell {position:relative; padding:2rem 2rem 2.1rem; border:1px solid var(--c-border); border-radius:26px; background:linear-gradient(160deg,var(--c-surface),#0d0d0d 65%); box-shadow:0 18px 42px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset; overflow:hidden;}
.contact-shell:before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 22%,rgba(106,66,145,.25),transparent 60%); opacity:.4; pointer-events:none;}
.contact-shell form {position:relative; z-index:2;}
.contact-shell:hover {border-color:var(--c-primary-blue);} 
body.light-mode .contact-shell {background:linear-gradient(160deg,#ffffff,#f3f5f9 65%); box-shadow:0 10px 28px -12px rgba(0,0,0,.18);} 
body.light-mode .contact-shell:before {background:radial-gradient(circle at 18% 22%,rgba(106,66,145,.18),transparent 60%);} 

/* Floating Mail Button */
.floating-mail {position:fixed; bottom:22px; right:22px; z-index:70;}
.floating-mail-btn {display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:linear-gradient(#ffffff,#ffffff) padding-box, conic-gradient(from 140deg,#EA4335,#FBBC05,#34A853,#4285F4,#EA4335) border-box; color:#444; border:2px solid transparent; box-shadow:0 10px 24px -10px rgba(0,0,0,.55),0 2px 0 0 rgba(255,255,255,.05) inset; transition:.45s; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.gmail-btn {position:relative;}
.gmail-btn:before {content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(140deg,rgba(234,67,53,.18),rgba(251,188,5,.18),rgba(52,168,83,.18),rgba(66,133,244,.18)); opacity:0; transition:.55s; mix-blend-mode:normal;}
.gmail-btn:hover:before {opacity:1;}
.floating-mail-btn:hover {transform:translateY(-6px) scale(1.08); box-shadow:0 18px 40px -16px rgba(0,0,0,.68);} 
.floating-mail-btn:active {transform:translateY(-2px) scale(.95);} 
.floating-mail-btn:focus-visible {outline:2px solid #4285F4; outline-offset:3px;}
body.light-mode .floating-mail-btn {background:linear-gradient(#ffffff,#ffffff) padding-box, conic-gradient(from 140deg,#EA4335,#FBBC05,#34A853,#4285F4,#EA4335) border-box; box-shadow:0 8px 20px -10px rgba(0,0,0,.2);} 
.gmail-icon {display:block;}

/* Hover label chip */
.gmail-btn .label-chip {position:absolute; right:60px; background:rgba(20,20,20,.9); color:#fff; font-size:.65rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.45rem .6rem .4rem; border-radius:10px; line-height:1; display:inline-flex; align-items:center; gap:.35rem; box-shadow:0 6px 18px -8px rgba(0,0,0,.6); opacity:0; transform:translateY(4px) scale(.95); transition:.4s; white-space:nowrap; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);} 
.gmail-btn:hover .label-chip {opacity:1; transform:translateY(0) scale(1);} 
body.light-mode .gmail-btn .label-chip {background:rgba(255,255,255,.85); color:#222; box-shadow:0 6px 14px -8px rgba(0,0,0,.25);} 

/* Pulse animation */
@keyframes gmailPulse {0%{transform:scale(1); opacity:.55;}65%{transform:scale(1.7); opacity:0;}100%{opacity:0;}}
.gmail-btn.pulse-anim:after {content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 50%,rgba(234,67,53,.35),rgba(234,67,53,0) 60%); animation:gmailPulse 3.2s ease-out infinite;}
.gmail-btn.pulse-anim:hover:after {animation-play-state:paused; opacity:0;} 
body.light-mode .gmail-btn.pulse-anim:after {background:radial-gradient(circle at 50% 50%,rgba(234,67,53,.28),rgba(234,67,53,0) 60%);} 
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* Anchor scroll offset so headings are not hidden behind sticky nav */
section[id], div[id] { scroll-margin-top: calc(var(--nav-height) + 22px); }

/* Success Dialog */
.success-overlay {background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .4s ease;}
.success-overlay.show {opacity:1;}
.success-modal {width:100%; max-width:420px; background:linear-gradient(165deg,#111,#0a0a0a 60%); border:1px solid var(--c-border); border-radius:26px; padding:2.1rem 2rem 2rem; position:relative; box-shadow:0 24px 64px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset; transform:translateY(18px) scale(.96); animation:successIn .65s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes successIn {0%{opacity:0; transform:translateY(26px) scale(.92);} 55%{opacity:1; transform:translateY(-4px) scale(1.02);} 100%{opacity:1; transform:translateY(0) scale(1);} }
.success-modal .icon-wrap {width:66px; height:66px; border-radius:18px; background:linear-gradient(135deg,rgba(106,66,145,.38),rgba(106,66,145,.12)); display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; color:var(--c-primary-blue); box-shadow:0 6px 18px -6px rgba(106,66,145,.55); position:relative;}
.success-modal .icon-wrap:after {content:""; position:absolute; inset:-4px; border-radius:inherit; background:radial-gradient(circle at 50% 50%,rgba(106,66,145,.55),rgba(106,66,145,0) 70%); opacity:.55; filter:blur(12px); pointer-events:none;}
.success-modal h3.title {margin:0 0 .6rem; font-size:1.4rem; font-weight:700; letter-spacing:-.02em; color:var(--c-text-high); text-align:center;}
.success-modal p.msg {margin:0 0 1.4rem; font-size:.9rem; line-height:1.4rem; color:var(--c-text-mid); text-align:center;}
.success-modal p.msg .highlight {color:var(--c-text-high); font-weight:600;}
.success-modal .actions {display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;}
.success-modal .btn-close, .success-modal .btn-secondary {font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:.75rem 1.1rem .7rem; border-radius:14px; border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-text-high); cursor:pointer; transition:.35s;}
.success-modal .btn-secondary {background:linear-gradient(135deg,#6a4291,#8b5fc0); border-color:#6a4291; color:#fff;}
.success-modal .btn-close:hover {border-color:var(--c-primary-blue);}
.success-modal .btn-secondary:hover {filter:brightness(1.12); box-shadow:0 8px 22px -10px rgba(106,66,145,.6);} 
body.light-mode .success-modal {background:linear-gradient(165deg,#ffffff,#f2f4f7 60%);} 
body.light-mode .success-modal .icon-wrap {background:linear-gradient(135deg,rgba(106,66,145,.25),rgba(106,66,145,.08));}
body.light-mode .success-modal p.msg {color:var(--c-text-mid);} 

/* Header Neon Glow */
#header {position:sticky; top:0;}
#header.neon-enabled:after, #header:after {content:""; position:absolute; left:0; right:0; top:100%; height:95px; pointer-events:none; background:
    radial-gradient(ellipse at 50% 0%, rgba(122,70,190,.55) 0%, rgba(122,70,190,.30) 28%, rgba(122,70,190,.10) 52%, rgba(0,0,0,0) 72%);
filter:blur(18px); opacity:.9; transform:translateY(-14px); mix-blend-mode:screen;}
body.light-mode #header:after {background:radial-gradient(ellipse at 50% 0%, rgba(122,70,190,.38) 0%, rgba(122,70,190,.20) 30%, rgba(122,70,190,.08) 52%, rgba(255,255,255,0) 76%); filter:blur(22px); opacity:.82; mix-blend-mode:normal;}
@media (prefers-reduced-motion: no-preference) {
    @keyframes navGlowPulse {0%{opacity:.92; filter:blur(20px);} 50%{opacity:.82; filter:blur(24px);} 100%{opacity:.92; filter:blur(20px);} }
    #header:after {animation:navGlowPulse 7s ease-in-out infinite;}
}

/* Section Background Variants */
.section-variant {position:relative;}
.section-variant:before {content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; mix-blend-mode:normal; transition:opacity .6s;}
.section-tone-a:before {background:linear-gradient(135deg,rgba(106,66,145,.16),rgba(106,66,145,0) 70%);} 
.section-tone-b:before {background:linear-gradient(160deg,rgba(60,60,60,.55),rgba(0,0,0,0) 65%);} 
.section-tone-c:before {background:radial-gradient(circle at 78% 18%,rgba(106,66,145,.22),transparent 65%);} 
.section-tone-d:before {background:linear-gradient(180deg,rgba(106,66,145,.14) 0%,rgba(0,0,0,0) 75%);} 
.section-tone-e:before {background:linear-gradient(110deg,rgba(255,255,255,.05) 0%,rgba(0,0,0,0) 70%);} 
.section-tone-f:before {background:radial-gradient(circle at 24% 75%,rgba(106,66,145,.20),transparent 60%);} 
.section-variant > * {position:relative; z-index:2;}
/* Light mode adjustments */
body.light-mode .section-tone-b:before {background:linear-gradient(160deg,rgba(0,0,0,.04),rgba(255,255,255,0) 65%);} 
body.light-mode .section-tone-c:before {background:radial-gradient(circle at 78% 18%,rgba(106,66,145,.18),transparent 65%);} 
body.light-mode .section-tone-d:before {background:linear-gradient(180deg,rgba(106,66,145,.12) 0%,rgba(255,255,255,0) 75%);} 
body.light-mode .section-tone-e:before {background:linear-gradient(110deg,rgba(106,66,145,.10) 0%,rgba(255,255,255,0) 70%);} 
body.light-mode .section-tone-f:before {background:radial-gradient(circle at 24% 75%,rgba(106,66,145,.16),transparent 60%);}