/* ================================================================
   SUREFY DESIGN TOKENS — edit these variables for future rebranding
   ================================================================ */
:root {
  color-scheme: dark;
  --font-heading: "Space Grotesk", "Trebuchet MS", sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --bg: #0a0e1a;
  --bg-raised: #0f1525;
  --bg-soft: #121a2d;
  --surface: rgba(18, 26, 45, 0.72);
  --surface-solid: #121a2d;
  --surface-strong: #172238;
  --text: #f7f8ff;
  --text-muted: #a5b0c6;
  --text-soft: #8995ad;
  --border: rgba(151, 169, 205, 0.16);
  --border-strong: rgba(111, 124, 255, 0.48);
  --accent: #5d7dff;
  --accent-2: #8a5cff;
  --accent-3: #38d8dc;
  --success: #58dfb1;
  --danger: #ff7d90;
  --whatsapp: #25d366;
  --whatsapp-dark: #128c7e;
  --gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 54%, var(--accent-3) 115%);
  --gradient-soft: linear-gradient(135deg, rgba(93, 125, 255, 0.16), rgba(138, 92, 255, 0.08) 55%, rgba(56, 216, 220, 0.13));
  --shadow-sm: 0 12px 35px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.34);
  --glow: 0 18px 50px rgba(93, 125, 255, 0.28);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --container: 1200px;
  --space-section: clamp(5rem, 9vw, 8.5rem);
  --header-height: 84px;
  --transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fc;
  --bg-raised: #ffffff;
  --bg-soft: #eef1f8;
  --surface: rgba(255, 255, 255, 0.8);
  --surface-solid: #ffffff;
  --surface-strong: #edf1fa;
  --text: #11182a;
  --text-muted: #536079;
  --text-soft: #5f6b82;
  --border: rgba(44, 59, 91, 0.14);
  --border-strong: rgba(79, 97, 225, 0.4);
  --accent: #4969e8;
  --accent-2: #7650df;
  --accent-3: #0b7981;
  --success: #147a61;
  --danger: #b43f55;
  --shadow-sm: 0 12px 35px rgba(40, 53, 84, 0.09);
  --shadow-lg: 0 28px 80px rgba(40, 53, 84, 0.14);
  --glow: 0 18px 50px rgba(73, 105, 232, 0.2);
}

