/* ==========================================================================
   cx.css — CoderVariant design system (dark 3D SaaS + AI)
   1. Tokens          2. Buttons         3. Navbar          4. Footer
   5. Homepage        6. Inner-page skin (maps the old light Tailwind pages
                         onto the same dark tokens without touching markup)
   Every class is prefixed "cx-" so it can sit beside tailwind-built.css.
   ========================================================================== */

:root {
  --cx-bg: #05070d;
  --cx-bg-2: #0a0f1c;
  --cx-surface: #0e1424;
  --cx-surface-2: #111827;
  --cx-text: #ffffff;
  --cx-muted: #a7b0c0;
  --cx-dim: #6b7688;
  --cx-line: rgba(255, 255, 255, .08);
  --cx-line-2: rgba(255, 255, 255, .14);
  --cx-blue: #3b82f6;
  --cx-cyan: #22d3ee;
  --cx-violet: #8b5cf6;
  --cx-grad: linear-gradient(120deg, #3b82f6 0%, #22d3ee 100%);
  --cx-grad-2: linear-gradient(120deg, #8b5cf6 0%, #3b82f6 100%);
  --cx-glass: rgba(255, 255, 255, .04);
  --cx-radius: 20px;
  --cx-radius-sm: 14px;
  --cx-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7);
  --cx-glow: 0 0 0 1px rgba(59, 130, 246, .35), 0 20px 60px -20px rgba(34, 211, 238, .35);
  --cx-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cx-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ============================================================== 2. Buttons */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--cx-font); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease), background-color .25s, border-color .25s, color .25s;
}
.cx-btn svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .25s var(--cx-ease); }
.cx-btn:hover svg { transform: translateX(3px); }
.cx-btn--primary { background: var(--cx-grad); color: #04121f; box-shadow: 0 10px 30px -10px rgba(34, 211, 238, .6); }
.cx-btn--primary:hover { color: #04121f; box-shadow: 0 14px 40px -10px rgba(34, 211, 238, .85); }
.cx-btn--ghost { background: var(--cx-glass); color: #fff; border-color: var(--cx-line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cx-btn--ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .28); color: #fff; }
.cx-btn--wa { background: #25d366; color: #04210f; }
.cx-btn--wa:hover { color: #04210f; box-shadow: 0 14px 40px -12px rgba(37, 211, 102, .7); }
.cx-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.cx-btn[disabled] { opacity: .6; cursor: progress; }
.cx-btn:focus-visible, .cx-nav a:focus-visible, .cx-nav button:focus-visible, .cx-home a:focus-visible, .cx-home button:focus-visible, .cx-home summary:focus-visible {
  outline: 2px solid var(--cx-cyan); outline-offset: 3px; border-radius: 8px;
}

/* =============================================================== 3. Navbar */
.cx-nav { position: fixed; top: 12px; left: 0; right: 0; z-index: 70; padding: 0 16px; font-family: var(--cx-font); pointer-events: none; }
.cx-nav__bar {
  pointer-events: auto; max-width: 1240px; margin: 0 auto; height: 62px; padding: 0 10px 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(10, 15, 28, .35); border: 1px solid transparent; border-radius: 18px;
  transition: background-color .35s, box-shadow .35s, border-color .35s, backdrop-filter .35s;
}
.cx-nav.is-scrolled .cx-nav__bar, .cx-nav.is-open .cx-nav__bar {
  background: rgba(10, 15, 28, .72); border-color: var(--cx-line-2); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
}
.cx-nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.cx-nav__logo img { height: 36px; width: auto; display: block; }
.cx-nav__links { display: none; align-items: center; gap: 0; }
.cx-nav__links > a, .cx-dd > button {
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 11px; border: 0; background: none; border-radius: 10px;
  font: 500 14px/1 var(--cx-font); color: #c9d1de; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s;
}
.cx-nav__links > a:hover, .cx-dd > button:hover, .cx-dd.is-open > button { background: rgba(255, 255, 255, .07); color: #fff; }
.cx-nav__links > a[aria-current="page"] { color: var(--cx-cyan); }
.cx-dd > button svg { width: 14px; height: 14px; transition: transform .25s; }
.cx-dd.is-open > button svg { transform: rotate(180deg); }
.cx-dd { position: relative; }
.cx-dd__panel {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 580px; padding: 10px;
  background: rgba(12, 17, 30, .96); border: 1px solid var(--cx-line-2); border-radius: 18px; box-shadow: var(--cx-shadow);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .2s, transform .25s var(--cx-ease), visibility .2s;
}
.cx-dd__panel--narrow { width: 340px; grid-template-columns: 1fr; }
.cx-dd.is-open .cx-dd__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cx-dd__panel a { display: block; padding: 11px 12px; border-radius: 12px; text-decoration: none; transition: background-color .2s; }
.cx-dd__panel a:hover { background: rgba(255, 255, 255, .06); }
.cx-dd__panel strong { display: block; font: 600 14px/1.3 var(--cx-font); color: #fff; }
.cx-dd__panel span { display: block; margin-top: 3px; font: 400 12.5px/1.4 var(--cx-font); color: var(--cx-muted); }
.cx-nav__right { display: flex; align-items: center; gap: 8px; }
.cx-nav__right .cx-btn { display: none; }
.cx-nav__toggle {
  position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--cx-line-2); background: var(--cx-glass); cursor: pointer;
}
.cx-nav__toggle i { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--cx-ease), opacity .2s, top .3s var(--cx-ease); }
.cx-nav__toggle i:nth-child(1) { top: 15px; } .cx-nav__toggle i:nth-child(2) { top: 21px; } .cx-nav__toggle i:nth-child(3) { top: 27px; }
.cx-nav.is-open .cx-nav__toggle i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.cx-nav.is-open .cx-nav__toggle i:nth-child(2) { opacity: 0; }
.cx-nav.is-open .cx-nav__toggle i:nth-child(3) { top: 21px; transform: rotate(-45deg); }
/* full-screen mobile menu */
.cx-mobile {
  pointer-events: auto; position: fixed; inset: 0; z-index: -1; padding: 96px 20px 32px; overflow-y: auto;
  background: rgba(5, 7, 13, .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; font-family: var(--cx-font);
}
.cx-nav.is-open .cx-mobile { opacity: 1; visibility: visible; }
.cx-mobile > a, .cx-mobile summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--cx-line);
  font: 600 22px/1.2 var(--cx-font); letter-spacing: -.02em; color: #fff; text-decoration: none; cursor: pointer; list-style: none;
  opacity: 0; transform: translateY(12px); transition: opacity .35s var(--cx-ease), transform .35s var(--cx-ease); transition-delay: calc(var(--i, 0) * 35ms);
}
.cx-nav.is-open .cx-mobile > a, .cx-nav.is-open .cx-mobile summary { opacity: 1; transform: none; }
.cx-mobile summary::-webkit-details-marker { display: none; }
.cx-mobile summary::after { content: "+"; font: 400 26px/1 var(--cx-font); color: var(--cx-muted); transition: transform .25s; }
.cx-mobile details[open] summary::after { transform: rotate(45deg); }
.cx-mobile details a { display: block; padding: 12px 0 12px 14px; font: 500 16px/1.3 var(--cx-font); color: var(--cx-muted); text-decoration: none; border-bottom: 1px solid var(--cx-line); }
.cx-mobile > a.cx-btn { margin-top: 24px; border-bottom: 0; justify-content: center; font-size: 16px; color: #04121f; }
@media (min-width: 1160px) {
  .cx-nav__links { display: flex; }
  .cx-nav__right .cx-btn { display: inline-flex; }
  .cx-nav__toggle, .cx-mobile { display: none !important; }
}

/* =============================================================== 4. Footer */
.cx-footer { position: relative; background: var(--cx-bg); color: var(--cx-muted); font-family: var(--cx-font); padding: 80px 20px 28px; border-top: 1px solid var(--cx-line); }
.cx-footer__in { max-width: 1180px; margin: 0 auto; }
.cx-footer__top { display: grid; gap: 44px; grid-template-columns: 1fr; padding-bottom: 48px; border-bottom: 1px solid var(--cx-line); }
.cx-footer__brand img { height: 40px; width: auto; display: block; }
.cx-footer__tag { margin: 20px 0 0; font: 600 19px/1.35 var(--cx-font); letter-spacing: -.02em; color: #fff; }
.cx-footer__desc { margin: 10px 0 0; max-width: 36ch; font-size: 14px; line-height: 1.65; color: var(--cx-muted); }
.cx-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
.cx-footer h3 { margin: 0 0 16px; font: 600 12.5px/1 var(--cx-font); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.cx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cx-footer a { color: var(--cx-muted); text-decoration: none; font-size: 14.5px; line-height: 1.5; transition: color .2s; }
.cx-footer a:hover { color: #fff; }
.cx-footer__social { display: flex; gap: 10px; margin-top: 22px; }
.cx-footer__social a { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--cx-line-2); background: var(--cx-glass); display: inline-flex; align-items: center; justify-content: center; transition: border-color .25s, color .25s, transform .25s var(--cx-ease); }
.cx-footer__social a:hover { border-color: var(--cx-cyan); color: var(--cx-cyan); transform: translateY(-2px); }
.cx-footer__social svg { width: 18px; height: 18px; }
.cx-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; padding-top: 24px; font-size: 13.5px; }
.cx-footer__bottom p { margin: 0; }
.cx-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (min-width: 720px) { .cx-footer__cols { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1060px) { .cx-footer__top { grid-template-columns: 300px 1fr; gap: 72px; } }
.cx-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 54px; height: 54px; border-radius: 999px; background: #25d366;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .25s var(--cx-ease);
}
.cx-wa:hover { transform: scale(1.07); }

/* ============================================================= 5. HOMEPAGE */
body.cx-home { margin: 0; background: var(--cx-bg); color: var(--cx-text); font: 400 16px/1.6 var(--cx-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.cx-home *, .cx-home *::before, .cx-home *::after { box-sizing: border-box; }
/* :where() keeps these resets at zero specificity so component rules always win */
:where(.cx-home) :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote) { margin: 0; }
:where(.cx-home) :where(ul, ol) { padding: 0; list-style: none; }
:where(.cx-home main) a { color: inherit; }
.cx-home img, .cx-home svg { max-width: 100%; }

.cx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.cx-section { padding: 88px 0; position: relative; }
.cx-section--alt { background: var(--cx-bg-2); }
.cx-section--line { border-top: 1px solid var(--cx-line); }
@media (min-width: 900px) { .cx-section { padding: 128px 0; } }

.cx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--cx-line-2); background: var(--cx-glass);
  font: 600 11.5px/1 var(--cx-font); letter-spacing: .12em; text-transform: uppercase; color: #cbd5e1;
}
.cx-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--cx-cyan); box-shadow: 0 0 12px var(--cx-cyan); }
.cx-h2 { margin-top: 20px; font: 700 clamp(30px, 4.8vw, 56px)/1.06 var(--cx-font); letter-spacing: -.04em; text-wrap: balance; }
.cx-lead { margin-top: 18px; max-width: 58ch; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; color: var(--cx-muted); }
.cx-head { margin-bottom: 52px; }
.cx-head--center { text-align: center; }
.cx-head--center .cx-lead { margin-left: auto; margin-right: auto; }
.cx-head--split { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-end; }
.cx-grad-text { background: var(--cx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--cx-cyan) !important; text-decoration: none; }
.cx-link svg { width: 16px; height: 16px; transition: transform .25s var(--cx-ease); }
.cx-link:hover svg, a:hover > .cx-link svg, .cx-card:hover .cx-link svg { transform: translateX(4px); }
.cx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-tags li, .cx-tag { padding: 5px 9px; border-radius: 8px; border: 1px solid var(--cx-line); background: var(--cx-glass); font: 500 12px/1 var(--cx-mono); color: #c9d1de; }

/* Scroll reveal — hidden only once JS has confirmed it can reveal */
.cx-js .cx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--cx-ease), transform .7s var(--cx-ease); transition-delay: var(--d, 0ms); }
.cx-js .cx-reveal.is-in { opacity: 1; transform: none; }

/* Glass card with cursor glow + optional 3D tilt (JS sets --rx/--ry/--mx/--my) */
.cx-card {
  position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: var(--cx-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); border: 1px solid var(--cx-line);
  text-decoration: none; overflow: hidden; isolation: isolate; transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transition: transform .35s var(--cx-ease), border-color .35s, box-shadow .35s;
}
.cx-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, .16), transparent 60%);
}
.cx-card:hover { --ty: -4px; border-color: rgba(34, 211, 238, .4); box-shadow: var(--cx-glow); }
.cx-card:hover::before { opacity: 1; }
.cx-card h3 { font: 650 20px/1.25 var(--cx-font); font-weight: 650; letter-spacing: -.025em; color: #fff; }
.cx-card p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--cx-muted); }
.cx-num { font: 600 12.5px/1 var(--cx-mono); color: var(--cx-cyan); }
.cx-ico {
  width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(59, 130, 246, .22), rgba(34, 211, 238, .12)); border: 1px solid rgba(59, 130, 246, .3); color: #7dd3fc;
  transition: transform .4s var(--cx-ease);
}
.cx-ico svg { width: 22px; height: 22px; }
.cx-card:hover .cx-ico { transform: translateZ(30px) rotate(-6deg) scale(1.08); }

