/* Simtix landing page styles — layout + page-level animation (A1, orbs, spotlight, timeline). */

.sx-section { padding-block: var(--section-pad-block); }
.sx-container { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

/* A1 — hero reveal, once per load, transform+opacity only */
@media (prefers-reduced-motion: no-preference) {
  .hero-reveal > * {
    opacity: 0; transform: translateY(24px);
    animation: hero-in var(--dur-hero) var(--ease-out) forwards;
  }
  .hero-reveal > *:nth-child(2) { animation-delay: 200ms; }
  .hero-reveal > *:nth-child(3) { animation-delay: 320ms; }
  .hero-reveal > *:nth-child(4) { animation-delay: 440ms; }
  .hero-visual-reveal { opacity: 0; transform: translateY(16px) scale(0.98); animation: hero-in var(--dur-hero) var(--ease-out) 350ms forwards; }
  .hero-word { display: inline-block; opacity: 0; transform: translateY(0.6em); animation: hero-in 600ms var(--ease-out) forwards; animation-delay: calc(60ms + var(--w, 0) * 70ms); }
}
@keyframes hero-in { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Ambient glow orbs — slow transform drift, GPU-only */
.glow-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .glow-orb { animation: orb-drift 14s var(--ease-inout) infinite alternate; }
  .glow-orb:nth-child(2) { animation-duration: 18s; animation-delay: -6s; }
}
@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(40px, -30px, 0) scale(1.15); }
}

/* Button sheen sweep on hover */
.sx-btn--primary { position: relative; overflow: hidden; }
.sx-btn--primary::after {
  content: ""; position: absolute; inset-block: 0; inline-size: 40%;
  inset-inline-start: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sx-btn--primary:hover::after { transform: skewX(-20deg) translateX(420%); }
}

/* Cursor spotlight on bento tiles (paint-only) */
.sx-bento-tile { --mx: 50%; --my: 50%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sx-bento-tile::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(280px circle at var(--mx) var(--my), rgb(46 107 255 / 0.10), transparent 65%);
    opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
  }
  .sx-bento-tile:hover::before { opacity: 1; }
}

/* Timeline number pop + line draw-in */
@media (prefers-reduced-motion: no-preference) {
  .sx-reveal.is-visible .sx-timeline-num { animation: num-pop var(--dur-slow) var(--ease-out) backwards; }
  .sx-timeline-step:nth-child(1) .sx-timeline-num { animation-delay: 0ms; }
  .sx-timeline-step:nth-child(2) .sx-timeline-num { animation-delay: 120ms; }
  .sx-timeline-step:nth-child(3) .sx-timeline-num { animation-delay: 240ms; }
  .sx-timeline-step:nth-child(4) .sx-timeline-num { animation-delay: 360ms; }
  .sx-reveal.is-visible .sx-timeline-step::before { transform: scaleX(1); }
  .sx-timeline-step::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--ease-out) 200ms; }
  [dir="rtl"] .sx-timeline-step::before { transform-origin: 100% 50%; }
}
@keyframes num-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* Stat value glow (glass skin) */
[data-skin="glass"] .sx-stat-value { text-shadow: 0 0 24px rgb(46 107 255 / 0.18); }

/* S3 stat grid — equal-height tiles */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); align-items: stretch; }
.stat-grid > .sx-reveal { display: flex; }
.stat-grid .sx-stat-tile { flex: 1; }

/* Ghost buttons align with text blocks (they are text-like links here) */
.sx-btn--ghost { padding-inline: 0; }

/* Product screenshot placeholder — intentional look until real UI captures arrive */
.sx-product-shot { flex-direction: column; gap: var(--space-3); color: var(--steel-300); }
.sx-product-shot .shot-mark { block-size: 56px; inline-size: auto; opacity: 0.35; }
.sx-product-shot .shot-note { font: 500 12px/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }

/* Compressed header: raise glass opacity so dark content doesn't bleed through */
[data-skin="glass"] .sx-header[data-compressed] { background: rgb(255 255 255 / 0.88); }

/* ===== Mega panel v2 — solid premium panel, monogram chips, staggered entrance ===== */
.sx-mega-item { flex-direction: row; align-items: center; gap: var(--space-4); }
.sx-mega-item-text { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.sx-mega-abbr {
  flex: none; inline-size: 46px; block-size: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font-display); letter-spacing: 0.04em;
  color: var(--signal-400);
  background: color-mix(in srgb, var(--signal-500) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-500) 32%, transparent);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.sx-mega-abbr--pulse { color: var(--pulse-400); background: color-mix(in srgb, var(--pulse-400) 12%, transparent); border-color: color-mix(in srgb, var(--pulse-400) 32%, transparent); }
