:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #050816; color: #cbd5e1; }
.mesh { background: radial-gradient(52% 60% at 76% 0%, rgba(37,99,235,.24), transparent 70%), radial-gradient(38% 35% at 5% 30%, rgba(124,58,237,.10), transparent 70%); }
.grid-mask { background-image: linear-gradient(rgba(148,163,184,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.065) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.surface { background: linear-gradient(145deg, rgba(17,24,39,.88), rgba(11,15,25,.92)); border: 1px solid rgba(255,255,255,.07); }
.surface-hover { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.surface-hover:hover { transform: translateY(-4px); border-color: rgba(96,165,250,.55); box-shadow: 0 20px 55px rgba(37,99,235,.12); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.menu-open { overflow: hidden; }
.cursor-glow { position: fixed; top: 0; left: 0; z-index: 20; width: 30rem; height: 30rem; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(37,99,235,.20) 0%, rgba(124,58,237,.09) 34%, transparent 70%); filter: blur(10px); transition: opacity .28s ease; }
.cursor-glow.active { opacity: 1; }
main, footer { position: relative; z-index: 1; }
::selection { background: rgba(37,99,235,.42); color: white; }

/* About hero: adapted from the supplied reference, while preserving this site's visual language. */
.about-hero { position: relative; min-height: min(860px, 100vh); overflow: hidden; isolation: isolate; }
.about-base { position: absolute; inset: 0; z-index: -6; background: radial-gradient(ellipse 120% 80% at 50% -10%, #101937 0%, transparent 60%), linear-gradient(180deg, #0b1023 0%, #050816 65%, #050816 100%); }
.about-blobs { position: absolute; inset: -10%; z-index: -5; will-change: transform; }
.about-blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform, opacity; }
.about-blob.one { width: 52vw; height: 52vw; top: -6%; left: 2%; background: radial-gradient(circle, #1d2e67 0%, transparent 70%); opacity: .55; animation: drift-a 52s cubic-bezier(.45,0,.55,1) infinite; }
.about-blob.two { width: 40vw; height: 40vw; top: 30%; right: -8%; background: radial-gradient(circle, #2a3e82 0%, transparent 72%); opacity: .4; animation: drift-b 60s cubic-bezier(.45,0,.55,1) infinite -8s; }
.about-blob.three { width: 34vw; height: 34vw; bottom: -10%; left: 20%; background: radial-gradient(circle, #162454 0%, transparent 68%); opacity: .45; animation: drift-c 45s cubic-bezier(.45,0,.55,1) infinite -20s; }
.about-blob.four { width: 26vw; height: 26vw; top: 8%; left: 45%; background: radial-gradient(circle, #1d2e67 0%, transparent 70%); opacity: .3; animation: drift-d 58s cubic-bezier(.45,0,.55,1) infinite -14s; }
.about-blob.five { width: 30vw; height: 30vw; bottom: 6%; right: 12%; background: radial-gradient(circle, #101937 0%, transparent 65%); opacity: .35; animation: drift-e 50s cubic-bezier(.45,0,.55,1) infinite -30s; }
.about-grid { position: absolute; inset: 0; z-index: -4; background-image: linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 90%); will-change: transform; }
.about-sheen { position: absolute; inset: -20%; z-index: -3; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.02) 48%, rgba(255,255,255,.035) 50%, rgba(255,255,255,.02) 52%, transparent 60%); background-size: 250% 250%; animation: sheen 46s linear infinite; }
.about-noise { position: absolute; inset: 0; z-index: -2; opacity: .03; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); background-size: 120px 120px; }
.about-marquee { position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: clamp(0px, 2vw, 24px); pointer-events: none; overflow: hidden; will-change: transform; }
.about-marquee-row { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.about-marquee-row.top { animation: about-marquee-ltr 40s linear infinite; }
.about-marquee-row.bottom { animation: about-marquee-rtl 40s linear infinite; }
.about-marquee-set { display: flex; align-items: center; flex-shrink: 0; }
.about-marquee-word { margin-right: .35em; color: transparent; font-family: Manrope, sans-serif; font-size: clamp(100px, 16vw, 300px); font-weight: 800; letter-spacing: -5px; line-height: .9; text-transform: uppercase; -webkit-text-stroke: 1px rgba(255,255,255,.12); user-select: none; }
.about-marquee-row.bottom .about-marquee-word { -webkit-text-stroke-color: rgba(255,255,255,.07); }
.mini-graph { background-image: linear-gradient(rgba(148,163,184,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px); background-size: 32px 32px; }

@keyframes drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 25% { transform: translate3d(4%,3%,0) scale(1.05); } 50% { transform: translate3d(-2%,6%,0) scale(.98); } 75% { transform: translate3d(-4%,1%,0) scale(1.03); } }
@keyframes drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 30% { transform: translate3d(-5%,4%,0) scale(1.04); } 60% { transform: translate3d(-2%,-5%,0) scale(.97); } }
@keyframes drift-c { 0%,100% { transform: translate3d(0,0,0) scale(1); } 40% { transform: translate3d(3%,-4%,0) scale(1.06); } 70% { transform: translate3d(6%,2%,0) scale(.96); } }
@keyframes drift-d { 0%,100% { transform: translate3d(0,0,0) scale(1); } 35% { transform: translate3d(-4%,5%,0) scale(1.03); } 65% { transform: translate3d(2%,-3%,0) scale(.99); } }
@keyframes drift-e { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-3%,-6%,0) scale(1.05); } }
@keyframes sheen { 0% { transform: translate3d(-8%,-6%,0); } 50% { transform: translate3d(6%,4%,0); } 100% { transform: translate3d(-8%,-6%,0); } }
@keyframes about-marquee-ltr { 0% { transform: translate3d(-50%,0,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes about-marquee-rtl { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-50%,0,0); } }

@media (prefers-reduced-motion: reduce), (pointer: coarse) { .cursor-glow { display: none; } .about-blob, .about-sheen, .about-marquee-row { animation: none !important; } }
@media (max-width: 1024px) { .about-marquee-word { font-size: clamp(80px, 18vw, 180px); letter-spacing: -3px; } .about-grid { background-size: 56px 56px; } }
@media (max-width: 640px) { .about-marquee-row.bottom { display: none; } .about-marquee-word { font-size: clamp(56px, 22vw, 100px); letter-spacing: -2px; } .about-blob { filter: blur(60px); } }

/* Mobile action bar defaults (applies to pages that load the shared stylesheet) */
@media (max-width: 767px) {
  main { padding-bottom: 92px; }
  .mobile-action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: .75rem; padding: .75rem; justify-content: center;
    background: linear-gradient(180deg, rgba(5,8,22,0), rgba(5,8,22,0.02));
    opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .32s ease, transform .32s cubic-bezier(.2,.9,.2,1);
  }
  .mobile-action-bar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .mobile-action-bar .btn { flex: 1; display: inline-flex; gap: .6rem; align-items: center; justify-content: center; padding: .95rem 1rem; border-radius: 9999px; font-weight: 700; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.12); color: #fff; text-decoration: none; box-shadow: 0 8px 30px rgba(2,6,23,.55); backdrop-filter: blur(6px); }
  .mobile-action-bar .btn i { font-size: 1.02rem; }
  .mobile-action-bar .btn:hover { background: rgba(255,255,255,.18); }
  /* Hide the floating bottom-right bubble on mobile to avoid duplication */
  .fixed.bottom-5.right-5 { display: none !important; }
}