:root {
  --navy: #0a1020;
  --navy-2: #111a2e;
  --navy-3: #1d2940;
  --ink: #111827;
  --muted: #667085;
  --soft: #f3f6fb;
  --line: rgba(17, 24, 39, .1);
  --white: #ffffff;
  --blue: #2388ff;
  --cyan: #04d5e6;
  --green: #00ed87;
  --violet: #8a65ff;
  --orange: #ff8b4d;
  --radius: 28px;
  --shadow: 0 30px 80px rgba(4, 11, 28, .16);
  --shell: min(1180px, calc(100vw - 44px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; display: block; }
.shell { width: var(--shell); margin-inline: auto; }
.section-dark { background: var(--navy); color: #fff; }
.section-light { background: #fff; }
.section-soft { background: var(--soft); }

.page-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 999; pointer-events: none; }
.page-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan), var(--blue)); box-shadow: 0 0 18px rgba(0, 237, 135, .7); }
.cursor-glow { position: fixed; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(35, 136, 255, .10), transparent 68%); pointer-events: none; z-index: 1; transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s ease; }
body:hover .cursor-glow { opacity: 1; }

.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; color: #fff; transition: background .3s, transform .3s, box-shadow .3s; }
.site-header.is-sticky { position: fixed; background: rgba(10, 16, 32, .86); backdrop-filter: blur(18px); box-shadow: 0 12px 40px rgba(0,0,0,.15); }
.announcement { border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px; letter-spacing: .01em; }
.announcement-inner { height: 34px; display: flex; align-items: center; justify-content: center; gap: 9px; color: rgba(255,255,255,.72); }
.announcement-inner a { margin-left: 7px; color: #fff; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(0,237,135,.08); animation: live 2s ease infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 10px rgba(0,237,135,0); } }
.nav-bar { height: 78px; display: flex; align-items: center; gap: 36px; }
.brand { width: 142px; flex: 0 0 auto; }
.brand img { width: 100%; height: auto; }
.nav-links { display: flex; align-items: center; gap: 29px; margin-left: auto; }
.nav-links a { font-size: 14px; color: rgba(255,255,255,.76); transition: color .2s; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--green); transition: right .25s; }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-mail { font-size: 13px; color: rgba(255,255,255,.66); }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: #fff; }
.menu-toggle span { width: 18px; height: 1.5px; background: currentColor; transition: transform .25s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-nav { display: none; }

.button { min-height: 52px; padding: 0 22px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 650; font-size: 14px; border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; position: relative; overflow: hidden; }
.button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.34) 50%, transparent 75%); transform: translateX(-120%); transition: transform .7s; }
.button:hover::before { transform: translateX(120%); }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 44px; padding: 0 18px; border-radius: 13px; }
.button-primary { background: linear-gradient(135deg, var(--green), var(--cyan) 48%, var(--blue)); color: #04111b; box-shadow: 0 14px 35px rgba(0, 213, 190, .2); }
.button-primary:hover { box-shadow: 0 18px 45px rgba(0, 213, 190, .32); }
.button-ghost { border-color: rgba(255,255,255,.15); color: #fff; background: rgba(255,255,255,.055); backdrop-filter: blur(10px); }
.button-ghost:hover { background: rgba(255,255,255,.10); }
.button-dark { background: var(--navy); color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; }
.text-link span { transition: transform .2s; }
.text-link:hover span { transform: translate(3px, -3px); }

.hero { min-height: 920px; position: relative; overflow: hidden; padding: 205px 0 62px; isolation: isolate; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .58; z-index: -5; }
.hero-noise { position: absolute; inset: 0; opacity: .18; z-index: -3; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, rgba(0,0,0,.18)); z-index: -2; }
.hero-aurora { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .23; z-index: -4; animation: drift 10s ease-in-out infinite alternate; }
.aurora-one { width: 680px; height: 360px; background: #164eff; left: -210px; top: 310px; transform: rotate(18deg); }
.aurora-two { width: 600px; height: 340px; background: #00ec9a; right: -260px; top: 170px; animation-delay: -4s; }
@keyframes drift { to { transform: translate3d(70px, 50px, 0) rotate(8deg) scale(1.12); } }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; position: relative; z-index: 2; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 750; color: #1675c9; }
.eyebrow { color: rgba(255,255,255,.72); }
.eyebrow span { width: 34px; height: 1px; background: linear-gradient(90deg, var(--green), var(--blue)); }
.hero h1 { margin: 24px 0 26px; max-width: 760px; font-size: clamp(55px, 6.2vw, 86px); line-height: .98; letter-spacing: -.058em; font-weight: 690; }
.word-gradient { background: linear-gradient(105deg, var(--green), var(--cyan) 42%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.swap-wrap { display: inline-grid; min-width: 7.6ch; }
.swap-wrap > span { grid-area: 1/1; transition: opacity .35s, transform .35s; }
.swap-wrap > span.is-changing { opacity: 0; transform: translateY(14px); }
.hero-lead { max-width: 640px; margin: 0; color: rgba(255,255,255,.66); font-size: 18px; line-height: 1.7; }
.hero-actions { margin-top: 34px; display: flex; gap: 13px; flex-wrap: wrap; }
.hero-actions.center { justify-content: center; }
.play-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 8px; }
.hero-proof { display: flex; align-items: center; gap: 15px; margin-top: 34px; }
.hero-proof p { margin: 0; max-width: 360px; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.55; }
.proof-stack { display: flex; }
.proof-stack span { width: 36px; height: 36px; margin-left: -8px; border: 2px solid var(--navy); border-radius: 50%; display: grid; place-items: center; background: #17233a; color: #fff; font-size: 9px; font-weight: 750; }
.proof-stack span:first-child { margin-left: 0; background: linear-gradient(135deg, var(--green), var(--cyan)); color: #071523; }

.hero-stage { min-height: 530px; position: relative; perspective: 1300px; }
.stage-orbit { position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; animation: spin 18s linear infinite; }
.orbit-a { width: 520px; height: 520px; right: -20px; top: 20px; }
.orbit-b { width: 390px; height: 390px; right: 45px; top: 88px; animation-direction: reverse; animation-duration: 12s; }
.stage-orbit::before, .stage-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 20px var(--green); }
.stage-orbit::before { left: 12%; top: 13%; }
.stage-orbit::after { right: 10%; bottom: 18%; background: var(--blue); box-shadow: 0 0 20px var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }
.browser-card { position: absolute; width: 530px; right: 0; top: 42px; border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: 0 50px 100px rgba(0,0,0,.34); overflow: visible; transform: rotateY(-6deg) rotateX(3deg); transform-style: preserve-3d; transition: transform .18s ease-out; }
.browser-toolbar { height: 54px; display: flex; align-items: center; padding: 0 17px; gap: 15px; background: #f1f4f8; border-radius: 26px 26px 0 0; border-bottom: 1px solid #e2e7ef; }
.traffic { display: flex; gap: 6px; }
.traffic i { width: 8px; height: 8px; border-radius: 50%; background: #c6ced9; }
.traffic i:first-child { background: #ff7979; }.traffic i:nth-child(2){background:#ffcc66}.traffic i:nth-child(3){background:#68dd91}
.address { flex: 1; height: 27px; border-radius: 9px; background: #fff; color: #9aa4b3; display: flex; align-items: center; padding-left: 12px; font-size: 9px; }
.toolbar-icon { color: #718096; }
.browser-content { min-height: 400px; padding: 20px; border-radius: 0 0 26px 26px; background: linear-gradient(145deg, #0b1326, #141f36); position: relative; overflow: hidden; }
.browser-content::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(35,136,255,.23); filter: blur(50px); right: -100px; top: -100px; }
.browser-navline { display: flex; align-items: center; gap: 18px; position: relative; z-index: 2; }
.browser-navline img { width: 30px; height: 30px; object-fit: contain; }
.browser-navline span { width: 34px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.16); }
.mock-hero { padding: 50px 18px 38px; max-width: 390px; position: relative; z-index: 2; }
.mock-hero small { display: block; margin-bottom: 15px; color: var(--green); font-size: 7px; letter-spacing: .18em; }
.mock-hero strong { display: block; color: #fff; font-size: 35px; line-height: 1.02; letter-spacing: -.05em; }
.mock-buttons { display: flex; gap: 8px; margin-top: 22px; }
.mock-buttons span { width: 90px; height: 27px; border-radius: 8px; background: linear-gradient(90deg, var(--green), var(--cyan)); }
.mock-buttons span:last-child { width: 74px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.mock-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 8px; position: relative; z-index: 2; }
.mock-grid span { height: 70px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); }
.mock-grid span:nth-child(2) { background: linear-gradient(145deg, rgba(0,237,135,.18), rgba(35,136,255,.12)); }
.floating-chip { position: absolute; min-width: 150px; padding: 11px 13px; border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 15px 40px rgba(0,0,0,.18); color: var(--ink); display: flex; align-items: center; gap: 10px; transform: translateZ(35px); }
.floating-chip small, .floating-chip strong { display: block; }.floating-chip small{font-size:9px;color:#7a8594}.floating-chip strong{font-size:15px;margin-top:2px}
.chip-performance { left: -50px; top: 105px; animation: float 5s ease-in-out infinite; }
.chip-conversion { right: -35px; bottom: 42px; animation: float 5.8s ease-in-out infinite reverse; }
.chip-icon { width: 32px; height: 32px; border-radius: 10px; background: #eaf9f5; display: grid; place-items: center; color: #00a766; font-weight: 800; }
.pulse-ring { width: 30px; height: 30px; border-radius: 50%; border: 7px solid rgba(35,136,255,.14); box-shadow: inset 0 0 0 5px var(--blue); }
@keyframes float { 50% { transform: translate3d(0,-10px,35px); } }
.ai-window { position: absolute; width: 310px; right: 128px; bottom: -13px; padding: 16px; border-radius: 20px; background: rgba(14,24,44,.92); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 65px rgba(0,0,0,.33); backdrop-filter: blur(18px); transform: translateZ(55px) rotate(2deg); transition: transform .18s ease-out; }
.ai-window-head { display: flex; align-items: center; gap: 10px; }
.ai-window-head > i { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.ai-window-head small, .ai-window-head strong { display: block; }.ai-window-head small{color:#8f9db3;font-size:8px}.ai-window-head strong{font-size:11px;margin-top:2px}
.ai-orb { width: 34px; height: 34px; border-radius: 11px; background: radial-gradient(circle at 35% 25%, #fff, var(--cyan) 13%, var(--blue) 50%, #3b1d7b 82%); box-shadow: 0 0 30px rgba(35,136,255,.28); }
.ai-message { margin-top: 14px; display: flex; gap: 9px; }
.ai-message > span { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-top: 5px; }
.ai-message p { margin: 0; color: #b8c3d4; font-size: 10px; line-height: 1.5; }
.ai-flow { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 13px; }
.ai-flow span { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.065); font-size: 8px; color: #dce4ef; }.ai-flow i{font-style:normal;color:#60718b;font-size:9px}
.floating-badge { position: absolute; left: 28px; bottom: 42px; padding: 10px 13px; border-radius: 999px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); color: #d8e1ef; font-size: 10px; backdrop-filter: blur(10px); display: flex; gap: 8px; align-items: center; animation: float 4.8s ease-in-out infinite; }
.floating-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.hero-stats { margin-top: 80px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.09); display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 30px; align-items: end; position: relative; z-index: 3; }
.hero-stats > div { display: flex; align-items: baseline; gap: 10px; }
.hero-stats strong { font-size: 30px; letter-spacing: -.04em; }.hero-stats span{color:rgba(255,255,255,.47);font-size:10px;line-height:1.4;max-width:100px}
.hero-scroll { justify-content: flex-end; text-transform: uppercase; letter-spacing: .16em; font-size: 9px; color: rgba(255,255,255,.45); }
.hero-scroll span { width: 42px; max-width: none; height: 1px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.hero-scroll span::after { content: ""; position: absolute; inset: 0; background: var(--green); transform: translateX(-100%); animation: scan 2s linear infinite; }
@keyframes scan { to { transform: translateX(100%); } }

.work-marquee { background: #fff; padding: 115px 0 105px; overflow: hidden; }
.work-marquee-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.work-marquee h2, .section-heading h2, .ai-heading h2 { margin: 12px 0 0; font-size: clamp(40px, 5vw, 66px); line-height: 1.03; letter-spacing: -.05em; font-weight: 650; }
.marquee-track-wrap { overflow: hidden; padding: 10px 0 24px; }
.marquee-track { width: max-content; display: flex; gap: 22px; padding-left: max(22px, calc((100vw - 1180px)/2)); animation: marquee 33s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 11px)); } }
.project-tile { width: min(430px, 82vw); height: 480px; border-radius: 30px; padding: 22px; color: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(9,18,38,.12); transition: transform .35s ease, box-shadow .35s ease; }
.project-tile:hover { transform: translateY(-8px) rotate(-.4deg); box-shadow: 0 35px 75px rgba(9,18,38,.2); }
.project-blue { background: linear-gradient(145deg, #0a2c70, #1469e5 60%, #1caee8); }
.project-green { background: linear-gradient(145deg, #0a403e, #078c72 58%, #00d58b); }
.project-violet { background: linear-gradient(145deg, #25154f, #5631a8 58%, #a16eff); }
.project-orange { background: linear-gradient(145deg, #4e2115, #bb4f2a 58%, #ff9853); }
.project-top { display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.project-top > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); font-size: 10px; }
.project-top small { color: rgba(255,255,255,.66); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.project-visual { flex: 1; margin: 22px 0 14px; position: relative; border-radius: 22px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); overflow: hidden; }
.project-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.12), transparent 70%); transform: translateX(-100%); transition: transform .8s; }
.project-tile:hover .project-visual::after { transform: translateX(100%); }
.visual-dashboard i { position: absolute; background: rgba(255,255,255,.14); border-radius: 10px; }.visual-dashboard i:first-child{left:18px;top:20px;width:70px;height:calc(100% - 40px)}.visual-dashboard i:nth-child(2){left:105px;top:20px;right:18px;height:58px}.visual-dashboard i:nth-child(3){left:105px;top:95px;width:43%;bottom:20px}.visual-dashboard b{position:absolute;right:18px;top:95px;bottom:20px;width:35%;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06))}
.visual-flow i { position: absolute; width: 78px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.17); }.visual-flow i:first-child{left:24px;top:30px}.visual-flow i:nth-child(2){left:calc(50% - 39px);top:118px}.visual-flow i:nth-child(3){right:24px;top:210px}.visual-flow b,.visual-flow em{position:absolute;height:1px;background:rgba(255,255,255,.42);transform-origin:left}.visual-flow b{width:150px;left:86px;top:89px;transform:rotate(23deg)}.visual-flow em{width:145px;left:205px;top:174px;transform:rotate(23deg)}
.visual-mobile i { position: absolute; width: 145px; height: 285px; border-radius: 25px; background: #f8fbff; left: calc(50% - 72px); top: 24px; box-shadow: 0 25px 45px rgba(0,0,0,.18); }.visual-mobile i::before{content:"";position:absolute;left:15px;right:15px;top:35px;height:60px;border-radius:14px;background:linear-gradient(135deg,#1e7cff,#26d8de)}.visual-mobile i::after{content:"";position:absolute;left:15px;right:15px;top:110px;bottom:18px;border-radius:14px;background:repeating-linear-gradient(180deg,#e9edf5 0 9px,transparent 9px 22px)}.visual-mobile b,.visual-mobile em{position:absolute;width:72px;height:72px;border-radius:18px;background:rgba(255,255,255,.16);top:75px}.visual-mobile b{left:24px;transform:rotate(-12deg)}.visual-mobile em{right:24px;top:205px;transform:rotate(12deg)}
.visual-site i { position:absolute;left:22px;right:22px;top:22px;height:185px;border-radius:16px;background:linear-gradient(145deg,#111d30,#213751)}.visual-site i::before{content:"Build differently.";position:absolute;left:22px;top:54px;color:#fff;font-size:22px;font-weight:700;letter-spacing:-.04em}.visual-site i::after{content:"";position:absolute;left:22px;top:112px;width:82px;height:28px;border-radius:8px;background:linear-gradient(90deg,#00ed87,#00c6dc)}.visual-site b,.visual-site em{position:absolute;bottom:22px;height:72px;border-radius:14px;background:rgba(255,255,255,.16)}.visual-site b{left:22px;width:45%}.visual-site em{right:22px;width:39%}
.project-bottom h3 { font-size: 28px; margin: 0 0 5px; letter-spacing: -.04em; }.project-bottom span{font-size:10px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.1em}

.services { padding: 125px 0; }
.section-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 70px; margin-bottom: 55px; }
.section-heading p, .ai-heading > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.section-heading.compact { grid-template-columns: 1fr; }
.services-grid { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 18px; }
.service-card { min-height: 510px; padding: 29px; border-radius: var(--radius); background: #f7f9fc; border: 1px solid #e8edf4; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .18s ease-out, box-shadow .3s, border-color .3s; }
.service-card::before { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; right: -100px; top: -100px; background: rgba(35,136,255,.08); filter: blur(8px); transition: transform .5s; }
.service-card:hover { border-color: rgba(35,136,255,.25); box-shadow: 0 25px 60px rgba(12,25,50,.09); }.service-card:hover::before{transform:scale(1.6)}
.service-featured { background: var(--navy); color: #fff; border-color: var(--navy); }
.service-featured p, .service-featured li { color: rgba(255,255,255,.6); }.service-featured a{color:#fff!important}
.service-number { font-size: 10px; letter-spacing: .12em; color: #95a0af; }
.service-icon { width: 78px; height: 78px; margin: 45px 0 35px; border-radius: 23px; position: relative; background: #fff; box-shadow: 0 14px 35px rgba(16,33,66,.1); }
.service-featured .service-icon { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.icon-web span { position:absolute;left:20px;right:20px;height:9px;border-radius:9px;transform:rotate(-38deg);background:linear-gradient(90deg,var(--green),var(--blue))}.icon-web span:first-child{top:21px}.icon-web span:nth-child(2){top:34px;left:29px}.icon-web span:nth-child(3){top:47px;left:38px}
.icon-ai span { position:absolute;width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--blue))}.icon-ai span:first-child{left:20px;top:21px}.icon-ai span:nth-child(2){right:20px;top:21px}.icon-ai span:nth-child(3){left:20px;bottom:20px}.icon-ai span:nth-child(4){right:20px;bottom:20px}.icon-ai::after{content:"";position:absolute;inset:25px;border:1px solid #aeb8c6;transform:rotate(45deg)}
.icon-growth span { position:absolute;bottom:18px;width:9px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--blue),var(--green))}.icon-growth span:first-child{left:18px;height:18px}.icon-growth span:nth-child(2){left:32px;height:30px}.icon-growth span:nth-child(3){left:46px;height:41px}.icon-growth span:nth-child(4){left:60px;height:52px}
.service-card h3 { margin: 0 0 16px; font-size: 27px; letter-spacing: -.035em; }.service-card p{margin:0 0 22px;color:#667085;line-height:1.65;font-size:14px}.service-card ul{padding:0;margin:0 0 28px;list-style:none}.service-card li{position:relative;padding:8px 0 8px 19px;color:#5e6877;font-size:12px;border-bottom:1px solid rgba(17,24,39,.07)}.service-card li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:var(--green)}.service-card a{margin-top:auto;display:flex;justify-content:space-between;color:#142033;font-size:12px;font-weight:700}.service-card a span{transition:transform .2s}.service-card:hover a span{transform:translate(3px,-3px)}

.experience { padding: 130px 0; overflow: hidden; }
.experience-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: center; }
.section-kicker.light { color: #63d9cd; }
.experience h2, .final-cta h2 { margin: 16px 0 24px; font-size: clamp(48px, 6vw, 78px); line-height: .98; letter-spacing: -.055em; font-weight: 650; }
.experience-copy > p { color: rgba(255,255,255,.58); font-size: 17px; line-height: 1.7; }
.experience-tabs { display: flex; gap: 8px; margin: 35px 0 20px; flex-wrap: wrap; }
.experience-tabs button { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(255,255,255,.58); border-radius: 999px; padding: 10px 15px; cursor: pointer; font-size: 11px; transition: .2s; }.experience-tabs button.active{background:#fff;color:#0b1221;border-color:#fff}
.experience-panel { display: none; padding: 20px; border-left: 1px solid var(--green); background: linear-gradient(90deg,rgba(0,237,135,.08),transparent); }.experience-panel.active{display:block;animation:panelIn .4s ease}.experience-panel strong{font-size:15px}.experience-panel p{margin:7px 0 0;color:rgba(255,255,255,.54);font-size:12px;line-height:1.6}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}}
.motion-lab { perspective: 1200px; }
.motion-window { border-radius: 30px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); box-shadow: 0 45px 100px rgba(0,0,0,.32); transform: rotateY(-7deg) rotateX(2deg); overflow: hidden; }
.motion-header { height: 55px; display: flex; align-items: center; gap: 7px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.09); }.motion-header span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}.motion-header small{margin-left:auto;color:rgba(255,255,255,.4);font-size:8px;letter-spacing:.14em;text-transform:uppercase}
.motion-canvas { height: 520px; position: relative; overflow: hidden; background: radial-gradient(circle at 72% 34%, rgba(35,136,255,.23), transparent 38%),radial-gradient(circle at 25% 82%, rgba(0,237,135,.15), transparent 34%),#0b1427; }
.motion-canvas::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom,black,transparent 85%); }
.motion-title { position: absolute; left: 50px; top: 85px; z-index: 3; }.motion-title span{display:block;font-size:62px;line-height:.91;letter-spacing:-.07em;font-weight:680}.motion-title span:nth-child(2){color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}.motion-title span:nth-child(3){background:linear-gradient(90deg,var(--green),var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.motion-cursor { position:absolute;right:70px;top:245px;z-index:5;animation:cursorPath 7s ease-in-out infinite }.motion-cursor i{display:block;width:0;height:0;border-left:12px solid #fff;border-top:18px solid transparent;transform:rotate(-25deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.motion-cursor small{position:absolute;left:18px;top:15px;padding:5px 8px;border-radius:6px;background:var(--blue);font-size:7px;color:#fff}
@keyframes cursorPath{0%,100%{transform:translate(0,0)}35%{transform:translate(-180px,115px)}65%{transform:translate(-35px,185px)}}
.motion-card { position:absolute;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);animation:float 6s ease-in-out infinite}.mc-one{width:170px;height:105px;right:35px;bottom:45px;transform:rotate(8deg)}.mc-two{width:130px;height:165px;left:75px;bottom:35px;transform:rotate(-6deg);animation-delay:-2s}.motion-ring{position:absolute;width:240px;height:240px;border:1px solid rgba(255,255,255,.14);border-radius:50%;right:-70px;top:40px;animation:spin 18s linear infinite}.motion-ring::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--green);left:22px;top:42px;box-shadow:0 0 18px var(--green)}

.ai-section { padding: 130px 0; }
.ai-heading { max-width: 840px; margin-bottom: 60px; }.ai-heading > p{max-width:700px;margin-top:24px}
.ai-journey-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 45px; align-items: stretch; }
.ai-map { min-height: 560px; border-radius: 34px; background: #0b1426; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.ai-map::before { content:"";position:absolute;width:350px;height:350px;border-radius:50%;background:rgba(28,120,255,.24);filter:blur(70px);left:135px;top:90px}.ai-map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle,black,transparent 75%)}
.ai-map svg { position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(117,181,255,.26);stroke-width:1;stroke-dasharray:7 9; }.ai-map svg path{animation:dash 18s linear infinite}@keyframes dash{to{stroke-dashoffset:-180}}
.ai-core { position:absolute;left:50%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);border-radius:34px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;box-shadow:0 0 60px rgba(35,136,255,.25);z-index:3}.ai-core img{width:68px;height:68px;object-fit:contain}.ai-core span{position:absolute;inset:-13px;border:1px solid rgba(0,237,135,.22);border-radius:41px;animation:pulseBox 2.8s ease infinite}@keyframes pulseBox{50%{inset:-24px;opacity:0}}
.ai-node { position:absolute;z-index:4;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);color:#fff;display:flex;align-items:center;gap:9px;backdrop-filter:blur(10px);animation:float 5.5s ease-in-out infinite}.ai-node i{font-style:normal;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(0,237,135,.12);color:var(--green);font-size:7px}.ai-node span{font-size:10px}.node-one{left:55px;top:65px}.node-two{right:55px;top:65px;animation-delay:-1.3s}.node-three{left:50px;bottom:65px;animation-delay:-2.5s}.node-four{right:50px;bottom:65px;animation-delay:-3.4s}
.use-cases { display: flex; flex-direction: column; gap: 14px; }
.use-case { min-height: 128px; padding: 19px; border: 1px solid #e4e9f1; border-radius: 23px; display: grid; grid-template-columns: 48px 1fr auto; gap: 15px; align-items: center; transition: transform .25s, border-color .25s, box-shadow .25s; }.use-case:hover{transform:translateX(7px);border-color:rgba(35,136,255,.3);box-shadow:0 20px 45px rgba(16,34,65,.08)}
.use-icon { width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#e6fff7,#e9f1ff);display:grid;place-items:center;color:#1281b9;font-size:20px}.use-case small{font-size:8px;text-transform:uppercase;letter-spacing:.15em;color:#8190a3}.use-case h3{font-size:18px;margin:5px 0 6px;letter-spacing:-.03em}.use-case p{font-size:11px;line-height:1.55;color:#6a7584;margin:0}.use-case > span{font-size:18px;color:#718096;transition:transform .2s}.use-case:hover > span{transform:translate(3px,-3px)}
.use-cases > .button { margin-top: auto; }

.quality { padding: 130px 0; }
.bento-grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: repeat(2, 300px); gap: 18px; }
.bento { border-radius: 30px; border: 1px solid #e2e8f0; background: #fff; padding: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 14px 35px rgba(14,31,57,.04); }.bento h3{font-size:24px;margin:0 0 8px;letter-spacing:-.04em}.bento p{margin:0;color:#6a7584;line-height:1.6;font-size:12px;max-width:350px}
.bento-speed { grid-row: span 2; background: #0b1426; color: #fff; }.bento-speed p{color:rgba(255,255,255,.55)}
.speed-score { width:290px;height:290px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;margin-top:12px;position:relative;background:radial-gradient(circle,rgba(35,136,255,.18),transparent 65%)}.speed-score::before,.speed-score::after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(0,237,135,.22);animation:spin 16s linear infinite}.speed-score::before{inset:18px}.speed-score::after{inset:45px;animation-direction:reverse}.speed-score span{font-size:92px;line-height:1;letter-spacing:-.09em;background:linear-gradient(135deg,var(--green),var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}.speed-score small{text-transform:uppercase;letter-spacing:.17em;color:rgba(255,255,255,.45);font-size:8px}
.cms-ui { height:145px;border-radius:18px;background:#f2f5fa;padding:15px;display:grid;grid-template-columns:65px 1fr;grid-template-rows:22px repeat(3,1fr);gap:8px}.cms-ui span{grid-row:1/-1;border-radius:10px;background:#17233a}.cms-ui i{border-radius:8px;background:#fff}.cms-ui i:first-of-type{background:linear-gradient(90deg,#d8e0eb 40%,transparent 40%)}
.security-radar { width:145px;height:145px;border-radius:50%;align-self:center;border:1px solid #cfdae8;position:relative;background:repeating-radial-gradient(circle,transparent 0 21px,#e4ebf3 22px 23px)}.security-radar::before{content:"";position:absolute;inset:50% 0 auto 50%;width:1px;height:72px;background:linear-gradient(#2b8fff,transparent);transform-origin:top;animation:spin 3s linear infinite}.security-radar span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--green);left:38px;top:50px;box-shadow:0 0 14px var(--green)}.security-radar i,.security-radar b{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--blue)}.security-radar i{right:35px;top:35px}.security-radar b{right:52px;bottom:29px}
.devices { height:135px;display:flex;align-items:end;justify-content:center;gap:11px}.devices span,.devices i,.devices b{display:block;border:4px solid #26344b;background:linear-gradient(145deg,#e8f8ff,#d9fff0);box-shadow:0 12px 25px rgba(17,35,65,.1)}.devices span{width:145px;height:92px;border-radius:10px}.devices i{width:70px;height:110px;border-radius:10px}.devices b{width:42px;height:82px;border-radius:9px}

.process { padding: 130px 0; }
.process-line { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }.process-line::before{content:"";position:absolute;left:8%;right:8%;top:25px;height:1px;background:#dce3ec}
.process-step { padding: 0 24px; position: relative; }.process-step > span{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #dce3ec;color:#147ac8;font-size:10px;box-shadow:0 0 0 10px #fff}.process-step small{display:block;margin-top:30px;color:#8b96a5;text-transform:uppercase;letter-spacing:.14em;font-size:8px}.process-step h3{font-size:23px;margin:10px 0 10px}.process-step p{font-size:12px;line-height:1.65;color:#697483;margin:0}

.final-cta { position: relative; overflow: hidden; padding: 130px 0; text-align: center; }.cta-glow{position:absolute;width:700px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(35,136,255,.3),rgba(0,237,135,.12) 35%,transparent 70%);left:50%;top:50%;transform:translate(-50%,-48%);filter:blur(30px)}.final-cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(circle,black,transparent 72%)}
.final-cta-inner { position: relative; z-index: 2; max-width: 880px; }.cta-mark{width:84px;height:84px;margin:0 auto 24px;border-radius:25px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);display:grid;place-items:center;box-shadow:0 0 50px rgba(35,136,255,.22)}.cta-mark img{width:58px;height:58px;object-fit:contain}.final-cta p{max-width:620px;margin:0 auto;color:rgba(255,255,255,.58);font-size:16px;line-height:1.7}

.site-footer { background: #070c18; color: #fff; padding: 75px 0 25px; }.footer-top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:60px;padding-bottom:60px}.footer-brand img{width:155px}.footer-brand p{max-width:310px;color:rgba(255,255,255,.48);font-size:13px;line-height:1.65;margin:21px 0}.footer-brand > a{font-size:14px;color:#fff}.footer-column{display:flex;flex-direction:column;gap:13px}.footer-column h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#fff;margin:0 0 9px}.footer-column a{color:rgba(255,255,255,.47);font-size:12px;transition:color .2s,transform .2s}.footer-column a:hover{color:#fff;transform:translateX(3px)}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;color:rgba(255,255,255,.32);font-size:10px}.footer-bottom div{display:flex;gap:20px}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22,.8,.2,1), transform .8s cubic-bezier(.22,.8,.2,1); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Inner pages */
.inner-page { background: #fff; }
.inner-page .site-header { position: relative; background: var(--navy); }
.inner-page .announcement { display: none; }
.inner-page .nav-bar { height: 82px; }
.page-hero { padding: 120px 0 100px; background: var(--navy); color: #fff; position: relative; overflow: hidden; }.page-hero::before{content:"";position:absolute;width:800px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(35,136,255,.26),rgba(0,237,135,.09) 35%,transparent 70%);right:-240px;top:-170px}.page-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;position:relative}.page-hero h1{font-size:clamp(52px,7vw,92px);line-height:.96;letter-spacing:-.06em;margin:18px 0 25px}.page-hero p{color:rgba(255,255,255,.6);font-size:18px;line-height:1.7;max-width:650px}.page-hero-card{min-height:380px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);border-radius:32px;padding:30px;position:relative;overflow:hidden}.page-hero-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px}.page-orb{position:absolute;width:190px;height:190px;border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,var(--cyan) 11%,var(--blue) 45%,#422780 78%);filter:drop-shadow(0 0 55px rgba(35,136,255,.5));animation:float 5s ease-in-out infinite}.page-orb::before,.page-orb::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%;animation:spin 13s linear infinite}.page-orb::before{inset:-55px}.page-orb::after{inset:-105px;animation-direction:reverse}.inner-section{padding:110px 0}.inner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.inner-card{padding:28px;border-radius:26px;border:1px solid #e4e9f1;background:#fff;min-height:280px}.inner-card .service-number{margin-bottom:55px}.inner-card h3{font-size:25px;letter-spacing:-.04em;margin:0 0 14px}.inner-card p{color:#697483;line-height:1.65;font-size:13px}.feature-list{display:grid;gap:15px;margin-top:30px}.feature-row{display:grid;grid-template-columns:48px 1fr;gap:17px;padding:20px;border:1px solid #e5eaf1;border-radius:20px}.feature-row span{width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#e6fff7,#e8f1ff);display:grid;place-items:center}.feature-row h3{margin:2px 0 7px;font-size:18px}.feature-row p{margin:0;color:#6a7584;font-size:12px;line-height:1.6}.case-detail{padding:80px 0;border-bottom:1px solid #e8edf3}.case-detail-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:center}.case-detail:nth-child(even) .case-info{order:2}.case-detail:nth-child(even) .case-showcase{order:1}.case-info small{text-transform:uppercase;letter-spacing:.15em;color:#1d7dc6;font-size:9px}.case-info h2{font-size:48px;letter-spacing:-.05em;line-height:1;margin:14px 0}.case-info p{color:#687382;line-height:1.7}.case-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.case-meta span{padding:13px;border-radius:12px;background:#f4f7fb;font-size:10px;color:#596575}.case-showcase{height:460px;border-radius:30px;background:var(--navy);position:relative;overflow:hidden}.case-showcase .project-visual{position:absolute;inset:30px;margin:0}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.about-grid h2{font-size:58px;line-height:1.02;letter-spacing:-.05em;margin:0}.about-copy p{font-size:17px;line-height:1.8;color:#626e7d;margin:0 0 24px}.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:55px}.value{padding:26px;border-radius:24px;background:#f4f7fb}.value span{color:#1681c8;font-size:10px}.value h3{font-size:20px;margin:32px 0 10px}.value p{font-size:12px;color:#697483;line-height:1.6}.contact-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}.contact-aside h2{font-size:50px;line-height:1.02;letter-spacing:-.05em;margin:0 0 22px}.contact-aside p{color:#687382;line-height:1.7}.contact-points{margin-top:35px;display:grid;gap:14px}.contact-points a,.contact-points div{padding:17px 18px;border-radius:15px;background:#f3f6fa;font-size:13px}.contact-form{padding:34px;border-radius:30px;background:#f4f7fb}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-field{display:grid;gap:8px}.form-field.full{grid-column:1/-1}.form-field label{font-size:11px;font-weight:700}.form-field input,.form-field textarea,.form-field select{width:100%;border:1px solid #dce3ec;border-radius:13px;background:#fff;padding:14px 15px;color:#172033;outline:none;transition:border-color .2s,box-shadow .2s}.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:#278cff;box-shadow:0 0 0 4px rgba(39,140,255,.1)}.form-field textarea{min-height:140px;resize:vertical}.form-note{font-size:10px;color:#7c8795;line-height:1.5;margin:15px 0}.form-status{display:none;margin-top:14px;padding:13px;border-radius:12px;background:#e8fff4;color:#087946;font-size:12px}.form-status.show{display:block}

@media (max-width: 1050px) {
  :root { --shell: min(930px, calc(100vw - 36px)); }
  .nav-links, .nav-mail { display: none; }.menu-toggle{display:flex}.nav-actions .button{display:none}
  .mobile-nav { position: fixed; left: 18px; right: 18px; top: 92px; padding: 18px; border-radius: 22px; background: rgba(10,16,32,.97); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px rgba(0,0,0,.35); flex-direction: column; gap: 5px; backdrop-filter: blur(20px); }.mobile-nav.open{display:flex}.mobile-nav a:not(.button){padding:14px;color:rgba(255,255,255,.78);border-bottom:1px solid rgba(255,255,255,.07)}
  .hero { min-height: auto; padding-top: 190px; }.hero-grid{grid-template-columns:1fr;gap:50px}.hero-copy{max-width:780px}.hero-stage{max-width:650px;width:100%;margin:auto}.hero-stats{grid-template-columns:repeat(3,1fr)}.hero-scroll{display:none}
  .services-grid{grid-template-columns:1fr 1fr}.service-featured{grid-column:1/-1;min-height:430px}.experience-grid{grid-template-columns:1fr;}.motion-lab{max-width:760px}.ai-journey-grid{grid-template-columns:1fr}.ai-map{min-height:540px}.footer-top{grid-template-columns:1.4fr repeat(3,1fr);gap:30px}.page-hero-grid,.case-detail-grid,.about-grid,.contact-layout{grid-template-columns:1fr}.case-detail:nth-child(even) .case-info,.case-detail:nth-child(even) .case-showcase{order:initial}.inner-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 30px, 620px); --radius: 23px; }
  .announcement-inner { justify-content:flex-start; overflow:hidden; white-space:nowrap; }.announcement-inner a{display:none}.nav-bar{height:70px}.brand{width:126px}.site-header.is-sticky .nav-bar{height:66px}.mobile-nav{top:78px}
  .hero { padding: 155px 0 42px; }.hero h1{font-size:48px;line-height:1.02}.hero-lead{font-size:16px}.hero-stage{min-height:430px}.browser-card{width:92%;right:2%;top:35px}.browser-content{min-height:315px}.mock-hero{padding:35px 12px 25px}.mock-hero strong{font-size:27px}.ai-window{width:265px;right:9%;bottom:5px}.chip-performance{left:-4px;top:95px}.chip-conversion{display:none}.floating-badge{left:0;bottom:30px}.hero-stats{grid-template-columns:1fr 1fr;gap:22px}.hero-stats > div:nth-child(3){display:none}
  .work-marquee{padding:85px 0}.work-marquee-head{align-items:flex-start;flex-direction:column}.work-marquee h2,.section-heading h2,.ai-heading h2{font-size:43px}.project-tile{height:430px;width:340px}
  .services,.ai-section,.quality,.process,.experience,.final-cta,.inner-section{padding:90px 0}.section-heading{grid-template-columns:1fr;gap:22px;margin-bottom:38px}.services-grid{grid-template-columns:1fr}.service-featured{grid-column:auto}.service-card{min-height:460px}.experience h2,.final-cta h2{font-size:48px}.motion-canvas{height:400px}.motion-title{left:30px;top:60px}.motion-title span{font-size:43px}.mc-one{width:125px;height:78px}.mc-two{width:95px;height:125px}.ai-map{min-height:470px}.ai-node{padding:9px}.node-one{left:18px;top:35px}.node-two{right:18px;top:35px}.node-three{left:18px;bottom:35px}.node-four{right:18px;bottom:35px}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto}.bento{min-height:285px}.bento-speed{grid-row:auto;min-height:500px}.process-line{grid-template-columns:1fr;gap:35px}.process-line::before{left:25px;right:auto;top:10px;bottom:10px;width:1px;height:auto}.process-step{padding-left:78px}.process-step > span{position:absolute;left:0}.process-step small{margin-top:0}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:15px}.page-hero{padding:85px 0}.page-hero h1{font-size:54px}.page-hero-card{min-height:320px}.inner-grid,.values-grid{grid-template-columns:1fr}.case-showcase{height:360px}.about-grid h2,.contact-aside h2{font-size:45px}.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}
}

@media (max-width: 480px) {
  .hero h1 { font-size: 42px; }.hero-actions .button{width:100%}.hero-proof{align-items:flex-start}.hero-stage{min-height:390px}.browser-card{width:100%;right:0}.browser-toolbar{height:45px}.browser-content{min-height:280px}.browser-navline{gap:12px}.mock-hero strong{font-size:24px}.mock-grid span{height:54px}.ai-window{right:3%;bottom:-2px;width:245px}.chip-performance{transform:scale(.9);transform-origin:left}.stage-orbit{display:none}.hero-stats{margin-top:48px}.work-marquee h2,.section-heading h2,.ai-heading h2{font-size:38px}.project-tile{width:310px;height:405px}.experience h2,.final-cta h2{font-size:42px}.motion-window{transform:none}.motion-canvas{height:350px}.motion-title span{font-size:36px}.ai-core{width:88px;height:88px}.ai-core img{width:52px}.ai-node span{display:none}.bento-speed{min-height:430px}.speed-score{width:240px;height:240px}.speed-score span{font-size:76px}.footer-top{grid-template-columns:1fr}.footer-brand{grid-column:auto}.page-hero h1{font-size:46px}.case-detail-grid{gap:35px}.case-info h2{font-size:40px}.contact-form{padding:22px}
}

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


/* Live realisation: Praktijk Varia */
.work-intro{max-width:620px;margin:18px 0 0;color:#697483;font-size:14px;line-height:1.7}
.project-varia{background:linear-gradient(145deg,#253934,#59796d 56%,#b8d0bf)}
.project-varia-soft{background:linear-gradient(145deg,#6b3d49,#bc7881 56%,#efc7b7)}
.project-varia-dark{background:linear-gradient(145deg,#171f28,#344552 56%,#67877d)}
.visual-praktijk{background:#f5f0e9;border-color:rgba(255,255,255,.32);color:#20302b}
.pv-browserbar{height:42px;display:flex;align-items:center;gap:7px;padding:0 14px;background:rgba(255,255,255,.78);border-bottom:1px solid rgba(31,48,42,.08)}
.pv-browserbar i{width:7px;height:7px;border-radius:50%;background:#c9b8aa;display:block}.pv-browserbar i:nth-child(2){background:#d6c7b8}.pv-browserbar i:nth-child(3){background:#9eb4a8}.pv-browserbar span{margin-left:8px;font-size:8px;letter-spacing:.07em;color:#6a7771}
.pv-page{padding:42px 34px;position:relative;min-height:250px;background:radial-gradient(circle at 90% 15%,rgba(190,210,194,.45),transparent 38%)}
.pv-page small{display:block;color:#7d6c63;text-transform:uppercase;letter-spacing:.14em;font-size:8px;margin-bottom:16px}.pv-page strong{display:block;font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:30px;line-height:1.05;letter-spacing:-.035em;color:#25332e;max-width:280px}.pv-page p{font-size:10px;line-height:1.6;color:#6c7772;max-width:270px;margin:16px 0}.pv-page b{display:inline-block;margin-top:22px;padding:10px 14px;border-radius:999px;background:#2f4c42;color:#fff;font-size:8px;letter-spacing:.04em}
.visual-praktijk-mobile{display:grid;place-items:center;background:linear-gradient(145deg,#f8ede7,#e9d3c8)}.pv-phone{width:178px;height:294px;border-radius:28px;background:#fff;box-shadow:0 18px 40px rgba(56,34,39,.2);padding:28px 18px 18px;position:relative;display:flex;flex-direction:column}.pv-phone-top{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:52px;height:5px;border-radius:99px;background:#25332e}.pv-phone small{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#a16872}.pv-phone strong{font-family:Georgia,'Times New Roman',serif;font-size:21px;line-height:1.08;color:#3c2d32;margin:23px 0 16px}.pv-phone i{display:block;height:34px;border-radius:10px;background:#f3e8e2;margin-top:7px}.pv-phone i:nth-of-type(2){width:75%}.pv-phone b{margin-top:auto;display:block;text-align:center;background:#754b56;color:#fff;border-radius:999px;padding:10px 8px;font-size:7px}
.visual-praktijk-flow{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px;background:radial-gradient(circle at center,rgba(255,255,255,.11),transparent 68%)}.visual-praktijk-flow>span{width:25px;height:1px;background:rgba(255,255,255,.35);position:relative}.visual-praktijk-flow>span::after{content:'›';position:absolute;color:rgba(255,255,255,.6);right:-2px;top:-9px}.pv-flow-card{width:108px;min-height:130px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);backdrop-filter:blur(8px);border-radius:18px;padding:18px 13px;color:#fff}.pv-flow-card small{display:block;color:rgba(255,255,255,.55);font-size:8px;margin-bottom:26px}.pv-flow-card strong{font-size:12px;line-height:1.35}.pv-flow-card.accent{background:#c59788;color:#251c20;border-color:transparent}.pv-flow-card.accent small{color:rgba(37,28,32,.55)}
.case-live-preview{position:absolute;inset:30px;border-radius:22px;overflow:hidden;background:#f5f0e9;color:#25332e;box-shadow:0 24px 80px rgba(0,0,0,.2)}.case-live-preview>small{display:block;margin:45px 34px 10px;text-transform:uppercase;letter-spacing:.14em;color:#75877f;font-size:8px}.case-live-preview>strong{display:block;margin:0 34px;font-family:Georgia,'Times New Roman',serif;font-size:33px;line-height:1.04;font-weight:500}.case-live-preview>a{position:absolute;left:34px;bottom:30px;color:#2e5145;font-size:10px;font-weight:700}.case-link{margin-top:26px}.case-outcomes{padding:105px 0}.case-detail-featured{padding:110px 0}
@media(max-width:760px){.work-intro{font-size:12px}.visual-praktijk-flow{gap:6px;padding:15px}.pv-flow-card{width:86px;min-height:115px;padding:14px 9px}.pv-flow-card strong{font-size:10px}.visual-praktijk-flow>span{width:12px}.case-live-preview>strong{font-size:26px}.case-live-preview>small{margin-top:35px}.case-live-preview{inset:18px}.pv-page{padding:34px 23px}.pv-page strong{font-size:25px}}