:root {
  --black: #080808;
  --rich-black: #0d0d0d;
  --white: #fff;
  --soft: #f7f7f5;
  --line: #e7e7e4;
  --gray: #666;
  --orange: #ff5a00;
  --orange-bright: #ff6a00;
  --shell: 1440px;
  --header-h: 78px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); overflow-x: hidden; overflow-x: clip; }
body { margin: 0; color: #171717; background: var(--white); font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; stroke-width: 1.8; }
::selection { color: white; background: var(--orange); }

.shell { width: min(var(--shell), calc(100% - 112px)); margin-inline: auto; }
.section { padding: 96px 0; position: relative; }
.compact-section { padding: 56px 0; position: relative; }
.light-section { background: var(--white); }
.soft-section { background: var(--soft); }
.dark-section { color: white; background: var(--black); }
.accent { color: var(--orange); font-style: normal; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 9999; color: #000; background: #fff; padding: 10px 16px; transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.page-progress { position: fixed; inset: 0 0 auto; z-index: 1001; height: 2px; pointer-events: none; }
.page-progress span { display: block; width: 100%; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); }
.cursor-dot { position: fixed; z-index: 10000; width: 8px; height: 8px; margin: -4px; pointer-events: none; border-radius: 50%; background: var(--orange); mix-blend-mode: difference; opacity: 0; transition: width .25s, height .25s, opacity .25s; }
.cursor-dot.hover { width: 24px; height: 24px; margin: -12px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Manrope, Inter, sans-serif; letter-spacing: -.02em; word-spacing: .07em; font-kerning: normal; font-optical-sizing: auto; overflow-wrap: normal; text-wrap: balance; }
h2 { margin-bottom: 20px; font-size: clamp(38px, 3.4vw, 56px); line-height: 1.12; font-weight: 700; }
h3 { line-height: 1.25; }
.eyebrow { margin-bottom: 17px; color: var(--orange); font-size: 12px; line-height: 1.2; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.eyebrow span { color: #8b8b8b; }
.section-intro > p:not(.eyebrow) { max-width: 530px; color: var(--gray); }
.dark-section .section-intro > p:not(.eyebrow) { color: #a6a6a6; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.section-head h2 { max-width: 100%; margin: 0; font-size: clamp(36px, 2.9vw, 50px); }
.section-head .eyebrow { margin-bottom: 12px; }

.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 20px; overflow: hidden; border-radius: 7px; font-size: 15px; line-height: 1; font-weight: 650; transition: border-color .3s, color .3s, background-color .3s, transform .3s var(--ease), box-shadow .3s; isolation: isolate; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: white; transform: translateY(105%); transition: transform .4s var(--ease); }
.button:hover::before { transform: translateY(0); }
.button svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.button:hover svg { transform: translateX(3px); }
.button-primary { color: white; background: var(--orange); box-shadow: 0 10px 22px rgba(255,90,0,.18); }
.button-primary:hover { color: var(--orange); box-shadow: 0 12px 30px rgba(255,90,0,.24); }
.button-ghost { color: white; border: 1px solid rgba(255,255,255,.4); background: rgba(8,8,8,.55); }
.button-ghost::before { background: white; }
.button-ghost:hover { color: #111; border-color: white; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--orange); font-size: 15px; font-weight: 700; }
.text-link svg { width: 15px; transition: transform .3s var(--ease); }
.text-link:hover svg { transform: translate(3px, -3px); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; height: var(--header-h); color: white; background: rgba(5,5,5,.95); border-bottom: 1px solid rgba(255,255,255,.08); transition: height .35s var(--ease), background .35s, backdrop-filter .35s; }
.site-header.scrolled { --header-h: 66px; background: rgba(7,7,7,.82); backdrop-filter: blur(18px); }
.header-inner { display: flex; align-items: center; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark { width: 38px; height: 38px; }
.brand-word { display: flex; flex-direction: column; line-height: 1; letter-spacing: .24em; }
.brand-word strong { font-size: 15px; font-weight: 700; }
.brand-word small { margin-top: 6px; color: #a8a8a8; font-size: 7px; letter-spacing: .3em; }
.desktop-nav { display: flex; align-self: stretch; align-items: center; justify-content: center; gap: clamp(21px, 2vw, 34px); margin: 0 auto; }
.desktop-nav > a, .nav-drop > button { position: relative; display: flex; align-items: center; gap: 5px; height: 100%; padding: 0; color: #eee; background: none; font-size: 14px; font-weight: 520; white-space: nowrap; }
.desktop-nav > a::after, .nav-drop > button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.desktop-nav > a:hover::after, .desktop-nav > a.active::after, .nav-drop:hover > button::after { transform: scaleX(1); transform-origin: left; }
.desktop-nav > a.active { color: var(--orange); }
.nav-drop { height: 100%; }
.nav-drop > button svg { width: 12px; height: 12px; }
.mega-menu { position: absolute; top: calc(100% - 1px); left: 50%; display: grid; min-width: 860px; padding: 28px; color: #eee; background: rgba(13,13,13,.98); border: 1px solid #252525; box-shadow: 0 24px 80px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .25s, visibility .25s, transform .35s var(--ease); }
.nav-drop:hover .mega-menu, .nav-drop:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-menu.products-menu { grid-template-columns: 1fr 1fr .8fr; gap: 26px; }
.mega-menu.solutions-menu { grid-template-columns: 1.4fr .8fr; width: 670px; min-width: 670px; }
.mega-menu > div { display: grid; align-content: start; gap: 3px; }
.menu-label { display: block; margin: 0 0 10px 11px; color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mega-menu > div > a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 6px; transition: background .25s; }
.mega-menu > div > a:hover { background: #1b1b1b; }
.mega-menu > div > a > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--orange); }
.mega-menu a span { display: flex; flex-direction: column; }
.mega-menu a b { font-size: 14px; font-weight: 600; }
.mega-menu a small { margin-top: 2px; color: #888; font-size: 14px; }
.mega-menu aside { display: flex; flex-direction: column; justify-content: end; min-height: 180px; padding: 24px; background: radial-gradient(circle at 90% 10%, rgba(255,90,0,.25), transparent 36%), #151515; border: 1px solid #292929; border-radius: 8px; }
.mega-menu aside span { color: #999; font-size: 14px; }
.mega-menu aside strong { margin: 4px 0 18px; font-family: Manrope; font-size: 19px; line-height: 1.2; }
.mega-menu aside a { display: flex; align-items: center; gap: 8px; color: var(--orange); font-size: 14px; font-weight: 650; }
.header-cta { min-height: 42px; padding-inline: 16px; white-space: nowrap; }
.menu-toggle { display: none; width: 44px; height: 44px; margin-left: auto; padding: 0 10px; background: transparent; }
.menu-toggle span { display: block; width: 23px; height: 1px; margin: 7px auto; background: white; transition: transform .3s; }
.menu-toggle.open span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle.open span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu { position: fixed; z-index: 999; inset: var(--header-h) 0 0; display: none; color: white; background: rgba(8,8,8,.98); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu-inner { display: flex; flex-direction: column; padding: 32px 20px; }
.mobile-menu-inner > a:not(.button) { padding: 12px 0; border-bottom: 1px solid #202020; font-family: Manrope; font-size: 24px; font-weight: 600; }
.mobile-menu .button { margin-top: 24px; }

/* Hero */
.hero { position: relative; display: flex; align-items: center; min-height: 720px; height: clamp(720px, 100svh, 940px); padding-top: var(--header-h); overflow: hidden; background: #060606; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 150px; pointer-events: none; background: linear-gradient(transparent, rgba(0,0,0,.45)); }
.hero-grid, .ecosystem-grid-bg, .case-grid-bg, .cta-grid-bg { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 72% 46%, black, transparent 70%); }
.hero-orb { position: absolute; right: 8%; top: 27%; width: 560px; height: 430px; border-radius: 50%; background: rgba(255,90,0,.12); filter: blur(100px); animation: heroOrbBreath 7s ease-in-out infinite alternate; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%); align-items: center; min-height: 640px; }
.hero-copy { position: relative; z-index: 3; min-width: 0; padding: 44px 0 34px 28px; }
.slides { position: relative; height: 360px; transition: height .55s var(--ease); }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-slide .hero-title { max-width: 680px; margin: 0 0 22px; font-size: clamp(50px, 4vw, 68px); line-height: 1.08; font-weight: 700; }
.hero-slide .hero-title > span { display: block; max-width: 100%; }
.hero-slide > p:last-child { max-width: 540px; margin: 0; color: #c0c0c0; font-size: 16px; line-height: 1.65; }
.hero-actions { display: flex; gap: 14px; margin-top: 12px; }
.hero-controls { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.hero-controls strong { display: flex; align-items: baseline; gap: 5px; color: white; font-size: 22px; }
.hero-controls small { color: #888; font-size: 11px; font-weight: 500; }
.slide-progress { display: flex; align-items: center; gap: 8px; width: 190px; }
.slide-progress > * { position: relative; display: block; width: 42px; height: 2px; overflow: hidden; background: #4b4b4b; }
.slide-progress > *:first-child { width: 54px; }
.slide-progress > *.complete { background: rgba(255,90,0,.55); }
.slide-progress > * b { position: absolute; inset: 0; display: block; background: var(--orange); transform-origin: left; }
.hero-visual { --image-shift-x: 0px; --image-shift-y: 0px; --aura-shift-x: 0px; --aura-shift-y: 0px; position: relative; width: 123%; margin-left: -16%; aspect-ratio: 1672 / 941; perspective: 1100px; transform-style: preserve-3d; }
.hero-art { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; transform: scale(1.018); transition: opacity .75s ease, transform .95s var(--ease), visibility 0s linear .75s; will-change: opacity, transform; }
.hero-art.active { z-index: 2; opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }
.hero-visual picture { position: relative; z-index: 1; display: block; width: 100%; height: 100%; aspect-ratio: 1672 / 941; transform-origin: 55% 50%; backface-visibility: hidden; will-change: transform; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 91%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 91%, transparent 100%); }
.hero-visual img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: contrast(1.03) saturate(1.03); transform: translate3d(var(--image-shift-x), var(--image-shift-y), 0); transition: transform .7s var(--ease); will-change: transform; }
.hero-art::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: radial-gradient(ellipse 82% 88% at 61% 50%, transparent 57%, rgba(6,6,6,.22) 76%, rgba(6,6,6,.78) 100%), linear-gradient(90deg, rgba(6,6,6,.2), transparent 28% 82%, rgba(6,6,6,.18)); }
.visual-aura { position: absolute; inset: 22% 7% 13% 24%; background: rgba(255,90,0,.16); filter: blur(80px); transform: translate3d(var(--aura-shift-x), var(--aura-shift-y), 0); transition: transform .9s var(--ease); animation: heroAura 5.5s ease-in-out infinite alternate; }
.data-tag { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 6px 8px; color: #a4a4a4; background: rgba(8,8,8,.72); border: 1px solid rgba(255,255,255,.12); font-size: 7px; font-weight: 650; letter-spacing: .08em; backdrop-filter: blur(8px); }
.data-tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.tag-one { top: 21%; left: 38%; }.tag-two { right: 17%; bottom: 27%; }.tag-three { bottom: 17%; left: 31%; }
.hero-arrow { position: absolute; z-index: 5; top: 52%; display: grid; place-items: center; width: 44px; height: 44px; color: white; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.44); border-radius: 50%; transition: background .25s, border-color .25s, transform .25s; }
.hero-arrow:hover { background: var(--orange); border-color: var(--orange); transform: scale(1.05); }
.hero-arrow.prev { left: 24px; }.hero-arrow.next { right: 24px; }
.hero-arrow svg { width: 17px; }
.scroll-cue { position: absolute; z-index: 4; bottom: 25px; left: 50%; display: flex; align-items: center; gap: 10px; color: #777; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue svg { color: var(--orange); animation: scrollCue 1.7s ease-in-out infinite; }
@keyframes scrollCue { 50% { transform: translateY(5px); } }
@keyframes heroOrbBreath { to { opacity: .72; transform: translate3d(-24px, 14px, 0) scale(1.08); } }
@keyframes heroAura { to { opacity: .72; filter: blur(98px); } }

/* Introduction */
.intro { padding-block: 106px; }
.intro-grid { display: grid; grid-template-columns: .9fr 1.5fr; gap: 80px; align-items: center; }
.intro .section-intro { padding-right: 36px; }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-card { padding: 32px 26px; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.045); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.stat-card:hover { transform: translateY(-5px); border-color: rgba(255,90,0,.4); box-shadow: 0 14px 36px rgba(0,0,0,.07); }
.stat-card > svg { width: 34px; height: 34px; margin-bottom: 20px; color: var(--orange); stroke-width: 1.4; }
.stat-card strong { display: block; margin-bottom: 13px; font-size: clamp(27px, 2.25vw, 40px); line-height: 1; letter-spacing: -.04em; }
.stat-card strong.stat-label { font-size: clamp(21px, 1.65vw, 28px); letter-spacing: -.025em; }
.stat-card p { margin: 0; color: #3d3d3d; font-size: 15px; line-height: 1.5; }

/* Product rail */
.products { overflow: hidden; background: radial-gradient(circle at 10% 0%, rgba(255,255,255,.98), transparent 34%), linear-gradient(180deg, #f8f7f4 0%, #efeee9 100%); }
.rail-actions { display: flex; align-items: center; gap: 10px; }
.rail-actions > a { display: flex; align-items: center; gap: 7px; margin-right: 8px; color: var(--orange); font-size: 15px; font-weight: 700; }
.rail-actions > a svg { width: 13px; }
.rail-actions button { display: grid; place-items: center; width: 42px; height: 42px; color: #222; background: rgba(255,255,255,.9); border: 1px solid #deddd8; border-radius: 50%; box-shadow: 0 8px 24px rgba(25,20,16,.07); transition: color .25s, background .25s, border-color .25s, transform .3s var(--ease); }
.rail-actions button:hover { color: white; background: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
.rail-actions button svg { width: 16px; }
.product-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(195px, 1fr); gap: 18px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; padding: 8px 4px 32px; }
.product-rail::-webkit-scrollbar { display: none; }
.product-card { position: relative; min-height: 390px; overflow: hidden; scroll-snap-align: start; color: white; background: #17120f; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; box-shadow: 0 18px 48px rgba(24,18,13,.12); isolation: isolate; transition: border-color .35s, transform .45s var(--ease), box-shadow .45s; }
.product-card::before { content: ""; position: absolute; z-index: 4; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--orange), #ffad73); transform: scaleX(.22); transform-origin: left; transition: transform .5s var(--ease); }
.product-card::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7,7,7,.02) 15%, rgba(8,8,8,.18) 43%, rgba(8,8,8,.95) 82%, #080808 100%); }
.product-card:hover { z-index: 2; transform: translateY(-10px); border-color: rgba(255,90,0,.72); box-shadow: 0 28px 64px rgba(34,22,13,.24); }
.product-card:hover::before { transform: scaleX(1); }
.product-art { position: absolute; inset: 0; height: 100%; overflow: hidden; background: #17120f; }
.product-art::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 72% 18%, rgba(255,126,53,.16), transparent 38%); }
.product-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.08) contrast(1.03); transition: transform .8s var(--ease), filter .5s; }
.product-card:hover .product-art img { transform: scale(1.085); filter: saturate(1.22) contrast(1.06); }
.product-art.school img { object-position: center 42%; }.product-art.restaurant img { object-position: center 45%; }.product-art.grocery img { object-position: center 48%; }.product-art.building img { object-position: center 42%; }.product-art.gate img { object-position: center 46%; }.product-art.virtual img { object-position: center 52%; }.product-art.hardware img { object-position: center 50%; }
.product-icon { position: absolute; z-index: 3; top: 22px; left: 20px; display: grid; place-items: center; width: 46px; height: 46px; color: white; background: rgba(8,8,8,.66); border: 1px solid rgba(255,255,255,.3); border-radius: 13px; box-shadow: 0 12px 28px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.product-icon svg { width: 21px; height: 21px; color: #ff7429; }
.product-number { position: absolute; z-index: 3; top: 23px; right: 19px; padding: 7px 10px; color: rgba(255,255,255,.92); background: rgba(8,8,8,.55); border: 1px solid rgba(255,255,255,.2); border-radius: 99px; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .12em; backdrop-filter: blur(10px); }
.product-copy { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; padding: 28px 22px 27px; }
.product-copy > span { display: inline-flex; margin-bottom: 10px; padding: 6px 9px; color: #ff8b4d; background: rgba(255,90,0,.13); border: 1px solid rgba(255,139,77,.28); border-radius: 999px; font-size: 11px; line-height: 1; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
.product-card h3 { margin: 0 0 9px; color: white; font-size: clamp(19px, 1.25vw, 22px); line-height: 1.14; font-weight: 700; letter-spacing: -.015em; }
.product-copy p { display: -webkit-box; min-height: 61px; margin: 0; padding-right: 44px; overflow: hidden; color: rgba(255,255,255,.74); font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.product-card > a { position: absolute; z-index: 4; right: 18px; bottom: 24px; display: grid; place-items: center; width: 42px; height: 42px; color: white; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; backdrop-filter: blur(10px); transition: color .3s, background .3s, border-color .3s, transform .4s var(--ease); }
.product-card:hover > a { color: white; background: var(--orange); border-color: var(--orange); transform: rotate(8deg) scale(1.05); }
.product-card > a svg { width: 17px; }

/* Ecosystem */
.ecosystem { padding: 110px 0 98px; overflow: hidden; background: radial-gradient(circle at 70% 62%, #17100c, #080808 45%); }
.ecosystem-grid-bg { opacity: .18; mask-image: linear-gradient(90deg, transparent 14%, #000 65%, transparent); }
.ecosystem-layout { position: relative; display: grid; grid-template-columns: 28% 72%; gap: 30px; align-items: center; }
.ecosystem .section-intro { padding-right: 25px; }
.ecosystem .section-intro h2 { font-size: clamp(38px, 3vw, 50px); }
.ecosystem .button { margin-top: 15px; }
.ecosystem-map { position: relative; min-height: 370px; }
.connector-svg { position: absolute; inset: 64px 0 0; width: 100%; height: 330px; overflow: visible; }
.connector { fill: none; stroke: var(--orange); stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.connector.base { opacity: .28; filter: drop-shadow(0 0 3px #ff5a00); }
.connector.pulse { opacity: .8; stroke-dasharray: 3 20; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px #ff5a00); animation: pulsePath 3s linear infinite; }
.connector.p2 { animation-delay: -.4s; }.connector.p3 { animation-delay: -.8s; }.connector.p4 { animation-delay: -1.2s; }.connector.p5 { animation-delay: -1.6s; }.connector.p6 { animation-delay: -2s; }
@keyframes pulsePath { to { stroke-dashoffset: -90; } }
.eco-nodes { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(7, 1fr); }
.eco-nodes article { position: relative; min-height: 135px; padding: 20px 10px; text-align: center; border-right: 1px solid #343434; transition: background .3s, transform .3s; }
.eco-nodes article:last-child { border: 0; }
.eco-nodes article:hover { background: rgba(255,90,0,.06); transform: translateY(-5px); }
.eco-nodes article::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); transform: translateX(-50%); }
.eco-nodes svg { width: 34px; height: 34px; margin-bottom: 15px; color: var(--orange); stroke-width: 1.4; }
.eco-nodes h3 { margin: 0; font-size: 13px; font-weight: 600; }
.data-layer { position: absolute; z-index: 3; bottom: 0; left: 50%; display: flex; align-items: center; gap: 11px; min-width: 255px; padding: 13px 20px; background: #0b0b0b; border: 1px solid #303030; border-radius: 7px; font-size: 14px; font-weight: 600; transform: translateX(-50%); }
.data-layer svg { color: var(--orange); }
.data-layer b { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; box-shadow: 0 0 45px rgba(255,90,0,.19); }

/* Industries */
.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.industry-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: white; border: 1px solid #e2e1dd; border-radius: 18px; box-shadow: 0 12px 34px rgba(24,18,13,.055); isolation: isolate; transition: border-color .35s, transform .45s var(--ease), box-shadow .45s; }
.industry-card::before { content: ""; position: absolute; z-index: 3; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--orange), #ff9a62); transform: scaleX(.18); transform-origin: left; transition: transform .45s var(--ease); }
.industry-card > .card-link { position: absolute; z-index: 4; inset: 0; }
.industry-card:hover { transform: translateY(-7px); border-color: rgba(255,90,0,.5); box-shadow: 0 24px 58px rgba(28,18,10,.12); }.industry-card:hover::before { transform: scaleX(1); }
.case-image { background-image: url("assets/images/case-studies-montage.webp"); background-repeat: no-repeat; background-size: 200% 200%; }
.industry-image { position: relative; height: 215px; overflow: hidden; background: #17120f; }
.industry-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 46%, rgba(8,8,8,.52)); }
.industry-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) contrast(1.02); transition: transform .75s var(--ease), filter .45s; }
.industry-card:hover .industry-image img { transform: scale(1.055); filter: saturate(1.12) contrast(1.04); }
.scene-1 { background-position: 0 0; }.scene-2 { background-position: 100% 0; }.scene-3 { background-position: 0 100%; }.scene-4 { background-position: 100% 100%; }
.industry-card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }
.industry-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.industry-icon { display: grid; place-items: center; width: 45px; height: 45px; color: var(--orange); background: #fff3ec; border: 1px solid #ffd8c2; border-radius: 13px; transition: color .3s, background .3s, transform .4s var(--ease); }.industry-icon svg { width: 21px; height: 21px; }
.industry-index { color: #aaa; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .13em; }
.industry-card:hover .industry-icon { color: white; background: var(--orange); transform: rotate(-5deg) scale(1.05); }
.industry-card h3 { margin: 0 0 9px; font-family: Manrope, Inter, sans-serif; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.industry-card p { margin: 0; color: var(--gray); font-size: 15px; line-height: 1.65; }
.industry-card-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--orange); font-size: 14px; font-weight: 700; }.industry-card-action svg { width: 14px; transition: transform .3s var(--ease); }.industry-card:hover .industry-card-action svg { transform: translateX(4px); }
.industry-card.compact { display: none; padding: 20px; }
.industry-card.compact > svg { color: var(--orange); }

/* Featured */
.featured { padding: 120px 0; overflow: hidden; }
.featured-layout { display: grid; grid-template-columns: 34% 66%; align-items: center; gap: 34px; }
.featured-copy { position: relative; z-index: 2; padding-left: 12px; }
.featured-copy h2 { font-size: clamp(38px, 3vw, 50px); }
.featured-copy > p:not(.eyebrow) { max-width: 470px; color: var(--gray); }
.feature-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 28px 0 30px; }
.feature-tabs button { display: flex; align-items: center; gap: 9px; padding: 9px 2px; color: #4b4b4b; text-align: left; background: transparent; font-size: 15px; font-weight: 600; transition: color .25s; }
.feature-tabs button span { display: grid; place-items: center; width: 23px; height: 23px; color: var(--orange); border: 1px solid #ffd1b8; border-radius: 50%; font-size: 8px; }
.feature-tabs button.active, .feature-tabs button:hover { color: var(--orange); }
.featured-visual { position: relative; min-height: 570px; margin-right: -90px; }
.featured-visual::before { content: ""; position: absolute; z-index: 0; inset: 11% 8% 8% 11%; border-radius: 50%; background: white; filter: blur(2px); }
.feature-media { position: relative; z-index: 1; width: 100%; aspect-ratio: 1672 / 941; margin-top: 38px; }
.feature-image { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transform: translate3d(16px,0,0) scale(1.015); transition: opacity .55s ease, transform .75s var(--ease), visibility 0s linear .55s; will-change: opacity, transform; }
.feature-image.active { opacity: 1; visibility: visible; transform: translate3d(0,0,0) scale(1); transition-delay: 0s; }
.featured-visual img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.feature-badge { position: absolute; z-index: 3; top: 35px; left: 14%; display: flex; align-items: center; gap: 10px; padding: 10px 13px; color: white; background: #111; border: 1px solid #313131; border-radius: 7px; box-shadow: 0 14px 35px rgba(0,0,0,.16); }
.feature-badge > svg { color: var(--orange); }
.feature-badge span { display: flex; flex-direction: column; }.feature-badge small { color: #888; font-size: 10px; letter-spacing: .08em; }.feature-badge strong { font-size: 13px; }
.feature-metric { position: absolute; z-index: 3; min-width: 130px; padding: 13px 14px; background: rgba(12,12,12,.94); border: 1px solid #313131; border-radius: 7px; box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.feature-metric small, .feature-metric strong, .feature-metric span { display: block; }.feature-metric small { color: #8c8c8c; font-size: 10px; }.feature-metric strong { margin: 4px 0 2px; color: white; font-size: 20px; }.feature-metric span { color: #39bb76; font-size: 10px; }
.metric-a { right: 11%; bottom: 14%; }.metric-b { left: 29%; bottom: 4%; }

/* Benefits */
.benefits { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.benefit-strip { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); }
.benefit-strip article { position: relative; display: flex; gap: 13px; min-height: 100px; padding: 27px 20px; border-right: 1px solid var(--line); }
.benefit-strip article > .card-link { position: absolute; z-index: 3; inset: 0; }
.benefit-strip article:first-child { padding-left: 0; }.benefit-strip article:last-child { border: 0; }
.benefit-strip svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--orange); }
.benefit-strip h3 { margin: 0 0 5px; font-size: 16px; }.benefit-strip p { margin: 0; color: var(--gray); font-size: 15px; line-height: 1.5; }

/* Process */
.timeline { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 55px; }
.timeline-track { position: absolute; top: 20px; left: 4%; right: 4%; height: 1px; background: #d4d4d0; }
.timeline-track span { display: block; width: 100%; height: 2px; margin-top: -1px; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.timeline article { position: relative; z-index: 1; padding-right: 24px; }
.timeline article > b { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 22px; color: var(--orange); background: var(--soft); border: 1px solid var(--orange); border-radius: 50%; font-size: 12px; transition: color .3s, background .3s, box-shadow .3s; }
.timeline article.active > b { color: white; background: var(--orange); box-shadow: 0 0 0 6px rgba(255,90,0,.09); }
.timeline article > svg { width: 24px; height: 24px; margin-bottom: 11px; color: #555; }
.timeline h3 { margin: 0 0 7px; font-size: 15px; }.timeline p { max-width: 150px; margin: 0; color: var(--gray); font-size: 15px; line-height: 1.5; }

/* Cases */
.case-studies { overflow: hidden; background: #080808; }
.case-grid-bg { opacity: .16; mask-image: linear-gradient(180deg, black, transparent 75%); }
.case-studies .section-head { position: relative; }.case-studies .section-head h2 { color: white; }
.rail-actions.dark a { color: var(--orange); }
.case-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.case-card { position: relative; overflow: hidden; background: #101010; border: 1px solid #292929; border-radius: 9px; transition: transform .35s var(--ease), border-color .35s; }
.case-card:hover { transform: translateY(-5px); border-color: rgba(255,90,0,.62); }
.case-image { position: relative; height: 230px; transition: transform .55s var(--ease); }
.case-card:hover .case-image { transform: scale(1.04); }
.case-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(8,8,8,.85)); }
.case-image span { position: absolute; z-index: 2; bottom: 12px; left: 13px; padding: 5px 8px; color: white; background: var(--orange); border-radius: 3px; font-size: 9px; font-weight: 650; }
.case-body { position: relative; padding: 20px; }
.case-body::before { content: ""; position: absolute; top: 0; left: 20px; width: 46px; height: 2px; background: var(--orange); transition: width .4s var(--ease); }.case-card:hover .case-body::before { width: calc(100% - 40px); }
.case-body > small { color: var(--orange); font-size: 10px; letter-spacing: .07em; }
.case-body h3 { margin: 6px 0 8px; color: white; font-size: 20px; }
.case-body > p { min-height: 48px; margin: 0; color: #aaa; font-size: 15px; }
.case-result { display: flex; align-items: center; gap: 9px; margin: 16px 0; padding-top: 14px; border-top: 1px solid #282828; }.case-result strong { color: white; font-size: 26px; }.case-result span { color: #888; font-size: 12px; }
.case-body > a { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-size: 14px; font-weight: 650; }.case-body > a svg { width: 13px; transition: transform .3s; }.case-card:hover .case-body > a svg { transform: translateX(4px); }

/* Innovation */
.innovation { padding: 120px 0; overflow: hidden; border-top: 1px solid #1e1e1e; background: radial-gradient(circle at 72% 50%, #16100d, #080808 49%); }
.innovation-layout { display: grid; grid-template-columns: 36% 64%; align-items: center; gap: 60px; }
.innovation-legend { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 32px; color: #777; font-size: 14px; }.innovation-legend span { display: flex; align-items: center; gap: 6px; }.innovation-legend i { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); }.innovation-legend span:nth-child(2) i { background: #ccc; box-shadow: none; }.innovation-legend span:nth-child(3) i { background: #5f5f5f; box-shadow: none; }
.constellation { position: relative; min-height: 550px; }
.constellation > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.network-lines path { fill: none; stroke: rgba(255,90,0,.36); stroke-width: 1; stroke-dasharray: 4 10; animation: pulsePath 9s linear infinite; }
.core-node { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 142px; height: 142px; border: 1px solid rgba(255,90,0,.66); border-radius: 50%; background: #0b0b0b; box-shadow: 0 0 60px rgba(255,90,0,.18), inset 0 0 30px rgba(255,90,0,.08); transform: translate(-50%, -50%); }
.core-node::before, .core-node::after { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(255,90,0,.17); border-radius: 50%; animation: corePulse 2.8s ease-out infinite; }.core-node::after { inset: -30px; animation-delay: -1.4s; }
@keyframes corePulse { 50% { opacity: .2; transform: scale(1.07); } }
.core-node svg { width: 40px; height: 40px; margin-bottom: 10px; color: var(--orange); }.core-node strong { font-size: 16px; letter-spacing: .18em; }.core-node span { margin-top: 3px; color: #888; font-size: 10px; letter-spacing: .17em; }
.constellation > a { position: absolute; z-index: 2; top: var(--y); left: var(--x); display: flex; flex-direction: column; align-items: center; gap: 9px; color: #d0d0d0; transform: translate(-50%, -50%); transition: color .3s, transform .3s var(--ease); }.constellation > a:hover { color: var(--orange); transform: translate(-50%, -50%) scale(1.08); }.constellation > a svg { width: 46px; height: 46px; padding: 11px; color: var(--orange); background: #101010; border: 1px solid #3a3a3a; border-radius: 50%; box-shadow: 0 0 20px rgba(255,90,0,.1); }.constellation > a span { font-size: 14px; line-height: 1.25; font-weight: 600; white-space: nowrap; }

/* Dashboard */
.dashboard { padding: 124px 0; overflow: hidden; }
.dashboard-layout { display: grid; grid-template-columns: 30% 70%; align-items: center; gap: 70px; }
.dashboard-copy > p:not(.eyebrow) { color: var(--gray); }
.dashboard-points { display: flex; flex-direction: column; gap: 10px; margin: 26px 0 4px; }.dashboard-points span { display: flex; align-items: center; gap: 8px; color: #373737; font-size: 14px; font-weight: 550; }.dashboard-points svg { width: 16px; color: var(--orange); }
.dashboard-device { position: relative; overflow: hidden; min-height: 570px; color: white; background: #0c0c0c; border: 7px solid #1d1d1d; border-radius: 14px; box-shadow: 0 28px 65px rgba(0,0,0,.2), 0 0 0 1px #000; transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; color: #5f5f5f; background: #161616; border-bottom: 1px solid #272727; font-size: 7px; }.browser-bar > i { width: 6px; height: 6px; border-radius: 50%; background: #393939; }.browser-bar span { margin-left: 12px; letter-spacing: .09em; }.browser-bar b { display: flex; align-items: center; gap: 4px; margin-left: auto; color: #71c697; font-size: 7px; }.browser-bar b::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #3ec879; box-shadow: 0 0 6px #3ec879; }
.dash-ui { display: grid; grid-template-columns: 52px 1fr; min-height: 525px; }.dash-ui > aside { display: flex; flex-direction: column; align-items: center; gap: 23px; padding: 14px 0; background: #111; border-right: 1px solid #272727; }.dash-ui > aside .mini-logo { display: grid; place-items: center; width: 25px; height: 25px; margin-bottom: 8px; color: white; background: var(--orange); border-radius: 5px; font-size: 10px; font-weight: 700; }.dash-ui > aside svg { width: 15px; height: 15px; color: #686868; }.dash-ui > aside svg:first-of-type { color: var(--orange); }
.dash-content { padding: 25px; }.dash-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }.dash-top > div { display: flex; flex-direction: column; }.dash-top small { color: #777; font-size: 8px; }.dash-top strong { margin-top: 2px; font-size: 14px; }.dash-top > span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; color: #8e8e8e; background: #151515; border: 1px solid #292929; border-radius: 4px; font-size: 7px; }.dash-top > span i { width: 5px; height: 5px; border-radius: 50%; background: #3ec879; box-shadow: 0 0 5px #3ec879; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.dash-kpis article { padding: 13px; background: #151515; border: 1px solid #282828; border-radius: 5px; }.dash-kpis small, .dash-kpis strong, .dash-kpis em { display: block; }.dash-kpis small { color: #757575; font-size: 7px; }.dash-kpis strong { margin: 7px 0 2px; font-size: 15px; }.dash-kpis em { color: #4fc384; font-size: 7px; font-style: normal; }.dash-kpis article:last-child em { color: var(--orange); }
.dash-lower { display: grid; grid-template-columns: 1.45fr .8fr; gap: 10px; margin-top: 10px; }.dash-lower > article { min-height: 302px; padding: 15px; background: #141414; border: 1px solid #282828; border-radius: 5px; }.dash-lower article > div:first-child { display: flex; align-items: center; justify-content: space-between; }.dash-lower article > div span { display: flex; flex-direction: column; }.dash-lower article small { color: #777; font-size: 7px; }.dash-lower article b { margin-top: 2px; font-size: 10px; }.dash-lower article > div svg { width: 13px; color: #6d6d6d; }
.chart-panel > svg { width: 100%; height: 210px; margin-top: 15px; overflow: visible; }.chart-area { fill: url(#area); }.chart-line { fill: none; stroke: var(--orange); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(255,90,0,.55)); }.axis { display: flex; justify-content: space-between; color: #555; font-size: 6px; }
.activity-panel ul { margin: 16px 0 0; padding: 0; list-style: none; }.activity-panel li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid #272727; }.activity-panel li:last-child { border: 0; }.activity-panel li > svg { width: 27px; height: 27px; padding: 7px; color: var(--orange); background: #1d1815; border-radius: 5px; }.activity-panel li span { display: flex; flex-direction: column; }.activity-panel li b { font-size: 8px; }.activity-panel li small { color: #666; font-size: 6px; }.activity-panel li em { color: #9a9a9a; font-size: 7px; font-style: normal; }

/* Achievement + testimonials */
.achievement-row { display: grid; grid-template-columns: repeat(6, 1fr); }
.achievement-row article { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center; padding: 8px 26px; border-right: 1px solid #dededb; }.achievement-row article:last-child { border: 0; }.achievement-row svg { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--orange); }.achievement-row strong { font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }.achievement-row p { margin: 2px 0 0; color: var(--gray); font-size: 14px; }
.testimonial-index { margin-right: 8px; color: #8e8e8e; font-size: 10px; font-weight: 600; }
.testimonial-window { overflow: hidden; padding: 3px; }
.testimonial-track { display: flex; gap: 18px; transition: transform .75s var(--ease); }
.testimonial-card { flex: 0 0 calc((100% - 36px) / 3); display: grid; grid-template-columns: 106px 1fr; min-height: 240px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 30px rgba(0,0,0,.045); }
.portrait { position: relative; min-height: 100%; overflow: hidden; background-image: url("assets/images/testimonial-portraits.webp"); background-repeat: no-repeat; background-size: auto 200%; background-color: #c9c4bf; }
.portrait-1 { background-position: 0 0; }.portrait-2 { background-position: 100% 0; }.portrait-3 { background-position: 0 100%; }.portrait-4 { background-position: 100% 100%; }.portrait span { display: none; }
.testimonial-card > div:last-child { padding: 24px 22px; }.testimonial-card > div:last-child > svg { width: 24px; color: var(--orange); fill: #fff4ee; }.testimonial-card blockquote { min-height: 88px; margin: 8px 0 15px; color: #343434; font-size: 14px; line-height: 1.6; }.testimonial-card h3 { margin: 0 0 3px; font-size: 14px; }.testimonial-card p { margin: 0; color: var(--gray); font-size: 14px; }.project-tag { display: inline-block; margin-top: 12px; padding: 4px 7px; color: var(--orange); background: #fff5ef; border-radius: 3px; font-size: 7px; font-weight: 650; }

/* CTA / footer */
.final-cta { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; background: #080808; }
#cta-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .65; }
.cta-grid-bg { opacity: .22; mask-image: linear-gradient(90deg, black, transparent 70%); transform: perspective(600px) rotateX(64deg) scale(1.35) translateY(25%); }
.cta-layout { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: end; }
.cta-copy h2 { margin: 0; font-size: clamp(54px, 6vw, 88px); line-height: 1.05; }.cta-content { padding-bottom: 9px; }.cta-content > p { max-width: 560px; margin-bottom: 30px; color: #aaa; font-size: 16px; }.cta-content > div { display: flex; gap: 12px; }
.site-footer { color: #c8c8c8; background: #070707; border-top: 1px solid #202020; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .9fr .9fr .7fr 1.25fr; gap: 55px; padding-top: 72px; padding-bottom: 58px; }
.footer-brand > p { max-width: 260px; margin: 22px 0; color: #777; font-size: 14px; }.socials { display: flex; gap: 8px; }.socials a { display: grid; place-items: center; width: 30px; height: 30px; color: #aaa; border: 1px solid #2e2e2e; border-radius: 50%; transition: color .25s, border-color .25s; }.socials a:hover { color: var(--orange); border-color: var(--orange); }.socials svg { width: 13px; }
.footer-grid h3 { margin: 0 0 18px; color: white; font-size: 15px; }.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; }.footer-grid > div:not(.footer-brand) > a, .footer-grid > div:not(.footer-brand) > span { margin: 4px 0; color: #888; font-size: 14px; transition: color .2s; }.footer-grid > div:not(.footer-brand) > a:hover { color: var(--orange); }
.footer-contact > p { margin: -4px 0 14px; color: #777; font-size: 14px; }.newsletter { display: flex; width: 100%; height: 42px; margin-bottom: 16px; border: 1px solid #3a2a20; border-radius: 6px; overflow: hidden; transition: border-color .25s; }.newsletter:focus-within { border-color: var(--orange); }.newsletter input { width: 100%; padding: 0 12px; color: white; background: #0d0d0d; border: 0; outline: 0; font-size: 14px; }.newsletter button { flex: 0 0 42px; display: grid; place-items: center; color: white; background: var(--orange); }.newsletter button svg { width: 14px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; min-height: 62px; color: #606060; border-top: 1px solid #1e1e1e; font-size: 14px; }.footer-bottom > div { display: flex; align-items: center; gap: 22px; }.footer-bottom a:hover { color: var(--orange); }.back-to-top { display: grid; place-items: center; width: 31px; height: 31px; color: white; background: #151515; border: 1px solid #393939; border-radius: 50%; transition: background .25s; }.back-to-top:hover { background: var(--orange); }.back-to-top svg { width: 13px; }
.toast { position: fixed; z-index: 2000; right: 24px; bottom: 24px; padding: 13px 17px; color: white; background: #151515; border: 1px solid #333; border-left: 3px solid var(--orange); border-radius: 5px; box-shadow: 0 16px 40px rgba(0,0,0,.24); font-size: 14px; opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .3s, transform .3s var(--ease); }.toast.show { opacity: 1; transform: translateY(0); }

/* Desktop adjustments */
@media (max-width: 1360px) {
  .shell { width: min(var(--shell), calc(100% - 72px)); }
  .desktop-nav { gap: 20px; }
  .desktop-nav > a, .nav-drop > button { font-size: 14px; }
  .hero { min-height: 720px; }
  .hero-copy { padding-left: 20px; }
  .slides { height: 350px; }
  .stat-card { padding-inline: 25px; }
  .industry-grid { gap: 18px; }
  .dashboard-layout { gap: 42px; }
  .footer-grid { gap: 35px; }
}

@media (max-width: 1180px) {
  .desktop-nav { gap: 14px; }
  .desktop-nav > a, .nav-drop > button { font-size: 14px; }
  .header-cta { padding-inline: 12px; }
  .hero { min-height: 720px; height: clamp(720px, 100svh, 860px); }
  .hero-inner { grid-template-columns: 46% 54%; }
  .hero-slide .hero-title { font-size: clamp(46px, 4.2vw, 60px); }
  .hero-visual { width: 128%; margin-left: -17%; }
  .intro-grid { grid-template-columns: .75fr 1.5fr; gap: 38px; }
  .stat-cards { gap: 10px; }.stat-card { padding: 26px 20px; }
  .ecosystem-layout { grid-template-columns: 30% 70%; }.eco-nodes h3 { font-size: 12px; }
  .industry-grid { grid-template-columns: repeat(3, 1fr); }.industry-image { height: 185px; }
  .featured-layout { grid-template-columns: 39% 61%; }.featured-visual { margin-right: -40px; }
  .benefit-strip { grid-template-columns: repeat(3, 1fr); }.benefit-strip article:nth-child(3) { border-right: 0; }.benefit-strip article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }.benefit-strip article:first-child { padding-left: 20px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }.case-image { height: 290px; }
  .dashboard-layout { grid-template-columns: 1fr; }.dashboard-copy { max-width: 590px; }.dashboard-device { transform: none; }
  .achievement-row { grid-template-columns: repeat(3, 1fr); gap: 22px 0; }.achievement-row article:nth-child(3) { border: 0; }
  .testimonial-card { flex-basis: calc((100% - 18px) / 2); }
  .footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); }.footer-contact { grid-column: 2 / 5; }
}

/* Tablet */
@media (max-width: 980px) {
  :root { --header-h: 68px; }
  .shell { width: calc(100% - 48px); }
  .section { padding: 78px 0; }
  .desktop-nav, .header-cta { display: none; }.menu-toggle, .mobile-menu { display: block; }
  .menu-toggle { position: relative; z-index: 5; flex: 0 0 44px; margin-left: auto; }
  .hero { min-height: 0; height: auto; padding: calc(var(--header-h) + 46px) 0 82px; }
  .hero-inner { display: flex; flex-direction: column; align-items: stretch; }
  .hero-copy { order: 1; max-width: 670px; padding: 0; }
  .slides { display: grid; height: auto; }
  .hero-slide { position: relative; inset: auto; grid-area: 1 / 1; align-self: start; }
  .hero-slide .hero-title { font-size: clamp(46px, 6.5vw, 54px); }
  .hero-inner::before { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 calc(50% - 50vw); width: 100vw; pointer-events: none; background: linear-gradient(180deg, rgba(6,6,6,.24), rgba(6,6,6,.38)); }
  .hero-visual { position: absolute; z-index: 1; inset: 0 auto 0 calc(50% - 50vw); order: 2; width: 100vw; height: 100%; margin: 0; aspect-ratio: auto; opacity: .5; transform: none !important; }
  .hero-art, .hero-visual picture { width: 100%; height: 100%; aspect-ratio: auto; }
  .hero-visual picture { -webkit-mask-image: none; mask-image: none; }
  .hero-visual img { width: 100%; height: 100%; object-fit: cover; }
  .hero-art[data-visual] img { object-position: 50% 50%; }
  .hero-art::after { background: linear-gradient(180deg, rgba(6,6,6,.08), transparent 58%, rgba(6,6,6,.3)); }
  .hero-visual .data-tag { display: none; }
  .hero-arrow { top: auto; bottom: 32px; }.scroll-cue { display: none; }
  .intro-grid { grid-template-columns: 1fr; }.intro .section-intro { max-width: 620px; padding: 0; }.stat-cards { grid-template-columns: repeat(2, 1fr); }
  .product-rail { grid-auto-columns: minmax(160px, 24%); }
  .ecosystem-layout { grid-template-columns: 1fr; }.ecosystem .section-intro { max-width: 540px; }.ecosystem-map { margin-top: 30px; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-layout { grid-template-columns: 1fr; }.featured-copy { max-width: 600px; }.featured-visual { min-height: 500px; margin: 30px -40px 0; }
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 36px 0; }.timeline-track { display: none; }
  .innovation-layout { grid-template-columns: 1fr; }.innovation .section-intro { max-width: 570px; }.constellation { max-width: 720px; width: 100%; margin: 0 auto; }
  .cta-layout { grid-template-columns: 1fr; gap: 42px; }.cta-content { max-width: 620px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }.footer-grid > div:nth-child(4) { grid-column: 2; }.footer-contact { grid-column: 3; }
}

/* Mobile */
@media (max-width: 700px) {
  body { font-size: 15px; }
  .shell { width: calc(100% - 38px); }
  .section { padding: 66px 0; }.compact-section { padding: 48px 0; }
  h2 { font-size: 38px; }.section-head { flex-wrap: wrap; align-items: flex-start; gap: 14px 40px; margin-bottom: 30px; }.section-head h2 { font-size: 34px; }.section-head .rail-actions > a { display: none; }.testimonial-index { white-space: nowrap; }
  .cursor-dot { display: none; }
  .brand-mark { width: 34px; height: 34px; }.brand-word strong { font-size: 13px; }
  .hero { min-height: 700px; padding: calc(var(--header-h) + 36px) 0 66px; }
  .hero-inner { min-height: calc(700px - var(--header-h) - 102px); }
  .hero-copy { display: flex; flex-direction: column; width: 100%; min-width: 0; }.slides, .hero-slide { width: 100%; min-width: 0; }.hero-slide .hero-title { width: 100%; margin-bottom: 18px; font-size: clamp(36px, 9.7vw, 44px); line-height: 1.08; }.hero-slide .hero-title > span { max-width: 100%; white-space: normal; overflow-wrap: normal; }.hero-slide > p:last-child { max-width: 100%; font-size: 15px; line-height: 1.58; }.hero .eyebrow { max-width: 310px; margin-bottom: 15px; font-size: 11px; }
  .hero-actions { margin-top: 22px; }.hero-actions .button { min-height: 48px; padding-inline: 15px; font-size: 15px; }
  .hero-controls { margin-top: 25px; }.hero-visual { top: -36px; bottom: -66px; left: calc(50% - 50vw); width: 100vw; height: auto; margin: 0; opacity: .42; }.hero-inner::before { top: -36px; bottom: -66px; background: linear-gradient(180deg, rgba(6,6,6,.32) 0%, rgba(6,6,6,.42) 54%, rgba(6,6,6,.58) 100%); }.data-tag { display: none; }
  .hero-arrow { bottom: 22px; width: 38px; height: 38px; }.hero-arrow.prev { left: 19px; }.hero-arrow.next { right: 19px; }
  .intro { padding-block: 70px; }.intro-grid { gap: 42px; }.stat-cards { grid-template-columns: 1fr 1fr; gap: 9px; }.stat-card { padding: 22px 18px; }.stat-card > svg { width: 27px; height: 27px; margin-bottom: 18px; }.stat-card strong { font-size: 28px; }.stat-card p { font-size: 15px; }
  .product-rail { margin-right: -19px; grid-auto-columns: 82%; gap: 14px; padding-right: 19px; }.product-card { min-height: 390px; }.product-art { height: 100%; }.product-copy { padding: 26px 22px; }.product-card h3 { font-size: 22px; }.product-copy p { font-size: 15px; }
  .ecosystem { padding-block: 70px; }.ecosystem-layout { gap: 0; }.ecosystem-map { min-height: auto; overflow-x: auto; padding: 10px 0 88px; scrollbar-width: none; }.connector-svg { display: none; }.eco-nodes { display: grid; grid-template-columns: repeat(7, 132px); gap: 8px; }.eco-nodes article { min-height: 130px; border: 1px solid #292929; border-radius: 6px; }.eco-nodes article::after { display: none; }.data-layer { position: absolute; bottom: 15px; }.eco-nodes h3 { font-size: 13px; }
  .industry-grid { display: flex; margin-right: -19px; padding-right: 19px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.industry-card { flex: 0 0 84%; scroll-snap-align: start; }.industry-image { height: 190px; }.industry-card-body { padding: 20px 21px 22px; }.industry-card h3 { font-size: 21px; }.industry-card.compact { display: none; }
  .featured { padding-bottom: 35px; }.feature-tabs { grid-template-columns: 1fr; }.feature-tabs button { font-size: 15px; }.featured-visual { min-height: 360px; margin: 28px -72px 0; }.feature-badge { top: 4px; left: 16%; }.feature-metric { transform: scale(.9); }.metric-a { right: 5%; bottom: 11%; }.metric-b { left: 19%; bottom: 0; }
  .benefit-strip { grid-template-columns: 1fr; }.benefit-strip article, .benefit-strip article:nth-child(3) { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }.benefit-strip article:last-child { border-bottom: 0; }.benefit-strip p { font-size: 15px; }
  .timeline { grid-template-columns: 1fr; gap: 0; margin-top: 35px; }.timeline article { display: grid; grid-template-columns: 47px 27px 1fr; align-items: start; min-height: 104px; padding: 0; }.timeline article::after { content: ""; position: absolute; top: 40px; bottom: 0; left: 19px; width: 1px; background: #d8d8d5; }.timeline article:last-child::after { display: none; }.timeline article > b { grid-row: 1 / 3; width: 39px; height: 39px; margin: 0; }.timeline article > svg { width: 19px; height: 19px; margin: 9px 10px 0 0; }.timeline h3 { margin: 4px 0 4px; font-size: 15px; }.timeline p { grid-column: 3; max-width: 250px; font-size: 15px; }
  .case-grid { display: flex; margin-right: -19px; padding-right: 19px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.case-card { flex: 0 0 86%; scroll-snap-align: start; }.case-image { height: 220px; }
  .innovation { padding: 78px 0 52px; }.innovation-layout { gap: 25px; }.constellation { min-height: 440px; transform: scale(1); }.core-node { width: 118px; height: 118px; }.core-node svg { width: 30px; height: 30px; }.core-node strong { font-size: 13px; }.core-node span { font-size: 8px; }.constellation > a svg { width: 42px; height: 42px; }.constellation > a span { max-width: 90px; font-size: 12px; white-space: normal; }.network-lines { transform: scale(.95); transform-origin: center; }
  .dashboard { padding-block: 72px; }.dashboard-layout { gap: 36px; }.dashboard-copy > p:not(.eyebrow) { max-width: 560px; }.dashboard-points { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  .dashboard-device { width: 100%; min-height: 0; margin: 0; border-width: 4px; border-radius: 15px; box-shadow: 0 20px 46px rgba(0,0,0,.18), 0 0 0 1px #000; transform: none; }
  .browser-bar { height: 34px; padding-inline: 10px; font-size: 7px; }.browser-bar span { margin-left: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.browser-bar b { flex: 0 0 auto; }
  .dash-ui { display: block; min-height: 0; }.dash-ui > aside { display: none; }.dash-content { padding: 14px; }
  .dash-top { gap: 12px; margin-bottom: 14px; }.dash-top small { font-size: 8px; }.dash-top strong { font-size: 14px; }.dash-top > span { flex: 0 0 auto; padding: 6px 7px; font-size: 7px; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.dash-kpis article { min-width: 0; padding: 12px; border-radius: 8px; }.dash-kpis small { font-size: 8px; }.dash-kpis strong { margin: 5px 0 1px; font-size: 14px; }.dash-kpis em { font-size: 8px; }
  .dash-lower { grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }.dash-lower > article { min-height: 0; padding: 13px; border-radius: 8px; }.dash-lower article small { font-size: 8px; }.dash-lower article b { font-size: 11px; }.chart-panel > svg { height: 150px; margin-top: 10px; }.axis { font-size: 7px; }
  .activity-panel ul { margin-top: 10px; }.activity-panel li { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 10px 0; }.activity-panel li > svg { width: 29px; height: 29px; }.activity-panel li b { font-size: 9px; }.activity-panel li small { font-size: 7px; }.activity-panel li em { font-size: 8px; }
  .achievement-row { grid-template-columns: 1fr 1fr; gap: 0; }.achievement-row article { min-height: 92px; padding: 14px 10px; border-bottom: 1px solid #dededb; }.achievement-row article:nth-child(2n) { border-right: 0; }.achievement-row article:nth-last-child(-n+2) { border-bottom: 0; }.achievement-row svg { width: 25px; }.achievement-row strong { font-size: 22px; }
  .testimonial-card { flex-basis: 92%; grid-template-columns: 88px 1fr; }.testimonial-card blockquote { font-size: 14px; }
  .final-cta { min-height: 560px; }.cta-copy h2 { font-size: 54px; }.cta-content > p { font-size: 16px; }.cta-content > div { flex-direction: column; align-items: stretch; }.cta-content .button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 42px 24px; padding-top: 55px; }.footer-brand { grid-column: 1 / -1; }.footer-grid > div:nth-child(4) { grid-column: 1; }.footer-contact { grid-column: 1 / -1; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 14px; padding-block: 20px; }.footer-bottom > div { width: 100%; justify-content: space-between; gap: 10px; }
}

/* Tablet hero: integrate the artwork beside the message instead of stacking it below. */
@media (min-width: 701px) and (max-width: 980px) {
  .hero { min-height: 740px; height: clamp(740px, 80svh, 780px); padding: var(--header-h) 0 0; }
  .hero-inner { position: relative; display: flex; min-height: calc(740px - var(--header-h)); height: 100%; flex-direction: row; align-items: center; overflow: visible; }
  .hero-copy { z-index: 3; order: 1; width: 61%; max-width: 560px; padding: 38px 0 62px; }
  .hero-slide .hero-title { font-size: clamp(42px, 5.5vw, 50px); line-height: 1.07; }
  .hero-slide > p:last-child { max-width: 500px; }
  .hero-arrow { top: auto; bottom: 28px; }
}

@media (max-width: 420px) {
  .hero-slide .hero-title { font-size: clamp(34px, 9.7vw, 39px); }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }.hero-actions .button { width: 100%; padding-inline: 14px; }
  .featured-visual { min-height: 305px; margin-inline: -56px; }
  .dash-top > span { max-width: 112px; line-height: 1.2; }.browser-bar span { max-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cursor-dot { display: none; }
}