.sx-mega-item:hover .sx-mega-abbr { transform: translateY(-2px) rotate(-4deg); background: color-mix(in srgb, var(--signal-500) 22%, transparent); }
.sx-mega-item:hover .sx-mega-abbr--pulse { background: color-mix(in srgb, var(--pulse-400) 22%, transparent); }
/* Solid, opaque panel — no backdrop-filter (it is disabled inside a filtered header and caused bleed-through) */
.sx-mega { background: linear-gradient(180deg, var(--night-900) 0%, var(--night-950) 100%); box-shadow: 0 24px 48px rgb(6 11 24 / 0.35); }
[data-skin="glass"] .sx-mega {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F7FF 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-block-end: 1px solid rgb(46 107 255 / 0.18);
  box-shadow: 0 24px 48px rgb(6 11 24 / 0.14);
}
@media (prefers-reduced-motion: no-preference) {
  .sx-mega[data-open] .sx-mega-item { opacity: 0; transform: translateY(8px); animation: mega-in var(--dur-base) var(--ease-out) forwards; animation-delay: calc(40ms * var(--i, 0)); }
}
@keyframes mega-in { to { opacity: 1; transform: none; } }

/* ===== Drawer v3 — light glass, icon chips, gate-flow motif, staggered links ===== */
.sx-drawer {
  background: radial-gradient(560px 380px at 88% -8%, rgb(46 107 255 / 0.14), transparent 62%),
              radial-gradient(420px 320px at -10% 105%, rgb(41 211 164 / 0.10), transparent 60%),
              linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 55%, #F2F7FE 100%);
}
.drawer-top { display: flex; align-items: center; justify-content: space-between; }
.drawer-top img { filter: brightness(0.45); }
.drawer-close-btn { display: inline-flex; border-color: rgb(46 107 255 / 0.2); color: var(--night-900); background: #fff; }
.drawer-motif { position: absolute; inset-block-end: -70px; inset-inline-end: -110px; inline-size: 440px; opacity: 0.07; color: var(--signal-500); pointer-events: none; }
.drawer-motif svg { inline-size: 100%; block-size: auto; }
.drawer-eyebrow {
  margin: var(--space-8) 0 0; display: flex; align-items: center; gap: var(--space-3);
  font: 600 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel-600);
}
.drawer-eyebrow::after { content: ""; flex: 1; block-size: 1px; background: linear-gradient(to right, rgb(46 107 255 / 0.25), transparent); }
.sx-drawer-nav { margin-block-start: var(--space-4); }
.sx-drawer-nav a {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--space-3);
  padding-block: 15px; border-block-end: 1px solid rgb(11 21 48 / 0.06);
  color: var(--night-900);
}
.drawer-label {
  font: 600 1.5rem/1.15 var(--font-display); letter-spacing: -0.01em; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.drawer-num {
  font: 600 11px/1 var(--font-body); letter-spacing: 0.08em;
  color: var(--signal-500); opacity: 0.65; font-variant-numeric: tabular-nums;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.drawer-ic {
  display: flex; align-items: center; color: var(--steel-300);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sx-drawer-nav a:hover .drawer-label, .sx-drawer-nav a:active .drawer-label { color: var(--signal-500); transform: translateX(4px); }
.sx-drawer-nav a:hover .drawer-num, .sx-drawer-nav a:active .drawer-num { opacity: 1; }
.sx-drawer-nav a:hover .drawer-ic, .sx-drawer-nav a:active .drawer-ic { color: var(--signal-500); transform: translateX(-2px) rotate(-6deg); }
[dir="rtl"] .sx-drawer-nav a:hover .drawer-label { transform: translateX(-4px); }
@media (prefers-reduced-motion: no-preference) {
  .sx-drawer[data-open] .sx-drawer-nav a { opacity: 0; transform: translateY(14px); animation: drawer-in 340ms var(--ease-out) forwards; animation-delay: calc(45ms * var(--i, 0)); }
  .sx-drawer[data-open] .drawer-footer { opacity: 0; animation: drawer-in 340ms var(--ease-out) 480ms forwards; }
  .sx-drawer[data-open] .drawer-eyebrow { opacity: 0; animation: drawer-in 260ms var(--ease-out) forwards; }
}
@keyframes drawer-in { to { opacity: 1; transform: none; } }
.drawer-footer { margin-block-start: auto; padding-block-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); border-block-start: 1px solid rgb(46 107 255 / 0.10); }
.drawer-cta { inline-size: 100%; justify-content: center; }
.drawer-tel { font: 600 var(--text-small)/1 var(--font-body); color: var(--steel-600); }
.drawer-tel:hover { color: var(--night-900); }
.sx-drawer .sx-lang-switch { border-color: rgb(46 107 255 / 0.2); }
.sx-drawer .sx-lang-switch a { color: var(--steel-600); }
.sx-drawer .sx-lang-switch a[aria-current] { background: rgb(46 107 255 / 0.10); color: var(--night-900); }
/* ===== Menu v5 — unified desktop/mobile system (overrides earlier drawer rules) ===== */

/* Desktop mega: header row + accent line */
.sx-mega::before { content: ""; display: block; block-size: 2px; background: linear-gradient(90deg, var(--signal-500), var(--pulse-400) 40%, transparent 80%); opacity: 0.55; }
.sx-mega-head {
  max-inline-size: var(--container-max); margin-inline: auto;
  padding: var(--space-6) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.sx-mega-all {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 600 13px/1 var(--font-body); color: var(--link);
}
.sx-mega-all .sx-chevron { transition: transform var(--dur-fast) var(--ease-out); }
.sx-mega-all:hover .sx-chevron { transform: translateX(3px); }
[dir="rtl"] .sx-mega-all .sx-chevron { transform: scaleX(-1); }
.sx-mega .sx-mega-inner { padding-block-start: var(--space-4); }

/* Drawer rows: label + chevron/icon, no numbers */
.sx-drawer-nav > a.drawer-link, .drawer-group-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  inline-size: 100%; background: none; border: none; cursor: pointer; text-align: start;
  padding-block: 14px; padding-inline: 0;
  border-block-end: 1px solid rgb(11 21 48 / 0.06);
  color: var(--night-900);
}
.drawer-group { border: none; }
.drawer-group-btn .sx-chevron { color: var(--steel-300); transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.drawer-group-btn[aria-expanded="true"] .sx-chevron { transform: rotate(180deg); color: var(--signal-500); }
.drawer-group-btn[aria-expanded="true"] .drawer-label { color: var(--signal-500); }
.sx-drawer .drawer-label { font: 600 1.375rem/1.2 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }

/* Collapsible submenu (grid-rows technique) */
.drawer-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.drawer-group[data-open] .drawer-sub { grid-template-rows: 1fr; }
.drawer-sub-inner { overflow: hidden; display: flex; flex-direction: column; min-block-size: 0; }
.drawer-sub a {
  display: flex; align-items: center; gap: var(--space-3);
  font: 500 15px/1.3 var(--font-body); color: var(--steel-600);
  padding-block: 9px; border: none;
}
.drawer-sub a:hover, .drawer-sub a:active { color: var(--night-900); }
.drawer-sub .sx-mega-abbr--sm {
  inline-size: 34px; block-size: 34px; border-radius: 9px; font-size: 10px;
  color: var(--signal-500);
}
.drawer-sub a:first-child { margin-block-start: var(--space-2); }
.drawer-sub .drawer-sub-all { margin-block-end: var(--space-3); }
.drawer-sub-all { font-weight: 600 !important; color: var(--link) !important; }
.drawer-sub-all .sx-chevron { transition: transform var(--dur-fast) var(--ease-out); }
.drawer-sub-all:hover .sx-chevron { transform: translateX(3px); }
[dir="rtl"] .drawer-sub-all .sx-chevron, [dir="rtl"] .drawer-sub .sx-chevron { transform: scaleX(-1); }

/* Entrance stagger covers groups and links */
@media (prefers-reduced-motion: no-preference) {
  .sx-drawer[data-open] .sx-drawer-nav > * { opacity: 0; transform: translateY(14px); animation: drawer-in 340ms var(--ease-out) forwards; animation-delay: calc(45ms * var(--i, 0)); }
  .sx-drawer[data-open] .sx-drawer-nav .drawer-sub a { opacity: 1; transform: none; animation: none; }
}

/* ===== RESTORED LAYOUT BLOCK (lost in earlier file corruption) ===== */

/* S5 — solutions strip: 3×2 grid desktop, scroll-snap row on mobile */
.solutions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 1023px) {
  .solutions-row {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-block-end: var(--space-3); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  }
  .solutions-row > * { flex: 0 0 260px; scroll-snap-align: start; }
}

/* S6 — tech/AI split */
.tech-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
@media (max-width: 1023px) { .tech-split { grid-template-columns: 1fr; gap: var(--space-12); } }
.tech-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tech-chip {
  font: 500 var(--text-small)/1 var(--font-body); color: var(--mist-100);
  border: 1px solid var(--night-800); border-radius: var(--radius-full);
  padding-block: var(--space-3); padding-inline: var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tech-chip:hover { border-color: var(--signal-500); color: var(--mist-100); transform: translateY(-2px); }
[data-skin="glass"] .tech-chip { color: var(--night-900); border-color: rgb(46 107 255 / 0.18); background: rgb(255 255 255 / 0.5); }
[data-skin="glass"] .tech-chip:hover { border-color: var(--signal-500); color: var(--night-900); }
span.tech-chip { cursor: default; }

/* Hero */
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-12); align-items: center; }
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.hero-headline { font: 600 var(--text-display)/var(--lh-display) var(--font-display); max-inline-size: 14ch; }
.hero-sub { font: 400 var(--text-body-lg)/var(--lh-body-lg) var(--font-body); color: var(--text-muted); margin: 0; max-inline-size: 52ch; }
.hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.trust-bullets { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); list-style: none; margin: 0; padding: 0; }
.trust-bullets li { display: flex; align-items: center; gap: var(--space-2); font: 400 var(--text-small)/1.4 var(--font-body); color: var(--steel-300); }
.trust-bullets li::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--pulse-400); }
[data-skin="glass"] .trust-bullets li { color: var(--steel-600); }
.hero-eyebrow { color: var(--signal-400); margin: 0; }
[data-skin="glass"] .hero-eyebrow { color: var(--link); }
.hero-texture {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
  background-image: repeating-linear-gradient(to bottom, var(--mist-100) 0 1px, transparent 1px 5px);
}
[data-skin="glass"] .hero-texture { opacity: 0; }

