/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  --site-max: 1620px;
  --gutter: 16px;
  --bg:#0b0d10; --panel:#101419; --edge:#161e28; --text:#e8eef6;
  --muted:#9aa4b2; --blue:#0D74F5; --green:#59E00B;
}
body{
  font: 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text); background: linear-gradient(180deg,#0a0c0f,#0c1218 40%,#0a0f16);
}

/* ===== Layout ===== */
.container {
  max-width: var(--site-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: 100px;
}
.header-inner,
.hero--full .hero-inner{
  max-width: var(--site-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* ===== Layout ===== */
.container2 {
  max-width: var(--site-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.header-inner,
.hero--full .hero-inner{
  max-width: var(--site-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ===== Header / Nav ===== */
.header{ position: sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px);
  background:rgba(10,14,18,.6); border-bottom:1px solid #0e141b; }
.header-inner{ display:flex; align-items:center; gap:16px; padding:14px 20px; }

.brand{ display:flex; align-items:center; gap:8px; }

/* kill any “ring” coming from prior styles */
.brand{ display:flex; align-items:center; gap:18px; font-weight:700; font-size:32px; letter-spacing:0.59px; }
.brand .mark{ width:120px; height:120px; border-radius:8px;
  background: #0b0d1000 url("/assets/cas_100x100.png") center/contain no-repeat;
  box-shadow:0 0 0 0px rgba(255,255,255,.06) inset;
  text-decoration:none;
  }


.nav{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav a{
  color: var(--text); text-decoration: none; padding:10px 12px; border-radius:10px;
  border:1px solid #1b2430; background:#131922; transition:.15s;
}
.nav a:hover{ transform: translateY(-1px); background:#182131; }
.nav a.active{ outline:2px solid #233249; background:#101419; }

/* Mobile */
.menu-btn{ display:none; }
@media (max-width: 860px){
  .brand{ font-size:18px; }
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; margin-left:auto; padding:10px 12px; border-radius:10px;
    border:1px solid #1b2430; background:#131922; color:var(--text); cursor:pointer; }
  [data-menu].open{ display:flex; position:fixed; inset:60px 16px auto 16px;
    flex-direction:column; gap:8px; padding:16px; background:#0f151d; border:1px solid #162030; border-radius:12px; }
}

/* ===== Sections ===== */
.hero{ padding:40px 20px; text-align:center; }
h1{ margin:30px 0px 10px 15px; font-size:28px; }
h2{ margin:0px 0 10px 0; font-size:26px; }
p{ color: var(--muted); margin:8px 0; }

.card{ background:var(--panel); border:1px solid #131923; border-radius:16px; padding:18px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:9999px;
  color:#0b0d10; background:linear-gradient(180deg,#ffffff, #ffffff); border:0px solid #1b2430; text-decoration:none; font-weight: 550; }
.btn.blue{ background:#131922; padding:8px 12px; border:1.5px solid #9aa4b2; color: #e8eef6; font-weight: 250; }

/* 1) Headings / brand font stack (Windows 11 native, no web fonts) */
h1, h2, .brand-name {
  font-family:
    "Segoe UI Variable Display",
    "Segoe UI Variable Text",
    Bahnschrift,
    "Segoe UI",
    system-ui, -apple-system, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
}

/* Optional: H2 a touch lighter */
h2 { font-weight: 600; }

/* 2) Let variable fonts use their optical sizing if available */
h1, h2, .brand-name { font-optical-sizing: auto; }

/* 3) Progressive enhancement: only applies when variable fonts are supported */
@supports (font-variation-settings: normal) {
  h1, h2, .brand-name {
    font-variation-settings: "wght" 700, "opsz" 32; /* adjust opsz to your heading size */
  }
}

/* ===== Layout utilities ===== */
.section { margin: 32px 0; }
.section .section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; }
.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px){
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ===== Trust bar ===== */
.trust { background: #0f151d; border:1px solid #131923; border-radius:16px; padding:14px; }
.trust-logos { display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:center; opacity:.9; }
.trust-logos img { height:28px; filter: grayscale(100%) contrast(1.2); opacity:.85; }

/* ===== Solution cards ===== */
.solution { max-width:750px; padding:25px; border-radius:14px; border:1px solid #1b2430; background:#131922; transition:transform .15s, background .15s; }
.solution:hover { transform: translateY(-2px); background:#182131; }
.solution h3 { margin:0 0 10px; font-size:18px; }
.solution p { margin:0; color:var(--muted); font-size:22px; line-height: 2em; font-weight: 600;}
.solution .actions { margin-top:10px; display:flex; gap:8px; align-items:center; justify-content:center; }

/* ===== Industries ===== */
.badge-row { display:flex; gap:10px; flex-wrap:wrap; }
.badge { padding:8px 10px; border-radius:999px; border:1px solid #1b2430; background:#10171f; color:var(--text); font-size:13px; }

/* ===== Proof / KPI band ===== */
.kpis { display:flex; gap:16px; flex-wrap:wrap; }
.kpi-card { flex:1 1 200px; padding:16px; border-radius:14px; border:1px solid #1b2430; background:#0f151d; text-align:center; }
.kpi-card .num { font-size:24px; font-weight:700; }
.kpi-card .label { color:var(--muted); }

/* ===== Final CTA band ===== */
.cta-band { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px; border-radius:16px; border:1px solid #1b2430; background:linear-gradient(180deg,#0f5adb,#0b48b3); }
.cta-band h3 { margin:0; font-size:20px; }
.cta-band p { margin:0; color:#e8eef6; }
.cta-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,.6); }

/* Accessibility focus for links-in-cards */
.solution a:focus-visible, .badge:focus-visible, .btn:focus-visible {
  outline:2px solid var(--blue); outline-offset:3px; border-radius:10px;
}

/* Full-bleed hero (Cisco-style) */
.hero--full{
  margin:0; padding:100px 0;
  border:0; border-radius:0;
  background:
    radial-gradient(2000px 600px at 75% 40%, rgba(13,116,245,.25), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0c1218 50%,#0b0d10);
}
.hero--full .hero-inner{ max-width:1560px; text-align: center; margin:0 auto; padding:0 0px; }
.hero--full h1{ font-size:60px; font-weight:625; line-height:0.90; margin:0 0 10px; }
.hero--full p{ max-width:1560px; }
.hero--full .hero-inner p + p { margin-top: 32px; font-size:32px; }
.hero--full .hero-inner h1 + p { margin-top: 32px; font-size: 3em; line-height: 1.6;}

/* responsive tweak */
@media (max-width:860px){
  .hero--full{ padding:56px 0; }
  .hero--full h1{ font-size:32px; }
  .hero--full .hero-inner h1 + p { margin-top: 10px; }
  .hero--full .hero-inner p + p  { margin-top: 16px; }
}
/* Put the second phrase on its own line and style it */
.hero--full h1 .h1-sub{
  display:block;            /* forces a new line */
  font-size: inherit;         /* slightly smaller than the first line */
  font-weight: 625;         /* a touch lighter than the main line */
  letter-spacing: inherit;
  margin-top: 10px;
  opacity: 1.00;             /* subtle contrast; remove if you want full strength */
}
/* White version of the blue button (Rev 2 hero) */
.btn.white.hero-btn {
  background:linear-gradient(150deg,#ffffff, #d3d3d3);  /* subtle light gray hover */
  color: #0b0d10;             /* dark text for contrast */
  border: 0;                  /* clean look */
  font-size: 18px;
  font-weight: 600;           /* strong headline feel */
}

/* Midnight Blue version of the blue button (Rev 2 hero) */
.btn.mid.hero-btn {
  background:#131922;  /* subtle light gray hover */
  color: #e8eef6;             /* dark text for contrast */
  border: 1.5px solid #9aa4b2;                  /* clean look */
  font-size: 18px;
  font-weight: 400;           /* strong headline feel */
}

/* Smooth motion like your nav links */
.btn.mid.hero-btn{
  transition: transform .125s, background .125s, border-color .125s, box-shadow .125s;
  /* tip: use a supported weight (e.g., 600/700). 250 isn’t widely supported */
  font-weight: 400;
}

/* Hover: lift + darker bg (matches .nav a:hover) */
.btn.mid.hero-btn:hover{
  transform: translateY(-0.75px);
  background:#182131;
  border-color:#233249;
}

/* “Active” state (click or a class you add) */
.btn.mid.hero-btn:active{
  transform: translateY(0); /* press back down */
}
.btn.mid.hero-btn.active{
  outline:2px solid #233249;
  background:#101a28;
}

/* Keyboard focus (accessibility, matches your style) */
.btn.mid.hero-btn:focus-visible{
  outline:2px solid #233249;
  outline-offset:3px;
}

/* optional hover state */
.btn.blue.rev2-btn:hover {
  background:linear-gradient(150deg,#ffffff, #aaaaa0);  /* subtle light gray hover */
  transform: translateY(-0.5px);
}



/* Align to the same edges as header/hero */
.content-shell{
  max-width: var(--site-max);
  margin: -24px auto 40px;        /* slight overlap into hero = premium look */
  padding: 0 var(--gutter);
}

/* The lifted panel */
.content-inner{
  background: linear-gradient(180deg,#0f151d,#0f151d);
  border: 1px solid #101822;
  border-radius: 18px;
  padding: 20px;
  /* Omni/radial-style lift: zero offset + blur + small spread */
  box-shadow:
    0 0 28px 6px rgba(0,0,0,0.28);
}

/* Optional: add a faint colored aura for brand feel */
@media (min-width: 900px){
  .content-inner{
    box-shadow:
      0 0 28px 6px rgba(0,0,0,0.28),
      0 0 60px 0 rgba(13,116,245,0.07); /* subtle blue halo */
  }
}
.hero--full .hero-inner p .btn + .btn {
  margin-left: 8px;   /* Adjust spacing as desired */
}

/* Email links – match site text color instead of browser blue */
a[href^="mailto:"]{
  color: var(--blue);        /* or use your brand blue/green */
  text-decoration: underline; /* optional, remove if you hate underlines */
}

a[href^="mailto:"]:hover{
  color: var(--blue);        /* subtle hover color */
}