/* =========================
   GLOBAL
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: #071B3A;
    color: #ffffff;
    line-height: 1.7;
}

/* =========================
   CONTAINERS
========================= */

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.section {
    padding: 90px 0;
}

.light {
    background: #f4f8fb;
    color: #071B3A;
}

h1,
h2,
h3 {
    font-family: 'Montserrat', sans-serif;
}

h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
}

/* =========================
   HERO
========================= */

.hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at top right,
        rgba(0,212,228,0.20),
        transparent 35%),
        linear-gradient(
        135deg,
        #071B3A 0%,
        #0d2c59 50%,
        #071B3A 100%);
}

.dna-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -150px;
    top: -100px;

    background: radial-gradient(
        circle,
        rgba(0,212,228,0.35),
        transparent 70%
    );

    filter: blur(80px);
}

.hero-container {
    width: 90%;
    max-width: 1400px;
    margin: auto;

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content:space-between;
    gap: 40px;
}

.hero-image img {
    width: 320px;
    height: 320px;

    border-radius: 50%;

    object-fit: cover;

    border: 6px solid #00D4E4;

    box-shadow:
    0 0 25px rgba(0,212,228,0.4),
    0 0 80px rgba(0,212,228,0.2);
}

.hero-content {

    max-width:700px;

    position:relative;

    z-index:10;

}

.hero-content h1 {
    font-size:5.2rem;
letter-spacing:-2px;
line-height:.95;
}

.hero-content h2{

font-size:1.45rem;

font-weight:500;

color:#8CE8F5;

line-height:1.5;

margin-bottom:20px;
white-space: nowrap;

}

.expertise-line{

font-size:1rem;

letter-spacing:.5px;

color:#d8e8f2;

margin-bottom:18px;

}

.former-company{

font-size:1.05rem;

font-weight:600;

color:#00D4E4;

margin-bottom:25px;

}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

.badges span {
    padding: 10px 18px;

    background: rgba(255,255,255,0.1);

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 30px;

    font-size: 0.9rem;
}

blockquote {
    font-size: 1.2rem;
    font-style: italic;

    margin-bottom: 35px;

    border-left: 4px solid #00D4E4;
    padding-left: 20px;
}

/* =========================
   BUTTONS
========================= */

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.btn {
    text-decoration: none;

    padding: 14px 24px;

    border-radius: 50px;

    transition: 0.3s;

    font-weight: 600;
}

.primary {
    background: #00D4E4;
    color: #071B3A;
}

.primary:hover {
    transform: translateY(-3px);
}

.secondary {
    border: 2px solid #00D4E4;
    color: white;
}

.secondary:hover {
    background: #00D4E4;
    color: #071B3A;
}

/* =========================
   CARDS
========================= */

.card-grid {
    display: grid;

    grid-template-columns:
    repeat(auto-fit, minmax(280px,1fr));

    gap: 25px;
}

.card {
    background: white;

    color: #071B3A;

    padding: 30px;

    border-radius: 18px;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.08);

    transition: 0.3s;
}

.card:hover {
    transform: translateY(-6px);
}

.card h3 {
    margin-bottom: 15px;
    color: #0d5d7d;
}

/* =========================
   TIMELINE
========================= */

.timeline {
    max-width: 900px;
    margin: auto;
}

.timeline-item {
    background: white;

    color: #071B3A;

    margin-bottom: 20px;

    padding: 25px;

    border-left: 5px solid #00D4E4;

    border-radius: 12px;
}

/* =========================
   ACADEMIC
========================= */

.academic-box {
    max-width: 800px;
    margin: auto;
}

.academic-box p {
    margin-bottom: 25px;
}

/* =========================
   PUBLICATIONS
========================= */

.publication-list {
    max-width: 800px;
    margin: auto;
}

.publication-list li {
    margin-bottom: 15px;
}

/* =========================
   CONTACT
========================= */

.contact-section {
    background: #041224;

    text-align: center;

    padding: 90px 0;
}

.contact-section h2 {
    margin-bottom: 40px;
}

.qr-code {
    width: 220px;
    margin-bottom: 30px;
}

.contact-section p {
    margin-bottom: 10px;
}

.contact-section a {
    color: #00D4E4;
    text-decoration: none;
    font-weight: 600;
}

/* =========================
   MOBILE
========================= */

