/* ========================================================= Arcanis Labs — Design System Active theme: CRIMSON FORGE (set via ) Alternate themes at the bottom of this file: violet / emerald / gold (or remove the attribute for the original blue). Type: Sora / Montserrat ========================================================= */ :root { --bg: #05070f; --bg-2: #080c1c; --surface: #0b1122; --surface-2: #0e1631; --line: rgba(120, 150, 220, 0.12); --line-2: rgba(120, 150, 220, 0.22); --blue: #1d5aff; --blue-2: #2f6bff; --blue-soft: #4d8bff; --cyan: #4fc3ff; --text: #eaf0ff; --text-2: #aeb9d6; --muted: #7e89ab; --radius: 16px; --radius-lg: 22px; --maxw: 1180px; --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); --glow: 0 0 40px rgba(var(--accent-rgb), 0.45); /* theme-controllable atmosphere */ --glow-1: #1d5aff; --glow-2: #123a9e; --grid-rgb: 90, 130, 220; --accent-rgb: 45, 107, 255; --cyan-rgb: 79, 195, 255; --grad-3: #9ad4ff; --bb-filter: none; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { font-family: "Montserrat", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: "Sora", sans-serif; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } .grad-text { background: linear-gradient(100deg, var(--blue-soft) 0%, var(--cyan) 55%, var(--grad-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================= Background FX ========================================================= */ .bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg-grid { position: absolute; inset: -2px; background-image: linear-gradient(rgba(var(--grid-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--grid-rgb), 0.05) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%); } .bg-glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.55; } .bg-glow--1 { width: 620px; height: 620px; top: -240px; right: -120px; background: radial-gradient(circle, var(--glow-1), transparent 70%); } .bg-glow--2 { width: 560px; height: 560px; top: 620px; left: -220px; background: radial-gradient(circle, var(--glow-2), transparent 70%); opacity: 0.4; } /* ========================================================= Top bar + Header ========================================================= */ .topbar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(var(--cyan-rgb), 0.10)); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); padding: 9px 16px; text-align: center; } .topbar a { color: var(--text); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.35); } .topbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2s infinite; } .header { position: sticky; top: 0; z-index: 50; transition: background 0.3s var(--ease), border-color 0.3s, backdrop-filter 0.3s; border-bottom: 1px solid transparent; } .header.scrolled { background: rgba(6, 9, 20, 0.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 78px; } .brand { display: inline-flex; align-items: center; } .brand__logo { height: 34px; width: auto; transition: transform 0.25s var(--ease); } .brand:hover .brand__logo { transform: scale(1.04); } .nav__menu { list-style: none; display: flex; align-items: center; gap: 30px; } .nav__menu > li > a { font-size: 15px; font-weight: 500; color: var(--text-2); transition: color 0.2s; } .nav__menu > li > a:hover { color: var(--text); } .nav__cta a { color: #fff !important; } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; } .nav__toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle.open span:nth-child(2) { opacity: 0; } .nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================= Buttons ========================================================= */ .btn { --pad: 14px 26px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: var(--pad); border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: transform 0.2s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.25s; white-space: nowrap; } .btn svg { transition: transform 0.25s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn--sm { --pad: 10px 20px; font-size: 14px; } .btn--block { width: 100%; } .btn--primary { color: #fff; background: linear-gradient(180deg, var(--blue-2), var(--blue)); box-shadow: 0 10px 30px -8px rgba(var(--accent-rgb), 0.6), inset 0 1px 0 rgba(255,255,255,0.22); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(var(--accent-rgb), 0.75), inset 0 1px 0 rgba(255,255,255,0.25); } .btn--ghost { color: var(--text); background: rgba(120,150,220,0.06); border-color: var(--line-2); } .btn--ghost:hover { border-color: var(--blue-soft); background: rgba(var(--accent-rgb),0.12); transform: translateY(-2px); } /* ========================================================= Hero ========================================================= */ .hero { position: relative; padding: 74px 0 40px; } .hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-soft); background: rgba(var(--accent-rgb),0.10); border: 1px solid var(--line-2); padding: 7px 15px; border-radius: 999px; margin-bottom: 24px; } .eyebrow__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2s infinite; } .hero__title { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; margin-bottom: 22px; } .hero__title .grad-text { white-space: nowrap; } @media (max-width: 640px) { .hero__title .grad-text { white-space: normal; } } .hero__lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--text-2); max-width: 560px; margin-bottom: 34px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; } .hero__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; } .hero__badges li { font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); position: relative; padding-left: 18px; } .hero__badges li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 2px; background: var(--blue); } /* Hero art */ .hero__art { position: relative; display: grid; place-items: center; min-height: 360px; } .hero__emblem { width: min(300px, 74%); filter: drop-shadow(0 0 30px rgba(var(--cyan-rgb),0.55)); position: relative; z-index: 2; animation: float 6s ease-in-out infinite; } .hero__emblem-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),0.55), transparent 65%); filter: blur(30px); z-index: 1; } .hero__ring { position: absolute; border: 1px solid var(--line-2); border-radius: 50%; } .hero__ring--1 { width: 360px; height: 360px; animation: spin 24s linear infinite; } .hero__ring--2 { width: 470px; height: 470px; border-style: dashed; border-color: rgba(120,150,220,0.10); animation: spin 40s linear infinite reverse; } /* Stats */ .stats { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .stat { background: var(--surface); padding: 26px 22px; } .stat__num { font-family: "Sora", sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: #fff; line-height: 1; margin-bottom: 8px; } .stat__num .grad-text, .stat__num { background: linear-gradient(100deg, #fff, var(--blue-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__label { font-size: 13.5px; color: var(--text-2); line-height: 1.5; } /* ========================================================= Generic section ========================================================= */ .section { padding: 96px 0; position: relative; } .section--alt { background: linear-gradient(180deg, rgba(9,13,28,0), rgba(9,13,28,0.85) 12%, rgba(9,13,28,0.85) 88%, rgba(9,13,28,0)); } .section__head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 16px; } .section__title { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 18px; } .section__sub { color: var(--text-2); font-size: 1.05rem; } /* ========================================================= Pillars (Pentest + Bug Bounty) ========================================================= */ .pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .pillar { position: relative; padding: 38px 34px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2); overflow: hidden; transition: transform 0.3s var(--ease), border-color 0.3s; } .pillar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(var(--cyan-rgb),0.5), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s; } .pillar:hover { transform: translateY(-4px); border-color: transparent; } .pillar:hover::before { opacity: 1; } .pillar__icon { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; color: var(--cyan); background: rgba(var(--accent-rgb),0.12); border: 1px solid var(--line-2); margin-bottom: 22px; } .pillar__icon svg { width: 28px; height: 28px; } .pillar h3 { font-size: 1.5rem; margin-bottom: 12px; } .pillar p { color: var(--text-2); margin-bottom: 22px; } .pillar__list { list-style: none; display: grid; gap: 11px; } .pillar__list li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--text); } .pillar__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 4px; background: rgba(var(--accent-rgb),0.15); border: 1px solid var(--blue); } .pillar__list li::after { content: ""; position: absolute; left: 4px; top: 10px; width: 5px; height: 8px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(40deg); } /* ========================================================= Capability cards ========================================================= */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .card { position: relative; padding: 28px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s; } .card:hover { transform: translateY(-5px); border-color: var(--line-2); background: var(--surface-2); } .card__icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: var(--cyan); background: rgba(var(--accent-rgb),0.10); border: 1px solid var(--line); margin-bottom: 18px; transition: background 0.3s, color 0.3s; } .card:hover .card__icon { background: rgba(var(--accent-rgb),0.20); color: #cfeaff; } .card__icon svg { width: 24px; height: 24px; } .card h3 { font-size: 1.12rem; margin-bottom: 9px; } .card p { font-size: 14px; color: var(--text-2); } .card--cta { background: linear-gradient(150deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.04)); border-color: var(--line-2); display: flex; flex-direction: column; } .card__link { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 7px; color: var(--cyan); font-weight: 600; font-size: 14px; } .card__link svg { transition: transform 0.25s var(--ease); } .card--cta:hover .card__link svg { transform: translateX(4px); } /* ========================================================= Steps / methodology ========================================================= */ .steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: step; } .step { position: relative; padding: 30px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s; } .step:hover { transform: translateY(-4px); border-color: var(--line-2); } .step__num { font-family: "Sora", sans-serif; font-weight: 800; font-size: 2rem; color: transparent; -webkit-text-stroke: 1.4px var(--blue-soft); display: block; margin-bottom: 14px; } .step h3 { font-size: 1.05rem; margin-bottom: 10px; } .step p { font-size: 13.5px; color: var(--text-2); } /* ========================================================= Why grid ========================================================= */ .why__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .why__copy { position: sticky; top: 100px; } .why__copy .section__title { font-size: clamp(1.7rem, 3vw, 2.4rem); } .why__copy .btn { margin-top: 8px; } .why__list { display: grid; gap: 16px; } .why__item { display: flex; gap: 18px; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color 0.3s, transform 0.3s var(--ease); } .why__item:hover { border-color: var(--line-2); transform: translateX(4px); } .why__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: var(--cyan); background: rgba(var(--accent-rgb),0.12); border: 1px solid var(--line-2); } .why__icon svg { width: 22px; height: 22px; } .why__item h3 { font-size: 1.12rem; margin-bottom: 6px; } .why__item p { font-size: 14px; color: var(--text-2); } /* ========================================================= Deliverables ========================================================= */ .deliverables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .deliver { padding: 28px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s; } .deliver:hover { transform: translateY(-4px); border-color: var(--line-2); } .deliver__badge { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); background: rgba(var(--accent-rgb),0.12); border: 1px solid var(--line-2); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; } .deliver h3 { font-size: 1.12rem; margin-bottom: 10px; } .deliver p { font-size: 14px; color: var(--text-2); } /* ========================================================= About ========================================================= */ .about__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; } .about__art { position: relative; display: grid; place-items: center; min-height: 320px; } .about__emblem { width: min(240px, 70%); filter: drop-shadow(0 0 26px rgba(var(--cyan-rgb),0.5)); position: relative; z-index: 2; } .about__emblem-glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),0.5), transparent 65%); filter: blur(34px); } .about__copy p { color: var(--text-2); margin-bottom: 18px; } .about__copy strong { color: var(--text); } .about__values { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .about__values span { font-size: 13px; font-weight: 600; color: var(--text); padding: 8px 16px; border-radius: 999px; background: rgba(var(--accent-rgb),0.08); border: 1px solid var(--line-2); } /* ========================================================= Contact ========================================================= */ .contact { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: start; padding: 48px; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2); box-shadow: var(--shadow); } .contact__meta { list-style: none; display: grid; gap: 16px; margin-top: 28px; } .contact__meta li { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 15px; } .contact__meta svg { color: var(--cyan); flex-shrink: 0; } .contact__meta a { color: var(--text); border-bottom: 1px solid var(--line-2); transition: border-color 0.2s; } .contact__meta a:hover { border-color: var(--cyan); } .contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; } .field--full { grid-column: 1 / -1; } .field label { font-size: 13px; font-weight: 600; color: var(--text-2); } .field input, .field select, .field textarea { font-family: inherit; font-size: 15px; color: var(--text); background: rgba(5,7,15,0.6); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 15px; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-soft); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18); } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237e89ab' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; } .field input.invalid, .field textarea.invalid { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,0.14); } .form__note { margin-top: 12px; font-size: 13px; color: var(--muted); } .form__note.success { color: var(--cyan); } .form__note.error { color: #ff8a8a; } /* ========================================================= Footer ========================================================= */ .footer { border-top: 1px solid var(--line); padding-top: 64px; margin-top: 40px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; padding-bottom: 44px; } .footer__logo { height: 38px; width: auto; margin-bottom: 20px; } .footer__brand p { color: var(--text-2); font-size: 14px; max-width: 320px; } .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .footer__col h4 { font-family: "Sora", sans-serif; font-size: 14px; letter-spacing: 0.04em; margin-bottom: 16px; color: var(--text); } .footer__col a { display: block; color: var(--text-2); font-size: 14px; padding: 5px 0; transition: color 0.2s; } .footer__col a:hover { color: var(--cyan); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); flex-wrap: wrap; } .footer__made { letter-spacing: 0.08em; } /* ========================================================= Reveal animation ========================================================= */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ========================================================= Keyframes ========================================================= */ @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1024px) { .cards { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .deliverables { grid-template-columns: repeat(2, 1fr); } .why__grid { grid-template-columns: 1fr; gap: 32px; } .why__copy { position: static; } } @media (max-width: 860px) { .nav__toggle { display: flex; } .nav__menu { position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw); flex-direction: column; align-items: flex-start; gap: 4px; background: rgba(8,11,24,0.97); backdrop-filter: blur(18px); border-left: 1px solid var(--line-2); padding: 92px 28px 32px; transform: translateX(100%); transition: transform 0.35s var(--ease); z-index: 40; } .nav__menu.open { transform: none; } .nav__menu > li { width: 100%; } .nav__menu > li > a { display: block; padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--line); } .nav__cta { margin-top: 16px; } .nav__cta a { display: inline-flex; } .hero__grid { grid-template-columns: 1fr; } .hero__art { order: -1; min-height: 240px; } .hero__ring--2 { display: none; } .pillars { grid-template-columns: 1fr; } .about__grid { grid-template-columns: 1fr; gap: 32px; } .about__art { min-height: 220px; } .contact { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; } } @media (max-width: 620px) { .section { padding: 68px 0; } .stats { grid-template-columns: repeat(2, 1fr); } .cards { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .deliverables { grid-template-columns: 1fr; } .contact__form { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 32px; } .footer__cols { grid-template-columns: 1fr 1fr; } .hero__badges { gap: 8px 16px; } } @media (max-width: 420px) { .hero__title { font-size: clamp(2.15rem, 10vw, 2.6rem); } .contact { padding: 26px 18px; } .pillar { padding: 30px 24px; } .footer__bottom { justify-content: center; text-align: center; } } /* ========================================================= INTERACTIVITY & ANIMATION LAYER ========================================================= */ /* ---- Scroll progress bar ---- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; transform-origin: left; background: linear-gradient(90deg, var(--blue), var(--cyan) 70%, #bfe4ff); box-shadow: 0 0 12px rgba(var(--cyan-rgb),0.7); transition: width 0.08s linear; } /* ---- Hero particle canvas ---- */ .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.9; } .hero > .container, .hero .stats { position: relative; z-index: 1; } /* ---- Shimmer sweep on gradient text ---- */ .grad-text { background-size: 200% auto; animation: shimmer 6s linear infinite; } @keyframes shimmer { to { background-position: 200% center; } } /* ---- Rotating word ---- */ .rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.2em; } .rotator__word { display: inline-block; color: var(--cyan); font-weight: 700; animation: rotWord 0.5s var(--ease); } @keyframes rotWord { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } } /* ---- Interactive cursor glow on cards ---- */ .card, .pillar, .deliver, .step, .why__item { --mx: 50%; --my: 50%; position: relative; } .card::after, .pillar::after, .deliver::after, .step::after, .why__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(340px circle at var(--mx) var(--my), rgba(var(--cyan-rgb),0.14), transparent 60%); opacity: 0; transition: opacity 0.3s; z-index: 0; } .card:hover::after, .pillar:hover::after, .deliver:hover::after, .step:hover::after, .why__item:hover::after { opacity: 1; } .card > *, .pillar > *, .deliver > *, .step > *, .why__item > * { position: relative; z-index: 1; } /* ---- Magnetic buttons ---- */ [data-magnetic] { will-change: transform; transition: transform 0.25s var(--ease); } /* ========================================================= Marquee strip ========================================================= */ .tests-label { text-align: center; margin: 60px 0 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-soft); } .marquee { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(var(--accent-rgb),0.05), rgba(var(--cyan-rgb),0.03)); padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: inline-flex; align-items: center; white-space: nowrap; animation: marquee 36s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track span { font-family: "Sora", sans-serif; font-weight: 600; font-size: clamp(1rem, 2vw, 1.32rem); color: var(--text-2); margin-right: 28px; line-height: 1; } /* CSS diamond separator — perfectly centred, no baseline drift */ .marquee__track i { flex: none; width: 7px; height: 7px; margin-right: 28px; transform: rotate(45deg); background: var(--blue-soft); border-radius: 1px; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55); } @keyframes marquee { to { transform: translateX(-50%); } } /* ========================================================= Mindset quote band ========================================================= */ .quoteband { position: relative; overflow: hidden; padding: 104px 0; margin: 20px 0; isolation: isolate; } .quoteband__glow { position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(760px, 90%); height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 68%); filter: blur(30px); } .quoteband__inner { max-width: 860px; margin: 0 auto; text-align: center; } .quoteband__quote { font-family: "Sora", sans-serif; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(2rem, 5.4vw, 3.7rem); line-height: 1.08; color: #fff; margin-top: 14px; text-shadow: 0 2px 40px rgba(0,0,0,0.5); } .quoteband__sub { color: var(--text-2); font-size: clamp(1rem, 1.7vw, 1.18rem); max-width: 620px; margin: 24px auto 34px; } @media (max-width: 620px) { .quoteband { padding: 76px 0; } } /* ========================================================= ALTERNATE COLOR THEMES (set html[data-theme="..."]) Logo/wordmark are white → work on every palette. ========================================================= */ /* ---- CRIMSON FORGE — offensive / red-team red → ember ---- */ html[data-theme="crimson"] { --bg: #0a0506; --bg-2: #140708; --surface: #170a0c; --surface-2: #200d10; --line: rgba(255, 120, 110, 0.12); --line-2: rgba(255, 120, 110, 0.24); --blue: #ff2e46; --blue-2: #ff5a35; --blue-soft: #ff7a63; --cyan: #ffab54; --text: #fdeceb; --text-2: #d8b3b0; --muted: #a6837f; --glow-1: #ff2e46; --glow-2: #7a1a14; --grid-rgb: 220, 110, 100; --accent-rgb: 255, 46, 70; --cyan-rgb: 255, 171, 84; --grad-3: #ffd9b0; --bb-filter: hue-rotate(150deg) saturate(1.25) brightness(1.02); --glow: 0 0 40px rgba(255, 60, 60, 0.45); } /* ---- VIOLET NEBULA — cyberpunk violet → magenta ---- */ html[data-theme="violet"] { --bg: #08050f; --bg-2: #0d0820; --surface: #110a26; --surface-2: #180e34; --line: rgba(180, 130, 255, 0.14); --line-2: rgba(180, 130, 255, 0.26); --blue: #7c3aed; --blue-2: #9d4bff; --blue-soft: #c08bff; --cyan: #ff5cc8; --text: #f2ecff; --text-2: #c3b5e6; --muted: #8b7fae; --glow-1: #8b3dff; --glow-2: #c026a6; --grid-rgb: 150, 110, 240; --accent-rgb: 124, 58, 237; --cyan-rgb: 255, 92, 200; --grad-3: #ffc2ec; --bb-filter: hue-rotate(70deg) saturate(1.2); --glow: 0 0 40px rgba(157, 75, 255, 0.5); } /* ---- EMERALD SIGNAL — premium hacker green → mint ---- */ html[data-theme="emerald"] { --bg: #04100c; --bg-2: #061a13; --surface: #072019; --surface-2: #0a2a20; --line: rgba(70, 230, 170, 0.13); --line-2: rgba(70, 230, 170, 0.26); --blue: #00c774; --blue-2: #12e08a; --blue-soft: #4df0a8; --cyan: #8affd0; --text: #e8fff4; --text-2: #a7d8c4; --muted: #6f9c8a; --glow-1: #06d67e; --glow-2: #0a7f56; --grid-rgb: 70, 210, 150; --accent-rgb: 0, 199, 116; --cyan-rgb: 138, 255, 208; --grad-3: #cfffe9; --bb-filter: hue-rotate(-95deg) saturate(1.15); --glow: 0 0 40px rgba(18, 224, 138, 0.45); } /* ---- SOLAR AMBER — luxe gold on espresso ---- */ html[data-theme="gold"] { --bg: #0c0a05; --bg-2: #16110a; --surface: #1b150c; --surface-2: #241c10; --line: rgba(255, 200, 110, 0.13); --line-2: rgba(255, 200, 110, 0.26); --blue: #f5a524; --blue-2: #ffbe4d; --blue-soft: #ffcf72; --cyan: #ffe39a; --text: #fff6e6; --text-2: #dcc7a2; --muted: #a08d6c; --glow-1: #f5a524; --glow-2: #8a5a12; --grid-rgb: 230, 180, 90; --accent-rgb: 245, 165, 36; --cyan-rgb: 255, 227, 154; --grad-3: #fff2cf; --bb-filter: hue-rotate(175deg) saturate(1.4) brightness(1.05); --glow: 0 0 40px rgba(245, 165, 36, 0.4); } /* Gold theme: primary buttons need dark text for contrast on bright gold */ html[data-theme="gold"] .btn--primary, html[data-theme="gold"] .nav__cta a { color: #1a1206 !important; } html[data-theme="gold"] .btn--primary svg { color: #1a1206; } /* ========================================================= Brand credibility wall ========================================================= */ .brands { padding-bottom: 88px; } .brandwall { display: grid; gap: 18px; margin: 10px 0 36px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .brandwall__row { display: flex; overflow: hidden; } /* seamless loop: track holds the list twice, slides exactly -50% */ .brandwall__track { display: flex; width: max-content; flex: none; animation: brandscroll 46s linear infinite; will-change: transform; } .brandwall__row--rev .brandwall__track { animation-direction: reverse; } .brandwall:hover .brandwall__track { animation-play-state: paused; } @keyframes brandscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .brandchip { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 66px; /* uniform height keeps both rows perfectly aligned */ margin-right: 18px; /* margin (not gap) keeps the -50% loop perfectly seamless */ font-family: "Sora", sans-serif; font-weight: 600; font-size: clamp(1.12rem, 1.9vw, 1.5rem); letter-spacing: -0.01em; color: var(--text-2); white-space: nowrap; line-height: 1; padding: 0 32px; border-radius: 15px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s; } .brandchip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--cyan); box-shadow: 0 0 10px 1px rgba(var(--cyan-rgb), 0.9), 0 0 20px 3px rgba(var(--accent-rgb), 0.5); animation: brandDot 2.6s ease-in-out infinite; } .brandchip:hover { color: var(--text); border-color: transparent; transform: translateY(-4px); box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), 0.6), 0 0 0 1px rgba(var(--accent-rgb), 0.4) inset; } @keyframes brandDot { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } .brands__more { text-align: center; color: var(--text-2); font-size: 1.05rem; } .brands__more strong { color: var(--text); } @media (prefers-reduced-motion: reduce) { .brandwall__track { animation: none !important; } .brandchip::before { animation: none !important; } .brandwall__row { overflow-x: auto; } } @media (max-width: 620px) { .brandchip { font-size: 1.15rem; padding: 14px 24px; margin-right: 14px; } .brandwall__track { animation-duration: 32s; } } /* honeypot spam trap — hidden from real users */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }