:root{
  --bg: #f4f6fb;
  --bg2: #eef2ff;
  --card: rgba(255,255,255,0.72);
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15,23,42,0.10);
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --shadow2: 0 6px 18px rgba(15,23,42,0.08);
  --primary: #2563eb;
  --primary2: #7c3aed;
  --ring: rgba(37,99,235,0.25);

  --radius: 18px;
  --radius-sm: 12px;
  --container: 1120px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(124,58,237,0.10), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(37,99,235,0.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; border-radius: var(--radius-sm); }

.container{ width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.narrow{ width: min(760px, calc(100% - 40px)); }

.skip-link{
  position:absolute; left:-999px; top: 12px;
  background: rgba(255,255,255,0.92);
  padding: 10px 12px; border-radius: 10px;
  border:1px solid var(--border); box-shadow: var(--shadow2);
}
.skip-link:focus{ left: 12px; z-index:9999; }

.site-header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(244,246,251,0.65);
  border-bottom: 1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 16px; }

.brand{ display:flex; align-items:center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; }
.brand-mark{
  width: 38px; height: 38px; border-radius: 14px;
  display:grid; place-items:center; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 10px 18px rgba(37,99,235,0.18);
}
.brand-text{ display:flex; align-items:baseline; gap:8px; }
.brand-name{ font-size: 15px; }
.brand-legal{ font-size: 13px; color: var(--muted); font-weight: 700; }

.nav{ display:flex; gap: 18px; align-items:center; color: rgba(15,23,42,0.88); font-weight: 700; font-size: 14px; }
.nav a{ opacity: 0.92; }
.nav a:hover{ opacity: 1; }

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.65);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.mobile-nav{ border-top: 1px solid var(--border); background: rgba(244,246,251,0.92); }
.mobile-nav-inner{ display:flex; flex-direction:column; gap: 12px; padding: 14px 0 18px; }
.mobile-nav-inner a{ padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; }
.mobile-nav-inner a:hover{ border-color: var(--border); background: rgba(255,255,255,0.65); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 8px;
  padding: 12px 16px; border-radius: 14px; font-weight: 800; font-size: 14px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 14px 26px rgba(37,99,235,0.18);
}
.btn-primary:hover{ box-shadow: 0 18px 30px rgba(37,99,235,0.24); }
.btn-ghost{ background: rgba(255,255,255,0.55); border-color: var(--border); }
.btn-ghost:hover{ background: rgba(255,255,255,0.78); }
.btn-sm{ padding: 9px 12px; border-radius: 12px; font-size: 13px; }

.link{ font-weight: 800; color: rgba(37,99,235,0.98); }
.link:hover{ text-decoration: underline; }

.section{ padding: 64px 0; }
.section.soft{ padding: 64px 0; background: rgba(255,255,255,0.25); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section.cta{ padding: 56px 0; }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom: 20px; }
.muted{ color: var(--muted); }
.small{ font-size: 13px; }

h1{ font-size: clamp(32px, 3.2vw, 52px); line-height: 1.05; letter-spacing: -0.04em; margin: 10px 0 14px; }
h2{ font-size: clamp(22px, 2.0vw, 34px); letter-spacing: -0.03em; margin: 0 0 12px; }
h3{ font-size: 18px; margin: 0 0 8px; letter-spacing: -0.02em; }
p{ line-height: 1.6; margin: 0 0 12px; }

.hero{ padding: 70px 0 50px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 26px; align-items: start; }
.eyebrow{ font-weight: 800; color: rgba(71,85,105,0.95); letter-spacing: 0.02em; text-transform: uppercase; font-size: 12px; margin: 0; }
.lead{ font-size: 16px; color: rgba(15,23,42,0.84); max-width: 56ch; }
.hero-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 12px; }

.gradient-text{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pill-list{ list-style:none; padding:0; margin: 14px 0 0; display:flex; flex-wrap:wrap; gap: 10px; }
.pill-list li{
  padding: 9px 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  border-radius: 999px; font-weight: 800; font-size: 13px; color: rgba(15,23,42,0.78);
}

.hero-card{
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden;
}
.hero-visual{ padding: 14px; }
.hero-visual img{
  border-radius: 14px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.6); min-height: 240px; object-fit: cover;
}
.hero-metrics{ border-top: 1px solid var(--border); }
.metric{ display:flex; justify-content:space-between; gap: 12px; padding: 12px 16px; }
.metric + .metric{ border-top: 1px solid var(--border); }
.metric-k{ font-weight: 900; }
.metric-v{ color: rgba(71,85,105,0.95); font-weight: 700; text-align:right; }

