/* V26C36K_UNIFIED_STATIC_SITE */
:root{--bg:#07131c;--bg2:#0d1e26;--section:#0d1924;--text:#f6f2e7;--muted:rgba(246,242,231,.70);--muted2:rgba(246,242,231,.52);--line:rgba(255,255,255,.13);--glass:rgba(255,255,255,.075);--glass2:rgba(255,255,255,.035);--card:rgba(255,255,255,.08);--cardText:#f6f2e7;--cardMuted:rgba(246,242,231,.70);--gold:#f0d68d;--aqua:#75e7ff;--green:#55f3b1;--violet:#8d83ff;--shadow:0 30px 90px rgba(0,0,0,.34);--navBg:rgba(22,34,48,.72)}
html[data-theme="light"]{--bg:#f4f0e4;--bg2:#e9f8f3;--section:#f2f0e8;--text:#111923;--muted:rgba(17,25,35,.72);--muted2:rgba(17,25,35,.54);--line:rgba(17,25,35,.12);--glass:rgba(255,255,255,.64);--glass2:rgba(255,255,255,.38);--card:rgba(255,255,255,.72);--cardText:#111923;--cardMuted:rgba(17,25,35,.66);--gold:#7c5718;--aqua:#006a85;--green:#006943;--violet:#513fd6;--shadow:0 24px 80px rgba(37,54,68,.14);--navBg:rgba(255,255,255,.78)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:78px 78px;opacity:.55}html[data-theme="light"] body:before{background:linear-gradient(rgba(17,25,35,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(17,25,35,.026) 1px,transparent 1px);opacity:.45}a{color:inherit;text-decoration:none}button{font:inherit}.page{position:relative;z-index:1;min-height:100vh}
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 120px));height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 14px;border:1px solid var(--line);background:var(--navBg);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-radius:999px;box-shadow:0 16px 60px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.18);z-index:90000}.brand{display:flex;gap:10px;align-items:center;color:var(--text);font-size:12px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}.gem{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff 0%,#7de7ff 18%,#55f3b1 52%,#f0d68d 100%);box-shadow:0 0 26px rgba(85,243,177,.55)}.navRight{display:flex;align-items:center;gap:4px}.navRight a,.langButton{border:0;background:transparent;color:var(--text);opacity:.82;font-size:12px;font-weight:650;padding:8px 10px;border-radius:999px;cursor:pointer}.navRight a:hover,.langButton:hover{background:rgba(255,255,255,.10);opacity:1}html[data-theme="light"] .navRight a:hover,html[data-theme="light"] .langButton:hover{background:rgba(17,25,35,.07)}
.languageWrap{position:relative}.languageMenu{position:absolute;top:42px;right:0;width:230px;max-height:410px;overflow:auto;padding:8px;border-radius:18px;border:1px solid var(--line);background:var(--navBg);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);box-shadow:0 30px 90px rgba(0,0,0,.34);display:none;z-index:999999}.languageMenu.open{display:block}.languageMenu a{display:flex;justify-content:space-between;padding:10px 11px;border-radius:12px;font-size:13px;color:var(--text);opacity:.84}.languageMenu a:hover{background:rgba(255,255,255,.10);opacity:1}html[data-theme="light"] .languageMenu a:hover{background:rgba(17,25,35,.07)}
.themeToggle{position:fixed;top:16px;right:18px;height:36px;min-width:58px;border-radius:999px;border:1px solid var(--line);background:var(--navBg);color:var(--text);font-size:12px;font-weight:750;cursor:pointer;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:0 18px 60px rgba(0,0,0,.16);z-index:90001}
.hero{min-height:92vh;padding:84px clamp(28px,5vw,86px) 82px;display:grid;align-items:center;background:radial-gradient(circle at 10% 22%,rgba(117,231,255,.16),transparent 32rem),radial-gradient(circle at 74% 8%,rgba(240,214,141,.15),transparent 32rem),radial-gradient(circle at 42% 86%,rgba(85,243,177,.13),transparent 38rem),linear-gradient(90deg,var(--bg) 0%,var(--bg2) 100%);border-bottom:1px solid var(--line)}html[data-theme="light"] .hero{background:radial-gradient(circle at 10% 20%,rgba(117,231,255,.22),transparent 32rem),radial-gradient(circle at 76% 12%,rgba(240,214,141,.32),transparent 33rem),radial-gradient(circle at 40% 88%,rgba(85,243,177,.18),transparent 42rem),linear-gradient(90deg,#eef9f7 0%,#f6f1e4 100%)}.heroGrid{width:min(1820px,100%);margin:0 auto;display:grid;grid-template-columns:1.03fr .97fr;gap:clamp(38px,6vw,96px);align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:var(--glass2);color:var(--muted);font-size:13px;font-weight:650;white-space:normal}.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 18px var(--green)}
.heroTitle{margin:28px 0 20px;font-size:clamp(52px,6.8vw,132px);line-height:.88;letter-spacing:-.068em;font-weight:760;max-width:980px}.heroTitle span{display:block}.gold{color:transparent;background:linear-gradient(100deg,var(--text) 0%,#fff3c1 30%,var(--gold) 84%);-webkit-background-clip:text;background-clip:text}.aqua{color:transparent;background:linear-gradient(100deg,var(--text) 0%,var(--aqua) 52%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text}.green{color:transparent;background:linear-gradient(100deg,var(--text) 0%,var(--green) 54%,#b8ffe2 100%);-webkit-background-clip:text;background-clip:text}html[data-theme="light"] .gold{background:linear-gradient(100deg,#111923 0%,#8a611b 82%);-webkit-background-clip:text;background-clip:text}html[data-theme="light"] .aqua{background:linear-gradient(100deg,#173042 0%,#006a85 50%,#513fd6 100%);-webkit-background-clip:text;background-clip:text}html[data-theme="light"] .green{background:linear-gradient(100deg,#173042 0%,#006943 75%);-webkit-background-clip:text;background-clip:text}.heroLead{max-width:780px;color:var(--muted);font-size:clamp(18px,1.55vw,24px);line-height:1.55;margin:0 0 30px}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:750}.btn.primary{color:#0b1017;background:linear-gradient(135deg,#fff0b6,var(--gold) 45%,var(--green));box-shadow:0 18px 50px rgba(85,243,177,.14)}.btn.secondary{background:var(--glass2);color:var(--text)}
.stage{position:relative;min-height:510px;border-radius:42px;border:1px solid rgba(255,255,255,.10);background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.13),transparent 16rem),linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.14);overflow:hidden;backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%)}html[data-theme="light"] .stage{border-color:rgba(17,25,35,.10);background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.30))}.orb{position:absolute;border-radius:50%;opacity:.70;mix-blend-mode:screen;border:1px solid rgba(255,255,255,.14);box-shadow:inset 18px 18px 35px rgba(255,255,255,.18),inset -36px -44px 70px rgba(0,0,0,.25),0 0 90px rgba(117,231,255,.16)}html[data-theme="light"] .orb{mix-blend-mode:multiply;opacity:.56}.orb.one{width:260px;height:260px;right:8%;top:9%;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.85),transparent 16%),linear-gradient(135deg,rgba(117,231,255,.72),rgba(85,243,177,.42))}.orb.two{width:185px;height:185px;left:7%;bottom:8%;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.65),transparent 18%),linear-gradient(135deg,rgba(240,214,141,.42),rgba(255,80,120,.18))}.orb.three{width:125px;height:125px;left:47%;top:49%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.62),transparent 18%),linear-gradient(135deg,rgba(117,231,255,.28),rgba(141,131,255,.36))}
.panel{position:absolute;left:8%;right:8%;top:30%;padding:28px;border-radius:30px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.065);box-shadow:0 24px 85px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%)}html[data-theme="light"] .panel{background:rgba(255,255,255,.62);border-color:rgba(17,25,35,.09)}.micro{color:var(--gold);letter-spacing:.22em;font-size:11px;font-weight:850;text-transform:uppercase}.panel h2{margin:14px 0 12px;font-size:clamp(24px,2.1vw,36px);line-height:1.02;letter-spacing:-.035em;color:var(--text)}.panel p{margin:0 0 22px;color:var(--muted);line-height:1.55;font-size:16px}.lines{display:grid;gap:9px}.line{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:15px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.045);color:var(--text);font-size:14px;font-weight:750}html[data-theme="light"] .line{background:rgba(17,25,35,.035);border-color:rgba(17,25,35,.07)}.line b{color:var(--gold)}
.section{padding:clamp(70px,8vw,118px) clamp(28px,5vw,86px);background:var(--section);color:var(--text);border-bottom:1px solid var(--line)}html[data-theme="light"] .section{background:#f4f0e4;color:#111923}.wrap{width:min(1820px,100%);margin:0 auto}.sectionHead{display:grid;grid-template-columns:1fr .55fr;gap:48px;align-items:end;margin-bottom:34px}.kicker{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px}.sectionTitle{max-width:840px;font-size:clamp(40px,4.7vw,86px);line-height:.95;letter-spacing:-.058em;margin:0;color:var(--text)}.sectionIntro{color:var(--muted);font-size:18px;line-height:1.55;max-width:590px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{min-height:225px;border-radius:28px;border:1px solid var(--line);background:var(--card);color:var(--cardText);padding:26px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.14)}html[data-theme="light"] .card{background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(222,242,236,.70))}.num{color:var(--gold);font-size:12px;font-weight:900;letter-spacing:.14em}.card h3{margin:44px 0 12px;font-size:24px;line-height:1.05;letter-spacing:-.03em;color:var(--cardText)}.card p{margin:0;color:var(--cardMuted);line-height:1.55}.problemGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 60px;margin-top:30px}.problem{padding:20px 0;border-top:1px solid var(--line);color:var(--text);font-size:19px;font-weight:800}.problem p{margin:8px 0 0;color:var(--muted);font-size:15px;font-weight:500;line-height:1.55}.ctaWrap{padding:clamp(70px,8vw,110px) clamp(28px,5vw,86px);background:var(--section)}html[data-theme="light"] .ctaWrap{background:#f4f0e4}.cta{width:min(1820px,100%);margin:auto;border-radius:34px;border:1px solid var(--line);background:radial-gradient(circle at 50% 0%,rgba(240,214,141,.14),transparent 28rem),linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:var(--shadow);padding:68px 34px;text-align:center}html[data-theme="light"] .cta{background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(230,246,240,.72))}.cta h2{max-width:1000px;margin:0 auto 16px;font-size:clamp(38px,4.4vw,78px);line-height:.96;letter-spacing:-.055em;color:var(--text)}.cta p{max-width:760px;margin:0 auto 28px;color:var(--muted);line-height:1.55}.footer{padding:34px clamp(28px,5vw,86px);background:var(--bg);color:var(--muted2);border-top:1px solid var(--line)}html[data-theme="light"] .footer{background:#f4f0e4}.footerInner{width:min(1820px,100%);margin:auto;display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:13px}.crawlHero{padding-top:120px;min-height:auto}.crawlBox{border-radius:28px;border:1px solid var(--line);background:var(--card);padding:28px;box-shadow:var(--shadow)}.crawlList{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}.crawlItem{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--glass2)}html[data-theme="light"] .crawlItem,html[data-theme="light"] .crawlBox{background:rgba(255,255,255,.76)}
@media(max-width:1080px){.heroGrid,.sectionHead{grid-template-columns:1fr}.stage{min-height:500px}.cards{grid-template-columns:1fr 1fr}.heroTitle{font-size:clamp(48px,11vw,90px)}}@media(max-width:740px){.nav{width:calc(100% - 96px);left:14px;transform:none}.brand span:last-child{display:none}.navRight a{display:none}.themeToggle{right:12px;top:16px}.hero{padding:82px 22px 70px}.stage{min-height:460px;border-radius:28px}.panel{left:18px;right:18px;top:24%;padding:22px}.cards,.problemGrid,.crawlList{grid-template-columns:1fr}.section,.ctaWrap{padding-left:22px;padding-right:22px}.footerInner{display:block}}


/* V26C36L_PANEL_COMPACT_FIX_START */

/*
  Fix after V26C36K:
  The right-side hero card became too tall in light mode and could clip/cut the bottom rows.
  This keeps the same design, but makes the internal panel more compact and safe.
*/

.stage {
  overflow: hidden !important;
}

.panel {
  top: 27% !important;
  padding: 24px !important;
}

.panel h2 {
  margin: 10px 0 10px !important;
  font-size: clamp(23px, 1.9vw, 33px) !important;
}

.panel p {
  margin-bottom: 16px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.lines {
  gap: 8px !important;
}

.line {
  padding: 10px 13px !important;
  min-height: 40px !important;
}

@media (max-width: 1200px) {
  .stage {
    min-height: 545px !important;
  }

  .panel {
    top: 24% !important;
  }
}

@media (max-width: 740px) {
  .stage {
    min-height: 560px !important;
  }

  .panel {
    top: 20% !important;
  }
}

/* V26C36L_PANEL_COMPACT_FIX_END */


/* V26C36M_HEADER_SIZE_REDUCTION_START */

/*
  Global title reduction for all languages.
  Reason: longer translated words like Dutch "AUTOMATISERING" were going off-screen.
  This patch uses the shared CSS, so every language page gets the same fix.
*/

/* Main hero header: reduce by a few visual steps. */
.heroTitle {
  font-size: clamp(40px, 5.15vw, 104px) !important;
  line-height: .91 !important;
  letter-spacing: -.056em !important;
  max-width: min(920px, 100%) !important;
}

/* Let each hero title line stay inside its grid column. */
.heroTitle span {
  max-width: 100% !important;
}

/* Prevent the left hero column from forcing overflow. */
.heroGrid > div:first-child {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Slightly reduce the body lead too, so spacing stays luxury and balanced. */
.heroLead {
  font-size: clamp(17px, 1.28vw, 22px) !important;
  max-width: 760px !important;
}

/* Section titles across the whole website. */
.sectionTitle {
  font-size: clamp(34px, 3.85vw, 74px) !important;
  line-height: .98 !important;
  letter-spacing: -.048em !important;
}

/* CTA title. */
.cta h2 {
  font-size: clamp(34px, 3.8vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.048em !important;
}

/* Right-side hero panel title: reduce slightly so it never crowds rows. */
.panel h2 {
  font-size: clamp(22px, 1.75vw, 31px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.028em !important;
}

/* Service card titles. */
.card h3 {
  font-size: clamp(20px, 1.35vw, 23px) !important;
  line-height: 1.12 !important;
}

/* Problem rows. */
.problem {
  font-size: clamp(17px, 1.18vw, 19px) !important;
}

/* Extra safety for very long words in translated languages. */
.heroTitle,
.sectionTitle,
.cta h2,
.panel h2,
.card h3 {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Large screens still stay premium, but not oversized. */
@media (min-width: 1600px) {
  .heroTitle {
    font-size: clamp(54px, 5.0vw, 110px) !important;
    max-width: 980px !important;
  }

  .sectionTitle {
    font-size: clamp(42px, 3.7vw, 78px) !important;
  }

  .cta h2 {
    font-size: clamp(40px, 3.5vw, 76px) !important;
  }
}

/* Medium screens: stronger reduction for long translations. */
@media (max-width: 1280px) {
  .heroTitle {
    font-size: clamp(38px, 6.4vw, 82px) !important;
    max-width: 100% !important;
  }

  .sectionTitle {
    font-size: clamp(32px, 5.2vw, 62px) !important;
  }
}

/* Mobile: keep clean and readable. */
@media (max-width: 740px) {
  .heroTitle {
    font-size: clamp(38px, 10vw, 62px) !important;
    line-height: .94 !important;
    letter-spacing: -.05em !important;
  }

  .sectionTitle {
    font-size: clamp(31px, 8vw, 48px) !important;
  }

  .cta h2 {
    font-size: clamp(30px, 8vw, 46px) !important;
  }
}

/* V26C36M_HEADER_SIZE_REDUCTION_END */


/* V26C36N_CENTER_HERO_RESULT_BOX_START */

/*
  Final alignment-only fix:
  The inner result box was sitting too low inside the right glass stage.
  This centers it vertically and horizontally without changing text, colors, translations, or layout.
*/

.stage {
  display: block !important;
  position: relative !important;
}

/* Center the actual right hero result box inside the glass stage. */
.stage .panel,
.panel {
  left: 8% !important;
  right: 8% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 auto !important;
}

/* Keep enough internal room so the centered panel does not feel squeezed. */
.stage {
  min-height: 520px !important;
}

/* Large screens: keep it centered and premium. */
@media (min-width: 1500px) {
  .stage {
    min-height: 540px !important;
  }

  .stage .panel,
  .panel {
    left: 8% !important;
    right: 8% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* Medium screens: slightly more breathing room. */
@media (max-width: 1280px) {
  .stage {
    min-height: 560px !important;
  }

  .stage .panel,
  .panel {
    left: 7% !important;
    right: 7% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* Mobile/tablet: keep centered but avoid clipping. */
@media (max-width: 740px) {
  .stage {
    min-height: 570px !important;
  }

  .stage .panel,
  .panel {
    left: 18px !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* V26C36N_CENTER_HERO_RESULT_BOX_END */


/* V26C36O_MOBILE_NAV_THEME_BUTTON_FIX_START */

/*
  Fixes:
  1. Mobile language menu choices were hidden because mobile CSS hid .navRight a.
  2. Mobile top bar needed fixed touch-friendly behavior.
  3. Mobile/tablet is forced to dark mode for consistency.
  4. Desktop primary buttons keep the same premium color in light and dark.
  5. Language dropdown always opens above hero/stage panels.
*/

/* Stable premium primary button color in BOTH themes. */
.btn.primary,
a.btn.primary,
button.btn.primary,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] a.btn.primary,
html[data-theme="light"] button.btn.primary,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] a.btn.primary,
html[data-theme="dark"] button.btn.primary {
  color: #0b1017 !important;
  -webkit-text-fill-color: #0b1017 !important;
  background: linear-gradient(135deg, #fff0b6 0%, #f0d68d 44%, #55f3b1 100%) !important;
  border-color: rgba(11,16,23,.10) !important;
  box-shadow:
    0 18px 50px rgba(85,243,177,.16),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.btn.primary:hover,
a.btn.primary:hover,
button.btn.primary:hover {
  filter: brightness(1.02) saturate(1.03) !important;
  transform: translateY(-1px);
}

/* Language menu must always be above the hero glass/stage/card. */
.languageWrap {
  position: relative !important;
  z-index: 2147483000 !important;
}

.languageMenu {
  z-index: 2147483500 !important;
}

.languageMenu.open,
.languageMenu[data-open="true"] {
  display: block !important;
}

/* Desktop/tablet language links must remain clickable. */
.languageMenu a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Mobile + smaller tablets: force dark mode and make nav usable. */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px) {
  html,
  html[data-theme="light"],
  html[data-theme="dark"] {
    --bg:#07131c !important;
    --bg2:#0d1e26 !important;
    --section:#0d1924 !important;
    --text:#f6f2e7 !important;
    --muted:rgba(246,242,231,.70) !important;
    --muted2:rgba(246,242,231,.52) !important;
    --line:rgba(255,255,255,.13) !important;
    --glass:rgba(255,255,255,.075) !important;
    --glass2:rgba(255,255,255,.035) !important;
    --card:rgba(255,255,255,.08) !important;
    --cardText:#f6f2e7 !important;
    --cardMuted:rgba(246,242,231,.70) !important;
    --gold:#f0d68d !important;
    --aqua:#75e7ff !important;
    --green:#55f3b1 !important;
    --violet:#8d83ff !important;
    --navBg:rgba(22,34,48,.86) !important;
  }

  body,
  html[data-theme="light"] body {
    background: #07131c !important;
    color: #f6f2e7 !important;
  }

  body::before,
  html[data-theme="light"] body::before {
    background:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px) !important;
    background-size: 78px 78px !important;
    opacity: .45 !important;
  }

  .hero,
  html[data-theme="light"] .hero {
    background:
      radial-gradient(circle at 10% 22%, rgba(117,231,255,.16), transparent 32rem),
      radial-gradient(circle at 74% 8%, rgba(240,214,141,.15), transparent 32rem),
      radial-gradient(circle at 42% 86%, rgba(85,243,177,.13), transparent 38rem),
      linear-gradient(90deg,#07131c 0%,#0d1e26 100%) !important;
  }

  .section,
  .ctaWrap,
  .footer,
  html[data-theme="light"] .section,
  html[data-theme="light"] .ctaWrap,
  html[data-theme="light"] .footer {
    background: #0d1924 !important;
    color: #f6f2e7 !important;
  }

  .card,
  html[data-theme="light"] .card {
    background: rgba(255,255,255,.08) !important;
    color: #f6f2e7 !important;
    border-color: rgba(255,255,255,.13) !important;
  }

  .card h3,
  .sectionTitle,
  .problem,
  .cta h2,
  html[data-theme="light"] .card h3,
  html[data-theme="light"] .sectionTitle,
  html[data-theme="light"] .problem,
  html[data-theme="light"] .cta h2 {
    color: #f6f2e7 !important;
    -webkit-text-fill-color: #f6f2e7 !important;
  }

  .card p,
  .sectionIntro,
  .problem p,
  .cta p,
  .footer,
  html[data-theme="light"] .card p,
  html[data-theme="light"] .sectionIntro,
  html[data-theme="light"] .problem p,
  html[data-theme="light"] .cta p,
  html[data-theme="light"] .footer {
    color: rgba(246,242,231,.70) !important;
    -webkit-text-fill-color: rgba(246,242,231,.70) !important;
  }

  .nav {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: 44px !important;
    transform: none !important;
    padding: 0 10px 0 12px !important;
    z-index: 2147483000 !important;
    background: rgba(22,34,48,.88) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow:
      0 18px 60px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  .brand {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand span:last-child {
    display: inline !important;
    font-size: 10px !important;
    letter-spacing: .16em !important;
    max-width: 128px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .gem {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  .navRight {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
  }

  /* Hide normal nav links on phone, but do NOT hide language menu choices. */
  .navRight > a {
    display: none !important;
  }

  .languageWrap {
    display: block !important;
    position: static !important;
    z-index: 2147483100 !important;
  }

  .langButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    color: #f6f2e7 !important;
    -webkit-text-fill-color: #f6f2e7 !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  .languageMenu {
    position: fixed !important;
    top: 62px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72vh, 520px) !important;
    overflow: auto !important;
    padding: 10px !important;
    border-radius: 20px !important;
    background: rgba(8,14,22,.96) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.55) !important;
    backdrop-filter: blur(26px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
    z-index: 2147483600 !important;
  }

  .languageMenu a,
  .navRight .languageMenu a {
    display: flex !important;
    color: #f6f2e7 !important;
    -webkit-text-fill-color: #f6f2e7 !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    padding: 13px 12px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .languageMenu a:hover,
  .languageMenu a:active {
    background: rgba(255,255,255,.10) !important;
  }

  /* On phone/tablet we keep one reliable mode: dark. */
  .themeToggle {
    display: none !important;
  }

  .stage,
  html[data-theme="light"] .stage {
    background:
      radial-gradient(circle at 22% 14%,rgba(255,255,255,.13),transparent 16rem),
      linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025)) !important;
    border-color: rgba(255,255,255,.10) !important;
  }

  .panel,
  html[data-theme="light"] .panel {
    background: rgba(255,255,255,.065) !important;
    border-color: rgba(255,255,255,.08) !important;
  }

  .panel h2,
  html[data-theme="light"] .panel h2 {
    color: #f6f2e7 !important;
    -webkit-text-fill-color: #f6f2e7 !important;
  }

  .panel p,
  html[data-theme="light"] .panel p {
    color: rgba(246,242,231,.70) !important;
    -webkit-text-fill-color: rgba(246,242,231,.70) !important;
  }

  .line,
  html[data-theme="light"] .line {
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.06) !important;
    color: #f6f2e7 !important;
  }

  .line b,
  html[data-theme="light"] .line b {
    color: #f0d68d !important;
    -webkit-text-fill-color: #f0d68d !important;
  }
}

/* V26C36O_MOBILE_NAV_THEME_BUTTON_FIX_END */


/* V26C36P_MOBILE_HERO_TEXT_BRIGHTNESS_START */

/*
  Mobile stays dark, but the top hero text gets desktop-level brightness.
  This fixes the phone screenshots where AI SYSTEMS / LEAD GENERATION / AUTOMATION
  looked too dark even though the layout was good.
*/

@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px) {
  .heroTitle,
  html[data-theme="light"] .heroTitle,
  html[data-theme="dark"] .heroTitle {
    opacity: 1 !important;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.36)) !important;
  }

  .heroTitle span,
  html[data-theme="light"] .heroTitle span,
  html[data-theme="dark"] .heroTitle span {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
  }

  .heroTitle .gold,
  .gold,
  html[data-theme="light"] .heroTitle .gold,
  html[data-theme="light"] .gold,
  html[data-theme="dark"] .heroTitle .gold,
  html[data-theme="dark"] .gold {
    background: linear-gradient(100deg, #fffdf0 0%, #fff0b6 38%, #f0d68d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: brightness(1.16) saturate(1.16) !important;
  }

  .heroTitle .aqua,
  .aqua,
  html[data-theme="light"] .heroTitle .aqua,
  html[data-theme="light"] .aqua,
  html[data-theme="dark"] .heroTitle .aqua,
  html[data-theme="dark"] .aqua {
    background: linear-gradient(100deg, #f4fdff 0%, #92efff 48%, #9a91ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: brightness(1.20) saturate(1.18) !important;
  }

  .heroTitle .green,
  .green,
  html[data-theme="light"] .heroTitle .green,
  html[data-theme="light"] .green,
  html[data-theme="dark"] .heroTitle .green,
  html[data-theme="dark"] .green {
    background: linear-gradient(100deg, #f4fff9 0%, #6dffc6 54%, #bdffe2 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: brightness(1.18) saturate(1.20) !important;
  }

  .heroLead,
  html[data-theme="light"] .heroLead,
  html[data-theme="dark"] .heroLead {
    color: rgba(246,242,231,.86) !important;
    -webkit-text-fill-color: rgba(246,242,231,.86) !important;
    opacity: 1 !important;
    text-shadow: 0 5px 20px rgba(0,0,0,.30) !important;
  }

  .eyebrow,
  html[data-theme="light"] .eyebrow,
  html[data-theme="dark"] .eyebrow {
    color: rgba(246,242,231,.84) !important;
    -webkit-text-fill-color: rgba(246,242,231,.84) !important;
    opacity: 1 !important;
    background: rgba(255,255,255,.055) !important;
  }

  .eyebrow .dot,
  .dot {
    opacity: 1 !important;
    filter: brightness(1.2) saturate(1.2) !important;
  }

  .hero .btn.secondary,
  html[data-theme="light"] .hero .btn.secondary,
  html[data-theme="dark"] .hero .btn.secondary {
    color: rgba(246,242,231,.92) !important;
    -webkit-text-fill-color: rgba(246,242,231,.92) !important;
    border-color: rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.045) !important;
  }
}

/* V26C36P_MOBILE_HERO_TEXT_BRIGHTNESS_END */


/* V26C36R_FORCE_MOBILE_HERO_TITLE_SOLID_BRIGHT_START */

/*
  Mobile fix:
  The phone browser was still rendering the hero title too dark.
  This stops mobile from using gradient text for the hero title and forces solid bright colors.
  Desktop stays unchanged.
*/

@media screen and (max-width: 1100px), screen and (pointer: coarse) {
  main section:first-of-type h1,
  main section:first-of-type h1 *,
  .hero h1,
  .hero h1 *,
  .heroTitle,
  .heroTitle *,
  h1.heroTitle,
  h1.heroTitle * {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    text-shadow:
      0 2px 0 rgba(0,0,0,.14),
      0 10px 28px rgba(0,0,0,.45) !important;
  }

  main section:first-of-type h1,
  .hero h1,
  .heroTitle,
  h1.heroTitle {
    color: #fff4c7 !important;
    -webkit-text-fill-color: #fff4c7 !important;
  }

  main section:first-of-type h1 span,
  .hero h1 span,
  .heroTitle span,
  h1.heroTitle span {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #fff4c7 !important;
    -webkit-text-fill-color: #fff4c7 !important;
  }

  main section:first-of-type h1 span:nth-child(1),
  .hero h1 span:nth-child(1),
  .heroTitle span:nth-child(1),
  .heroTitle .gold,
  h1.heroTitle .gold {
    color: #fff3bd !important;
    -webkit-text-fill-color: #fff3bd !important;
  }

  main section:first-of-type h1 span:nth-child(2),
  .hero h1 span:nth-child(2),
  .heroTitle span:nth-child(2),
  .heroTitle .aqua,
  h1.heroTitle .aqua {
    color: #bdf7ff !important;
    -webkit-text-fill-color: #bdf7ff !important;
  }

  main section:first-of-type h1 span:nth-child(3),
  .hero h1 span:nth-child(3),
  .heroTitle span:nth-child(3),
  .heroTitle .green,
  h1.heroTitle .green {
    color: #9dffd2 !important;
    -webkit-text-fill-color: #9dffd2 !important;
  }

  .heroLead,
  main section:first-of-type p,
  html[data-theme="dark"] .heroLead,
  html[data-theme="light"] .heroLead {
    color: rgba(246,242,231,.94) !important;
    -webkit-text-fill-color: rgba(246,242,231,.94) !important;
    opacity: 1 !important;
  }

  .eyebrow,
  html[data-theme="dark"] .eyebrow,
  html[data-theme="light"] .eyebrow {
    color: rgba(246,242,231,.92) !important;
    -webkit-text-fill-color: rgba(246,242,231,.92) !important;
    opacity: 1 !important;
  }
}

/* V26C36R_FORCE_MOBILE_HERO_TITLE_SOLID_BRIGHT_END */