/* Careers teaser band — theme-aware */
.careers-band { background: var(--surface); color: var(--text); border-block: 1px solid var(--border); }
.careers-row { padding-block: var(--space-16); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); justify-content: space-between; }
.careers-row h2 { font: 600 var(--text-h2)/var(--lh-h2) var(--font-display); color: var(--text); margin: 0; }
.careers-sub { font: 400 var(--text-body)/var(--lh-body) var(--font-body); color: var(--text-muted); margin: var(--space-3) 0 0; max-inline-size: 52ch; }
[data-skin="glass"] .careers-band { background: rgb(255 255 255 / 0.5); border-color: rgb(46 107 255 / 0.12); }

/* Mobile sticky CTA bar */
.mobile-cta {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 40;
  display: none; padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--night-950) 92%, transparent);
  backdrop-filter: blur(12px); border-block-start: 1px solid var(--night-800);
  transform: translateY(100%); transition: transform var(--dur-base) var(--ease-out);
}
.mobile-cta[data-visible] { transform: translateY(0); }
@media (max-width: 767px) { .mobile-cta { display: block; } }
.mobile-cta .sx-btn { inline-size: 100%; }
[data-skin="glass"] .mobile-cta { background: rgb(255 255 255 / 0.85); border-block-start: 1px solid rgb(46 107 255 / 0.12); }

