:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#fbfbfe;
  --text:#0b1220;
  --muted:#42526b;
  --muted2:#5f6b82;
  --line:rgba(11,18,32,.12);

  /* Premium accents */
  --gold1:#fff1b3;
  --gold2:#f6d365;
  --gold3:#d4a017;
  --gold4:#b8860b;

  --brand:#b8860b;   /* gold */
  --brand2:#0f2a4a;  /* deep navy */

  --shadow: 0 14px 40px rgba(11,18,32,.12);
  --shadow2: 0 10px 24px rgba(11,18,32,.10);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}


*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(184,134,11,.10), transparent 55%),
    radial-gradient(820px 400px at 85% 22%, rgba(15,42,74,.06), transparent 55%),
    radial-gradient(980px 540px at 55% 95%, rgba(184,134,11,.06), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
}


a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.small{font-size:.95rem}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  color:var(--muted);
  backdrop-filter: blur(10px);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:.2px;
}
.mark{
  width:34px; height:34px; border-radius:12px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--shadow);
}
.navlinks{
  display:flex; gap:18px; align-items:center;
}
.navlinks a{color:var(--muted)}
.navlinks a:hover{color:var(--text)}
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(94,234,212,.35);
  background: linear-gradient(135deg, rgba(94,234,212,.18), rgba(96,165,250,.12));
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  font-weight:600;
}
.cta.secondary{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-weight:600;
}
.cta:focus{outline:2px solid rgba(94,234,212,.55); outline-offset:3px}

.hero{padding:56px 0 26px}
.hero-grid{
  display:grid; gap:22px;
  grid-template-columns: 1.25fr .75fr;
  align-items:start;
}
h1{
  font-size: clamp(2.0rem, 3.8vw, 3.1rem);
  line-height:1.12;
  margin: 14px 0 10px;
  letter-spacing:-.6px;
}
h2{
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  margin:0 0 14px;
  letter-spacing:-.2px;
}
h3{
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.lead{font-size: 1.08rem; color:var(--muted); margin:0 0 18px}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.kpis{
  display:grid; gap:10px;
  grid-template-columns: 1fr 1fr;
  margin-top:12px;
}
.kpi{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:14px;
}
.kpi strong{display:block; font-size:1rem}
.kpi span{color:var(--muted2); font-size:.92rem}

.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: var(--radius2);
  padding:18px;
  box-shadow: var(--shadow);
}
.side-card .pill{margin-bottom:10px}
.side-card ul{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.side-card li{margin:8px 0}

.section{padding:42px 0}
.section .top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.tile{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius2);
  padding:18px;
}
.tile p{margin:0; color:var(--muted)}
.tag{
  display:inline-flex; gap:8px; align-items:center;
  font-size:.88rem;
  color: rgba(232,236,245,.9);
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.28);
  background: rgba(96,165,250,.10);
}
.tag.green{border-color:rgba(94,234,212,.28); background: rgba(94,234,212,.10)}
.tag.gray{border-color:var(--line); background: rgba(255,255,255,.03); color:var(--muted)}
.hr{height:1px; background:var(--line); margin:24px 0}

