/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#040406;
  --muted:#bfc8d0;
  --white:#ffffff;
  --accent:#00d1c1;
  --blue1:#0739ff;
  --blue2:#00e0ff;
  --gap:28px;
  --max:1280px;
  --header-h:72px;
}
body{
  font-family: 'Inter', system-ui, Roboto, "Helvetica Neue", Arial;
  background:var(--black);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.topbar{height:var(--header-h);display:flex;align-items:center;background:#050505;border-bottom:1px solid rgba(255,255,255,0.03);position:sticky;top:0;z-index:50}
.top-inner{max-width:var(--max);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.brand-text .brand-name{font-weight:700}
.brand-text .brand-sub{font-size:12px;color:var(--muted)}
.top-nav a{color:var(--white);text-decoration:none;margin-left:16px;opacity:0.9}
.top-nav a:hover{opacity:1;}

/* HERO */
.hero{max-width:var(--max);margin:48px auto;padding:0 28px;display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:center}
.hero-title{font-size:46px;letter-spacing:-1px;margin-bottom:14px}
.hero-sub{color:var(--muted);max-width:60ch}
.hero-actions{margin-top:18px;display:flex;gap:12px}
.btn{padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(90deg,#147bff,#33b3ff);color:#021024;box-shadow:0 12px 30px rgba(12,30,60,0.4)}
.btn-ghost{border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--white)}

/* photo */
.hero-photo-wrap{display:flex;justify-content:center}
#hero-photo{width:320px;height:320px;object-fit:cover;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.6);transition:transform .8s cubic-bezier(.2,.9,.3,1)}

/* COMPETENCIES (dark) */
.competencies{margin-top:36px;padding:40px 0;background:#030303}
.comp-inner{max-width:var(--max);margin:0 auto;padding:0 28px}
.comp-heading{font-size:30px;margin-bottom:20px;font-weight:700;color:#fff}
.comp-row{display:grid;grid-template-columns:220px 1fr 560px;align-items:center;padding:28px 0}
.comp-left{color:var(--muted);font-size:18px;padding-left:8px}
.comp-center{text-align:center;font-size:34px;font-weight:600}
.comp-right{color:var(--muted);padding-left:24px;line-height:1.6}
.divider{height:1px;background:rgba(255,255,255,0.04);margin:8px 0}

/* THREE COL HERO (blue gradient) */
.three-col-hero{padding:60px 0;background:linear-gradient(180deg,#00102b 0%, #002a6d 40%, #0741ff 100%)}
.three-inner{max-width:var(--max);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.three-inner .col h3{font-size:30px;margin-bottom:6px}
.three-inner .col h4{color:var(--white);opacity:0.95;margin-bottom:10px;font-weight:600}
.three-inner .col p{color:rgba(255,255,255,0.92);line-height:1.7}

/* QUALIFICATIONS big gradient */
.qual-section{padding:80px 0;background:linear-gradient(90deg,#0022ff 0%, #00d6ff 100%)}
.qual-inner{max-width:var(--max);margin:0 auto;padding:0 28px;color:#fff}
.qual-title{font-size:56px;font-weight:800;margin-bottom:30px}
.qual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.qual-col h3{font-size:28px;margin-bottom:8px}
.qual-col h5{color:rgba(255,255,255,0.9);margin-bottom:12px}
.qual-col p{line-height:1.7;color:rgba(255,255,255,0.95)}

/* CONTACT & FOOTER */
.contact{padding:48px 0;background:#030303}
.contact-inner{max-width:var(--max);margin:0 auto;padding:0 28px;color:var(--muted)}
.footer{padding:20px 0;text-align:center;color:rgba(255,255,255,0.5);border-top:1px solid rgba(255,255,255,0.03)}

/* responsiveness */
@media (max-width:980px){
  .hero{grid-template-columns:1fr; text-align:center}
  #hero-photo{width:240px;height:240px;margin:18px auto}
  .comp-row{grid-template-columns:1fr; text-align:center; gap:12px}
  .comp-left{order:1;padding:6px 0}
  .comp-center{order:2;font-size:28px}
  .comp-right{order:3;padding-top:8px}
  .three-inner{grid-template-columns:1fr}
  .qual-grid{grid-template-columns:1fr}
  .top-nav{display:none}
  .qual-title{font-size:40px}
}

/* reveal animation */
.reveal{opacity:0;transform:translateY(20px);transition:all .6s cubic-bezier(.2,.9,.3,1)}
.reveal.in{opacity:1;transform:none}

/* small hover */
.btn:hover{transform:translateY(-4px);transition:transform .18s ease}