@media(max-width: 900px) {

    .hero-container {
        flex-direction: column;
        text-align: center;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero-content h2 {
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image img {
        width: 250px;
        height: 250px;
    }

    .hero-content h1 {
        font-size: 2.4rem;
    }

}
/* =========================
NAVBAR
========================= */

.navbar{

position:fixed;
top:0;
left:0;
width:100%;

padding:20px 8%;

display:flex;
justify-content:space-between;
align-items:center;

z-index:1000;

background:rgba(7,27,58,.75);

backdrop-filter:blur(12px);

}

.logo{

font-size:1.2rem;
font-weight:800;
letter-spacing:2px;

color:#00D4E4;

}

.nav-links{

display:flex;
gap:30px;
list-style:none;

}

.nav-links a{

color:white;
text-decoration:none;
font-weight:600;

transition:.3s;

}

.nav-links a:hover{

color:#00D4E4;

}

/* =========================
DNA GRAPHIC
========================= */

.dna-hero{

position:absolute;

right:-180px;

top:-20px;

width:950px;

opacity:.28;

z-index:1;

pointer-events:none;

filter:
drop-shadow(0 0 50px rgba(0,212,228,.45));

animation:
dnaFloat 8s ease-in-out infinite;

}
/* =========================
PORTRAIT
========================= */

.portrait-bg{

position:relative;

}

.portrait-bg img{

width:300px;
height:420px;

object-fit:cover;

border:none;

border-radius:30px;

box-shadow:
0 0 60px rgba(0,212,228,.25);

}

/* =========================
HERO SPACING
========================= */

.hero{

padding-top:100px;

background:
radial-gradient(
circle at 20% 50%,
rgba(0,212,228,.18),
transparent 40%
),
linear-gradient(
135deg,
#04152D,
#072A52,
#04152D
);

position:relative;

overflow:hidden;

}

.hero-content h1{
font-size:4.8rem;
font-weight:800;
line-height:1;
margin-bottom:15px;
}


.hero-content{

position:relative;
z-index:10;

}

/* =========================
METRIC BAR
========================= */

.metric-bar{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:20px;

margin-top:60px;

}

.metric{

background:
rgba(255,255,255,.05);

padding:25px;

border-radius:20px;

backdrop-filter:blur(10px);

}

/* =========================
SECTION HEADINGS
========================= */

.section h2{

font-size:2.5rem;

margin-bottom:50px;

color:#00D4E4;

}

/* =========================
CARDS PREMIUM
========================= */

.card{

border:1px solid
rgba(0,212,228,.15);

}

.card:hover{

transform:
translateY(-10px);

box-shadow:
0 20px 40px rgba(0,212,228,.15);

}

/* =========================
MOBILE
========================= */

@media(max-width:1000px){

.dna-hero{

display:none;

}

.nav-links{

display:none;

}

.hero-content h1{

font-size:2.6rem;

}

.portrait-bg img{

width:260px;
height:340px;

}

}
/* =====================
EXECUTIVE IMPACT BAR
===================== */

.impact-bar{

max-width:1400px;
margin:auto;

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:20px;

padding:0 5% 80px;

}

.impact-item{

background:
rgba(255,255,255,.06);

backdrop-filter:
blur(12px);

border:1px solid
rgba(0,212,228,.15);

padding:25px;

border-radius:20px;

text-align:center;

transition:.3s;

}

.impact-item:hover{

transform:
translateY(-8px);

border-color:#00D4E4;

}

.impact-item h3{

color:#00D4E4;

font-size:1.8rem;

margin-bottom:10px;

}

.impact-item p{

font-size:.95rem;

color:white;

}

@media(max-width:1000px){

.impact-bar{

grid-template-columns:
1fr 1fr;

}

}
blockquote{

font-size:1.4rem;

font-weight:300;

color:white;

max-width:700px;

margin-top:30px;

margin-bottom:40px;

border-left:4px solid #00D4E4;

padding-left:25px;

}
/* =========================
ABOUT + EXPERTISE
========================= */

.about-expertise-section{

background:white;

padding:90px 8%;

}

.about-expertise-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

max-width:1400px;

margin:auto;

}

.about-column h2,
.expertise-column h2{

color:#009DB2;

font-size:2rem;

margin-bottom:35px;

}
.about-column{

border-right:1px solid #d8dde6;
padding-right:60px;

}

.expertise-column{

padding-left:60px;

}

.about-column p{

font-size:1.1rem;

line-height:1.9;

color:#24395C;

margin-bottom:25px;

}

.expertise-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

}

.expertise-item{

text-align:center;

}