.accordion{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.accordion details{border-top:1px solid var(--line)}
.accordion details:first-child{border-top:none}
.accordion summary{
  cursor:pointer;
  list-style:none;
  padding:16px 18px;
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary .left{display:flex; gap:12px}
.badge{
  flex:0 0 auto;
  width:30px; height:30px; border-radius:12px;
  border:1px solid rgba(94,234,212,.30);
  background: rgba(94,234,212,.10);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.accordion summary .title{font-weight:650}
.accordion summary .meta{color:var(--muted2); font-size:.9rem; margin-top:2px}
.accordion .content{padding:0 18px 16px 60px; color:var(--muted)}
.accordion .content p{margin:0}
.accordion .content p + p{margin-top:10px}

.form{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.form .full{grid-column: 1 / -1}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  font-family:var(--font);
}
textarea{min-height:120px; resize:vertical}
label{display:block; font-size:.9rem; color:var(--muted); margin:0 0 6px}
button{
  cursor:pointer;
  width:100%;
  border:1px solid rgba(94,234,212,.35);
  background: linear-gradient(135deg, rgba(94,234,212,.18), rgba(96,165,250,.12));
  color:var(--text);
  padding:12px 14px;
  border-radius: 14px;
  font-weight:650;
}
button:hover{opacity:.95}
.note{font-size:.9rem; color:var(--muted2); margin-top:10px}

.footer{
  border-top:1px solid var(--line);
  padding:22px 0 40px;
  color:var(--muted2);
}
.footer .row{
  display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap;
}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}

@media (max-width: 940px){
  .hero-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .navlinks{display:none}
  .kpis{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .kpis{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}

.brand img{display:block}

/* Apex Premium: larger logo in header */
.brand{
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.brand-logo{
  height:240px; /* ~7x the previous 34px */
  width:auto;
  border-radius:16px;
  box-shadow: var(--shadow);
}
.nav{
  align-items:flex-start;
  flex-wrap:wrap;
  gap:14px;
}
.navlinks{
  margin-top:6px;
}
@media (max-width: 940px){
  .brand-logo{height:140px;}
  .nav{align-items:flex-start;}
}

/* v4 header branding: logo left, name right, bold gold 3D */
.brand{
  flex-direction:row;
  align-items:center;
  gap:18px;
}
.brand-logo{
  height:240px;
  width:auto;
  border-radius:16px;
  box-shadow: var(--shadow);
}
.brand-name{
  font-size: clamp(2.0rem, 3.8vw, 3.1rem);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.6px;
  /* Gold gradient text with a subtle 3D bevel look */
  background: linear-gradient(180deg, #fff1b3 0%, #f6d365 22%, #d4a017 58%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.22),
    0 2px 0 rgba(0,0,0,.28),
    0 10px 22px rgba(0,0,0,.55);
}

/* Keep header usable on smaller screens */
@media (max-width: 940px){
  .brand-logo{height:140px;}
  .brand-name{font-size: clamp(1.6rem, 5.6vw, 2.3rem);}
}

/* v5 header layout: logo left, name + tabs right (tabs under name) */
.nav{
  align-items:flex-start;
  gap:18px;
}
.brandwrap{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:18px;
  align-items:start;
}
.brand-logo-link{display:inline-flex; align-items:flex-start}
.brandcol{display:flex; flex-direction:column; gap:10px}
.brand-name-link{display:inline-block}
.brand-loc{
  color: var(--muted2);
  font-size: 1.05rem;
  margin-top: -6px;
}

/* Transparent logo: enlarge so the mark reads big without a black box */
.brand-logo{
  height: 420px; /* 240px * 1.75 */
  width: auto;
  border-radius: 0;
  box-shadow: none;
  display:block;
}

/* Tabs: sit immediately under the name block, aligned to its left edge */
.navlinks{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 4px;
}
.navlinks a{color:var(--muted)}
.navlinks a:hover{color:var(--text)}

/* Keep CTA right aligned */
@media (max-width: 940px){
  .brand-logo{height: 245px;}
  .brand-loc{font-size: 1rem;}
  .navlinks{display:none;} /* keep mobile clean; can add hamburger later */
}

/* Bulleted framework content */
.bullets{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.bullets li{margin: 8px 0}

/* v6: make header part of page flow (no blur overlay while scrolling) */

/* v6: align company name to the middle of the logo */
.brandwrap{
  align-items: center;
}
.brandcol{
  justify-content: center;
}
.brand-name{
  white-space: nowrap;
}

/* If viewport gets tight, allow wrap to avoid overflow */
@media (max-width: 1100px){
  .brand-name{white-space: normal;}
}

/* v6: tabs under company name, CTA next to Contact */
.navlinks{
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.nav-cta{
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 700;
}

/* v6: keep top row tidy */
.nav{
  justify-content: space-between;
  align-items: center;
}

/* Light theme header */
.header{
  position: static;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
  background: rgba(246,247,251,.86);
  backdrop-filter: blur(10px);
}

/* Light theme surfaces */
.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(251,251,254,1));
  box-shadow: var(--shadow);
}
.tile{
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
}
.kpi{
  border:1px solid var(--line);
  background: rgba(255,255,255,.90);
}
.pill{
  border:1px solid var(--line);
  background: rgba(255,255,255,.80);
  color: var(--muted);
}

/* Premium gold CTAs */
.cta{
  border:1px solid rgba(184,134,11,.35);
  background: linear-gradient(180deg, rgba(255,241,179,.92), rgba(246,211,101,.92) 40%, rgba(212,160,23,.92));
  color: #1b1b1b;
  box-shadow: 0 10px 26px rgba(11,18,32,.14);
}
.cta.secondary{
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  color: var(--text);
}
.cta:hover{filter:brightness(0.98)}

/* Tags */
.tag{
  border:1px solid rgba(15,42,74,.18);
  background: rgba(15,42,74,.06);
  color: rgba(11,18,32,.92);
}
.tag.green{
  border-color: rgba(184,134,11,.28);
  background: rgba(184,134,11,.10);
}
.tag.gray{
  border-color: var(--line);
  background: rgba(255,255,255,.74);
  color: var(--muted);
}

/* Brand name: gold 3D, readable on light */
.brand-name{
  background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 22%, var(--gold3) 58%, var(--gold4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 2px 0 rgba(0,0,0,.12),
    0 10px 18px rgba(11,18,32,.18);
}

.footer{
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.80);
}
.footer a{color: var(--muted)}
.footer a:hover{color: var(--text)}

input, textarea{
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
}

/* v6-light2: stronger gold title for light backgrounds */
.brand-name{
  background: linear-gradient(180deg, #ffe08a 0%, #f2c14e 28%, #c99000 62%, #8a6a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.40),
    0 2px 0 rgba(0,0,0,.16),
    0 3px 0 rgba(0,0,0,.10),
    0 12px 22px rgba(11,18,32,.22);
}

/* v6-light2: unify section cards/frames */
.tile, .card, .kpi{
  border-color: rgba(11,18,32,.12) !important;
}

/* Keep tags consistent and premium without implying different "frames" */
.tag, .tag.green, .tag.gray{
  border-color: rgba(11,18,32,.14);
  background: rgba(11,18,32,.04);
  color: rgba(11,18,32,.92);
}

/* v6-light3: brand name gold matched to logo */
.brand-name{
  background: linear-gradient(180deg, #eccc7e 0%, #e2b239 30%, #a28029 68%, #7c611f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 2px 0 rgba(0,0,0,.18),
    0 4px 0 rgba(0,0,0,.10),
    0 14px 26px rgba(11,18,32,.22);
}