@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  --sun: #FDDB02;
  --blue: #104B9A;
  --navy: #244D7E;
  --sky:  #2587BA;
  --soft: #83A2BD;
  --green:#97C646;

  --bg:#FFFFFF;
  --bg2:#F3F8FF;
  --text:#0B1B2B;
  --muted: rgba(11,27,43,.70);
  --line: rgba(16,75,154,.14);
  --shadow: 0 20px 60px rgba(16,75,154,.18);
  --radius: 18px;
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(37,135,186,.12), transparent 60%),
              radial-gradient(1200px 600px at 80% 10%, rgba(253,219,2,.14), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.noScroll{overflow:hidden}
.container{width:min(var(--container), calc(100% - 40px));margin:0 auto}

/* Header */
.header{
  position:sticky;top:0;z-index:60;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
  transition: box-shadow .2s ease, background .2s ease;
}
.header.is-scrolled{background: rgba(255,255,255,.94);box-shadow: 0 14px 40px rgba(16,75,154,.12)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}

.brand{display:flex;align-items:center;gap:12px;min-width:260px}
.brand__logo{width:44px;height:44px;object-fit:contain}
.brand__name{font-weight:900;color: var(--navy)}
.brand__tag{font-size:12px;color: var(--muted);margin-top:2px}

.nav{display:flex;gap:18px;align-items:center}
.nav__link{font-size:14px;font-weight:700;color: rgba(11,27,43,.78);padding:10px 12px;border-radius:14px}
.nav__link:hover{background: rgba(16,75,154,.08);color: var(--blue)}
.nav__link.is-active{color: var(--blue)}
.nav__cta{background: rgba(16,75,154,.10);border:1px solid rgba(16,75,154,.22)}

.menuBtn{display:none;width:46px;height:46px;border-radius:16px;background: rgba(16,75,154,.06);border:1px solid rgba(16,75,154,.18);cursor:pointer}
.menuBtn span{display:block;height:2px;width:18px;margin:4px auto;border-radius:10px;background: rgba(11,27,43,.75)}
.navPanel{border-top:1px solid var(--line);background: rgba(255,255,255,.95);padding:10px 20px 18px}
.navPanel__link{display:block;padding:12px 8px;border-bottom:1px solid var(--line);color: rgba(11,27,43,.82);font-weight:800}
.navPanel__link.is-active{color: var(--blue)}
.navPanel__link:last-child{border-bottom:none}

/* Hero */
.hero{position:relative;padding:86px 0 38px;overflow:hidden}
.hero__inner{position:relative}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  background: rgba(255,255,255,.78);
  border:1px solid var(--line);
  color: rgba(11,27,43,.72);
  font-size:13px;
}
.kdot{
  width:10px;height:10px;border-radius:999px;
  background: var(--sun);
  box-shadow: 0 0 0 7px rgba(253,219,2,.25);
}
.title{margin:18px 0 10px;font-size: clamp(34px, 4.2vw, 56px);line-height:1.06;color: var(--navy)}
.sub{margin:0;width:min(860px,100%);color: rgba(11,27,43,.72);line-height:1.85}
.hero__bg{
  position:absolute;inset:auto -200px -240px -200px;height:520px;
  background:
    radial-gradient(700px 260px at 20% 40%, rgba(37,135,186,.18), transparent 60%),
    radial-gradient(700px 260px at 70% 20%, rgba(253,219,2,.18), transparent 60%);
  filter: blur(2px);
}

/* Layout */
.section{padding:70px 0;border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns: .95fr 1.05fr;gap:14px;align-items:stretch}

.infoCard, .formCard{
  padding:18px;border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  border:1px solid rgba(16,75,154,.18);
  box-shadow: var(--shadow);
  height:100%;
}
.infoCard{
  padding-top:34px;
}
.infoCard__top{display:flex;gap:16px;align-items:flex-start}
.infoLogo{width:205px;height:136px;object-fit:contain}
.infoTitle{font-weight:900;color: var(--navy)}
.infoSub{margin-top:4px;color: rgba(11,27,43,.62);font-size:13px;line-height:1.6}