/* === RESET / BASE === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
body.theme-ready, body.theme-ready *, body.theme-ready *::before, body.theme-ready *::after { transition-property: color, background-color, border-color, box-shadow, opacity, transform; transition-duration: var(--transition); transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, figure, blockquote { margin-top: 0; }
h1, h2, h3 { color: var(--text); font-family: var(--font-heading); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(2.85rem, 6.2vw, 5.9rem); margin-bottom: 1.55rem; }
h2 { font-size: clamp(2.15rem, 4.4vw, 4rem); margin-bottom: 1.2rem; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: .7rem; }
p { color: var(--text-muted); }
::selection { background: rgba(107, 116, 255, .38); color: #fff; }
:focus-visible { outline: 3px solid var(--accent-3); outline-offset: 4px; border-radius: 5px; }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: var(--space-section); }
.section-tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section-alt { background: var(--bg-raised); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 9999; top: 12px; left: 12px; padding: .65rem 1rem; transform: translateY(-150%); border-radius: 8px; background: var(--text); color: var(--bg); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.grid-texture { background-image: linear-gradient(rgba(111, 130, 175, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 130, 175, .055) 1px, transparent 1px); background-size: 50px 50px; }

/* === SHARED TYPOGRAPHY / ACTIONS === */
.eyebrow { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1rem; color: var(--accent-3); font-size: .75rem; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.eyebrow > span { width: 28px; height: 2px; background: var(--gradient); border-radius: 99px; }
.eyebrow.light { color: rgba(255,255,255,.85); }
.eyebrow.light > span { background: #fff; }
.section-header { width: min(790px, 100%); margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-header p:last-child { margin-bottom: 0; font-size: 1.05rem; }
.section-header.with-action { display: flex; width: 100%; max-width: none; align-items: end; justify-content: space-between; gap: 2rem; text-align: left; }
.section-header.with-action > div:first-child { max-width: 780px; }
.section-header.with-action > div > p:last-child { max-width: 680px; }
.section-copy > p:not(.eyebrow) { font-size: 1.04rem; }
.button { --magnetic-x: 0px; --magnetic-y: 0px; --button-lift: 0px; --press-scale: 1; position: relative; display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: .6rem; padding: .8rem 1.25rem; overflow: hidden; transform: translate3d(var(--magnetic-x), calc(var(--magnetic-y) + var(--button-lift)), 0) scale(var(--press-scale)); border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-weight: 700; line-height: 1; isolation: isolate; transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow var(--transition), border-color var(--transition), background var(--transition); }
.button:hover { --button-lift: -3px; }
.button.is-pressed { --press-scale: .97; }
.button-ripple { position: absolute; z-index: -1; width: 12px; height: 12px; transform: translate(-50%, -50%) scale(0); border-radius: 50%; background: rgba(255,255,255,.38); pointer-events: none; animation: button-ripple 560ms ease-out forwards; }
.button-primary { background: var(--gradient); color: #fff; box-shadow: 0 10px 28px rgba(94, 102, 255, .24); }
.button-primary:hover { box-shadow: var(--glow); }
.button-ghost { border-color: var(--border-strong); background: rgba(93, 125, 255, .06); color: var(--text); }
.button-ghost:hover { border-color: var(--accent); background: rgba(93, 125, 255, .12); box-shadow: var(--shadow-sm); }
.button-white { background: #fff; color: #17203a; box-shadow: 0 12px 35px rgba(24, 33, 74, .2); }
.button-block { width: 100%; }
.tag { display: inline-flex; width: max-content; padding: .35rem .65rem; border: 1px solid rgba(93, 125, 255, .25); border-radius: 999px; background: rgba(93, 125, 255, .1); color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.centered-action { margin-top: 2.25rem; text-align: center; }

/* === HEADER / NAVIGATION === */
.site-header { position: fixed; z-index: 1000; inset: 0 0 auto; height: var(--header-height); border-bottom: 1px solid transparent; transition: height var(--transition), background var(--transition), backdrop-filter var(--transition), border-color var(--transition); }
.scroll-progress { position: absolute; z-index: 4; top: 0; right: 0; left: 0; height: 3px; overflow: hidden; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: var(--gradient); box-shadow: 0 0 14px rgba(93,125,255,.6); will-change: transform; }
.site-header.is-scrolled { height: 68px; border-color: var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); box-shadow: 0 8px 35px rgba(0,0,0,.08); backdrop-filter: blur(18px); }
.header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0; color: var(--text); font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.brand > span:not(.brand-mark) { display: none; }
.brand-mark { display: block; width: clamp(112px, 10vw, 136px); height: 32px; overflow: hidden; border-radius: 0; background: url("../images/surefy%20white%20logo.svg") left center / contain no-repeat; color: transparent; box-shadow: none; font-size: 0; line-height: 0; }
[data-theme="light"] .site-header .brand-mark { background-image: url("../images/surefy%20logo%20colour.svg"); }
.site-footer .brand-mark { background-image: url("../images/surefy%20white%20logo.svg"); }
.site-nav { display: flex; align-items: center; gap: .2rem; }
.site-nav a { position: relative; padding: .6rem .7rem; color: var(--text-muted); font-size: .85rem; font-weight: 600; }
.site-nav a::after { position: absolute; right: .7rem; bottom: .3rem; left: .7rem; height: 2px; transform: scaleX(0); transform-origin: right; border-radius: 99px; background: var(--gradient); content: ""; transition: transform var(--transition); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: .65rem; }
.theme-toggle, .nav-toggle { position: relative; display: grid; width: 44px; aspect-ratio: 1; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; }
.theme-toggle:hover, .nav-toggle:hover { border-color: var(--border-strong); background: var(--surface-strong); }
.header-whatsapp { position: relative; display: flex; align-items: center; gap: .6rem; padding: .5rem .95rem; width: auto; aspect-ratio: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--whatsapp); cursor: pointer; font-size: .85rem; font-weight: 600; white-space: nowrap; transition: all var(--transition); }
.header-whatsapp:hover { border-color: rgba(37,211,102,.48); background: var(--surface-strong); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,.15); }
.header-whatsapp img { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.whatsapp-logo, .header-whatsapp > span[aria-hidden="true"] { display: block; width: 1.28rem; height: 1.28rem; overflow: hidden; background: currentColor; color: inherit; font-size: 0; line-height: 0; -webkit-mask: url("../icons/whatsapp.svg") center / contain no-repeat; mask: url("../icons/whatsapp.svg") center / contain no-repeat; }
.whatsapp-fab-open { display: flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; font-size: 1.2rem; line-height: 1; }
.theme-icon { position: absolute; font-size: 1.1rem; line-height: 1; transition: transform 350ms cubic-bezier(.2,.9,.2,1), opacity 250ms ease; }
.sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .moon { opacity: 0; transform: rotate(90deg) scale(.6); }
.nav-toggle { display: none; padding: 10px; }
.nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* === WHATSAPP CONTACT WIDGET === */
.whatsapp-widget { position: fixed; z-index: 1300; right: max(1.1rem, env(safe-area-inset-right)); bottom: max(1.1rem, env(safe-area-inset-bottom)); display: grid; justify-items: end; transition: bottom var(--transition); }
.whatsapp-widget.is-footer-visible { bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5.5rem)); }
.whatsapp-panel { position: absolute; right: 0; bottom: calc(100% + .85rem); display: grid; width: min(310px, calc(100vw - 2rem)); gap: .65rem; padding: .75rem; transform: translateY(10px) scale(.94); transform-origin: right bottom; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--surface-solid) 94%, transparent); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; backdrop-filter: blur(18px); transition: transform var(--transition), opacity var(--transition), visibility var(--transition); }
.whatsapp-panel.is-open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.whatsapp-option { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .8rem; border: 1px solid transparent; border-radius: 13px; background: var(--bg-soft); }
a.whatsapp-option:hover { transform: translateY(-2px); border-color: rgba(37,211,102,.35); background: color-mix(in srgb, var(--bg-soft) 86%, var(--whatsapp)); }
.whatsapp-option > span:last-child { display: grid; min-width: 0; }
.whatsapp-option strong { color: var(--text); font-size: .8rem; line-height: 1.4; }
.whatsapp-option small, .callback-number-desktop, .callback-number-mobile { color: var(--text-muted); font-size: .7rem; line-height: 1.45; }
.callback-number-desktop { user-select: text; }
.callback-number-mobile { display: none; width: max-content; color: var(--whatsapp-dark); font-weight: 700; }
.whatsapp-option-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark)); color: #fff; font-size: .9rem; font-weight: 800; box-shadow: 0 8px 22px rgba(37,211,102,.2); }
.whatsapp-option-icon:not(.callback) { font-size: 0; line-height: 0; }
.whatsapp-option-icon:not(.callback):not(img)::before { display: block; width: 1.18rem; height: 1.18rem; background: currentColor; content: ""; -webkit-mask: url("../icons/whatsapp.svg") center / contain no-repeat; mask: url("../icons/whatsapp.svg") center / contain no-repeat; }
.whatsapp-option-icon[src] { background: transparent; box-shadow: none; border-radius: 8px; }
.whatsapp-option-icon .whatsapp-logo { width: 1.18rem; height: 1.18rem; }
.whatsapp-option-icon.callback { background: var(--gradient); box-shadow: 0 8px 22px rgba(93,125,255,.2); }
.whatsapp-fab { position: relative; display: grid; width: 58px; height: 58px; place-items: center; overflow: visible; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark)); color: #fff; box-shadow: 0 14px 34px rgba(18,140,126,.32); cursor: pointer; font-size: 1.25rem; }
.whatsapp-fab::after { position: absolute; z-index: -1; inset: -5px; border: 2px solid rgba(37,211,102,.46); border-radius: inherit; content: ""; animation: whatsapp-pulse 2.8s ease-out infinite; }
.whatsapp-fab:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 42px rgba(18,140,126,.42); }
.whatsapp-fab-open, .whatsapp-fab-close { position: absolute; transition: transform var(--transition), opacity var(--transition); }
.whatsapp-fab-open, .whatsapp-fab-open.whatsapp-logo { width: 1.55rem; height: 1.55rem; }
.whatsapp-fab-close { transform: rotate(-70deg) scale(.5); opacity: 0; font-size: 1.55rem; }
.whatsapp-fab[aria-expanded="true"] .whatsapp-fab-open { transform: rotate(70deg) scale(.5); opacity: 0; }
.whatsapp-fab[aria-expanded="true"] .whatsapp-fab-close { transform: rotate(0) scale(1); opacity: 1; }