.grid{ display:grid; gap: 16px; }
.cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow2); }
.card.highlight{ background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(124,58,237,0.12)); }

.checklist{ list-style:none; padding:0; margin: 12px 0 0; display:grid; gap: 8px; }
.checklist li{ padding-left: 26px; position: relative; color: rgba(15,23,42,0.80); font-weight: 700; font-size: 14px; }
.checklist li::before{ content:"✓"; position:absolute; left:0; top:0; color: rgba(37,99,235,0.95); font-weight: 900; }

.pay-badges{ display:flex; gap: 10px; flex-wrap:wrap; margin: 12px 0 10px; }
.badge{
  padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.55); font-weight: 900; font-size: 12px;
}

.two-col{ display:flex; align-items:flex-start; justify-content:space-between; gap: 22px; }
.two-col > div:first-child{ flex: 0 0 340px; }
.why-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; flex: 1; }
.why{ background: rgba(255,255,255,0.55); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow2); }

.work-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.work-card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow2); }
.work-card img{ width:100%; height: 170px; object-fit: cover; border-bottom: 1px solid var(--border); }
.work-body{ padding: 16px; }
.tagrow{ display:flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tag{ font-size: 12px; font-weight: 900; color: rgba(15,23,42,0.74); border: 1px solid var(--border); padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.55); }

.center{ display:flex; justify-content:center; margin-top: 18px; }

.steps{
  list-style:none; padding:0; margin: 0;
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px;
}
.steps li{ background: rgba(255,255,255,0.55); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow2); }
.steps p{ margin:0; color: rgba(71,85,105,0.95); }

.ai-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 18px; align-items: start; }
.ai-note{
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: rgba(255,255,255,0.55); box-shadow: var(--shadow2);
  color: rgba(15,23,42,0.78); font-weight: 700;
}
.ai-note code{ font-weight: 900; }

.ai-box{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }
.ai-header{ display:flex; align-items:center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.55); }
.ai-dot{ width:10px; height:10px; border-radius:999px; background: linear-gradient(135deg, var(--primary), var(--primary2)); }
.ai-title{ font-weight: 900; letter-spacing: -0.02em; }
.ai-status{ margin-left:auto; font-weight: 900; font-size: 12px; color: rgba(71,85,105,0.95); }

.ai-messages{ height: 280px; overflow:auto; padding: 14px; display:flex; flex-direction:column; gap: 10px; }
.msg{ display:flex; }
.msg.user{ justify-content:flex-end; }
.bubble{
  max-width: 78%; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.62);
  color: rgba(15,23,42,0.86); box-shadow: var(--shadow2); font-weight: 700;
}
.msg.user .bubble{ background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(124,58,237,0.14)); }
.examples{ display:block; margin-top: 8px; color: rgba(71,85,105,0.95); font-weight: 800; }

.ai-form{ display:flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border); background: rgba(255,255,255,0.55); }
.ai-form input{
  flex:1; border-radius: 14px; border: 1px solid var(--border);
  padding: 12px 12px; font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,0.8); outline:none;
}
.ai-form input:focus{ border-color: rgba(37,99,235,0.35); box-shadow: 0 0 0 6px var(--ring); }

.ai-footer{ display:flex; align-items:center; gap: 12px; padding: 12px 14px 16px; }
.ai-footnote{ color: rgba(71,85,105,0.95); font-weight: 700; font-size: 12px; }

.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(124,58,237,0.12));
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.cta-actions{ display:flex; gap: 10px; flex-wrap:wrap; }

.footer{ padding: 26px 0; border-top: 1px solid var(--border); background: rgba(244,246,251,0.7); }
.footer-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; }
.footer-right{ display:flex; gap: 14px; flex-wrap:wrap; font-weight: 800; color: rgba(71,85,105,0.95); }
.footer-right a:hover{ text-decoration: underline; }

