/* ========================================================================== */ /* Root variables and base */ /* ========================================================================== */ :root { /* Colors */ --page-bg: #0b1022; /* Solid page background: no global gradients */ --surface: #0f172a; --surface2: rgba(15,23,42,.92); --text: #e7eaf3; --muted: #a6b0c2; --line: rgba(148,163,184,.22); --primary: #A78BFA; --accent: #22D3EE; /* Layout and motion */ --radius: 16px; --fast: .2s cubic-bezier(.2,.65,.35,1); /* measured by JS */ --nav-h: 64px; --hero-p: 0; /* hero choreography */ --cloud-bottom: 16vh; --cloud-upshift: 200px; --slogan-offset: 100px; --tablet-lift: 200px; --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Base and helpers -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: var(--page-bg); /* Fixed: no page-wide radial gradients */ color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .tiny { font-size: .85rem; } .skip { position: absolute; left: -9999px; top: auto; } .skip:focus { left: 12px; top: 12px; z-index: 1000; background: #111; color: #fff; padding: 8px 12px; border-radius: 10px; } /* Section band helper (top‑anchored, per‑section gradient) Apply to a section with: position:relative (already true for many). Never used on /; prevents random gradient seams. */ .section-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(38,54,96,.55) 0%, rgba(11,16,34,0) 70%); } /* Container (nav + footer) -------------------------------------------------------------------------- */ .nav-inner, .f-wrap { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* ========================================================================== */ /* Header and footer */ /* ========================================================================== */ .site-nav { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); background: rgba(10,14,28,.55); backdrop-filter: saturate(140%) blur(10px); } .brand { display: flex; align-items: center; gap: 10px; } .brand .logo { width: 34px; height: 34px; border-radius: 10px; background: url(../Images/CompanyLogo.svg) center/cover no-repeat; } .brand .name { font-weight: 900; letter-spacing: .2px; } .brand .tag { color: var(--muted); display: block; } .nav-links { display: flex; gap: 10px; align-items: center; } .link { padding: 8px 10px; border-radius: 10px; } .link:hover { background: rgba(255,255,255,.06); } .nav-actions { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; transition: transform var(--fast), filter var(--fast), background var(--fast); } .btn.primary { color: #fff; border: 0; background: linear-gradient(135deg,#7C3AED 0%, #A78BFA 40%, #22D3EE 100%); box-shadow: 0 14px 30px rgba(99,102,241,.35); } .btn.primary:hover { transform: translateY(-1px); filter: saturate(1.08); } .btn.ghost { background: transparent; } .btn.outline { color: #e9eefc; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); } .btn.sm { padding: 8px 14px; } .nav-burger { display: none; margin-left: 8px; background: none; border: 0; padding: 8px; } .nav-burger span { display: block; width: 22px; height: 2px; background: #dbe3f1; margin: 4px 0; border-radius: 2px; } /* Header responsive */ @media (max-width:960px) { .nav-links, .nav-actions { display: none; } .nav-burger { display: block; } } /* Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(148,163,184,.10), transparent); padding: 18px 0 24px; } .f-wrap { align-items: center; } .f-brand { display: flex; align-items: center; gap: 10px; } .f-brand .logo { width: 26px; height: 26px; border-radius: 8px; background: url(../Images/CompanyLogo.svg) center/cover no-repeat; } .f-links { display: flex; gap: 12px; flex-wrap: wrap; } .copy { text-align: center; color: var(--muted); margin-top: 8px; } /* Reduce motion (header/footer only) */ @media (prefers-reduced-motion: reduce) { .btn, .link { transition: none; } } /* ========================================================================== */ /* Mobile menu (header sheet) */ /* ========================================================================== */ .mm { position: fixed; inset: 0; z-index: 90; } .mm[aria-hidden="true"] { pointer-events: none; } .mm-backdrop { position: absolute; inset: 0; background: rgba(6,10,20,0); opacity: 0; transition: opacity var(--fast); } .mm-sheet { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,22,40,.98), rgba(16,22,40,.96)); backdrop-filter: saturate(140%) blur(10px); transform: translateY(-8%); opacity: 0; transition: transform var(--fast), opacity var(--fast); } .mm .mm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 16px 10px 16px; } .mm .brand.mini { display: flex; align-items: center; gap: 10px; } .mm .brand.mini .logo { width: 28px; height: 28px; border-radius: 8px; background: url(../Images/CompanyLogo.svg) center/cover no-repeat; } .mm-close { background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 6px 10px; } .mm-links { display: grid; padding: 8px 12px; } .mm-link { padding: 12px 10px; border-radius: 12px; border: 1px solid transparent; } .mm-link:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.06); } .mm-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 8px 12px 14px; } html.menu-open .mm-backdrop { opacity: 1; background: rgba(6,10,20,.6); } html.menu-open .mm-sheet { transform: translateY(0); opacity: 1; } .mm.show { pointer-events: auto; } /* ========================================================================== */ /* Hero section */ /* ========================================================================== */ .hero { min-height: 78vh; position: relative; z-index: 1; } /* Top‑anchored gradient band – prevents random seam */ .hero.section-band::before { background: linear-gradient(180deg, rgba(52,72,128,.55) 0%, rgba(11,16,34,0) 70%); } /* Slogan block (desktop fixed) */ .slogan-wrap { position: fixed; left: 50%; top: calc(var(--nav-h) + 3vh + var(--slogan-offset)); transform-style: preserve-3d; transform: translateX(-50%) translateZ(0) scale(calc(1 - (0.18 * var(--hero-p)))) rotateX(calc(5deg * var(--hero-p))); z-index: 6; text-align: center; max-width: 980px; padding: 0 16px; transition: opacity .18s ease-out, transform .18s ease-out; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent); border: 1px solid var(--line); margin-bottom: 14px; } .headline { margin: 8px 0; font-size: clamp(1.9rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: .3px; } .subhead { font-size: clamp(1.02rem, 3.6vw, 1.1rem); max-width: 760px; margin: 0 auto; font-weight: 600; letter-spacing: .4px; text-align: center; background: linear-gradient(90deg,#f9e3b3,#fddbb5,#f6b0ff,#b499ff,#f9e3b3); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: elegantGlow 8s ease-in-out infinite; text-shadow: 0 0 12px rgba(255,233,200,.25); } @keyframes elegantGlow { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } .cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; } /* Glow behind titles */ .slogan-glow { position: fixed; left: 50%; transform: translateX(-50%) scale(calc(1 + (0.25 * (1 - var(--hero-p))))); top: calc(var(--nav-h) + 3vh + var(--slogan-offset) + 160px); width: min(1200px,92vw); height: 420px; z-index: 2; pointer-events: none; background: radial-gradient(520px 220px at 50% 38%, rgba(255,120,245,.55), transparent 66%), radial-gradient(520px 220px at 52% 70%, rgba(34,211,238,.48), transparent 66%), radial-gradient(420px 180px at 30% 60%, rgba(255,213,128,.35), transparent 70%), radial-gradient(900px 380px at 50% 100%, rgba(99,102,241,.25), transparent 70%); filter: blur(22px) saturate(140%); opacity: .95; } .slogan-glow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 170px at 50% 34%, rgba(255,255,255,.12), transparent 70%); mix-blend-mode: screen; opacity: .8; } /* Character & clouds */ .mascot { position: fixed; left: 50%; top: calc(var(--nav-h) + 3vh + var(--slogan-offset) + 80px); width: clamp(560px, 42vw, 720px); height: auto; z-index: 2; pointer-events: none; transform: translate(-50%,42%) rotate(-10deg) scale(1); filter: drop-shadow(0 30px 60px rgba(0,0,0,.25)); transition: opacity .18s ease-out, transform .18s ease-out; } .cloud { position: fixed; bottom: calc(var(--cloud-bottom) + var(--cloud-upshift)); opacity: .97; pointer-events: none; filter: drop-shadow(0 14px 40px rgba(0,0,0,.25)); transition: opacity .18s ease-out, transform .18s ease-out; z-index: 1; } .cloud-left { width: clamp(440px,36vw,620px); left: calc(50% - 580px - clamp(440px,36vw,620px)); } .cloud-right { width: clamp(440px,36vw,620px); left: calc(50% + 580px); } /* Hero responsive */ @media (max-width:720px) { :root { --cloud-bottom: 10vh; --cloud-upshift: 0px; --slogan-offset: 32px; --tablet-lift: 0px; } .cloud, .mascot { display: none !important; } .hero { min-height: auto; padding-top: calc(var(--nav-h) + 20px); } .slogan-wrap { position: relative; top: auto; left: 50%; transform: translateX(-50%); max-width: min(96vw,760px); padding: 0 14px; z-index: 1; } .headline { font-size: clamp(2.05rem, 8.6vw, 2.9rem); line-height: 1.12; margin-top: 14px; } .subhead { font-size: clamp(1.02rem,3.6vw,1.12rem); margin-top: 6px; } .cta-row { flex-direction: column; gap: 12px; margin-top: 26px; width: 100%; align-items: center; } .cta-row .btn { width: min(92vw,360px); justify-content: center; margin: 0 auto; } .slogan-glow { position: absolute; top: 210px; left: 50%; transform: translateX(-50%); width: 92vw; height: 300px; filter: blur(24px) saturate(150%); z-index: 0; } } /* ========================================================================== */ /* Tablet showcase */ /* ========================================================================== */ .tablet-stage { padding-top: 100px; margin-top: calc(var(--tablet-lift) * -1); position: relative; z-index: 8; } .tablet-stage.section-band::before { background: linear-gradient(180deg, rgba(38,54,96,.45) 0%, rgba(11,16,34,0) 75%); } .tablet { max-width: 1100px; margin: 0 auto; padding: 0 16px; position: relative; transition: transform .2s ease; z-index: 8; } .tablet-frame { border-radius: 26px; border: 1px solid rgba(148,163,184,.35); background: linear-gradient(180deg, rgba(255,255,255,.06), transparent), rgba(15,23,42,.6); box-shadow: 0 22px 70px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 120px 30px rgba(99,102,241,.20); padding: 14px; overflow: hidden; } .tablet-video { display: block; width: 100%; height: 62vh; max-height: 740px; min-height: 360px; border: 0; border-radius: 20px; background: #0a0f21; object-fit: cover; } /* Tablet responsive */ @media (max-width:720px) { .tablet-stage { padding-top: 42px; margin-top: 0; } .tablet { padding: 0 12px; } .tablet-frame { padding: 12px; } .tablet-video { height: 50vh; min-height: 300px; max-height: 520px; } } /* ========================================================================== */ /* GitHub-style segmented tabs */ /* ========================================================================== */ .gh-tabs { position: relative; max-width: 1200px; margin: 38px auto 0; padding: 0 16px; z-index: 2; } .gh-tabs.section-band::before { background: linear-gradient(180deg, rgba(38,54,96,.38) 0%, rgba(11,16,34,0) 80%); } .gh-wrap { display: grid; gap: 14px; justify-items: center; } .gh-rail { display: inline-flex; gap: 0; align-items: center; border: 1px solid rgba(148,163,184,.26); border-radius: 999px; padding: 6px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(13,19,38,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.25); } .gh-tab { appearance: none; background: transparent; border: 0; color: #cfd7e8; font-weight: 800; letter-spacing: .02em; padding: 10px 18px; border-radius: 999px; cursor: pointer; position: relative; transition: color .15s ease, transform .15s ease; outline: none; } .gh-tab:hover { color: #ffffff; } .gh-tab.is-active { color: #0d1222; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 10px 24px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.22); } .gh-panels { width: min(980px,100%); perspective: 1000px; transform-style: preserve-3d; } .gh-panel { display: block; } .gh-panel[hidden] { display: none; } .gh-card { border-radius: 16px; border: 1px solid rgba(148,163,184,.25); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), rgba(13,19,38,.55); box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); padding: 18px; text-align: center; } .gh-card h3 { margin: 6px 0 8px; font-size: clamp(1.1rem, 3.2vw, 1.35rem); font-weight: 900; } .gh-card p { margin: 0; color: var(--muted); } .gh-panel.is-show .gh-card { animation: ghIn .55s cubic-bezier(.2,.65,.35,1) both; transform-origin: 50% 20%; } @keyframes ghIn { 0% { opacity: 0; transform: translateY(16px) rotateX(-14deg) scale(.985) } 55% { opacity: 1; transform: translateY(0) rotateX(2deg) scale(1.004) } 100% { opacity: 1; transform: none } } /* Tabs responsive */ @media (max-width:720px) { .gh-tabs { padding: 0 12px; } .gh-rail { display: flex; overflow: auto; white-space: nowrap; max-width: 100%; padding: 6px; scrollbar-width: none; } .gh-rail::-webkit-scrollbar { display: none; } .gh-tab { padding: 10px 14px; } .gh-panels { width: 100%; } } @media (prefers-reduced-motion:reduce) { .gh-panel.is-show .gh-card { animation: none; } } /* ========================================================================== */ /* Brand Marquee */ /* ========================================================================== */ .brand-marquee { position: relative; z-index: 2; width: 100%; margin: 60px 0 0; --logo-h: 200px; } .brand-marquee .bm { position: relative; overflow: hidden; height: calc(var(--logo-h) + 88px); border-top: 1px solid rgba(148,163,184,.16); border-bottom: 1px solid rgba(148,163,184,.14); background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 70%), radial-gradient(160% 120% at 50% 100%, rgba(120,130,200,.06), transparent 70%); backdrop-filter: saturate(140%) blur(2px); } /* Anchor a band at top of marquee section as well */ .brand-marquee.section-band::before { background: linear-gradient(180deg, rgba(38,54,96,.25) 0%, rgba(11,16,34,0) 65%); } .brand-marquee .bm::before, .brand-marquee .bm::after { content: ""; position: absolute; top: 0; bottom: 0; width: 11%; pointer-events: none; z-index: 3; background: linear-gradient(to right, rgba(11,16,34,1), rgba(11,16,34,0)); } .brand-marquee .bm::after { right: 0; left: auto; transform: scaleX(-1); } .bm-lane { position: absolute; left: 0; top: 0; height: 100%; display: flex; will-change: transform; } .bm-strip { display: inline-flex; align-items: center; gap: clamp(84px, 9vw, 160px); padding: 34px clamp(48px,7vw,90px); } .bm-item { flex: 0 0 auto; height: var(--logo-h); width: auto; display: flex; align-items: center; justify-content: center; min-width: 300px; max-width: 520px; position: relative; } .bm-item img { height: 100%; width: auto; object-fit: contain; filter: grayscale(.88) contrast(.9) brightness(.88); opacity: .82; transition: filter .4s ease, opacity .4s ease, transform .45s cubic-bezier(.2,.65,.35,1), box-shadow .45s; will-change: transform,filter,opacity; } .bm-item img:hover, .bm-item:focus-within img { filter: none; opacity: 1; transform: translateZ(0) scale(1.06); box-shadow: 0 10px 40px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.18); } .bm-item a, .bm-item button { background: none; border: 0; padding: 0; margin: 0; } .bm-item:focus-within { outline: none; } .bm-toggle { position: absolute; right: 16px; top: 16px; z-index: 4; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 10px 14px; background: rgba(255,255,255,.10); color: #f2f5ff; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .9rem; cursor: pointer; backdrop-filter: saturate(140%) blur(6px); transition: background .25s ease, transform .25s ease, box-shadow .25s; } .bm-toggle:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); } .bm-toggle.is-paused { background: rgba(255,255,255,.22); } .bm-toggle:focus { outline: 2px solid var(--accent); outline-offset: 4px; } /* Marquee responsive */ @media (max-width:720px) { .brand-marquee { margin: 48px 0 0; --logo-h: 140px; } .brand-marquee .bm { height: calc(var(--logo-h) + 70px); } .bm-strip { gap: clamp(56px, 12vw, 120px); padding: 28px clamp(32px,6vw,72px); } .bm-item { min-width: 220px; max-width: 420px; } .bm-toggle { top: 12px; right: 12px; padding: 9px 12px; } } /* ========================================================================== */ /* Accelerate Workflow */ /* ========================================================================== */ .accel { --accel-video-ar: 55/36; --accel-video-max: 1200px; --accel-glass-pad: 110px; max-width: 1200px; margin: 68px auto 0; padding: 0 16px; position: relative; z-index: 2; } .accel.section-band::before { background: linear-gradient(180deg, rgba(38,54,96,.30) 0%, rgba(11,16,34,0) 65%); } .accel-head { text-align: center; display: grid; gap: 14px; justify-items: center; } .accel-icon { width: 72px; height: 72px; object-fit: contain; border-radius: 18px; filter: drop-shadow(0 10px 28px rgba(0,0,0,.35)); animation: accelFloat 6s ease-in-out infinite; } @keyframes accelFloat { 0% { transform: translateY(0) } 50% { transform: translateY(-8px) } 100% { transform: translateY(0) } } .accel-title { margin: 0; font-size: clamp(1.9rem,4.5vw,2.9rem); font-weight: 900; letter-spacing: .5px; background: linear-gradient(90deg,#ffffff,#e9ecf3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .accel-sub { margin: 0; max-width: 840px; font-size: clamp(1rem,2.2vw,1.16rem); font-weight: 500; line-height: 1.4; color: var(--muted); } .accel-gap { height: 100px; } .accel-stage { position: relative; border: 1px solid rgba(148,163,184,.28); border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); backdrop-filter: saturate(120%) blur(4px); padding: 40px 38px; overflow: hidden; box-shadow: 0 26px 70px -10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06); } .accel-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .accel-ambient::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1600px, 120%); height: 520px; background: radial-gradient(600px 240px at 50% 35%, rgba(170,150,255,.55), transparent 70%), radial-gradient(700px 260px at 50% 65%, rgba(34,211,238,.38), transparent 72%), radial-gradient(520px 220px at 38% 58%, rgba(255,213,128,.38), transparent 74%); filter: blur(24px) saturate(140%); opacity: .95; mix-blend-mode: screen; } .accel-glow { position: absolute; width: 1100px; height: 680px; top: 56%; left: 50%; transform: translate(-50%,-50%); filter: blur(56px); opacity: .60; mix-blend-mode: screen; animation: glowDrift 20s linear infinite; } .accel-glow.glow-a { background: radial-gradient(circle at 52% 48%, rgba(167,139,250,.65) 0%, transparent 70%), radial-gradient(circle at 62% 60%, rgba(34,211,238,.42) 0%, transparent 72%); } .accel-glow.glow-b { background: radial-gradient(circle at 40% 50%, rgba(255,213,128,.52) 0%, transparent 74%), radial-gradient(circle at 50% 50%, rgba(99,102,241,.30) 0%, transparent 78%); animation-direction: reverse; } @keyframes glowDrift { 0% { transform: translate(-50%,-50%) rotate(0) } 50% { transform: translate(-52%,-48%) rotate(180deg) } 100% { transform: translate(-50%,-50%) rotate(360deg) } } .accel-glass { position: relative; margin: 0 auto; max-width: var(--accel-video-max); width: 100%; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08)); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 0 0 1px rgba(255,255,255,.30) inset, 0 28px 90px -18px rgba(0,0,0,.58), 0 0 160px 48px rgba(156,132,255,.36); padding: clamp(100px, 10vw, 140px); z-index: 1; overflow: hidden; } .accel-video { display: block; width: 100%; height: auto; aspect-ratio: var(--accel-video-ar); object-fit: contain; border: 0; border-radius: 16px; background: transparent; box-shadow: none; } .accel-play { position: absolute; right: 22px; bottom: 22px; z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; backdrop-filter: saturate(150%) blur(4px); font-size: 1.1rem; cursor: pointer; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; } .accel-play:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(0,0,0,.5); } .accel-play:focus { outline: 2px solid var(--accent); outline-offset: 4px; } /* Accelerate responsive */ @media (max-width:900px) { .accel-stage { padding: 34px 26px; } } @media (max-width:720px) { .accel { margin: 54px auto 0; padding: 0 14px; --accel-video-max: 100%; --accel-glass-pad: 28px; } .accel-gap { height: 52px; } .accel-icon { width: 60px; height: 60px; } .accel-title { font-size: clamp(1.8rem,9vw,2.4rem); } .accel-sub { font-size: clamp(.95rem,3.4vw,1.05rem); } .accel-stage { padding: 24px 16px; border-radius: 22px; } .accel-glass { padding: clamp(24px, 6vw, 40px); border-radius: 20px; } .accel-video { border-radius: 14px; } .accel-play { width: 50px; height: 50px; right: 14px; bottom: 14px; } } @media (prefers-reduced-motion:reduce) { .accel-glow { animation: none; } } /* ========================================================================== */ /* Qlynic Highlights grid */ /* ========================================================================== */ .gh-section { --container-max: 1200px; --bleed: 90px; --glass-max: 640px; --divider: rgba(148,163,184,.16); max-width: var(--container-max); margin: 60px auto 0; padding: 0 16px; font-size: 15px; position: relative; z-index: 2; } .gh-section.section-band::before { background: linear-gradient(180deg, rgba(38,54,96,.30) 0%, rgba(11,16,34,0) 70%); } /* Top row */ .gh-top { display: grid; grid-template-columns: 1.45fr 1fr; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); } .gh-top-left { padding: 28px 26px; background: transparent; } .gh-top-right { display: grid; grid-template-rows: 1fr 1fr; border-left: 1px solid var(--divider); background: transparent; } .gh-mini { padding: 24px 22px; background: transparent; } .gh-mini-bottom { border-top: 1px solid var(--divider); } /* Typography / links */ .gh-card, .gh-media-wrapper { position: relative; background: transparent; border: 0; border-radius: 0; } .gh-title { margin: 0 0 10px; font-weight: 900; font-size: clamp(1.2rem, 2.6vw, 1.5rem); letter-spacing: .2px; line-height: 1.2; color: #eaf0ff; } .gh-body { margin: 0 0 14px; max-width: 56ch; color: rgba(198,206,222,.9); line-height: 1.5; } .gh-body.mini { margin-bottom: 12px; font-size: .95rem; } .gh-kicker { margin: 0 0 8px; font-size: 1.15rem; font-weight: 900; letter-spacing: .1px; color: #eaf0ff; } .gh-link { --u-h: 2px; position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #e7edf9; padding-bottom: 2px; transition: color .22s ease, text-shadow .22s ease; text-decoration: none; } .gh-link i { font-size: .85rem; transition: transform .22s ease; } .gh-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: var(--u-h); background: linear-gradient(90deg, #7C3AED, #22D3EE, #7C3AED); background-size: 200% 100%; transform: scaleX(0); transform-origin: left; transition: transform .28s ease, background-position .6s linear; border-radius: var(--u-h); } .gh-link:hover { color: #fff; text-shadow: 0 0 18px rgba(124,58,237,.25); } .gh-link:hover i { transform: translateX(4px); } .gh-link:hover::after { transform: scaleX(1); background-position: 100% 0; } /* Bottom row */ .gh-bottom { display: grid; grid-template-columns: 1.15fr .85fr; border-bottom: 1px solid var(--divider); } .gh-bottom-left { padding: 28px 26px; background: transparent; display: flex; flex-direction: column; border-right: 1px solid var(--divider); } .gh-list { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--divider); } .gh-list li + li { border-top: 1px solid var(--divider); } .gh-rowbtn { width: 100%; background: transparent; border: 0; color: #e7eaf3; font-weight: 700; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: .92rem; letter-spacing: .02em; transition: color .2s ease; } .gh-rowbtn i { font-size: .75rem; color: #bfc7da; transition: transform .2s ease; } .gh-rowbtn:hover { color: #fff; } .gh-rowbtn:hover i { transform: translateX(2px); } /* Media glass */ .gh-media-wrapper { padding: 0; display: flex; align-items: center; justify-content: center; overflow: visible; } .gh-glass { width: 100%; max-width: var(--glass-max); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10)); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 26px 90px -18px rgba(0,0,0,.55), 0 0 140px 42px rgba(156,132,255,.35); padding: clamp(24px, 4vw, 38px); position: relative; overflow: hidden; margin-left: auto; transform: translateX(var(--bleed)); } .gh-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .gh-glow { position: absolute; width: 920px; height: 560px; top: 50%; left: 50%; transform: translate(-50%,-50%); filter: blur(50px); opacity: .65; mix-blend-mode: screen; animation: ghGlowSpin 24s linear infinite; } .gh-glow.glow-a { background: radial-gradient(circle at 50% 50%, rgba(167,139,250,.70) 0%, transparent 70%), radial-gradient(circle at 60% 55%, rgba(34,211,238,.48) 0%, transparent 74%); } .gh-glow.glow-b { background: radial-gradient(circle at 44% 48%, rgba(255,213,128,.55) 0%, transparent 72%), radial-gradient(circle at 50% 50%, rgba(99,102,241,.30) 0%, transparent 78%); animation-direction: reverse; } @keyframes ghGlowSpin { 0% { transform: translate(-50%,-50%) rotate(0) } 50% { transform: translate(-50%,-50%) rotate(180deg) } 100% { transform: translate(-50%,-50%) rotate(360deg) } } .gh-stars { position: absolute; inset: 0; } .gh-star { position: absolute; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff, rgba(255,255,255,.55) 60%, rgba(255,255,255,0) 75%); animation: ghStarFloat var(--dur,8s) ease-in-out infinite; opacity: .8; } @keyframes ghStarFloat { 0% { opacity: .3; transform: translate(0,0) } 50% { opacity: .95; transform: translate(var(--dx), var(--dy)) } 100% { opacity: .4; transform: translate(0,0) } } .gh-media img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 14px 70px rgba(0,0,0,.45); } /* Highlights responsive */ @media (max-width:1320px) { .gh-glass { transform: none; margin-left: 0; max-width: min(100%, var(--glass-max)); } } @media (max-width:1100px) { .gh-top { grid-template-columns: 1fr; } .gh-top-right { border-left: 0; border-top: 1px solid var(--divider); } } @media (max-width:1000px) { .gh-bottom { grid-template-columns: 1fr; } .gh-bottom-left { border-right: 0; border-bottom: 1px solid var(--divider); } .gh-glass { transform: none; margin-left: 0; max-width: 100%; } } @media (max-width:720px) { .gh-section { padding: 0 12px; margin: 50px auto 0; } .gh-top-left, .gh-mini, .gh-bottom-left { padding: 22px 18px; } .gh-glass { border-radius: 20px; padding: 18px; } .gh-media img { border-radius: 14px; } } @media (prefers-reduced-motion:reduce) { .gh-glow, .gh-star { animation: none; } } /* ========================================================================== */ /* Pricing + purchase modal */ /* ========================================================================== */ .pricing.pro { position: relative; z-index: 2; max-width: 1200px; margin: 48px auto 10px; padding: 0 16px; isolation: isolate; overflow: hidden; } .pricing.pro.section-band::before { background: linear-gradient(180deg, rgba(38,54,96,.25) 0%, rgba(11,16,34,0) 65%); } .pricing.pro .pr-wrap { display: grid; gap: 18px; justify-items: center; } .pricing.pro .pr-head h2 { margin: 6px 0 4px; font-size: clamp(1.6rem,3.2vw,2.2rem); font-weight: 900; text-align: center; } .pricing.pro .pr-head p { margin: 0; color: var(--muted); text-align: center; max-width: 860px; } .pricing.pro .pr-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .pricing.pro .pr-lines { position: absolute; inset: -2px; background: repeating-linear-gradient(to right, rgba(148,163,184,.08) 0 1px, transparent 1px 32px), repeating-linear-gradient(to bottom, rgba(148,163,184,.06) 0 1px, transparent 1px 28px); filter: saturate(110%); opacity: .5; will-change: transform; animation: prGridDrift 60s linear infinite; } @keyframes prGridDrift { 0% { transform: translate3d(0,0,0) } 100% { transform: translate3d(-32px,-28px,0) } } .pricing.pro .pr-dots { position: absolute; inset: -10%; background-repeat: repeat; mix-blend-mode: screen; opacity: .15; will-change: transform; } .pricing.pro .pr-dots-a { background-image: radial-gradient(circle 1px, rgba(167,139,250,.55) 99%, transparent 100%); background-size: 120px 120px; animation: prDotsA 90s linear infinite; } .pricing.pro .pr-dots-b { background-image: radial-gradient(circle 1px, rgba(34,211,238,.45) 99%, transparent 100%); background-size: 160px 160px; animation: prDotsB 120s linear infinite; } @keyframes prDotsA { 0% { transform: translate3d(0,0,0) } 100% { transform: translate3d(-60px,-30px,0) } } @keyframes prDotsB { 0% { transform: translate3d(0,0,0) } 100% { transform: translate3d(50px,-40px,0) } } .pricing.pro .pr-card { position: relative; z-index: 1; width: min(1080px,100%); display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: stretch; border-radius: 22px; border: 1px solid rgba(148,163,184,.22); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: 0 26px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04); padding: 18px; transition: transform .25s ease; } .pricing.pro .pr-card:hover { transform: translateY(-2px); } @media (max-width:900px) { .pricing.pro .pr-card { grid-template-columns: 1fr; } } .pricing.pro .pr-col { display: flex; flex-direction: column; justify-content: center; } .pricing.pro .pr-col--left { padding: 12px 10px 10px 10px; } .pricing.pro .pr-col--right { padding: 10px; } .pricing.pro .pr-price { display: flex; align-items: flex-end; gap: 10px; justify-content: center; margin-bottom: 8px; } .pricing.pro .pr-price .currency { font-weight: 800; letter-spacing: .08em; color: #cdd6e5; } .pricing.pro .pr-price .amount { font-size: clamp(2.2rem,5.5vw,3.4rem); font-weight: 900; line-height: 1; background: linear-gradient(90deg,#7C3AED,#A78BFA,#22D3EE); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pricing.pro .pr-price .note { color: #cdd6e5; font-weight: 700; } .pricing.pro .pr-list { list-style: none; margin: 10px 0 12px; padding: 0; columns: 2; column-gap: 16px; } .pricing.pro .pr-list li { break-inside: avoid; color: #d7dff0; margin: 6px 0; display: flex; gap: 8px; align-items: flex-start; } .pricing.pro .pr-list i { color: #34D399; margin-top: 2px; } @media (max-width:900px) { .pricing.pro .pr-list { columns: 1; } } .pricing.pro .pr-cta { display: flex; gap: 10px; justify-content: center; margin-top: 10px; } .pricing.pro .pr-foot { text-align: center; margin-top: 10px; } .pricing.pro .pr-show { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid rgba(148,163,184,.18); box-shadow: 0 18px 60px rgba(0,0,0,.28); min-height: 260px; display: grid; place-items: center; } .pricing.pro .pr-show img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 10px; } /* Purchase modal (existing 3D modal) */ .modal-3d { position: fixed; inset: 0; display: none; place-items: center; background: rgba(6,10,20,.62); backdrop-filter: saturate(145%) blur(10px); z-index: 100; } .modal-3d.show { display: grid; } .modal-3d .modal-backdrop { position: absolute; inset: 0; } .modal-3d .modal-card { position: relative; width: min(92vw,560px); border-radius: 18px; border: 1px solid rgba(148,163,184,.28); background: linear-gradient(180deg, rgba(20,28,54,.96), rgba(12,18,36,.94)); box-shadow: 0 26px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset; padding: 16px; transform-origin: 50% 20%; animation: modalIn3D .42s cubic-bezier(.2,.65,.35,1) both; } .modal-3d.closing .modal-card { animation: modalOut3D .32s cubic-bezier(.2,.65,.35,1) both; } @keyframes modalIn3D { 0% { opacity: 0; transform: translateY(18px) rotateX(-10deg) scale(.96) } 60% { opacity: 1; transform: translateY(-2px) rotateX(2deg) scale(1.005) } 100% { opacity: 1; transform: none } } @keyframes modalOut3D { 0% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(10px) rotateX(-6deg) scale(.98) } } .modal-3d .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .modal-3d .modal-head h4 { margin: 0; font-weight: 900; } .modal-3d .modal-body { display: grid; gap: 10px; } .modal-3d .row { display: grid; gap: 6px; } .modal-3d .control { height: 44px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, rgba(20,28,54,.92), rgba(12,18,36,.92)); color: var(--text); padding: 0 12px; } .modal-3d .buybar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } /* Modal buttons */ .modal-3d .btn.primary { color: #fff; border: 0; background: linear-gradient(135deg,#7C3AED 0%, #A78BFA 40%, #22D3EE 100%); box-shadow: 0 16px 34px rgba(99,102,241,.35), 0 0 0 1px rgba(255,255,255,.14) inset; } .modal-3d .btn.primary:hover { transform: translateY(-1px); filter: saturate(1.08); } .modal-3d .btn.ghost { color: #e9efff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); } .modal-3d .btn.ghost:hover { background: rgba(255,255,255,.08); } /* ========================================================================== */ /* Impact section */ /* ========================================================================== */ .impact { --container-max: 1200px; --divider: rgba(148,163,184,.16); max-width: var(--container-max); margin: 48px auto 0; padding: 0 16px; position: relative; z-index: 2; } .impact.section-band::before { background: linear-gradient(180deg, rgba(38,54,96,.30) 0%, rgba(11,16,34,0) 70%); } .impact-hero { position: relative; isolation: isolate; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); overflow: hidden; } .ih-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .ih-glow { position: absolute; width: 1100px; height: 620px; left: 50%; top: 10%; transform: translate(-50%, 0); filter: blur(46px); mix-blend-mode: screen; opacity: .70; animation: ihGlowPulse 10s ease-in-out infinite alternate; } .ih-glow-a { background: radial-gradient(520px 240px at 50% 40%, rgba(167,139,250,.65), transparent 70%), radial-gradient(560px 220px at 60% 60%, rgba(34,211,238,.40), transparent 72%); } .ih-glow-b { background: radial-gradient(440px 200px at 40% 58%, rgba(255,213,128,.45), transparent 72%), radial-gradient(560px 260px at 50% 50%, rgba(99,102,241,.30), transparent 78%); animation-delay: 1.2s; opacity: .55; } @keyframes ihGlowPulse { 0% { transform: translate(-50%, 0) scale(1); opacity: .62 } 100% { transform: translate(-50%, 0) scale(1.03); opacity: .78 } } .ih-stars { position: absolute; inset: 0; } .ih-star { position: absolute; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff, rgba(255,255,255,.6) 60%, rgba(255,255,255,0) 75%); opacity: .75; animation: ihStar 10s ease-in-out infinite; } @keyframes ihStar { 0% { transform: translate(0,0); opacity: .35 } 50% { transform: translate(var(--dx),var(--dy)); opacity: .9 } 100% { transform: translate(0,0); opacity: .4 } } .ih-frame { position: relative; z-index: 1; border: 1px solid rgba(148,163,184,.28); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); -webkit-backdrop-filter: saturate(140%) blur(6px); backdrop-filter: saturate(140%) blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.38); display: grid; gap: 16px; grid-template-columns: 1.05fr .95fr; align-items: center; padding: 26px 26px; } .ih-left { padding: 8px 8px 8px 4px; } .ih-right { padding: 8px; display: flex; align-items: center; justify-content: center; } .ih-right img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,.28); } .ih-title { margin: 0 0 6px; font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 900; } .ih-sub { margin: 0 0 12px; color: var(--muted); max-width: 54ch; } /* Impact grids */ .impact-grid.triple { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--divider); } .impact-grid.triple .ig-card { position: relative; padding: 22px 20px 16px; background: transparent; border-left: 1px solid var(--divider); overflow: hidden; } .impact-grid.triple .ig-card:first-child { border-left: 0; } .ig-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 900; } .ig-sub { margin: 0 8px 10px; color: var(--muted); } .ig-asset { margin-top: 8px; border-radius: 14px; overflow: hidden; } .ig-asset img { display: block; width: 120%; max-width: none; height: auto; transform: translateX(10%); border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.28); } .impact-grid.duo { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--divider); } .impact-grid.duo .metric { padding: 28px 20px; background: transparent; border-left: 1px solid var(--divider); } .impact-grid.duo .metric:first-child { border-left: 0; } .metric-big { margin: 0 0 6px; font-size: clamp(1.3rem, 3.4vw, 1.8rem); font-weight: 900; } .metric-sub { margin: 0; color: var(--muted); } /* Impact responsive */ @media (max-width:1000px) { .ih-frame { grid-template-columns: 1fr; padding: 22px; } .impact-grid.triple { grid-template-columns: 1fr; } .impact-grid.triple .ig-card { border-left: 0; border-top: 1px solid var(--divider); } .impact-grid.triple .ig-card:first-child { border-top: 0; } .impact-grid.duo { grid-template-columns: 1fr; } .impact-grid.duo .metric { border-left: 0; border-top: 1px solid var(--divider); } .impact-grid.duo .metric:first-child { border-top: 0; } } @media (prefers-reduced-motion: reduce) { .ih-glow { animation: none; } .ih-star { animation: none; } }