/* === HERO === */
.hero { position: relative; overflow: clip; padding-top: calc(var(--header-height) + clamp(1.5rem, 3vw, 2.5rem)); }
.hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 180px; background: linear-gradient(transparent, var(--bg)); content: ""; pointer-events: none; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; align-items: start; gap: clamp(2.5rem, 6vw, 6rem); }
.hero-copy { min-width: 0; }
.hero h1 { max-width: 780px; }
.rotating-wrap { display: grid; width: max-content; max-width: 100%; min-height: 1.08em; overflow-x: visible; color: transparent; background: var(--gradient); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; animation: gradient-shift 8s linear infinite; }
.rotating-phrase { display: none; grid-area: 1 / 1; white-space: nowrap; }
.rotating-phrase.is-measuring { position: absolute; display: block; visibility: hidden; pointer-events: none; }
.rotating-wrap:not(.is-ready) .rotating-phrase:first-child, .rotating-phrase.is-active { display: block; animation: phrase-in 600ms cubic-bezier(.2,.8,.2,1) both; }
.hero-subcopy { max-width: 730px; margin-bottom: 1.8rem; font-size: 1.03rem; }
.email-capture { display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: .7rem; max-width: 600px; }
.email-capture input, .contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: 1px solid var(--border); border-radius: 12px; outline: none; background: var(--surface); color: var(--text); }
.email-capture input { min-height: 52px; padding: .75rem 1rem; }
.email-capture input:focus, .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(93,125,255,.12); }
.email-capture input::placeholder, .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-soft); }
.form-status { grid-column: 1 / -1; min-height: 1.25em; margin: 0; color: var(--success); font-size: .84rem; font-weight: 600; }
.form-status.is-error { color: var(--danger); }
.hero-visual { position: relative; min-width: 0; padding-top: clamp(4.2rem, 6vw, 5.5rem); }
.hero-image-shell { position: relative; z-index: 2; width: 112%; padding-bottom: clamp(4.9rem, 7vw, 5.65rem); overflow: hidden; border: 1px solid rgba(137,153,255,.34); border-radius: var(--radius-lg); background: #07101f; box-shadow: var(--shadow-lg), 0 0 0 8px rgba(93,125,255,.025), 0 0 110px rgba(93,125,255,.22); animation: mockup-float 7s ease-in-out infinite; }
.hero-image-shell::before { position: absolute; z-index: 3; right: 0; left: 0; height: 2px; transform: translateY(-8px); background: linear-gradient(90deg, transparent 5%, rgba(56,216,220,.2), rgba(132,110,255,.95), rgba(56,216,220,.2), transparent 95%); box-shadow: 0 0 18px rgba(111,124,255,.8); content: ""; opacity: 0; pointer-events: none; animation: dashboard-scan 5.5s 1.2s ease-in-out infinite; }
.hero-image-shell::after { position: absolute; z-index: 3; inset: 0; border-radius: inherit; box-shadow: inset 0 0 34px rgba(92,114,255,.1); content: ""; pointer-events: none; }
.hero-product-image { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1448 / 1086; object-fit: cover; }
.dashboard-live-strip { position: absolute; z-index: 5; right: .8rem; bottom: .8rem; left: .8rem; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .45rem; padding: .5rem; border: 1px solid rgba(126,143,255,.26); border-radius: 14px; background: rgba(5,12,27,.82); box-shadow: 0 12px 32px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.dashboard-live-strip > span { min-width: 0; padding: .45rem .55rem; border-radius: 9px; background: rgba(22,31,59,.68); }
.dashboard-live-strip small, .dashboard-live-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-live-strip small { color: #91a0bd; font-size: .48rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-live-strip strong { color: #fff; font-family: var(--font-heading); font-size: clamp(.72rem, 1.2vw, 1rem); letter-spacing: -.02em; }
.dashboard-live-strip strong.is-updating { color: var(--success); transform: translateY(-1px); }
.hero-status-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: .7rem; padding: .72rem .9rem; border: 1px solid rgba(126,143,255,.38); border-radius: 14px; background: color-mix(in srgb, var(--surface-solid) 88%, transparent); box-shadow: 0 14px 38px rgba(0,0,0,.24), 0 0 28px rgba(93,125,255,.12); backdrop-filter: blur(16px); }
.hero-status-card > span:last-child { display: grid; }
.hero-status-card small { color: var(--text-soft); font-size: .58rem; font-weight: 700; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; }
.hero-status-card strong { color: var(--text); font-family: var(--font-heading); font-size: .78rem; line-height: 1.35; }
.hero-status-primary { top: .55rem; left: 2%; animation: status-drift 5s ease-in-out infinite; }
.hero-status-secondary { top: 1.6rem; right: -8%; animation: status-drift 5.8s 1.1s ease-in-out infinite reverse; }
.status-pulse { position: relative; width: 12px; height: 12px; flex: 0 0 12px; border: 2px solid var(--bg-raised); border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(88,223,177,.12), 0 0 18px rgba(88,223,177,.55); }
.status-pulse::after { position: absolute; inset: -7px; border: 1px solid var(--success); border-radius: inherit; content: ""; animation: status-ring 2s ease-out infinite; }
.status-check { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; background: var(--gradient); color: #fff; font-size: .75rem; font-weight: 800; box-shadow: 0 8px 22px rgba(93,125,255,.28); }
.hero-orbit { position: absolute; z-index: 0; top: -4.5rem; right: 2%; width: min(320px, 62%); aspect-ratio: 1; border: 1px solid rgba(99,121,255,.14); border-radius: 50%; opacity: .85; animation: orbit-turn 18s linear infinite; }
.hero-orbit::before, .hero-orbit::after { position: absolute; border: 1px solid rgba(73,199,216,.13); border-radius: 50%; content: ""; }
.hero-orbit::before { inset: 17%; }.hero-orbit::after { inset: 34%; border-color: rgba(137,92,255,.19); }
.hero-orbit span { position: absolute; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(93,125,255,.85); }
.hero-orbit span:nth-child(1) { top: 15%; left: 13%; }.hero-orbit span:nth-child(2) { top: 48%; right: -4px; background: var(--accent-3); }.hero-orbit span:nth-child(3) { bottom: 7%; left: 34%; background: var(--accent-2); }
.hero-glow { --glow-x: 0px; --glow-y: 0px; position: absolute; border-radius: 50%; filter: blur(10px); opacity: .34; pointer-events: none; will-change: transform; }
.hero-glow-one { top: 12%; right: 5%; width: min(38vw, 560px); aspect-ratio: 1; background: radial-gradient(circle, rgba(94,93,255,.55), transparent 67%); animation: blob-float 10s ease-in-out infinite; }
.hero-glow-two { bottom: 0; left: -15%; width: min(42vw, 620px); aspect-ratio: 1; background: radial-gradient(circle, rgba(37,196,210,.28), transparent 67%); animation: blob-float 13s -3s ease-in-out infinite reverse; }
.process-microstrip { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, 1.5rem); margin-top: clamp(3.5rem, 7vw, 6.5rem); padding: 1.1rem; border-block: 1px solid var(--border); color: var(--text-soft); font-size: clamp(.66rem, 1.3vw, .82rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.process-microstrip span { color: var(--text); }.process-microstrip i { color: var(--accent); font-style: normal; }

/* === CARDS / GRIDS === */
.card-grid { display: grid; gap: 1.25rem; }
.grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-card, .capability-card, .trust-card, .module-card, .statement-card, .testimonial-card, .blog-card, .app-card, .pricing-card { border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }
.feature-card, .capability-card, .trust-card { position: relative; min-height: 220px; padding: clamp(1.35rem, 3vw, 2rem); border-radius: var(--radius-md); }
.feature-card:hover, .capability-card:hover, .trust-card:hover, .module-card:hover, .testimonial-card:hover, .blog-card:hover, .app-card:hover, .pricing-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--glow); }
.feature-card p:last-child, .capability-card p:last-child, .trust-card p:last-child { margin-bottom: 0; }
.icon-box { display: grid; width: 46px; aspect-ratio: 1; place-items: center; margin-bottom: 1.2rem; border: 1px solid var(--border); border-radius: 13px; background: var(--gradient-soft); color: var(--accent); font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; transition: transform var(--transition), color var(--transition), border-color var(--transition); }
article:hover > .icon-box { transform: translateY(-3px) scale(1.08); border-color: var(--border-strong); color: var(--accent-3); }
.stats-strip { position: relative; border-block: 1px solid var(--border); background: var(--gradient-soft); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { position: relative; padding: 2.2rem 1rem; text-align: center; }.stat + .stat::before { position: absolute; top: 25%; bottom: 25%; left: 0; width: 1px; background: var(--border); content: ""; }
.stat strong { display: block; margin-bottom: .2rem; color: var(--text); font-family: var(--font-heading); font-size: clamp(1.9rem, 4vw, 3.15rem); line-height: 1; letter-spacing: -.06em; }
.stat span { color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 7vw, 6rem); }
.vision-stack { display: grid; gap: 1rem; }
.statement-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-md); }
.statement-card:hover { border-color: var(--border-strong); }
.statement-number { color: var(--accent); font-family: var(--font-heading); font-weight: 700; }
.statement-card h3 { font-size: 1.2rem; }.statement-card p:last-child { margin-bottom: 0; }
.card-kicker { margin-bottom: .35rem; color: var(--accent-3); font-size: .69rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.module-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.module-card { position: relative; display: flex; min-height: 300px; grid-column: span 2; flex-direction: column; padding: 1.65rem; overflow: hidden; border-radius: var(--radius-md); }
.module-card::before, .blog-card::after, .testimonial-card::after { position: absolute; z-index: 3; inset: -55%; transform: translate3d(-105%,0,0) rotate(18deg); background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.13) 49%, transparent 60%); content: ""; opacity: 0; pointer-events: none; transition: transform 720ms cubic-bezier(.2,.7,.2,1), opacity 260ms ease; }
.module-card:hover::before, .blog-card:hover::after, .testimonial-card:hover::after { transform: translate3d(105%,0,0) rotate(18deg); opacity: .75; }
.module-card:nth-child(4) { grid-column: 2 / span 2; }.module-card:nth-child(5) { grid-column: 4 / span 2; }
.module-card::after { position: absolute; right: -50px; bottom: -55px; width: 135px; aspect-ratio: 1; border-radius: 50%; background: var(--gradient); content: ""; filter: blur(38px); opacity: .12; }
.module-icon { display: grid; width: 50px; aspect-ratio: 1; place-items: center; margin-bottom: 1rem; border-radius: 14px; background: var(--gradient); color: #fff; font-family: var(--font-heading); font-weight: 700; box-shadow: 0 10px 30px rgba(93,125,255,.2); transition: transform var(--transition); }
.module-card:hover .module-icon { transform: rotate(-5deg) scale(1.08); }.module-card .tag { position: absolute; top: 1.7rem; right: 1.5rem; }.module-card h3 { margin-top: .3rem; }.module-card p { flex: 1; }.module-card a { position: relative; z-index: 1; width: max-content; color: var(--text); font-size: .86rem; font-weight: 700; }.module-card a span { color: var(--accent); }

/* === AI CALLING PIPELINE === */
.ai-calling-section { overflow: hidden; background-color: var(--bg-raised); }
.ai-calling-section::before { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(93,125,255,.12), transparent 43%); content: ""; pointer-events: none; }
.ai-pipeline-wrap { position: relative; margin-bottom: 2rem; }
.ai-pipeline { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.pipeline-step { position: relative; min-width: 0; padding: 1.25rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-solid) 90%, transparent); text-align: center; }
.pipeline-step:not(:last-child)::after { display: none; }
.pipeline-connector { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pipeline-connector path { fill: none; stroke: url(#pipeline-gradient-desktop); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 7px rgba(93,125,255,.65)); transition: stroke-dashoffset 1800ms cubic-bezier(.2,.75,.2,1); vector-effect: non-scaling-stroke; }
.ai-pipeline-wrap.is-drawn .pipeline-connector path { stroke-dashoffset: 0; }
.pipeline-connector-tablet, .pipeline-connector-mobile { display: none; }
.pipeline-connector-tablet path { stroke: url(#pipeline-gradient-tablet); }.pipeline-connector-mobile path { stroke: url(#pipeline-gradient-mobile); }
.step-number { position: absolute; top: .8rem; left: .8rem; color: var(--text-soft); font-family: var(--font-heading); font-size: .62rem; font-weight: 700; }
.step-icon { display: grid; width: 48px; aspect-ratio: 1; place-items: center; margin: .45rem auto 1rem; border-radius: 15px; background: var(--gradient); color: #fff; font-family: var(--font-heading); font-weight: 700; box-shadow: 0 10px 28px rgba(93,125,255,.22); }
.pipeline-step h3 { min-height: 2.35em; font-size: .98rem; }.pipeline-step p { margin-bottom: 0; font-size: .78rem; line-height: 1.55; }
.ai-highlights { margin-top: 2rem; }

/* === LEAD MANAGEMENT === */
.lead-intro { max-width: 860px; margin: 0 auto 3rem; text-align: center; }
.lead-intro > p:last-child { font-size: 1.05rem; }
.funnel-strip { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 1.3rem; color: var(--text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.funnel-strip span { padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }.funnel-strip i { color: var(--accent); font-style: normal; }
.lead-panel { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--gradient-soft); }
.check-list { display: grid; gap: .65rem; margin: 1.4rem 0 1.8rem; padding: 0; list-style: none; }.check-list li { position: relative; padding-left: 1.8rem; color: var(--text-muted); }.check-list li::before { position: absolute; top: .08rem; left: 0; display: grid; width: 20px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: rgba(88,223,177,.13); color: var(--success); content: "✓"; font-size: .72rem; font-weight: 800; }
.task-board { overflow: hidden; min-height: 370px; padding: 1.25rem; transform: perspective(1100px) rotateY(-4deg) rotateX(2deg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-solid); box-shadow: var(--shadow-lg); }
.board-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 700; }.board-head em { padding: .25rem .55rem; border-radius: 99px; background: rgba(88,223,177,.12); color: var(--success); font-size: .62rem; font-style: normal; }
.board-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1rem; }.board-columns > div { min-width: 0; min-height: 270px; padding: .75rem; border-radius: 12px; background: var(--bg-soft); }.board-columns small { display: block; overflow: hidden; margin-bottom: .8rem; color: var(--text-soft); font-size: .59rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.board-columns b { display: block; height: 58px; margin-bottom: .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-solid); box-shadow: var(--shadow-sm); }.board-columns b::before { display: block; width: 66%; height: 5px; margin: 12px; border-radius: 99px; background: var(--border-strong); content: ""; }

/* === TRUST / BANNERS / PRICING === */
.trust-card .tag { position: absolute; top: 1.5rem; right: 1.5rem; }
.cta-banner, .secondary-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; overflow: hidden; border-radius: var(--radius-lg); }
.cta-banner { min-height: 420px; padding: clamp(2rem, 6vw, 5rem); background: linear-gradient(120deg, #425ff0, #7146dc 56%, #139ba8 120%); color: #fff; box-shadow: var(--shadow-lg); }
.cta-banner::before, .cta-banner::after { position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; content: ""; }.cta-banner::before { right: -80px; width: 330px; aspect-ratio: 1; }.cta-banner::after { right: 80px; width: 180px; aspect-ratio: 1; }
.cta-banner > div, .cta-banner > a { position: relative; z-index: 1; }.cta-banner > div { max-width: 720px; }.cta-banner h2 { color: #fff; }.cta-banner p:not(.eyebrow) { color: rgba(255,255,255,.8); }
.bullet-tags { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }.bullet-tags span { padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 600; }
.pricing-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(2.5rem, 8vw, 7rem); }.price-note { margin-top: 2rem; padding: 1rem 1.1rem; border-left: 3px solid var(--accent); background: var(--gradient-soft); color: var(--text-muted); font-size: .9rem; }.price-note span { color: var(--text); font-weight: 700; }
.pricing-card { max-width: 610px; padding: clamp(1.6rem, 4vw, 2.6rem); border-color: var(--border-strong); border-radius: var(--radius-lg); background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, var(--gradient) border-box; box-shadow: var(--shadow-lg); }
.pricing-top { padding-bottom: 1.3rem; border-bottom: 1px solid var(--border); }.pricing-top h3 { margin: 1rem 0 .35rem; font-size: clamp(1.5rem, 3vw, 2.3rem); }.pricing-top p { margin: 0; color: var(--accent-3); font-weight: 700; }
.pricing-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.1rem; margin: 1.5rem 0; padding: 0; list-style: none; }.pricing-features li { color: var(--text-muted); font-size: .84rem; }

/* === TESTIMONIALS === */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.testimonial-card { position: relative; display: flex; min-width: 0; min-height: 310px; flex-direction: column; justify-content: space-between; margin: 0; padding: 1.55rem; overflow: hidden; border-radius: var(--radius-md); }
.testimonial-card::before { color: var(--accent); content: "“"; font-family: Georgia, serif; font-size: 3.5rem; line-height: .7; }
.testimonial-card blockquote { margin: .9rem 0 1.5rem; color: var(--text-muted); font-size: .9rem; line-height: 1.7; }
.testimonial-card figcaption { display: flex; align-items: center; gap: .8rem; }
.avatar { display: grid; width: 43px; flex: 0 0 43px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--gradient); color: #fff; font-size: .72rem; font-weight: 700; }
.testimonial-card figcaption > span:last-child { min-width: 0; }.testimonial-card strong, .testimonial-card small { display: block; }.testimonial-card strong { color: var(--text); font-size: .83rem; }.testimonial-card small { color: var(--text-soft); font-size: .68rem; line-height: 1.45; }

/* === BLOG CAROUSEL === */
.carousel-controls { display: flex; flex-shrink: 0; gap: .6rem; }
.carousel-controls button { display: grid; width: 46px; aspect-ratio: 1; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 1.1rem; }
.carousel-controls button:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--surface-strong); }
.carousel-controls button:disabled { cursor: not-allowed; opacity: .35; }
.blog-carousel { display: flex; gap: 1.25rem; overflow-x: auto; padding: .25rem .1rem 1.5rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; }.blog-carousel::-webkit-scrollbar { display: none; }
.blog-card { position: relative; display: flex; flex: 0 0 calc((100% - 2.5rem) / 3); min-width: 0; scroll-snap-align: start; flex-direction: column; overflow: hidden; border-radius: var(--radius-md); }

/* Pointer tilt is added only on fine-pointer devices by main.js. */
.is-tilt-card { --tilt-x: 0deg; --tilt-y: 0deg; --card-lift: 0px; transform: perspective(900px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; will-change: transform; transition: transform 180ms cubic-bezier(.2,.8,.2,1), border-color var(--transition), box-shadow var(--transition); }
.is-tilt-card:hover { --card-lift: -6px; }
.blog-cover { display: grid; aspect-ratio: 16 / 9; place-items: center; background: var(--gradient-soft); }
.blog-cover span { display: grid; width: 64px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 19px; background: rgba(10,14,26,.35); color: #fff; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; backdrop-filter: blur(8px); }
.cover-one { background: linear-gradient(135deg,#3e63db,#783fe2); }.cover-two { background: linear-gradient(135deg,#0b7c91,#44b6a1); }.cover-three { background: linear-gradient(135deg,#198a64,#2bc18d); }.cover-four { background: linear-gradient(135deg,#5b3cc4,#b153b4); }.cover-five { background: linear-gradient(135deg,#c56035,#e5a841); }
.blog-body { display: flex; flex: 1; flex-direction: column; padding: 1.35rem; }.blog-body h3 { margin: .9rem 0 .7rem; }.blog-body p { flex: 1; font-size: .85rem; }.blog-body a { width: max-content; color: var(--text); font-size: .82rem; font-weight: 700; }.blog-body a span { color: var(--accent); }
.carousel-dots { display: flex; justify-content: center; gap: .5rem; margin-top: .4rem; }.carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--border-strong); cursor: pointer; transition: width var(--transition), background var(--transition); }.carousel-dots button.is-active { width: 28px; background: var(--gradient); }

/* === SECONDARY CTA / LOGOS / APPS === */
.secondary-banner { padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--border); background: var(--gradient-soft); }.secondary-banner > div { max-width: 700px; }.secondary-banner p:last-child { margin-bottom: 0; }
.trusted-section { overflow: hidden; padding-bottom: var(--space-section); }.logo-marquee { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }.logo-track { display: flex; width: max-content; gap: 1rem; animation: marquee 30s linear infinite; }.logo-track:hover { animation-play-state: paused; }.logo-track span { display: grid; width: 210px; height: 88px; place-items: center; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text-soft); font-family: var(--font-heading); font-size: .82rem; font-weight: 700; letter-spacing: .12em; }
.apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }.app-card { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-md); }.app-icon { display: grid; width: 80px; height: 80px; place-items: center; border-radius: 22px; color: #fff; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; box-shadow: var(--shadow-sm); }.reachout-icon { background: linear-gradient(145deg,#587cff,#7747d8); }.connects-icon { background: linear-gradient(145deg,#14a6b8,#3ec98f); }.app-copy p { font-size: .9rem; }.play-badge { display: block; width: 165px; margin-left: -10px; }.play-badge img { width: 100%; height: auto; }

/* === FOOTER === */
.site-footer { padding-top: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--border); background: #070a13; color: #fff; }
[data-theme="light"] .site-footer { background: #101729; }
.footer-grid { display: grid; grid-template-columns: 1.55fr .65fr 1fr; gap: clamp(2rem, 6vw, 5rem); padding-bottom: 3.5rem; }
.site-footer .brand { color: #fff; }.footer-about > p { max-width: 560px; margin: 1.3rem 0; color: #9da8bd; font-size: .82rem; }
.site-footer h2 { margin-bottom: 1.15rem; color: #fff; font-size: .93rem; letter-spacing: 0; }.site-footer ul { margin: 0; padding: 0; list-style: none; }.site-footer li + li { margin-top: .65rem; }.site-footer li, .site-footer a, .site-footer address { color: #9da8bd; font-size: .8rem; font-style: normal; }.site-footer a:hover { color: #fff; }.footer-contact li { display: flex; align-items: flex-start; gap: .65rem; }.footer-contact li span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #6f8aff; font-size: 1.2rem; flex-shrink: 0; }.social-links { display: flex; gap: .6rem; }.social-links a { display: grid; width: 36px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.04); color: #fff; font-size: .72rem; font-weight: 700; }.social-links a:hover { transform: translateY(-2px); border-color: rgba(111,138,255,.7); background: rgba(111,138,255,.13); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.3rem; border-top: 1px solid rgba(255,255,255,.1); }.footer-bottom p { margin: 0; color: #818ca1; font-size: .7rem; }.footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem 1.1rem; }.footer-bottom nav a { font-size: .7rem; }

/* === SECONDARY / LEGAL / CONTACT PAGES === */
.inner-main { min-height: 60vh; padding-top: var(--header-height); }.page-hero { padding: clamp(5rem, 10vw, 8rem) 0 clamp(3.5rem, 6vw, 5rem); border-bottom: 1px solid var(--border); text-align: center; }.page-hero .container { max-width: 820px; }.page-hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); }.page-hero p { margin-inline: auto; max-width: 680px; font-size: 1.04rem; }
.contact-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 7vw, 6rem); align-items: start; }.contact-details { display: grid; gap: 1rem; }.contact-detail { padding: 1.3rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }.contact-detail span { color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.contact-detail a, .contact-detail address { display: block; margin-top: .45rem; color: var(--text); font-style: normal; line-height: 1.55; }.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }.form-field { display: grid; gap: .4rem; }.form-field.full, .contact-form .form-status, .contact-form .button { grid-column: 1 / -1; }.form-field label { color: var(--text); font-size: .8rem; font-weight: 650; }.contact-form input, .contact-form textarea, .contact-form select { padding: .8rem .9rem; }.contact-form textarea { min-height: 150px; resize: vertical; }
.prose-wrap { width: min(calc(100% - 2rem), 850px); margin-inline: auto; }.legal-card { min-height: 260px; padding: clamp(1.5rem, 5vw, 3rem); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); }.legal-card h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }.placeholder-copy { margin: 0; padding: 1rem; border-radius: var(--radius-sm); background: var(--gradient-soft); color: var(--text-muted); }

