/* ============================================================ 0. TOKENS ============================================================ */ :root{ --c-bg:#0a0a0c; --c-bg-soft:#0e1015; --c-panel: rgba(16,18,24,0.58); --c-panel-strong: rgba(13,15,20,0.86); --c-panel-solid:#101218; --c-border: rgba(255,255,255,0.09); --c-border-bright: rgba(0,240,255,0.35); --c-cyan:#00f0ff; --c-cyan-dim: #0aa8b8; --c-green:#3dffa6; --c-purple:#b25bff; --c-text:#f3f5f7; --c-text-dim:#92a0ad; --c-text-dimmer:#5b6573; --font-display:'Space Grotesk', 'Segoe UI', sans-serif; --font-body:'Inter', 'Segoe UI', sans-serif; --font-mono:'JetBrains Mono', 'Consolas', monospace; --ease-out: cubic-bezier(.16,.84,.44,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --maxw: 1240px; --nav-h: 78px; /* Status colors */ --status-operational: #3dffa6; --status-degraded: #ffb800; --status-down: #ff4757; } /* ============================================================ LIGHT MODE — toggled by adding [data-theme="light"] on The 3D canvas deliberately stays dark (deep navy) so the animated globe reads as a "lit screen" embedded in the page — a design choice that looks better than trying to make WebGL particles visible on a light background. ============================================================ */ [data-theme="light"]{ --c-bg: #f0f3f7; --c-bg-soft: #e8edf3; --c-panel: rgba(255,255,255,0.72); --c-panel-strong: rgba(245,248,252,0.96); --c-panel-solid: #ffffff; --c-border: rgba(0,0,0,0.09); --c-border-bright: rgba(0,160,190,0.45); /* NOTE: --c-cyan / --c-green / --c-purple / --c-text* are deliberately NOT redefined here. The 3D globe canvas stays dark in BOTH themes (see #bg-canvas below) and sits, full-viewport and fixed, behind every section — including headings, eyebrows, and paragraphs that aren't inside a card. So body-level text and accent colors both need to stay at their vibrant, dark-background-friendly values to remain legible there. Muted, light-background-friendly versions of both are instead scoped ONLY to actual light surfaces (cards, nav, inputs, etc.) via CSS custom-property re-scoping — see "LIGHT-SURFACE COLORS" immediately below. */ } [data-theme="light"] body{ background: var(--c-bg); } /* ============================================================ LIGHT-SURFACE COLORS Every element that actually gets a light background in light mode (cards, nav, inputs, tooltips, badges, etc.) re-scopes both the text-color AND accent-color variables here, right before the elements that use them below. Anything NOT in this list keeps the page's default vibrant colors, because its real backdrop is the always-dark 3D canvas, not a light surface. ============================================================ */ [data-theme="light"] .glass, [data-theme="light"] .nav, [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] .tech-badge, [data-theme="light"] .back-to-top, [data-theme="light"] .landmark-label, [data-theme="light"] .globe-tooltip, [data-theme="light"] .hud, [data-theme="light"] .nav-dropdown-menu, [data-theme="light"] .drag-hint, [data-theme="light"] .btn-ghost{ --c-text: #111722; --c-text-dim: #3d4a58; --c-text-dimmer: #6b7d8e; --c-cyan: #0094a8; --c-cyan-dim: #00677a; --c-green: #00915a; --c-purple: #7c2fd4; /* Redefining the custom properties above is NOT enough on its own: `color` is an inherited property, and inheritance passes down the already-COMPUTED value from body, not "recompute using whatever --c-text is in scope here." Any element that itself never writes `color: var(--c-text)` explicitly (e.g. a plain

or

inside a card) would otherwise keep inheriting body's light-mode-default light color straight through this container. Explicitly setting `color` here forces a fresh resolution at this element, using the dark values just defined above, which THEN correctly inherits down to every plain heading/paragraph/span inside it. */ color: var(--c-text); } [data-theme="light"] #bg-canvas{ background: radial-gradient(ellipse at 60% 30%, #0d1a2e 0%, #070c14 60%, #050810 100%); /* slightly more blue-tinted dark so the globe reads as intentional against the light page, not accidentally left in the wrong mode */ opacity: 0.98; } [data-theme="light"] .fx-vignette, [data-theme="light"] .fx-scanlines, [data-theme="light"] .fx-grain{ opacity:0.35; } [data-theme="light"] .nav{ background: rgba(240,243,247,0.92); border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .nav.is-scrolled{ background: rgba(240,243,247,0.97); box-shadow: 0 2px 20px rgba(0,0,0,0.08); } [data-theme="light"] .glass{ background: rgba(255,255,255,0.75); border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.07); backdrop-filter: blur(14px); } [data-theme="light"] .glass:hover{ border-color: rgba(0,148,168,0.3); } [data-theme="light"] .btn-ghost{ border-color: rgba(0,0,0,0.14); color: var(--c-text-dim); } [data-theme="light"] .btn-ghost:hover{ background: rgba(0,0,0,0.05); border-color: var(--c-cyan); color: var(--c-cyan); } [data-theme="light"] .hero-inner h1 span{ color: var(--c-cyan); } [data-theme="light"] .brand{ color: var(--c-text); } [data-theme="light"] .brand-mark svg polygon{ stroke: var(--c-cyan); } [data-theme="light"] .nav-links a{ color: var(--c-text-dim); } [data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.is-active{ color: var(--c-text); } [data-theme="light"] .hud{ background: rgba(245,248,252,0.88); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .hud-row b{ color: var(--c-text); } [data-theme="light"] .globe-tooltip{ background: rgba(245,248,252,0.97); border-color: rgba(0,0,0,0.1); color: var(--c-text); } [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea{ background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.12); color: var(--c-text); } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus{ border-color: var(--c-cyan); } [data-theme="light"] .nav-dropdown-menu{ background: rgba(245,248,252,0.98); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .tech-badge{ background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.12); color: var(--c-text-dim); } [data-theme="light"] .sla-bar{ background: rgba(0,0,0,0.08); } [data-theme="light"] .status-feed-item{ border-top-color: rgba(0,0,0,0.07); } [data-theme="light"] .reading-progress{ background: rgba(0,0,0,0.06); } [data-theme="light"] .back-to-top{ background: rgba(245,248,252,0.95); border-color: rgba(0,0,0,0.12); color: var(--c-text-dim); } [data-theme="light"] .floating-cta{ box-shadow: 0 8px 30px -6px rgba(0,120,140,0.35); } [data-theme="light"] .landmark-label{ background: rgba(255,252,245,0.88); border-color: rgba(180,130,60,.45); color: #6b4a00; } [data-theme="light"] .drag-hint{ background: rgba(245,248,252,0.92); border-color: rgba(0,0,0,0.1); color: var(--c-text-dim); } /* ============================================================ 1. RESET ============================================================ */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } body{ margin:0; background:var(--c-bg); color:var(--c-text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0; letter-spacing:-0.01em; } p{ margin:0; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; cursor:pointer; } img,svg{ display:block; max-width:100%; } input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; } ::selection{ background:rgba(0,240,255,0.28); color:#fff; } /* scrollbar */ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--c-bg); } ::-webkit-scrollbar-thumb{ background:#1c2129; border-radius:8px; } ::-webkit-scrollbar-thumb:hover{ background:var(--c-cyan-dim); } /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--c-cyan); outline-offset:3px; border-radius:4px; } /* ============================================================ 2. LAYOUT HELPERS ============================================================ */ .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-cyan); } .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-cyan); box-shadow:0 0 8px var(--c-cyan), 0 0 18px var(--c-cyan); } .section-head{ max-width:640px; margin-bottom:56px; } .section-head h2{ font-size:clamp(28px, 4vw, 42px); margin:14px 0 16px; } .section-head p{ color:var(--c-text-dim); font-size:16.5px; max-width:560px; } section{ position:relative; padding:128px 0; } /* ---------------------------------------------------------------- POINTER-EVENTS LAYERING ---------------------------------------------------------------- */ main{ pointer-events:none; } main a, main button, main input, main select, main textarea, main label, main .glass, main p, main li, main table, main .svc-card, main .logo-card, main .role-row, main .faq-item, main .testi-dot, main .tag-chip{ pointer-events:auto; } .glass{ background:var(--c-panel); border:1px solid var(--c-border); border-radius:18px; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); transition:border-color 0.4s ease, box-shadow 0.4s ease; } .glass:hover{ border-color:var(--c-border-bright); box-shadow:0 8px 32px -12px rgba(0,240,255,0.15); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.01em; padding:15px 28px; border-radius:10px; border:1px solid transparent; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s, border-color .35s; white-space:nowrap; } .btn-primary{ background:linear-gradient(135deg, var(--c-cyan), #00a7c9); color:#021016; box-shadow:0 0 0 0 rgba(0,240,255,.0), 0 8px 30px -8px rgba(0,240,255,.45); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 28px 2px rgba(0,240,255,.55), 0 14px 34px -10px rgba(0,240,255,.5); } .btn-ghost{ background:rgba(255,255,255,0.02); border-color:var(--c-border); color:var(--c-text); } .btn-ghost:hover{ border-color:var(--c-border-bright); background:rgba(0,240,255,0.06); transform:translateY(-2px); } .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal.is-visible{ opacity:1; transform:translateY(0); } .reveal-stagger > *{ transition-delay: calc(var(--i,0) * 90ms); } /* ============================================================ 3. BACKGROUND CANVAS + AMBIENT FX ============================================================ */ #bg-canvas{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block; background:radial-gradient(ellipse at 70% 28%, #0d1320 0%, #0a0a0c 55%, #060607 100%); } .fx-vignette{ position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(5,5,7,0.55) 100%); } .fx-scanlines{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; background:repeating-linear-gradient(to bottom, #fff 0px, #fff 1px, transparent 1px, transparent 3px); mix-blend-mode:overlay; } .fx-grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .no-webgl #bg-canvas{ display:none; } .no-webgl body{ background:radial-gradient(ellipse at 70% 20%, #111620, #0a0a0c 60%); } main{ position:relative; z-index:2; } /* ============================================================ 4. PRELOADER (UPGRADED) ============================================================ */ #preloader{ position:fixed; inset:0; z-index:999; background:#06070a; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; transition:opacity .6s var(--ease-out), visibility .6s; } #preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; } .pre-mark{ width:54px; height:54px; } .pre-mark svg{ width:100%; height:100%; animation:prePulse 1.8s ease-in-out infinite; } @keyframes prePulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.6; transform:scale(0.95); } } .pre-bar{ width:200px; height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; } .pre-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--c-cyan), var(--c-green)); box-shadow:0 0 12px var(--c-cyan); } .pre-label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; color:var(--c-text-dimmer); text-transform:uppercase; } .pre-sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--c-text-dimmer); opacity:0.7; } /* ============================================================ 5. NAVBAR (UPGRADED - Glass Command Bridge) ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h); display:flex; align-items:center; border-bottom:1px solid transparent; transition:background .4s, border-color .4s, backdrop-filter .4s, height .3s; } .nav.is-scrolled{ background:rgba(8,9,12,0.72); border-color:var(--c-border); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); height:62px; } .nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18.5px; letter-spacing:.01em; } .brand-status{ font-family:var(--font-mono); font-size:8px; letter-spacing:.08em; color:var(--c-green); background:rgba(61,255,166,0.12); padding:2px 10px; border-radius:100px; border:1px solid rgba(61,255,166,0.2); display:none; } @media (min-width: 1024px){ .brand-status{ display:inline-flex; } } .brand-mark{ width:30px; height:30px; flex:0 0 auto; } .nav-links{ display:flex; align-items:center; gap:28px; } .nav-links a{ font-size:14px; color:var(--c-text-dim); position:relative; padding:6px 0; transition:color .25s; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--c-cyan); transition:width .3s var(--ease-out); box-shadow:0 0 8px var(--c-cyan); } .nav-links a:hover{ color:var(--c-text); } .nav-links a:hover::after{ width:100%; } .nav-links li:last-child{ display:none; } /* Dropdown */ .nav-dropdown{ position:relative; } .nav-dropdown-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); min-width:220px; padding:8px 0; background:var(--c-panel-strong); backdrop-filter:blur(20px); border:1px solid var(--c-border); border-radius:12px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s, transform .3s, visibility .3s; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(4px); } .nav-dropdown-menu li a{ display:flex; align-items:center; gap:10px; padding:10px 18px; font-size:13px; color:var(--c-text-dim); transition:background .25s, color .25s; } .nav-dropdown-menu li a:hover{ background:rgba(0,240,255,0.06); color:var(--c-text); } .nav-arrow{ font-size:10px; transition:transform .3s; } .nav-dropdown:hover .nav-arrow{ transform:rotate(180deg); } .nav-right{ display:flex; align-items:center; gap:18px; } .theme-toggle{ position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--c-border); background:var(--c-panel); color:var(--c-text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .25s, color .25s, background .25s; flex:0 0 auto; } .theme-toggle:hover{ border-color:var(--c-border-bright); color:var(--c-cyan); } .theme-toggle svg{ position:absolute; width:18px; height:18px; transition:opacity .3s, transform .4s var(--ease-out); } .theme-toggle .icon-sun{ opacity:0; transform:rotate(-90deg) scale(.6); } .theme-toggle .icon-moon{ opacity:1; transform:rotate(0) scale(1); } [data-theme="light"] .theme-toggle .icon-sun{ opacity:1; transform:rotate(0) scale(1); } [data-theme="light"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(90deg) scale(.6); } @media (max-width: 640px){ .theme-toggle{ width:34px; height:34px; } .theme-toggle svg{ width:16px; height:16px; } } .nav .btn-primary{ padding:10px 20px; font-size:13px; } .nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:60; } .nav-burger span{ width:22px; height:2px; background:var(--c-text); transition:transform .3s, opacity .3s; border-radius:2px; } .menu-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .menu-open .nav-burger span:nth-child(2){ opacity:0; } .menu-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ============================================================ 6. HERO (UPGRADED) ============================================================ */ .hero{ min-height:100vh; display:flex; align-items:center; padding-top:var(--nav-h); padding-bottom:80px; position:relative; } .hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(100deg, rgba(7,8,10,0.92) 0%, rgba(7,8,10,0.74) 40%, rgba(7,8,10,0.22) 62%, transparent 78%); } .hero .wrap{ width:100%; position:relative; z-index:1; } .hero-inner{ max-width:720px; } .hero-inner .eyebrow{ margin-bottom:22px; } .hero h1{ font-size:clamp(36px, 5.2vw, 60px); background:linear-gradient(110deg, #ffffff 30%, #cdeffd 55%, var(--c-cyan) 78%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero .sub{ margin-top:24px; font-size:17.5px; color:var(--c-text-dim); max-width:540px; } .hero-cta{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; } .hero-meta{ display:grid; grid-template-columns:repeat(4, auto); gap:30px; margin-top:56px; padding-top:28px; border-top:1px solid var(--c-border); max-width:640px; } .hero-meta div b{ display:block; font-family:var(--font-mono); font-size:24px; color:var(--c-text); } .hero-meta div span{ font-size:12px; color:var(--c-text-dimmer); font-family:var(--font-mono); letter-spacing:.04em; } .hero-trend{ display:block; font-size:10px; color:var(--c-green); margin-top:2px; font-family:var(--font-mono); } /* HUD */ .hud{ position:absolute; right:max(32px, calc(50vw - 620px + 32px)); bottom:130px; width:248px; padding:18px 18px 16px; display:block; } .hud-title{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--c-green); text-transform:uppercase; margin-bottom:12px;} .hud-title i{ width:6px;height:6px;border-radius:50%; background:var(--c-green); box-shadow:0 0 8px var(--c-green); animation:pulse-dot 1.8s infinite; } @keyframes pulse-dot{ 0%,100%{opacity:1;} 50%{opacity:.35;} } .hud-row{ display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-top:1px solid rgba(255,255,255,.04); } .hud-row:first-of-type{ border-top:none; } .hud-row span{ font-size:11px; color:var(--c-text-dimmer); font-family:var(--font-mono); } .hud-row b{ font-family:var(--font-mono); font-size:13px; color:var(--c-text); font-weight:500; } .hud-footer{ margin-top:10px; padding-top:10px; border-top:1px solid var(--c-border); font-family:var(--font-mono); font-size:9px; color:var(--c-green); letter-spacing:.06em; text-align:center; } .scroll-cue{ position:absolute; left:32px; bottom:42px; display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:11px; color:var(--c-text-dimmer); letter-spacing:.12em; text-transform:uppercase; } .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(to bottom, var(--c-cyan), transparent); position:relative; overflow:hidden;} .scroll-cue .line::after{ content:""; position:absolute; left:0; top:-34px; width:100%; height:34px; background:linear-gradient(to bottom, transparent, #fff); animation:scroll-cue-move 1.8s infinite var(--ease-in-out); } @keyframes scroll-cue-move{ 0%{ top:-34px;} 100%{ top:34px; } } /* ============================================================ 7. SERVICES (UPGRADED) ============================================================ */ .services{ background:linear-gradient(to bottom, transparent, rgba(8,9,13,.55) 14%, rgba(8,9,13,.78) 50%, rgba(8,9,13,.55) 86%, transparent); } .svc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; } .svc-card{ position:relative; padding:30px 26px 28px; cursor:pointer; overflow:hidden; transition:transform .45s var(--ease-out), border-color .45s, box-shadow .45s; } .svc-card::before{ content:""; position:absolute; inset:0; border-radius:18px; opacity:0; pointer-events:none; background:radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(0,240,255,.16), transparent 70%); transition:opacity .4s; } .svc-card:hover::before{ opacity:1; } .svc-card:hover{ transform:translateY(-6px); border-color:var(--c-border-bright); box-shadow:0 18px 50px -20px rgba(0,240,255,.35); } .svc-card[data-accent="purple"]:hover{ border-color:rgba(178,91,255,.45); box-shadow:0 18px 50px -20px rgba(178,91,255,.35); } .svc-card[data-accent="green"]:hover{ border-color:rgba(61,255,166,.4); box-shadow:0 18px 50px -20px rgba(61,255,166,.3); } .svc-card.is-selected{ border-color:var(--c-border-bright); box-shadow:0 0 0 1px rgba(0,240,255,.25), 0 18px 50px -20px rgba(0,240,255,.4); } .svc-card[data-accent="purple"].is-selected{ border-color:rgba(178,91,255,.55); box-shadow:0 0 0 1px rgba(178,91,255,.3), 0 18px 50px -20px rgba(178,91,255,.4); } .svc-card[data-accent="green"].is-selected{ border-color:rgba(61,255,166,.5); box-shadow:0 0 0 1px rgba(61,255,166,.3), 0 18px 50px -20px rgba(61,255,166,.35); } .svc-icon{ width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.03); border:1px solid var(--c-border); color:var(--c-cyan); margin-bottom:18px; transition:color .4s, border-color .4s, background .4s; } .svc-card[data-accent="purple"] .svc-icon{ color:var(--c-purple); } .svc-card[data-accent="green"] .svc-icon{ color:var(--c-green); } .svc-card:hover .svc-icon{ background:rgba(255,255,255,.06); } .svc-icon svg{ width:24px; height:24px; } .svc-card h3{ font-size:18px; margin-bottom:8px; } .svc-card p{ color:var(--c-text-dim); font-size:14px; line-height:1.6; margin-bottom:14px;} .svc-stats{ display:flex; gap:16px; margin-bottom:16px; padding:10px 12px; background:rgba(255,255,255,.03); border-radius:8px; border:1px solid var(--c-border); } .svc-stat{ display:flex; flex-direction:column; gap:2px; } .svc-stat-label{ font-size:9px; font-family:var(--font-mono); color:var(--c-text-dimmer); text-transform:uppercase; letter-spacing:.06em; } .svc-stat-value{ font-size:13px; font-family:var(--font-mono); color:var(--c-text); font-weight:500; } .svc-link{ font-family:var(--font-mono); font-size:12.5px; color:var(--c-text-dimmer); display:inline-flex; align-items:center; gap:7px; transition:color .3s, gap .3s; } .svc-card:hover .svc-link{ color:var(--c-cyan); gap:11px; } .svc-card[data-accent="purple"]:hover .svc-link{ color:var(--c-purple); } .svc-card[data-accent="green"]:hover .svc-link{ color:var(--c-green); } /* ============================================================ 8. ABOUT / STATS ============================================================ */ .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; } .about-copy p{ color:var(--c-text-dim); font-size:16px; margin-bottom:26px; } .about-list{ display:flex; flex-direction:column; gap:16px; } .about-list li{ display:flex; gap:13px; align-items:flex-start; font-size:14.5px; color:var(--c-text); } .about-list svg{ flex:0 0 auto; width:18px; height:18px; color:var(--c-green); margin-top:2px; } .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .stat-card{ padding:28px 24px; } .stat-card b{ display:block; font-family:var(--font-mono); font-size:clamp(28px,4vw,38px); font-weight:600; background:linear-gradient(120deg, #fff, var(--c-cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .stat-card span{ display:block; margin-top:10px; font-size:13px; color:var(--c-text-dim); } /* ============================================================ 9. STATUS PAGE ============================================================ */ .status-overview{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:24px 28px; margin-bottom:32px; } .status-global{ display:flex; align-items:center; gap:16px; } .status-dot-large{ font-size:32px; color:var(--status-operational); animation:pulse-dot 2s infinite; } .status-global h3{ font-size:20px; } .status-global p{ color:var(--c-text-dim); font-size:14px; } .status-updated{ display:flex; align-items:center; gap:12px; font-size:12px; color:var(--c-text-dimmer); } .status-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .status-item{ padding:22px 24px; } .status-item-header{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .status-item-icon{ font-size:20px; } .status-item-name{ font-weight:600; font-size:15px; flex:1; } .status-item-badge{ font-family:var(--font-mono); font-size:10px; padding:2px 12px; border-radius:100px; text-transform:uppercase; letter-spacing:.06em; } .status-item-badge.operational{ color:var(--status-operational); background:rgba(61,255,166,0.12); border:1px solid rgba(61,255,166,0.2); } .status-item-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; } .status-metric{ text-align:center; } .metric-label{ display:block; font-size:9px; font-family:var(--font-mono); color:var(--c-text-dimmer); text-transform:uppercase; letter-spacing:.06em; } .metric-value{ display:block; font-size:14px; font-family:var(--font-mono); color:var(--c-text); font-weight:500; margin-top:2px; } .status-history{ display:flex; gap:4px; align-items:flex-end; height:20px; } .history-bar{ flex:1; height:var(--h,12px); background:var(--status-operational); border-radius:2px; min-height:4px; opacity:0.6; transition:height 0.3s; } .history-bar:nth-child(1){ --h:12px; } .history-bar:nth-child(2){ --h:16px; } .history-bar:nth-child(3){ --h:14px; } .history-bar:nth-child(4){ --h:20px; } .history-bar:nth-child(5){ --h:18px; } .history-bar:nth-child(6){ --h:15px; } .history-bar:nth-child(7){ --h:13px; } .history-bar:hover{ opacity:1; } /* Incidents */ .incident-list{ padding:8px 0; } .incident-item{ display:grid; grid-template-columns:100px 1fr 140px; gap:20px; align-items:center; padding:16px 24px; border-bottom:1px solid var(--c-border); } .incident-item:last-child{ border-bottom:none; } .incident-status{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; } .incident-status.resolved{ color:var(--status-operational); } .incident-detail h4{ font-size:14px; margin-bottom:2px; } .incident-detail p{ font-size:12px; color:var(--c-text-dim); } .incident-time{ font-size:12px; color:var(--c-text-dimmer); font-family:var(--font-mono); text-align:right; } /* ============================================================ 10. CONTACT ============================================================ */ .contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; } .contact-form{ padding:40px; } .field{ margin-bottom:20px; } .field label{ display:block; font-size:12.5px; font-family:var(--font-mono); letter-spacing:.05em; color:var(--c-text-dimmer); margin-bottom:8px; text-transform:uppercase; } .field input, .field select, .field textarea{ width:100%; background:rgba(255,255,255,.03); border:1px solid var(--c-border); border-radius:9px; padding:13px 14px; color:var(--c-text); transition:border-color .3s, background .3s; resize:vertical; } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--c-cyan); background:rgba(0,240,255,.04); outline:none; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .form-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:28px; flex-wrap:wrap; gap:14px;} .form-status{ font-size:13px; font-family:var(--font-mono); color:var(--c-text-dimmer); min-height:18px; } .form-status.ok{ color:var(--c-green); } .form-status.err{ color:#ff6b6b; } .contact-side{ display:flex; flex-direction:column; gap:18px; } .side-card{ padding:26px 24px; } .side-card h4{ font-size:13px; color:var(--c-text-dimmer); font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px;} .side-row{ display:flex; align-items:center; gap:12px; font-size:14.5px; padding:9px 0; } .side-row svg{ width:17px; height:17px; color:var(--c-cyan); flex:0 0 auto; } .social-row{ display:flex; gap:10px; margin-top:6px; } .social-row a{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; border:1px solid var(--c-border); color:var(--c-text-dim); transition:border-color .3s, color .3s, background .3s; } .social-row a:hover{ border-color:var(--c-border-bright); color:var(--c-cyan); background:rgba(0,240,255,.06); } .social-row svg{ width:16px; height:16px; } /* ============================================================ 11. FOOTER (UPGRADED) ============================================================ */ footer{ padding:64px 0 0; border-top:1px solid var(--c-border); } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; } .footer-brand p{ color:var(--c-text-dim); font-size:14px; margin:16px 0 20px; max-width:280px; } .footer-col h5{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-dimmer); margin-bottom:16px; } .footer-col ul{ display:flex; flex-direction:column; gap:11px; } .footer-col a{ font-size:14px; color:var(--c-text-dim); transition:color .25s; } .footer-col a:hover{ color:var(--c-cyan); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0 36px; border-top:1px solid var(--c-border); flex-wrap:wrap; gap:12px; } .footer-bottom p{ font-size:12.5px; color:var(--c-text-dimmer); } .footer-bottom .tag{ font-family:var(--font-mono); font-size:11.5px; color:var(--c-text-dimmer); } .status-dot{ color:var(--c-green); } /* nav active state */ .nav-links a.is-active{ color:var(--c-text); } .nav-links a.is-active::after{ width:100%; } /* ============================================================ 12. PAGE HERO ============================================================ */ .page-hero{ min-height:48vh; display:flex; align-items:center; padding-top:calc(var(--nav-h) + 40px); padding-bottom:64px; position:relative; } .page-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(100deg, rgba(7,8,10,0.92) 0%, rgba(7,8,10,0.7) 42%, rgba(7,8,10,0.2) 64%, transparent 80%); } .page-hero .wrap{ position:relative; z-index:1; } .breadcrumb{ display:flex; align-items:center; gap:8px; margin-bottom:18px; font-family:var(--font-mono); font-size:12px; color:var(--c-text-dimmer); letter-spacing:.04em; } .breadcrumb a{ color:var(--c-text-dimmer); transition:color .25s; } .breadcrumb a:hover{ color:var(--c-cyan); } .page-hero h1{ font-size:clamp(34px, 5vw, 56px); max-width:720px; } .page-hero .sub{ margin-top:20px; font-size:17px; color:var(--c-text-dim); max-width:600px; } .page-hero-meta{ display:flex; gap:30px; margin-top:36px; flex-wrap:wrap; } .page-hero-meta div b{ display:block; font-family:var(--font-mono); font-size:20px; color:var(--c-cyan); } .page-hero-meta div span{ font-size:11.5px; color:var(--c-text-dimmer); font-family:var(--font-mono); } /* ============================================================ 13. SERVICE DETAIL ============================================================ */ .svc-detail{ padding:64px 0; border-top:1px solid var(--c-border); } .svc-detail:first-of-type{ border-top:none; } .svc-detail{ border-left:2px solid transparent; transition:border-color .5s; } .svc-detail.is-active-viz{ border-left-color:rgba(0,240,255,.35); } .svc-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .svc-detail.reverse .svc-detail-grid{ direction:rtl; } .svc-detail.reverse .svc-detail-grid > *{ direction:ltr; } .svc-index{ font-family:var(--font-mono); font-size:13px; color:var(--c-text-dimmer); letter-spacing:.08em; margin-bottom:14px; display:block; } .svc-detail h2{ font-size:clamp(24px,3vw,32px); margin-bottom:16px; } .svc-detail > .svc-detail-grid > div > p.lead{ color:var(--c-text-dim); font-size:15.5px; margin-bottom:22px; } .check-list{ display:flex; flex-direction:column; gap:13px; margin-bottom:26px; } .check-list li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--c-text); } .check-list svg{ flex:0 0 auto; width:17px; height:17px; margin-top:2px; color:var(--c-green); } .tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; } .tag-chip{ font-family:var(--font-mono); font-size:11.5px; padding:6px 12px; border-radius:100px; border:1px solid var(--c-border); color:var(--c-text-dim); letter-spacing:.02em; } .svc-detail-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--c-cyan); transition:gap .3s; } .svc-detail-link:hover{ gap:13px; } .illu-frame{ position:relative; aspect-ratio:1/1; max-width:420px; margin:0 auto; border-radius:24px; border:1px solid var(--c-border); background:radial-gradient(circle at 50% 40%, rgba(0,240,255,.07), transparent 70%); display:flex; align-items:center; justify-content:center; padding:36px; } .illu-frame svg{ width:100%; height:100%; } /* Compare table */ .compare-wrap{ overflow-x:auto; border-radius:18px; border:1px solid var(--c-border); } table.compare{ width:100%; border-collapse:collapse; min-width:640px; } table.compare th, table.compare td{ padding:16px 20px; text-align:left; font-size:14px; border-bottom:1px solid var(--c-border); white-space:nowrap; } table.compare th{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-dimmer); background:rgba(255,255,255,.02); } table.compare td{ color:var(--c-text-dim); } table.compare td:first-child{ color:var(--c-text); font-weight:500; } table.compare tr:last-child td{ border-bottom:none; } /* ============================================================ 14. TIMELINE (about) ============================================================ */ .timeline{ position:relative; padding-left:32px; } .timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:linear-gradient(to bottom, var(--c-cyan), var(--c-purple), transparent); } .timeline-item{ position:relative; padding-bottom:38px; } .timeline-item:last-child{ padding-bottom:0; } .timeline-item::before{ content:""; position:absolute; left:-32px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--c-bg); border:2px solid var(--c-cyan); box-shadow:0 0 10px rgba(0,240,255,.5); } .timeline-item b{ font-family:var(--font-mono); font-size:12.5px; color:var(--c-cyan); display:block; margin-bottom:6px; } .timeline-item h4{ font-size:17px; margin-bottom:6px; } .timeline-item p{ font-size:14px; color:var(--c-text-dim); max-width:480px; } .values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .perk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:40px; } .perk-card{ padding:24px 22px; text-align:left; } .perk-card svg{ width:26px; height:26px; color:var(--c-green); margin-bottom:14px; } .perk-card h4{ font-size:15.5px; margin-bottom:8px; } .perk-card p{ font-size:13.5px; color:var(--c-text-dim); } .roles-list{ display:flex; flex-direction:column; gap:1px; border:1px solid var(--c-border); border-radius:16px; overflow:hidden; } .role-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:20px 24px; background:var(--c-panel); transition:background .3s; } .role-row:hover{ background:rgba(0,240,255,.05); } .role-row + .role-row{ border-top:1px solid var(--c-border); } .role-main{ display:flex; flex-direction:column; gap:4px; } .role-main b{ font-size:15.5px; } .role-tags{ display:flex; gap:10px; flex-wrap:wrap; } .role-tags span{ font-family:var(--font-mono); font-size:11.5px; color:var(--c-text-dimmer); } .role-tags span:not(:last-child)::after{ content:"·"; margin-left:10px; color:var(--c-text-dimmer); } /* ============================================================ 15. LOGO CLOUD ============================================================ */ .logo-cloud{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .logo-card{ display:flex; align-items:center; justify-content:center; padding:28px 18px; height:88px; color:var(--c-text-dimmer); transition:color .3s, border-color .3s, transform .3s; } .logo-card:hover{ color:var(--c-text); border-color:var(--c-border-bright); transform:translateY(-3px); } .logo-card svg{ width:100%; height:28px; } /* ============================================================ 16. CASE STUDIES ============================================================ */ .case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .case-card{ padding:30px 26px; display:flex; flex-direction:column; gap:16px; } .case-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-purple); } .case-card h3{ font-size:19px; } .case-card p{ font-size:14px; color:var(--c-text-dim); } .case-metrics{ display:flex; gap:20px; padding-top:14px; border-top:1px solid var(--c-border); } .case-metrics div b{ display:block; font-family:var(--font-mono); font-size:21px; color:var(--c-cyan); } .case-metrics div span{ font-size:11px; color:var(--c-text-dimmer); } .case-card .svc-detail-link{ margin-top:auto; } .trust-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .trust-badge{ display:flex; align-items:center; gap:12px; padding:18px 18px; } .trust-badge svg{ width:22px; height:22px; color:var(--c-green); flex:0 0 auto; } .trust-badge span{ font-size:13px; color:var(--c-text); line-height:1.3; } /* ============================================================ 17. TESTIMONIAL CAROUSEL ============================================================ */ .testi-carousel{ position:relative; max-width:760px; margin:0 auto; } .testi-viewport{ overflow:hidden; border-radius:20px; } .testi-track{ display:flex; transition:transform .55s var(--ease-out); } .testi-slide{ flex:0 0 100%; padding:44px 48px; } .testi-quote{ font-family:var(--font-display); font-size:clamp(17px,2.2vw,22px); line-height:1.5; color:var(--c-text); margin-bottom:24px; } .testi-quote::before{ content:"“"; color:var(--c-cyan); } .testi-quote::after{ content:"”"; color:var(--c-cyan); } .testi-person{ display:flex; align-items:center; gap:14px; } .testi-avatar{ width:44px; height:44px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:14px; color:#021016; background:linear-gradient(135deg, var(--c-cyan), var(--c-green)); } .testi-person b{ display:block; font-size:14.5px; } .testi-person span{ display:block; font-size:12.5px; color:var(--c-text-dimmer); } .testi-arrows{ display:flex; justify-content:space-between; position:absolute; top:50%; left:-54px; right:-54px; transform:translateY(-50%); pointer-events:none; } .testi-arrow{ pointer-events:auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--c-border); background:var(--c-panel); backdrop-filter:blur(10px); color:var(--c-text); display:flex; align-items:center; justify-content:center; transition:border-color .3s, color .3s; } .testi-arrow:hover{ border-color:var(--c-border-bright); color:var(--c-cyan); } .testi-arrow svg{ width:18px; height:18px; } .testi-dots{ display:flex; justify-content:center; gap:8px; margin-top:24px; } .testi-dot{ width:7px; height:7px; border-radius:50%; background:var(--c-border); border:none; padding:0; transition:background .3s, transform .3s; } .testi-dot.is-active{ background:var(--c-cyan); transform:scale(1.3); } /* ============================================================ 18. FAQ ACCORDION ============================================================ */ .faq-list{ display:flex; flex-direction:column; gap:1px; border:1px solid var(--c-border); border-radius:16px; overflow:hidden; } .faq-item{ background:var(--c-panel); } .faq-item + .faq-item{ border-top:1px solid var(--c-border); } .faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 24px; background:none; border:none; text-align:left; color:var(--c-text); font-family:var(--font-display); font-size:15.5px; font-weight:600; } .faq-q i{ flex:0 0 auto; width:20px; height:20px; position:relative; } .faq-q i::before, .faq-q i::after{ content:""; position:absolute; background:var(--c-cyan); transition:transform .3s; } .faq-q i::before{ left:0; top:9px; width:20px; height:1.6px; } .faq-q i::after{ left:9px; top:0; width:1.6px; height:20px; } .faq-item.is-open .faq-q i::after{ transform:rotate(90deg) scaleX(0); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out); } .faq-item.is-open .faq-a{ max-height:280px; } .faq-a p{ padding:0 24px 22px; font-size:14.5px; color:var(--c-text-dim); max-width:640px; } /* ============================================================ 19. CTA BANNER ============================================================ */ .cta-banner{ padding:64px 56px; text-align:center; position:relative; overflow:hidden; } .cta-banner::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background:radial-gradient(circle at 30% 20%, rgba(0,240,255,.12), transparent 60%), radial-gradient(circle at 80% 80%, rgba(178,91,255,.1), transparent 60%); } .cta-banner h2{ font-size:clamp(26px,3.4vw,38px); margin-bottom:16px; position:relative; } .cta-banner p{ color:var(--c-text-dim); max-width:480px; margin:0 auto 28px; position:relative; } .cta-banner .hero-cta{ justify-content:center; margin-top:0; position:relative; } /* ============================================================ 20. GLOBE TOOLTIP + DRAG HINT ============================================================ */ .globe-tooltip{ position:fixed; z-index:40; left:0; top:0; transform:translate(-50%, calc(-100% - 18px)); width:190px; padding:14px 16px; border-radius:12px; background:var(--c-panel-strong); border:1px solid var(--c-border-bright); box-shadow:0 12px 30px -10px rgba(0,240,255,.3); opacity:0; pointer-events:none; transition:opacity .25s; } .globe-tooltip.is-open{ opacity:1; } .gt-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } .gt-head i{ width:6px; height:6px; border-radius:50%; background:var(--c-green); box-shadow:0 0 6px var(--c-green); animation:pulse-dot 1.8s infinite; } .gt-head b{ font-family:var(--font-display); font-size:13.5px; } .gt-row{ display:flex; justify-content:space-between; padding:4px 0; } .gt-row span{ font-size:11px; color:var(--c-text-dimmer); font-family:var(--font-mono); } .gt-row b{ font-size:12px; font-family:var(--font-mono); color:var(--c-text); } .gt-status{ margin-top:8px; padding-top:8px; border-top:1px solid var(--c-border); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; color:var(--c-green); } /* always-visible pins for the two named landmarks on the globe */ /* always-visible pins for the two named landmarks on the globe. z-index is intentionally LOWER than

