.hero { min-height: 940px; padding-top: 175px; padding-bottom: 70px; overflow: hidden; background: radial-gradient(circle at 78% 18%, rgba(25,130,255,.11), transparent 30%), linear-gradient(180deg,#fff 0%,#fff 72%,#f6f9ff 100%); }
#tech-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .62; pointer-events: none; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.hero-orb-a { width: 410px; height: 410px; right: -150px; top: 160px; background: radial-gradient(circle at 35% 35%, rgba(47,153,255,.22), rgba(11,99,246,.02) 66%); }
.hero-orb-b { width: 280px; height: 280px; left: -110px; bottom: 50px; background: radial-gradient(circle, rgba(14,102,244,.1), transparent 70%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 72px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 13px; border: 1px solid rgba(11,99,246,.17); background: rgba(255,255,255,.7); border-radius: 999px; color: #315078; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; box-shadow: 0 10px 30px rgba(11,99,246,.07); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgba(11,99,246,.45); animation: pulseDot 1.8s infinite; }
@keyframes pulseDot { 70% { box-shadow: 0 0 0 8px rgba(11,99,246,0); } 100% { box-shadow: 0 0 0 0 rgba(11,99,246,0); } }
.hero h1 { max-width: 700px; margin: 23px 0 22px; font-size: clamp(50px, 5.4vw, 78px); line-height: .99; letter-spacing: -4.4px; }
.gradient-text { display: inline-block; color: var(--blue); background: linear-gradient(90deg, var(--blue-deep), var(--blue-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: opacity .22s, transform .22s; }
.gradient-text.switching { opacity: 0; transform: translateY(8px); }
.hero-lead { max-width: 620px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 34px; }
.hero-trust { display: flex; gap: 32px; margin-top: 48px; }
.hero-trust > div { display: flex; align-items: center; gap: 10px; }
.hero-trust strong { color: var(--blue); font-size: 13px; }
.hero-trust span { color: #4e5665; font-size: 12px; font-weight: 680; line-height: 1.35; }

.hero-visual { position: relative; min-height: 560px; display: grid; place-items: center; perspective: 1300px; right:-50px; }
.visual-shell { width: 100%; max-width: 550px; border-radius: 23px; background: #fff; border: 1px solid rgba(152,173,207,.28); box-shadow: 0 36px 90px rgba(35,67,128,.18), 0 0 0 8px rgba(255,255,255,.72); overflow: hidden; transform-style: preserve-3d; }
.browser-bar { height: 46px; display: grid; grid-template-columns: 74px 1fr 44px; align-items: center; background: #f7f9fc; border-bottom: 1px solid #e8edf5; padding: 0 12px; }
.browser-dots { display: flex; gap: 6px; }
.browser-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d5dce7; }
.browser-dots i:first-child { background: #ff7a7a; }.browser-dots i:nth-child(2) { background: #ffd56a; }.browser-dots i:last-child { background: #68d891; }
.browser-address { height: 26px; border: 1px solid #e5eaf1; background: #fff; border-radius: 7px; color: #96a0b0; font-size: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.browser-menu { text-align: right; color: #8993a3; font-size: 11px; letter-spacing: 1px; }
.browser-page { position: relative; min-height: 430px; overflow: hidden; background: linear-gradient(144deg, #fbfdff 0 49%, #eaf2ff 49.2% 100%); padding: 28px 32px; }
.browser-page::before { content:""; position:absolute; width:330px; height:330px; border:1px solid rgba(11,99,246,.1); border-radius:50%; right:-120px; top:30px; box-shadow: 0 0 0 35px rgba(11,99,246,.025), 0 0 0 72px rgba(11,99,246,.018); }
.mock-nav { position: relative; display:flex; align-items:center; justify-content:space-between; }
.mock-nav img { width: 74px; height: 40px; object-fit:contain; }
.mock-nav div { display:flex; gap:18px; }.mock-nav i { display:block; width:33px; height:4px; background:#cad3e0; border-radius:9px; }.mock-nav i:last-child{width:50px;background:var(--blue);}
.mock-hero { position:relative; margin-top:68px; max-width:380px; }
.mock-hero > span { font-size:9px; letter-spacing:3px; color:var(--blue); font-weight:900; }
.mock-hero .mock-title { margin:18px 0 22px; font-size:38px; line-height:1.04; letter-spacing:-2px; }.mock-hero .mock-title em { font-style:normal; color:var(--blue); }
.mock-button { width:106px; height:32px; border-radius:8px; background:var(--blue); box-shadow:0 12px 22px rgba(11,99,246,.23); }
.mock-cards { position:absolute; left:32px; right:32px; bottom:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mock-cards i { height:54px; background:rgba(255,255,255,.9); border:1px solid #e5ebf4; border-radius:10px; box-shadow:0 10px 24px rgba(33,70,130,.06); }
.floating-card { position:absolute; z-index:4; display:flex; align-items:center; gap:12px; min-width:175px; padding:14px 16px; border:1px solid rgba(214,223,236,.78); border-radius:14px; background:rgba(255,255,255,.89); backdrop-filter: blur(15px); box-shadow:0 18px 45px rgba(36,70,130,.16); transition: transform .2s ease; }
.floating-card-a { top:82px; right:-25px; }.floating-card-b { bottom:50px; left:-32px; }
.floating-card small { display:block; font-size:10px; color:#7b8492; }.floating-card strong { display:block; font-size:17px; letter-spacing:-.4px; }
.mini-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:#fff; background:var(--blue); }
.pulse-ring { width:34px; height:34px; border-radius:50%; border:8px solid rgba(11,99,246,.15); box-shadow:inset 0 0 0 3px var(--blue); }
.code-chip { position:absolute; right:15px; bottom:12px; padding:8px 12px; border-radius:9px; color:#fff; background:#111722; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; box-shadow:0 14px 30px rgba(13,17,23,.18); }

.stats-strip { position:relative; z-index:2; margin-top:70px; padding:26px 28px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(213,222,235,.8); background:rgba(255,255,255,.76); backdrop-filter:blur(12px); border-radius:18px; box-shadow:0 16px 45px rgba(35,67,128,.07); }
.stats-strip > div { padding:0 26px; border-right:1px solid #e2e8f1; }.stats-strip > div:last-child { border-right:0; }
.stats-strip strong { display:block; color:var(--blue); font-size:27px; letter-spacing:-1.3px; }.stats-strip span { display:block; color:#727b89; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; }

.logo-marquee { overflow:hidden; border-top:1px solid #e6ebf2; border-bottom:1px solid #e6ebf2; background:#fff; }
.marquee-track { width:max-content; display:flex; align-items:center; gap:28px; padding:16px 0; animation:marquee 28s linear infinite; color:#8b94a2; }
.marquee-track span { font-size:12px; font-weight:900; letter-spacing:1.8px; }.marquee-track i { color:var(--blue); font-style:normal; }
@keyframes marquee { to { transform:translateX(-50%); } }