/* Section vertical stacks */
.stack-12 { display: flex; flex-direction: column; gap: var(--space-12); }
.stack-8 { display: flex; flex-direction: column; gap: var(--space-8); }
.col-start-6 { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }

/* ===== Mobile refinements ===== */
body { overflow-x: clip; }
@media (max-width: 1023px) {
  .hero-visual-reveal { max-inline-size: 480px; margin-inline: auto; }
  .hero-visual-reveal .sx-gateflow { block-size: auto !important; }
  .hero-visual-reveal .sx-gateflow svg { inline-size: 100%; block-size: auto; }
  .sx-mega { display: none; }
}
@media (max-width: 767px) {
  .sx-header-cta > .sx-btn { display: none; }
  .hero-ctas { inline-size: 100%; flex-direction: column; }
  .hero-ctas .sx-btn { inline-size: 100%; justify-content: center; }
  .sx-logo-strip { gap: var(--space-3); }
  .sx-logo-strip img.sx-client-logo { block-size: 36px; max-inline-size: 104px; }
  .sx-logo-strip span.sx-client-logo { block-size: 48px; font-size: 13px; padding-inline: var(--space-3); }
  .careers-row { flex-direction: column; align-items: stretch; }
  .careers-row .sx-btn { inline-size: 100%; justify-content: center; }
  .sx-bento-tile { padding: var(--space-6); }
  .sx-bento-grid { grid-template-columns: 1fr; }
  .sx-bento-grid > * { grid-column: auto !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .sx-stat-value { font-size: 2rem; }
}