/* ============================================================
   SoCal United AI Business Solutions — custom site styles
   Theme: deep navy + gold + electric cyan
   ============================================================ */
:root{
  --navy-900:#060f29;
  --navy-800:#0a1a3f;
  --navy-700:#0c2150;
  --navy-600:#123163;
  --navy-card:#0f2650;
  --ink:#0b1f4d;
  --ink-soft:#33415c;
  --muted:#5b6b86;
  --line:#e4eaf3;
  --bg-soft:#f4f7fb;

  --gold:#e7ad33;
  --gold-2:#f6cf6a;
  --gold-deep:#c8881a;
  --cyan:#1ea7ff;
  --cyan-2:#7fe3ff;

  --kyrie:#2f6fe0;
  --jasmine:#7c3aed;
  --catalaya:#159a63;
  --xayden:#e2620f;
  --custom:#d99a22;

  --maxw:1180px;
  --radius:16px;
  --shadow-sm:0 4px 16px rgba(8,20,46,.08);
  --shadow-md:0 14px 40px rgba(8,20,46,.14);
  --shadow-gold:0 10px 30px rgba(231,173,51,.35);

  --font-head:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.12;margin:0 0 .5em}
h1{font-weight:800;letter-spacing:-.5px}
h2{font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-weight:700}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}
.muted{color:var(--muted)}
.gold-text{color:var(--gold)}
.cyan-text{color:var(--cyan)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;border:0;
  font-family:var(--font-head);font-weight:700;font-size:.84rem;letter-spacing:.6px;
  text-transform:uppercase;padding:.95rem 1.6rem;border-radius:10px;transition:.22s ease;
  white-space:nowrap;
}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));color:#1a1205;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(231,173,51,.5)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-2);background:rgba(30,167,255,.08)}
.btn-navy{background:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-700);transform:translateY(-2px)}
.btn-lg{padding:1.05rem 1.9rem;font-size:.9rem}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--navy-900);color:#aebfdc;font-size:.8rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:.5rem 24px;gap:1rem;flex-wrap:wrap}
.topbar a{color:var(--gold-2)}
.topbar .tb-right{display:flex;gap:1.2rem;align-items:center}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,26,63,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.85rem 24px;gap:1rem}
/* the logo must never absorb the flex shrink — without this it squashes to a sliver.
   .container caps the header at 1180px, so there is no viewport where roomier
   nav metrics fit: these values are the desktop baseline, not a mid-screen fallback. */
