/* Shared Corex header and footer styles, synchronized with home.css. */

/* ─────────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────────── */
:root {
  /* Colors */
  --blue:    #0052CD;
  --blue-2:  #1a68e0;
  --blue-3:  #EEF4FF;
  --blue-4:  #F5F8FF;
  --ink:     #111318;
  --ink-2:   #555E6C;
  --ink-3:   #9AA3B0;
  --ink-4:   #F3F5F7;
  --line:    #E4E8ED;
  --white:   #FFFFFF;
  --surface: #F8FAFC;
  /* Typography */
  --f-serif: 'DM Serif Display','Noto Serif SC',Georgia,serif;
  --f-sans:  'DM Sans','Noto Sans SC',sans-serif;
  --f-zh:    'Noto Sans SC','DM Sans',sans-serif;
  /* Spacing — 8px base grid */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 56px; --s7: 72px; --s8: 96px;
  /* Layout */
  --nav-h:    64px;
  --max-w:    1160px;
  --col-pad:  48px;          /* desktop gutter */
  --radius:   10px;
  --radius-l: 16px;
  /* Section vertical rhythm */
  --sec-py:   88px;
}

/* ─── Reset ─────────────────────────────────── */
/**,*::before,*::after{box-sizing:border-box;margin:0;padding:0}*/
/*html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}*/
/*body{background:var(--white);color:var(--ink);font-family:var(--f-zh);line-height:1.65;overflow-x:hidden}*/
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}

/* ─── Buttons ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-sans);font-size:14px;font-weight:600;
  padding:12px 24px;border-radius:var(--radius);
  border:none;cursor:pointer;transition:all .2s;white-space:nowrap
}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:var(--blue-2);box-shadow:0 8px 24px rgba(0,82,205,.3);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-ghost{background:transparent;color:var(--ink-2);border:none;padding:10px 0}
.btn-ghost:hover{color:var(--ink)}

/* ══════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  width:100%;padding:0;
  height:var(--nav-h);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s
}
#nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.07)}
.nav-inner{
  width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--col-pad);
  height:100%;display:flex;align-items:center;gap:0
}
.nav-logo{
  font-family:var(--f-sans);font-size:18px;font-weight:700;
  letter-spacing:-.03em;color:var(--ink);
  display:flex;align-items:center;margin-right:auto;flex-shrink:0
}
.nav-logo span{color:var(--blue);font-size:22px;line-height:1}
/* Links */
.nav-links{display:flex;align-items:center;list-style:none;height:var(--nav-h);gap:0;margin-right:var(--s3)}
.nav-links li{position:relative;height:100%;display:flex;align-items:center}
.nav-links li > a{
  font-family:var(--f-sans);font-size:13.5px;color:var(--ink-2);
  padding:0 14px;height:100%;display:flex;align-items:center;gap:5px;
  transition:color .15s;white-space:nowrap
}
.nav-links li > a:hover,.nav-links li:focus-within > a{color:var(--ink)}
.nav-caret{width:9px;height:5px;flex-shrink:0;transition:transform .2s;color:var(--ink-3)}
.nav-links li:hover .nav-caret,.nav-links li:focus-within .nav-caret{transform:rotate(180deg)}
/* Nav CTA */
.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mobile-nav-contact{
  display:none;flex-shrink:0;padding:8px 13px;border:0;border-radius:8px;
  background:var(--blue);color:var(--white);cursor:pointer;
  font-family:var(--f-sans);font-size:13px;font-weight:700;line-height:1.2;
}

/* ─── Mega panel ─────────────────────────────── */
.mega-wrap{
  position:fixed;top:calc(var(--nav-h) - 1px);left:0;right:0;
  display:flex;justify-content:center;z-index:499;
  padding-top:1px;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .15s ease,visibility 0s linear .12s
}
.nav-links li:hover .mega-wrap,
.nav-links li:focus-within .mega-wrap{
  opacity:1;visibility:visible;pointer-events:auto;
  transition-delay:0s
}
.mega-box{
  width:min(820px,90vw);
  background:var(--white);
  border:1px solid var(--line);border-top:2.5px solid var(--blue);
  border-radius:0 0 var(--radius-l) var(--radius-l);
  box-shadow:0 24px 64px rgba(0,0,0,.1);
  overflow:hidden
}
.mega-body{display:grid;padding:var(--s3) 0;gap:0}
.mega-col{padding:4px var(--s3)}
.mega-col+.mega-col{border-left:1px solid var(--line)}
.mega-label{
  font-family:var(--f-sans);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  padding:4px 10px 8px;margin-bottom:2px
}
.mega-link{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;
  font-size:13.5px;color:var(--ink);
  transition:background .12s
}
.mega-link:hover{background:var(--blue-4)}
.mega-link-icon{font-size:16px;flex-shrink:0;width:22px;text-align:center}
.mega-link-name{font-family:var(--f-sans);font-size:13px;font-weight:600;color:var(--ink)}
.mega-link-desc{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.mega-foot{
  padding:12px var(--s3);background:var(--surface);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2)
}
.mega-foot-text{font-family:var(--f-sans);font-size:12.5px;color:var(--ink-2)}
.mega-foot-cta{
  font-family:var(--f-sans);font-size:12.5px;font-weight:600;
  color:var(--blue);display:flex;align-items:center;gap:4px;white-space:nowrap
}

