/* ============================================================
   Codory theme system — Light (mesh) + Dark (near-black mesh)
   Toggle via html[data-theme="dark"]. Default = light.
   ============================================================ */
:root{--cx-blue:#0f3cc9;--cx-green:#2E9E1F;--cx-red:#E5451C;--cx-purple:#6E43A0}
html{transition:background-color .25s ease}
html,body{min-height:100%}

/* ---------- LIGHT MODE (Option 4: off-white mesh, 4 colour glows) ---------- */
body{
  background:
    radial-gradient(680px 560px at 4% 6%,  rgba(110,67,160,.12), transparent 60%),
    radial-gradient(680px 560px at 97% 4%, rgba(229,69,28,.09),  transparent 60%),
    radial-gradient(700px 600px at 2% 98%, rgba(46,158,31,.12),  transparent 60%),
    radial-gradient(700px 600px at 99% 98%,rgba(15,60,201,.09),  transparent 60%),
    #F9F9F7 !important;
  background-attachment:fixed !important;
}
.hero,.online-section,.pricing-section,.tools-section,.partners-section,
.review-section,.faq-section,.hosting-info-section,.tld-section,
.wd-process-section,.wd-plan-section,.instant-plan-section,.about-section,.about-hero,
.contact-section,.legal-section{background:transparent !important}

/* ---------- DARK MODE (Option 10: near-black mesh, 4 colour glows) ---------- */
html[data-theme="dark"] body{
  background:
    radial-gradient(680px 560px at 4% 6%,  rgba(160,92,230,.16), transparent 60%),
    radial-gradient(680px 560px at 97% 4%, rgba(255,107,31,.12), transparent 60%),
    radial-gradient(700px 600px at 2% 98%, rgba(99,210,46,.14),  transparent 60%),
    radial-gradient(700px 600px at 99% 98%,rgba(90,130,246,.12), transparent 60%),
    #0B0C10 !important;
  color:#EDEFF5;
}
html[data-theme="dark"]{--cx-blue:#5A7BFF;--cx-green:#63D22E;--cx-red:#FF6B1F;--cx-purple:#A05CE6}

html[data-theme="dark"] .topbar{background:#05060A;color:#9AA2B8;border-bottom:1px solid #1c1f2a}
html[data-theme="dark"] header{background:rgba(11,12,16,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #1c1f2a}
html[data-theme="dark"] .site-footer,html[data-theme="dark"] footer{background:#05060A;border-top:1px solid #1c1f2a}

html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] .title,html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .plan h3,html[data-theme="dark"] .plan h2,
html[data-theme="dark"] .footer-column h4{color:#EDEFF5 !important}
html[data-theme="dark"] p,html[data-theme="dark"] .sub,html[data-theme="dark"] small,
html[data-theme="dark"] li{color:#C3C9D8}
html[data-theme="dark"] .sub,html[data-theme="dark"] .hero p{color:#9AA2B8 !important}
html[data-theme="dark"] .footer-column a,html[data-theme="dark"] .footer-legal,
html[data-theme="dark"] .footer-legal a,html[data-theme="dark"] .footer-brand p{color:#9AA2B8}
html[data-theme="dark"] .footer-column a:hover{color:#FF6B1F}

/* cards / panels white -> dark */
html[data-theme="dark"] .hosting-category-card,html[data-theme="dark"] .plan,
html[data-theme="dark"] .faq-item,html[data-theme="dark"] .wd-process-card,
html[data-theme="dark"] .testimonial-card,html[data-theme="dark"] .review-card,
html[data-theme="dark"] .contact-card,html[data-theme="dark"] .location-card,
html[data-theme="dark"] .dept-card,html[data-theme="dark"] .stat,html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .about-stat,html[data-theme="dark"] .about-hero-copy,
html[data-theme="dark"] .tld,html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .hero-review,html[data-theme="dark"] .hero-pricing,
html[data-theme="dark"] .card,html[data-theme="dark"] .form-card,
html[data-theme="dark"] .partner-logo,html[data-theme="dark"] .client-logo-card,
html[data-theme="dark"] .timeline-item,html[data-theme="dark"] .journey-item{
  background:#14151C !important;border-color:#262833 !important;color:#EDEFF5;
  box-shadow:0 18px 44px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .hero-panel *,html[data-theme="dark"] .hero-review *,
html[data-theme="dark"] .hero-pricing *{color:#C3C9D8}
html[data-theme="dark"] .hero-panel-title,html[data-theme="dark"] .hero-pricing strong,
html[data-theme="dark"] .hero-review strong{color:#EDEFF5 !important}
html[data-theme="dark"] .hero-panel-search{background:#0B0C10;border-color:#262833}
html[data-theme="dark"] .features-grid .item{color:#EDEFF5}

html[data-theme="dark"] .faq-question{color:#EDEFF5}
html[data-theme="dark"] .faq-answer p{color:#9AA2B8}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  background:#0B0C10 !important;border-color:#262833 !important;color:#EDEFF5 !important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#5b6478}
html[data-theme="dark"] .btn-outline{border-color:#2c3040;color:#EDEFF5;background:rgba(255,255,255,.02)}
html[data-theme="dark"] .top-cart-icon{color:#EDEFF5 !important}

/* tables */
html[data-theme="dark"] .tld-table-wrap{background:#14151C;border-color:#262833}
html[data-theme="dark"] .tld-table tbody tr:hover{background:#1b1d26}
html[data-theme="dark"] .tld-table tbody td{color:#C3C9D8}
html[data-theme="dark"] .tld-table tbody tr{border-color:#232631}

/* dropdown */
html[data-theme="dark"] .dropdown{background:#14151C;border-color:#262833}
html[data-theme="dark"] .menu-item>span{color:#C3C9D8}
html[data-theme="dark"] .dropdown a strong{color:#EDEFF5}
html[data-theme="dark"] .dropdown a small{color:#9AA2B8}
html[data-theme="dark"] .dropdown a:hover{background:#1b1d26}

/* logo swap */
.logo-dark{display:none}
html[data-theme="dark"] .logo-light{display:none}
html[data-theme="dark"] .logo-dark{display:inline-block}

/* toggle button */
.theme-toggle{width:40px;height:40px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#0f172a;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;margin-right:12px;transition:.2s;flex:none}
.theme-toggle:hover{border-color:var(--cx-purple);color:var(--cx-purple)}
html[data-theme="dark"] .theme-toggle{background:#14151C;border-color:#262833;color:#FFD24A}
.theme-toggle .fa-sun{display:none}.theme-toggle .fa-moon{display:inline}
html[data-theme="dark"] .theme-toggle .fa-moon{display:none}
html[data-theme="dark"] .theme-toggle .fa-sun{display:inline}

/* ---------- page-specific sections & cards (crm / contact / about / service) ---------- */
/* make all remaining section wrappers transparent so the mesh shows through */
.wd-overview-section,.wd-process-section,.instant-demo-section,.instant-features-section,
.instant-guide-section,.service-page-hero,.hero.service-page-hero,
.contact-page-section,.about-page-section,.about-timeline-section,.about-review-section,
.hosting-info-section.instant-features-section,.hosting-info-section.instant-guide-section{background:transparent !important}

/* dark cards for the extra card classes */
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .crm-demo-panel,
html[data-theme="dark"] .about-timeline-item,
html[data-theme="dark"] .review-text,
html[data-theme="dark"] .storage-billing-menu,
html[data-theme="dark"] .storage-billing-dropdown,
html[data-theme="dark"] .hero-price-item,
html[data-theme="dark"] .wd-process-grid>div,
html[data-theme="dark"] .instant-demo-section .crm-demo-panel{
  background:#14151C !important;border-color:#262833 !important;color:#EDEFF5;
}
/* elements that hard-code light backgrounds inline (#f8fafc / #ffffff) in dark mode */
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #fff"]{background:#14151C !important}
/* crm demo tabs */
html[data-theme="dark"] .crm-demo-tab{background:#14151C !important;border-color:#262833 !important;color:#C3C9D8}
html[data-theme="dark"] .crm-demo-tab.active{background:#1b1d26 !important;color:#EDEFF5}
/* review + author text on dark */
html[data-theme="dark"] .review-text,html[data-theme="dark"] .review-author,
html[data-theme="dark"] .author-info,html[data-theme="dark"] .author-info span{color:#C3C9D8}
html[data-theme="dark"] .author-info strong{color:#EDEFF5}
html[data-theme="dark"] .review-stars{color:#FF6B1F}
/* contact info card text/icons */
html[data-theme="dark"] .contact-info-card *{color:#C3C9D8}
html[data-theme="dark"] .contact-info-card strong,html[data-theme="dark"] .contact-info-card h3{color:#EDEFF5}

/* ---------- catch remaining white cards + inline light backgrounds ---------- */
html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .crm-demo-card,
html[data-theme="dark"] .dept-card,
html[data-theme="dark"] .contact-dept-card{
  background:#14151C !important;border-color:#262833 !important;color:#EDEFF5 !important;
  box-shadow:0 18px 44px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .contact-form-card *,html[data-theme="dark"] .crm-demo-card *{color:#C3C9D8}
html[data-theme="dark"] .contact-form-card strong,html[data-theme="dark"] .contact-form-card h2,
html[data-theme="dark"] .contact-form-card h3,html[data-theme="dark"] .crm-demo-card strong{color:#EDEFF5 !important}

/* inline background:#fff / #ffffff / #f8fafc / #f8fbff -> dark (match any spacing) */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f8fbff"],
html[data-theme="dark"] [style*="background: #f8fbff"],
html[data-theme="dark"] [style*="background:#f1f5f9"]{
  background:#14151C !important;border-color:#262833 !important;color:#EDEFF5 !important;
}

/* ---------- overview / content-card panels (crm & service pages) ---------- */
html[data-theme="dark"] .wd-overview-copy,
html[data-theme="dark"] .wd-overview-panel,
html[data-theme="dark"] .instant-overview-panel,
html[data-theme="dark"] .ti-content-card,
html[data-theme="dark"] .instant-content-card,
html[data-theme="dark"] .instant-guide-card,
html[data-theme="dark"] .instant-feature-card{
  background:#14151C !important;border-color:#262833 !important;color:#EDEFF5 !important;
  box-shadow:0 18px 44px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .wd-overview-copy *,html[data-theme="dark"] .wd-overview-panel *,
html[data-theme="dark"] .ti-content-card *{color:#C3C9D8}
html[data-theme="dark"] .wd-overview-copy h2,html[data-theme="dark"] .wd-overview-copy h3,
html[data-theme="dark"] .wd-overview-copy strong,html[data-theme="dark"] .ti-content-card h2,
html[data-theme="dark"] .ti-content-card h3,html[data-theme="dark"] .ti-content-card strong{color:#EDEFF5 !important}

/* ============================================================
   ROBUST catch-all (dark) — covers every page's card/panel wrappers
   ============================================================ */
/* all section wrappers transparent so the mesh shows through (both modes) */
[class*="-section"]{background-color:transparent !important}
html[data-theme="dark"] section,html[data-theme="dark"] [class*="-section"]{background:transparent !important}
/* any card / panel / copy / box / content-card container -> dark surface */
html[data-theme="dark"] [class*="-card"],
html[data-theme="dark"] [class*="-panel"],
html[data-theme="dark"] [class*="-copy"],
html[data-theme="dark"] [class*="-box"]:not(.whatsapp-chat-box),
html[data-theme="dark"] [class*="content-card"],
html[data-theme="dark"] [class*="-item"]:not(.menu-item):not(.features-grid .item),
html[data-theme="dark"] [class*="-tile"]{
  background:#14151C !important;border-color:#262833 !important;
}
/* keep readable text inside those containers */
html[data-theme="dark"] [class*="-card"] p,html[data-theme="dark"] [class*="-panel"] p,
html[data-theme="dark"] [class*="-copy"] p,html[data-theme="dark"] [class*="-card"] li,
html[data-theme="dark"] [class*="-card"] span,html[data-theme="dark"] [class*="-panel"] span{color:#C3C9D8}
html[data-theme="dark"] [class*="-card"] h1,html[data-theme="dark"] [class*="-card"] h2,
html[data-theme="dark"] [class*="-card"] h3,html[data-theme="dark"] [class*="-card"] h4,
html[data-theme="dark"] [class*="-card"] strong,html[data-theme="dark"] [class*="-panel"] h2,
html[data-theme="dark"] [class*="-panel"] h3,html[data-theme="dark"] [class*="-copy"] h1,
html[data-theme="dark"] [class*="-copy"] h2,html[data-theme="dark"] [class*="-copy"] strong{color:#EDEFF5 !important}
/* legal / long-form content blocks */
html[data-theme="dark"] .legal-content,html[data-theme="dark"] .legal-body,
html[data-theme="dark"] .policy-content,html[data-theme="dark"] .terms-content,
html[data-theme="dark"] article,html[data-theme="dark"] .content-wrap{background:transparent !important;color:#C3C9D8}
html[data-theme="dark"] .legal-content h2,html[data-theme="dark"] .legal-content h3{color:#EDEFF5}

/* ---------- page wrapper white gradients (service/marketing pages) ---------- */
/* many pages wrap content in .main-content-wrapper with a white radial-gradient bg-image */
html[data-theme="dark"] .main-content-wrapper,
html[data-theme="dark"] [class*="main-content-wrapper"],
html[data-theme="dark"] [class*="page-wrapper"],
html[data-theme="dark"] [class*="page-bg"]{background:transparent !important;background-image:none !important}

/* ============================================================
   v2 — warmer light mode + dark-mode corrections
   ============================================================ */
/* ---- LIGHT: warmer, golden "read mode" feel ---- */
body{
  background:
    radial-gradient(720px 600px at 3% 4%,   rgba(232,150,60,.16),  transparent 60%),
    radial-gradient(760px 620px at 98% 3%,   rgba(229,120,40,.14),  transparent 60%),
    radial-gradient(760px 640px at 2% 99%,   rgba(120,150,40,.12),  transparent 62%),
    radial-gradient(760px 640px at 99% 99%,  rgba(200,120,180,.10), transparent 62%),
    linear-gradient(180deg,#FBF6EC 0%,#FAF3E6 100%) !important;
  background-attachment:fixed !important;
}

/* ---- DARK-MODE CORRECTIONS (from live screenshots) ---- */
/* 1) FAQ boxes were white -> dark */
html[data-theme="dark"] .faq-question{background:#14151C !important;color:#EDEFF5 !important}
html[data-theme="dark"] .faq-item{background:#14151C !important;border-color:#262833 !important}
html[data-theme="dark"] .faq-question:hover{background:#1b1d26 !important}
html[data-theme="dark"] .faq-question i{color:#FF6B1F !important}

/* 2) "Why Choose" pricing-head was cream/yellow -> brand gradient on dark */
html[data-theme="dark"] .hero-pricing-head{
  background:linear-gradient(90deg,#A05CE6,#FF6B1F) !important;color:#fff !important}
html[data-theme="dark"] .hero-pricing-head *{color:#fff !important}

/* 3) hero tile TITLES were dark-on-dark -> light */
html[data-theme="dark"] .hero .tld strong,html[data-theme="dark"] .tld strong,
html[data-theme="dark"] .hh-tld strong{color:#EDEFF5 !important}
html[data-theme="dark"] .hero .tld small,html[data-theme="dark"] .tld small{color:#9AA2B8 !important}
html[data-theme="dark"] .hero .tld{background:#14151C !important;border-color:#262833 !important}
html[data-theme="dark"] .hero .tld:hover{border-color:#A05CE6 !important;box-shadow:0 18px 38px rgba(160,92,230,.2) !important}

/* 4) white glow blob under the person -> remove in dark */
html[data-theme="dark"] .hero-card::after{background:none !important;opacity:0 !important}

/* 5) top feature pills: dark surface + readable text */
html[data-theme="dark"] .hero .features-grid .item{background:#14151C !important;border-color:#262833 !important;color:#EDEFF5 !important}

/* 6) person image should sit clean on dark (no leftover light matte) */
html[data-theme="dark"] .hero-person{filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}

/* ============================================================
   v3 — hero card spacing, remove white smoke, partner marquee dark fix
   ============================================================ */
/* --- move girl a touch toward the edge so more of her shows --- */
.hero-person{right:92px !important;top:6px !important;width:326px !important}

/* --- 1st box (Assistant panel): smaller + up-left so it clears her face --- */
.hero-panel{width:230px !important;top:26px !important;left:0 !important;padding:14px !important}
/* --- 2nd box (rating): push up + out to the top-right corner --- */
.hero-review{top:0 !important;right:6px !important;width:212px !important}
/* --- 3rd box (why choose): push down + out to the side --- */
.hero-pricing{right:2px !important;bottom:-22px !important;width:230px !important}

/* --- remove the white "smoke" glow under the person (both modes) --- */
.hero-card::after{display:none !important;background:none !important;content:none !important}

/* ============================================================
   PARTNER LOGOS — always white chips (brand logos need light bg),
   and fade masks match the theme (no white smoke in dark)
   ============================================================ */
/* keep the logo chips white in BOTH modes so brand logos render correctly */
html[data-theme="dark"] .client-logo-card{background:#ffffff !important;border-color:#e8e8ee !important}
/* partners section transparent so page bg shows (both modes) */
.partners-section{background:transparent !important}
/* light-mode side fades -> warm cream (match new warm bg) */
.partners-marquee::before{background:linear-gradient(90deg,#FBF6EC 0%,rgba(251,246,236,0) 100%) !important}
.partners-marquee::after{background:linear-gradient(270deg,#FBF6EC 0%,rgba(251,246,236,0) 100%) !important}
/* dark-mode side fades -> near-black (kills the white smoke on left/right) */
html[data-theme="dark"] .partners-marquee::before{background:linear-gradient(90deg,#0B0C10 0%,rgba(11,12,16,0) 100%) !important}
html[data-theme="dark"] .partners-marquee::after{background:linear-gradient(270deg,#0B0C10 0%,rgba(11,12,16,0) 100%) !important}

/* ============================================================
   v4 — push right-side hero boxes further out (show girl fully)
   ============================================================ */
/* 2nd box (People Say Excellent): move further right into the empty space */
.hero-review{right:-40px !important;top:-4px !important}
/* 3rd box (Why Choose Codory): move further right too */
.hero-pricing{right:-44px !important;bottom:-22px !important}
/* let the boxes sit outside the card edge without being clipped */
.hero-card{overflow:visible !important}
/* on small screens, keep them inside so nothing runs off-screen */
@media(max-width:1180px){
  .hero-review{right:0 !important}
  .hero-pricing{right:0 !important}
  .hero-card{overflow:hidden !important}
}

/* ============================================================
   v5 — smaller Assistant panel + WhatsApp CTA button alignment
   ============================================================ */
/* compact panel */
.hero-panel{width:210px !important;padding:13px !important}
.hero-panel .hero-panel-title span:last-child{font-size:.95rem;line-height:1.2}
.hero-panel>p{font-size:.78rem !important;line-height:1.35 !important;margin-top:6px !important}
/* search bar -> proper WhatsApp button, arrow/icon aligned */
.hero-panel-search{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:8px !important;margin-top:12px !important;padding:7px 7px 7px 14px !important;
  border-radius:999px !important;text-decoration:none !important;cursor:pointer;
}
.hero-panel-search span{font-size:.78rem;white-space:nowrap;line-height:1}
.hero-panel-search strong{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:30px !important;height:30px !important;border-radius:50% !important;flex:none !important;
  background:#1f8f34 !important;color:#fff !important;font-size:.85rem !important;line-height:1 !important;
}
.hero-panel-search:hover strong{filter:brightness(1.08)}
/* dark mode: whatsapp button stays green, text readable */
html[data-theme="dark"] .hero-panel-search span{color:#C3C9D8}

/* ============================================================
   NEW hero structure — vertical capability list (Codory capability list)
   ============================================================ */
.cx-caplist{margin-top:22px;border-top:1px solid rgba(0,0,0,.10)}
.cx-cap{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:16px 4px;border-bottom:1px solid rgba(0,0,0,.10);text-decoration:none;
  transition:padding-left .2s,background .2s;
}
.cx-cap:hover{padding-left:12px;background:linear-gradient(90deg,rgba(160,92,230,.06),transparent 70%)}
.cx-cap-no{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.95rem;color:#0f3cc9;letter-spacing:.04em;min-width:26px}
.cx-cap:nth-child(1) .cx-cap-no{color:#2E9E1F}
.cx-cap:nth-child(2) .cx-cap-no{color:#E5451C}
.cx-cap:nth-child(3) .cx-cap-no{color:#6E43A0}
.cx-cap:nth-child(4) .cx-cap-no{color:#0f3cc9}
.cx-cap-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.cx-cap-main b{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.06rem;color:#0f172a;letter-spacing:-.01em;line-height:1.2}
.cx-cap-main em{font-style:normal;font-size:.85rem;color:#64748b}
.cx-cap-go{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.14);display:inline-flex;align-items:center;justify-content:center;color:#0f172a;transition:.2s;flex:none}
.cx-cap:hover .cx-cap-go{background:linear-gradient(90deg,#A05CE6,#FF6B1F);border-color:transparent;color:#fff;transform:translateX(2px)}
.cx-cap-cta{display:flex;align-items:center;gap:18px;margin-top:24px;flex-wrap:wrap}
.cx-cap-link{text-decoration:none;font-weight:600;font-size:.9rem;color:#0f3cc9;display:inline-flex;align-items:center;gap:6px}
.cx-cap-link:hover{gap:9px}
.cx-cap-link i{font-size:.72rem}
@media(max-width:560px){
  .cx-cap{gap:12px;padding:14px 2px}
  .cx-cap-main b{font-size:.98rem}
  .cx-cap-main em{font-size:.8rem}
}
/* ---- dark mode ---- */
html[data-theme="dark"] .cx-caplist,html[data-theme="dark"] .cx-cap{border-color:#20222c}
html[data-theme="dark"] .cx-cap-main b{color:#EDEFF5}
html[data-theme="dark"] .cx-cap-main em{color:#9AA2B8}
html[data-theme="dark"] .cx-cap-go{border-color:#2c3040;color:#EDEFF5}
html[data-theme="dark"] .cx-cap:hover{background:linear-gradient(90deg,rgba(160,92,230,.12),transparent 70%)}
html[data-theme="dark"] .cx-cap:nth-child(1) .cx-cap-no{color:#63D22E}
html[data-theme="dark"] .cx-cap:nth-child(2) .cx-cap-no{color:#FF6B1F}
html[data-theme="dark"] .cx-cap:nth-child(3) .cx-cap-no{color:#A05CE6}
html[data-theme="dark"] .cx-cap:nth-child(4) .cx-cap-no{color:#5A7BFF}
html[data-theme="dark"] .cx-cap-link{color:#5A7BFF}

/* ============================================================
   HOMEPAGE REDESIGN — new section arrangements
   ============================================================ */
.cx-kicker{display:inline-block;font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#0f3cc9;margin-bottom:12px}
.cx-center{display:block;text-align:center}
.cx-center-h2{text-align:center}
.cx-center-p{text-align:center;max-width:60ch;margin:8px auto 0;color:#64748b}

/* --- stats strip --- */
.cx-stats{padding:0}
.cx-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,0,0,.08);border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.08);margin-top:-30px;position:relative;z-index:3;box-shadow:0 20px 50px rgba(15,23,42,.06)}
.cx-stat{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:26px 22px;text-align:center}
.cx-stat b{display:block;font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.9rem;letter-spacing:-.02em;background:linear-gradient(90deg,#A05CE6,#FF6B1F);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-stat span{color:#64748b;font-size:.85rem}
@media(max-width:760px){.cx-stats-row{grid-template-columns:1fr 1fr;margin-top:24px}}

/* --- alternating two-column rows --- */
.cx-alt-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cx-alt-flip .cx-alt-copy{order:2}
.cx-alt-flip .cx-alt-list,.cx-alt-flip .cx-alt-visual{order:1}
@media(max-width:900px){.cx-alt-row{grid-template-columns:1fr;gap:30px}.cx-alt-flip .cx-alt-copy{order:0}.cx-alt-flip .cx-alt-list,.cx-alt-flip .cx-alt-visual{order:1}}
.cx-alt-copy h2{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.3rem);letter-spacing:-.02em;line-height:1.15;margin-bottom:12px}
.cx-alt-copy p{color:#64748b;margin-bottom:22px;max-width:46ch}
.cx-alt-copy .btn{margin-top:4px}
.cx-alt-list{display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.09)}
.cx-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px 6px;border-bottom:1px solid rgba(0,0,0,.09);text-decoration:none;transition:.2s}
.cx-line:hover{padding-left:12px;background:linear-gradient(90deg,rgba(160,92,230,.05),transparent 70%)}
.cx-line-ic{width:42px;height:42px;flex:none;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;background:rgba(160,92,230,.12);color:#6E43A0}
.cx-line:nth-child(2) .cx-line-ic{background:rgba(46,158,31,.12);color:#2E9E1F}
.cx-line:nth-child(3) .cx-line-ic{background:rgba(229,69,28,.12);color:#E5451C}
.cx-line:nth-child(4) .cx-line-ic{background:rgba(15,60,201,.12);color:#0f3cc9}
.cx-line b{display:block;font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;color:#0f172a}
.cx-line em{font-style:normal;font-size:.83rem;color:#64748b}
.cx-line-go{color:#94a3b8;transition:.2s}
.cx-line:hover .cx-line-go{color:#E5451C;transform:translateX(3px)}
/* automation visual */
.cx-alt-visual{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,rgba(160,92,230,.12),rgba(255,107,31,.10));border:1px solid rgba(0,0,0,.08);min-height:320px;display:flex;align-items:flex-end;justify-content:center}
.cx-alt-visual img{max-height:420px;width:auto;display:block}
.cx-visual-badge{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.94);border-radius:14px;padding:12px 16px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.cx-visual-badge b{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;color:#0f172a}
.cx-visual-badge span{font-size:.78rem;color:#64748b}
.cx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.cx-chips span{font-size:.8rem;color:#334155;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:6px 13px;background:rgba(255,255,255,.6)}

/* --- partners static grid --- */
.cx-partner-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:40px}
@media(max-width:900px){.cx-partner-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.cx-partner-grid{grid-template-columns:repeat(2,1fr)}}
.cx-partner{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;min-height:78px;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;color:#334155;font-size:.9rem;transition:.2s}
.cx-partner:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.08)}

/* --- single rotating quote --- */
.cx-quote-stage{position:relative;max-width:760px;margin:22px auto 0;min-height:200px}
.cx-q{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;pointer-events:none;text-align:center;margin:0}
.cx-q.active{opacity:1;transform:none;pointer-events:auto;position:relative}
.cx-q p{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:600;font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.5;color:#0f172a;letter-spacing:-.01em}
.cx-q footer{margin-top:20px}
.cx-q footer b{font-weight:700;color:#0f172a;display:inline}
.cx-q footer span{color:#64748b;display:block;font-size:.85rem;margin-top:2px}
.cx-q-dots{display:flex;gap:10px;justify-content:center;margin-top:30px}
.cx-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(0,0,0,.18);cursor:pointer;transition:.2s;padding:0}
.cx-dot.active{background:linear-gradient(90deg,#A05CE6,#FF6B1F);width:26px;border-radius:6px}

/* --- FAQ split --- */
.cx-faq-row{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
@media(max-width:900px){.cx-faq-row{grid-template-columns:1fr;gap:28px}}
.cx-faq-intro h2{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.3rem);letter-spacing:-.02em;margin-bottom:12px}
.cx-faq-intro p{color:#64748b;margin-bottom:22px}
.cx-faq-list{display:flex;flex-direction:column;gap:10px}
.cx-faq-item{background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.09);border-radius:12px;overflow:hidden}
.cx-faq-item[open]{border-color:#A05CE6}
.cx-faq-item summary{list-style:none;cursor:pointer;padding:16px 20px;font-family:'Sora',sans-serif;font-weight:600;font-size:.94rem;color:#0f172a;display:flex;justify-content:space-between;align-items:center;gap:14px}
.cx-faq-item summary::-webkit-details-marker{display:none}
.cx-faq-item summary::after{content:"+";font-size:1.3rem;color:#E5451C;font-weight:400}
.cx-faq-item[open] summary::after{content:"\2013"}
.cx-faq-item div{padding:0 20px 18px;color:#64748b;font-size:.9rem}

/* ---------- DARK MODE for redesigned sections ---------- */
html[data-theme="dark"] .cx-stats-row{background:#20222c;border-color:#20222c}
html[data-theme="dark"] .cx-stat{background:rgba(20,21,28,.85)}
html[data-theme="dark"] .cx-stat span,html[data-theme="dark"] .cx-alt-copy p,
html[data-theme="dark"] .cx-line em,html[data-theme="dark"] .cx-center-p,
html[data-theme="dark"] .cx-faq-intro p,html[data-theme="dark"] .cx-faq-item div,
html[data-theme="dark"] .cx-q footer span,html[data-theme="dark"] .cx-chips span{color:#9AA2B8}
html[data-theme="dark"] .cx-alt-copy h2,html[data-theme="dark"] .cx-line b,
html[data-theme="dark"] .cx-faq-intro h2,html[data-theme="dark"] .cx-faq-item summary,
html[data-theme="dark"] .cx-q p,html[data-theme="dark"] .cx-q footer b,
html[data-theme="dark"] .cx-center-h2,html[data-theme="dark"] .cx-visual-badge b{color:#EDEFF5}
html[data-theme="dark"] .cx-alt-list,html[data-theme="dark"] .cx-line{border-color:#20222c}
html[data-theme="dark"] .cx-chips span{border-color:#2c3040;background:rgba(255,255,255,.03)}
html[data-theme="dark"] .cx-partner{background:#fff;border-color:#e8e8ee;color:#334155}
html[data-theme="dark"] .cx-faq-item{background:#14151C;border-color:#262833}
html[data-theme="dark"] .cx-dot{background:rgba(255,255,255,.22)}
html[data-theme="dark"] .cx-alt-visual{border-color:#262833;background:linear-gradient(135deg,rgba(160,92,230,.18),rgba(255,107,31,.12))}
html[data-theme="dark"] .cx-visual-badge{background:#14151C}
html[data-theme="dark"] .cx-visual-badge span{color:#9AA2B8}

/* ============================================================
   Richer product cards (show products + scope fully, new UI)
   ============================================================ */
.cx-prodwrap{display:flex;flex-direction:column;gap:12px}
.cx-prod{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:18px 20px;border:1px solid rgba(0,0,0,.09);border-radius:16px;
  background:rgba(255,255,255,.6);text-decoration:none;position:relative;
  transition:transform .2s,border-color .2s,box-shadow .2s}
.cx-prod::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:#6E43A0;opacity:0;transition:.2s}
.cx-prod:hover{transform:translateX(4px);border-color:rgba(160,92,230,.4);box-shadow:0 14px 34px rgba(15,23,42,.07)}
.cx-prod:hover::before{opacity:1}
.cx-prodwrap .cx-prod:nth-child(1)::before{background:#6E43A0}
.cx-prodwrap .cx-prod:nth-child(2)::before{background:#2E9E1F}
.cx-prodwrap .cx-prod:nth-child(3)::before{background:#E5451C}
.cx-prodwrap .cx-prod:nth-child(4)::before{background:#0f3cc9}
.cx-prod-ic{width:44px;height:44px;flex:none;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;background:rgba(160,92,230,.12);color:#6E43A0}
.cx-prodwrap .cx-prod:nth-child(2) .cx-prod-ic{background:rgba(46,158,31,.12);color:#2E9E1F}
.cx-prodwrap .cx-prod:nth-child(3) .cx-prod-ic{background:rgba(229,69,28,.12);color:#E5451C}
.cx-prodwrap .cx-prod:nth-child(4) .cx-prod-ic{background:rgba(15,60,201,.12);color:#0f3cc9}
.cx-prod-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cx-prod-body b{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.02rem;color:#0f172a;letter-spacing:-.01em}
.cx-prod-body>span{font-size:.87rem;color:#64748b;line-height:1.5}
.cx-prod-go{grid-column:2;display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-weight:700;font-size:.8rem;color:#E5451C}
.cx-prod:hover .cx-prod-go i{transform:translateX(3px)}
.cx-prod-go i{transition:.2s}
@media(max-width:900px){.cx-prod{padding:16px}}
/* dark */
html[data-theme="dark"] .cx-prod{background:#14151C;border-color:#262833}
html[data-theme="dark"] .cx-prod:hover{border-color:rgba(160,92,230,.5)}
html[data-theme="dark"] .cx-prod-body b{color:#EDEFF5}
html[data-theme="dark"] .cx-prod-body>span{color:#9AA2B8}
html[data-theme="dark"] .cx-prod-go{color:#FF6B1F}

/* ============================================================
   v6 — header flush to top (black bar removed) + denser sections
   ============================================================ */
/* header was offset 37px for the old top bar; pin it to the top now */
header{top:0 !important}
.nav{padding:14px 0 !important}

/* --- product sections: full-width heading + 2-col card grid (no empty column) --- */
.cx-alt.cx-showcase .cx-alt-row{display:block}
.cx-showcase-head{max-width:640px;margin:0 auto 30px;text-align:center}
.cx-showcase-head .cx-kicker{margin-bottom:10px}
.cx-showcase-head h2{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.3rem);letter-spacing:-.02em;margin-bottom:10px}
.cx-showcase-head p{color:#64748b}
.cx-prodwrap.cx-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.cx-prodwrap.cx-grid2{grid-template-columns:1fr}}
.cx-showcase-cta{text-align:center;margin-top:26px}
html[data-theme="dark"] .cx-showcase-head p{color:#9AA2B8}
html[data-theme="dark"] .cx-showcase-head h2{color:#EDEFF5}

/* --- "What We Build" scope grid --- */
.cx-scope{padding:0}
.cx-scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media(max-width:900px){.cx-scope-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cx-scope-grid{grid-template-columns:1fr}}
.cx-scope-card{position:relative;padding:26px 24px 24px;border:1px solid rgba(0,0,0,.09);border-radius:18px;background:rgba(255,255,255,.6);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.cx-scope-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(15,23,42,.08);border-color:rgba(160,92,230,.35)}
.cx-scope-card .cx-scope-ic{width:50px;height:50px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:16px;background:rgba(160,92,230,.12);color:#6E43A0}
.cx-scope-grid .cx-scope-card:nth-child(3n+2) .cx-scope-ic{background:rgba(46,158,31,.12);color:#2E9E1F}
.cx-scope-grid .cx-scope-card:nth-child(3n+3) .cx-scope-ic{background:rgba(229,69,28,.12);color:#E5451C}
.cx-scope-grid .cx-scope-card:nth-child(3n+1) .cx-scope-ic{background:rgba(15,60,201,.12);color:#0f3cc9}
.cx-scope-card h3{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.12rem;letter-spacing:-.01em;margin-bottom:8px;color:#0f172a}
.cx-scope-card p{color:#64748b;font-size:.88rem;line-height:1.55;margin-bottom:14px}
.cx-scope-tags{display:flex;flex-wrap:wrap;gap:6px}
.cx-scope-tags span{font-size:.72rem;color:#475569;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:4px 10px}
html[data-theme="dark"] .cx-scope-card{background:#14151C;border-color:#262833}
html[data-theme="dark"] .cx-scope-card h3{color:#EDEFF5}
html[data-theme="dark"] .cx-scope-card p{color:#9AA2B8}
html[data-theme="dark"] .cx-scope-tags span{color:#9AA2B8;border-color:#2c3040}

/* ============================================================
   AGENCY REBUILD — hero CTA card, 4 categories, services, process
   ============================================================ */
/* hero CTA card (3rd floating card, restructured) */
.hero-cta-card{padding:16px !important}
.hero-cta-head{font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;color:#0f172a;display:flex;align-items:center;gap:8px}
.hero-cta-head i{color:#E5451C}
.hero-cta-card>p{font-size:.8rem;color:#64748b;margin:8px 0 14px;line-height:1.4}
.hero-cta-btn{width:100%;justify-content:center;text-align:center}
html[data-theme="dark"] .hero-cta-head{color:#EDEFF5}
html[data-theme="dark"] .hero-cta-card>p{color:#9AA2B8}

/* category blocks */
.cx-cats{padding-top:10px}
.cx-cat{margin-top:44px}
.cx-cat-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.cx-cat-ic{width:56px;height:56px;flex:none;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff}
.cx-ic-dev{background:linear-gradient(135deg,#0f3cc9,#5A7BFF)}
.cx-ic-msg{background:linear-gradient(135deg,#2E9E1F,#63D22E)}
.cx-ic-grow{background:linear-gradient(135deg,#E5451C,#FF6B1F)}
.cx-ic-sec{background:linear-gradient(135deg,#6E43A0,#A05CE6)}
.cx-cat-head h3{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:#0f172a}
.cx-cat-head p{color:#64748b;font-size:.92rem;margin-top:2px}
.cx-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1000px){.cx-cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.cx-cat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cx-cat-grid{grid-template-columns:1fr}}
.cx-svc{display:block;padding:20px 18px;border:1px solid rgba(0,0,0,.09);border-radius:16px;background:rgba(255,255,255,.6);text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.cx-svc:hover{transform:translateY(-4px);border-color:rgba(160,92,230,.35);box-shadow:0 16px 36px rgba(15,23,42,.08)}
.cx-svc>i{font-size:1.15rem;color:#6E43A0;margin-bottom:12px;display:block}
.cx-cat#development .cx-svc>i{color:#0f3cc9}
.cx-cat#messaging .cx-svc>i{color:#2E9E1F}
.cx-cat#growth .cx-svc>i{color:#E5451C}
.cx-cat#security .cx-svc>i{color:#6E43A0}
.cx-svc b{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;color:#0f172a;display:block;margin-bottom:6px}
.cx-svc span{color:#64748b;font-size:.84rem;line-height:1.5}
html[data-theme="dark"] .cx-cat-head h3{color:#EDEFF5}
html[data-theme="dark"] .cx-cat-head p,html[data-theme="dark"] .cx-svc span{color:#9AA2B8}
html[data-theme="dark"] .cx-svc{background:#14151C;border-color:#262833}
html[data-theme="dark"] .cx-svc b{color:#EDEFF5}
html[data-theme="dark"] .cx-svc:hover{border-color:rgba(160,92,230,.5)}

/* process steps */
.cx-process{padding-top:10px}
.cx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
@media(max-width:820px){.cx-steps{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.cx-steps{grid-template-columns:1fr}}
.cx-step{position:relative;padding:26px 22px;border:1px solid rgba(0,0,0,.09);border-radius:18px;background:rgba(255,255,255,.55)}
.cx-step-no{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;font-family:'Sora',sans-serif;font-weight:800;color:#fff;background:linear-gradient(135deg,#A05CE6,#FF6B1F);margin-bottom:14px}
.cx-step b{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem;color:#0f172a;display:block;margin-bottom:6px}
.cx-step p{color:#64748b;font-size:.86rem;line-height:1.5}
html[data-theme="dark"] .cx-step{background:#14151C;border-color:#262833}
html[data-theme="dark"] .cx-step b{color:#EDEFF5}
html[data-theme="dark"] .cx-step p{color:#9AA2B8}

/* ============================================================
   SERVICE PAGE — CTA + query form (top & bottom)
   ============================================================ */
.svc-cta{border:1px solid rgba(0,0,0,.09);border-radius:20px;background:rgba(255,255,255,.7);padding:26px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;margin:6px 0}
@media(max-width:820px){.svc-cta{grid-template-columns:1fr;gap:20px}}
.svc-cta-copy h3{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.02em;margin-bottom:8px;color:#0f172a}
.svc-cta-copy p{color:#64748b;font-size:.92rem;margin-bottom:16px}
.svc-cta-wa{display:inline-flex;align-items:center;gap:10px;background:#1f8f34;color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;padding:12px 20px;border-radius:10px}
.svc-cta-wa:hover{filter:brightness(1.08)}
.svc-cta-wa i{font-size:1.1rem}
.svc-form{display:flex;flex-direction:column;gap:10px}
.svc-form input,.svc-form textarea{width:100%;border:1px solid rgba(0,0,0,.14);border-radius:10px;padding:12px 14px;font:inherit;font-size:.92rem;background:#fff;color:#0f172a}
.svc-form textarea{min-height:84px;resize:vertical}
.svc-form button{background:#0f3cc9;color:#fff;border:0;border-radius:10px;padding:12px 18px;font-weight:700;font-size:.95rem;cursor:pointer;transition:.2s}
.svc-form button:hover{filter:brightness(1.08)}
.svc-form .svc-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.svc-form .svc-form-row{grid-template-columns:1fr}}
/* service detail bits */
.svc-lead{max-width:70ch}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc-card{padding:22px 20px;border:1px solid rgba(0,0,0,.09);border-radius:16px;background:rgba(255,255,255,.6)}
.svc-card i{font-size:1.2rem;color:#6E43A0;margin-bottom:10px;display:block}
.svc-grid .svc-card:nth-child(3n+2) i{color:#2E9E1F}
.svc-grid .svc-card:nth-child(3n+3) i{color:#E5451C}
.svc-grid .svc-card:nth-child(3n+1) i{color:#0f3cc9}
.svc-card b{font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;color:#0f172a;display:block;margin-bottom:6px}
.svc-card span{color:#64748b;font-size:.86rem;line-height:1.55}
.svc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;counter-reset:s}
@media(max-width:820px){.svc-steps{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.svc-steps{grid-template-columns:1fr}}
.svc-step{padding:22px 20px;border:1px solid rgba(0,0,0,.09);border-radius:16px;background:rgba(255,255,255,.55)}
.svc-step::before{counter-increment:s;content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#A05CE6,#FF6B1F);color:#fff;font-family:'Sora',sans-serif;font-weight:800;margin-bottom:12px}
.svc-step b{display:block;font-family:'Sora',sans-serif;font-weight:700;color:#0f172a;margin-bottom:6px}
.svc-step p{color:#64748b;font-size:.85rem;line-height:1.5}
.svc-bullets{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
@media(max-width:640px){.svc-bullets{grid-template-columns:1fr}}
.svc-bullets li{display:flex;gap:10px;align-items:flex-start;color:#334155;font-size:.92rem}
.svc-bullets li i{color:#2E9E1F;margin-top:3px}
/* dark */
html[data-theme="dark"] .svc-cta{background:#14151C;border-color:#262833}
html[data-theme="dark"] .svc-cta-copy h3{color:#EDEFF5}
html[data-theme="dark"] .svc-cta-copy p,html[data-theme="dark"] .svc-card span,html[data-theme="dark"] .svc-step p,html[data-theme="dark"] .svc-bullets li{color:#9AA2B8}
html[data-theme="dark"] .svc-form input,html[data-theme="dark"] .svc-form textarea{background:#0B0C10;border-color:#262833;color:#EDEFF5}
html[data-theme="dark"] .svc-card,html[data-theme="dark"] .svc-step{background:#14151C;border-color:#262833}
html[data-theme="dark"] .svc-card b,html[data-theme="dark"] .svc-step b{color:#EDEFF5}

/* ============================================================
   v7 — service page feature-pill icons + compact CTA + service visual
   ============================================================ */
/* give each feature-pill icon its own tidy colored chip, aligned */
.service-page-hero .features-grid .item{
  border:1px solid rgba(0,0,0,.09) !important;border-radius:12px;background:rgba(255,255,255,.65);
  padding:12px 14px !important;font-size:.92rem !important;font-weight:600;color:#0f172a !important;gap:12px}
.service-page-hero .features-grid .item i{
  width:34px;height:34px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  margin-right:0 !important;font-size:.95rem !important;background:rgba(15,60,201,.12);color:#0f3cc9 !important}
.service-page-hero .features-grid .item:nth-child(2) i{background:rgba(46,158,31,.12);color:#2E9E1F !important}
.service-page-hero .features-grid .item:nth-child(3) i{background:rgba(229,69,28,.12);color:#E5451C !important}
.service-page-hero .features-grid .item:nth-child(4) i{background:rgba(160,92,230,.12);color:#6E43A0 !important}
html[data-theme="dark"] .service-page-hero .features-grid .item{background:#14151C;border-color:#262833;color:#EDEFF5 !important}

/* compact, cleaner CTA card */
.svc-cta{padding:20px !important;gap:20px !important;grid-template-columns:1fr 1fr !important;border-radius:16px !important}
.svc-cta-copy h3{font-size:1.15rem !important;margin-bottom:6px !important}
.svc-cta-copy p{font-size:.85rem !important;margin-bottom:12px !important}
.svc-cta-wa{padding:10px 16px !important;font-size:.88rem !important;border-radius:9px !important}
.svc-form input,.svc-form textarea{padding:9px 12px !important;font-size:.86rem !important;border-radius:9px !important}
.svc-form textarea{min-height:64px !important}
.svc-form button{padding:10px 16px !important;font-size:.9rem !important;border-radius:9px !important}
/* in the hero, stack CTA compactly and keep it from ballooning */
.service-page-hero .svc-cta{max-width:440px;margin-left:auto}
@media(max-width:820px){.service-page-hero .svc-cta{max-width:none}}

/* service illustration in hero */
.svc-hero-visual{display:flex;align-items:center;justify-content:center;padding:10px}
.svc-hero-ill{width:100%;max-width:360px;aspect-ratio:1/1;border-radius:24px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(160,92,230,.14),rgba(255,107,31,.10));border:1px solid rgba(0,0,0,.06)}
.svc-hero-ill i{font-size:5.5rem;background:linear-gradient(135deg,#6E43A0,#FF6B1F);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-hero-ill::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(160,92,230,.25),transparent);top:-40px;right:-40px}
.svc-hero-ill::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,107,31,.2),transparent);bottom:-30px;left:-30px}
html[data-theme="dark"] .svc-hero-ill{background:linear-gradient(135deg,rgba(160,92,230,.2),rgba(255,107,31,.14));border-color:#262833}
/* new hero layout: text left, then a right column holding visual + CTA stacked */
.svc-hero-right{display:flex;flex-direction:column;gap:18px}

/* ============================================================
   v8 — homepage trust card proportions/alignment
   ============================================================ */
/* Keep the testimonial card secondary to the main hero image. */
.hero-review{
  width:190px !important;
  right:-20px !important;
  top:4px !important;
  padding:12px 13px !important;
  border-radius:20px !important;
}
.hero-review-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:7px !important;
  margin-bottom:8px !important;
}
.hero-avatars{
  display:flex !important;
  align-items:center !important;
  flex:none !important;
}
.hero-avatars img{
  display:block !important;
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  object-fit:cover !important;
  object-position:center !important;
  border:2px solid #fff !important;
  border-radius:50% !important;
  margin-left:-7px !important;
  box-shadow:0 2px 7px rgba(15,23,42,.08) !important;
}
.hero-avatars img:first-child{margin-left:0 !important}
.hero-stars{
  flex:none !important;
  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}
.hero-review>strong{
  display:block !important;
  margin:0 !important;
  color:#1f2937 !important;
  font-size:12.5px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
}
.hero-review>span{
  display:block !important;
  margin-top:4px !important;
  color:#64748b !important;
  font-size:11.5px !important;
  line-height:1.4 !important;
  font-weight:500 !important;
}
html[data-theme="dark"] .hero-avatars img{border-color:#14151C !important}
html[data-theme="dark"] .hero-review>span{color:#9AA2B8 !important}

@media(max-width:1180px){
  .hero-review{right:8px !important;top:4px !important}
}
@media(max-width:768px){
  .hero-review{width:184px !important;padding:11px 12px !important}
  .hero-avatars img{width:30px !important;height:30px !important;min-width:30px !important}
  .hero-review>strong{font-size:12px !important}
  .hero-review>span{font-size:11px !important}
}