.brand{flex:0 0 auto;display:flex;align-items:center}
.brand img{height:56px;width:auto}
.nav-links{display:flex;align-items:center;gap:.95rem;list-style:none;margin:0;padding:0}
.nav-links a{color:#dce6f7;font-family:var(--font-head);font-weight:600;font-size:.76rem;letter-spacing:.4px;text-transform:uppercase;padding:.4rem 0;position:relative;white-space:nowrap}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-links a.active::after,.nav-links a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.nav-cta .btn{padding:.8rem 1.15rem;font-size:.78rem}
.nav-toggle{display:none;background:transparent;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav-toggle span{width:26px;height:2.5px;background:#fff;border-radius:2px;transition:.3s}
.nav-login{font-family:var(--font-head);font-weight:600;font-size:.8rem;letter-spacing:.4px;color:#dce6f7;white-space:nowrap}
.nav-login:hover{color:var(--gold-2)}
/* last squeeze before the links collapse into the hamburger */
@media (max-width:1080px){.nav{padding:.8rem 20px}.nav-links{gap:.75rem}.nav-links a{font-size:.72rem;letter-spacing:.2px}.nav-cta{gap:.6rem}.nav-cta .btn{padding:.7rem 1rem;font-size:.74rem}.nav-login{font-size:.74rem}}
@media (max-width:560px){.nav-login{display:none}}
/* roomier header on phones */
@media (max-width:760px){.nav{padding:.7rem 20px}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1100px 500px at 78% 28%, rgba(30,167,255,.20), transparent 60%),
    linear-gradient(160deg,#0a1c47 0%,#0a1a3f 45%,#060f29 100%);
}
.hero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9Ijc2MCIgdmlld0JveD0iMCAwIDE0NDAgNzYwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1heCBzbGljZSIgcm9sZT0icHJlc2VudGF0aW9uIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ic2t5IiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwYTFjNDciIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNjBmMjkiIHN0b3Atb3BhY2l0eT0iLjkiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsZCIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAyOTVjIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBhMTgzOCIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0ibW9vbiIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlYTdmZiIgc3RvcC1vcGFjaXR5PSIuMjUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWVhN2ZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgoKICA8cmVjdCB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSI3NjAiIGZpbGw9InVybCgjc2t5KSIvPgogIDxjaXJjbGUgY3g9IjQzMCIgY3k9IjIxMCIgcj0iMjIwIiBmaWxsPSJ1cmwoI21vb24pIi8+CgogIDwhLS0gY2lyY3VpdCBuZXR3b3JrIChyaWdodCkgLS0+CiAgPGcgc3Ryb2tlPSIjMWVhN2ZmIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iLjM1IiBmaWxsPSJub25lIj4KICAgIDxwYXRoIGQ9Ik05ODAgMTIwIEwxMDkwIDE3NSBMMTIxMCAxNTAgTDEzMDAgMjEwIi8+CiAgICA8cGF0aCBkPSJNMTA5MCAxNzUgTDExMjAgMjkwIEwxMjQwIDMyMCIvPgogICAgPHBhdGggZD0iTTEyMTAgMTUwIEwxMjMwIDcwIi8+CiAgICA8cGF0aCBkPSJNMTMwMCAyMTAgTDEzODAgMTgwIi8+CiAgICA8cGF0aCBkPSJNMTEyMCAyOTAgTDEwNDAgMzYwIi8+CiAgPC9nPgogIDxnIGZpbGw9IiMxZWE3ZmYiIG9wYWNpdHk9Ii43NSI+CiAgICA8Y2lyY2xlIGN4PSI5ODAiIGN5PSIxMjAiIHI9IjMuNSIvPjxjaXJjbGUgY3g9IjEwOTAiIGN5PSIxNzUiIHI9IjQuNSIvPgogICAgPGNpcmNsZSBjeD0iMTIxMCIgY3k9IjE1MCIgcj0iMy41Ii8+PGNpcmNsZSBjeD0iMTMwMCIgY3k9IjIxMCIgcj0iNCIvPgogICAgPGNpcmNsZSBjeD0iMTIzMCIgY3k9IjcwIiByPSIzIi8+PGNpcmNsZSBjeD0iMTEyMCIgY3k9IjI5MCIgcj0iNCIvPgogICAgPGNpcmNsZSBjeD0iMTI0MCIgY3k9IjMyMCIgcj0iMy41Ii8+PGNpcmNsZSBjeD0iMTM4MCIgY3k9IjE4MCIgcj0iMyIvPgogICAgPGNpcmNsZSBjeD0iMTA0MCIgY3k9IjM2MCIgcj0iMy41Ii8+CiAgPC9nPgoKICA8IS0tIHBhbG0gdHJlZXMgLS0+CiAgPGcgZmlsbD0iIzBhMTgzOCIgb3BhY2l0eT0iLjk1Ij4KICAgIDxwYXRoIGQ9Ik03MCA3NjAgQzY2IDY0MCA2MCA1NjAgNTYgNTIwIEM1NCA1NjAgNTIgNjQwIDUwIDc2MCBaIi8+CiAgICA8ZyBzdHJva2U9IiMwYTE4MzgiIHN0cm9rZS13aWR0aD0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuOSI+CiAgICAgIDxwYXRoIGQ9Ik01NiA1MjAgQzMwIDUwMCA4IDUwMiAtNCA1MTQiLz4KICAgICAgPHBhdGggZD0iTTU2IDUyMCBDMzggNDg4IDM2IDQ2NiA0NCA0NDgiLz4KICAgICAgPHBhdGggZD0iTTU2IDUyMCBDODIgNTAwIDEwNCA1MDIgMTE2IDUxNCIvPgogICAgICA8cGF0aCBkPSJNNTYgNTIwIEM3NCA0ODggNzggNDY2IDcyIDQ0NiIvPgogICAgICA8cGF0aCBkPSJNNTYgNTIwIEM1NiA0OTYgNjAgNDc0IDU2IDQ1NiIvPgogICAgPC9nPgogIDwvZz4KICA8ZyBmaWxsPSIjMGExODM4IiBvcGFjaXR5PSIuOTUiPgogICAgPHBhdGggZD0iTTE0MTAgNzYwIEMxNDA2IDY2MCAxNDAwIDU5NiAxMzk2IDU2MCBDMTM5NCA1OTYgMTM5MiA2NjAgMTM5MCA3NjAgWiIvPgogICAgPGcgc3Ryb2tlPSIjMGExODM4IiBzdHJva2Utd2lkdGg9IjYiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iLjkiPgogICAgICA8cGF0aCBkPSJNMTM5NiA1NjAgQzEzNzIgNTQ0IDEzNTIgNTQ2IDEzNDIgNTU2Ii8+CiAgICAgIDxwYXRoIGQ9Ik0xMzk2IDU2MCBDMTM4MCA1MzIgMTM3OCA1MTQgMTM4NiA0OTgiLz4KICAgICAgPHBhdGggZD0iTTEzOTYgNTYwIEMxNDIwIDU0NCAxNDQwIDU0NiAxNDUwIDU1NiIvPgogICAgICA8cGF0aCBkPSJNMTM5NiA1NjAgQzE0MTIgNTMyIDE0MTYgNTE0IDE0MDggNDk4Ii8+CiAgICA8L2c+CiAgPC9nPgoKICA8IS0tIGNpdHkgc2t5bGluZSAtLT4KICA8ZyBmaWxsPSJ1cmwoI2JsZCkiPgogICAgPHJlY3QgeD0iMTUwIiB5PSI1NjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIyMDAiLz4KICAgIDxyZWN0IHg9IjIyOCIgeT0iNTIwIiB3aWR0aD0iNTQiIGhlaWdodD0iMjQwIi8+CiAgICA8cmVjdCB4PSIyOTAiIHk9IjU4NSIgd2lkdGg9IjQ2IiBoZWlnaHQ9IjE3NSIvPgogICAgPHJlY3QgeD0iMzQ0IiB5PSI0NzAiIHdpZHRoPSI2MCIgaGVpZ2h0PSIyOTAiLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMzc0LDQ3MCAzNzQsNDMwIDM4MCw0MzAgMzgwLDQ3MCIvPgogICAgPHJlY3QgeD0iNDEyIiB5PSI1NDAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMjAiLz4KICAgIDxyZWN0IHg9IjQ3MCIgeT0iNTAwIiB3aWR0aD0iNjQiIGhlaWdodD0iMjYwIi8+CiAgICA8cmVjdCB4PSI1NDIiIHk9IjU3NSIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjE4NSIvPgogICAgPHJlY3QgeD0iNTk0IiB5PSI0NTAiIHdpZHRoPSI3MiIgaGVpZ2h0PSIzMTAiLz4KICAgIDxyZWN0IHg9IjY3NCIgeT0iNTQwIiB3aWR0aD0iNTIiIGhlaWdodD0iMjIwIi8+CiAgICA8cmVjdCB4PSI3MzQiIHk9IjUwNSIgd2lkdGg9IjU4IiBoZWlnaHQ9IjI1NSIvPgogICAgPHJlY3QgeD0iODAwIiB5PSI1NzUiIHdpZHRoPSI0NiIgaGVpZ2h0PSIxODUiLz4KICAgIDxyZWN0IHg9Ijg1NCIgeT0iNDg1IiB3aWR0aD0iNjYiIGhlaWdodD0iMjc1Ii8+CiAgICA8cmVjdCB4PSI5MjgiIHk9IjU1NSIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIwNSIvPgogICAgPHJlY3QgeD0iOTg2IiB5PSI2MDAiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxNjAiLz4KICAgIDxyZWN0IHg9IjEwNTQiIHk9IjUzNSIgd2lkdGg9IjU0IiBoZWlnaHQ9IjIyNSIvPgogICAgPHJlY3QgeD0iMTExNiIgeT0iNTg1IiB3aWR0aD0iNDgiIGhlaWdodD0iMTc1Ii8+CiAgICA8cmVjdCB4PSIxMTcyIiB5PSI1MTAiIHdpZHRoPSI2MiIgaGVpZ2h0PSIyNTAiLz4KICAgIDxyZWN0IHg9IjEyNDIiIHk9IjU2MCIgd2lkdGg9IjU2IiBoZWlnaHQ9IjIwMCIvPgogICAgPHJlY3QgeD0iMTMwNiIgeT0iNjAwIiB3aWR0aD0iNzAiIGhlaWdodD0iMTYwIi8+CiAgPC9nPgogIDwhLS0gd2luZG93IGxpZ2h0cyAtLT4KICA8ZyBmaWxsPSIjMWVhN2ZmIiBvcGFjaXR5PSIuNSI+CiAgICA8cmVjdCB4PSIzNTYiIHk9IjQ5MiIgd2lkdGg9IjYiIGhlaWdodD0iOSIvPjxyZWN0IHg9IjM3MiIgeT0iNDkyIiB3aWR0aD0iNiIgaGVpZ2h0PSI5Ii8+CiAgICA8cmVjdCB4PSIzNTYiIHk9IjUxMiIgd2lkdGg9IjYiIGhlaWdodD0iOSIvPjxyZWN0IHg9IjM4OCIgeT0iNTEyIiB3aWR0aD0iNiIgaGVpZ2h0PSI5Ii8+CiAgICA8cmVjdCB4PSI2MTAiIHk9IjQ3NiIgd2lkdGg9IjYiIGhlaWdodD0iOSIvPjxyZWN0IHg9IjYzMCIgeT0iNDc2IiB3aWR0aD0iNiIgaGVpZ2h0PSI5Ii8+CiAgICA8cmVjdCB4PSI2MTAiIHk9IjUwMCIgd2lkdGg9IjYiIGhlaWdodD0iOSIvPjxyZWN0IHg9IjY0OCIgeT0iNTAwIiB3aWR0aD0iNiIgaGVpZ2h0PSI5Ii8+CiAgICA8cmVjdCB4PSI0ODgiIHk9IjUyNCIgd2lkdGg9IjYiIGhlaWdodD0iOSIvPjxyZWN0IHg9IjUxMCIgeT0iNTI0IiB3aWR0aD0iNiIgaGVpZ2h0PSI5Ii8+CiAgICA8cmVjdCB4PSI4NzAiIHk9IjUxMCIgd2lkdGg9IjYiIGhlaWdodD0iOSIvPjxyZWN0IHg9Ijg5NCIgeT0iNTEwIiB3aWR0aD0iNiIgaGVpZ2h0PSI5Ii8+CiAgICA8cmVjdCB4PSIxMTg4IiB5PSI1MzQiIHdpZHRoPSI2IiBoZWlnaHQ9IjkiLz48cmVjdCB4PSIxMjEwIiB5PSI1MzQiIHdpZHRoPSI2IiBoZWlnaHQ9IjkiLz4KICA8L2c+CiAgPGcgZmlsbD0iI2U3YWQzMyIgb3BhY2l0eT0iLjU1Ij4KICAgIDxyZWN0IHg9IjM3MiIgeT0iNTMyIiB3aWR0aD0iNiIgaGVpZ2h0PSI5Ii8+PHJlY3QgeD0iNjMwIiB5PSI1MjQiIHdpZHRoPSI2IiBoZWlnaHQ9IjkiLz4KICAgIDxyZWN0IHg9IjUxMCIgeT0iNTQ4IiB3aWR0aD0iNiIgaGVpZ2h0PSI5Ii8+PHJlY3QgeD0iODk0IiB5PSI1NDAiIHdpZHRoPSI2IiBoZWlnaHQ9IjkiLz4KICAgIDxyZWN0IHg9IjEyMTAiIHk9IjU2MCIgd2lkdGg9IjYiIGhlaWdodD0iOSIvPjxyZWN0IHg9IjM1NiIgeT0iNTUyIiB3aWR0aD0iNiIgaGVpZ2h0PSI5Ii8+CiAgPC9nPgo8L3N2Zz4K") center bottom/cover no-repeat;opacity:.9;pointer-events:none}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;padding:4.2rem 0 3.4rem}
.eyebrow{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--cyan-2);background:rgba(30,167,255,.12);border:1px solid rgba(30,167,255,.3);padding:.4rem .9rem;border-radius:30px;margin-bottom:1.3rem}
.hero h1{color:#fff;font-size:clamp(2.4rem,5vw,4rem);margin-bottom:1.1rem;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 .accent{color:var(--gold);display:block}
.hero-sub{font-size:1.1rem;color:#c9d6ee;max-width:33rem;margin-bottom:1.7rem}

.hero-feats{display:flex;gap:1.4rem;flex-wrap:wrap;margin:1.6rem 0 2rem}
.hfeat{display:flex;flex-direction:column;align-items:center;gap:.45rem;width:78px;text-align:center}
.hfeat-ic{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:rgba(30,167,255,.1);border:1px solid rgba(30,167,255,.28)}
.hfeat-ic svg{width:24px;height:24px;stroke:var(--cyan-2)}
.hfeat-lbl{font-size:.72rem;color:#aebfdc;line-height:1.25;font-weight:500}

.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* hero right column */
.hero-visual{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.brain-wrap{position:relative;width:340px;max-width:100%}
.brain-wrap .ring{animation:spin 26s linear infinite;transform-origin:center}
.brain-wrap .ring.rev{animation-direction:reverse;animation-duration:34s}
.brain-core{animation:pulse 3.4s ease-in-out infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.85}50%{opacity:1}}
.built-card{background:linear-gradient(160deg,rgba(15,38,86,.92),rgba(8,20,46,.92));border:1px solid rgba(30,167,255,.25);border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:var(--shadow-md);max-width:340px;width:100%}
.built-card h4{color:var(--gold-2);font-size:.95rem;letter-spacing:.5px;margin-bottom:.9rem;text-transform:uppercase}
.built-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.built-card li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:#dbe6f8}
.built-card li svg{width:18px;height:18px;flex:none;stroke:var(--cyan)}

/* ---------- Section base ---------- */
.section{padding:4.6rem 0}
.section.soft{background:var(--bg-soft)}
.section-head{text-align:center;max-width:46rem;margin:0 auto 2.8rem}
.section-head .kicker{font-family:var(--font-head);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.78rem;color:var(--gold-deep);margin-bottom:.6rem;display:block}
.section-head p{color:var(--muted);font-size:1.05rem}

/* ---------- Meet the team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
.agent-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.5rem 1.2rem;text-align:center;transition:.25s ease;position:relative;overflow:hidden}
.agent-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c,#2f6fe0)}
.agent-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.agent-card img{width:104px;height:104px;margin:0 auto .9rem;filter:drop-shadow(0 8px 16px rgba(8,20,46,.15))}
.agent-card h3{font-size:1.18rem;color:var(--c);margin-bottom:.15rem}
.agent-role{font-size:.86rem;color:var(--muted);font-weight:600;margin-bottom:.9rem;min-height:2.4em}
.agent-list{list-style:none;margin:0 0 1.1rem;padding:0;text-align:left;display:grid;gap:.5rem}
.agent-list li{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem;color:var(--ink-soft)}
.agent-list li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--c)}
.agent-more{font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.6px;text-transform:uppercase;color:var(--c);display:inline-flex;align-items:center;gap:.35rem}
.agent-more:hover{gap:.6rem}

/* ---------- Value band ---------- */
.value-band{background:linear-gradient(120deg,#0a1c47,#0a1a3f 55%,#08152f);color:#fff;padding:3rem 0}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.value-item{display:flex;gap:1rem;align-items:flex-start}
.value-ic{width:54px;height:54px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(231,173,51,.12);border:1px solid rgba(231,173,51,.3)}
.value-ic svg{width:28px;height:28px;stroke:var(--gold-2)}
.value-item h4{color:#fff;margin-bottom:.25rem;font-size:1.02rem}
.value-item p{color:#aebfdc;font-size:.88rem;margin:0}

/* ---------- Generic cards / grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow-sm);transition:.22s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.card .ic{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#eaf3ff,#d6e7ff);margin-bottom:1rem}
.card .ic svg{width:26px;height:26px;stroke:var(--kyrie)}
.clean{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.55rem}
.clean li{display:flex;gap:.55rem;align-items:flex-start;color:var(--ink-soft);font-size:.95rem}
.clean li svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--catalaya)}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.price-card{position:relative;border:1px solid var(--line);border-radius:18px;padding:1.8rem;background:#fff;box-shadow:var(--shadow-sm);transition:.22s;display:flex;flex-direction:column}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.price-card .tag{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:.72rem;color:#fff;background:var(--c,#2f6fe0);padding:.3rem .7rem;border-radius:20px;align-self:flex-start;margin-bottom:1rem}
.price-card h3{font-size:1.2rem}
.price-amt{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--ink);margin:.4rem 0 1rem}
.price-amt small{font-weight:600;font-size:.85rem;color:var(--muted)}
.price-card.feature{border:2px solid var(--gold);box-shadow:var(--shadow-gold)}
.ribbon{position:absolute;top:1.4rem;right:-2px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1a1205;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.5px;padding:.3rem .8rem;border-radius:6px 0 0 6px}

.offer-banner{background:linear-gradient(135deg,var(--gold-2),var(--gold) 60%,var(--gold-deep));color:#1a1205;border-radius:14px;padding:1.1rem 1.5rem;text-align:center;font-weight:600;margin-bottom:2.4rem;box-shadow:var(--shadow-gold)}
.offer-banner strong{font-family:var(--font-head)}

/* ---------- Split / about ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:2.6rem;align-items:center}
.lead{font-size:1.18rem;color:var(--ink-soft)}
.promise-card{background:linear-gradient(160deg,#0c2150,#0a1a3f);color:#fff;border-radius:18px;padding:2rem;box-shadow:var(--shadow-md)}
.promise-card h3{color:#fff}
.promise-card .clean li{color:#cdd9ef}
.promise-card .clean li svg{color:var(--cyan-2)}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.5rem}
.stat{text-align:center;padding:1.2rem;border-radius:14px;background:var(--bg-soft);border:1px solid var(--line)}
.stat b{display:block;font-family:var(--font-head);font-size:1.9rem;color:var(--navy-700);font-weight:800}
.stat span{font-size:.82rem;color:var(--muted)}

/* ---------- CTA strip ---------- */
.cta-strip{background:
    radial-gradient(800px 300px at 80% 20%,rgba(30,167,255,.25),transparent 60%),
    linear-gradient(120deg,#0a1c47,#08152f);
  color:#fff;text-align:center;padding:3.6rem 0;border-radius:0}
.cta-strip h2{color:#fff}
.cta-strip p{color:#c9d6ee;max-width:38rem;margin:0 auto 1.6rem}

/* ---------- Booking ---------- */
.booking-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:start}
.cal-embed{min-height:640px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fff}
.form{display:grid;gap:.9rem}
.form input,.form select,.form textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;font-family:var(--font-body);font-size:.95rem;background:#fbfcfe;transition:.2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(30,167,255,.15)}
.form textarea{min-height:120px;resize:vertical}
.notice{font-size:.9rem;color:var(--catalaya);font-weight:600;min-height:1.2em}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
.contact-item{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.4rem}
.contact-item .ic{width:48px;height:48px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#eaf3ff,#d6e7ff)}
.contact-item .ic svg{width:22px;height:22px;stroke:var(--kyrie)}
.contact-item h4{margin-bottom:.15rem}
.contact-item p,.contact-item a{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#9fb1d0;padding:3.2rem 0 1.6rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem;margin-bottom:2rem}
.footer-grid h5{font-family:var(--font-head);color:#fff;font-size:.9rem;letter-spacing:.5px;text-transform:uppercase;margin:0 0 1rem}
.footer-grid a{display:block;color:#9fb1d0;font-size:.9rem;padding:.25rem 0}
.footer-grid a:hover{color:var(--gold-2)}
.footer-brand img{height:64px;margin-bottom:1rem}
.footer-brand p{font-size:.9rem;color:#9fb1d0;max-width:22rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.82rem;color:#7e90b3}
.footer-social{display:flex;gap:.7rem}
.footer-social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.footer-social a:hover{background:var(--gold);border-color:var(--gold)}
.footer-social svg{width:18px;height:18px;fill:#cdd9ef}
.footer-social a:hover svg{fill:#1a1205}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Page hero (interior) ---------- */
.page-hero{background:
    radial-gradient(800px 360px at 75% 20%,rgba(30,167,255,.2),transparent 60%),
    linear-gradient(155deg,#0a1c47,#0a1a3f 50%,#060f29);
  color:#fff;padding:3.4rem 0;text-align:center}
.page-hero h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:.6rem}
.page-hero p{color:#c9d6ee;max-width:40rem;margin:0 auto}
.crumbs{font-size:.82rem;color:#8ea4cd;margin-bottom:1rem}
.crumbs a:hover{color:var(--gold-2)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero-visual{order:-1}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3,.price-grid{grid-template-columns:1fr 1fr}
  .split,.grid-2,.booking-grid,.contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}
/* Collapse the links into the hamburger at 1000px, not 760px: between those two
   widths the logo + 5 links + CTA cannot fit and the CTA ran off the right edge. */
@media (max-width:1000px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--navy-800);padding:1.2rem 24px;gap:1rem;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-links.open a{font-size:.95rem}
}
@media (max-width:760px){
  .topbar .tb-left{display:none}
  .hero-feats{justify-content:space-between;gap:.6rem}
  .hfeat{width:60px}
}
@media (max-width:560px){
  .team-grid,.grid-3,.price-grid,.value-grid,.footer-grid,.stat-row{grid-template-columns:1fr}
  .nav-cta .btn-text{display:none}
  .topbar{font-size:.72rem}
  .section{padding:3.2rem 0}
}

/* ============================================================
   Phase 2 additions — demo funnel, forms, portal, admin
   ============================================================ */
/* agent card actions (home) */
.agent-actions{display:flex;flex-direction:column;gap:.6rem;align-items:center;margin-top:.2rem}
.agent-demo{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;
  font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.4px;text-transform:uppercase;
  padding:.6rem .8rem;border-radius:9px;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  color:#1a1205;transition:.2s}
.agent-demo:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold)}

/* selected-service banner (demo form) */
.selected-service{display:flex;align-items:center;gap:1rem;background:linear-gradient(160deg,#0c2150,#0a1a3f);
  color:#fff;border-radius:16px;padding:1.2rem 1.4rem;box-shadow:var(--shadow-md);margin-bottom:1.8rem;border:1px solid rgba(30,167,255,.25)}
.selected-service img{width:64px;height:64px;flex:none}
.selected-service .ss-label{font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--cyan-2);font-weight:700;font-family:var(--font-head)}
.selected-service h3{color:#fff;margin:.15rem 0 0;font-size:1.3rem}
.selected-service p{margin:.1rem 0 0;color:#aebfdc;font-size:.9rem}
.selected-service select{margin-left:auto;background:#0a1a3f;color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:9px;padding:.55rem .8rem;font-family:var(--font-body);font-size:.9rem}

/* form building blocks */
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.8rem;box-shadow:var(--shadow-sm);margin-bottom:1.5rem}
.form-card h3{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:2px solid var(--bg-soft)}
.form-card h3 .num{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--navy-700);color:#fff;font-size:.8rem;font-family:var(--font-head)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:1 / -1}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.field label .req{color:#d64545}
.field input,.field select,.field textarea{padding:.8rem .9rem;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font-body);font-size:.94rem;background:#fbfcfe;transition:.2s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(30,167,255,.15)}
.field textarea{min-height:96px;resize:vertical}
.agent-questions{display:none}
.agent-questions.active{display:block;animation:fadeUp .4s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hint{background:rgba(30,167,255,.07);border-left:3px solid var(--cyan);border-radius:0 8px 8px 0;padding:.7rem 1rem;font-size:.85rem;color:var(--ink-soft);margin-bottom:1.2rem}

/* success state */
.form-success{display:none;text-align:center;background:#fff;border-radius:18px;padding:3rem 2rem;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.form-success.show{display:block;animation:fadeUp .5s ease}
.form-success .check{width:78px;height:78px;margin:0 auto 1.2rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#34d399,#159a63)}
.form-success .check svg{width:40px;height:40px;stroke:#fff;stroke-width:3;fill:none}
.form-success h2{margin-bottom:.6rem}
.timeline{display:grid;gap:.8rem;max-width:26rem;margin:1.6rem auto 0;text-align:left}
.timeline .step{display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;color:var(--ink-soft)}
.timeline .step .dot{width:22px;height:22px;flex:none;border-radius:50%;background:var(--navy-700);color:#fff;display:grid;place-items:center;font-size:.7rem;font-family:var(--font-head)}

@media (max-width:680px){ .form-grid{grid-template-columns:1fr} .selected-service{flex-wrap:wrap} .selected-service select{margin-left:0;width:100%} }

/* ---------- Demo portal: in-panel call ----------
   The prospect came here to hear the agent. Vapi's own launcher is a small
   bubble in the page corner that testers kept missing entirely, so the call is
   promoted to the primary action inside the demo panel. */
.dp-call{width:100%;max-width:420px;margin:0 auto;text-align:center}
.dp-call-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;cursor:pointer;border:0;
  font-family:var(--font-head);font-weight:800;font-size:1.05rem;letter-spacing:.5px;text-transform:uppercase;
  padding:1.15rem 1.4rem;border-radius:14px;transition:.2s ease;color:#1a1205;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  box-shadow:0 10px 30px rgba(231,173,51,.45);
}
.dp-call-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 38px rgba(231,173,51,.55)}
.dp-call-btn:disabled{opacity:.65;cursor:default;box-shadow:none}
.dp-call-btn .dp-call-ic{font-size:1.25rem}
/* Live call — red so "this is running" and "press to hang up" read instantly. */
.dp-call-btn.busy{background:linear-gradient(135deg,#e8503f,#c9302c);color:#fff;box-shadow:0 10px 30px rgba(201,48,44,.45)}
.dp-call-btn.busy:hover:not(:disabled){box-shadow:0 16px 38px rgba(201,48,44,.55)}
.dp-call-status{margin:.9rem 0 0;font-size:.88rem;line-height:1.5;color:#4a5a75}
.dp-call-help{display:none;margin:.9rem auto 0;text-align:left;background:#fff;border:1px solid #e2e8f2;
  border-left:3px solid var(--gold);border-radius:10px;padding:.85rem .95rem;font-size:.82rem;line-height:1.55;color:#3c4a63}
.dp-call-help.show{display:block}
.dp-call-help ul{margin:.5rem 0 0;padding-left:1.1rem}
.dp-call-help li{margin-bottom:.4rem}
.dp-call-help-foot{display:block;margin-top:.5rem;color:#6b7a93}

/* ---------- Demo form: embedded Cal.com booker ----------
   Replaces the old "preferred contact / best time" dropdowns. Cal owns the
   slot logic and the 2-business-day window; we only mirror the result. */
.cal-embed{min-height:560px;width:100%;overflow:auto;border:1px solid #e2e8f2;border-radius:12px;background:#fff}
.cal-booked{display:none;margin-top:.8rem;padding:.8rem .95rem;border-radius:10px;
  background:#eafaf1;border:1px solid #bce6cf;border-left:3px solid #23a35b;
  font-size:.88rem;line-height:1.5;color:#1c5637}
.cal-booked.show{display:block}
@media (max-width:680px){ .cal-embed{min-height:640px} }
.cal-fallback{padding:2rem 1.2rem;text-align:center}
.cal-fallback p{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.cal-fallback-alt{margin:1rem 0 0;font-size:.84rem}
.cal-fallback-alt a{color:var(--gold-deep);font-weight:600}