(z-index:2) — these are "world space" labels that belong to the 3D scene, like the canvas itself, and should be naturally covered by real page content (cards, text, the chat widget, etc.) rather than floating on top of it. */ .landmark-label{ position:fixed; z-index:1; left:0; top:0; transform:translate(-50%, calc(-100% - 12px)); display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:100px; background:rgba(20,16,6,0.55); backdrop-filter:blur(6px); border:1px solid rgba(255,194,102,.45); font-family:var(--font-mono); font-size:11px; color:#ffe2b0; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .2s linear; box-shadow:0 0 14px rgba(255,194,102,.25); } .landmark-label::before{ content:""; width:6px; height:6px; border-radius:50%; background:#ffc266; box-shadow:0 0 8px #ffc266; flex:0 0 auto; animation:pulse-dot 1.6s infinite; } .drag-hint{ position:fixed; z-index:15; right:24px; bottom:24px; display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:100px; background:var(--c-panel-strong); border:1px solid var(--c-border); font-family:var(--font-mono); font-size:11px; color:var(--c-text-dim); letter-spacing:.03em; transition:opacity .5s, transform .5s; pointer-events:none; } .drag-hint svg{ width:15px; height:15px; color:var(--c-cyan); } .drag-hint.is-hidden{ opacity:0; transform:translateY(8px); } /* ============================================================ 21. RESPONSIVE ============================================================ */ @media (max-width: 1080px){ .hud{ display:none !important; } .testi-arrows{ left:-12px; right:-12px; } } @media (max-width: 980px){ .svc-grid{ grid-template-columns:repeat(2, 1fr); } .about-grid{ grid-template-columns:1fr; gap:46px; } .contact-grid{ grid-template-columns:1fr; } .svc-detail-grid{ grid-template-columns:1fr; gap:36px; } .svc-detail.reverse .svc-detail-grid{ direction:ltr; } .svc-detail .illu-frame{ order:-1; max-width:280px; } .values-grid{ grid-template-columns:repeat(2,1fr); } .perk-grid{ grid-template-columns:repeat(2,1fr); } .logo-cloud{ grid-template-columns:repeat(3,1fr); } .case-grid{ grid-template-columns:1fr 1fr; } .trust-row{ grid-template-columns:1fr 1fr; } .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } .status-grid{ grid-template-columns:1fr; } .hero-meta{ grid-template-columns:repeat(2,1fr); gap:20px; } .incident-item{ grid-template-columns:1fr; gap:8px; } .incident-time{ text-align:left; } } @media (max-width: 760px){ .wrap{ padding:0 22px; } section{ padding:88px 0; } .nav-links{ position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; background:rgba(7,8,11,0.97); backdrop-filter:blur(20px); flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:36px 28px; gap:26px; transform:translateX(100%); transition:transform .4s var(--ease-out); } .menu-open .nav-links{ transform:translateX(0); } .nav-links a{ font-size:18px; } .nav-links li:last-child{ display:list-item; margin-top:6px; } .nav-right .btn-primary{ display:none; } .nav-burger{ display:flex; } .svc-grid{ grid-template-columns:1fr; } .stat-grid{ grid-template-columns:1fr 1fr; } .field-row{ grid-template-columns:1fr; } .hero-meta{ grid-template-columns:1fr 1fr; gap:16px; } .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ width:100%; } .contact-form{ padding:28px 22px; } .form-foot{ flex-direction:column; align-items:flex-start; } .page-hero{ min-height:40vh; padding-bottom:48px; } .page-hero-meta{ gap:18px; } .values-grid{ grid-template-columns:1fr; } .perk-grid{ grid-template-columns:1fr; } .logo-cloud{ grid-template-columns:repeat(2,1fr); } .case-grid{ grid-template-columns:1fr; } .trust-row{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; gap:30px; } .role-row{ flex-direction:column; align-items:flex-start; gap:12px; } .testi-arrows{ display:none; } .testi-slide{ padding:32px 26px; } .timeline{ padding-left:26px; } .cta-banner{ padding:44px 24px; } .drag-hint{ display:none; } .compare-wrap{ -webkit-overflow-scrolling:touch; } .status-item-metrics{ grid-template-columns:1fr 1fr; } .status-item-header{ flex-wrap:wrap; } .status-overview{ flex-direction:column; align-items:flex-start; gap:16px; } } /* ============================================================ TOUCH / SCROLL BEHAVIOR touch-action lives here as a base rule (not gated to a mobile media query) because touch capability isn't tied to viewport width — plenty of wide touchscreen laptops/tablets need this too. pan-y (not "pan-y pinch-zoom") so the browser handles vertical scrolling immediately and natively, while leaving pinch gestures for our own JS to turn into a 3D zoom instead of the whole page zooming. ============================================================ */ #bg-canvas{ touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } @media (max-width: 768px) { /* Hide drag hint on mobile */ .drag-hint { display: none !important; } /* Improve touch targets */ .svc-card, .btn, .nav-link-item, .testi-dot, .faq-q { touch-action: manipulation; } /* Prevent scroll interference on interactive elements */ .svc-card, .glass, .hud, .logo-card { touch-action: pan-y; } } /* ============================================================ CUSTOM MAGNETIC CURSOR (fine-pointer / desktop only — see main.js) ============================================================ */ .has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor .svc-card, .has-custom-cursor input, .has-custom-cursor select, .has-custom-cursor textarea{ cursor:none; } .cursor-ring{ position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--c-cyan); transform:translate(-50%,-50%); pointer-events:none; z-index:9999; opacity:0; transition:opacity .3s, width .25s, height .25s, border-color .25s, background .25s; } .cursor-ring.is-active{ width:56px; height:56px; background:rgba(0,240,255,.08); border-color:var(--c-cyan); } .cursor-dot{ position:fixed; top:0; left:0; width:5px; height:5px; border-radius:50%; background:var(--c-cyan); box-shadow:0 0 8px var(--c-cyan); transform:translate(-50%,-50%); pointer-events:none; z-index:9999; opacity:0; transition:opacity .3s; } @media (max-width: 1080px){ .has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor .svc-card, .has-custom-cursor input, .has-custom-cursor select, .has-custom-cursor textarea{ cursor:auto; } .cursor-ring, .cursor-dot{ display:none; } } /* ============================================================ PAGE TRANSITIONS + CARD TILT SMOOTHING ============================================================ */ body{ transition:opacity .22s ease-out, background-color .4s ease-out; } body, .glass, .nav, .hud, input, select, textarea, .globe-tooltip, .btn-ghost, .tech-badge, .landmark-label, .drag-hint, .back-to-top{ transition-property: background-color, border-color, color, box-shadow, opacity; transition-duration: .35s; transition-timing-function: ease-out; } html.is-leaving body{ opacity:0; } .svc-card, .case-card, .perk-card{ transition:transform .35s var(--ease-out), border-color .45s, box-shadow .45s; will-change:transform; } /* ============================================================ READING PROGRESS BAR ============================================================ */ .reading-progress{ position:fixed; top:0; left:0; right:0; height:2.5px; z-index:60; background:rgba(255,255,255,.04); pointer-events:none; } .reading-progress-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--c-cyan), var(--c-green)); box-shadow:0 0 8px rgba(0,240,255,.5); transition:width .1s linear; } /* ============================================================ BACK TO TOP ============================================================ */ .back-to-top{ position:fixed; left:24px; bottom:24px; z-index:45; width:44px; height:44px; border-radius:50%; border:1px solid var(--c-border); background:var(--c-panel-strong); backdrop-filter:blur(10px); color:var(--c-text); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s, transform .3s, border-color .3s, color .3s; } .back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; } .back-to-top:hover{ border-color:var(--c-border-bright); color:var(--c-cyan); } .back-to-top svg{ width:18px; height:18px; } /* ============================================================ FLOATING "TALK TO AN ENGINEER" CTA Sits just above the drag-hint badge (when present) so the two never overlap, even if both happen to be visible at once. ============================================================ */ .floating-cta{ position:fixed; right:24px; bottom:88px; z-index:45; display:flex; align-items:center; gap:10px; padding:13px 20px; border-radius:100px; background:linear-gradient(135deg, var(--c-cyan), var(--c-purple)); color:#021016; font-family:var(--font-display); font-weight:600; font-size:13.5px; box-shadow:0 8px 30px -6px rgba(0,240,255,.4); opacity:0; transform:translateY(12px) scale(.92); pointer-events:none; transition:opacity .35s, transform .35s; } .floating-cta.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .floating-cta:hover{ transform:translateY(-2px) scale(1.03); } .floating-cta svg{ width:17px; height:17px; flex:0 0 auto; } /* user-toggled HUD visibility (Ctrl/Cmd+H) */ .hud.is-hidden-by-user{ opacity:0; pointer-events:none; transform:translateY(8px); } @media (max-width: 760px){ .back-to-top{ display:none; } .floating-cta{ right:16px; left:16px; bottom:16px; justify-content:center; } .floating-cta span, .floating-cta{ font-size:13px; } } /* ============================================================ AI ASSISTANT DEMO (chat widget) ============================================================ */ .ai-chat{ max-width:700px; margin:0 auto; padding:28px; display:flex; flex-direction:column; } .ai-chat-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--c-border); } .ai-chat-head i{ width:8px; height:8px; border-radius:50%; background:var(--c-green); box-shadow:0 0 8px var(--c-green); animation:pulse-dot 1.8s infinite; } .ai-chat-head b{ font-family:var(--font-display); font-size:14.5px; } .ai-chat-head span{ font-size:11.5px; color:var(--c-text-dimmer); font-family:var(--font-mono); } .ai-chat-messages{ height:280px; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 4px 8px; } .ai-msg{ padding:11px 16px; border-radius:14px; max-width:85%; font-size:14px; line-height:1.5; } .ai-msg.bot{ background:rgba(0,240,255,.07); border:1px solid rgba(0,240,255,.15); align-self:flex-start; border-bottom-left-radius:4px; } .ai-msg.user{ background:rgba(61,255,166,.1); border:1px solid rgba(61,255,166,.18); align-self:flex-end; border-bottom-right-radius:4px; color:var(--c-text); } .ai-msg.typing{ display:flex; gap:4px; align-items:center; padding:14px 16px; } .ai-msg.typing span{ width:6px; height:6px; border-radius:50%; background:var(--c-text-dimmer); animation:typingDot 1.2s infinite; } .ai-msg.typing span:nth-child(2){ animation-delay:.2s; } .ai-msg.typing span:nth-child(3){ animation-delay:.4s; } @keyframes typingDot{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } } .ai-chat-suggestions{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; } .ai-suggestion{ font-family:var(--font-mono); font-size:11.5px; padding:6px 12px; border-radius:100px; border:1px solid var(--c-border); color:var(--c-text-dim); background:none; cursor:pointer; transition:border-color .25s, color .25s; } .ai-suggestion:hover{ border-color:var(--c-border-bright); color:var(--c-cyan); } .ai-chat-input-row{ display:flex; gap:10px; } .ai-chat-input-row input{ flex:1; background:rgba(255,255,255,.03); border:1px solid var(--c-border); border-radius:10px; padding:13px 16px; color:var(--c-text); } .ai-chat-input-row input:focus{ border-color:var(--c-cyan); outline:none; } .ai-chat-disclaimer{ margin-top:12px; font-size:11px; color:var(--c-text-dimmer); text-align:center; } /* ============================================================ AI READINESS QUIZ ============================================================ */ .readiness{ max-width:600px; margin:0 auto; padding:40px; } .readiness-progress{ display:flex; gap:6px; margin-bottom:24px; } .readiness-progress span{ height:3px; flex:1; background:var(--c-border); border-radius:2px; overflow:hidden; } .readiness-progress span.is-done{ background:var(--c-cyan); } .readiness-q h4{ font-size:16px; margin-bottom:18px; } .readiness-opts{ display:flex; flex-direction:column; gap:10px; } .readiness-opt{ text-align:left; padding:14px 18px; font-size:14px; } .readiness-result{ text-align:center; } .readiness-score{ font-size:52px; font-family:var(--font-mono); font-weight:600; background:linear-gradient(120deg, var(--c-cyan), var(--c-green)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .readiness-score-label{ font-size:12.5px; color:var(--c-text-dimmer); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; } .readiness-feedback{ margin:18px 0 22px; color:var(--c-text-dim); font-size:14.5px; max-width:440px; margin-left:auto; margin-right:auto; } /* ============================================================ ROI CALCULATOR ============================================================ */ .roi-calc{ max-width:760px; margin:0 auto; padding:40px; } .roi-inputs{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:8px; } .roi-field label{ display:block; font-size:12px; color:var(--c-text-dimmer); font-family:var(--font-mono); margin-bottom:10px; } .roi-field input[type="range"]{ width:100%; -webkit-appearance:none; height:4px; border-radius:4px; background:linear-gradient(90deg, var(--c-cyan), var(--c-border) 0%); cursor:pointer; } .roi-field input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--c-cyan); box-shadow:0 0 8px var(--c-cyan); cursor:pointer; } .roi-field input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; border:none; background:var(--c-cyan); box-shadow:0 0 8px var(--c-cyan); cursor:pointer; } .roi-field-range{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--c-text-dimmer); margin-top:8px; } .roi-field-range b{ font-family:var(--font-mono); color:var(--c-text); font-weight:500; } .roi-result{ margin-top:30px; padding:26px; border-radius:14px; background:rgba(0,240,255,.05); border:1px solid rgba(0,240,255,.15); text-align:center; } .roi-result-label{ font-size:11.5px; color:var(--c-text-dimmer); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); } .roi-result-value{ font-size:44px; font-family:var(--font-mono); font-weight:600; color:var(--c-green); margin:6px 0; } .roi-result-note{ font-size:12.5px; color:var(--c-text-dim); margin-bottom:18px; } /* ============================================================ TECH STACK BADGES ============================================================ */ .tech-row{ display:flex; flex-wrap:wrap; gap:10px; } .tech-badge{ padding:8px 16px; border-radius:100px; border:1px solid var(--c-border); font-family:var(--font-mono); font-size:12px; color:var(--c-text-dim); transition:border-color .25s, color .25s; } .tech-badge:hover{ border-color:var(--c-border-bright); color:var(--c-text); } /* ============================================================ INDUSTRY SOLUTIONS GRID ============================================================ */ .industry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .industry-card{ padding:24px 18px; text-align:center; } .industry-card .ind-icon{ width:30px; height:30px; margin:0 auto 12px; color:var(--c-cyan); } .industry-card[data-accent="purple"] .ind-icon{ color:var(--c-purple); } .industry-card[data-accent="green"] .ind-icon{ color:var(--c-green); } .industry-card h4{ font-size:14.5px; margin-bottom:5px; } .industry-card p{ font-size:12px; color:var(--c-text-dim); line-height:1.4; } /* ============================================================ INSIGHTS / "FROM THE LAB" ============================================================ */ .insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .insight-card{ padding:26px; display:flex; flex-direction:column; gap:10px; } .insight-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-cyan); } .insight-card h3{ font-size:16.5px; line-height:1.35; } .insight-card p{ font-size:13.5px; color:var(--c-text-dim); } /* ============================================================ SLA / TRUST DASHBOARD ============================================================ */ .sla-dash{ padding:28px 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; } .sla-dash-main span.eyebrow{ margin-bottom:8px; } .sla-dash-main h3{ font-size:21px; } .sla-dash-main p{ font-size:13px; color:var(--c-text-dim); margin-top:4px; } .sla-dash-stats{ display:flex; gap:30px; } .sla-stat{ text-align:center; } .sla-stat b{ display:block; font-family:var(--font-mono); font-size:24px; } .sla-stat span{ font-size:10.5px; color:var(--c-text-dimmer); } .sla-bar{ width:100%; margin-top:18px; height:5px; background:rgba(255,255,255,.05); border-radius:4px; overflow:hidden; } .sla-bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--c-cyan), var(--c-green)); border-radius:4px; } /* ============================================================ STATUS PAGE — LIVE EVENT FEED ============================================================ */ .status-feed{ display:flex; flex-direction:column-reverse; gap:0; max-height:280px; overflow-y:auto; } .status-feed-item{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-top:1px solid var(--c-border); font-size:13.5px; color:var(--c-text-dim); animation:feedIn .4s ease-out; } .status-feed-item:first-child{ border-top:none; } .status-feed-item i{ width:18px; text-align:center; flex:0 0 auto; } .status-feed-item time{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--c-text-dimmer); flex:0 0 auto; } @keyframes feedIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } } @media (max-width: 980px){ .roi-inputs{ grid-template-columns:1fr; } .industry-grid{ grid-template-columns:repeat(2,1fr); } .insight-grid{ grid-template-columns:1fr 1fr; } .sla-dash{ flex-direction:column; align-items:flex-start; } } @media (max-width: 760px){ .industry-grid{ grid-template-columns:1fr 1fr; } .insight-grid{ grid-template-columns:1fr; } .sla-dash-stats{ gap:18px; flex-wrap:wrap; } .ai-chat{ padding:20px; } .ai-chat-head{ flex-wrap:wrap; } .ai-chat-head span{ display:none; } .readiness, .roi-calc{ padding:26px 20px; } }