.expertise-icon{

width:90px;
height:90px;

display:flex;
align-items:center;
justify-content:center;

margin:auto auto 20px;

font-size:2.8rem;

border:2px solid #d8dde6;
border-radius:50%;

background:white;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.expertise-item h3{

font-size:1rem;

color:#24395C;

line-height:1.4;

}

@media(max-width:1000px){

.about-expertise-container{

grid-template-columns:1fr;

}

.expertise-grid{

grid-template-columns:1fr 1fr;

}

}
.highlights{

padding:80px 8%;

background:white;

}

.highlights h2{

text-align:center;

font-size:2.5rem;

color:#24395C;

margin-bottom:60px;

}

.highlight-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

max-width:1400px;

margin:auto;

}

.highlight-card{

padding:35px;

background:white;

border-top:4px solid #00D4E4;

box-shadow:0 10px 30px rgba(0,0,0,.08);

border-radius:15px;

transition:.3s;

text-align:center;

}

.highlight-card:hover{

transform:translateY(-8px);

}

.highlight-card h3{

margin-bottom:15px;

color:#24395C;

}

.highlight-card h3{

font-size:1.2rem;

margin-bottom:15px;

color:#24395C;

}

.highlight-card p{

line-height:1.8;

color:#4a5568;

}

.highlight-card p{

line-height:1.7;

color:#4a5568;

}
/* =========================
PROFESSIONAL HIGHLIGHTS
========================= */

.highlights{

background:#ffffff;

padding:90px 8%;

}

.highlights h2{

color:#24395C;

font-size:2.4rem;

margin-bottom:60px;

}

.highlight-grid{

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

}

.highlight-card{

background:white;

padding:35px;

border-radius:18px;

border-top:5px solid #00D4E4;

box-shadow:
0 12px 30px rgba(0,0,0,.08);

transition:.3s;

}

.highlight-card:hover{

transform:
translateY(-10px);

}

.highlight-card h3{

color:#24395C;

margin-bottom:15px;

font-size:1.15rem;

}

.highlight-card p{

color:#4A5568;

line-height:1.8;

}

@media(max-width:1000px){

.highlight-grid{

grid-template-columns:1fr;

}

}
/* =========================
CAREER TIMELINE
========================= */

.career-section{

background:#f7fafc;

padding:90px 8%;

}

.career-section h2{

color:#24395C;

margin-bottom:60px;

}

.career-timeline{

max-width:1000px;

margin:auto;

border-left:4px solid #00D4E4;

padding-left:40px;

}

.career-item{

position:relative;

background:white;

padding:25px;

margin-bottom:30px;

border-radius:15px;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

}

.career-item::before{

content:"";

position:absolute;

left:-52px;
top:30px;

width:18px;
height:18px;

background:#00D4E4;

border-radius:50%;

}

.career-item h3{

color:#24395C;

margin-bottom:5px;

}

.career-item h4{

color:#00AFC4;

margin-bottom:12px;

font-weight:600;

}

.career-item p{

color:#4A5568;

}

.portrait-container{

position:relative;

}

.portrait-container img{

width:380px;

border-radius:0;

opacity:.95;

position:relative;

z-index:10;

filter:
drop-shadow(0 0 35px rgba(0,212,228,.25));

}
.portrait-container{

position:relative;

}

.portrait-container::after{

content:"";

position:absolute;

left:50%;
top:50%;

transform:
translate(-50%,-50%);

width:420px;
height:420px;

background:
radial-gradient(
circle,
rgba(0,212,228,.20),
transparent 70%
);

z-index:1;

}

@keyframes dnaFloat {

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}
.hero-portrait{

position:absolute;

right:180px;

top:120px;

width:520px;

z-index:6;

pointer-events:none;

filter:
drop-shadow(
0 0 35px rgba(0,212,228,.20)
);

}	
@media (max-width: 768px){

.hero{

padding-top:40px;
overflow:hidden;

}

.hero-container{

display:flex;
flex-direction:column;
text-align:center;

}

.hero-content{

max-width:100%;
padding:0 20px;

}

.hero-content h1{

font-size:3rem;
line-height:1.05;

}

.hero-content h2{

font-size:1.1rem;
white-space:normal;

}

.hero-portrait{

position:relative;

top:auto;
right:auto;

width:220px;

margin:20px auto;

display:block;

}

.hero-buttons{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;

}

.dna-hero{

opacity:.08;

width:500px;

right:-200px;

}

}