:root{
  --navy:#0B1F3A;
  --blue:#2563EB;
  --blue-soft:#E8F0FE;
  --bg:#FFFFFF;
  --bg-alt:#F5F8FC;
  --text:#2A3A52;
  --muted:#64748B;
  --line:#DCE5F1;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.7 "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{color:var(--navy);margin:0;line-height:1.15}
p{margin:0 0 14px}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* Navigation */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px max(22px,calc((100% - 1080px)/2));background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font-weight:800;font-size:1.15rem;color:var(--navy);text-decoration:none}
.links{display:flex;gap:6px}
.links a{padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--text);transition:background .2s,color .2s}
.links a:hover{background:var(--blue-soft);color:var(--blue)}
.links a.active{background:var(--blue-soft);color:var(--blue)}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:2px;margin:5px 0;background:var(--navy);border-radius:2px}

main{max-width:1080px;margin:0 auto;padding:0 22px}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;min-height:calc(100vh - 70px);padding:48px 0}
.hello{color:var(--blue);font-weight:600;margin-bottom:6px}
.hero h1{font-size:clamp(2.8rem,8vw,5rem);font-weight:800;letter-spacing:-.03em}
.hero h2{font-size:clamp(1.05rem,2.4vw,1.35rem);font-weight:600;color:var(--blue);margin:14px 0 18px}
.hero-text>p:not(.hello){max-width:52ch;font-size:1.08rem}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-block;padding:13px 24px;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid var(--blue);transition:transform .2s,background .2s,color .2s}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-2px)}
.btn.ghost{color:var(--blue);background:transparent}
.btn.ghost:hover{background:var(--blue-soft);transform:translateY(-2px)}

/* Hero illustration (decorative CSS chart, no real data) */
.hero-art{position:relative;padding:20px}
.chart-card{position:relative;background:var(--navy);border-radius:20px;padding:22px 24px 26px;aspect-ratio:4/3;box-shadow:0 24px 50px rgba(11,31,58,.22);color:#7FB0FF}
.dots{display:flex;gap:6px;margin-bottom:14px}
.dots i{width:10px;height:10px;border-radius:50%;background:#3A5078}
.bars{position:absolute;left:24px;right:24px;bottom:26px;top:56px;display:flex;align-items:flex-end;gap:12px}
.bars b{flex:1;height:var(--h);background:linear-gradient(180deg,#5B8DF5,#2563EB);border-radius:6px 6px 0 0;transform-origin:bottom;animation:grow .9s ease-out both}
.bars b:nth-child(2){animation-delay:.08s}.bars b:nth-child(3){animation-delay:.16s}.bars b:nth-child(4){animation-delay:.24s}.bars b:nth-child(5){animation-delay:.32s}.bars b:nth-child(6){animation-delay:.4s}
.line{position:absolute;left:24px;right:24px;top:62px;width:calc(100% - 48px);height:45%;color:#fff;opacity:.9}
.chip{position:absolute;background:#fff;color:var(--navy);font-weight:700;font-size:.9rem;padding:8px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(11,31,58,.18);border:1px solid var(--line)}
.c1{top:0;right:6%}.c2{bottom:2%;left:0}.c3{bottom:14%;right:-2%}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Sections */
.section{padding:84px 0 24px}
.title{font-size:clamp(1.9rem,4vw,2.5rem);font-weight:800;letter-spacing:-.02em;margin-bottom:28px}
.title::after{content:"";display:block;width:56px;height:5px;background:var(--blue);border-radius:3px;margin-top:12px}
.sub{font-size:1.25rem;margin:40px 0 16px}

.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:start}
.about-grid>p{font-size:1.1rem;max-width:58ch}
.edu{background:var(--bg-alt);border:1px solid var(--line);border-radius:16px;padding:24px}
.edu h3{font-size:1.1rem;margin-bottom:12px}
.deg{font-weight:800;color:var(--navy);margin-bottom:4px}
.muted{color:var(--muted);margin:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(37,99,235,.12);border-color:#B8CDF8}
.card svg,.contact svg{width:28px;height:28px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card svg{margin-bottom:14px}
.card h3{font-size:1.08rem;margin-bottom:6px}
.card p{margin:0;font-size:.95rem;color:var(--muted)}

.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pills li{background:var(--blue-soft);color:var(--navy);font-weight:600;padding:10px 20px;border-radius:999px}

.project{display:grid;grid-template-columns:.8fr 1.2fr;background:var(--bg-alt);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.proj-art{background:var(--navy);display:flex;align-items:flex-end;justify-content:center;padding:32px 28px;min-height:240px}
.mini{display:flex;align-items:flex-end;gap:10px;width:100%;height:150px}
.mini b{flex:1;height:var(--h);background:linear-gradient(180deg,#5B8DF5,#2563EB);border-radius:5px 5px 0 0}
.proj-body{padding:32px}
.proj-body h3{font-size:1.5rem;margin-bottom:12px}
.proj-body .btn{margin-top:8px}

.lead{max-width:52ch}
.contact-list{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.contact{display:flex;align-items:center;gap:14px;padding:16px 22px;background:var(--bg);border:1px solid var(--line);border-radius:14px;text-decoration:none;font-weight:600;color:var(--navy);transition:border-color .2s,box-shadow .2s}
.contact:hover{border-color:var(--blue);box-shadow:0 10px 24px rgba(37,99,235,.12)}
.contact span{overflow-wrap:anywhere}

footer{margin-top:90px;padding:28px 22px;text-align:center;color:var(--muted);font-size:.92rem;border-top:1px solid var(--line);background:var(--bg-alt)}

/* Scroll reveal (only active when JS adds .js) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.show{opacity:1;transform:none}

/* Tablet */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;gap:20px;padding:40px 0 24px}
  .hero-art{max-width:480px}
  .about-grid,.project{grid-template-columns:1fr}
  .proj-art{min-height:190px}
}

/* Mobile */
@media (max-width:700px){
  .menu-btn{display:block}
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px 22px 16px;background:#fff;border-bottom:1px solid var(--line);display:none}
  .links.open{display:flex}
  .links a{padding:12px 6px;border-radius:8px}
  .section{padding-top:64px}
  .btn{flex:1 1 100%;text-align:center}
  .proj-body{padding:24px}
  .contact{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}