/* === REVEAL / KEYFRAMES === */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes gradient-shift { to { background-position: 200% center; } }
@keyframes phrase-in { from { opacity: 0; transform: translateY(.28em); } to { opacity: 1; transform: translateY(0); } }
@keyframes button-ripple { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }
@keyframes mockup-float { 50% { transform: translateY(-10px) rotateX(1deg); } }
@keyframes dashboard-scan { 0%, 12% { top: 0; opacity: 0; } 20% { opacity: .85; } 72% { opacity: .5; } 82%, 100% { top: 100%; opacity: 0; } }
@keyframes status-drift { 50% { transform: translateY(-7px); } }
@keyframes status-ring { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes whatsapp-pulse { 0% { transform: scale(.85); opacity: .75; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes blob-float { 0%, 100% { transform: translate3d(var(--glow-x),var(--glow-y),0); } 50% { transform: translate3d(calc(var(--glow-x) + 25px),calc(var(--glow-y) - 18px),0) scale(1.06); } }
@keyframes marquee { to { transform: translateX(calc(-50% - .5rem)); } }

/* === RESPONSIVE: TABLET === */
@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .site-nav { position: fixed; z-index: 999; top: 76px; right: 1rem; left: 1rem; display: grid; max-height: calc(100vh - 100px); padding: 1rem; overflow-y: auto; transform: translateY(-12px) scale(.98); border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-raised) 96%, transparent); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; backdrop-filter: blur(18px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); }
  .site-nav.is-open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
  .site-nav a { padding: .8rem .9rem; border-radius: 10px; font-size: .95rem; }.site-nav a:hover { background: var(--surface-strong); }.site-nav a::after { display: none; }
  .hero-grid { grid-template-columns: 1fr; }.hero-copy { max-width: 850px; text-align: center; }.hero-copy .eyebrow { justify-content: center; }.hero-subcopy, .email-capture { margin-inline: auto; }.hero-visual { width: min(820px, 94%); margin-inline: auto; }.hero-image-shell { width: 100%; }.hero-status-secondary { right: 1%; }
  .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.module-card, .module-card:nth-child(4), .module-card:nth-child(5) { grid-column: auto; }.module-card:last-child { grid-column: 1 / -1; width: calc(50% - .625rem); justify-self: center; }
  .ai-pipeline { grid-template-columns: repeat(3,minmax(0,1fr)); }.pipeline-step:nth-child(4) { grid-column: 1 / 2; }.pipeline-step:nth-child(5) { grid-column: 2 / 3; }.pipeline-connector-desktop { display: none; }.pipeline-connector-tablet { display: block; }
  .testimonial-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .blog-card { flex-basis: calc((100% - 1.25rem) / 2); }
}

