:root{
    --bg: #0f172a;
    --card: rgba(255,255,255,0.04);
    --muted: #cbd5e1;
    --accent-a: #5eead4;
    --accent-b: #60a5fa;
    --glass: rgba(255,255,255,0.06);
    --glass-strong: rgba(255,255,255,0.09);
    --radius: 14px;
    --max-width: 1100px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{
    height:100%;
    margin:0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, var(--bg) 0%, #071028 100%);
    color: var(--muted);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    scroll-behavior:smooth;
}

a{color:inherit; text-decoration:none}
ul{margin:0;padding:0;list-style:none}

/* Layout container */
.data{
    /* Make the main wrapper stretch full page and stack content vertically */
    max-width: var(--max-width);
    margin: 0 auto;
    display: block;            /* no two-column grid anymore */
    width: 100%;
    padding: 0;                /* sections handle their own spacing */
    min-height: 100vh;        /* ensures the container spans the full viewport */
    background: transparent;   /* keep page background from root */
}

/* Sidebar / navigation */
.divHeader{
    position:sticky;
    top:1.25rem;
    align-self:start;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid var(--glass);
    border-radius: var(--radius);
    padding:1rem;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    height: fit-content;
}

nav.header { display:flex; flex-direction:column; gap:0.5rem; align-items:stretch; }
ul.header{ display:flex; flex-direction:column; gap:0.5rem; width:100%; }

.button{
    display:flex;
    align-items:center;
    gap:0.75rem;
    padding:0.9rem 1rem;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
    border: 1px solid rgba(255,255,255,0.03);
    color: var(--muted);
    font-weight:600;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    cursor:pointer;
}
.button svg{
    width:16px;
    height:16px;
    fill:var(--muted);
    opacity:0.95;
}
.button:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(49,130,206,0.12);
    background: linear-gradient(90deg, rgba(96,165,250,0.08), rgba(94,234,212,0.03));
    color: white;
}
.button.active{
    background: linear-gradient(90deg,var(--accent-a),var(--accent-b));
    color:#021028;
    box-shadow: 0 10px 30px rgba(30,64,175,0.18);
}

/* Main column */
.P1{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    min-height: calc(100vh - 4rem); /* leave room for header/footer padding */
    padding: 2rem 1rem;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: flex-start;
}

/* Hero card (left column content in original halfS) */
.halfS{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: 12px;
    padding:1.25rem;
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    align-items:center;
    text-align:center;
    border:1px solid var(--glass);
}
.title{
    font-weight:800;
    font-size:1.5rem;
    color: #e6eefc;
    margin:0;
}
.T1{ font-size:1rem; color:var(--muted); margin:0.25rem 0; }
.T2{ font-size:0.95rem; color: #cbd5e1; margin:0.25rem 0; line-height:1.45 }

/* Contact icons */
.contact ul{ display:flex; gap:0.5rem; margin-top:0.5rem; }
.contact a{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; background:var(--card); border:1px solid var(--glass); transition: transform .12s ease, background .12s;}
.contact a:hover{ transform: translateY(-3px); background: linear-gradient(90deg,var(--accent-b),var(--accent-a)); }
.contact svg{
    width:16px;
    height:16px;
    fill:white;
}

/* Sections (right column / content) */
.half{ display:flex; flex-direction:column; gap:1.25rem; }
section{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:12px;
    padding:1.25rem;
    border:1px solid var(--glass);
    box-shadow: 0 6px 20px rgba(2,6,23,0.45);
}

/* Section titles */
section > .title{ font-size:1.25rem; margin-bottom:0.45rem; color:#f8fafc }

/* Experience / project cards (T3) */
.T3{
    display:flex;
    gap:1rem;
    align-items:flex-start;
    padding:0.8rem;
    border-radius:10px;
    transition: transform .14s ease, box-shadow .14s ease;
    background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.005));
    border:1px solid rgba(255,255,255,0.02);
}
.T3:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(2,6,23,0.5);
}
.headerS{ min-width:120px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#e6eefc; text-align:center; }
.headerS img{ max-width:120px; border-radius:8px; display:block }
.headerS svg{
    width:56px;
    height:auto;
}

/* skill badges */
.BR{ display:inline-block; padding:6px 10px; margin:6px 6px 0 0; background:rgba(255,255,255,0.03); color:var(--muted); border-radius:10px; font-weight:600; font-size:0.85rem; border:1px solid rgba(255,255,255,0.02) }

/* Readable text blocks */
.T2, .T1 p{ color:var(--muted); }

/* Mouse circle — subtle */
#mouseCircle{
    position:fixed;
    pointer-events:none;
    width:28px;
    height:28px;
    border-radius:50%;
    border:2px solid rgba(96,165,250,0.9);
    transform:translate(-50%,-50%);
    mix-blend-mode:screen;
    transition: width .12s ease, height .12s ease, opacity .12s;
    opacity:0.9;
    z-index:9999;
}

/* Footer */
footer{
    text-align:center;
    color:#94a3b8;
    padding:2rem 0;
    margin-top:2rem;
}

/* ensure general SVGs stay responsive */
svg{
    display:inline-block;
    vertical-align:middle;
    max-width:100%;
    height:auto;
}

/* UI icons (nav buttons, contact icons, inline icons) */
.icon,
.button svg,
.contact svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    max-width: none !important;
}

/* employer / logo SVGs used inside links — slightly larger but constrained */
a.Lexp svg,
.Lexp svg,
.headerS svg {
    width: 28px !important;
    height: 28px !important;
    max-width: none !important;
    display:inline-block;
}

/* If some SVGs still come from third-party markup with inline width/height,
   this will ensure CSS sizing wins */
svg[width],
svg[height]{
    width: auto !important;
    height: auto !important;
}

/* Responsiveness */
@media (max-width: 1023px){
    .data{ grid-template-columns: 1fr; padding:1rem; margin:1rem; }
    .divHeader{ position:relative; top:0; width:100%; display:flex; margin-bottom:0.8rem; }
    nav.header{ flex-direction:row; justify-content:center; gap:0.6rem; flex-wrap:wrap; }
    ul.header{ flex-direction:row; gap:0.6rem; }
    .halfS{ flex-direction:row; align-items:center; justify-content:space-between; padding:0.8rem; }
    .headerS img{ max-width:76px }
    .T3{ flex-direction:column; align-items:flex-start }
    section{ padding:0.9rem; }
    #mouseCircle{ display:none } /* hide on small screens for performance */
}

/* Desktop tweaks */
@media (min-width: 1024px){
    body{ padding:1.5rem 0; }
    .data{ gap:2.5rem; }
}