:root{--purple-900:#3B1264;--purple-700:#6B21A8;--purple-100:#EFE4F7;--purple-50:#F8F4FC;--slate-900:#1E2532;--slate-700:#3E4658;--slate-500:#6B7385;--slate-200:#DCE0E8;--slate-100:#EEF1F5;--white:#fff;--green:#147A58;--red:#9C1C1C;--focus:#1E88E5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Public Sans',Arial,sans-serif;color:var(--slate-900);line-height:1.6;background:#fff}a{color:var(--purple-700)}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.skip{position:absolute;left:-999px;background:var(--purple-900);color:#fff;padding:10px 16px;z-index:500}.skip:focus{left:0}.util{background:var(--slate-900);color:#d7dbe4;padding:8px 20px;display:flex;justify-content:space-between;align-items:center;font-size:13px}.quick{background:var(--red);color:#fff;border:0;border-radius:5px;padding:9px 16px;font-weight:800;cursor:pointer}.header{border-bottom:1px solid var(--slate-200);padding:18px 20px;background:#fff}.nav{max-width:1180px;margin:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;color:var(--slate-900)}.mark{width:46px;height:46px;border-radius:10px;background:linear-gradient(155deg,var(--purple-700),var(--purple-900));display:grid;place-items:center;color:#fff;font-weight:800}.brand small{display:block;color:var(--slate-500)}.links{display:flex;gap:16px;flex-wrap:wrap}.links a{text-decoration:none;font-weight:700;font-size:14px}.hero{max-width:900px;margin:auto;text-align:center;padding:64px 20px 40px}.eyebrow{color:var(--purple-700);font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.08;margin:12px 0}.hero p{max-width:720px;margin:0 auto 26px;color:var(--slate-700);font-size:18px}.btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.btn{display:inline-block;text-decoration:none;border-radius:8px;padding:12px 18px;font-weight:800}.primary{background:var(--purple-700);color:#fff}.secondary{border:2px solid var(--purple-700);color:var(--purple-700)}.trustbar{background:var(--purple-50);border-block:1px solid var(--purple-100);padding:18px 20px}.trustgrid{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.trustitem{text-align:center;font-weight:800;color:var(--purple-900)}.section{max-width:1100px;margin:auto;padding:58px 20px}.section.alt{max-width:none;background:var(--slate-100)}.section.alt>.inner{max-width:1100px;margin:auto}.section h2{font-size:clamp(26px,4vw,36px);margin:0 0 12px}.lead{max-width:760px;color:var(--slate-700);margin-bottom:28px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid var(--slate-200);border-radius:14px;padding:22px;background:#fff}.card h3{margin-top:0}.icon{width:42px;height:42px;border-radius:10px;background:var(--purple-100);display:grid;place-items:center;color:var(--purple-700);font-weight:800;margin-bottom:14px}.team .role{color:var(--purple-700);font-weight:800}.note{background:#fff8df;border:1px solid #ecd58a;padding:14px 16px;border-radius:10px;font-size:14px}.hub{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}.hub button{width:100%;text-align:left;cursor:pointer}.quote{font-size:24px;font-weight:700;color:var(--purple-900);border-left:6px solid var(--purple-700);padding-left:20px}.contact{background:var(--purple-900);color:#fff;border-radius:18px;padding:32px}.contact a{color:#e3d5f3}.footer{background:var(--slate-900);color:#aeb5c3;padding:30px 20px}.footer .inner{max-width:1100px;margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.modal-overlay{position:fixed;inset:0;background:rgba(30,37,50,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:300}.modal-overlay.open{display:flex}.modal{background:#fff;width:100%;max-width:500px;border-radius:16px;max-height:85vh;display:flex;flex-direction:column}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--slate-200)}.close{border:0;background:transparent;font-size:24px;cursor:pointer}.chatlog{padding:18px;overflow:auto;min-height:280px}.bubble{background:var(--purple-50);border-radius:12px;padding:12px;margin-bottom:10px}.bubble.user{background:var(--purple-700);color:#fff;margin-left:20%;}.chatform{display:flex;gap:8px;padding:12px;border-top:1px solid var(--slate-200)}.chatform input{flex:1;padding:12px;border:1px solid var(--slate-200);border-radius:999px}.chatform button{border:0;background:var(--purple-700);color:#fff;border-radius:999px;padding:0 18px;font-weight:800}.article{border-bottom:1px solid var(--slate-200);padding:20px 0}.article:last-child{border-bottom:0}
@media(max-width:800px){.trustgrid,.grid,.hub{grid-template-columns:1fr 1fr}.hub>*:first-child{grid-column:1/-1}}
@media(max-width:560px){.trustgrid,.grid,.hub{grid-template-columns:1fr}.links{width:100%}.hero{padding-top:44px}.util span{max-width:65%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Mobile Optimization Overrides */
@media (max-width: 600px) {
  /* Prevent headline cutoff with fluid scaling */
  h1, .hero h1 {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    line-height: 1.25 !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Prevent top bar crowding */
  .util {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
  }
  .util span {
    max-width: 100% !important;
  }

  /* Keep nav links clean and wrapped without pushing layout */
  .links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 8px 0;
  }
  .links a {
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  /* Clearance so the floating chat button does not cover content */
  .hero, main, body {
    padding-bottom: 80px;
  }
}

/* Refined Mobile Navigation & Chat Clearance */
@media (max-width: 600px) {
  /* Keep header and brand tidy */
  .nav {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    gap: 10px;
  }

  /* Single-line horizontally scrollable nav pill bar */
  .links {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding: 6px 2px 10px 2px !important;
    scrollbar-width: none;
  }
  .links::-webkit-scrollbar {
    display: none;
  }
  .links a {
    white-space: nowrap !important;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    color: var(--purple-700) !important;
    text-decoration: none;
    flex-shrink: 0;
  }

  /* Hero spacing so content clears the floating chat icon */
  .hero {
    padding-top: 24px !important;
    padding-bottom: 120px !important;
  }

  .hero h1 {
    font-size: 1.85rem !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
  }
}

/* Chat Widget Mobile Placement & Padding Fix */
@media (max-width: 600px) {
  /* Scale down the chat trigger button and anchor it neatly */
  #chatLauncher, .chat-launcher, .chat-btn {
    width: 46px !important;
    height: 46px !important;
    bottom: 16px !important;
    right: 16px !important;
  }

  /* Add side and bottom clearance so headline text never touches the bubble */
  .hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 90px !important;
  }

  .hero h1 {
    padding-bottom: 24px !important;
  }
}

/* Fix ai-chat-toggle button and hero clearance on mobile */
@media (max-width: 600px) {
  #ai-chat-toggle {
    bottom: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }

  /* Keep headline and hero body safely away from the bottom-right corner */
  .hero {
    padding-right: 50px !important;
    padding-bottom: 80px !important;
  }

  .hero h1 {
    padding-right: 20px !important;
  }
}

/* Force mobile headline sizing and safe margins away from floating chat */
@media (max-width: 600px) {
  .hero h1 {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
    margin-bottom: 24px !important;
    padding-right: 60px !important;
  }
}

/* Center align hero text on mobile screens */
@media (max-width: 600px) {
  .hero {
    text-align: center !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .hero h1 {
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Global mobile clearance for floating chat & clean pill margins */
@media (max-width: 600px) {
  /* Give the nav pill list a little breathing room on the left edge */
  .links {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Ensure body copy in the hero stays safely padded above the chat launcher */
  .hero p {
    padding-bottom: 24px !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Keep action buttons accessible and centered */
  .hero .btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 40px !important;
  }

  .hero .btns .btn {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
  }
}
EOFcat << 'EOF' >> public/styles.css

/* Refine hero buttons on mobile */
@media (max-width: 600px) {
  .btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 20px auto 40px auto !important;
  }

  .btns .btn {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
  }
}

/* Enhance card bullet contrast and mobile scroll clearance */
@media (max-width: 600px) {
  .card ul, .card ol, .card li {
    color: #cbd5e1 !important; /* Lighter slate for high readability */
    line-height: 1.5 !important;
  }

  .card {
    padding-bottom: 28px !important;
    padding-right: 24px !important;
  }
}

/* Refined mobile hero & nav pill spacing */
@media (max-width: 600px) {
  /* Prevent pill cutoff on initial view */
  .links {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Keep paragraph text clean, centered, and safely above the chat widget */
  .hero p {
    margin: 18px auto 28px auto !important;
    max-width: 92% !important;
    line-height: 1.6 !important;
    padding-bottom: 20px !important;
  }

  /* Ensure the entire hero section has breathing room before the next block */
  .hero {
    padding-bottom: 70px !important;
  }
}

/* Mobile Header & Hero Layout Polish */
@media (max-width: 600px) {
  /* Reset nav alignment so first links start cleanly on screen */
  .links {
    justify-content: flex-start !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px;
  }

  /* Keep hero headline & copy comfortably within view */
  .hero {
    padding-top: 16px !important;
    padding-bottom: 40px !important;
  }

  .hero p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin: 12px auto 20px auto !important;
    max-width: 90% !important;
  }
}