/* CYBERSIDE.AI Small Business Front Door — 2026-09-25 */
:root{--sb-cyan:#5ee7ff;--sb-green:#6cf9b2;--sb-violet:#b4a1ff;--sb-ink:#071020;--sb-panel:rgba(12,27,58,.78);--sb-line:rgba(94,231,255,.22)}
.sb-hero{position:relative;padding:72px 0 54px;overflow:hidden}.sb-hero:before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-230px;border-radius:50%;background:radial-gradient(circle,rgba(94,231,255,.18),transparent 67%);pointer-events:none}.sb-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);gap:34px;align-items:center}.sb-kicker{font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--sb-cyan);margin-bottom:12px}.sb-hero h1{font-size:clamp(2.7rem,6vw,5.2rem);line-height:.98;letter-spacing:-.055em;margin:0 0 20px;max-width:900px}.sb-hero h1 span{background:linear-gradient(90deg,var(--sb-cyan),var(--sb-violet) 58%,var(--sb-green));-webkit-background-clip:text;background-clip:text;color:transparent}.sb-lead{font-size:clamp(1.02rem,1.8vw,1.22rem);line-height:1.72;color:#b9cde5;max-width:760px}.sb-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}.sb-note{font-size:.92rem;color:#91abc7}.sb-hero-panel{padding:22px;border:1px solid var(--sb-line);border-radius:24px;background:linear-gradient(155deg,rgba(20,43,86,.9),rgba(8,19,43,.88));box-shadow:0 24px 70px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.06)}.sb-panel-head{display:flex;justify-content:space-between;gap:14px;align-items:center;padding-bottom:15px;margin-bottom:14px;border-bottom:1px solid rgba(120,190,255,.14)}.sb-panel-head strong{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}.sb-live{font-size:.7rem;padding:6px 9px;border-radius:999px;border:1px solid rgba(108,249,178,.36);color:#caffdf;background:rgba(108,249,178,.08)}.sb-route{display:grid;gap:10px}.sb-route a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px;border-radius:14px;border:1px solid rgba(132,194,255,.18);background:rgba(255,255,255,.025);color:inherit;text-decoration:none;transition:.18s}.sb-route a:hover,.sb-route a:focus-visible{transform:translateX(3px);border-color:rgba(94,231,255,.58);background:rgba(94,231,255,.08);outline:none}.sb-route-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(94,231,255,.09);font-size:1.05rem}.sb-route strong{display:block;color:#effaff;font-size:.94rem}.sb-route small{display:block;color:#92aec9;margin-top:2px;line-height:1.35}.sb-route-arrow{color:var(--sb-cyan);font-weight:900}.sb-section{padding:62px 0}.sb-section.alt{background:linear-gradient(180deg,rgba(13,26,60,.24),rgba(7,15,36,.06))}.sb-section-head{max-width:800px;margin-bottom:26px}.sb-section-head h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:.25em 0}.sb-section-head p{color:#a9c0d9;line-height:1.65}.sb-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.sb-card{display:block;padding:20px;border-radius:18px;border:1px solid rgba(126,190,255,.2);background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018));color:inherit;text-decoration:none;transition:.18s}.sb-card:hover,.sb-card:focus-visible{transform:translateY(-3px);border-color:rgba(94,231,255,.6);box-shadow:0 18px 42px rgba(0,0,0,.22);outline:none}.sb-card .icon{font-size:1.55rem}.sb-card h3{margin:.7rem 0 .4rem;color:#eefaff}.sb-card p{margin:0;color:#9fb9d3;line-height:1.55}.sb-card em{display:block;margin-top:14px;color:#7feaff;font-style:normal;font-weight:800}.sb-problem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.sb-problem{padding:17px;border:1px solid rgba(126,190,255,.18);border-radius:16px;background:rgba(255,255,255,.025)}.sb-problem b{display:block;color:#eefaff;margin:6px 0}.sb-problem p{margin:0;color:#91acc7;font-size:.9rem;line-height:1.45}.sb-industry-chips{display:flex;flex-wrap:wrap;gap:10px}.sb-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(94,231,255,.25);border-radius:999px;background:rgba(94,231,255,.055);color:#daf8ff;text-decoration:none}.sb-chip:hover,.sb-chip:focus-visible{border-color:rgba(108,249,178,.62);background:rgba(108,249,178,.08);outline:none}.sb-free-band{display:grid;grid-template-columns:1fr auto;gap:25px;align-items:center;padding:28px;border:1px solid rgba(108,249,178,.32);border-radius:22px;background:linear-gradient(120deg,rgba(108,249,178,.1),rgba(94,231,255,.08),rgba(180,161,255,.07))}.sb-free-band h2{margin:0 0 8px}.sb-free-band p{margin:0;color:#a9c2da;line-height:1.6}.sb-pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.sb-pill{padding:6px 10px;border:1px solid rgba(150,210,255,.19);border-radius:999px;color:#bcd5ea;font-size:.8rem}.sb-center{text-align:center;max-width:820px;margin:0 auto}.sb-center .sb-actions{justify-content:center}.sb-nav-cta{border-color:rgba(108,249,178,.52)!important;background:rgba(108,249,178,.09)!important;color:#d9ffea!important}
/* Opportunity Finder */
.of-shell{padding:58px 0 72px}.of-layout{display:grid;grid-template-columns:minmax(0,.88fr) minmax(320px,1.12fr);gap:24px;align-items:start}.of-card{padding:22px;border:1px solid rgba(126,190,255,.22);border-radius:22px;background:linear-gradient(155deg,rgba(18,37,78,.86),rgba(8,18,41,.9));box-shadow:0 18px 52px rgba(0,0,0,.24)}.of-card h2{margin-top:0}.of-field{margin:0 0 20px}.of-field>label,.of-field>legend{display:block;margin-bottom:8px;color:#e7f7ff;font-weight:800}.of-field select{width:100%;padding:12px 13px;border:1px solid rgba(126,190,255,.3);border-radius:12px;background:#0c1830;color:#eefaff;font:inherit}.of-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.of-check{display:flex;gap:9px;align-items:flex-start;padding:10px;border:1px solid rgba(126,190,255,.17);border-radius:12px;background:rgba(255,255,255,.02);cursor:pointer}.of-check input{margin-top:3px}.of-results-empty{color:#95aec8;line-height:1.6}.of-result-list{display:grid;gap:12px}.of-result{padding:16px;border:1px solid rgba(94,231,255,.2);border-radius:15px;background:rgba(94,231,255,.045)}.of-result-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.of-result h3{margin:0;color:#effaff}.of-value{white-space:nowrap;font-size:.69rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:rgba(108,249,178,.1);border:1px solid rgba(108,249,178,.32);color:#baffd7}.of-result p{color:#9fbad4;line-height:1.5}.of-links{display:flex;flex-wrap:wrap;gap:8px}.of-links a{font-size:.82rem;font-weight:800}.of-summary{margin-bottom:16px;padding:14px;border-left:3px solid var(--sb-cyan);background:rgba(94,231,255,.055);border-radius:0 12px 12px 0;color:#bcd2e8}.of-privacy{font-size:.8rem;color:#849fbb;margin-top:12px}
@media(max-width:980px){.sb-grid,.of-layout{grid-template-columns:1fr}.sb-card-grid{grid-template-columns:1fr 1fr}.sb-problem-grid{grid-template-columns:1fr 1fr}.sb-free-band{grid-template-columns:1fr}.sb-hero-panel{max-width:700px}}
@media(max-width:620px){.sb-hero{padding:50px 0 38px}.sb-card-grid,.sb-problem-grid,.of-checks{grid-template-columns:1fr}.sb-actions .btn{width:100%;justify-content:center}.sb-section{padding:48px 0}.sb-free-band{padding:21px}.of-shell{padding-top:40px}}

/* Header overlap hotfix — 2026-09-25
   At mid-size desktop widths the combined brand, primary nav, CTA, and search
   exceed one line. Allow a controlled two-row header before the mobile menu
   breakpoint so navigation never intrudes into the CYBERSIDE.AI brand. */
@media (min-width:981px) and (max-width:1440px){
  .site-header .nav{
    flex-wrap:wrap !important;
    column-gap:14px;
    row-gap:0;
    padding-top:8px;
    padding-bottom:8px;
  }
  .site-header .brand{
    flex:0 0 auto;
    min-width:max-content;
    position:relative;
    z-index:2;
  }
  .site-header .nav-links{
    flex:1 1 0;
    min-width:0;
    justify-content:flex-end;
    overflow:visible;
  }
  .site-header .site-search{
    order:3;
    flex:0 1 430px;
    min-width:250px;
    max-width:430px;
    margin-left:auto;
    margin-top:7px;
    margin-bottom:0;
  }
}

/* At the tightest desktop widths, trim menu chrome slightly while preserving
   readable labels. The mobile menu still takes over at 980px and below. */
@media (min-width:981px) and (max-width:1180px){
  .site-header .nav-links > a,
  .site-header .nav-dropdown-toggle{
    font-size:11.5px;
    padding-left:5px;
    padding-right:5px;
  }
  .site-header .nav{column-gap:10px;}
}

/* Header overlap definitive fix — 2026-09-25 v2
   Mid-size desktop gets a deterministic two-row layout:
   row 1 = brand + search, row 2 = full navigation.
   This prevents nowrap navigation contents from overflowing left into the brand. */
@media (min-width:981px) and (max-width:1440px){
  .site-header .nav{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px 16px !important;
    padding:9px 0 10px !important;
    min-height:0 !important;
  }
  .site-header .brand{
    order:1 !important;
    flex:0 0 auto !important;
    min-width:max-content !important;
    margin:0 !important;
  }
  .site-header .site-search{
    order:2 !important;
    flex:0 1 360px !important;
    width:min(360px,42vw) !important;
    min-width:240px !important;
    max-width:360px !important;
    margin:0 0 0 auto !important;
  }
  .site-header .menu-btn{
    display:none !important;
  }
  .site-header .nav-links{
    order:3 !important;
    display:flex !important;
    position:static !important;
    flex:1 0 100% !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    max-height:none !important;
  }
  .site-header .nav-links > a,
  .site-header .nav-dropdown-toggle{
    width:auto !important;
    min-height:0 !important;
    background:transparent !important;
    font-size:12px !important;
    padding:7px 7px !important;
  }
  .site-header .nav-dropdown{
    width:auto !important;
    flex:0 0 auto !important;
  }
  .site-header .nav-dropdown-menu{
    position:absolute !important;
  }
}

@media (min-width:981px) and (max-width:1180px){
  .site-header .nav-links > a,
  .site-header .nav-dropdown-toggle{
    font-size:11px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }
}

/* Header overlap root-cause fix — 2026-09-25 v3
   The primary nav is a shrinkable flex item. With justify-content:flex-end,
   an over-wide nowrap menu overflows LEFT into the brand. Anchor nav contents
   at the left edge instead, widen only the header container on large screens,
   and reserve explicit separation from the brand. */
@media (min-width:1451px){
  .site-header .container.nav{
    width:min(1580px,96vw) !important;
    max-width:none !important;
  }
  .site-header .nav{
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:14px !important;
  }
  .site-header .brand{
    flex:0 0 auto !important;
    min-width:max-content !important;
    margin-right:14px !important;
    position:relative !important;
    z-index:3 !important;
  }
  .site-header .nav-links{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow:visible !important;
    margin-left:0 !important;
  }
  .site-header .site-search{
    flex:0 1 235px !important;
    min-width:185px !important;
    max-width:250px !important;
    margin-left:auto !important;
  }
}

/* Keep the deterministic two-row layout through the full constrained-header
   range. This overlaps the base site's 1121px search breakpoint cleanly. */
@media (min-width:981px) and (max-width:1450px){
  .site-header .nav-links{
    justify-content:center !important;
  }
}

/* Phase 3: clickable problem cards */
.sb-problem{text-decoration:none;color:inherit;display:block;transition:.18s ease}.sb-problem:hover{transform:translateY(-3px);border-color:rgba(108,249,178,.55)}.sb-problem em{display:block;margin-top:12px;color:#6cf9b2;font-style:normal;font-weight:800;font-size:.84rem}