html { scroll-padding-top: 80px; }
body { -webkit-font-smoothing: antialiased; }

.hero-gradient {
    background: linear-gradient(135deg, #e0f2fe 0%, #f8fafc 55%, #e0f2fe 100%);
}
.dark .hero-gradient {
    background:
      radial-gradient(1200px 600px at 85% 10%, rgba(14,165,233,.38) 0%, transparent 55%),
      radial-gradient(900px 500px at 10% 85%, rgba(56,189,248,.22) 0%, transparent 60%),
      linear-gradient(135deg, #0b2036 0%, #0a0a0a 55%, #0c2d48 100%);
}
.grid-bg {
    background-image:
      linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}
.dark .grid-bg {
    background-image:
      linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
}
.glow-orb { position: absolute; border-radius: 9999px; filter: blur(70px); pointer-events: none; }
.card-hover { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .3s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(2,132,199,.15); }
.dark .card-hover:hover { box-shadow: 0 25px 50px -12px rgba(2,132,199,.25); }
.card-border { position: relative; }
.card-border::after {
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background: linear-gradient(135deg, rgba(14,165,233,.55), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events:none; opacity:0; transition: opacity .3s;
}
.card-border:hover::after { opacity: 1; }
.service-line { background: repeating-linear-gradient(to right, #0ea5e9 0 8px, transparent 8px 14px); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ring-rotate { animation: ringspin 40s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.app-card { position: relative; overflow: hidden; isolation: isolate; }
.app-card .mesh {
    position:absolute; inset:0; z-index:-2;
    background:
      radial-gradient(circle at 30% 20%, rgba(56,189,248,.45), transparent 52%),
      radial-gradient(circle at 75% 85%, rgba(3,105,161,.75), transparent 55%),
      linear-gradient(135deg, #0c4a6e 0%, #0b1220 100%);
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.app-card:hover .mesh { transform: scale(1.08); }
.app-card .overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); z-index:-1; transition: opacity .4s; }
.process-card { background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 100%); transition: border-color .3s, transform .35s; }
.process-card:hover { border-color: #0ea5e9; transform: translateY(-4px); }
.dark .process-card { background: linear-gradient(160deg, rgba(15,23,42,1) 0%, rgba(3,18,32,1) 100%); }
[data-count] { font-variant-numeric: tabular-nums; }
.bg-dots { background-image: radial-gradient(rgba(14,165,233,.18) 1px, transparent 1px); background-size: 22px 22px; }
.divider-line { height:1px; background: linear-gradient(90deg, transparent, rgba(14,165,233,.4), transparent); }
.spec-rail { background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%); }

.page-hero {
    position: relative;
    padding: 9rem 0 5rem;
    overflow: hidden;
}
.page-hero::before {
    content: ""; position:absolute; inset:0;
    background:
      radial-gradient(900px 400px at 80% 20%, rgba(14,165,233,.15) 0%, transparent 60%),
      radial-gradient(700px 400px at 10% 90%, rgba(56,189,248,.10) 0%, transparent 60%),
      linear-gradient(135deg, #e0f2fe 0%, #f8fafc 55%, #e0f2fe 100%);
    z-index: -2;
}
.dark .page-hero::before {
    background:
      radial-gradient(900px 400px at 80% 20%, rgba(14,165,233,.35) 0%, transparent 60%),
      radial-gradient(700px 400px at 10% 90%, rgba(56,189,248,.20) 0%, transparent 60%),
      linear-gradient(135deg, #0b2036 0%, #0a0a0a 55%, #0c2d48 100%);
}
.page-hero::after {
    content: ""; position:absolute; inset:0; z-index:-1;
    background-image:
      linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
    opacity: .6;
}
.dark .page-hero::after {
    background-image:
      linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
}