/* === RESPONSIVE: SMALL TABLET / MOBILE === */
@media (max-width: 768px) {
  :root { --header-height: 72px; --space-section: 5rem; }
  .container { width: min(calc(100% - 1.25rem), var(--container)); }
  .grid-three, .split-layout, .lead-panel, .pricing-layout, .apps-grid, .contact-layout { grid-template-columns: 1fr; }
  .section-header.with-action { align-items: flex-start; flex-direction: column; }.section-header.with-action .button { align-self: auto; }
  .hero { padding-top: calc(var(--header-height) + 4rem); }.hero h1 { font-size: clamp(2.5rem, 12vw, 4.5rem); }.email-capture { grid-template-columns: 1fr; }.email-capture .button { width: 100%; }
  .floating-pill { font-size: .66rem; }.pill-verified { right: -.4rem; }.pill-ai { left: -.4rem; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }.stat:nth-child(3)::before { display: none; }.stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .module-grid { grid-template-columns: 1fr; }.module-card:last-child { grid-column: auto; width: auto; justify-self: stretch; }.module-card { min-height: 260px; }
  .ai-pipeline { grid-template-columns: 1fr; gap: 1rem; padding-left: 1rem; }.pipeline-step, .pipeline-step:nth-child(4), .pipeline-step:nth-child(5) { grid-column: 1; text-align: left; padding-left: 4.7rem; }.step-number { top: 1rem; left: 1.25rem; }.step-icon { position: absolute; top: 2rem; left: 1rem; width: 42px; }.pipeline-step h3 { min-height: 0; }.pipeline-connector-tablet { display: none; }.pipeline-connector-mobile { display: block; left: 1rem; width: 64px; }
  .funnel-strip { overflow-x: auto; justify-content: flex-start; padding-bottom: .45rem; scrollbar-width: none; }.funnel-strip::-webkit-scrollbar { display: none; }.funnel-strip span, .funnel-strip i { flex: 0 0 auto; }
  .lead-panel { padding: 1.25rem; }.task-board { min-height: 315px; transform: none; }.board-columns > div { min-height: 215px; }
  .cta-banner, .secondary-banner { align-items: flex-start; flex-direction: column; }.cta-banner { min-height: 0; }.cta-banner::before, .cta-banner::after { opacity: .45; }
  .pricing-features { grid-template-columns: 1fr; }.testimonial-grid { grid-template-columns: 1fr; }.testimonial-card { min-height: 0; }
  .blog-card { flex-basis: 84%; }.carousel-controls { align-self: flex-end; }
  .app-card { grid-template-columns: 1fr; }.app-icon { width: 68px; height: 68px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-about { grid-column: 1 / -1; }.footer-bottom { align-items: flex-start; flex-direction: column; }.footer-bottom nav { justify-content: flex-start; }
  .contact-form { grid-template-columns: 1fr; }.form-field, .form-field.full, .contact-form .button, .contact-form .form-status { grid-column: 1; }
}

@media (max-width: 480px) {
  h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .brand-mark { width: 108px; height: 28px; }.brand { font-size: 1.2rem; }
  .theme-toggle, .nav-toggle { width: 40px; }
  .header-whatsapp { padding: .45rem .75rem; font-size: .75rem; }
  .header-whatsapp img { width: 18px; height: 18px; }
  .hero-copy { text-align: left; }.hero-copy .eyebrow { justify-content: flex-start; }.hero h1 { font-size: clamp(2.35rem, 12vw, 3.4rem); }.hero-subcopy { font-size: .94rem; }.hero-visual { width: 100%; padding-top: 4.5rem; }.hero-image-shell { border-radius: 18px; }.hero-status-card { padding: .6rem .7rem; }.hero-status-card small { font-size: .5rem; }.hero-status-card strong { font-size: .68rem; }.hero-status-secondary { display: none; }.hero-orbit { top: -2.5rem; right: -8%; width: 68%; }
  .hero-image-shell { padding-bottom: 8.6rem; }
  .dashboard-live-strip { right: .35rem; bottom: .35rem; left: .35rem; grid-template-columns: 1fr; gap: .25rem; padding: .3rem; border-radius: 10px; }.dashboard-live-strip > span { padding: .3rem .45rem; }.dashboard-live-strip small { font-size: .38rem; }.dashboard-live-strip strong { font-size: .62rem; }
  .process-microstrip { gap: .35rem; overflow-x: auto; justify-content: flex-start; white-space: nowrap; scrollbar-width: none; }.process-microstrip::-webkit-scrollbar { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }.stat { padding: 1.7rem .5rem; }.stat strong { font-size: 1.9rem; }.stat span { font-size: .68rem; }
  .section-header { text-align: left; }.section-header .eyebrow { justify-content: flex-start; }
  .statement-card { grid-template-columns: 1fr; }.module-card .tag, .trust-card .tag { position: static; margin-bottom: 1rem; }.module-card .module-icon { margin-top: .3rem; }
  .board-columns { gap: .4rem; }.board-columns > div { padding: .45rem; }.board-columns b::before { margin: 9px; }
  .blog-card { flex-basis: 90%; }.secondary-banner, .cta-banner { border-radius: 22px; }
  .footer-grid { grid-template-columns: 1fr; }.footer-about { grid-column: auto; }
  .whatsapp-widget { right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); }.whatsapp-widget.is-footer-visible { bottom: max(4.8rem, calc(env(safe-area-inset-bottom) + 4.8rem)); }.whatsapp-fab { width: 54px; height: 54px; }
}