.form{ display:grid; gap: 12px; }
.form-row{ display:grid; gap: 8px; }
label{ font-weight: 900; color: rgba(15,23,42,0.86); }

textarea{
  border-radius: 14px; border: 1px solid var(--border);
  padding: 12px 12px; font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,0.85); outline:none; resize: vertical;
}
textarea:focus{ border-color: rgba(37,99,235,0.35); box-shadow: 0 0 0 6px var(--ring); }

input{ font-family: inherit; }
input[type="text"], input[type="email"]{
  border-radius: 14px; border: 1px solid var(--border);
  padding: 12px 12px; font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,0.85); outline:none;
}
input[type="text"]:focus, input[type="email"]:focus{
  border-color: rgba(37,99,235,0.35); box-shadow: 0 0 0 6px var(--ring);
}

.sr-only{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip: rect(1px,1px,1px,1px); white-space:nowrap; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .work-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .two-col{ flex-direction:column; }
  .two-col > div:first-child{ flex: 1; }
  .ai-grid{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
}


/* --- Nav dropdown (desktop) --- */
.nav-dropdown{ position:relative; display:inline-block; }
.nav-dropdown>summary{ list-style:none; cursor:pointer; user-select:none; }
.nav-dropdown>summary::-webkit-details-marker{ display:none; }
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px;
  padding:10px; border-radius:14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  z-index:50;
}
.nav-dropdown-menu a{
  display:block; padding:10px 10px; border-radius:10px; text-decoration:none;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus{
  background: rgba(0,0,0,0.06);
  outline:none;
}
.nav-dropdown-divider{ height:1px; margin:8px 0; background: rgba(0,0,0,0.08); }
.nav-dropdown:not([open]) .nav-dropdown-menu{ display:none; }

/* --- Mobile dropdown --- */
.mobile-dropdown>summary{ cursor:pointer; user-select:none; padding:10px 0; }
.mobile-dropdown-menu a{ display:block; padding:8px 0; }


/* --- Nav active state --- */
.nav a[aria-current="page"]{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
/* Active state for Services parent */
.nav-dropdown.active > summary {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  font-weight: 600; /* optional but recommended */
}

/* --- Dropdown indicator arrow --- */
.nav-dropdown > summary,
.mobile-dropdown > summary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Dropdown arrow indicator */
.nav-dropdown > summary::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid currentColor;
  transition: transform 0.2s ease;
}

/* Rotate arrow when open */
.nav-dropdown[open] > summary::after {
  transform: rotate(180deg);
}

/* Make dropdown summary behave like links visually */
.nav-dropdown > summary{
  opacity: 0.92;
}
.nav-dropdown > summary:hover{
  opacity: 1;
}

/* Active state for button-style links */
.nav a.btn[aria-current="page"]{
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.10);
}

/* AI checklist spacing */
.ai-benefits li {
  margin-bottom: 0.6rem;
}

/* AI checklist subtle scroll animation */
.ai-benefits li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.ai-benefits li.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* AI suggested question chips */
.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.ai-chip {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.ai-chip:hover {
  background: rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}

/* AI thinking indicator */
.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
}

.ai-dots span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  opacity: 0;
  animation: aiDot 1.4s infinite ease-in-out;
}

.ai-dots span:nth-child(1) { animation-delay: 0s; }
.ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiDot {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* AI suggested question chips */
.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1.5rem; /* ⬅ increased bottom spacing */
}

/* Space between AI chips and input form */
#ai form {
  margin-top: 1.25rem;
}
/* Ensure AI question chips align with chat padding */
.ai-suggestions {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Bot answers should be normal weight (intro can be bold via <strong>) */
.msg.bot .bubble {
  font-weight: 400;
}

.ai-chip-cta { text-decoration: none; }

/* Contact Us chip inside AI answer */
.ai-chip-cta {
  font-weight: 600;
}

/* Tiny arrow for Contact Us chip */
.ai-chip-cta::after {
  content: "→";
  margin-left: 0.35rem;
  font-weight: 600;
  transition: transform 0.15s ease;
}

/* Subtle hover nudge */
.ai-chip-cta:hover::after {
  transform: translateX(2px);
}