/* ---------------------------------------------------------------- Hero */
.cx-hero { position: relative; padding: 128px 0 64px; overflow: hidden; }
.cx-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.cx-hero__bg::before {  /* animated grid */
  content: ""; position: absolute; inset: -60px 0 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 60px 60px; animation: cx-grid 16s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 78%);
}
@keyframes cx-grid { to { transform: translateY(60px); } }
.cx-hero__bg::after {  /* radial light */
  content: ""; position: absolute; right: -10%; top: 4%; width: 780px; height: 780px; max-width: 110vw;
  background: radial-gradient(closest-side, rgba(59, 130, 246, .28), rgba(139, 92, 246, .10) 55%, transparent 72%); filter: blur(10px);
}
.cx-dots i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--cx-cyan); box-shadow: 0 0 10px var(--cx-cyan); opacity: .5; animation: cx-float 8s ease-in-out infinite; }
@keyframes cx-float { 50% { transform: translateY(-16px); opacity: .9; } }
.cx-hero__in { position: relative; z-index: 2; display: grid; gap: 56px; align-items: center; }
.cx-hero h1 { margin-top: 22px; font: 800 clamp(38px, 6vw, 72px)/1.03 var(--cx-font); letter-spacing: -.045em; text-wrap: balance; }
.cx-hero__sub { margin-top: 22px; max-width: 52ch; font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.65; color: var(--cx-muted); }
.cx-hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.cx-hero__trust { margin-top: 26px; font: 500 13px/1.6 var(--cx-mono); color: var(--cx-dim); }
@media (min-width: 1060px) { .cx-hero { padding: 168px 0 96px; } .cx-hero__in { grid-template-columns: 1.02fr 1fr; gap: 40px; } }
@media (max-width: 1059px) { .cx-hero__text { text-align: center; } .cx-hero__sub { margin-left: auto; margin-right: auto; } .cx-hero__cta { justify-content: center; } }

