/* ===================================================================== PixelForge Technologies SIA — "Digital Forge" design system Static site stylesheet. No build step required. MOTION POLICY (intentional): Animations are FORCED ON regardless of the operating system's "reduce animations" setting (Windows > Settings > Accessibility > Visual effects). We deliberately do NOT gate motion behind @media (prefers-reduced-motion: reduce). A manual, user-controlled kill switch is provided instead: adding the class `no-motion` to disables all motion. The footer "Motion" toggle drives that class. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* --------------------------------------------------------------- 1. Tokens --------------------------------------------------------------- */ :root { /* surfaces */ --ink-950: #07070C; --ink-900: #0A0A11; --ink-850: #0E0E17; --ink-800: #12121C; --ink-750: #171724; --ink-700: #1E1E2D; /* molten accent */ --ember-400: #FFC24D; --ember-500: #FF9138; --ember-600: #FF6A2A; --ember-700: #F0453C; /* cooled steel accent */ --ice-300: #9CF3FF; --ice-400: #6FE9FF; --ice-500: #35CFEE; --ice-600: #3B6FE0; /* text */ --text: #F4F2EF; --text-dim: #A9A5B6; --text-faint: #6E6A80; /* lines */ --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .14); /* gradients */ --grad-ember: linear-gradient(135deg, var(--ember-400) 0%, var(--ember-600) 48%, var(--ember-700) 100%); --grad-ice: linear-gradient(135deg, var(--ice-400) 0%, var(--ice-600) 100%); --grad-text: linear-gradient(100deg, #FFE7C2 0%, #FFB25C 38%, #FF7A3D 70%, #FF5C6E 100%); /* type */ --font-display: 'Syne', 'Trebuchet MS', sans-serif; --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* layout */ --wrap: 1240px; --wrap-narrow: 820px; --radius-s: 10px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 34px; /* motion */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.6, .01, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* z scale */ --z-bg: 0; --z-content: 10; --z-sticky: 20; --z-nav: 30; --z-overlay: 40; --z-cursor: 60; } /* --------------------------------------------------------------- 2. Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink-950); color: var(--text); font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.7; letter-spacing: .002em; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -.028em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; } ::selection { background: var(--ember-600); color: #fff; } :focus-visible { outline: 2px solid var(--ice-400); outline-offset: 3px; border-radius: 4px; } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--ink-900); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--ember-600), var(--ember-700)); border-radius: 99px; border: 3px solid var(--ink-900); } ::-webkit-scrollbar-thumb:hover { background: var(--ember-500); } /* --------------------------------------------------------------- 3. Global atmosphere layers --------------------------------------------------------------- */ /* Grain */ .grain { position: fixed; inset: -120px; z-index: var(--z-overlay); pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainShift 7s steps(6) infinite; } @keyframes grainShift { 0% { transform: translate(0, 0); } 16% { transform: translate(-14px, 8px); } 33% { transform: translate(10px, -12px); } 50% { transform: translate(-8px, -6px); } 66% { transform: translate(12px, 10px); } 83% { transform: translate(-10px, 4px); } 100% { transform: translate(0, 0); } } /* Blueprint grid */ .bg-grid { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 88%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 88%); animation: gridDrift 42s linear infinite; } @keyframes gridDrift { to { background-position: 72px 72px, 72px 72px; } } /* Aurora / forge-glow blobs */ .bg-aurora { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; overflow: hidden; } .bg-aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(110px); opacity: .3; will-change: transform; } .bg-aurora span:nth-child(1) { width: 640px; height: 640px; top: -220px; left: -160px; background: radial-gradient(circle, #FF6A2A 0%, transparent 68%); animation: blobA 26s var(--ease-io) infinite alternate; } .bg-aurora span:nth-child(2) { width: 560px; height: 560px; top: 16%; right: -200px; background: radial-gradient(circle, #3B6FE0 0%, transparent 68%); animation: blobB 32s var(--ease-io) infinite alternate; } .bg-aurora span:nth-child(3) { width: 520px; height: 520px; bottom: -180px; left: 34%; background: radial-gradient(circle, #F0453C 0%, transparent 70%); opacity: .2; animation: blobC 38s var(--ease-io) infinite alternate; } @keyframes blobA { to { transform: translate3d(160px, 120px, 0) scale(1.25); } } @keyframes blobB { to { transform: translate3d(-190px, 190px, 0) scale(.82); } } @keyframes blobC { to { transform: translate3d(120px, -150px, 0) scale(1.18); } } /* Floating ember motes (canvas) */ #emberCanvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .75; } /* Scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad-ember); box-shadow: 0 0 18px rgba(255, 106, 42, .85); z-index: calc(var(--z-nav) + 2); pointer-events: none; } /* Custom cursor (pointer devices only) */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ember-500); box-shadow: 0 0 12px var(--ember-600); } .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(255, 145, 56, .55); transition: opacity .3s, width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), border-color .3s, background-color .3s; } .cursor-ring.is-hot { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-color: rgba(111, 233, 255, .7); background: rgba(111, 233, 255, .07); } @media (hover: hover) and (pointer: fine) { .cursor-dot, .cursor-ring { opacity: 1; } } /* --------------------------------------------------------------- 4. Layout primitives --------------------------------------------------------------- */ .wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; position: relative; z-index: var(--z-content); } .wrap-narrow { width: min(100% - 44px, var(--wrap-narrow)); margin-inline: auto; position: relative; z-index: var(--z-content); } section { position: relative; } .section { padding: clamp(76px, 9vw, 132px) 0; } .section-tight { padding: clamp(56px, 6vw, 84px) 0; } .hr-glow { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--line-strong) 22%, rgba(255,106,42,.5) 50%, var(--line-strong) 78%, transparent); } /* --------------------------------------------------------------- 5. Typography helpers --------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ember-400); margin-bottom: 20px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--grad-ember); animation: eyebrowPulse 2.6s var(--ease-io) infinite; } @keyframes eyebrowPulse { 0%, 100% { width: 26px; opacity: 1; } 50% { width: 44px; opacity: .55; } } .eyebrow.is-ice { color: var(--ice-400); } .eyebrow.is-ice::before { background: var(--grad-ice); } .h-display { font-size: clamp(2.3rem, 4.5vw, 4rem); } .h-1 { font-size: clamp(2rem, 3.6vw, 3.1rem); } .h-2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); } .h-3 { font-size: clamp(1.22rem, 1.9vw, 1.5rem); letter-spacing: -.02em; } .grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: gradSlide 9s var(--ease-io) infinite alternate; } @keyframes gradSlide { to { background-position: 100% 0; } } /* When a gradient phrase is split into animated words, the background-clip must be re-applied to each word — a child inline box does not inherit the parent's painted background. */ .reveal-words .grad-text .w { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: wordUp .95s var(--ease-out) forwards, gradSlide 9s var(--ease-io) infinite alternate; } .lede { font-size: clamp(1.02rem, 1.4vw, 1.19rem); color: var(--text-dim); font-weight: 300; max-width: 62ch; } .muted { color: var(--text-dim); } .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } /* --------------------------------------------------------------- 6. Buttons --------------------------------------------------------------- */ .btn { --btn-bg: var(--grad-ember); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; min-height: 52px; border: 0; border-radius: 99px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: .005em; color: #14090A; background: var(--btn-bg); cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap; box-shadow: 0 10px 34px -12px rgba(255, 106, 42, .8), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out), filter .3s; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform: translateX(-120%); transition: transform .75s var(--ease-out); } .btn:hover { transform: translateY(-3px); box-shadow: 0 18px 46px -12px rgba(255, 106, 42, .95), inset 0 1px 0 rgba(255,255,255,.4); } .btn:hover::after { transform: translateX(120%); } .btn:active { transform: translateY(-1px) scale(.985); } .btn-ghost { color: var(--text); background: rgba(255,255,255,.03); border: 1px solid var(--line-strong); box-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .btn-ghost::after { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); } .btn-ghost:hover { border-color: rgba(111,233,255,.5); background: rgba(111,233,255,.07); box-shadow: 0 14px 40px -18px rgba(111,233,255,.8); } .btn-ice { color: #04121A; background: var(--grad-ice); box-shadow: 0 10px 34px -12px rgba(59,111,224,.85), inset 0 1px 0 rgba(255,255,255,.35); } .btn-ice:hover { box-shadow: 0 18px 46px -12px rgba(59,111,224,.95), inset 0 1px 0 rgba(255,255,255,.4); } .btn-sm { padding: 11px 20px; min-height: 44px; font-size: 14px; } .btn-block { width: 100%; } .btn-arrow svg { transition: transform .35s var(--ease-out); } .btn:hover .btn-arrow svg { transform: translateX(4px); } /* Text link with animated underline */ .link-u { position: relative; color: var(--ice-400); font-weight: 600; cursor: pointer; } .link-u::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .4s var(--ease-out); } .link-u:hover::after { transform: scaleX(1); transform-origin: 0 50%; } /* --------------------------------------------------------------- 7. Header / navigation --------------------------------------------------------------- */ .site-header { position: fixed; top: 14px; left: 0; right: 0; z-index: var(--z-nav); transition: top .4s var(--ease-out); } .nav-shell { width: min(100% - 32px, var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: 18px; padding: 10px 12px 10px 18px; border-radius: 99px; border: 1px solid var(--line); background: rgba(10, 10, 17, .55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); transition: background .45s var(--ease-out), border-color .45s, box-shadow .45s, padding .45s var(--ease-out); } .site-header.is-stuck .nav-shell { background: rgba(8, 8, 14, .84); border-color: var(--line-strong); box-shadow: 0 22px 60px -30px rgba(0,0,0,.95); padding-block: 8px; } .brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; } .brand-mark { width: 38px; height: 38px; flex: none; } .brand-mark .q-molten { transform-origin: 42.5px 21.5px; animation: qPulse 3.4s var(--ease-io) infinite; } .brand-mark .q-spark { animation: sparkBlink 2.2s var(--ease-io) infinite; } @keyframes qPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .78; transform: scale(1.1); } } @keyframes sparkBlink { 0%,100% { opacity: 1; r: 3; } 50% { opacity: .35; r: 2.2; } } .brand:hover .brand-mark { animation: markSpin 1.1s var(--ease-out); } @keyframes markSpin { to { transform: rotate(90deg); } } .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.03em; line-height: 1.05; } .brand-name small { display: block; font-family: var(--font-mono); font-size: 8.6px; font-weight: 400; letter-spacing: .3em; color: var(--text-faint); text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; } .nav-links a { position: relative; display: block; padding: 9px 15px; font-size: 14.5px; font-weight: 500; color: var(--text-dim); border-radius: 99px; transition: color .3s; } .nav-links a::before { content: ""; position: absolute; inset: 0; border-radius: 99px; background: rgba(255,255,255,.06); transform: scale(.75); opacity: 0; transition: transform .38s var(--ease-spring), opacity .28s; } .nav-links a:hover { color: var(--text); } .nav-links a:hover::before { transform: scale(1); opacity: 1; } .nav-links a.is-active { color: var(--text); } .nav-links a.is-active::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--grad-ember); box-shadow: 0 0 10px var(--ember-600); animation: dotIn .5s var(--ease-spring) both; } @keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } } /* Dropdown */ .nav-drop { position: relative; } .nav-drop > a::after { content: none; } .nav-drop-panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 10px); width: 330px; padding: 10px; border-radius: var(--radius-m); border: 1px solid var(--line-strong); background: rgba(12, 12, 20, .95); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 30px 70px -30px rgba(0,0,0,1); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), transform .38s var(--ease-out), visibility .3s; list-style: none; } .nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav-drop-panel li { list-style: none; } .nav-drop-panel a { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 11px; color: var(--text-dim); } .nav-drop-panel a::before { border-radius: 11px; } .nav-drop-panel a strong { display: block; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--text); } .nav-drop-panel a span { font-size: 12px; color: var(--text-faint); line-height: 1.45; } .nav-drop-panel .dp-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,106,42,.1); border: 1px solid rgba(255,106,42,.22); color: var(--ember-500); position: relative; z-index: 1; } .nav-drop-panel a:hover .dp-ico { animation: icoNudge .6s var(--ease-spring); } @keyframes icoNudge { 50% { transform: rotate(-10deg) scale(1.14); } } /* Burger */ .burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(255,255,255,.03); cursor: pointer; position: relative; } .burger span { position: absolute; left: 14px; width: 18px; height: 1.6px; background: var(--text); border-radius: 2px; transition: transform .4s var(--ease-spring), opacity .25s, width .3s; } .burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 22.2px; width: 12px; } .burger span:nth-child(3) { top: 27.4px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(-10px); } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); } /* Mobile drawer */ .mobile-nav { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); padding: 108px 26px 40px; background: rgba(7, 7, 12, .97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 6px; clip-path: circle(0% at calc(100% - 46px) 40px); transition: clip-path .7s var(--ease-io); overflow-y: auto; } .mobile-nav.is-open { clip-path: circle(150% at calc(100% - 46px) 40px); } .mobile-nav a { font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -.03em; padding: 13px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(22px); } .mobile-nav.is-open a { animation: mnIn .55s var(--ease-out) forwards; } .mobile-nav.is-open a:nth-child(1) { animation-delay: .16s; } .mobile-nav.is-open a:nth-child(2) { animation-delay: .22s; } .mobile-nav.is-open a:nth-child(3) { animation-delay: .28s; } .mobile-nav.is-open a:nth-child(4) { animation-delay: .34s; } .mobile-nav.is-open a:nth-child(5) { animation-delay: .40s; } .mobile-nav.is-open a:nth-child(6) { animation-delay: .46s; } .mobile-nav.is-open a:nth-child(7) { animation-delay: .52s; } .mobile-nav .mn-cta { animation-delay: .6s !important; border: 0; margin-top: 18px; } @keyframes mnIn { to { opacity: 1; transform: none; } } .mobile-nav a small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--ember-500); text-transform: uppercase; margin-top: 2px; } /* --------------------------------------------------------------- 8. Hero --------------------------------------------------------------- */ .hero { position: relative; padding: clamp(140px, 17vw, 200px) 0 clamp(60px, 7vw, 104px); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(34px, 5vw, 76px); align-items: center; } .hero-sub .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .hero h1 { margin-bottom: 26px; } .hero .lede { margin-bottom: 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; } /* Word-by-word reveal */ .reveal-words .w { display: inline-block; opacity: 0; transform: translateY(.5em) rotateX(-55deg); transform-origin: 50% 100%; animation: wordUp .95s var(--ease-out) forwards; } @keyframes wordUp { to { opacity: 1; transform: none; } } /* Generic staged entrance for hero children */ .stage { opacity: 0; transform: translateY(24px); animation: stageIn .9s var(--ease-out) forwards; } @keyframes stageIn { to { opacity: 1; transform: none; } } .d1 { animation-delay: .12s; } .d2 { animation-delay: .22s; } .d3 { animation-delay: .32s; } .d4 { animation-delay: .42s; } .d5 { animation-delay: .52s; } .d6 { animation-delay: .62s; } /* Hero art frame */ .hero-art { position: relative; display: grid; place-items: center; opacity: 0; transform: translateY(30px) scale(.96); animation: stageIn 1.15s .35s var(--ease-out) forwards; } .hero-art::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255,106,42,.22) 0%, transparent 66%); filter: blur(46px); animation: heroHalo 6.5s var(--ease-io) infinite alternate; } @keyframes heroHalo { to { transform: scale(1.18); opacity: .55; } } .hero-art svg { position: relative; width: 100%; height: auto; overflow: visible; } /* Hero stat strip */ .hero-stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); } .hero-stats div strong { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.95rem); font-weight: 800; letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-stats div span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); } /* --------------------------------------------------------------- 9. Micro decorations (small animated elements) --------------------------------------------------------------- */ .deco { position: absolute; pointer-events: none; z-index: 2; } /* orbiting ring of dots */ .deco-orbit { width: 78px; height: 78px; animation: spin 17s linear infinite; } .deco-orbit::before, .deco-orbit::after { content: ""; position: absolute; border-radius: 50%; } .deco-orbit::before { inset: 0; border: 1px dashed rgba(255,255,255,.16); } .deco-orbit::after { top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; background: var(--ember-500); box-shadow: 0 0 12px var(--ember-600); } @keyframes spin { to { transform: rotate(360deg); } } /* rotating dashed square */ .deco-square { width: 54px; height: 54px; border: 1px solid rgba(111,233,255,.28); border-radius: 8px; animation: spin 22s linear infinite reverse; } .deco-square::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,106,42,.28); border-radius: 4px; animation: spin 11s linear infinite; } /* pulsing crosshair */ .deco-cross { width: 22px; height: 22px; } .deco-cross::before, .deco-cross::after { content: ""; position: absolute; background: rgba(255,255,255,.3); } .deco-cross::before { left: 50%; top: 0; width: 1px; height: 100%; margin-left: -.5px; } .deco-cross::after { top: 50%; left: 0; height: 1px; width: 100%; margin-top: -.5px; } .deco-cross { animation: crossPulse 3s var(--ease-io) infinite; } @keyframes crossPulse { 0%,100% { opacity: .25; transform: scale(1); } 50% { opacity: .8; transform: scale(1.35); } } /* ping dot */ .deco-ping { width: 9px; height: 9px; } .deco-ping i { position: absolute; inset: 0; border-radius: 50%; background: var(--ice-400); box-shadow: 0 0 12px var(--ice-500); } .deco-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ice-400); animation: ping 2.4s var(--ease-out) infinite; } @keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } } /* floating chip */ .deco-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(14,14,23,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; animation: floatY 6s var(--ease-io) infinite alternate; } @keyframes floatY { to { transform: translateY(-16px); } } .deco-chip.alt { animation-duration: 8s; animation-delay: -3s; } /* vertical scanning line */ .deco-scan { width: 1px; height: 120px; background: linear-gradient(180deg, transparent, rgba(255,106,42,.75), transparent); animation: scanY 5.5s var(--ease-io) infinite; } @keyframes scanY { 0%,100% { transform: translateY(-40px); opacity: 0; } 20%,80% { opacity: 1; } 50% { transform: translateY(40px); } } /* small bar equalizer */ .deco-eq { display: flex; align-items: flex-end; gap: 3px; height: 26px; } .deco-eq i { display: block; width: 3px; border-radius: 2px; background: var(--grad-ember); animation: eq 1.1s var(--ease-io) infinite alternate; } .deco-eq i:nth-child(1) { height: 40%; animation-delay: 0s; } .deco-eq i:nth-child(2) { height: 80%; animation-delay: .14s; } .deco-eq i:nth-child(3) { height: 55%; animation-delay: .28s; } .deco-eq i:nth-child(4) { height: 95%; animation-delay: .42s; } .deco-eq i:nth-child(5) { height: 30%; animation-delay: .56s; } @keyframes eq { to { height: 18%; opacity: .55; } } /* corner brackets */ .deco-bracket { width: 30px; height: 30px; } .deco-bracket::before, .deco-bracket::after { content: ""; position: absolute; width: 30px; height: 30px; border: 1px solid rgba(255,106,42,.45); } .deco-bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; animation: brk 4s var(--ease-io) infinite alternate; } .deco-bracket::after { top: 0; left: 0; border-left: 0; border-top: 0; transform: translate(0,0); animation: brk 4s var(--ease-io) infinite alternate-reverse; } @keyframes brk { to { transform: translate(5px, 5px); opacity: .45; } } /* Scroll hint */ .scroll-hint { display: inline-flex; align-items: center; gap: 11px; margin-top: 46px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); } .scroll-hint i { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, var(--ember-600), transparent); position: relative; overflow: hidden; } .scroll-hint i::after { content: ""; position: absolute; top: -34px; left: 0; width: 1px; height: 34px; background: linear-gradient(180deg, transparent, var(--ice-400)); animation: scrollDrop 2.1s var(--ease-io) infinite; } @keyframes scrollDrop { to { top: 34px; } } /* --------------------------------------------------------------- 10. Section headers --------------------------------------------------------------- */ .sec-head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 62px); } .sec-head.center { margin-inline: auto; text-align: center; } .sec-head.center .eyebrow { justify-content: center; } .sec-head.center .lede { margin-inline: auto; } .sec-head h2 { margin-bottom: 20px; } .sec-head-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: clamp(38px, 5vw, 60px); } .sec-head-split > div { max-width: 640px; } /* --------------------------------------------------------------- 11. Cards --------------------------------------------------------------- */ .card { position: relative; padding: 30px; border-radius: var(--radius-l); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; transition: transform .5s var(--ease-out), border-color .45s, box-shadow .5s; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255,145,56,.14), transparent 62%); opacity: 0; transition: opacity .45s; pointer-events: none; } .card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 34px 70px -40px rgba(0,0,0,1); } .card:hover::before { opacity: 1; } /* Feature grid */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .f-ico { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; margin-bottom: 20px; color: var(--ember-500); background: linear-gradient(150deg, rgba(255,106,42,.16), rgba(255,106,42,.04)); border: 1px solid rgba(255,106,42,.26); transition: transform .5s var(--ease-spring), box-shadow .45s; } .card:hover .f-ico { transform: translateY(-3px) rotate(-7deg); box-shadow: 0 12px 30px -14px rgba(255,106,42,.9); } .f-ico.ice { color: var(--ice-400); background: linear-gradient(150deg, rgba(111,233,255,.14), rgba(111,233,255,.03)); border-color: rgba(111,233,255,.26); } .card h3 { margin-bottom: 10px; font-size: 1.14rem; letter-spacing: -.02em; } .card p { font-size: 14.6px; color: var(--text-dim); font-weight: 300; } /* --------------------------------------------------------------- 12. Service / pricing cards --------------------------------------------------------------- */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .svc-card { position: relative; display: flex; flex-direction: column; padding: 34px 30px 30px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 55%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; cursor: pointer; transition: transform .55s var(--ease-out), border-color .45s, box-shadow .55s; } .svc-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang, 0deg), transparent 0deg, rgba(255,145,56,.85) 55deg, rgba(111,233,255,.6) 110deg, transparent 170deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .5s; pointer-events: none; } .svc-card:hover::before { opacity: 1; animation: angSpin 3.2s linear infinite; } @property --ang { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes angSpin { to { --ang: 360deg; } } .svc-card:hover { transform: translateY(-10px); box-shadow: 0 46px 90px -50px rgba(0,0,0,1); } .svc-card .svc-glow { position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,106,42,.3), transparent 68%); filter: blur(30px); opacity: .55; transition: opacity .5s, transform .7s var(--ease-out); pointer-events: none; } .svc-card:hover .svc-glow { opacity: 1; transform: scale(1.35); } .svc-card.ice .svc-glow { background: radial-gradient(circle, rgba(59,111,224,.34), transparent 68%); } .svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .svc-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--text-faint); padding-top: 6px; } .svc-badge { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 11px; border-radius: 99px; color: #16090A; background: var(--grad-ember); animation: badgeGlow 2.8s var(--ease-io) infinite; } @keyframes badgeGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,106,42,.5); } 50% { box-shadow: 0 0 0 8px rgba(255,106,42,0); } } .svc-card h3 { font-size: clamp(1.42rem, 2.2vw, 1.75rem); margin-bottom: 10px; } .svc-for { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice-400); margin-bottom: 16px; } .svc-card > p { font-size: 14.8px; color: var(--text-dim); font-weight: 300; margin-bottom: 22px; } .svc-price { display: flex; align-items: baseline; gap: 8px; padding: 18px 0; margin-bottom: 20px; border-block: 1px solid var(--line); } .svc-price b { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .svc-price span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .svc-list { list-style: none; display: grid; gap: 11px; margin-bottom: 26px; } .svc-list li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; font-size: 14.4px; color: var(--text-dim); font-weight: 300; line-height: 1.55; } .svc-list li svg { margin-top: 4px; color: var(--ember-500); flex: none; } .svc-card.ice .svc-list li svg { color: var(--ice-400); } .svc-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; } .svc-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); transition: color .3s, gap .35s var(--ease-out); } .svc-card:hover .svc-more { color: var(--ember-400); gap: 13px; } .svc-card.ice:hover .svc-more { color: var(--ice-400); } /* full-card link overlay */ .stretch-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; } /* --------------------------------------------------------------- 13. Marquee --------------------------------------------------------------- */ .marquee { position: relative; overflow: hidden; padding: 20px 0; border-block: 1px solid var(--line); background: rgba(10,10,17,.5); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; animation: marq 34s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marq { to { transform: translateX(-50%); } } .marquee-track span { display: inline-flex; align-items: center; gap: 16px; padding: 0 26px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; } .marquee-track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ember-600); box-shadow: 0 0 8px var(--ember-600); } /* --------------------------------------------------------------- 14. Process timeline --------------------------------------------------------------- */ .timeline { position: relative; display: grid; gap: 0; } .timeline::before { content: ""; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent); } .timeline::after { content: ""; position: absolute; left: 24px; top: 0; width: 3px; height: 90px; border-radius: 3px; background: linear-gradient(180deg, transparent, var(--ember-600), transparent); filter: blur(1px); animation: tlPulse 6s var(--ease-io) infinite; } @keyframes tlPulse { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 90px); opacity: 0; } } .tl-item { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 22px 0; } .tl-dot { position: relative; width: 51px; height: 51px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ink-900); font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--ember-400); transition: border-color .45s, transform .5s var(--ease-spring), color .4s; z-index: 2; } .tl-item:hover .tl-dot { transform: scale(1.1); border-color: rgba(255,106,42,.6); color: var(--ember-500); } .tl-dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,106,42,.35); opacity: 0; animation: ping 3s var(--ease-out) infinite; animation-delay: var(--pd, 0s); } .tl-item:hover .tl-dot::after { opacity: 1; } .tl-body h3 { font-size: 1.16rem; margin-bottom: 8px; } .tl-body p { font-size: 14.6px; color: var(--text-dim); font-weight: 300; max-width: 62ch; } .tl-body .mono { display: block; margin-bottom: 6px; font-size: 10.5px; color: var(--ice-500); } /* --------------------------------------------------------------- 15. Stats / counters --------------------------------------------------------------- */ .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--line); } .stat-band > div { padding: 34px 26px; background: var(--ink-900); position: relative; overflow: hidden; transition: background .45s; } .stat-band > div:hover { background: var(--ink-850); } .stat-band > div::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--grad-ember); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); } .stat-band > div:hover::after { transform: scaleX(1); } .stat-band b { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 10px; } .stat-band small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); } /* --------------------------------------------------------------- 16. Accordion / FAQ --------------------------------------------------------------- */ .acc { border-top: 1px solid var(--line); } .acc-item { border-bottom: 1px solid var(--line); } .acc-btn { width: 100%; display: flex; align-items: center; gap: 20px; padding: 24px 4px; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: clamp(1rem, 1.55vw, 1.16rem); font-weight: 700; letter-spacing: -.02em; color: var(--text); transition: color .3s, padding-left .4s var(--ease-out); } .acc-btn:hover { color: var(--ember-400); padding-left: 12px; } .acc-btn .acc-i { margin-left: auto; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; transition: transform .5s var(--ease-spring), border-color .4s, background-color .4s; } .acc-btn .acc-i::before, .acc-btn .acc-i::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease-spring), opacity .3s; } .acc-btn .acc-i::before { width: 12px; height: 1.6px; } .acc-btn .acc-i::after { width: 1.6px; height: 12px; } .acc-item.is-open .acc-btn { color: var(--ember-400); } .acc-item.is-open .acc-i { transform: rotate(180deg); border-color: rgba(255,106,42,.5); background: rgba(255,106,42,.1); } .acc-item.is-open .acc-i::after { transform: scaleY(0); opacity: 0; } .acc-panel { overflow: hidden; height: 0; transition: height .5s var(--ease-io); } .acc-panel > div { padding: 0 60px 26px 4px; color: var(--text-dim); font-weight: 300; font-size: 15px; } /* --------------------------------------------------------------- 17. CTA band --------------------------------------------------------------- */ .cta-band { position: relative; padding: clamp(52px, 6.5vw, 84px) clamp(28px, 5vw, 68px); border-radius: var(--radius-xl); border: 1px solid var(--line-strong); background: radial-gradient(900px circle at 12% 0%, rgba(255,106,42,.2), transparent 55%), radial-gradient(700px circle at 92% 100%, rgba(59,111,224,.22), transparent 58%), linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); overflow: hidden; text-align: center; } .cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 78%); animation: gridDrift 26s linear infinite; pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { margin-bottom: 18px; } .cta-band .lede { margin: 0 auto 32px; } .cta-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; } /* --------------------------------------------------------------- 18. Contact --------------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 4vw, 54px); align-items: start; } .form-card { padding: clamp(26px, 3.4vw, 40px); border-radius: var(--radius-l); border: 1px solid var(--line-strong); background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .field { position: relative; margin-bottom: 20px; } .field label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px; transition: color .3s; } .field:focus-within label { color: var(--ember-400); } .field input, .field textarea, .field select { width: 100%; padding: 14px 16px; border-radius: 13px; border: 1px solid var(--line-strong); background: rgba(7,7,12,.6); color: var(--text); font-size: 15.5px; transition: border-color .35s, box-shadow .35s, background-color .35s; } .field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23A9A5B6' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; } .field select option { background: #11111A; color: var(--text); } .field textarea { min-height: 132px; resize: vertical; line-height: 1.6; } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: rgba(255,106,42,.65); box-shadow: 0 0 0 4px rgba(255,106,42,.12); background: rgba(7,7,12,.85); } .field .err { display: none; margin-top: 7px; font-size: 12.5px; color: #FF8A7A; font-family: var(--font-mono); letter-spacing: .04em; } .field.is-invalid input, .field.is-invalid textarea { border-color: rgba(240,69,60,.75); } .field.is-invalid .err { display: block; animation: shakeIn .4s var(--ease-out); } @keyframes shakeIn { 0% { transform: translateX(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } } .form-note { font-size: 12.6px; color: var(--text-faint); margin-top: 16px; line-height: 1.6; } .form-status { display: none; margin-top: 18px; padding: 15px 18px; border-radius: 13px; border: 1px solid rgba(111,233,255,.35); background: rgba(111,233,255,.07); font-size: 14.2px; color: var(--ice-300); } .form-status.is-on { display: block; animation: stageIn .5s var(--ease-out) both; } .checkline { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; } .checkline input { width: 19px; height: 19px; margin-top: 3px; flex: none; accent-color: var(--ember-600); cursor: pointer; } .checkline span { font-size: 13.2px; color: var(--text-dim); line-height: 1.55; font-weight: 300; } /* Contact info list */ .info-list { display: grid; gap: 12px; } .info-row { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: center; padding: 17px 18px; border-radius: var(--radius-m); border: 1px solid var(--line); background: rgba(255,255,255,.022); transition: border-color .4s, transform .45s var(--ease-out), background-color .4s; } .info-row:hover { transform: translateX(6px); border-color: var(--line-strong); background: rgba(255,255,255,.04); } .info-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--ember-500); background: linear-gradient(150deg, rgba(255,106,42,.15), rgba(255,106,42,.03)); border: 1px solid rgba(255,106,42,.24); transition: transform .5s var(--ease-spring); } .info-row:hover .info-ico { transform: rotate(-8deg) scale(1.06); } .info-row small { display: block; font-family: var(--font-mono); font-size: 9.8px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; } .info-row strong { font-size: 15.4px; font-weight: 600; letter-spacing: -.01em; word-break: break-word; } /* Company data table */ .data-table { width: 100%; border-collapse: collapse; font-size: 14.4px; } .data-table th, .data-table td { padding: 14px 4px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .data-table th { width: 42%; font-family: var(--font-mono); font-size: 10.6px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint); } .data-table td { color: var(--text-dim); font-weight: 300; } .data-table tr { transition: background-color .35s; } .data-table tr:hover { background: rgba(255,255,255,.022); } /* --------------------------------------------------------------- 19. Footer --------------------------------------------------------------- */ .site-footer { position: relative; margin-top: clamp(70px, 8vw, 110px); padding-top: clamp(56px, 6vw, 78px); border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(255,106,42,.045)); } .footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px 26px; padding-bottom: 46px; } .footer-col h4 { font-family: var(--font-mono); font-size: 10.4px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; } .footer-col ul { list-style: none; display: grid; gap: 11px; } .footer-col a { font-size: 14.6px; color: var(--text-dim); font-weight: 300; display: inline-flex; align-items: center; gap: 8px; transition: color .3s, transform .35s var(--ease-out); } .footer-col a::before { content: ""; width: 0; height: 1px; background: var(--ember-600); transition: width .35s var(--ease-out); } .footer-col a:hover { color: var(--text); transform: translateX(3px); } .footer-col a:hover::before { width: 12px; } .footer-brand p { font-size: 14.4px; color: var(--text-dim); font-weight: 300; max-width: 40ch; margin: 18px 0 22px; } .footer-legal-mini { font-family: var(--font-mono); font-size: 10.6px; letter-spacing: .1em; color: var(--text-faint); line-height: 2; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 30px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.8px; letter-spacing: .1em; color: var(--text-faint); } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 20px; } .footer-bottom nav a { transition: color .3s; } .footer-bottom nav a:hover { color: var(--ember-400); } /* Motion toggle */ .motion-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); transition: border-color .35s, color .35s; } .motion-toggle:hover { border-color: rgba(255,106,42,.5); color: var(--text); } .motion-toggle i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember-500); box-shadow: 0 0 10px var(--ember-600); animation: sparkBlink 1.8s var(--ease-io) infinite; } html.no-motion .motion-toggle i { background: var(--text-faint); box-shadow: none; animation: none; } /* Back to top */ .to-top { position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(12,12,20,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--text-dim); cursor: pointer; z-index: var(--z-sticky); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: opacity .4s, transform .5s var(--ease-spring), visibility .4s, border-color .35s, color .35s; } .to-top.is-on { opacity: 1; visibility: visible; transform: none; } .to-top:hover { border-color: rgba(255,106,42,.55); color: var(--ember-400); } /* --------------------------------------------------------------- 20. Legal pages --------------------------------------------------------------- */ .legal-hero { padding: clamp(132px, 15vw, 172px) 0 clamp(30px, 4vw, 48px); } .legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; } .legal-toc { position: sticky; top: 104px; padding: 22px; border-radius: var(--radius-m); border: 1px solid var(--line); background: rgba(255,255,255,.022); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .legal-toc h4 { font-family: var(--font-mono); font-size: 10.2px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; font-weight: 500; } .legal-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 3px; } .legal-toc a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13.2px; color: var(--text-dim); font-weight: 300; line-height: 1.4; border-left: 2px solid transparent; transition: color .3s, background-color .3s, border-color .3s, padding-left .3s var(--ease-out); } .legal-toc a:hover { color: var(--text); background: rgba(255,255,255,.04); padding-left: 14px; } .legal-toc a.is-active { color: var(--ember-400); border-left-color: var(--ember-600); background: rgba(255,106,42,.07); } .legal-body { max-width: 74ch; } .legal-body section { scroll-margin-top: 110px; padding-bottom: 42px; } .legal-body h2 { font-size: clamp(1.28rem, 2.1vw, 1.6rem); margin-bottom: 16px; display: flex; align-items: baseline; gap: 13px; } .legal-body h2 i { font-family: var(--font-mono); font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--ember-600); flex: none; } .legal-body h3 { font-size: 1.03rem; margin: 24px 0 10px; color: var(--text); } .legal-body p { font-size: 15.2px; color: var(--text-dim); font-weight: 300; margin-bottom: 14px; } .legal-body ul, .legal-body ol { padding-left: 20px; margin-bottom: 16px; display: grid; gap: 8px; } .legal-body li { font-size: 15px; color: var(--text-dim); font-weight: 300; } .legal-body li::marker { color: var(--ember-600); } .legal-body a { color: var(--ice-400); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .legal-body a:hover { color: var(--ice-300); } .legal-body strong { color: var(--text); font-weight: 600; } .legal-note { padding: 20px 22px; border-radius: var(--radius-m); border: 1px solid rgba(255,106,42,.28); background: rgba(255,106,42,.06); margin-bottom: 30px; } .legal-note p { margin: 0; font-size: 14.2px; } .cookie-table { width: 100%; border-collapse: collapse; font-size: 13.6px; margin-bottom: 22px; display: block; overflow-x: auto; } .cookie-table thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .cookie-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--text-dim); font-weight: 300; vertical-align: top; } .cookie-table td:first-child { font-family: var(--font-mono); font-size: 12.4px; color: var(--ember-400); white-space: nowrap; } .cookie-table tbody tr { transition: background-color .3s; } .cookie-table tbody tr:hover { background: rgba(255,255,255,.022); } /* --------------------------------------------------------------- 21. Cookie consent bar --------------------------------------------------------------- */ .cookie-bar { position: fixed; left: 22px; right: 22px; bottom: 22px; z-index: var(--z-overlay); display: none; gap: 20px; align-items: center; flex-wrap: wrap; max-width: 940px; margin-inline: auto; padding: 20px 24px; border-radius: var(--radius-l); border: 1px solid var(--line-strong); background: rgba(12,12,20,.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 40px 90px -40px rgba(0,0,0,1); } .cookie-bar.is-on { display: flex; animation: cbIn .7s var(--ease-out) both; } @keyframes cbIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } .cookie-bar p { flex: 1 1 340px; font-size: 13.6px; color: var(--text-dim); font-weight: 300; } .cookie-bar p a { color: var(--ice-400); text-decoration: underline; text-underline-offset: 3px; } .cookie-bar .cb-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* --------------------------------------------------------------- 22. Scroll reveal --------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .85s var(--ease-out), transform .95s var(--ease-out); transition-delay: var(--rd, 0ms); will-change: transform, opacity; } [data-reveal="left"] { transform: translateX(-38px); } [data-reveal="right"] { transform: translateX(38px); } [data-reveal="scale"] { transform: scale(.93); } [data-reveal="blur"] { filter: blur(10px); transition-property: opacity, transform, filter; } [data-reveal].is-in { opacity: 1; transform: none; filter: none; } /* Tilt container */ .tilt { transform-style: preserve-3d; will-change: transform; } /* --------------------------------------------------------------- 23. Page-hero SVG shared animation classes --------------------------------------------------------------- */ .svg-draw { stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); animation: draw 2.6s var(--ease-io) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .svg-spin { animation: spin 26s linear infinite; } .svg-spin-rev { animation: spin 34s linear infinite reverse; } .svg-spin-fast { animation: spin 12s linear infinite; } .svg-float { animation: floatY 5s var(--ease-io) infinite alternate; } .svg-float-slow { animation: floatY 8s var(--ease-io) infinite alternate; } .svg-pulse { animation: svgPulse 3s var(--ease-io) infinite; } @keyframes svgPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .svg-blink { animation: svgPulse 1.6s steps(2) infinite; } .svg-dash { stroke-dasharray: 5 9; animation: dashRun 1.6s linear infinite; } @keyframes dashRun { to { stroke-dashoffset: -28; } } .svg-rise { animation: svgRise 4s var(--ease-io) infinite; } @keyframes svgRise { 0% { transform: translateY(10px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } } /* --------------------------------------------------------------- 24. Misc utilities --------------------------------------------------------------- */ /* --------------------------------------------------------------- TEMPORARILY HIDDEN CONTACT CHANNELS The phone number and the WhatsApp entry points are kept in the markup on every page but hidden from view until the final number is confirmed. Nothing has been deleted. To bring them all back: delete (or comment out) the single rule below. No HTML changes are needed anywhere. --------------------------------------------------------------- */ .pf-hidden { display: none !important; } .text-center { text-align: center; } .mt-s { margin-top: 16px; } .mt-m { margin-top: 30px; } .mt-l { margin-top: 52px; } .flex-row { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -80px; left: 18px; z-index: 100; padding: 12px 20px; border-radius: 0 0 12px 12px; background: var(--ember-600); color: #14090A; font-weight: 600; transition: top .3s var(--ease-out); } .skip-link:focus { top: 0; } .tag-row { display: flex; flex-wrap: wrap; gap: 9px; } .tag { font-family: var(--font-mono); font-size: 10.4px; letter-spacing: .14em; text-transform: uppercase; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--text-dim); background: rgba(255,255,255,.025); transition: border-color .35s, color .35s, transform .4s var(--ease-spring), background-color .35s; cursor: default; } .tag:hover { border-color: rgba(255,106,42,.55); color: var(--ember-400); background: rgba(255,106,42,.07); transform: translateY(-2px); } .note-strip { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-m); border: 1px solid rgba(111,233,255,.24); background: rgba(111,233,255,.05); font-size: 14.2px; color: var(--text-dim); font-weight: 300; } .note-strip svg { flex: none; color: var(--ice-400); margin-top: 2px; } /* Comparison table */ .cmp-wrap { overflow-x: auto; border-radius: var(--radius-l); border: 1px solid var(--line); } .cmp { width: 100%; border-collapse: collapse; min-width: 720px; } .cmp th, .cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14.2px; } .cmp thead th { font-family: var(--font-mono); font-size: 10.4px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; background: rgba(255,255,255,.028); } .cmp thead th:first-child { width: 34%; } .cmp tbody th { font-weight: 500; color: var(--text); font-size: 14.4px; font-family: var(--font-body); } .cmp td { color: var(--text-dim); font-weight: 300; } .cmp tbody tr { transition: background-color .3s; } .cmp tbody tr:hover { background: rgba(255,255,255,.024); } .cmp .yes { color: var(--ember-500); } .cmp .no { color: var(--text-faint); } /* --------------------------------------------------------------- 25. Responsive --------------------------------------------------------------- */ @media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .stat-band { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: repeat(2, 1fr); } .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } .legal-toc ol { display: flex; flex-wrap: wrap; gap: 6px; } .legal-toc a { font-size: 12.4px; } } @media (max-width: 980px) { /* Floating decorations need breathing room they don't have on narrow screens — they would land on top of body copy. The in-SVG and in-component animations carry the motion instead. */ .deco { display: none; } .nav-links, .nav-cta-desktop { display: none; } .burger { display: block; } .hero-grid { grid-template-columns: 1fr; gap: 44px; } .hero-sub .hero-grid { grid-template-columns: 1fr; } .hero-art { order: -1; max-width: 480px; margin-inline: auto; } .svc-grid { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { body { font-size: 16px; } .wrap, .wrap-narrow { width: min(100% - 32px, var(--wrap)); } .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } .stat-band { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 32px; } .tl-item { grid-template-columns: 40px 1fr; gap: 16px; } .tl-dot { width: 40px; height: 40px; font-size: 11px; } .timeline::before { left: 19.5px; } .timeline::after { left: 19px; } .acc-panel > div { padding-right: 10px; } .cookie-bar { left: 14px; right: 14px; bottom: 14px; padding: 18px; } .cursor-dot, .cursor-ring { display: none; } .hero-stats { gap: 18px 26px; } .btn { width: 100%; } .hero-actions .btn, .cta-actions .btn { width: 100%; } .flex-row .btn { width: auto; } } @media (max-width: 420px) { .brand-name small { display: none; } .mobile-nav a { font-size: 23px; } } /* --------------------------------------------------------------- 26. Manual motion kill switch (user-controlled, NOT OS-controlled) --------------------------------------------------------------- */ html.no-motion, html.no-motion * , html.no-motion *::before, html.no-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; } html.no-motion .stage, html.no-motion .hero-art, html.no-motion .reveal-words .w { opacity: 1 !important; transform: none !important; } html.no-motion #emberCanvas, html.no-motion .grain { display: none; } /* Print */ @media print { .site-header, .site-footer, .cookie-bar, .to-top, .bg-grid, .bg-aurora, #emberCanvas, .grain, .cursor-dot, .cursor-ring, .scroll-progress { display: none !important; } body { background: #fff; color: #000; } }