/* ─── Mobile nav ──────────────────────────────── */
.ham{
  display:none;width:40px;height:40px;border-radius:8px;
  background:transparent;border:1.5px solid var(--line);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  flex-shrink:0;margin-left:var(--s2)
}
.ham span{width:18px;height:1.5px;background:var(--ink);border-radius:1px;transition:all .25s;display:block}
.ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#drawer{
  position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
  background:var(--white);z-index:490;
  overflow-y:auto;padding:var(--s3) var(--col-pad) var(--s5);
  transform:translateX(100%);transition:transform .3s ease
}
#drawer.open{transform:none}
.dr-link{
  display:block;padding:13px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-sans);font-size:15px;font-weight:500;color:var(--ink)
}
.dr-sub{padding-left:16px}
.dr-sub .dr-link{font-size:14px;font-weight:400;color:var(--ink-2);border-bottom-style:dashed}
.dr-section{
  padding:10px 0 6px;font-family:var(--f-sans);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:var(--s2)
}
#overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:480;
  opacity:0;visibility:hidden;transition:all .25s
}
#overlay.on{opacity:1;visibility:visible}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
footer{background:var(--ink);padding:var(--s7) 0 var(--s3)}
.foot-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--col-pad)}
.foot-grid{
  display:grid;grid-template-columns:280px 1fr 1fr 1fr;
  gap:var(--s5);padding-bottom:var(--s5);
  border-bottom:1px solid rgba(255,255,255,.07)
}
.foot-brand-name{font-family:var(--f-sans);font-size:18px;font-weight:700;color:var(--white);margin-bottom:10px;display:flex;align-items:center}
.foot-brand-name span{color:var(--blue);font-size:22px}
.foot-brand-desc{font-size:12.5px;color:rgba(255,255,255,.3);line-height:1.75;max-width:220px}
.foot-col-title{font-family:var(--f-sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:var(--s2)}
.foot-link{display:block;font-size:13px;color:rgba(255,255,255,.45);padding:5px 0;transition:color .2s}
.foot-link:hover{color:rgba(255,255,255,.85)}
.foot-bottom{
  padding-top:var(--s3);display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:var(--s2)
}
.foot-copy{font-size:12px;color:rgba(255,255,255,.2);font-family:var(--f-sans)}

@media(max-width:1024px){
  :root{--col-pad:32px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}
}
@media(max-width:960px){
  :root{--col-pad:28px;--sec-py:72px}
  #nav .nav-links,#nav .nav-cta{display:none}
  #nav .nav-inner{width:100%;padding-left:20px;padding-right:20px}
  #nav .mobile-nav-contact{display:block;margin-left:auto}
  .ham{display:flex}
}
@media(max-width:768px){
  :root{--col-pad:20px;--sec-py:64px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  :root{--col-pad:16px;--sec-py:56px}
  .foot-grid{grid-template-columns:1fr}
  #nav{padding:0 var(--s2)}
  #nav .nav-inner{padding-left:0;padding-right:0}
  .nav-logo{font-size:16px}
  #nav .mobile-nav-contact{padding:8px 12px}
  #nav .ham{margin-left:10px}
}
@media(max-width:400px){
  :root{--col-pad:14px;--sec-py:48px}
}

.corex-inline-001 {grid-template-columns:1fr 1fr 1fr !important;}
.corex-inline-002 {margin-top:16px !important; padding:12px !important; background:#F8FAFC !important; border-radius:8px !important; border:1px solid #E4E8ED !important;}
.corex-inline-003 {font-family:'DM Sans',sans-serif !important; font-size:11px !important; color:#9AA3B0 !important; margin-bottom:6px !important;}
.corex-inline-004 {font-size:12px !important; color:#555E6C !important; line-height:1.8 !important;}
.corex-inline-005 {grid-template-columns:1fr 1fr !important;}
.corex-inline-006 {color:#0052CD !important;}
.corex-inline-007 {padding:9px 18px !important; font-size:13px !important;}
.corex-inline-008 {padding-top:20px !important; display:flex !important; flex-direction:column !important; gap:10px !important;}
.corex-inline-009 {justify-content:center !important;}

/* Shared contact form status messages. */
.corex-form-status {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  grid-column: 1 / -1;
  flex: 0 0 100%;
  align-self: stretch;
  box-sizing: border-box;
  clear: both;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--f-zh);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}
.corex-form-status.is-success {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.corex-form-status.is-error {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}

/*
 * Native option menus use a light system popup in most browsers. Give every
 * collected form an explicit dark foreground so options can never become
 * white-on-white, regardless of the page's inherited text color.
 */
[data-corex-lead-form="true"] select,
.corex-contact-form select {
  color-scheme: light;
}
[data-corex-lead-form="true"] select option,
[data-corex-lead-form="true"] select optgroup,
.corex-contact-form select option,
.corex-contact-form select optgroup {
  color: #191919 !important;
  background-color: #fff !important;
}
[data-corex-lead-form="true"] .corex-form-status {
  margin-bottom: 16px;
}
[data-corex-lead-form="true"],
#contact {
  scroll-margin-top: calc(var(--nav-h, 72px) + 20px);
}

/* Shared consultation popup. */
body.corex-popup-open { overflow: hidden; }
#consult-popup-overlay {
  position: fixed; inset: 0; z-index: 10000; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(17,19,24,.75); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
#consult-popup-overlay.show { opacity: 1; visibility: visible; }
#consult-popup {
  position: relative; width: 100%; max-width: 520px; max-height: 90vh;
  overflow-y: auto; border-radius: 20px; background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  transform: scale(.94) translateY(20px);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
#consult-popup-overlay.show #consult-popup { transform: scale(1) translateY(0); }
#consult-popup .cp-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  font-size: 23px; line-height: 1;
}
#consult-popup .cp-head { padding: 32px 36px 26px; background: #111318; color: #fff; }
#consult-popup .cp-label { display: block; margin-bottom: 12px; color: #72a7ff; font-size: 12px; font-weight: 700; }
#consult-popup .cp-title { padding-right: 24px; font-size: 25px; font-weight: 700; line-height: 1.3; }
#consult-popup .cp-title em { color: #72a7ff; font-style: normal; }
#consult-popup .cp-sub { margin-top: 10px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.7; }
#consult-popup .cp-body { padding: 28px 36px 32px; }
#consult-popup .cp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#consult-popup .cp-group { margin-bottom: 14px; }
#consult-popup .cp-label-2 { display: block; margin-bottom: 6px; color: #303640; font-size: 12px; font-weight: 600; }
#consult-popup .cp-req { color: #e5484d; }
#consult-popup .cp-inp, #consult-popup .cp-sel, #consult-popup .cp-ta {
  box-sizing: border-box; width: 100%; padding: 11px 12px; border: 1.5px solid #dfe3e8;
  border-radius: 8px; outline: none; background: #fff; color: #111318; font: inherit;
}
#consult-popup .cp-inp:focus, #consult-popup .cp-sel:focus, #consult-popup .cp-ta:focus { border-color: #0052cd; }
#consult-popup .cp-ta { min-height: 90px; resize: vertical; }
#consult-popup .cp-submit {
  width: 100%; padding: 13px 18px; border: 0; border-radius: 8px;
  background: #0052cd; color: #fff; cursor: pointer; font-size: 14px; font-weight: 700;
}
#consult-popup .cp-meta { margin-top: 10px; color: #8a929e; text-align: center; font-size: 12px; }
@media (max-width: 560px) {
  #consult-popup-overlay { align-items: flex-end; padding: 10px; }
  #consult-popup { max-height: 92vh; border-radius: 16px; }
  #consult-popup .cp-head { padding: 25px 20px 20px; }
  #consult-popup .cp-title { font-size: 21px; }
  #consult-popup .cp-body { padding: 22px 20px 24px; }
  #consult-popup .cp-row { grid-template-columns: 1fr; gap: 0; }
}