/* 3D product scene (pure CSS 3D; JS adds mouse parallax via --px / --py) */
.cx-scene { position: relative; height: 340px; perspective: 1400px; }
.cx-scene__rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(8deg + var(--py, 0) * -6deg)) rotateY(calc(-14deg + var(--px, 0) * 10deg)); transition: transform .3s var(--cx-ease); }
.cx-layer { position: absolute; transform-style: preserve-3d; animation: cx-bob 7s ease-in-out infinite; }
@keyframes cx-bob { 50% { translate: 0 -12px; } }
.cx-layer--browser { left: 0; right: 6%; top: 8%; transform: translateZ(0); }
.cx-layer--phone { right: -2%; bottom: 6%; width: 26%; max-width: 150px; transform: translateZ(110px); animation-delay: -2s; }
.cx-layer--card { left: -4%; bottom: 14%; width: 44%; max-width: 230px; transform: translateZ(150px); animation-delay: -4s; display: none; }
.cx-layer--code { right: 2%; top: -6%; width: 46%; max-width: 250px; transform: translateZ(80px); animation-delay: -1s; display: none; }
.cx-layer--orb { left: 30%; top: -12%; width: 92px; height: 92px; transform: translateZ(190px); animation-delay: -3s; }
.cx-layer--cube { display: none; }
/* phones: a flatter, lighter composition — browser in flow, phone + orb as accents */
@media (max-width: 719px) {
  .cx-scene { height: auto; margin: 8px 0 28px; }
  .cx-scene__rig { position: relative; transform: rotateX(4deg) rotateY(-6deg); }
  .cx-layer--browser { position: relative; left: auto; right: auto; top: auto; margin-right: 8%; }
  .cx-layer--phone { right: 0; bottom: -18px; width: 24%; }
  .cx-layer--orb { left: auto; right: 4%; top: -26px; width: 60px; height: 60px; }
  .cx-orb::after { font-size: 12px; }
}
@media (min-width: 720px) { .cx-scene { height: 480px; } .cx-layer--card, .cx-layer--code { display: block; } .cx-layer--cube { display: block; } }
@media (min-width: 1060px) { .cx-scene { height: 540px; } }

.cx-orb { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #e0f7ff 0%, #22d3ee 18%, #3b82f6 48%, #4c1d95 78%, #0b1020 100%); box-shadow: 0 0 60px rgba(34, 211, 238, .55), inset -10px -14px 30px rgba(0, 0, 0, .45); }
.cx-orb::after { content: "AI"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--cx-font); letter-spacing: .08em; color: rgba(255, 255, 255, .92); }
.cx-cube { width: 44px; height: 44px; transform-style: preserve-3d; animation: cx-spin 14s linear infinite; }
.cx-cube i { position: absolute; inset: 0; border: 1px solid rgba(34, 211, 238, .55); background: rgba(59, 130, 246, .10); }
.cx-cube i:nth-child(1) { transform: translateZ(22px); } .cx-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(22px); }
.cx-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(22px); } .cx-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(22px); }
.cx-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(22px); } .cx-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(22px); }
@keyframes cx-spin { to { transform: rotateX(360deg) rotateY(360deg); } }
.cx-layer--cube.a { left: 8%; top: 0; transform: translateZ(60px); } .cx-layer--cube.b { right: 22%; bottom: -6%; transform: translateZ(200px) scale(.7); animation-delay: -5s; }