@media (hover: none), (max-width: 768px) {
  .callback-number-desktop { display: none; }
  .callback-number-mobile { display: inline-block; }
}

@media (max-height: 560px) {
  .whatsapp-panel { max-height: calc(100vh - 6rem); overflow-y: auto; }
}

/* === ACCESSIBILITY: REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .rotating-wrap:not(.is-ready) .rotating-phrase:first-child, .rotating-phrase.is-active { animation: none; }
  .hero-image-shell::before { display: none; }
  .whatsapp-fab::after { animation: none; opacity: .35; }
  .pipeline-connector path { stroke-dashoffset: 0; transition: none; }
  .button-ripple, .module-card::before, .blog-card::after, .testimonial-card::after { display: none; }
  .is-tilt-card { transform: none; }
  .logo-track { transform: none; }
  .logo-track span[aria-hidden="true"] { display: none; }
}

/* =========================
   Footer Group Affiliation
   ========================= */

.footer-group-affiliation {
  margin-top: 32px;
  padding: 18px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: nowrap;

  color: rgba(255, 255, 255, 0.58);

  /* Align with Surefy footer content */
  padding-left: 200px;
}


.footer-group-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;

  white-space: nowrap;
  flex-shrink: 0;
}


.footer-group-logo {
  display: block;

  width: auto;
  height: 42px;
  max-width: 145px;

  object-fit: contain;
  flex-shrink: 0;

  opacity: 0.9;
  transition: opacity 0.25s ease;
}


.footer-group-affiliation:hover .footer-group-logo {
  opacity: 1;
}


.footer-group-company {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;

  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.48);

  white-space: nowrap;
  flex-shrink: 0;
}


/* =========================
   Tablet
   ========================= */

@media (max-width: 1024px) {

  .footer-group-affiliation {
    padding-left: 40px;
  }
}


/* =========================
   Mobile
   ========================= */

@media (max-width: 768px) {

  .footer-group-affiliation {
    margin-top: 24px;
    padding: 16px 20px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;
    flex-wrap: nowrap;
  }

  .footer-group-label {
    font-size: 14px;
  }

  .footer-group-logo {
    height: 34px;
    max-width: 120px;
  }

  .footer-group-company {
    padding-left: 10px;
    font-size: 9px;
  }
}


/* =========================
   Small Mobile
   ========================= */

@media (max-width: 480px) {

  .footer-group-affiliation {
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
  }

  .footer-group-label {
    font-size: 13px;
  }

  .footer-group-logo {
    height: 31px;
    max-width: 105px;
  }

  .footer-group-company {
    padding-left: 8px;
    font-size: 8px;
  }
}

/* =========================================================
   TEMP FIX: show content if reveal JavaScript is unavailable
   ========================================================= */

.js .reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}