.infoList{margin-top:24px;display:grid;gap:10px}
.infoItem{padding:14px;border-radius:16px;background: rgba(16,75,154,.06);border:1px solid rgba(16,75,154,.14)}
.infoItem__k{font-size:12px;color: rgba(11,27,43,.62);font-weight:800}
.infoItem__v{margin-top:6px;font-weight:900;color: rgba(11,27,43,.86)}
.locationCard{
  margin-top:14px;
  padding:18px;
  border-radius:16px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(16,75,154,.18);
  box-shadow: var(--shadow);
}
.locationCard__head{
  text-align:center;
  margin-bottom:12px;
}
.locationCard__k{font-size:12px;color:rgba(11,27,43,.62);font-weight:800}
.locationCard__v{
  margin-top:6px;
  font-weight:900;
  color:rgba(11,27,43,.86);
  font-size:20px;
}
.locationCard__map{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(16,75,154,.18);
}
.locationCard__frame{
  width:100%;
  height:320px;
  border:0;
  display:block;
}

.formHead__k{font-size:12px;color: rgba(11,27,43,.62);font-weight:800}
.formHead__t{margin-top:6px;font-weight:900;color: var(--navy)}

.form{margin-top:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hpField{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
label{font-size:12px;color: rgba(11,27,43,.66);font-weight:800}

input, select, textarea{
  padding:12px 12px;border-radius:16px;
  border:1px solid rgba(16,75,154,.18);
  background: rgba(255,255,255,.92);
  color: rgba(11,27,43,.92);
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(37,135,186,.45);
  box-shadow: 0 0 0 6px rgba(37,135,186,.14);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:16px;
  font-weight:900;border:1px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn--primary{width:100%;background: linear-gradient(135deg, var(--blue), var(--sky));color:#fff}
.btn--primary:hover{background: var(--sun);color: rgba(11,27,43,.95)}
.btn:disabled{opacity:.7;cursor:not-allowed}

.status{margin-top:12px;font-size:13px;color: rgba(11,27,43,.70);font-weight:700}
.status--ok{color: rgba(10,140,80,.95)}
.status--error{color: rgba(200,30,60,.95)}

.note{margin-top:14px;display:flex;gap:12px;align-items:flex-start}
.note__bar{width:3px;height:44px;background: linear-gradient(180deg, var(--sun), rgba(253,219,2,0))}
.note__text{color: rgba(11,27,43,.60);font-size:12px;line-height:1.7}
code{background: rgba(16,75,154,.08);padding:2px 6px;border-radius:10px}

/* Footer */
.site-footer{
  padding:20px 0;
  background:var(--navy);
  text-align:center;
}
.footer-bottom{
  max-width:var(--container);
  margin:0 auto;
  padding:0 22px;
}
.site-footer span{
  font-size:13px;
  line-height:1.7;
  color:rgba(255,255,255,.75);
  font-weight:600;
}

.reveal{opacity:0;transform: translateY(18px);transition: opacity .55s ease, transform .55s ease}
.reveal.is-in{opacity:1;transform:none}

@media (max-width: 980px){
  .nav{display:none}
  .menuBtn{display:block}
  .grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}

/* Shared top bar + hero (match About/Home) */
.wrap{
  width:min(1200px, calc(100% - 44px));
  margin:0 auto;
}

.siteHeader{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
  transition: box-shadow .2s cubic-bezier(.2,.8,.2,1), background .2s cubic-bezier(.2,.8,.2,1);
}
.siteHeader.isSticky{
  box-shadow: 0 18px 45px rgba(17,76,154,.10);
}

.headerRow{
  min-height:94px;
  padding:10px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.logo{
  display:flex;
  align-items:center;
  gap:8px;
}
.logo img{
  width:165px;
  height:auto;
  max-height:88px;
  object-fit:contain;
}
.logoText{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.logoTitle{
  font-weight:900;
  font-size:16px;
  color:#114C9A;
}

.nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.gtranslate_wrapper{
  display:inline-flex;
  align-items:center;
  margin-left:4px;
}
.gtranslate_wrapper select{
  height:38px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(17,76,154,.22);
  background:rgba(255,255,255,.96);
  color:rgba(8,23,41,.86);
  font-weight:700;
}
.navLink{
  font-weight:800;
  font-size:14px;
  color: rgba(8,23,41,.80);
  padding:10px 0;
  position:relative;
}
.navLink:hover{color:#114C9A}
.navLink.isActive{color:#114C9A}
.navLink.isActive::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:2px;
  border-radius:999px;
  background: rgba(17,76,154,.28);
}

.navBtn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(17,76,154,.22);
  background: rgba(17,76,154,.06);
}
.navBtn:hover{
  background: rgba(253,220,3,.55);
  border-color: rgba(253,220,3,.75);
}

.navToggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(17,76,154,.18);
  background: rgba(17,76,154,.06);
  border-radius:12px;
  cursor:pointer;
}
.navToggle span{
  display:block;
  width:18px;
  height:2px;
  margin:4px auto;
  background: rgba(8,23,41,.72);
  border-radius:10px;
}
.mobileNav{
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.98);
  padding:10px 22px 18px;
}
.mLink{
  display:block;
  padding:12px 0;
  font-weight:900;
  border-bottom:1px solid rgba(17,76,154,.10);
  color: rgba(8,23,41,.82);
}
.mLink:last-child{border-bottom:none}
.mLink:hover{color:#114C9A}
.mLink.isActive{color:#114C9A}

.heroVideo{
  position:relative;
  height:50vh;
  min-height:400px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 50% 18%, rgba(253,220,3,.18), transparent 60%),
    linear-gradient(160deg, #0e2a52 0%, #114C9A 58%, #1E89BF 100%);
}

.heroVideo__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(8,23,41,.35) 0%, rgba(8,23,41,.28) 55%, rgba(8,23,41,.22) 100%);
}

.heroCenter{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.heroTitle{
  font-size:clamp(42px,5vw,80px);
  font-weight:900;
  color:#fff;
  margin-bottom:16px;
  letter-spacing:-1px;
}
.heroBrief{
  margin:0 0 14px;
  max-width:760px;
  color:rgba(255,255,255,.86);
  line-height:1.75;
  font-weight:600;
}

.heroMeta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  color:rgba(255,255,255,.9);
  font-weight:700;
}

.heroActions{
  margin-top:28px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

.btnPrimary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 22px;
  border-radius:16px;
  font-weight:900;
  background:linear-gradient(135deg,#FDDC03,#ffe85e);
  color:rgba(8,23,41,.92);
  border:none;
  transition:.2s ease;
}
.btnPrimary:hover{
  transform:translateY(-3px);
}

.btnGhost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 22px;
  border-radius:16px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.12);
  color:#fff;
  transition:.2s ease;
}
.btnGhost:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.20);
}

@media (max-width: 980px){
  .nav{display:none}
  .navToggle{display:block}
  .headerRow{min-height:86px}
  .logo img{width:150px;max-height:82px}
}

@media (max-width: 768px){
  .wrap{width:min(1200px, calc(100% - 30px))}
  .section{padding:56px 0}
  .heroVideo{height:54vh;min-height:350px}
  .heroTitle{font-size:clamp(30px,8vw,42px);margin-bottom:10px}
  .heroBrief{
    font-size:14px;
    line-height:1.65;
    max-width:92%;
    margin-inline:auto;
  }
  .heroMeta{
    font-size:13px;
    gap:8px;
    line-height:1.5;
    max-width:92%;
    margin-inline:auto;
  }
  .grid{gap:12px}
  .infoCard,.formCard{padding:14px;border-radius:14px}
  .infoCard{padding-top:26px}
  .infoCard__top{gap:12px}
  .infoLogo{width:156px;height:104px}
  .infoList{gap:8px}
  .infoItem{padding:12px}
  .form{margin-top:10px}
  .field{margin-bottom:10px}
  input,select,textarea{border-radius:12px}
  .locationCard{margin-top:12px;padding:14px;border-radius:14px}
  .locationCard__v{font-size:18px}
  .locationCard__frame{height:260px}
}