/* Glass panels + browser/phone mocks (shared across sections) */
.cx-glass { background: rgba(14, 20, 36, .78); border: 1px solid var(--cx-line-2); border-radius: 16px; box-shadow: var(--cx-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cx-window { position: relative; background: #0b1120; border: 1px solid var(--cx-line-2); border-radius: 16px; box-shadow: var(--cx-shadow), 0 0 80px -30px rgba(59, 130, 246, .5); overflow: hidden; text-align: left; }
.cx-window__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: rgba(255, 255, 255, .035); border-bottom: 1px solid var(--cx-line); }
.cx-window__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.cx-window__bar span { margin: 0 auto; padding: 4px 14px; border-radius: 8px; background: rgba(255, 255, 255, .05); font: 500 11px/1 var(--cx-mono); color: var(--cx-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.cx-dash { display: grid; grid-template-columns: 1fr; }
.cx-dash__side { display: none; padding: 14px 8px; border-right: 1px solid var(--cx-line); }
.cx-dash__side b { display: block; padding: 0 10px 12px; font: 700 12.5px/1 var(--cx-font); color: #fff; }
.cx-dash__side span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font: 500 12px/1 var(--cx-font); color: var(--cx-dim); }
.cx-dash__side span::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.cx-dash__side span.is-on { background: rgba(59, 130, 246, .16); color: #93c5fd; }
.cx-dash__side span.is-on::before { background: var(--cx-cyan); }
.cx-dash__main { padding: 14px; min-width: 0; }
.cx-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cx-kpi { padding: 11px; border: 1px solid var(--cx-line); border-radius: 11px; background: rgba(255, 255, 255, .03); min-width: 0; }
.cx-kpi small { display: block; font: 500 10.5px/1 var(--cx-font); color: var(--cx-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-kpi strong { display: block; margin-top: 8px; font: 700 clamp(14px, 1.8vw, 19px)/1 var(--cx-font); letter-spacing: -.03em; color: #fff; }
.cx-kpi em { display: inline-block; margin-top: 7px; padding: 3px 6px; border-radius: 6px; background: rgba(34, 197, 94, .14); color: #4ade80; font: 600 10px/1 var(--cx-font); font-style: normal; }
.cx-panel { margin-top: 8px; padding: 12px; border: 1px solid var(--cx-line); border-radius: 11px; background: rgba(255, 255, 255, .02); min-width: 0; }
.cx-panel > small { display: block; margin-bottom: 10px; font: 600 11px/1 var(--cx-font); color: #c9d1de; }
.cx-panel svg { display: block; width: 100%; height: auto; }
@media (min-width: 560px) { .cx-dash { grid-template-columns: 138px 1fr; } .cx-dash__side { display: block; } .cx-kpis { grid-template-columns: repeat(4, 1fr); } }
.cx-dash--compact { grid-template-columns: 1fr !important; } .cx-dash--compact .cx-dash__side { display: none !important; } .cx-dash--compact .cx-kpis { grid-template-columns: repeat(2, 1fr); }
.cx-phone { padding: 7px; border-radius: 24px; background: #0b1120; border: 1px solid var(--cx-line-2); box-shadow: var(--cx-shadow), 0 0 50px -16px rgba(139, 92, 246, .7); }
.cx-phone > div { border-radius: 18px; background: linear-gradient(180deg, #111a2f, #0b1120); padding: 12px 9px; display: grid; gap: 7px; }
.cx-phone i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.cx-phone i.h { height: 46px; border-radius: 10px; background: var(--cx-grad-2); } .cx-phone i.w6 { width: 60%; } .cx-phone i.b { height: 22px; border-radius: 8px; background: var(--cx-grad); margin-top: 4px; }
.cx-mini { padding: 14px; }
.cx-mini small { font: 500 11px/1 var(--cx-font); color: var(--cx-dim); }
.cx-mini strong { display: block; margin-top: 8px; font: 700 22px/1 var(--cx-font); letter-spacing: -.03em; }
.cx-mini .cx-barline { margin-top: 12px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cx-mini .cx-barline i { display: block; height: 100%; width: 72%; border-radius: 3px; background: var(--cx-grad); }
.cx-codeblock { padding: 14px; font: 500 11.5px/1.85 var(--cx-mono); color: #94a3b8; white-space: nowrap; overflow: hidden; }
.cx-codeblock span { display: block; } .cx-codeblock b { color: #c4b5fd; font-weight: 500; } .cx-codeblock u { color: #67e8f9; text-decoration: none; } .cx-codeblock s { color: #86efac; text-decoration: none; }
.cx-note { margin-top: 18px; font-size: 12px; color: var(--cx-dim); }

/* ---------------------------------------------------------------- Stats */
.cx-stats { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--cx-line); border-radius: var(--cx-radius); background: var(--cx-glass); overflow: hidden; }
.cx-stat { padding: 28px 22px; border-right: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line); }
.cx-stat:nth-child(2n) { border-right: 0; } .cx-stat:nth-last-child(-n+2) { border-bottom: 0; }
.cx-stat strong { display: block; font: 800 clamp(34px, 4.6vw, 54px)/1 var(--cx-font); letter-spacing: -.045em; background: linear-gradient(180deg, #fff, #9fb3d1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-stat span { display: block; margin-top: 10px; font: 500 13px/1.4 var(--cx-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-muted); }
@media (min-width: 820px) { .cx-stats { grid-template-columns: repeat(4, 1fr); } .cx-stat { border-bottom: 0; padding: 36px 30px; } .cx-stat:nth-child(2n) { border-right: 1px solid var(--cx-line); } .cx-stat:last-child { border-right: 0; } }

/* ---------------------------------------------------------------- Grids */
.cx-grid3 { display: grid; gap: 16px; }
@media (min-width: 680px) { .cx-grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .cx-grid3 { grid-template-columns: repeat(3, 1fr); } }
.cx-problem h3 { margin-top: 18px; }
.cx-problem .cx-link { margin-top: auto; padding-top: 20px; }

.cx-bento { display: grid; grid-template-columns: 1fr; gap: 16px; }
.cx-bento .cx-card { min-height: 220px; }
.cx-bento .cx-card h3 { margin-top: 18px; }
.cx-bento .cx-tags { margin-top: 16px; }
.cx-bento .cx-card__foot { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; }
.cx-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cx-line-2); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background-color .3s, border-color .3s, transform .3s var(--cx-ease); }
.cx-arrow svg { width: 16px; height: 16px; }
.cx-card:hover .cx-arrow { background: var(--cx-cyan); border-color: var(--cx-cyan); color: #04121f; transform: rotate(-45deg); }
@media (min-width: 720px) { .cx-bento { grid-template-columns: repeat(6, 1fr); } .cx-bento > * { grid-column: span 3; } .cx-bento > .s12m { grid-column: span 6; } }
@media (min-width: 1060px) {
  .cx-bento { grid-template-columns: repeat(12, 1fr); }
  .cx-bento > .s6 { grid-column: span 6; } .cx-bento > .s4 { grid-column: span 4; } .cx-bento > .s3 { grid-column: span 3; } .cx-bento > .s5 { grid-column: span 5; } .cx-bento > .s7 { grid-column: span 7; } .cx-bento > .s12m { grid-column: span 12; min-height: 0; }
}

/* ------------------------------------------------------- Featured SaaS */
.cx-feature { position: relative; overflow: hidden; }
.cx-feature::before { content: ""; position: absolute; left: 50%; top: 30%; width: 1000px; height: 600px; max-width: 130vw; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(139, 92, 246, .22), rgba(59, 130, 246, .10) 55%, transparent 72%); pointer-events: none; }
.cx-feature__list { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cx-feature__stage { position: relative; margin: 56px auto 0; max-width: 980px; perspective: 1600px; }
.cx-feature__stage .cx-window { transform: rotateX(var(--frx, 14deg)); transform-origin: center top; transition: transform .2s linear; }
.cx-feature__stage .cx-dash__main { padding: 18px; } .cx-feature__stage .cx-kpis { gap: 10px; }
.cx-feature__row { display: grid; gap: 8px; }
@media (min-width: 720px) { .cx-feature__row { grid-template-columns: 1.7fr 1fr; } }
.cx-rows { display: grid; gap: 9px; }
.cx-rows div { display: flex; align-items: center; gap: 8px; font: 500 11.5px/1.2 var(--cx-font); color: #c9d1de; }
.cx-rows div::before { content: ""; flex: 0 0 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.cx-rows div span { margin-left: auto; color: var(--cx-dim); white-space: nowrap; }

/* ------------------------------------------------------------ Products */
.cx-show { display: grid; gap: 32px; align-items: center; padding: 26px; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid var(--cx-line); }
.cx-show + .cx-show { margin-top: 20px; }
.cx-show h3 { margin-top: 16px; font: 700 clamp(24px, 3vw, 36px)/1.1 var(--cx-font); letter-spacing: -.035em; }
.cx-show p { margin-top: 14px; color: var(--cx-muted); line-height: 1.65; }
.cx-show__feat { margin-top: 20px; display: grid; gap: 9px; }
.cx-show__feat li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #dbe2ee; }
.cx-show__feat li::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: rgba(34, 211, 238, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; }
.cx-show .cx-tags { margin-top: 20px; }
.cx-show .cx-btn { margin-top: 26px; }
.cx-show__mock { position: relative; min-width: 0; perspective: 1400px; }
.cx-show__mock .cx-window { transform: rotateY(var(--tilt, -9deg)) rotateX(4deg); transition: transform .6s var(--cx-ease); }
.cx-show:hover .cx-show__mock .cx-window { transform: rotateY(0deg) rotateX(0deg); }
.cx-show--flip .cx-show__mock .cx-window { --tilt: 9deg; }
.cx-toast { position: absolute; right: 8px; bottom: -14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font: 600 12.5px/1 var(--cx-font); color: #fff; animation: cx-float 6s ease-in-out infinite; }
.cx-toast i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
@media (min-width: 980px) { .cx-show { grid-template-columns: 5fr 6fr; gap: 56px; padding: 52px; } .cx-show--flip .cx-show__text { order: 2; } .cx-show--flip { grid-template-columns: 6fr 5fr; } }
@media (max-width: 979px) { .cx-show__mock .cx-window { transform: none !important; } }

/* ---------------------------------------------------------- Industries */
.cx-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs button { flex: 0 0 auto; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--cx-line-2); background: var(--cx-glass); font: 600 14px/1 var(--cx-font); color: var(--cx-muted); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.cx-tabs button:hover { color: #fff; }
.cx-tabs button[aria-selected="true"] { background: #fff; border-color: #fff; color: #05070d; }
.cx-ind { margin-top: 24px; display: grid; gap: 28px; align-items: center; padding: 26px; border-radius: 24px; border: 1px solid var(--cx-line); background: var(--cx-glass); }
.cx-js .cx-ind[hidden] { display: none; }
.cx-ind h3 { font: 700 clamp(22px, 2.8vw, 32px)/1.12 var(--cx-font); letter-spacing: -.03em; }
.cx-ind p { margin-top: 12px; color: var(--cx-muted); line-height: 1.65; }
.cx-ind .cx-link { margin-top: 20px; }
.cx-js .cx-ind:not([hidden]) { animation: cx-in .5s var(--cx-ease); }
@keyframes cx-in { from { opacity: 0; transform: translateY(14px); } }
@media (min-width: 900px) { .cx-ind { grid-template-columns: 1fr 1.15fr; gap: 48px; padding: 44px; } }

/* -------------------------------------------------------- Case study */
.cx-case { display: grid; gap: 28px; padding: 26px; border-radius: 28px; border: 1px solid var(--cx-line); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); text-decoration: none; transition: border-color .35s, box-shadow .35s; }
.cx-case:hover { border-color: rgba(34, 211, 238, .4); box-shadow: var(--cx-glow); }
.cx-case__mock { border-radius: 18px; padding: 22px 22px 0; overflow: hidden; background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(139, 92, 246, .12)); }
.cx-case__mock .cx-window { border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: none; transform-origin: bottom center; transition: transform .7s var(--cx-ease); }
.cx-case:hover .cx-case__mock .cx-window { transform: scale(1.04); }
.cx-case__meta { font: 600 12px/1 var(--cx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cx-cyan); }
.cx-case h3 { margin-top: 12px; font: 700 clamp(24px, 3vw, 34px)/1.12 var(--cx-font); letter-spacing: -.03em; }
.cx-case dl { margin-top: 20px; display: grid; gap: 16px; }
.cx-case dt { font: 600 11.5px/1 var(--cx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cx-dim); }
.cx-case dd { margin-top: 6px; font-size: 15px; line-height: 1.6; color: #dbe2ee; }
@media (min-width: 900px) { .cx-case { grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 44px; align-items: center; } }

/* ---------------------------------------------------------- Technology */
.cx-tech { display: grid; gap: 14px; }
.cx-tech > div { padding: 22px; border-radius: var(--cx-radius); background: var(--cx-glass); border: 1px solid var(--cx-line); }
.cx-tech h3 { font: 600 12px/1 var(--cx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cx-dim); }
.cx-tech ul { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.cx-tech li {
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--cx-line-2); font: 600 14px/1 var(--cx-font); letter-spacing: -.01em; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); box-shadow: 0 6px 0 -2px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: cx-bob 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -700ms); transition: border-color .25s, color .25s;
}
.cx-tech li:hover { border-color: var(--cx-cyan); color: var(--cx-cyan); }
@media (min-width: 640px) { .cx-tech { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .cx-tech { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------- Process */
.cx-steps { position: relative; display: grid; gap: 6px; }
.cx-steps::before, .cx-steps::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--cx-line-2); }
.cx-steps::after { background: var(--cx-grad); bottom: auto; height: calc((100% - 44px) * var(--p, 0)); box-shadow: 0 0 14px var(--cx-cyan); transition: height .35s linear; }
.cx-step { position: relative; z-index: 1; padding: 0 0 26px 66px; }
.cx-step__dot {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 13px; background: var(--cx-bg-2); border: 1px solid var(--cx-line-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--cx-dim);
  transform: perspective(300px) rotateY(-22deg) rotateX(10deg); transition: transform .5s var(--cx-ease), background .4s, color .4s, border-color .4s, box-shadow .4s;
}
.cx-step__dot svg { width: 20px; height: 20px; }
.cx-step small { font: 600 11.5px/1 var(--cx-mono); color: var(--cx-dim); transition: color .4s; }
.cx-step h3 { margin-top: 6px; font: 650 18px/1.3 var(--cx-font); font-weight: 650; letter-spacing: -.02em; color: #8792a6; transition: color .4s; }
.cx-step p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--cx-muted); }
.cx-step.is-done .cx-step__dot { border-color: rgba(34, 211, 238, .5); color: var(--cx-cyan); }
.cx-step.is-active .cx-step__dot { background: var(--cx-grad); border-color: transparent; color: #04121f; transform: perspective(300px) rotateY(0) rotateX(0) scale(1.08); box-shadow: 0 0 30px rgba(34, 211, 238, .6); }
.cx-step.is-done h3, .cx-step.is-active h3, html:not(.cx-js) .cx-step h3 { color: #fff; }
.cx-step.is-active small { color: var(--cx-cyan); }
@media (min-width: 1060px) {
  .cx-steps { grid-template-columns: repeat(7, 1fr); gap: 18px; }
  .cx-steps::before, .cx-steps::after { left: 22px; right: 22px; top: 21px; bottom: auto; width: auto; height: 2px; }
  .cx-steps::after { right: auto; width: calc((100% - 44px) * var(--p, 0)); height: 2px; transition: width .35s linear; }
  .cx-step { padding: 64px 0 0; }
}

/* ------------------------------------------------------------------ AI */
.cx-ai { display: grid; gap: 40px; align-items: center; }
.cx-ai__net { position: relative; max-width: 520px; margin: 0 auto; width: 100%; }
.cx-ai__net svg { display: block; width: 100%; height: auto; overflow: visible; }
.cx-ai__net line { stroke: rgba(34, 211, 238, .28); stroke-width: 1; stroke-dasharray: 4 6; animation: cx-dash 2.4s linear infinite; }
@keyframes cx-dash { to { stroke-dashoffset: -20; } }
.cx-ai__net circle.n { fill: #0b1120; stroke: var(--cx-cyan); stroke-width: 1.5; animation: cx-pulse 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -400ms); transform-box: fill-box; transform-origin: center; }
@keyframes cx-pulse { 50% { transform: scale(1.35); fill: rgba(34, 211, 238, .5); } }
.cx-ai__core { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.cx-ai__feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; }
.cx-ai__feat li { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--cx-line); background: var(--cx-glass); font: 500 14px/1.3 var(--cx-font); color: #dbe2ee; transition: border-color .3s, transform .3s var(--cx-ease); }
.cx-ai__feat li:hover { border-color: rgba(139, 92, 246, .6); transform: translateX(4px); }
.cx-ai__feat li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--cx-violet); box-shadow: 0 0 10px var(--cx-violet); }
.cx-ai .cx-btn { margin-top: 30px; }
@media (min-width: 980px) { .cx-ai { grid-template-columns: 1fr 1fr; gap: 72px; } }
@media (max-width: 420px) { .cx-ai__feat { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- Testimonials */
.cx-tscroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 20px; margin: 0 -20px; scrollbar-width: thin; }
.cx-tcard { flex: 0 0 min(88%, 420px); scroll-snap-align: start; padding: 28px; border-radius: var(--cx-radius); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--cx-line-2); box-shadow: var(--cx-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cx-tcard blockquote { font-size: 16px; line-height: 1.7; color: #dbe2ee; }
.cx-tcard footer { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.cx-tcard footer img, .cx-tcard footer b { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--cx-grad); color: #04121f; display: inline-flex; align-items: center; justify-content: center; font: 700 15px/1 var(--cx-font); }
.cx-tcard footer strong { display: block; font: 600 15px/1.2 var(--cx-font); }
.cx-tcard footer span { display: block; margin-top: 3px; font-size: 13px; color: var(--cx-muted); }

/* ------------------------------------------------------------- Pricing */
.cx-price { padding: 30px; }
.cx-price--hot { border-color: rgba(34, 211, 238, .45); background: linear-gradient(180deg, rgba(59, 130, 246, .16), rgba(255, 255, 255, .02)); }
.cx-price__badge { position: absolute; top: 20px; right: 20px; padding: 5px 10px; border-radius: 999px; background: var(--cx-grad); font: 700 11px/1 var(--cx-font); letter-spacing: .06em; text-transform: uppercase; color: #04121f; }
.cx-price h3 { font-size: 18px; }
.cx-price__amt { margin-top: 18px; font: 800 clamp(34px, 4vw, 46px)/1 var(--cx-font); letter-spacing: -.04em; color: #fff; }
.cx-price__amt small { font: 500 14px/1 var(--cx-font); letter-spacing: 0; color: var(--cx-muted); }
.cx-price ul { margin: 24px 0 28px; display: grid; gap: 11px; }
.cx-price li { display: flex; gap: 10px; font-size: 14.5px; color: #dbe2ee; }
.cx-price li::before { content: "✓"; color: var(--cx-cyan); font-weight: 700; }
.cx-price .cx-btn { margin-top: auto; width: 100%; }

/* ----------------------------------------------------------------- FAQ */
.cx-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.cx-faq details { border-radius: 16px; background: var(--cx-glass); border: 1px solid var(--cx-line); transition: border-color .3s, background-color .3s; }
/* .is-open is set a frame after [open] so the height can animate */
.cx-faq details.is-open, html:not(.cx-js) .cx-faq details[open] { border-color: rgba(34, 211, 238, .4); background: rgba(59, 130, 246, .07); }
.cx-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 21px 22px; cursor: pointer; list-style: none; font: 600 16.5px/1.4 var(--cx-font); letter-spacing: -.015em; color: #fff; }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::after { content: "+"; flex: 0 0 auto; font: 300 26px/1 var(--cx-font); color: var(--cx-cyan); transition: transform .35s var(--cx-ease); }
.cx-faq details.is-open summary::after { transform: rotate(45deg); }
.cx-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--cx-ease); }
.cx-faq details.is-open .cx-faq__a, html:not(.cx-js) .cx-faq details[open] .cx-faq__a { grid-template-rows: 1fr; }
.cx-faq__a > div { overflow: hidden; }
.cx-faq__a p { padding: 0 22px 22px; color: var(--cx-muted); line-height: 1.7; font-size: 15.5px; }

/* ----------------------------------------------------------- Final CTA */
.cx-final { position: relative; overflow: hidden; text-align: center; padding: 120px 0; }
.cx-final__sphere { position: absolute; left: 50%; top: 50%; width: min(620px, 120vw); aspect-ratio: 1; transform: translate(-50%, -42%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, rgba(125, 211, 252, .55), rgba(59, 130, 246, .35) 28%, rgba(76, 29, 149, .28) 55%, transparent 70%); filter: blur(6px); opacity: .7; animation: cx-breathe 9s ease-in-out infinite; }
.cx-final__sphere::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); transform: rotateX(72deg); }
@keyframes cx-breathe { 50% { transform: translate(-50%, -46%) scale(1.06); opacity: .9; } }
.cx-final .cx-wrap { position: relative; z-index: 2; }
.cx-final h2 { font: 800 clamp(40px, 7.4vw, 88px)/1 var(--cx-font); letter-spacing: -.05em; text-wrap: balance; }
.cx-final p { margin: 24px auto 0; max-width: 54ch; color: #dbe2ee; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; }
.cx-final__cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------------------------------- Contact */
.cx-contact { display: grid; gap: 40px; }
.cx-contact__list { margin-top: 32px; display: grid; gap: 12px; }
.cx-contact__list a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--cx-line); background: var(--cx-glass); text-decoration: none; transition: border-color .3s, transform .3s var(--cx-ease); }
.cx-contact__list a:hover { border-color: rgba(34, 211, 238, .45); transform: translateX(4px); }
.cx-contact__list small { display: block; font: 600 11px/1 var(--cx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cx-dim); }
.cx-contact__list span span { display: block; margin-top: 5px; font: 500 15px/1.4 var(--cx-font); color: #fff; }
.cx-form { display: grid; gap: 16px; grid-template-columns: 1fr; padding: 26px; border-radius: 24px; border: 1px solid var(--cx-line-2); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cx-form label { display: block; font: 500 13px/1 var(--cx-font); color: #c9d1de; margin-bottom: 8px; }
.cx-form input, .cx-form select, .cx-form textarea {
  width: 100%; min-height: 50px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--cx-line-2); background: rgba(5, 7, 13, .6);
  font: 400 15px/1.4 var(--cx-font); color: #fff; transition: border-color .2s, box-shadow .2s;
}
.cx-form select option { background: #0b1120; color: #fff; }
.cx-form textarea { min-height: 120px; resize: vertical; }
.cx-form input::placeholder, .cx-form textarea::placeholder { color: var(--cx-dim); }
.cx-form input:focus, .cx-form select:focus, .cx-form textarea:focus { outline: 0; border-color: var(--cx-cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .15); }
.cx-form .is-bad input, .cx-form .is-bad select, .cx-form .is-bad textarea { border-color: #f87171; }
.cx-form__err { display: block; min-height: 16px; margin-top: 6px; font-size: 12.5px; color: #fca5a5; }
.cx-form .full { grid-column: 1 / -1; }
.cx-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cx-form__msg { margin-top: 14px; font-size: 14.5px; font-weight: 500; min-height: 1.4em; }
.cx-form__msg.is-ok { color: #4ade80; } .cx-form__msg.is-err { color: #fca5a5; }
@media (min-width: 640px) { .cx-form { grid-template-columns: 1fr 1fr; padding: 36px; } }
@media (min-width: 980px) { .cx-contact { grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: start; } }

/* Blog cards on the homepage */
.cx-post { padding: 0; }
.cx-post img { width: 100%; height: 190px; object-fit: cover; display: block; }
.cx-post > div { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.cx-post small { font: 500 12px/1 var(--cx-mono); color: var(--cx-dim); }
.cx-post h3 { margin-top: 12px; font-size: 18px; }
.cx-post .cx-link { margin-top: auto; padding-top: 18px; }

/* ====================================================== Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cx-home *, .cx-home *::before, .cx-home *::after, .cx-nav *, .cx-btn, .cx-footer * { animation: none !important; transition-duration: .01ms !important; }
  .cx-js .cx-reveal { opacity: 1; transform: none; }
  .cx-scene__rig { transform: rotateX(6deg) rotateY(-10deg); }
  .cx-feature__stage .cx-window { transform: none; }
}

/* ==========================================================================
   6. INNER-PAGE SKIN
   The inner pages are still written with light Tailwind utilities. Rather than
   rewrite 27 templates, these rules re-point those utilities at the dark
   tokens. tailwind-built.css keeps its utilities inside @layer, so these
   un-layered rules win without !important. Scope: every page except the home.
   ========================================================================== */
body:not(.cx-home) { background: var(--cx-bg); color: #dbe2ee; font-family: var(--cx-font); -webkit-font-smoothing: antialiased; }
body:not(.cx-home) :is(h1, h2, h3, h4) { font-family: var(--cx-font); letter-spacing: -.03em; }

/* surfaces */
body:not(.cx-home) :is(.bg-gray-50, .bg-gray-100) { background-color: var(--cx-bg-2); }
body:not(.cx-home) :is(.bg-white, .bg-white\/80, .cms-card, .eco-card, .seo-card, .ux-card, .pricing-card, .service-card) { background-color: var(--cx-surface); }
body:not(.cx-home) :is(section, div).bg-white:not([class*="rounded"]) { background-color: var(--cx-bg); }
body:not(.cx-home) :is(.bg-\[\#0A1128\], .bg-\[\#0A1E5E\], .bg-\[\#1B2540\], .bg-gray-800, .bg-gray-900) { background-color: #0b1120; }
body:not(.cx-home) :is(.cms-card, .eco-card, .seo-card, .ux-card, .pricing-card, .service-card) { border: 1px solid var(--cx-line); box-shadow: none; }
body:not(.cx-home) :is(.from-white, .from-gray-50) { --tw-gradient-from: var(--cx-bg); }
body:not(.cx-home) :is(.to-white, .to-gray-50) { --tw-gradient-to: var(--cx-bg-2); }
body:not(.cx-home) :is(.from-orange-50, .from-blue-50, .from-purple-50, .from-emerald-50, .from-orange-200) { --tw-gradient-from: rgba(59, 130, 246, .14); }
body:not(.cx-home) :is(.to-red-50, .to-orange-200) { --tw-gradient-to: rgba(139, 92, 246, .12); }
body:not(.cx-home) .via-rose-200 { --tw-gradient-via: rgba(99, 102, 241, .14); }

/* tinted icon / badge backgrounds keep their hue, at low opacity */
body:not(.cx-home) :is(.bg-orange-50, .bg-orange-100, .bg-amber-50, .bg-amber-100, .bg-yellow-100) { background-color: rgba(251, 146, 60, .13); }
body:not(.cx-home) :is(.bg-sky-50, .bg-sky-100, .bg-blue-50, .bg-blue-100, .bg-indigo-50) { background-color: rgba(59, 130, 246, .15); }
body:not(.cx-home) :is(.bg-emerald-50, .bg-emerald-100, .bg-green-50, .bg-teal-100, .bg-green-100) { background-color: rgba(34, 197, 94, .13); }
body:not(.cx-home) :is(.bg-rose-50, .bg-rose-100, .bg-red-50, .bg-red-100) { background-color: rgba(244, 63, 94, .13); }
body:not(.cx-home) :is(.bg-purple-50, .bg-purple-100) { background-color: rgba(139, 92, 246, .16); }

/* text */
body:not(.cx-home) :is(.text-gray-900, .text-gray-800, .text-blue-900, .text-\[\#0f3460\], .text-black) { color: #fff; }
body:not(.cx-home) .text-gray-700 { color: #dbe2ee; }
body:not(.cx-home) :is(.text-gray-600, .text-gray-500) { color: var(--cx-muted); }
body:not(.cx-home) :is(.text-blue-600, .text-blue-700, .text-indigo-600, .text-indigo-700, .text-sky-600, .hover\:text-blue-700:hover) { color: #7dd3fc; }
body:not(.cx-home) :is(.text-orange-600, .text-orange-700, .text-orange-500, .text-\[\#ff695f\], .text-orange, .hover\:text-orange-600:hover) { color: var(--cx-cyan); }
body:not(.cx-home) :is(.text-green-700, .text-emerald-700, .text-emerald-600) { color: #4ade80; }
body:not(.cx-home) .text-red-700 { color: #fca5a5; }
body:not(.cx-home) .text-yellow-400 { color: var(--cx-cyan); }
body:not(.cx-home) .hover\:text-gray-900:hover { color: #fff; }

/* borders + shadows */
body:not(.cx-home) :is(.border-gray-100, .border-gray-200, .border-orange-50, .border-orange-100, .border-emerald-100, .border-amber-100, .border-red-100) { border-color: var(--cx-line); }
body:not(.cx-home) .border-gray-300 { border-color: var(--cx-line-2); }
body:not(.cx-home) :is(.hover\:border-orange-300:hover, .hover\:border-orange-400:hover) { border-color: rgba(34, 211, 238, .5); }
body:not(.cx-home) :is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) { --tw-shadow-color: rgba(0, 0, 0, .6); }
body:not(.cx-home) :is(.hover\:shadow-lg, .hover\:shadow-xl, .hover\:shadow-2xl):hover { box-shadow: var(--cx-glow); }

/* hover fills that assumed a white page */
body:not(.cx-home) :is(.hover\:bg-gray-100, .hover\:bg-gray-50, .hover\:bg-blue-100, .hover\:bg-white):hover { background-color: rgba(255, 255, 255, .08); }
body:not(.cx-home) .hover\:bg-white.hover\:text-gray-900:hover { color: #fff; }

/* brand gradient: blue → cyan replaces the old orange */
body:not(.cx-home) .bg-gradient { background: linear-gradient(120deg, #1d4ed8 0%, #0891b2 100%); }
body:not(.cx-home) a.bg-gradient, body:not(.cx-home) button.bg-gradient { background: var(--cx-grad); color: #04121f; }
body:not(.cx-home) .text-gradient { background: var(--cx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
body:not(.cx-home) :is(.bg-orange-500\/20, .shadow-orange-500\/20) { --tw-shadow-color: rgba(34, 211, 238, .3); }
body:not(.cx-home) .bg-orange-500\/20 { background-color: rgba(59, 130, 246, .22); }
body:not(.cx-home) .bg-sky-500\/20 { background-color: rgba(139, 92, 246, .2); }

/* page hero */
body:not(.cx-home) .inner-section {
  background-color: var(--cx-bg);
  background-image: radial-gradient(circle at 80% 0%, rgba(59, 130, 246, .26), transparent 46%), radial-gradient(circle at 12% 30%, rgba(139, 92, 246, .18), transparent 42%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: auto, auto, 60px 60px, 60px 60px; border-bottom: 1px solid var(--cx-line);
}
body:not(.cx-home) .inner-section::before { display: none; }

/* forms */
body:not(.cx-home) :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) { background-color: rgba(5, 7, 13, .6); color: #fff; border-color: var(--cx-line-2); }
body:not(.cx-home) :is(input, textarea)::placeholder { color: var(--cx-dim); }
body:not(.cx-home) select option { background: #0b1120; color: #fff; }
body:not(.cx-home) :is(input, select, textarea):focus { border-color: var(--cx-cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .15); }

/* legal pages and blog articles are plain prose: give them readable defaults */
body:not(.cx-home) main a:not([class]), body:not(.cx-home) section p a:not([class]) { color: #7dd3fc; }

/* sticky sub-navigation on the pricing page, and the old pink section headings */
body:not(.cx-home) .bg-white\/95 { background-color: rgba(10, 15, 28, .88); }
body:not(.cx-home) .text-\[\#FF29A8\] { color: var(--cx-cyan); }