/* ───────────────────────────────────────── TOKENS ───────────────────────────────────────── */ :root { --bg: #080b10; --surface: #0e1420; --surface2: #141c2e; --c: #00e5ff; /* cyan */ --p: #7b61ff; /* purple */ --r: #ff4d6d; /* red */ --text: #e8edf5; --muted: #94a3c0; /* lifted contrast — was #6b7a99, fails AA on dark */ --border: rgba(0,229,255,0.1); --line: rgba(255,255,255,0.04); --nav-h: 72px; --radius-sm: 10px; --radius: 14px; --radius-lg: 16px; /* shared font stacks */ --f-display: 'Syne', system-ui, sans-serif; --f-body: 'DM Sans', system-ui, sans-serif; --f-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ───────────────────────────────────────── RESET / BASE ───────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Prevent ANY horizontal overflow. Both html and body need overflow-x:hidden — on iOS Safari the scroll container is sometimes , sometimes . Width:100% closes a long-standing iOS bug where overflow-x:hidden alone still allows pan. */ html, body { overflow-x: hidden; width: 100%; max-width: 100%; } html { scroll-behavior: smooth; } body { font-family: var(--f-body); background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; } input, textarea, select { font-family: inherit; } img, svg { display: block; max-width: 100%; } /* skip-to-content for accessibility */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 10000; padding: 10px 16px; background: var(--c); color: var(--bg); font-family: var(--f-mono); font-size: 12px; font-weight: 700; border-radius: 6px; } .skip-link:focus { top: 16px; } /* grain overlay */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; } /* dot grid — canvas element, interactive, painted in JS */ .dot-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; width: 100vw; height: 100vh; display: block; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 25%, transparent 100%); mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 25%, transparent 100%); } /* ───────────────────────────────────────── NAVIGATION ───────────────────────────────────────── */ /* body > header — direct child only, so nested

elements inside pages (e.g. .services-hero) don't inherit fixed positioning */ body > header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); background: rgba(8, 11, 16, 0.88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .nav-inner { height: 100%; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; } .nav-logo-text { font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; } .nav-logo-text span { color: var(--c); } /* ───────────────────────────────────────── ANIMATED NETWORK ICON (.qorym-icon) Used in the nav logo. Reusable elsewhere (e.g. a "powered by qorym.com" credit). ───────────────────────────────────────── */ .qorym-icon { width: 38px; height: 38px; display: block; animation: qiSystemFlash 6.5s ease-in-out infinite; } /* a global "system flash" — entire icon glows brightly for a half-second every cycle */ @keyframes qiSystemFlash { 0%, 92%, 100% { filter: drop-shadow(0 0 0 transparent); } 94% { filter: drop-shadow(0 0 5px rgba(78, 224, 240, .6)) drop-shadow(0 0 12px rgba(78, 224, 240, .25)); } 97% { filter: drop-shadow(0 0 2px rgba(78, 224, 240, .3)); } } /* counter-rotating dashed rings */ .qi-ring-outer { transform-origin: 50% 50%; transform-box: fill-box; animation: qiSpin 36s linear infinite; } .qi-ring-inner { transform-origin: 50% 50%; transform-box: fill-box; animation: qiSpin 26s linear infinite reverse; } @keyframes qiSpin { to { transform: rotate(360deg); } } /* center node breathes with the network pulse */ .qi-center { transform-origin: 50% 50%; transform-box: fill-box; animation: qiBreathe 3.2s ease-in-out infinite; } @keyframes qiBreathe { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.10); opacity: 1; } } /* satellite nodes — staggered flash sequence */ .qi-sat { transform-origin: center; transform-box: fill-box; animation: qiFlash 5s ease-in-out infinite; } .qi-sat-1 { animation-delay: 0s; } .qi-sat-2 { animation-delay: -0.83s; } .qi-sat-3 { animation-delay: -1.66s; animation-duration: 4s; } /* red outlier flashes faster */ .qi-sat-4 { animation-delay: -2.5s; } .qi-sat-5 { animation-delay: -3.33s; } .qi-sat-6 { animation-delay: -4.16s; } @keyframes qiFlash { 0%, 86%, 100% { opacity: .92; transform: scale(1); } 90% { opacity: 1; transform: scale(1.20); } 93% { opacity: .78; transform: scale(1.05); } 96% { opacity: .92; transform: scale(1); } } /* on hover, intensify everything */ .nav-logo:hover .qi-center { animation-duration: 1.6s; } .nav-logo:hover .qi-sat { animation-duration: 2.4s; } .nav-logo:hover .qorym-icon { animation-duration: 3s; } .nav-logo:hover .qi-ring-outer { animation-duration: 14s; } .nav-logo:hover .qi-ring-inner { animation-duration: 10s; } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-links a { font-family: var(--f-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); transition: color .2s; padding: 4px 0; } .nav-links a:hover, .nav-links a.is-active { color: var(--c); } .nav-cta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 10px 22px; border-radius: 6px; background: var(--c); color: var(--bg); font-weight: 700; box-shadow: 0 0 20px rgba(0,229,255,0.2); transition: box-shadow .2s, transform .2s; } .nav-cta:hover { box-shadow: 0 0 36px rgba(0,229,255,0.4); transform: translateY(-1px); } .hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; } .hamburger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s, opacity .3s; } @media (max-width: 800px) { .nav-inner { padding: 0 24px; } .nav-links, .nav-cta { display: none; } .hamburger { display: flex; } } /* mobile menu */ .mobile-menu { display: none; position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(8, 11, 16, 0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 998; padding: 48px 32px; } .mobile-menu.is-open { display: block; } .mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 28px; } .mobile-menu a { font-family: var(--f-display); font-size: 32px; font-weight: 800; color: var(--text); } .mobile-menu a.is-cta { color: var(--c); } /* ───────────────────────────────────────── PAGES — SPA routing ───────────────────────────────────────── */ main { position: relative; z-index: 1; } .page { display: none; opacity: 0; min-height: 100vh; max-width: 100%; padding-top: var(--nav-h); transition: opacity .3s; } @supports (min-height: 100dvh) { .page { min-height: 100dvh; } } .page.is-active { display: block; opacity: 1; } /* ───────────────────────────────────────── LAYOUT PRIMITIVES ───────────────────────────────────────── */ .container { max-width: 1160px; margin: 0 auto; padding: 0 40px; width: 100%; } @media (max-width: 600px) { .container { padding: 0 20px; } } .section { padding: 100px 0; } .section-sm { padding: 60px 0; } .stack-md { margin-top: 36px; } .stack-lg { margin-top: 48px; } .divider { height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); } /* ───────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────── */ .eyebrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--c); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--c); } .eyebrow.is-centered { justify-content: center; } h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(32px, 4.5vw, 58px); letter-spacing: -2px; line-height: 1.05; margin-bottom: 20px; } h3 { font-family: var(--f-display); font-weight: 700; } .page-h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -3px; line-height: .95; max-width: 800px; } .text-c { color: var(--c); } .text-p { color: var(--p); } .text-r { color: var(--r); } .text-muted { color: var(--muted); } .text-dim { color: rgba(232, 237, 245, .2); } .lede { font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 540px; } /* ───────────────────────────────────────── BUTTONS ───────────────────────────────────────── */ .btn { font-family: var(--f-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 14px 28px; border-radius: 7px; display: inline-flex; align-items: center; gap: 8px; transition: box-shadow .2s, transform .2s, border-color .2s, color .2s; } .btn--primary { background: var(--c); color: var(--bg); font-weight: 700; box-shadow: 0 0 28px rgba(0,229,255,0.2); } .btn--primary:hover { box-shadow: 0 0 48px rgba(0,229,255,0.4); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn--ghost:hover { border-color: var(--c); color: var(--c); transform: translateY(-2px); } /* ───────────────────────────────────────── SURFACE (consolidated card base) ───────────────────────────────────────── */ .surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .surface--lg { padding: 40px; } .surface--xl { padding: 64px 56px; } .surface--sm { padding: 18px 20px; } .surface--round { border-radius: var(--radius-lg); } .surface--cyan { background: rgba(0, 229, 255, 0.07); border-color: rgba(0, 229, 255, 0.15); } .surface--purple { background: rgba(123, 97, 255, 0.07); border-color: rgba(123, 97, 255, 0.15); } .surface--red { background: rgba(255, 77, 109, 0.05); border-color: rgba(255, 77, 109, 0.20); } .surface--gradient { background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(123,97,255,0.06)); border-color: rgba(0, 229, 255, 0.15); } .surface--hover { transition: border-color .25s, transform .25s; position: relative; overflow: hidden; } .surface--hover:hover { border-color: rgba(0, 229, 255, 0.22); transform: translateY(-4px); } /* ═══════════════════════════════════════ PAGE: HOME ═══════════════════════════════════════ */ .hero { min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 80px 40px; max-width: 1160px; margin: 0 auto; position: relative; overflow: hidden; /* clip the decorative .hero-glow inside this box */ width: 100%; } /* iOS Safari: dvh = "dynamic viewport height" — respects URL bar. Falls back to vh on browsers that don't support it. */ @supports (min-height: 100dvh) { .hero { min-height: calc(100dvh - var(--nav-h)); } } .hero-glow { position: absolute; right: -30px; top: 50%; transform: translateY(-55%); width: 540px; height: 540px; pointer-events: none; } /* The animated icon fills its hero-glow container */ .qorym-icon--hero { width: 100%; height: 100%; } /* Slow the hero version's system flash down — it's bigger, so less is more */ .qorym-icon--hero { animation-duration: 9s; } @media (max-width: 1100px) { .hero-glow { width: 460px; height: 460px; right: -60px; } } @media (max-width: 800px) { .hero { padding: 60px 24px; } .hero-glow { width: 360px; height: 360px; right: -80px; opacity: .55; } /* On mobile the icon is small and sits behind content — hide the labels so it reads as a clean network mark instead of cluttering. */ .qorym-icon--hero .qi-labels { display: none; } } .hero-pre { font-family: var(--f-mono); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--c); margin-bottom: 28px; animation: fadeUp .7s ease both; } .hero h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(52px, 8vw, 108px); letter-spacing: -4px; line-height: .92; max-width: 900px; animation: fadeUp .7s ease .08s both; } .hero-sub { font-size: clamp(16px, 1.8vw, 20px); color: var(--muted); max-width: 560px; line-height: 1.7; margin-top: 28px; animation: fadeUp .7s ease .16s both; } .hero-pareto { display: flex; align-items: center; margin-top: 36px; border-radius: 10px; overflow: hidden; width: min(480px, 100%); animation: fadeUp .7s ease .22s both; } .pareto-bar { padding: 14px 20px; display: flex; flex-direction: column; gap: 4px; } .pareto-ai { background: rgba(0, 229, 255, 0.12); border: 1px solid rgba(0, 229, 255, 0.2); flex: 4; } .pareto-human { background: rgba(123, 97, 255, 0.1); border: 1px solid rgba(123, 97, 255, 0.2); border-left: none; flex: 1; } .pareto-pct { font-family: var(--f-mono); font-weight: 700; font-size: 22px; line-height: 1; } .pareto-ai .pareto-pct { color: var(--c); } .pareto-human .pareto-pct { color: var(--p); } .pareto-label { font-size: 11px; color: var(--muted); letter-spacing: 1px; } .hero-actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; animation: fadeUp .7s ease .28s both; } .hero-stats { display: flex; gap: 40px; margin-top: 56px; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid var(--border); width: 100%; animation: fadeUp .7s ease .34s both; } .hstat-num { font-family: var(--f-mono); font-size: 30px; font-weight: 700; color: var(--c); line-height: 1; } .hstat-label { font-size: 12px; color: var(--muted); margin-top: 5px; letter-spacing: .5px; } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* WHAT WE BUILD */ .services-teaser { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(0, 229, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } @media (max-width: 900px) { .services-teaser { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .services-teaser { grid-template-columns: 1fr; } } .svc-tile { background: var(--bg); padding: 28px 24px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; transition: background .2s; width: 100%; text-align: left; } .svc-tile:hover { background: rgba(0, 229, 255, 0.03); } .svc-tile:nth-child(4n) { border-right: none; } .svc-icon { font-size: 24px; margin-bottom: 12px; } .svc-tile h4 { font-family: var(--f-display); font-weight: 700; font-size: 14px; margin-bottom: 6px; letter-spacing: -.2px; } .svc-tile p { font-size: 12px; color: var(--muted); line-height: 1.6; } /* HOW IT WORKS */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 48px; } @media (max-width: 700px) { .steps { grid-template-columns: 1fr; } } .step { padding: 40px 32px; position: relative; border: 1px solid var(--border); border-radius: var(--radius); } .step-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: 3px; color: var(--c); margin-bottom: 20px; } .step h3 { font-size: 20px; margin-bottom: 10px; letter-spacing: -.3px; } .step p { font-size: 14px; color: var(--muted); line-height: 1.7; } /* PARETO DEEP-DIVE */ .pareto-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 48px; } @media (max-width: 700px) { .pareto-visual { grid-template-columns: 1fr; } } .pareto-chart { position: relative; } .pareto-ring { width: 240px; height: 240px; border-radius: 50%; background: conic-gradient(var(--c) 0deg 288deg, var(--p) 288deg 360deg); display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; } .pareto-ring::before { content: ''; position: absolute; inset: 28px; background: var(--bg); border-radius: 50%; } .pareto-ring-inner { position: relative; z-index: 1; text-align: center; } .pareto-ring-inner .big { font-family: var(--f-mono); font-weight: 700; font-size: 36px; color: var(--c); line-height: 1; } .pareto-ring-inner .small { font-size: 12px; color: var(--muted); margin-top: 4px; } .pareto-legend { display: flex; justify-content: center; gap: 24px; margin-top: 20px; } .pareto-legend > span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); } .pareto-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .pareto-breakdown { display: flex; flex-direction: column; gap: 20px; } .pareto-breakdown h4 { font-family: var(--f-display); font-weight: 700; font-size: 15px; margin-bottom: 8px; } .surface--cyan h4 { color: var(--c); } .surface--purple h4 { color: var(--p); } .pareto-breakdown p { font-size: 13px; color: var(--muted); line-height: 1.65; } /* CTA BAND */ .cta-band { text-align: center; max-width: 1080px; margin: 0 auto 100px; } .cta-band h2 { margin-bottom: 12px; } .cta-band > p { font-size: 17px; color: var(--muted); max-width: 500px; margin: 0 auto 36px; line-height: 1.65; } .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ═══════════════════════════════════════ PAGE: ABOUT ═══════════════════════════════════════ */ .about-hero { padding: 80px 0 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } @media (max-width: 800px) { .about-hero { grid-template-columns: 1fr; gap: 40px; } } .about-network-vis { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; } /* values grid */ .values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; } @media (max-width: 600px) { .values { grid-template-columns: 1fr; } } .values .surface h4 { font-family: var(--f-display); font-weight: 700; font-size: 16px; margin-bottom: 8px; } .values .surface p { font-size: 13px; color: var(--muted); line-height: 1.65; } /* timeline */ .timeline { position: relative; padding-left: 36px; margin-top: 48px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--c), var(--p), transparent); } .tl-item { position: relative; margin-bottom: 44px; } .tl-dot { position: absolute; left: -36px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--c); box-shadow: 0 0 12px rgba(0, 229, 255, 0.4); } .tl-dot--p { border-color: var(--p); box-shadow: 0 0 12px rgba(123,97,255,0.4); } .tl-dot--r { border-color: var(--r); box-shadow: 0 0 12px rgba(255,77,109,0.4); } .tl-dot--y { border-color: #ffd93d; box-shadow: 0 0 12px rgba(255,217,61,0.4); } .tl-item h4 { font-family: var(--f-display); font-weight: 700; font-size: 18px; margin-bottom: 8px; } .tl-item p { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 640px; } /* compliance pills */ .compliance-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .pill { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.18); color: var(--text); } .compliance-box h3 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 16px; } .compliance-box p { font-size: 15px; color: var(--muted); line-height: 1.75; max-width: 700px; } /* ─── FOUNDER SECTION (About page) ─── */ .founder-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; margin-top: 28px; max-width: 760px; display: grid; grid-template-columns: 80px 1fr; gap: 28px; align-items: start; } @media (max-width: 600px) { .founder-block { grid-template-columns: 1fr; padding: 28px; } } .founder-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(123,97,255,0.20)); border: 1px solid rgba(0,229,255,0.3); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 32px; font-weight: 800; color: var(--c); flex-shrink: 0; } .founder-text p { font-size: 14px; color: var(--text); line-height: 1.75; margin-bottom: 14px; } .founder-text p:first-child { font-size: 15px; color: var(--text); } .founder-name { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.3px; margin-bottom: 4px; color: var(--text); } .founder-role { font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--c); margin-bottom: 14px; } .founder-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--c); font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 16px; border: 1px solid rgba(0,229,255,0.3); border-radius: 6px; transition: border-color .2s, transform .2s, box-shadow .2s; } .founder-link:hover { border-color: var(--c); transform: translateY(-1px); box-shadow: 0 0 18px rgba(0,229,255,0.18); } /* ═══════════════════════════════════════ PAGE: PROJECTS (case-study registry) ═══════════════════════════════════════ */ .projects-hero { padding: 80px 0 8px; } .projects-intro { font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 600px; margin-top: 20px; } /* filter bar */ .proj-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; } .proj-filter { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 16px; border-radius: 100px; background: transparent; border: 1px solid var(--line); color: var(--muted); transition: border-color .2s, color .2s, background .2s; } .proj-filter:hover { color: var(--text); border-color: var(--border); } .proj-filter.is-active { color: var(--bg); background: var(--c); border-color: var(--c); font-weight: 700; } .proj-filter .proj-filter-n { opacity: .6; margin-left: 6px; font-size: 9px; } .proj-filter.is-active .proj-filter-n { opacity: .8; } /* grid */ .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; } @media (max-width: 940px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .proj-grid { grid-template-columns: 1fr; } } /* card */ .proj-card { --cover-a: #00e5ff; --cover-b: #7b61ff; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, transform .25s, box-shadow .25s, opacity .35s; } .proj-card.is-hidden { display: none; } a.proj-card { text-decoration: none; color: inherit; cursor: pointer; } a.proj-card:hover { border-color: rgba(0, 229, 255, 0.28); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,0.4), 0 0 30px rgba(0,229,255,0.06); } /* cover — the domain-as-artifact hero */ .proj-cover { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(120% 120% at 80% 15%, color-mix(in srgb, var(--cover-a) 38%, transparent), transparent 60%), radial-gradient(120% 120% at 15% 90%, color-mix(in srgb, var(--cover-b) 34%, transparent), transparent 60%), var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line); } /* fallback for browsers without color-mix */ @supports not (background: color-mix(in srgb, red, blue)) { .proj-cover { background: linear-gradient(135deg, var(--cover-a), var(--cover-b)); opacity: .9; } } .proj-cover-glyph { width: 64px; height: 64px; color: #fff; opacity: .92; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.35)); z-index: 1; } .proj-cover-glyph svg { width: 100%; height: 100%; } /* preview image — when present, it fills the cover and the glyph/grid hide. Add

inside .proj-cover to use a real screenshot; omit it to keep the glyph fallback. */ .proj-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .4s ease; } a.proj-card:hover .proj-cover-img { transform: scale(1.04); } /* subtle dark gradient at top so the status badge stays legible over photos */ .proj-cover:has(.proj-cover-img)::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,11,16,0.45) 0%, transparent 28%, transparent 72%, rgba(8,11,16,0.25) 100%); } /* when an image is present, drop the glyph and the grid texture */ .proj-cover:has(.proj-cover-img) .proj-cover-glyph { display: none; } .proj-cover:has(.proj-cover-img)::before { display: none; } /* faint grid texture over the gradient */ .proj-cover::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%); mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%); } /* status badge over cover */ .proj-status { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 11px; border-radius: 100px; background: rgba(8, 11, 16, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.10); color: var(--text); } .proj-status i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .proj-status--live i { background: #2dd47e; box-shadow: 0 0 8px rgba(45,212,126,0.7); } .proj-status--prototype i { background: #ffc24d; box-shadow: 0 0 8px rgba(255,194,77,0.6); } .proj-status--internal i { background: #8aa6c0; box-shadow: 0 0 8px rgba(138,166,192,0.5); } /* external-link chevron over cover, bottom-right */ .proj-extlink { position: absolute; bottom: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(8, 11, 16, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.10); color: var(--text); font-size: 13px; transition: background .2s, color .2s; } a.proj-card:hover .proj-extlink { background: var(--c); color: var(--bg); } /* body */ .proj-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .proj-cat { font-family: var(--f-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--c); margin-bottom: 10px; } .proj-name { font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: -.4px; line-height: 1.1; margin-bottom: 4px; color: var(--text); } .proj-domain { font-family: var(--f-mono); font-size: 11px; color: var(--muted); margin-bottom: 14px; word-break: break-all; } .proj-overview { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-bottom: 18px; flex: 1; } .proj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .proj-tag { font-family: var(--f-mono); font-size: 9px; letter-spacing: .5px; padding: 4px 9px; border-radius: 5px; background: rgba(255,255,255,0.035); border: 1px solid var(--line); color: var(--muted); } /* ─── PARTNERS SECTION (home page) ─── */ .partners-section { padding: 80px 0; } .partners-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; } @media (max-width: 800px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .partners-grid { grid-template-columns: 1fr; } } .partner-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; text-decoration: none; color: var(--text); transition: border-color .25s, transform .25s, background .25s; } /* Linked cards get hover effects; non-linked

cards stay static. */ a.partner-card { cursor: pointer; } a.partner-card:hover { border-color: rgba(0, 229, 255, 0.30); background: rgba(0, 229, 255, 0.03); transform: translateY(-3px); } .partner-logo { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: color .25s, opacity .25s; } .partner-logo svg { width: 100%; height: 100%; display: block; } a.partner-card:hover .partner-logo { color: var(--c); } .partner-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } /* Wordmark variant: the logo IS the brand name, so the separate name text would be redundant. Use for logos like "Secureware." typography marks. Slight rounding + overflow:hidden so light-background and dark-background logos both read as intentional "badge" treatments on the dark card. */ .partner-card--wordmark .partner-logo { width: 100%; height: 44px; max-width: 180px; opacity: .9; border-radius: 5px; overflow: hidden; } .partner-card--wordmark:hover .partner-logo { opacity: 1; } .partner-card--wordmark .partner-name { display: none; } .partner-card--wordmark { gap: 18px; } .partner-name { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -.2px; color: var(--text); } .partner-role { font-family: var(--f-mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: -4px; } /* ─── FAQ ACCORDION (all pages) ─── */ .faq-section { padding: 60px 0; } .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; max-width: 880px; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s; } .faq-item[open] { border-color: rgba(0, 229, 255, 0.18); } .faq-item summary { cursor: pointer; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -.2px; color: var(--text); list-style: none; transition: color .2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--c); } .faq-item summary::after { content: '+'; font-family: var(--f-mono); font-weight: 400; font-size: 22px; color: var(--c); flex-shrink: 0; line-height: 1; transition: transform .25s; } .faq-item[open] summary::after { content: '−'; } .faq-answer { padding: 4px 24px 22px; font-size: 14px; color: var(--muted); line-height: 1.75; } .faq-answer p { margin-bottom: 10px; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer a { color: var(--c); } .faq-answer strong { color: var(--text); font-weight: 600; } /* ═══════════════════════════════════════ PAGE: SERVICES ═══════════════════════════════════════ */ .services-hero { padding: 80px 0 48px; } .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; } @media (max-width: 700px) { .svc-grid { grid-template-columns: 1fr; } } .svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; position: relative; overflow: hidden; transition: border-color .25s, transform .25s; scroll-margin-top: calc(var(--nav-h) + 20px); } .svc-card:hover { border-color: rgba(0, 229, 255, 0.22); transform: translateY(-4px); } .svc-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--c), var(--p)); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .svc-card:hover::after { transform: scaleX(1); } .svc-card-icon { font-size: 32px; margin-bottom: 18px; } .svc-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 10px; } .svc-card-sub { font-family: var(--f-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--c); margin-bottom: 14px; } .svc-card > p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; } .svc-includes { list-style: none; display: flex; flex-direction: column; gap: 6px; } .svc-includes li { font-size: 12px; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; } .svc-includes li::before { content: '→'; color: var(--c); font-size: 11px; flex-shrink: 0; margin-top: 1px; } .svc-card-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .svc-price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .svc-price { font-family: var(--f-mono); font-size: 13px; color: var(--c); } .svc-discount { font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; padding: 3px 8px; border-radius: 100px; background: linear-gradient(95deg, rgba(255,77,109,0.22), rgba(255,142,159,0.10)); border: 1px solid rgba(255,77,109,0.50); color: #ff8e9f; box-shadow: 0 0 14px rgba(255,77,109,0.20); white-space: nowrap; } .svc-time { font-size: 12px; color: var(--muted); } .svc-card.is-wide { grid-column: span 2; } .svc-card.is-wide > .twin { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } @media (max-width: 700px) { .svc-card.is-wide { grid-column: span 1; } .svc-card.is-wide > .twin { grid-template-columns: 1fr; } } .svc-card.is-wide .svc-card-footer { margin-top: 20px; padding-top: 16px; } /* process strip */ .process-strip { margin-top: 80px; padding: 48px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .process-strip h2 { margin-bottom: 0; } .process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 40px; } @media (max-width: 800px) { .process-steps { grid-template-columns: 1fr; gap: 24px; } } .ps-item { padding: 0 20px; text-align: center; position: relative; } .ps-item:not(:last-child)::after { content: '→'; position: absolute; right: -10px; top: 20px; color: var(--c); opacity: .4; font-size: 18px; } @media (max-width: 800px) { .ps-item:not(:last-child)::after { display: none; } } .ps-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: 2px; color: var(--c); margin-bottom: 10px; } .ps-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; } .ps-item p { font-size: 12px; color: var(--muted); line-height: 1.6; } /* ═══════════════════════════════════════ PAGE: CONTACT ═══════════════════════════════════════ */ .contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; padding: 80px 0 100px; align-items: start; } @media (max-width: 800px) { .contact-layout { grid-template-columns: 1fr; gap: 48px; } } .contact-left .page-h1 { font-size: clamp(36px, 5vw, 60px); letter-spacing: -2.5px; margin-bottom: 24px; } .contact-left > .lede { max-width: 400px; } .contact-details { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; } .cd-item { display: flex; align-items: flex-start; gap: 14px; } .cd-icon { font-size: 18px; margin-top: 2px; } .cd-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 3px; } .cd-item p, .cd-item a { font-size: 13px; color: var(--muted); } .cd-item a:hover { color: var(--c); } .contact-promise h4 { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--c); } .contact-promise ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .contact-promise ul li { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; } .contact-promise ul li::before { content: '✓'; color: var(--c); flex-shrink: 0; } /* FORM */ .contact-form h3 { font-size: 20px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 28px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .field label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .field input, .field textarea, .field select { background: var(--surface2); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 12px 16px; color: var(--text); font-size: 14px; transition: border-color .2s, box-shadow .2s; outline: none; } .field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(0, 229, 255, 0.35); box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.08); } .field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: rgba(255, 77, 109, 0.5); } .field select option { background: var(--surface2); } .field textarea { resize: vertical; min-height: 120px; } /* honeypot — hidden from humans, visible to bots */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .form-submit { width: 100%; margin-top: 8px; justify-content: center; font-size: 12px; padding: 16px; border: none; } .form-submit[disabled] { opacity: .6; cursor: wait; } .form-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.5; } /* ─── 80% cheaper budget promise badge ─── */ .budget-promise { margin-top: 10px; padding: 11px 14px 11px 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; background: linear-gradient(95deg, rgba(0, 229, 255, 0.14) 0%, rgba(123, 97, 255, 0.16) 55%, rgba(255, 77, 109, 0.14) 100%); border: 1px solid rgba(78, 224, 240, 0.45); box-shadow: 0 0 0 1px rgba(78, 224, 240, 0.08) inset, 0 4px 22px rgba(0, 229, 255, 0.18), 0 0 38px rgba(123, 97, 255, 0.12); font-family: var(--f-mono); font-size: 12px; letter-spacing: .3px; color: #c8f6ff; line-height: 1.45; animation: budgetPromisePulse 4s ease-in-out infinite; } .budget-promise strong { font-weight: 700; background: linear-gradient(90deg, #4ee0f0, #9ff5ff 50%, #4ee0f0); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: budgetPromiseShine 3.5s linear infinite; } .budget-promise-bolt { font-size: 16px; line-height: 1; filter: drop-shadow(0 0 6px rgba(78, 224, 240, 0.8)); flex-shrink: 0; animation: budgetPromiseBolt 2.4s ease-in-out infinite; } @keyframes budgetPromisePulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(78, 224, 240, 0.08) inset, 0 4px 22px rgba(0, 229, 255, 0.18), 0 0 38px rgba(123, 97, 255, 0.12); } 50% { box-shadow: 0 0 0 1px rgba(78, 224, 240, 0.14) inset, 0 4px 28px rgba(0, 229, 255, 0.28), 0 0 52px rgba(123, 97, 255, 0.20); } } @keyframes budgetPromiseShine { 0% { background-position: 200% 50%; } 100% { background-position: -200% 50%; } } @keyframes budgetPromiseBolt { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.15) rotate(-8deg); opacity: .85; } } .form-error { display: none; margin-top: 12px; padding: 12px 16px; border-radius: 8px; background: rgba(255, 77, 109, 0.08); border: 1px solid rgba(255, 77, 109, 0.3); color: var(--r); font-size: 13px; } .form-error.is-visible { display: block; } /* form success */ .form-success { display: none; text-align: center; padding: 48px 24px; } .form-success.is-visible { display: block; } .form-success .big-check { font-size: 48px; margin-bottom: 16px; } .form-success h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; } .form-success p { font-size: 14px; color: var(--muted); line-height: 1.7; } .form-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } /* ───────────────────────────────────────── FOOTER ───────────────────────────────────────── */ body > footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .footer-links { display: flex; gap: 28px; flex-wrap: wrap; } .footer-links a { color: var(--muted); transition: color .2s; } .footer-links a:hover { color: var(--c); } /* ───────────────────────────────────────── COOKIE BANNER ───────────────────────────────────────── */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000; max-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 229, 255, 0.08); display: none; animation: fadeUp .4s ease; } .cookie-banner.is-visible { display: block; } .cookie-banner h4 { font-family: var(--f-display); font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--c); } .cookie-banner p { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; } .cookie-banner p a { color: var(--c); text-decoration: underline; } .cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; } .cookie-actions .btn { padding: 9px 16px; font-size: 10px; letter-spacing: 1.5px; } /* ───────────────────────────────────────── HERO / ABOUT SVG ANIMATIONS ───────────────────────────────────────── */ @keyframes nodePulse { 0%, 100% { opacity: .4; } 50% { opacity: .9; } } /* ───────────────────────────────────────── ACCESSIBILITY: REDUCED MOTION ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* stop SMIL animations */ svg animate, svg animateMotion, svg animateTransform { display: none; } /* hide the network-icon pulses entirely (they're pointless without motion) */ .qi-pulses { display: none; } }