/* ============================================================ PARADOX ALGO V7 — POLISH PASS Dual-tone gradients · Glassmorphism · Lucide icons · rem grid ============================================================ */ @font-face{font-family:"Avenir Next";font-weight:200;font-style:normal;font-display:swap; src:url("/assets/fonts/AvenirNext.ttc") format("truetype-collection")} @font-face{font-family:"Avenir Next";font-weight:400;font-style:normal;font-display:swap; src:url("/assets/fonts/AvenirNext.ttc") format("truetype-collection")} @font-face{font-family:"Avenir Next";font-weight:500;font-style:normal;font-display:swap; src:url("/assets/fonts/AvenirNext.ttc") format("truetype-collection")} @font-face{font-family:"Avenir Next";font-weight:600;font-style:normal;font-display:swap; src:url("/assets/fonts/AvenirNext.ttc") format("truetype-collection")} @font-face{font-family:"Avenir Next";font-weight:700;font-style:normal;font-display:swap; src:url("/assets/fonts/AvenirNext.ttc") format("truetype-collection")} @font-face{font-family:"Avenir Next";font-weight:800;font-style:normal;font-display:swap; src:url("/assets/fonts/AvenirNext.ttc") format("truetype-collection")} /* ---------- TOKENS ---------- */ .pa-v7-wrapper{ /* color */ --pa-black:#04060c; --pa-black-2:#080c18; --pa-cyan:#00e2ff; --pa-blue:#003ff5; --pa-text:rgba(255,255,255,.8); --pa-mute:rgba(255,255,255,.55); --pa-faint:rgba(255,255,255,.04); --pa-line:rgba(255,255,255,.06); /* gradients */ --pa-grad:linear-gradient(135deg,#00e2ff 0%,#3a7bff 50%,#003ff5 100%); --pa-grad-soft:linear-gradient(135deg,rgba(0,226,255,.12),rgba(0,63,245,.18)); --pa-grad-fade:linear-gradient(90deg,transparent,rgba(0,226,255,.25) 50%,transparent); --pa-grad-fade-strong:linear-gradient(90deg,transparent,rgba(0,226,255,.4) 50%,transparent); /* radius / scale */ --r-sm:.5rem; --r-md:1rem; --r-lg:1.5rem; --r-xl:2rem; --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4rem; --s-7:6rem; --s-8:8rem; font-family:"Avenir Next","Avenir","Helvetica Neue",system-ui,sans-serif; font-weight:400; color:var(--pa-text); background:var(--pa-black); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; position:relative; overflow-x:hidden; display:block; } *{box-sizing:border-box;margin:0;padding:0} /* Both html and body get the dark background. On iOS Safari the area exposed by overscroll, the dynamic toolbar, and safe-area-insets shows the html element — without this rule, that area defaults to white and produces a visible white strip at the bottom of the viewport. IMPORTANT: we use a literal hex value here, not var(--pa-black), because the custom property is defined inside .pa-v7-wrapper which is a child of body — CSS variables cascade DOWN, so html/body cannot see them. */ html{scroll-behavior:smooth;background:#04060c} body{background:#04060c} a{color:inherit;text-decoration:none} ul{list-style:none} img{display:block;max-width:100%} .pa-v7-wrapper .pa-container{ max-width:78rem;margin:0 auto;padding:0 var(--s-3);position:relative;z-index:2; } .pa-v7-wrapper section{position:relative;overflow:hidden} /* ============================================================ UX POLISH — disable text selection across the entire site so users can't accidentally highlight text or elements while clicking, dragging, or scrolling. Re-enabled on form inputs and code blocks where typing/copying is needed. Kills iOS tap-highlight and locks down image drag-ghosts. ============================================================ */ .pa-v7-wrapper{ -webkit-tap-highlight-color:transparent; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } /* Selection re-enabled for form inputs (typing) and code blocks (copying snippets). Add other selectors here if specific text needs to be selectable. */ .pa-v7-wrapper input, .pa-v7-wrapper textarea, .pa-v7-wrapper select, .pa-v7-wrapper [contenteditable="true"], .pa-v7-wrapper code, .pa-v7-wrapper pre code, .pa-v7-wrapper .pa-allow-select{ -webkit-user-select:auto; -moz-user-select:auto; -ms-user-select:auto; user-select:auto; cursor:text; } .pa-v7-wrapper a, .pa-v7-wrapper button, .pa-v7-wrapper .pa-burger{cursor:pointer} /* Prevent image drag-ghost from appearing on logos / decorative imgs */ .pa-v7-wrapper .pa-marquee img, .pa-v7-wrapper .pa-pay-badges img, .pa-v7-wrapper .pa-brand-img, .pa-v7-wrapper .pa-compat-logo, .pa-v7-wrapper .pa-foot-brand img, .pa-v7-wrapper .pa-logo-img{ -webkit-user-drag:none; user-drag:none; pointer-events:none; } /* Re-enable pointer events on links wrapping logos */ .pa-v7-wrapper a > img{pointer-events:auto} /* Hide native selection rectangles entirely — extra safety on Firefox/Safari */ .pa-v7-wrapper ::selection{background:transparent;color:inherit} .pa-v7-wrapper input::selection, .pa-v7-wrapper textarea::selection, .pa-v7-wrapper code::selection{background:rgba(0,226,255,.25);color:#fff} /* Re-enable pointer-events on links wrapping logos */ .pa-v7-wrapper a > img{pointer-events:auto} /* ---------- INLINE ICONS ---------- */ .pa-ic{ display:inline-block;vertical-align:-.15em; width:1em;height:1em;flex-shrink:0; filter:drop-shadow(0 0 12px rgba(0,226,255,.45)); } /* ---------- NAV ---------- */ .pa-nav{ position:fixed;top:0;left:0;right:0;z-index:100; } .pa-nav::before{ content:"";position:absolute;inset:0;z-index:0; background:rgba(4,6,12,.6); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); } .pa-nav::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2; background:linear-gradient(90deg,transparent,rgba(0,226,255,.28) 50%,transparent); pointer-events:none; } .pa-nav-inner{ position:relative;z-index:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:4.5rem;gap:1rem; } .pa-brand{display:inline-flex;align-items:center;flex-shrink:0;height:100%;line-height:0;justify-self:start} .pa-nav-links{justify-self:center} .pa-nav-cta{justify-self:end} .pa-brand-img{ display:block;height:1.75rem;width:auto; filter:drop-shadow(0 0 18px rgba(0,226,255,.4)); transition:filter .3s,transform .3s; } .pa-brand-img:hover{filter:drop-shadow(0 0 28px rgba(0,226,255,.75));transform:translateY(-1px)} .pa-foot-logo{height:3rem;width:auto;filter:drop-shadow(0 0 18px rgba(0,226,255,.3));margin-bottom:.4rem} .pa-nav-links{display:flex;gap:1.5rem} .pa-nav-links a{font-size:.8125rem;font-weight:500;color:var(--pa-mute);transition:color .25s;white-space:nowrap} .pa-nav-links a:hover{color:#fff} /* Mobile overlay footer hidden on desktop — only renders inside the fullscreen menu via the mobile media query. */ .pa-nav-mobile-foot{display:none} @media (max-width:1180px){.pa-nav-links{gap:1.125rem}.pa-nav-links a{font-size:.75rem}} @media (max-width:960px){.pa-nav-links{gap:.875rem}} /* HAMBURGER */ .pa-burger{ display:none;position:relative;cursor:pointer; width:2.5rem;height:2.5rem;padding:.7rem .65rem;border-radius:.75rem; background:linear-gradient(135deg,rgba(0,226,255,.06),rgba(0,63,245,.08)); border:1px solid rgba(0,226,255,.18); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); flex-direction:column;justify-content:space-between;align-items:stretch; outline:0; transition:background .3s,border-color .3s,box-shadow .3s,transform .3s; } .pa-burger:hover{ background:linear-gradient(135deg,rgba(0,226,255,.1),rgba(0,63,245,.14)); border-color:rgba(0,226,255,.35); box-shadow:0 0 0 4px rgba(0,226,255,.08),0 8px 24px rgba(0,63,245,.3); } .pa-burger:focus-visible{ border-color:var(--pa-cyan); box-shadow:0 0 0 3px rgba(0,226,255,.25),0 0 30px rgba(0,226,255,.3); } .pa-burger:active{transform:scale(.96)} .pa-burger span{ display:block;height:1.5px;width:100%; background:linear-gradient(90deg,#fff,rgba(255,255,255,.85)); border-radius:2px; transform-origin:center; transition:transform .45s cubic-bezier(.25,.9,.25,1),opacity .3s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.25,.9,.25,1); } .pa-burger span:nth-child(2){width:70%;align-self:flex-end} .pa-burger[aria-expanded="true"]{ background:linear-gradient(135deg,rgba(0,226,255,.12),rgba(0,63,245,.18)); border-color:rgba(0,226,255,.4); } .pa-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.4rem) rotate(45deg);background:linear-gradient(90deg,#00e2ff,#fff)} .pa-burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:100%} .pa-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.4rem) rotate(-45deg);background:linear-gradient(90deg,#fff,#00e2ff)} /* ---------- TYPOGRAPHY ---------- */ .pa-eyebrow{ display:inline-flex;align-items:center;gap:.5rem; padding:.5rem 1rem;border-radius:999px; position:relative; border:1px solid transparent; background: linear-gradient(rgba(8,12,24,.6),rgba(8,12,24,.6)) padding-box, linear-gradient(120deg, rgba(0,226,255,.45) 0%, rgba(122,243,255,.30) 25%, rgba(30,136,255,.40) 50%, rgba(0,63,245,.30) 75%, rgba(0,226,255,.45) 100% ) border-box; background-size:auto, 250% 100%; color:var(--pa-cyan); font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow: 0 0 0 1px rgba(0,226,255,.06), 0 0 14px rgba(0,226,255,.16), 0 0 32px rgba(0,63,245,.10); animation:paEyebrowFlow 28s linear infinite; transition:box-shadow .35s ease, transform .35s ease; } .pa-eyebrow:hover{ box-shadow: 0 0 0 1px rgba(0,226,255,.1), 0 0 22px rgba(0,226,255,.22), 0 0 48px rgba(0,63,245,.16); transform:translateY(-1px); } @keyframes paEyebrowFlow{ from{background-position:0 0, 0% 50%} to {background-position:0 0, -250% 50%} } .pa-h1{ font-size:clamp(2.75rem,6.5vw,5.75rem); line-height:.95;letter-spacing:-.035em;font-weight:700; margin:1.25rem 0 .5rem;color:#fff; /* Balance lines so word breaks distribute evenly across the headline, keeping mobile headlines to 2 visual lines wherever possible. */ text-wrap:balance; } .pa-h2{ font-size:clamp(1.75rem,3.5vw,2.75rem); line-height:1.05;letter-spacing:-.02em;font-weight:700; margin:.75rem 0 .5rem;color:#fff; text-wrap:balance; } @media (max-width:560px){ /* Force tighter mobile sizing so two-line headlines fit edge-to-edge without orphans. text-wrap:balance keeps line lengths balanced. */ .pa-h1{font-size:clamp(2.25rem,9vw,3.25rem);line-height:1} .pa-h2{font-size:clamp(1.5rem,6.5vw,2rem);line-height:1.1} } .pa-h1 .cyan,.pa-h2 .cyan{ background:linear-gradient(120deg, #00e2ff 0%,#7af3ff 14%,#1e88ff 32%,#003ff5 50%, #1e88ff 68%,#7af3ff 86%,#00e2ff 100%); background-size:300% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 0 28px rgba(0,226,255,.35)); animation:paTextFlow 28s linear infinite; } /* Social-proof headline: gradient phrase always sits on its own block so the white intro and the gradient kicker read as two distinct pieces at every width. The brand "Paradox Algo" stays glued via   in the markup, and text-wrap:balance distributes long lines evenly without orphan words. */ .pa-social-h2{text-wrap:balance} .pa-social-em{display:block;text-wrap:balance;margin-top:.15em} @media (max-width:600px){ .pa-social-h2{font-size:clamp(1.375rem,6vw,1.875rem);line-height:1.2} .pa-social-em{margin-top:.25em} } @media (max-width:380px){ .pa-social-h2{font-size:clamp(1.25rem,5.6vw,1.625rem)} } @keyframes paTextFlow{ from{background-position:0% 50%} to{background-position:-300% 50%} } .pa-h1 .thin{ display:block;font-weight:200;color:rgba(255,255,255,.88); -webkit-text-fill-color:rgba(255,255,255,.88); font-size:.56em;letter-spacing:-.02em;margin-top:.25em; } .pa-h2 .thin{ display:block;font-weight:200;color:rgba(255,255,255,.88); -webkit-text-fill-color:rgba(255,255,255,.88); font-size:.72em;margin-top:.15em; } .pa-sub{ font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.6;color:var(--pa-text);font-weight:300;max-width:46rem; } /* ---------- CTA ---------- */ .pa-cta{ position:relative;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:.625rem; padding:1.05rem 2.25rem;border-radius:.875rem;border:0;cursor:pointer; font-family:inherit;font-weight:700;font-size:.95rem;letter-spacing:.01em; color:#011018; background: radial-gradient(120% 160% at 20% 20%,#7af3ff 0%,rgba(122,243,255,0) 45%), radial-gradient(140% 180% at 80% 80%,#2f6bff 0%,rgba(47,107,255,0) 50%), linear-gradient(120deg,#00c8f0 0%,#1e88ff 50%,#003ff5 100%); background-size:200% 200%,220% 220%,180% 180%; background-position:0% 0%,100% 100%,0% 50%; animation:paCtaFlow 28s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(0,226,255,.55), 0 14px 40px rgba(0,63,245,.5), 0 0 70px rgba(0,226,255,.28), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -14px 24px rgba(0,63,245,.35); transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s; } .pa-cta::after{ /* sheen sweep — rigid band translated across the button. Rests off-screen before & after the visible sweep so the loop restart is invisible. */ content:"";position:absolute;top:0;bottom:0;left:0;width:55%; background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.18) 55%, transparent 100%); transform:translateX(-180%); animation:paCtaSheen 7s cubic-bezier(.42,.05,.5,.95) infinite; pointer-events:none;will-change:transform; } .pa-cta:hover{ box-shadow: 0 0 0 1px var(--pa-cyan), 0 22px 66px rgba(0,63,245,.6), 0 0 90px rgba(0,226,255,.5), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -14px 28px rgba(0,63,245,.45); } @keyframes paCtaFlow{ 0% {background-position:0% 0%,100% 100%,0% 50%} 25% {background-position:30% 20%,70% 80%,35% 50%} 50% {background-position:60% 40%,40% 60%,70% 50%} 75% {background-position:30% 20%,70% 80%,100% 50%} 100% {background-position:0% 0%,100% 100%,0% 50%} } @keyframes paCtaSheen{ 0%,22% {transform:translateX(-180%)} 72%,100% {transform:translateX(320%)} } .pa-cta-sm{padding:.7rem 1.4rem;font-size:.8rem;border-radius:.625rem} .pa-cta-outline{ background:transparent;color:var(--pa-cyan); border:1px solid rgba(0,226,255,.45); box-shadow:0 0 0 1px transparent,0 0 30px rgba(0,226,255,.1); } .pa-cta-outline:hover{ background:rgba(0,226,255,.06);color:#fff; box-shadow:0 0 0 1px var(--pa-cyan),0 12px 40px rgba(0,226,255,.25); } /* ---------- AMBIENT BG ---------- */ .pa-bg-grid{ position:absolute;inset:0; background-image: linear-gradient(rgba(0,226,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(0,226,255,.05) 1px,transparent 1px); background-size:4rem 4rem; mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%); pointer-events:none; } .pa-bg-orb{position:absolute;border-radius:50%;filter:blur(140px);pointer-events:none;will-change:transform} .pa-bg-orb.cyan{background:radial-gradient(circle,rgba(0,226,255,.55),transparent 70%);width:34rem;height:34rem} .pa-bg-orb.blue{background:radial-gradient(circle,rgba(0,63,245,.6),transparent 70%);width:42rem;height:42rem} .pa-hero .pa-bg-orb.cyan{background:radial-gradient(circle,rgba(0,226,255,.28),transparent 70%)} .pa-hero .pa-bg-orb.blue{background:radial-gradient(circle,rgba(0,63,245,.3),transparent 70%)} @keyframes paFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-30px,0) scale(1.08)}} @keyframes paFloat2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(20px,30px,0) scale(1.1)}} @keyframes paGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes paFadeUp{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes paBreathe{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}} @keyframes paRotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes paPulseGlow{0%,100%{filter:drop-shadow(0 0 40px rgba(0,226,255,.35))}50%{filter:drop-shadow(0 0 60px rgba(0,63,245,.55))}} @keyframes paGradFlow{from{background-position:0% 50%}to{background-position:200% 50%}} .pa-reveal{opacity:0;animation:paFadeUp .9s cubic-bezier(.2,.7,.2,1) forwards} .pa-reveal.d1{animation-delay:.1s}.pa-reveal.d2{animation-delay:.25s} .pa-reveal.d3{animation-delay:.4s}.pa-reveal.d4{animation-delay:.55s} /* ---------- SECTION BLENDING (no hairlines) ---------- */ /* Every section inherits the wrapper's deep black so there are no hard edges between them. Subtle ambient variance is added per-section via overlay pseudos. */ /* ============================================================ HERO ============================================================ */ .pa-hero{ padding:12.5rem 0 7rem;text-align:center; background: radial-gradient(80rem 38rem at 50% -14%,rgba(0,63,245,.22),transparent 65%), radial-gradient(60rem 28rem at 50% 110%,rgba(0,226,255,.1),transparent 65%), #02040a; background-size:220% 220%,240% 240%,100% 100%; animation:paBreathBg 32s cubic-bezier(.6,.2,.4,.8) infinite; } .pa-hero::before{ content:"";position:absolute;inset:-10%;pointer-events:none;z-index:0; background: conic-gradient(from 210deg at 50% 40%, rgba(0,226,255,.035) 0deg, rgba(0,63,245,.06) 80deg, rgba(0,226,255,.02) 160deg, rgba(58,123,255,.05) 240deg, rgba(0,226,255,.035) 360deg); filter:blur(80px);opacity:.55; mask-image:radial-gradient(ellipse 70% 60% at center,#000 30%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at center,#000 30%,transparent 80%); animation:paConicSpin 44s linear infinite; } .pa-hero::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(45rem 30rem at 30% 60%,rgba(0,226,255,.06),transparent 60%), radial-gradient(38rem 26rem at 72% 40%,rgba(0,63,245,.09),transparent 60%); filter:blur(28px); animation:paMeshDrift 26s cubic-bezier(.45,.05,.55,.95) infinite; } @keyframes paBreathBg{ 0% {background-position:50% 0%,50% 100%,0 0} 25% {background-position:46% 3%,54% 97%,0 0} 50% {background-position:52% 6%,48% 94%,0 0} 75% {background-position:48% 3%,52% 97%,0 0} 100%{background-position:50% 0%,50% 100%,0 0} } @keyframes paConicSpin{ from{transform:rotate(0deg) scale(1.02)} 50% {transform:rotate(180deg) scale(1.08)} to {transform:rotate(360deg) scale(1.02)} } @keyframes paMeshDrift{ 0% {transform:translate3d(0,0,0) scale(1);opacity:.85} 25% {transform:translate3d(-1.5%,1%,0) scale(1.05);opacity:1} 50% {transform:translate3d(1.2%,-.8%,0) scale(1.1);opacity:.9} 75% {transform:translate3d(-.6%,1.2%,0) scale(1.04);opacity:.95} 100%{transform:translate3d(0,0,0) scale(1);opacity:.85} } .pa-hero .pa-bg-grid{animation:paGridPulse 18s ease-in-out infinite} @keyframes paGridPulse{ 0%,100%{opacity:.7;transform:scale(1)} 50% {opacity:1;transform:scale(1.015)} } .pa-hero-inner{position:relative;z-index:2} /* ============================================================ ASCII SHADER — abstract canvas-based flow field. Renders a slowly-morphing grid of monospace characters as an aesthetic background overlay. JS handles the render loop in icons.js. ============================================================ */ .pa-ascii-shader{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none;z-index:0; opacity:.55; -webkit-mask-image:radial-gradient(ellipse 80% 70% at center,#000 20%,transparent 85%); mask-image:radial-gradient(ellipse 80% 70% at center,#000 20%,transparent 85%); } /* Make sure section content renders above the shader canvas */ .pa-v7-wrapper section > .pa-container{position:relative;z-index:1} /* Per-variant opacity tuning — some variants want more presence */ .pa-ascii-shader[data-variant="orderbook"]{opacity:.45} .pa-ascii-shader[data-variant="heatmap"]{opacity:.5} .pa-ascii-shader[data-variant="tape"]{opacity:.5} /* ASCII bracket frame — wraps any element with corner brackets */ .pa-ascii-frame{position:relative;display:inline-block;padding:1.5rem 2rem} .pa-ascii-frame::before, .pa-ascii-frame::after, .pa-ascii-frame > .pa-ascii-frame-tr, .pa-ascii-frame > .pa-ascii-frame-bl{ content:"";position:absolute; width:1.4rem;height:1.4rem; pointer-events:none; border:1px solid rgba(0,226,255,.45); filter:drop-shadow(0 0 6px rgba(0,226,255,.3)); animation:paAsciiBracketGlow 3s ease-in-out infinite; } .pa-ascii-frame::before{top:0;left:0;border-right:0;border-bottom:0} .pa-ascii-frame::after{bottom:0;right:0;border-left:0;border-top:0;animation-delay:1.5s} .pa-ascii-frame > .pa-ascii-frame-tr{top:0;right:0;border-left:0;border-bottom:0;animation-delay:.75s} .pa-ascii-frame > .pa-ascii-frame-bl{bottom:0;left:0;border-right:0;border-top:0;animation-delay:2.25s} @keyframes paAsciiBracketGlow{ 0%,100%{opacity:.6} 50% {opacity:1} } @media (max-width:880px){ .pa-ascii-shader{opacity:.4} .pa-ascii-frame{padding:1rem 1.25rem} .pa-ascii-frame::before,.pa-ascii-frame::after, .pa-ascii-frame > .pa-ascii-frame-tr,.pa-ascii-frame > .pa-ascii-frame-bl{ width:.875rem;height:.875rem; } } @media (prefers-reduced-motion:reduce){ .pa-ascii-shader{opacity:.25} .pa-ascii-frame::before,.pa-ascii-frame::after, .pa-ascii-frame > .pa-ascii-frame-tr,.pa-ascii-frame > .pa-ascii-frame-bl{animation:none!important} } /* ============================================================ TIMELINE — vertical, alternating cards with 3D tilt on hover. Reveal on scroll via IntersectionObserver (icons.js). ============================================================ */ .pa-timeline-v{ position:relative; max-width:62rem;margin:0 auto; padding:1.5rem 0; list-style:none; } .pa-timeline-v::before{ content:"";position:absolute; left:50%;top:0;bottom:0; width:1px; background:linear-gradient(180deg, rgba(0,226,255,0) 0%, rgba(0,226,255,.45) 6%, rgba(0,226,255,.45) 90%, rgba(0,255,157,.7) 100%); transform:translateX(-50%); box-shadow:0 0 14px rgba(0,226,255,.2); } .pa-timeline-v-item{ position:relative; display:grid; grid-template-columns:1fr 4.5rem 1fr; gap:0; margin-bottom:3rem; /* Reveal-on-scroll initial state — directional slide */ opacity:0; transition:opacity .8s cubic-bezier(.2,.8,.25,1),transform .8s cubic-bezier(.2,.8,.25,1); } .pa-timeline-v-item:nth-child(odd){transform:translate3d(-32px,18px,0)} .pa-timeline-v-item:nth-child(even){transform:translate3d(32px,18px,0)} .pa-timeline-v-item.is-visible{opacity:1;transform:translate3d(0,0,0)} .pa-timeline-v-item:last-child{margin-bottom:0} /* Outer ring of the timeline marker — pure circle */ .pa-timeline-v-marker{ grid-column:2; justify-self:center; align-self:start; margin-top:2.1rem; width:2.65rem;height:2.65rem; border-radius:50%; background:radial-gradient(circle,rgba(0,226,255,.22) 0%,rgba(0,226,255,.06) 70%); border:1px solid rgba(0,226,255,.6); position:relative;z-index:2; box-shadow: 0 0 0 6px rgba(4,6,12,.96), 0 0 0 7px rgba(0,226,255,.12), 0 0 22px rgba(0,226,255,.38); transition:transform .3s ease,box-shadow .3s ease,background .3s ease; } /* Inner dot — geometrically perfect circle via pseudo-element */ .pa-timeline-v-marker::before{ content:""; position:absolute; top:50%;left:50%; width:.7rem;height:.7rem; transform:translate(-50%,-50%); border-radius:50%; background:rgba(0,226,255,.95); box-shadow: 0 0 6px rgba(0,226,255,.7), 0 0 12px rgba(0,226,255,.4); transition:box-shadow .3s ease,background .3s ease; } .pa-timeline-v-item:hover .pa-timeline-v-marker{ transform:scale(1.15); background:radial-gradient(circle,rgba(0,226,255,.32) 0%,rgba(0,226,255,.1) 70%); box-shadow: 0 0 0 6px rgba(4,6,12,.96), 0 0 0 8px rgba(0,226,255,.22), 0 0 30px rgba(0,226,255,.7); } .pa-timeline-v-item:hover .pa-timeline-v-marker::before{ box-shadow: 0 0 8px rgba(0,226,255,.95), 0 0 18px rgba(0,226,255,.55); } .pa-timeline-v-marker-now{ border-color:rgba(0,255,157,.7); background:radial-gradient(circle,rgba(0,255,157,.22) 0%,rgba(0,255,157,.06) 70%); animation:paTLnowPulse 2.4s ease-in-out infinite; } .pa-timeline-v-marker-now::before{ background:#00ff9d; box-shadow: 0 0 8px rgba(0,255,157,.9), 0 0 16px rgba(0,255,157,.55); } @keyframes paTLnowPulse{ 0%,100%{box-shadow:0 0 0 6px rgba(4,6,12,.96),0 0 0 7px rgba(0,255,157,.18),0 0 14px rgba(0,255,157,.5)} 50% {box-shadow:0 0 0 6px rgba(4,6,12,.96),0 0 0 8px rgba(0,255,157,.32),0 0 32px rgba(0,255,157,.9)} } /* Card — glassmorphic with 3D depth */ .pa-timeline-v-card{ position:relative; padding:1.4rem 1.6rem; background:linear-gradient(135deg, rgba(8,12,24,.78) 0%, rgba(4,8,18,.85) 100%); border:1px solid rgba(255,255,255,.06); border-radius:1rem; backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow: 0 18px 44px rgba(0,8,32,.55), 0 4px 14px rgba(0,63,245,.18), inset 0 0 30px rgba(0,226,255,.035), inset 0 1px 0 rgba(255,255,255,.05); transform-style:preserve-3d; perspective:900px; transition: transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s ease, border-color .3s ease; } .pa-timeline-v-item:nth-child(odd) .pa-timeline-v-card{ grid-column:1; text-align:right; margin-right:1.75rem; align-self:start; } .pa-timeline-v-item:nth-child(even) .pa-timeline-v-card{ grid-column:3; text-align:left; margin-left:1.75rem; align-self:start; } /* 3D tilt direction depends on side */ .pa-timeline-v-item:nth-child(odd):hover .pa-timeline-v-card{ transform:translateY(-6px) rotateX(2deg) rotateY(-3deg) scale(1.02); box-shadow: 0 32px 70px rgba(0,8,32,.7), 0 8px 22px rgba(0,63,245,.32), inset 0 0 44px rgba(0,226,255,.07), inset 0 1px 0 rgba(255,255,255,.07); border-color:rgba(0,226,255,.28); } .pa-timeline-v-item:nth-child(even):hover .pa-timeline-v-card{ transform:translateY(-6px) rotateX(2deg) rotateY(3deg) scale(1.02); box-shadow: 0 32px 70px rgba(0,8,32,.7), 0 8px 22px rgba(0,63,245,.32), inset 0 0 44px rgba(0,226,255,.07), inset 0 1px 0 rgba(255,255,255,.07); border-color:rgba(0,226,255,.28); } /* Connector line from rail to card */ .pa-timeline-v-card::before{ content:"";position:absolute; top:1.85rem; width:1.6rem;height:1px; background:linear-gradient(90deg,rgba(0,226,255,.05),rgba(0,226,255,.35)); } .pa-timeline-v-item:nth-child(odd) .pa-timeline-v-card::before{ right:-1.6rem; background:linear-gradient(270deg,rgba(0,226,255,.05),rgba(0,226,255,.35)); } .pa-timeline-v-item:nth-child(even) .pa-timeline-v-card::before{ left:-1.6rem; } /* Header row: prominent year + version tag */ .pa-timeline-v-yearrow{ display:flex; align-items:baseline; justify-content:flex-start; gap:.85rem; margin-bottom:.55rem; flex-wrap:wrap; } .pa-timeline-v-item:nth-child(odd) .pa-timeline-v-yearrow{ justify-content:flex-end; flex-direction:row-reverse; } .pa-timeline-v-year{ font-family:"Avenir Next","Helvetica Neue",system-ui,sans-serif; font-size:2.35rem;font-weight:800;line-height:1; letter-spacing:-.02em; color:var(--pa-cyan); text-shadow:0 0 24px rgba(0,226,255,.32); font-variant-numeric:tabular-nums; } .pa-timeline-v-year-now{ color:#00ff9d; text-shadow:0 0 24px rgba(0,255,157,.5); } .pa-timeline-v-vtag{ display:inline-block; font-family:"SF Mono","Menlo",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;font-weight:600; color:rgba(0,226,255,.85); background:rgba(0,226,255,.07); border:1px solid rgba(0,226,255,.28); padding:.28rem .6rem; border-radius:.3rem; white-space:nowrap; } .pa-timeline-v-vtag-now{ color:#00ff9d; background:rgba(0,255,157,.08); border-color:rgba(0,255,157,.42); } /* Legacy date pill (keep for fallback if other pages use it) */ .pa-timeline-v-date{ display:inline-block; font-family:"SF Mono","Menlo",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.16em; color:var(--pa-cyan); background:rgba(0,226,255,.07); border:1px solid rgba(0,226,255,.22); padding:.28rem .6rem; border-radius:.3rem; margin-bottom:.6rem; } .pa-timeline-v-card h4{ font-size:1.1rem;font-weight:700;color:#fff; margin-bottom:.5rem;line-height:1.3; letter-spacing:-.005em; } .pa-timeline-v-card p{ font-size:.875rem;color:var(--pa-mute);line-height:1.65; } .pa-timeline-v-card p b{color:rgba(255,255,255,.92);font-weight:600} @media (max-width:760px){ .pa-timeline-v::before{left:1.5rem} .pa-timeline-v-item{ grid-template-columns:3rem 1fr; margin-bottom:2rem; } /* Smaller, more refined orbs on mobile — tighter rings, cleaner shadow stack */ .pa-timeline-v-marker{ grid-column:1;margin-top:1.5rem; width:1.85rem;height:1.85rem; border:1px solid rgba(0,226,255,.7); background:radial-gradient(circle,rgba(0,226,255,.28) 0%,rgba(0,226,255,.08) 70%); box-shadow: 0 0 0 4px rgba(4,6,12,.96), 0 0 0 5px rgba(0,226,255,.14), 0 0 14px rgba(0,226,255,.42); } .pa-timeline-v-marker::before{ width:.5rem;height:.5rem; box-shadow:0 0 5px rgba(0,226,255,.85),0 0 10px rgba(0,226,255,.5); } .pa-timeline-v-marker-now{ border-color:rgba(0,255,157,.78); background:radial-gradient(circle,rgba(0,255,157,.28) 0%,rgba(0,255,157,.08) 70%); } .pa-timeline-v-item:hover .pa-timeline-v-marker{ transform:scale(1.12); box-shadow: 0 0 0 4px rgba(4,6,12,.96), 0 0 0 6px rgba(0,226,255,.22), 0 0 18px rgba(0,226,255,.65); } .pa-timeline-v-item:nth-child(odd) .pa-timeline-v-card, .pa-timeline-v-item:nth-child(even) .pa-timeline-v-card{ grid-column:2; text-align:left; margin-left:1.25rem; margin-right:0; } /* All yearrows align left on mobile */ .pa-timeline-v-item:nth-child(odd) .pa-timeline-v-yearrow{ justify-content:flex-start; flex-direction:row; } .pa-timeline-v-year{font-size:2rem} .pa-timeline-v-item:nth-child(odd) .pa-timeline-v-card::before, .pa-timeline-v-item:nth-child(even) .pa-timeline-v-card::before{ left:-1.25rem;right:auto; background:linear-gradient(90deg,rgba(0,226,255,.05),rgba(0,226,255,.35)); } /* Drop 3D tilt on mobile, override base reveal transform */ .pa-timeline-v-item:nth-child(odd), .pa-timeline-v-item:nth-child(even){transform:translate3d(-18px,12px,0)} .pa-timeline-v-item.is-visible{transform:translate3d(0,0,0)} .pa-timeline-v-item:nth-child(odd):hover .pa-timeline-v-card, .pa-timeline-v-item:nth-child(even):hover .pa-timeline-v-card{ transform:translateY(-3px) scale(1.01); } } @media (prefers-reduced-motion:reduce){ .pa-timeline-v-item, .pa-timeline-v-item:nth-child(odd), .pa-timeline-v-item:nth-child(even){opacity:1;transform:none;transition:none} .pa-timeline-v-marker-now{animation:none!important} } /* ============================================================ ASCII TEXAS — simple state silhouette + Austin star ============================================================ */ .pa-tx-card{ max-width:32rem;margin:0 auto; display:flex;flex-direction:column;align-items:center; padding:2rem 1.5rem; background:linear-gradient(135deg,rgba(8,12,24,.6) 0%,rgba(4,8,18,.7) 100%); border:1px solid rgba(0,226,255,.16); border-radius:1.25rem; backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); box-shadow: 0 24px 60px rgba(0,8,32,.55), inset 0 0 30px rgba(0,226,255,.04), inset 0 1px 0 rgba(255,255,255,.04); position:relative; overflow:hidden; isolation:isolate; } /* Shooting stars — fall from upper-left toward middle-right at ~25° below horizontal. Live in a dedicated layer at z-index:0 with the SVG sitting at z-index:2 so trails always read as background depth, never overlap. */ .pa-tx-stars{ position:absolute;inset:0; pointer-events:none;overflow:hidden; z-index:0; } .pa-tx-shoot{ position:absolute;top:0;left:0; width:6px;height:6px; background:radial-gradient(circle,rgba(180,245,255,.95) 0%,rgba(0,226,255,.9) 35%,rgba(0,226,255,0) 70%); border-radius:50%; opacity:0; will-change:transform,opacity; animation:paTxShoot 6s cubic-bezier(.25,.55,.4,1) infinite; } /* Linear comet trail — extends BEHIND the star (up and left), aligned with the motion vector via the parent's rotation transform. */ .pa-tx-shoot::before{ content:""; position:absolute; top:50%;right:50%; width:90px;height:1px; background:linear-gradient(to left, rgba(0,226,255,.85) 0%, rgba(0,226,255,.45) 30%, rgba(0,226,255,.18) 60%, rgba(0,226,255,0) 100%); transform:translateY(-50%); filter:blur(.4px); } @keyframes paTxShoot{ /* Star idles invisible at top-left, then ramps in, falls to center-right, and fades. cubic-bezier on the timing function = real ease-out feel. */ 0% {transform:translate(-60px,-40px) rotate(25deg) scale(.85); opacity:0} 6% {opacity:1} 60% {opacity:1} 100% {transform:translate(640px,260px) rotate(25deg) scale(1.05); opacity:0} } /* Eight stars staggered across timing + position so the sky never feels patterned. Origins live OFF-CARD top-left; trajectories land on the right or middle edge. Sizes and durations vary for parallax depth. */ .pa-tx-shoot.s1{top:-4%; left:-6%; width:5px; height:5px; animation-delay:0s; animation-duration:5.4s} .pa-tx-shoot.s2{top:8%; left:-12%; width:4px; height:4px; animation-delay:1.6s; animation-duration:6.8s} .pa-tx-shoot.s3{top:-8%; left:6%; width:3.5px;height:3.5px;animation-delay:3.2s; animation-duration:6s} .pa-tx-shoot.s4{top:18%; left:-18%; width:5.5px;height:5.5px;animation-delay:4.4s; animation-duration:7.2s} .pa-tx-shoot.s5{top:-2%; left:14%; width:3px; height:3px; animation-delay:2.4s; animation-duration:5.8s} .pa-tx-shoot.s6{top:24%; left:-10%; width:4.5px;height:4.5px;animation-delay:5.6s; animation-duration:6.4s} .pa-tx-shoot.s7{top:4%; left:-20%; width:4px; height:4px; animation-delay:6.8s; animation-duration:7.6s} .pa-tx-shoot.s8{top:14%; left:-2%; width:3px; height:3px; animation-delay:8s; animation-duration:6.2s} /* SVG-based Texas — accurate state outline with halftone dot fill. Sits at z-index:2 so the shooting-stars layer reads as deep background. */ .pa-tx-svg{ display:block; width:100%;max-width:22rem; height:auto; margin:0 auto; filter:drop-shadow(0 0 16px rgba(0,226,255,.22)); animation:paTxDrift 16s ease-in-out infinite; position:relative;z-index:2; } @keyframes paTxDrift{ 0%,100%{filter:drop-shadow(0 0 16px rgba(0,226,255,.22))} 50% {filter:drop-shadow(0 0 26px rgba(0,226,255,.4))} } /* Soft halo behind the Austin star — counter-pulses for layered depth. */ .pa-tx-svg-halo{ transform-origin:0 0; animation:paTxHalo 4s ease-in-out infinite; } @keyframes paTxHalo{ 0%,100%{opacity:.45;transform:scale(1)} 50% {opacity:.85;transform:scale(1.35)} } /* Outer sonar ripple — radiates outward like radar, then fades. Uses ease-out so it expands fast at first, then drifts to nothing — mimics how light propagates from a real point source. */ .pa-tx-svg-ripple{ transform-origin:0 0; animation:paTxRipple 4.6s cubic-bezier(.2,.6,.3,1) infinite; } @keyframes paTxRipple{ 0% {transform:scale(.5); opacity:.85; stroke-width:3} 60% {opacity:.15} 100% {transform:scale(2.6); opacity:0; stroke-width:.5} } /* Austin star pulse — clean two-keyframe scale eased smooth. transform-origin 0 0 works because the inner sits at the parent's translate origin and the is centered via text-anchor="middle". No transform-box hacks, no brightness filter (which causes hitching). */ .pa-tx-svg-star{ transform-origin:0 0; animation:paTxStarPulse 3s ease-in-out infinite; } @keyframes paTxStarPulse{ 0%,100%{transform:scale(1)} 50% {transform:scale(1.22)} } .pa-tx-label{ margin-top:1.25rem; font-family:"SF Mono","Menlo",ui-monospace,monospace; font-size:.7rem;letter-spacing:.22em; color:rgba(255,255,255,.7); text-transform:uppercase; position:relative;z-index:1; } .pa-tx-label::first-letter{color:var(--pa-cyan)} @media (max-width:520px){ .pa-tx-card{padding:1.5rem 1rem} .pa-tx-art{font-size:.6rem} } @media (prefers-reduced-motion:reduce){ .pa-tx-art,.pa-tx-star,.pa-tx-svg,.pa-tx-svg-star,.pa-tx-shoot{ animation:none!important; } .pa-tx-shoot{display:none} } .pa-hero .pa-bg-orb.cyan{ top:-6rem;left:-10rem; animation:paOrbCyan 26s cubic-bezier(.55,.1,.45,.9) infinite; } .pa-hero .pa-bg-orb.blue{ bottom:-15rem;right:-12rem; animation:paOrbBlue 34s cubic-bezier(.55,.1,.45,.9) infinite; } @keyframes paOrbCyan{ 0% {transform:translate3d(0,0,0) scale(1);opacity:.9} 20% {transform:translate3d(4rem,-2rem,0) scale(1.12);opacity:1} 45% {transform:translate3d(9rem,3rem,0) scale(1.06);opacity:.82} 70% {transform:translate3d(3rem,6rem,0) scale(1.14);opacity:.95} 100%{transform:translate3d(0,0,0) scale(1);opacity:.9} } @keyframes paOrbBlue{ 0% {transform:translate3d(0,0,0) scale(1);opacity:.85} 22% {transform:translate3d(-5rem,-3rem,0) scale(1.1);opacity:1} 48% {transform:translate3d(-9rem,2rem,0) scale(1.18);opacity:.9} 72% {transform:translate3d(-3rem,5rem,0) scale(1.08);opacity:.95} 100%{transform:translate3d(0,0,0) scale(1);opacity:.85} } .pa-hero-inner{max-width:62rem;margin:0 auto} .pa-trust{margin-top:1.125rem;font-size:.8125rem;color:var(--pa-mute);letter-spacing:.04em} .pa-helper{margin-top:.4rem;font-size:.8125rem;color:rgba(255,255,255,.4);font-style:italic} .pa-badges{ /* inline-grid with 3 max-content columns: each badge sized to its own text, but the columns get equal gaps so the row reads as a single balanced unit. justify-content:center on the grid keeps the whole group horizontally centered against the hero text. */ display:inline-grid; grid-template-columns:repeat(3,max-content); justify-content:center;align-items:center; gap:1.5rem; margin:2.5rem auto 0; max-width:min(48rem,100%); text-align:center; } .pa-badge{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.7rem 1.25rem;border-radius:999px; border:1px solid rgba(0,226,255,.18); background:linear-gradient(135deg,rgba(0,226,255,.08),rgba(0,63,245,.10)); color:#dff8ff;font-size:.8125rem;font-weight:500;line-height:1; backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); white-space:nowrap;flex-shrink:0; box-shadow:0 4px 18px rgba(0,8,32,.25),0 0 24px rgba(0,226,255,.06); } .pa-badge .pa-ic{color:var(--pa-cyan);font-size:1rem} .pa-badge .pa-glyph{ color:var(--pa-cyan); font-family:"SF Mono","Menlo","Times New Roman",ui-monospace,serif; font-size:.95rem;font-weight:600;line-height:1; font-style:italic; } .pa-feat-icon{font-style:normal} .pa-feat-icon:has(+ h3){font-feature-settings:"smcp" on;} .pa-markets{margin-top:2rem;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pa-mute)} /* COMPATIBLE WITH — TradingView lockup */ .pa-compat{ display:inline-flex;align-items:center;gap:1rem; margin:1.75rem auto 0;padding:.75rem 1.5rem;border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 18px rgba(255,255,255,.06), 0 0 38px rgba(255,255,255,.04); transition:box-shadow .35s ease,border-color .35s ease; } .pa-compat:hover{ border-color:rgba(255,255,255,.16); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 26px rgba(255,255,255,.1), 0 0 56px rgba(255,255,255,.06); } .pa-compat-label{ font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pa-mute); font-weight:600; } .pa-compat-logo{ height:1.25rem;width:auto;display:block; filter:brightness(1.15) contrast(.95);opacity:.9; } @media (max-width:560px){ .pa-compat{padding:.55rem 1.125rem;gap:.75rem} .pa-compat-label{font-size:.5625rem;letter-spacing:.16em} .pa-compat-logo{height:1.05rem} } /* ============================================================ STRATEGY REPORT — radial melt that inherits hero ambient ============================================================ */ /* Section is fully transparent — the page's underlying dark gradient and the hero's ambient lights bleed straight through, so the report area reads as a continuous extension of the hero rather than a separate box. No section-level halos, no colored backgrounds: just padding + the chart. */ .pa-report{ padding:5rem 0 9rem;text-align:center; position:relative;z-index:2; background:transparent; } .pa-report-fade{ position:relative;max-width:82rem;margin:0 auto;padding:0 3rem; } .pa-report-fade img{ width:100%;display:block;background:transparent;border:0; /* Lighten blend lets the dark TradingView background dissolve into the ASCII shader behind it instead of looking like a hard rectangle. */ mix-blend-mode:lighten; /* Single radial mask — opaque core, feathered halo on all 4 sides. Opaque core widened to 50% (was 40%) so more of the chart reads clearly without the mask dimming it. */ -webkit-mask-image:radial-gradient(ellipse 82% 76% at center,#000 50%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 88%,transparent 100%); mask-image:radial-gradient(ellipse 82% 76% at center,#000 50%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 88%,transparent 100%); /* Pre-amplify pixel brightness BEFORE the lighten blend so darker UI elements (gridlines, panel borders, candle bodies) pass the lighten threshold and stay readable. */ filter:brightness(1.45) saturate(1.18) contrast(1.08); } @media (max-width:760px){ .pa-report{padding:2rem 0 4rem} .pa-report-fade{padding:0 .75rem;max-width:100%} .pa-report-fade img{ /* Tighter feather + larger opaque core on mobile so the chart stays readable on small screens. */ -webkit-mask-image:radial-gradient(ellipse 95% 78% at center,#000 50%,rgba(0,0,0,.7) 75%,rgba(0,0,0,.18) 90%,transparent 100%); mask-image:radial-gradient(ellipse 95% 78% at center,#000 50%,rgba(0,0,0,.7) 75%,rgba(0,0,0,.18) 90%,transparent 100%); filter:brightness(1.5) saturate(1.2) contrast(1.1); } } /* ============================================================ LOGO BAR ============================================================ */ .pa-logos{ padding:3rem 0; background:transparent; } .pa-marquee{ overflow:hidden;position:relative;width:100%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); } .pa-marquee-track{ display:flex;align-items:center;gap:3.5rem; width:max-content; animation:paMarquee 55s linear infinite; will-change:transform; } .pa-marquee:hover .pa-marquee-track{animation-play-state:paused} @keyframes paMarquee{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } .pa-logo-img{ flex:0 0 auto;height:2rem;width:auto;max-width:10rem;object-fit:contain; filter:grayscale(1) brightness(1.8) contrast(.9);opacity:.55; transition:filter .35s,opacity .35s,transform .35s; } .pa-logo-img:hover{filter:none;opacity:1;transform:translateY(-2px)} /* ============================================================ SECTION HEADS / GRIDS ============================================================ */ .pa-section-head{text-align:center;margin-bottom:4rem} .pa-section-head .pa-eyebrow, .pa-pricing-hero .pa-hero-inner .pa-eyebrow{margin-bottom:1.25rem} .pa-section-head .pa-sub{margin-left:auto;margin-right:auto} .pa-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem} .pa-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .pa-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem} @media (max-width:980px){.pa-grid-4{grid-template-columns:repeat(2,1fr)}.pa-grid-3{grid-template-columns:repeat(2,1fr)}.pa-grid-2{grid-template-columns:1fr}} @media (max-width:600px){.pa-grid-4,.pa-grid-3{grid-template-columns:1fr}} /* ============================================================ GLASS CARD (shared base) ============================================================ */ .pa-card,.pa-feature,.pa-testimonial,.pa-price-card,.pa-shot,.pa-faq-list details{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); border-radius:1.25rem; position:relative; transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s,background .35s; } .pa-card::before,.pa-feature::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(135deg,rgba(0,226,255,.25),transparent 40%,transparent 60%,rgba(0,63,245,.25)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none;opacity:.5;transition:opacity .35s; } .pa-card:hover,.pa-feature:hover{ transform:translateY(-4px); background:rgba(255,255,255,.05); box-shadow:0 24px 70px rgba(0,63,245,.18),0 0 50px rgba(0,226,255,.08); } .pa-card:hover::before,.pa-feature:hover::before{opacity:1} /* PAIN CARDS */ .pa-pain{padding:7.5rem 0;background:transparent} .pa-pain::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60rem 30rem at 20% 50%,rgba(0,63,245,.1),transparent 60%)} .pa-card{padding:2rem 1.625rem} .pa-card-num{ display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.12em; margin-bottom:.875rem; } .pa-card h3{font-size:1.125rem;font-weight:700;margin-bottom:.625rem;line-height:1.25;color:#fff} .pa-card p{font-size:.875rem;line-height:1.65;color:var(--pa-text)} /* IMAGE CARD VARIANT — used in the "Why You're Losing" pain cards. Chart screenshot sits at the top of the card with a feathered fade-out so it dissolves into the card body, not crops at a hard edge. */ .pa-card-img{ padding:0; overflow:hidden; display:flex;flex-direction:column; } .pa-card-thumb{ position:relative; margin:0; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(180deg,rgba(0,226,255,.06),rgba(0,8,32,.4)); border-bottom:1px solid rgba(0,226,255,.10); } .pa-card-thumb::after{ /* Soft fade-out at the bottom edge so image blends into card body */ content:"";position:absolute;left:0;right:0;bottom:0;height:35%; background:linear-gradient(180deg,transparent,rgba(8,12,24,.85) 70%,rgba(8,12,24,1) 100%); pointer-events:none; } .pa-card-thumb img{ width:100%;height:100%;display:block; object-fit:cover;object-position:center; filter:saturate(1.05) contrast(1.04); transition:transform .8s cubic-bezier(.22,.8,.25,1),filter .5s ease; } .pa-card-img:hover .pa-card-thumb img{ transform:scale(1.06); filter:saturate(1.15) contrast(1.08); } .pa-card-img > .pa-card-num, .pa-card-img > h3, .pa-card-img > p{ padding-left:1.625rem;padding-right:1.625rem; } .pa-card-img > .pa-card-num{margin-top:1.25rem} .pa-card-img > p{padding-bottom:1.75rem} /* SOCIAL PROOF — Discord screenshot marquee Layered ambient: Discord-purple wash on the left, cyan halo on the right, plus a soft top-down vignette so the marquee feels framed, not floating. */ .pa-social{padding:7.5rem 0;background:transparent;position:relative} .pa-social::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(70rem 36rem at 14% 60%,rgba(88,101,242,.10),transparent 60%), radial-gradient(60rem 32rem at 86% 40%,rgba(0,226,255,.07),transparent 62%), radial-gradient(80rem 16rem at 50% 0%,rgba(0,63,245,.08),transparent 70%); } .pa-social .pa-section-head{margin-bottom:3.5rem} /* Marquee track — wider gap, slightly slower scroll, smoother pause */ .pa-testimonial-marquee{ /* Dramatic edge fade so screenshots dissolve into the section background instead of cropping at hard rectangle edges. */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); /* Subtle top/bottom feather so the cards float in their ambient zone */ padding:2.5rem 0; } .pa-testimonial-marquee .pa-marquee-track{ gap:2.5rem;animation-duration:90s;align-items:center; /* Smoother easing so the loop feels fluid, not metronomic. */ animation-timing-function:linear; } .pa-testimonial-shot{ flex:0 0 auto; width:auto;height:clamp(22rem,36vw,34rem); max-width:none; object-fit:contain; image-rendering:-webkit-optimize-contrast; background:transparent; /* Thin glass border + rounded corner so each screenshot reads as a tile, not a raw image floating in space. Discord screenshots typically have dark backgrounds so the cyan border is barely visible at rest, but becomes the focal accent on hover. */ border:1px solid rgba(0,226,255,.08); border-radius:1rem; /* Single layered shadow — clean elevation that doesn't fight the cyan glow. Two stops only: depth + ambient cyan halo. */ box-shadow: 0 22px 50px rgba(0,8,32,.45), 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 40px rgba(0,226,255,.05); filter:none; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease; } .pa-testimonial-shot:hover{ transform:translateY(-10px) scale(1.025); border-color:rgba(0,226,255,.28); box-shadow: 0 36px 80px rgba(0,8,32,.6), 0 0 0 1px rgba(0,226,255,.18) inset, 0 0 80px rgba(0,226,255,.18), 0 0 120px rgba(88,101,242,.12); z-index:2; } @media (max-width:760px){ .pa-testimonial-marquee{padding:1.5rem 0} .pa-testimonial-marquee .pa-marquee-track{gap:1.5rem;animation-duration:75s} .pa-testimonial-shot{height:clamp(18rem,72vw,28rem);border-radius:.75rem} .pa-testimonial-shot:hover{transform:translateY(-4px) scale(1.01)} } /* DISCORD CTA — bridge between social proof and features */ .pa-discord-cta{padding:5rem 0;background:transparent;position:relative} .pa-discord-cta::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(60rem 30rem at 15% 50%,rgba(88,101,242,.14),transparent 60%), radial-gradient(60rem 30rem at 85% 50%,rgba(0,226,255,.08),transparent 60%); } .pa-discord-card{ position:relative;display:grid; grid-template-columns:18rem 1fr; gap:3rem;align-items:center; padding:3.5rem 3.5rem; background:rgba(255,255,255,.035); border:1px solid rgba(0,226,255,.15); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-radius:2rem; box-shadow: 0 40px 120px rgba(0,63,245,.25), 0 0 80px rgba(0,226,255,.1), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; } .pa-discord-card::before{ /* animated gradient border glow */ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(135deg,rgba(0,226,255,.4),transparent 40%,transparent 60%,rgba(88,101,242,.4)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none; } .pa-discord-visual{ display:flex;align-items:center;justify-content:center; aspect-ratio:1;border-radius:1.5rem; background: radial-gradient(circle at 30% 30%,rgba(122,243,255,.35),transparent 60%), linear-gradient(135deg,rgba(88,101,242,.3),rgba(0,63,245,.35)); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 0 60px rgba(0,226,255,.2); position:relative; } .pa-discord-mark{ width:68%;height:auto;object-fit:contain;display:block; filter:brightness(0) invert(1) drop-shadow(0 0 40px rgba(0,226,255,.6)) drop-shadow(0 0 80px rgba(88,101,242,.5)); animation:paBreathe 4s ease-in-out infinite; } .pa-discord-body{display:flex;flex-direction:column;gap:1rem;align-items:flex-start} .pa-discord-body .pa-h2{margin:0} .pa-discord-body .pa-sub{max-width:40rem} .pa-discord-actions{display:flex;align-items:center;gap:1.5rem;margin-top:1rem;flex-wrap:wrap} .pa-discord-learn{ font-size:.875rem;font-weight:600;color:var(--pa-cyan); transition:color .25s,transform .25s; } .pa-discord-learn:hover{color:#fff;transform:translateX(4px)} @media (max-width:880px){ .pa-discord-card{grid-template-columns:1fr;gap:2rem;padding:2.25rem} .pa-discord-visual{aspect-ratio:auto;height:12rem;max-width:12rem;margin:0 auto} .pa-discord-body{align-items:center;text-align:center} .pa-discord-actions{justify-content:center} } /* FEATURES */ .pa-features{padding:7.5rem 0;background:transparent} .pa-features::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70rem 34rem at 30% 100%,rgba(0,63,245,.12),transparent 60%)} .pa-feature{padding:2.5rem 2rem} .pa-feat-icon{ display:inline-flex;align-items:center;justify-content:center; width:3.25rem;height:3.25rem;margin-bottom:1.125rem;border-radius:.875rem; background:linear-gradient(135deg,rgba(0,226,255,.16),rgba(0,63,245,.22)); color:var(--pa-cyan); font-family:"Times New Roman","STIX Two Math","Cambria Math",serif; font-size:1.7rem;font-weight:500;line-height:1;font-style:italic; text-shadow:0 0 18px rgba(0,226,255,.55); box-shadow:0 0 30px rgba(0,226,255,.25),inset 0 0 20px rgba(0,226,255,.08); border:1px solid rgba(0,226,255,.25); } .pa-feat-icon .pa-ic{filter:drop-shadow(0 0 14px rgba(0,226,255,.7))} .pa-feature h3{font-size:1.375rem;font-weight:700;margin-bottom:.75rem;color:#fff} .pa-feature p{font-size:.9375rem;color:var(--pa-text);line-height:1.65} .pa-feat-tag{ /* Inline-flex with locked height + middle alignment so the pill centers exactly with the h3 cap-line across every browser, regardless of header font-size or wrap state. translateY nudges the pill up to match the optical center of the heading text rather than its baseline. */ display:inline-flex;align-items:center;justify-content:center; height:1.4rem;line-height:1; padding:0 .65rem; margin-left:.6rem; font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; font-weight:700;font-family:"SF Mono","Menlo",ui-monospace,monospace; color:#00e2ff; background:rgba(0,226,255,.10); border:1px solid rgba(0,226,255,.32); border-radius:999px; vertical-align:middle; white-space:nowrap; transform:translateY(-1px); box-shadow:0 0 12px rgba(0,226,255,.10); } .pa-feat-tag-core{ color:rgba(255,255,255,.85); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.20); box-shadow:0 0 12px rgba(255,255,255,.06); } /* Pills used inside .pa-card h3 (features page indicator cards) sit on a slightly different cap-line than .pa-feature h3 — small adjustment so they visually match across both card types. */ .pa-card h3 .pa-feat-tag{ transform:translateY(-2px); margin-left:.5rem; } /* ============================================================ PRICING ============================================================ */ .pa-pricing{padding:7.5rem 0;background:transparent;position:relative;scroll-margin-top:5rem} .pa-pricing::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(80rem 40rem at 50% 50%,rgba(0,63,245,.14),transparent 65%)} .pa-price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:60rem;margin:0 auto} .pa-price-grid-3{grid-template-columns:repeat(3,1fr);max-width:72rem} @media (max-width:980px){.pa-price-grid-3{grid-template-columns:1fr;max-width:36rem}} @media (max-width:760px){.pa-price-grid{grid-template-columns:1fr}} .pa-price-card{padding:3rem 2.25rem;background:rgba(255,255,255,.025)} .pa-price-card.pa-featured{ background:linear-gradient(180deg,rgba(0,226,255,.08),rgba(0,63,245,.14)); border-color:rgba(0,226,255,.45); box-shadow: 0 0 0 1px rgba(0,226,255,.5), 0 30px 100px rgba(0,63,245,.35), 0 0 80px rgba(0,226,255,.18); transform:scale(1.02); } .pa-popular{ position:absolute;top:-.875rem;left:50%;transform:translateX(-50%); overflow:hidden;isolation:isolate; background: radial-gradient(120% 160% at 20% 20%,rgba(122,243,255,.6) 0%,rgba(122,243,255,0) 50%), radial-gradient(140% 180% at 80% 80%,#2f6bff 0%,rgba(47,107,255,0) 55%), linear-gradient(120deg,#00c8f0 0%,#1e88ff 50%,#003ff5 100%); background-size:200% 200%,220% 220%,180% 180%; background-position:0% 0%,100% 100%,0% 50%; animation:paCtaFlow 28s ease-in-out infinite; padding:.4rem 1.125rem;border-radius:999px;font-size:.6875rem;font-weight:800; letter-spacing:.14em;color:#000;text-transform:uppercase; box-shadow:0 8px 30px rgba(0,63,245,.55),inset 0 1px 0 rgba(255,255,255,.35); display:inline-flex;align-items:center;gap:.4rem; } .pa-popular::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:60%; background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%); transform:translateX(-180%); animation:paCtaSheen 7s cubic-bezier(.42,.05,.5,.95) infinite; pointer-events:none;will-change:transform; } .pa-price-card h3{font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pa-mute);margin-bottom:.875rem} .pa-price{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.4rem} .pa-price-num{ font-size:4rem;font-weight:700;letter-spacing:-.025em;color:#fff; } .pa-price-per{font-size:1rem;color:var(--pa-mute)} .pa-price-sub{display:none} .pa-price{margin-bottom:.5rem} .pa-price-effective{ font-size:.8125rem;font-weight:500;color:var(--pa-cyan); margin:0 0 1.25rem;letter-spacing:.01em; } .pa-price-effective b{color:#fff;font-weight:700} .pa-price-effective-muted{color:var(--pa-mute)} .pa-price-effective-muted b{color:rgba(255,255,255,.85)} .pa-price-card ul{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem} .pa-price-card li{font-size:.875rem;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:.625rem} .pa-price-card li::before{ content:"";display:inline-block;width:1rem;height:1rem;flex-shrink:0; background:var(--pa-grad); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .pa-price-card .pa-cta{width:100%} .pa-price-footer{text-align:center;margin-top:2.5rem} .pa-disclaimer{font-size:.6875rem;color:rgba(255,255,255,.32);margin-top:.875rem} /* Keep pa-checkout (if still used on other pages) transparent */ .pa-checkout{padding:5rem 0;background:transparent;position:relative} .pa-checkout::before{display:none} /* ============================================================ COMPACT TRUST STRIP (merged into pricing footer) ============================================================ */ .pa-checkout-trust{ display:flex;flex-direction:column;align-items:center;gap:.875rem; margin:2rem auto 1rem;padding:1.25rem 1.5rem;max-width:44rem; border-radius:1rem; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); } .pa-checkout-label{ font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--pa-mute); } .pa-pay-badges{display:flex;justify-content:center;align-items:center;gap:1.5rem;row-gap:1rem;flex-wrap:wrap;max-width:100%} .pa-pay-badges img{ height:1.25rem;width:auto;max-width:4.5rem;object-fit:contain; opacity:.78; filter:drop-shadow(0 0 10px rgba(0,226,255,.14)); transition:opacity .25s,transform .25s; flex:0 0 auto; } .pa-pay-badges img:hover{opacity:1;transform:translateY(-1px)} /* ============================================================ GALLERY ============================================================ */ .pa-gallery{padding:7.5rem 0;background:transparent;position:relative} .pa-gallery::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(55rem 28rem at 50% 100%,rgba(0,226,255,.07),transparent 60%)} .pa-shot{padding:1.5rem;display:flex;flex-direction:column;justify-content:flex-end; aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,rgba(0,226,255,.08),rgba(0,63,245,.14))} .pa-shot::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 30% 30%,rgba(0,226,255,.18),transparent 60%); pointer-events:none; } .pa-shot:hover{transform:translateY(-4px);box-shadow:0 24px 70px rgba(0,226,255,.18)} .pa-shot b{font-size:1.25rem;font-weight:700;position:relative;z-index:1;color:#fff} .pa-shot span{font-size:.75rem;color:var(--pa-cyan);margin-top:.25rem;position:relative;z-index:1} .pa-shot-img{padding:0;display:block;position:relative;background:transparent} .pa-shot-img img{ width:100%;height:100%;object-fit:cover;display:block; filter:none; transition:transform .9s cubic-bezier(.2,.7,.2,1); } .pa-shot-img:hover img{transform:scale(1.04)} .pa-shot-img::before,.pa-shot-img::after{display:none} .pa-shot-cap{display:none} /* ============================================================ FAQ ============================================================ */ .pa-faq{padding:7.5rem 0;background:transparent} .pa-faq::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(50rem 30rem at 50% 0%,rgba(0,226,255,.06),transparent 60%)} .pa-faq-list{max-width:52rem;margin:0 auto;display:flex;flex-direction:column;gap:.75rem} .pa-faq-list details{padding:1.25rem 1.5rem;transition:border-color .3s,background .3s} .pa-faq-list details[open]{ border-color:rgba(0,226,255,.4); background:rgba(0,226,255,.04); box-shadow:0 12px 40px rgba(0,63,245,.18); } .pa-faq-list summary{ cursor:pointer;font-weight:600;font-size:1rem;list-style:none;color:#fff; display:flex;justify-content:space-between;align-items:center;gap:1.25rem; } .pa-faq-list summary::-webkit-details-marker{display:none} .pa-faq-list summary::after{ content:"+";color:var(--pa-cyan);font-size:1.5rem;font-weight:300; transition:transform .3s;line-height:1;flex-shrink:0; padding-left:.25rem; } .pa-faq-list details[open] summary::after{transform:rotate(45deg)} .pa-faq-list p{margin-top:.875rem;color:var(--pa-text);font-size:.875rem;line-height:1.65} /* ============================================================ CLOSE ============================================================ */ .pa-close{ padding:8.5rem 0; background:radial-gradient(ellipse at center,rgba(0,63,245,.3),transparent 60%),transparent; text-align:center; } .pa-close-actions{ display:inline-flex;flex-wrap:wrap;justify-content:center;gap:1rem; } /* Section-level action row (Get Access / Discord CTAs mid-page) */ .pa-section-actions{ display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap; margin-top:3rem; } .pa-section-head .pa-section-actions{margin-top:1.75rem} @media (max-width:560px){ .pa-section-actions{flex-direction:column;width:100%} .pa-section-actions .pa-cta{width:100%;max-width:22rem} } .pa-cta-discord{ display:inline-flex;align-items:center;justify-content:center;gap:.625rem; background:rgba(88,101,242,.10); border:1px solid rgba(88,101,242,.42); color:#fff; box-shadow: 0 0 0 1px rgba(88,101,242,.06), 0 8px 24px rgba(88,101,242,.18), 0 0 32px rgba(88,101,242,.12); transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease; } .pa-cta-discord:hover{ background:rgba(88,101,242,.18); border-color:rgba(88,101,242,.75); box-shadow: 0 0 0 1px rgba(88,101,242,.18), 0 16px 48px rgba(88,101,242,.4), 0 0 60px rgba(88,101,242,.3); transform:translateY(-1px); } .pa-cta-discord-icon{ width:1.25rem;height:1.25rem;object-fit:contain;display:block; filter:brightness(0) invert(1); opacity:.95; } @media (max-width:560px){ .pa-close-actions{flex-direction:column;width:100%;max-width:22rem} .pa-close-actions .pa-cta{width:100%} } /* ============================================================ FOOTER ============================================================ */ .pa-foot{padding:5rem 0 2rem;background:transparent;position:relative} .pa-foot::before{ content:"";position:absolute;top:0;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,rgba(0,226,255,.32) 50%,transparent); } .pa-foot .pa-container{max-width:78rem} .pa-foot-top{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem; padding-bottom:3rem; } @media (max-width:1100px){.pa-foot-top{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.25rem}} @media (max-width:980px){.pa-foot-top{grid-template-columns:1fr 1fr;gap:2.5rem}} @media (max-width:560px){.pa-foot-top{grid-template-columns:1fr;gap:2rem}} .pa-foot-brand{display:flex;flex-direction:column;gap:1.25rem} .pa-foot-brand-link{display:inline-block;width:fit-content} .pa-foot-brand img{ height:1.75rem;width:auto;display:block; filter:drop-shadow(0 0 22px rgba(0,226,255,.4)); transition:filter .3s,transform .3s; } .pa-foot-brand-link:hover img{filter:drop-shadow(0 0 30px rgba(0,226,255,.7));transform:translateY(-1px)} .pa-foot-brand p{font-size:.875rem;line-height:1.6;color:var(--pa-mute);max-width:22rem;margin:0} /* USA TRUST BADGE — subtle "Based in Austin, Texas · USA" pill with inline SVG flag. Predominantly US visitors, signals provenance + builds trust without being garish. */ .pa-foot-usa{ display:inline-flex;align-items:center;gap:.5rem; width:fit-content; padding:.4rem .75rem .4rem .55rem; border-radius:999px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); font-size:.6875rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); transition:border-color .35s,color .35s,background .35s,transform .35s; } .pa-foot-usa:hover{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:rgba(255,255,255,.82); transform:translateY(-1px); } .pa-foot-flag{ width:1.125rem;height:.625rem; border-radius:1px;flex-shrink:0;display:block; box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 6px rgba(255,255,255,.05); opacity:.92; } @media (max-width:560px){ .pa-foot-usa{margin-left:auto;margin-right:auto} } .pa-foot-col h4{ font-size:.75rem;font-weight:700;letter-spacing:.16em; color:#fff;text-transform:uppercase;margin-bottom:1.25rem; } .pa-foot-col ul{display:flex;flex-direction:column;gap:.75rem;list-style:none;padding:0;margin:0} .pa-foot-col a{ font-size:.875rem;color:var(--pa-mute); transition:color .25s,transform .25s;display:inline-block; } .pa-foot-col a:hover{color:var(--pa-cyan);transform:translateX(3px)} .pa-foot-news p{font-size:.875rem;color:var(--pa-mute);line-height:1.55;margin-bottom:1rem;max-width:20rem} .pa-foot-form{ display:flex;align-items:center;gap:.5rem; padding:.375rem;border-radius:.75rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:border-color .3s,box-shadow .3s; max-width:22rem; } .pa-foot-form:focus-within{ border-color:rgba(0,226,255,.4); box-shadow:0 0 0 3px rgba(0,226,255,.1),0 0 40px rgba(0,226,255,.15); } .pa-foot-form input{ flex:1;min-width:0;background:transparent;border:0;outline:0; padding:.6rem .75rem;font-family:inherit;font-size:.8125rem;color:#fff; } .pa-foot-form input::placeholder{color:rgba(255,255,255,.4)} .pa-foot-form button{ flex-shrink:0;padding:.55rem .9rem;border-radius:.5rem;border:0;cursor:pointer; font-family:inherit;font-weight:700;font-size:.75rem;letter-spacing:.04em; color:#011018; background:linear-gradient(120deg,#00c8f0,#1e88ff,#003ff5); background-size:200% 100%; box-shadow:0 6px 20px rgba(0,63,245,.45); transition:box-shadow .25s; } .pa-foot-form button:hover{box-shadow:0 8px 28px rgba(0,63,245,.6),0 0 40px rgba(0,226,255,.4)} .pa-foot-socials{display:flex;gap:.625rem;margin-top:.25rem} .pa-foot-socials a{ display:inline-flex;align-items:center;justify-content:center; width:2.25rem;height:2.25rem;border-radius:.625rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.6); transition:color .3s,border-color .3s,background .3s,transform .3s,box-shadow .3s; overflow:hidden; } .pa-foot-socials a:hover{ color:var(--pa-cyan); border-color:rgba(0,226,255,.5); background:rgba(0,226,255,.08); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,63,245,.3),0 0 30px rgba(0,226,255,.25); } .pa-foot-socials svg{width:1rem;height:1rem} .pa-foot-social-discord img{width:1.125rem;height:auto;object-fit:contain; filter:brightness(0) invert(1) opacity(.6);transition:filter .3s} .pa-foot-social-discord:hover img{filter:none} .pa-foot-bottom{ display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.05); font-size:.75rem;color:var(--pa-mute); /* room so the floating chat widget never crops the copyright on mobile */ padding-bottom:1.25rem; } .pa-foot-bottom p{max-width:64rem;text-align:center;line-height:1.6;color:rgba(255,255,255,.38);margin:0 auto} .pa-foot-legal{display:flex;gap:1.25rem;flex-wrap:wrap} .pa-foot-legal a{transition:color .25s} .pa-foot-legal a:hover{color:var(--pa-cyan)} /* Legacy simple footer (still used on sub-pages) */ .pa-foot-logo{height:3rem;width:auto;filter:drop-shadow(0 0 18px rgba(0,226,255,.3));margin-bottom:.25rem} .pa-foot-links{display:flex;gap:1.5rem;flex-wrap:wrap} .pa-foot-links a{transition:color .25s} .pa-foot-links a:hover{color:var(--pa-cyan)} /* ============================================================ STRATERA PAGE — UI MOCKUP ============================================================ */ .pa-str-hero-chips{ display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem; margin:0 auto 1.75rem;max-width:52rem; } .pa-str-chip{ display:inline-flex;align-items:center;gap:.625rem; padding:.75rem 1.1rem;border-radius:999px; background:linear-gradient(135deg,rgba(0,226,255,.06),rgba(0,63,245,.08)); border:1px solid rgba(0,226,255,.18); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); font-size:.8125rem;color:rgba(255,255,255,.75);font-weight:400; } .pa-str-chip svg{width:1rem;height:1rem;color:var(--pa-cyan);flex-shrink:0;filter:drop-shadow(0 0 10px rgba(0,226,255,.5))} .pa-str-chip b{color:#fff;font-weight:700} @media (max-width:760px){ .pa-str-hero-chips{flex-direction:column;align-items:stretch;gap:.5rem} .pa-str-chip{justify-content:flex-start;font-size:.75rem;padding:.625rem .9rem} } /* STRATERA MENU-BAR APP — faithful to live product */ .pa-str-mockup-section{padding:2rem 0 7rem;position:relative;overflow:hidden} .pa-str-window{ position:relative;width:min(34rem,100%);margin:0 auto;max-width:100%; border-radius:1.25rem;overflow:hidden; background:#05070d; border:1px solid rgba(255,255,255,.06); box-shadow: 0 50px 140px rgba(0,63,245,.45), 0 0 120px rgba(0,226,255,.22), inset 0 1px 0 rgba(255,255,255,.05); display:flex;flex-direction:column; } .pa-str-window::before{ content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px; background:linear-gradient(135deg,rgba(0,226,255,.45),transparent 35%,transparent 65%,rgba(0,63,245,.45)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; } /* TITLE BAR */ .pa-str-titlebar{ display:flex;align-items:center;justify-content:space-between; padding:.875rem 1rem; border-bottom:1px solid rgba(255,255,255,.06); } .pa-str-tb-brand{display:flex;align-items:center;gap:.625rem} .pa-str-tb-icon{ width:1.875rem;height:1.875rem;border-radius:.4rem; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,rgba(0,226,255,.22),rgba(0,63,245,.3)); border:1px solid rgba(0,226,255,.45); color:var(--pa-cyan);font-size:.8rem; box-shadow:0 0 18px rgba(0,226,255,.35); } .pa-str-tb-brand-text{line-height:1.1} .pa-str-tb-brand-name{font-size:.75rem;font-weight:700;letter-spacing:.16em;color:#fff} .pa-str-tb-brand-sub{font-size:.5625rem;color:rgba(255,255,255,.4);letter-spacing:.04em;margin-top:.125rem} .pa-str-tb-right{display:flex;align-items:center;gap:.625rem} .pa-str-tb-chip{ display:inline-flex;align-items:center;gap:.4rem; padding:.4rem .7rem;border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-size:.625rem;color:rgba(255,255,255,.7);font-weight:500; } .pa-str-tb-dot{width:.4rem;height:.4rem;border-radius:50%;background:#00ff9d;box-shadow:0 0 8px #00ff9d;animation:paBlink 2s ease-in-out infinite} @keyframes paBlink{0%,100%{opacity:1}50%{opacity:.4}} .pa-str-tb-power{ width:1.625rem;height:1.625rem;border-radius:.375rem; display:flex;align-items:center;justify-content:center; background:transparent;border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.5);cursor:pointer; } .pa-str-tb-power svg{width:.875rem;height:.875rem} /* BODY */ .pa-str-body{display:grid;grid-template-columns:minmax(0,12.5rem) 1fr;min-height:32rem} @media (max-width:760px){.pa-str-body{grid-template-columns:1fr;min-height:0}} /* LEFT COLUMN */ .pa-str-left{ padding:1rem .75rem; border-right:1px solid rgba(255,255,255,.05); background:rgba(0,0,0,.2); display:flex;flex-direction:column;gap:.5rem; } .pa-str-left-label{ font-size:.5625rem;font-weight:700;letter-spacing:.14em; color:rgba(255,255,255,.35);text-transform:uppercase; padding:0 .25rem; } .pa-str-params-label{ display:flex;align-items:center;justify-content:space-between; margin-top:.75rem; } .pa-str-params-refresh{display:inline-flex;align-items:center;gap:.3rem;color:rgba(255,255,255,.45)} .pa-str-params-refresh svg{width:.7rem;height:.7rem} .pa-str-params-refresh b{font-size:.6875rem;color:rgba(255,255,255,.85);font-weight:600} .pa-str-strategy{ display:flex;align-items:center;gap:.5rem; padding:.625rem .75rem;border-radius:.5rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:.6875rem;color:#fff;font-weight:500; cursor:default; } .pa-str-strategy-dot{ width:.4rem;height:.4rem;border-radius:50%; background:var(--pa-cyan);box-shadow:0 0 8px rgba(0,226,255,.8); flex-shrink:0; } .pa-str-strategy-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pa-str-chev{width:.75rem;height:.75rem;color:rgba(255,255,255,.4);flex-shrink:0} .pa-str-param-list{display:flex;flex-direction:column;gap:.125rem;overflow:hidden} .pa-str-param-item{ display:grid; grid-template-columns:.75rem .4rem .9rem 1fr auto .625rem; align-items:center;gap:.4rem; padding:.45rem .5rem;border-radius:.375rem; font-size:.625rem;color:rgba(255,255,255,.75); cursor:default;transition:background .2s; } .pa-str-param-item:hover{background:rgba(255,255,255,.03)} .pa-str-lock{color:rgba(255,255,255,.3);font-size:.55rem} .pa-str-param-dot{width:.3rem;height:.3rem;border-radius:50%;background:rgba(0,226,255,.5)} .pa-str-param-icon{color:rgba(255,255,255,.5);font-size:.7rem;text-align:center} .pa-str-param-name{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-weight:500; } .pa-str-param-count{ color:rgba(255,255,255,.45);font-size:.5625rem;font-weight:600; padding:.05rem .25rem;border-radius:.2rem; background:rgba(255,255,255,.04); } .pa-str-chev-sm{color:rgba(255,255,255,.35);font-size:.75rem;text-align:center;line-height:1} /* RIGHT COLUMN */ .pa-str-right{ padding:1rem 1.125rem; display:flex;flex-direction:column;gap:.625rem; min-width:0; } .pa-str-right-label{ font-size:.5625rem;font-weight:700;letter-spacing:.14em; color:rgba(255,255,255,.35);text-transform:uppercase; padding:0 .125rem;margin-bottom:.25rem; } .pa-str-target{ display:grid;grid-template-columns:1fr auto 4.25rem; align-items:center;gap:.625rem; font-size:.75rem; } .pa-str-target-name{color:rgba(255,255,255,.85);font-weight:500} .pa-str-minmax{ font-size:.5rem;font-weight:800;letter-spacing:.1em; padding:.2rem .4rem;border-radius:.25rem; background:rgba(0,226,255,.12); color:var(--pa-cyan); border:1px solid rgba(0,226,255,.25); } .pa-str-minmax.max{background:rgba(0,63,245,.18);color:#6aa8ff;border-color:rgba(0,63,245,.35)} .pa-str-input{ padding:.5rem .75rem;border-radius:.4rem; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); color:#fff;font-size:.75rem;font-weight:500; font-family:"SF Mono","Menlo",monospace; text-align:left; } .pa-str-optimize{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center;gap:.5rem; margin-top:.75rem;padding:.875rem 1rem; border:0;border-radius:.625rem;cursor:pointer; font-family:inherit;font-size:.875rem;font-weight:700;color:#fff; background: radial-gradient(120% 160% at 20% 20%,rgba(122,243,255,.4) 0%,rgba(122,243,255,0) 50%), radial-gradient(140% 180% at 80% 80%,#2f6bff 0%,rgba(47,107,255,0) 55%), linear-gradient(120deg,#00c8f0 0%,#1e88ff 50%,#003ff5 100%); background-size:200% 200%,220% 220%,180% 180%; background-position:0% 0%,100% 100%,0% 50%; animation:paCtaFlow 28s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(0,226,255,.55), 0 14px 40px rgba(0,63,245,.55), 0 0 60px rgba(0,226,255,.3), inset 0 1px 0 rgba(255,255,255,.35); } .pa-str-optimize::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.18) 50%,transparent 62%); background-size:260% 100%; animation:paCtaSheen 11s linear infinite;pointer-events:none; } .pa-str-optimize-bolt{width:1rem;height:1rem;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))} .pa-str-notrials{ text-align:center;color:rgba(255,255,255,.25); font-size:.6875rem;padding:2.5rem 0 .5rem; letter-spacing:.02em; } /* STATUS BAR */ .pa-str-statusbar{ display:flex;align-items:center;gap:.5rem; padding:.625rem 1rem; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.35); font-size:.625rem;color:rgba(255,255,255,.4); letter-spacing:.02em; } .pa-str-idle-dot{width:.375rem;height:.375rem;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 6px rgba(255,255,255,.25);animation:paBlink 3s ease-in-out infinite} /* DOWNLOAD CARD */ .pa-str-download{padding:7rem 0 4rem;position:relative} .pa-str-dw-card{ max-width:32rem;margin:2rem auto 0;padding:2rem 2rem 1.75rem; background:rgba(255,255,255,.035); border:1px solid rgba(0,226,255,.22); border-radius:1.25rem; backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:0 40px 100px rgba(0,63,245,.3),0 0 80px rgba(0,226,255,.1); display:flex;flex-direction:column;gap:1rem;position:relative; } .pa-str-dw-card label{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pa-mute)} .pa-str-dw-card input{ width:100%;padding:1rem 1.125rem;border-radius:.75rem; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); color:#fff;font-family:inherit;font-size:.9375rem;outline:0; transition:border-color .25s,box-shadow .25s; } .pa-str-dw-card input:focus{border-color:var(--pa-cyan);box-shadow:0 0 0 3px rgba(0,226,255,.15)} .pa-str-dw-button{width:100%;position:relative} .pa-str-dw-button.is-loading{opacity:.78;cursor:progress} .pa-str-dw-button[disabled]{cursor:not-allowed} .pa-str-dw-status{ font-size:.8125rem;line-height:1.5; padding:.75rem .9375rem;border-radius:.625rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.85); text-align:center; } .pa-str-dw-status[data-kind="error"]{ background:rgba(255,80,80,.08); border-color:rgba(255,80,80,.32); color:#ffb4b4; } .pa-str-dw-status[data-kind="success"]{ background:rgba(0,226,255,.08); border-color:rgba(0,226,255,.32); color:#9ef0ff; } .pa-str-dw-status-head{display:inline-block;font-weight:700} .pa-str-dw-status-hint{ display:inline-block;margin-top:.375rem; font-size:.75rem;line-height:1.5;font-weight:400; color:rgba(158,240,255,.78); } .pa-str-dw-status-hint b{color:#fff;font-weight:600} .pa-str-dw-bullets{display:flex;flex-direction:column;gap:.625rem;margin-top:.25rem} .pa-str-dw-bullet{ display:flex;flex-direction:column;gap:.125rem; padding:.75rem .875rem;border-radius:.625rem; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); } .pa-str-dw-bullet b{font-size:.8125rem;color:#fff;font-weight:700} .pa-str-dw-bullet span{font-size:.75rem;color:var(--pa-mute)} .pa-str-dw-footer{display:flex;justify-content:center;gap:.5rem;font-size:.6875rem;color:rgba(255,255,255,.4);padding-top:.75rem;border-top:1px solid rgba(255,255,255,.05)} .pa-str-dw-notice{text-align:center;font-size:.75rem;color:var(--pa-mute)} .pa-str-dw-notice a{color:var(--pa-cyan);font-weight:600} /* ============================================================ DOCS PAGE ============================================================ */ .pa-docs{padding:3rem 0 7rem;position:relative;background:transparent} .pa-docs::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(55rem 28rem at 50% 0%,rgba(0,226,255,.05),transparent 60%), radial-gradient(45rem 24rem at 80% 100%,rgba(0,63,245,.06),transparent 60%)} .pa-docs > .pa-container{position:relative;z-index:1} .pa-docs-block{margin:0 auto 5rem;max-width:60rem} .pa-docs-block .pa-h2{margin-top:.75rem} .pa-docs-block > .pa-sub{margin-top:.875rem} .pa-docs-steps{list-style:none;padding:0;margin:1.5rem 0 0;counter-reset:docs-step;display:flex;flex-direction:column;gap:1rem} .pa-docs-steps li{ counter-increment:docs-step;position:relative; padding:1.125rem 1.25rem 1.125rem 3.75rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:.875rem;backdrop-filter:blur(10px); font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.8); } .pa-docs-steps li::before{ content:counter(docs-step); position:absolute;left:1rem;top:1rem; width:1.875rem;height:1.875rem;border-radius:50%; background:linear-gradient(135deg,rgba(0,226,255,.2),rgba(0,63,245,.25)); border:1px solid rgba(0,226,255,.4); color:var(--pa-cyan);font-weight:700;font-size:.8125rem; display:flex;align-items:center;justify-content:center; box-shadow:0 0 20px rgba(0,226,255,.25); } .pa-docs-steps b{color:#fff} .pa-docs-steps a{color:var(--pa-cyan)} .pa-docs-table{margin-top:1.25rem;display:flex;flex-direction:column;gap:.5rem} .pa-docs-row{ display:grid;grid-template-columns:12rem 1fr;gap:1rem; padding:1rem 1.25rem;border-radius:.75rem; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); font-size:.875rem; } @media (max-width:680px){.pa-docs-row{grid-template-columns:1fr;gap:.25rem}} .pa-docs-row b{color:#fff;font-weight:700} .pa-docs-row span{color:var(--pa-mute);line-height:1.55} .pa-docs-ul{list-style:none;padding:0;margin:1.25rem 0 0;display:flex;flex-direction:column;gap:.625rem} .pa-docs-ul li{ padding:.75rem 1rem;border-radius:.625rem; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.8); } .pa-docs-ul b{color:#fff} .pa-docs-ul a{color:var(--pa-cyan)} .pa-docs-block .pa-faq-list{margin-top:1.5rem} .pa-docs-block code{font-family:"SF Mono","Menlo",monospace;font-size:.8125rem;background:rgba(0,226,255,.08);color:var(--pa-cyan);padding:.1rem .375rem;border-radius:.25rem} .pa-docs-h3{ margin:2rem 0 .5rem; font-size:1.0625rem;font-weight:700;color:#fff; letter-spacing:-.005em; padding-left:.75rem; border-left:2px solid transparent; border-image:linear-gradient(180deg,var(--pa-cyan),var(--pa-blue)) 1; } /* PRICING PAGE — desktop defaults */ .pa-pricing-hero{padding:11rem 0 3rem;text-align:center} .pa-pricing-hero .pa-sub{margin:1.125rem auto 0} .pa-pricing-main{padding:3rem 0 7rem} @media (max-width:760px){ .pa-str-hero-stats{gap:1rem;padding:.75rem 1rem;flex-wrap:wrap;justify-content:center} .pa-str-stat b{font-size:1.125rem} .pa-str-dw-card{padding:1.5rem 1.25rem} .pa-docs-block{margin-bottom:3.5rem} /* Pricing page mobile polish */ .pa-pricing-hero{padding:6.5rem 0 1.5rem} .pa-pricing-hero .pa-eyebrow{ font-size:.625rem;padding:.375rem .75rem;letter-spacing:.1em; white-space:nowrap; } .pa-pricing-hero .pa-h1{font-size:clamp(2.5rem,11vw,3.5rem);line-height:1} .pa-pricing-hero .pa-sub{font-size:.875rem;line-height:1.5;max-width:22rem;padding:0 .5rem} .pa-pricing-main{padding:1.5rem 0 4rem} .pa-price-grid{gap:1rem} .pa-price-card{padding:1.75rem 1.5rem;border-radius:1rem} .pa-price-card.pa-featured{transform:none;margin-top:.875rem} .pa-price-card h3{font-size:.75rem;letter-spacing:.14em;margin-bottom:.5rem} .pa-price-num{font-size:3.25rem;line-height:1} .pa-price-per{font-size:.9375rem} .pa-price{margin-bottom:1.25rem} .pa-price-card ul{gap:.5rem;margin-bottom:1.5rem} .pa-price-card li{font-size:.8125rem} .pa-popular{font-size:.625rem;padding:.35rem .875rem} .pa-price-footer{margin-top:2rem} .pa-price-footer .pa-eyebrow{font-size:.625rem;padding:.375rem .75rem;white-space:nowrap} .pa-disclaimer{font-size:.625rem;padding:0 1rem} /* Stratera mockup mobile fit */ .pa-str-mockup-section .pa-container{padding:0 1rem} .pa-str-window{width:100%} .pa-str-titlebar{padding:.75rem .875rem} .pa-str-tb-brand-name{font-size:.6875rem} .pa-str-tb-chip{padding:.35rem .6rem;font-size:.5625rem} .pa-str-left,.pa-str-right{padding:.875rem} .pa-str-left{border-right:0;border-bottom:1px solid rgba(255,255,255,.05)} .pa-str-target{grid-template-columns:1fr auto 3.5rem;gap:.5rem} .pa-str-target-name{font-size:.75rem} .pa-str-input{padding:.45rem .6rem;font-size:.6875rem} .pa-str-param-item{ grid-template-columns:.6rem .3rem .75rem 1fr auto .5rem; gap:.3rem;padding:.4rem .4rem;font-size:.5875rem; } .pa-str-statusbar{padding:.5rem .875rem} } /* ============================================================ MOBILE AUDIT ============================================================ */ html,body{max-width:100vw;overflow-x:hidden} .pa-v7-wrapper{max-width:100vw;overflow-x:hidden} @media (max-width:960px){ .pa-grid-4{grid-template-columns:repeat(2,1fr)} .pa-grid-3{grid-template-columns:repeat(2,1fr)} .pa-carousel{grid-template-columns:repeat(2,1fr)} } @media (max-width:768px){ .pa-v7-wrapper .pa-container{padding:0 1.25rem} .pa-nav-inner{ height:3.75rem; display:flex; grid-template-columns:none; justify-content:space-between; align-items:center; } .pa-nav-inner .pa-brand{justify-self:auto} .pa-nav-inner .pa-burger{justify-self:auto;margin-left:auto} .pa-brand-img{height:1.35rem} /* LIQUID FROSTED-GLASS MOBILE OVERLAY */ .pa-burger{display:flex;position:relative;z-index:110} .pa-nav-cta{display:none} .pa-nav-links{ position:fixed;top:0;left:0; width:100vw;height:100vh;height:100dvh;z-index:105; display:flex;flex-direction:column;justify-content:center;align-items:center; gap:.5rem; background:rgba(4,6,12,.62); backdrop-filter:blur(34px) saturate(180%); -webkit-backdrop-filter:blur(34px) saturate(180%); padding:5rem 2rem 4rem; opacity:0;pointer-events:none; transform:scale(1.015); transition: opacity .55s cubic-bezier(.22,.8,.25,1), transform .75s cubic-bezier(.22,.8,.25,1), backdrop-filter .6s cubic-bezier(.22,.8,.25,1); will-change:opacity,transform,backdrop-filter; } .pa-nav-links::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(45rem 32rem at 50% 15%,rgba(0,63,245,.35),transparent 65%), radial-gradient(38rem 28rem at 50% 100%,rgba(0,226,255,.22),transparent 65%), linear-gradient(180deg,rgba(4,6,12,.25),transparent 40%,rgba(4,6,12,.35)); } .pa-nav-links::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px); background-size:3rem 3rem; mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%); } .pa-nav.pa-nav-open .pa-nav-links{ opacity:1;pointer-events:auto;transform:scale(1); } .pa-nav-links a{ position:relative;z-index:1; padding:.75rem 1.5rem; font-family:"Avenir Next","Avenir","Helvetica Neue",system-ui,sans-serif; font-size:2.4rem;font-weight:200;letter-spacing:-.01em;line-height:1.1; color:rgba(255,255,255,.92); -webkit-text-fill-color:rgba(255,255,255,.92); transition: letter-spacing .5s cubic-bezier(.22,.8,.25,1), color .35s cubic-bezier(.22,.8,.25,1), transform .5s cubic-bezier(.22,.8,.25,1); opacity:0;transform:translateY(22px) scale(.98); border-bottom:0; } .pa-nav-links a::after{ content:"";position:absolute;left:50%;bottom:.55rem; width:0;height:1px; background:linear-gradient(90deg,transparent,var(--pa-cyan),transparent); transform:translateX(-50%); transition:width .45s cubic-bezier(.22,.8,.25,1),opacity .35s; opacity:0; } .pa-nav-links a:hover::after,.pa-nav-links a:active::after{width:4rem;opacity:1} .pa-nav.pa-nav-open .pa-nav-links a{opacity:1;transform:translateY(0) scale(1)} .pa-nav.pa-nav-open .pa-nav-links a:nth-child(1){transition:opacity .6s .12s cubic-bezier(.22,.8,.25,1),transform .75s .12s cubic-bezier(.22,.8,.25,1)} .pa-nav.pa-nav-open .pa-nav-links a:nth-child(2){transition:opacity .6s .19s cubic-bezier(.22,.8,.25,1),transform .75s .19s cubic-bezier(.22,.8,.25,1)} .pa-nav.pa-nav-open .pa-nav-links a:nth-child(3){transition:opacity .6s .26s cubic-bezier(.22,.8,.25,1),transform .75s .26s cubic-bezier(.22,.8,.25,1)} .pa-nav.pa-nav-open .pa-nav-links a:nth-child(4){transition:opacity .6s .33s cubic-bezier(.22,.8,.25,1),transform .75s .33s cubic-bezier(.22,.8,.25,1)} .pa-nav.pa-nav-open .pa-nav-links a:nth-child(5){transition:opacity .6s .40s cubic-bezier(.22,.8,.25,1),transform .75s .40s cubic-bezier(.22,.8,.25,1)} .pa-nav-links a:hover,.pa-nav-links a:active{ color:transparent;-webkit-text-fill-color:transparent; background:linear-gradient(120deg,#00e2ff 0%,#7af3ff 25%,#1e88ff 55%,#003ff5 100%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text; letter-spacing:0; } /* MOBILE OVERLAY FOOTER — sits below the link list when menu is open. CTA + USA badge + tagline. Staggered reveal matches the link entry. */ .pa-nav-links .pa-nav-mobile-foot{ display:flex;flex-direction:column;align-items:center;gap:1.25rem; margin-top:2.25rem;padding-top:2rem; width:100%;max-width:22rem; border-top:1px solid rgba(0,226,255,.10); position:relative;z-index:1; opacity:0;transform:translateY(18px); transition:opacity .6s .55s cubic-bezier(.22,.8,.25,1), transform .75s .55s cubic-bezier(.22,.8,.25,1); } .pa-nav.pa-nav-open .pa-nav-mobile-foot{opacity:1;transform:translateY(0)} /* Higher specificity (.pa-nav-links a.pa-nav-mobile-cta) needed to win against the .pa-nav-links a base rule which sets font-size: 2.4rem for the headline-style nav links. We restore proper CTA proportions. */ .pa-nav-links a.pa-nav-mobile-cta{ width:auto;max-width:none; padding:.85rem 1.6rem; font-family:"Avenir Next","Avenir","Helvetica Neue",system-ui,sans-serif; font-size:.875rem;font-weight:700;letter-spacing:.02em;line-height:1; color:#000814; -webkit-text-fill-color:#000814; background:linear-gradient(120deg,#00e2ff 0%,#1e88ff 25%,#003ff5 50%,#1e88ff 75%,#00e2ff 100%); background-size:200% 100%; background-clip:border-box; -webkit-background-clip:border-box; border:0;border-radius:.75rem; box-shadow: 0 8px 26px rgba(0,226,255,.3), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 32px rgba(0,63,245,.18); text-align:center; animation:paNavCtaFlow 18s linear infinite; /* Cancel the link cascade entry transition so the CTA inherits the parent .pa-nav-mobile-foot transition instead and arrives in sync with the USA badge / tagline. */ transform:none;opacity:1; transition:box-shadow .35s ease,transform .35s ease; } @keyframes paNavCtaFlow{ from{background-position:0% 50%} to{background-position:200% 50%} } .pa-nav-links a.pa-nav-mobile-cta:hover, .pa-nav-links a.pa-nav-mobile-cta:active{ transform:translateY(-1px); box-shadow: 0 12px 36px rgba(0,226,255,.42), 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 50px rgba(0,63,245,.28); color:#000814; -webkit-text-fill-color:#000814; background:linear-gradient(120deg,#00e2ff 0%,#1e88ff 50%,#003ff5 100%); -webkit-background-clip:border-box;background-clip:border-box; letter-spacing:.02em; } .pa-nav-mobile-trust{ display:inline-flex;align-items:center;gap:.55rem; padding:.4rem .8rem;border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); font-size:.65rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); } .pa-nav-mobile-flag{ width:1.05rem;height:.58rem; border-radius:1px;flex-shrink:0;display:block; box-shadow:0 0 0 1px rgba(255,255,255,.06); opacity:.92; } .pa-nav-mobile-tagline{ font-size:.8125rem;line-height:1.5; color:rgba(255,255,255,.55); margin:0;text-align:center;font-weight:300; max-width:18rem; text-wrap:balance; } .pa-nav-mobile-tagline b{ color:rgba(255,255,255,.92);font-weight:600; /* Keep "One membership." atomic — when it doesn't fit on the current line, the whole phrase wraps as a unit so the second line never starts mid-phrase. */ white-space:nowrap; } .pa-hero{ padding:7rem 0 2rem; /* tone down the radial halos on mobile — desktop values are too intense at narrow widths */ background: radial-gradient(40rem 22rem at 50% -10%,rgba(0,63,245,.26),transparent 65%), radial-gradient(30rem 18rem at 50% 100%,rgba(0,226,255,.1),transparent 65%), var(--pa-black); background-size:200% 200%,200% 200%,100% 100%; } .pa-hero::before{opacity:.35;filter:blur(60px)} .pa-hero::after{opacity:.5} .pa-hero .pa-bg-orb{width:18rem;height:18rem;filter:blur(80px);opacity:.55} .pa-hero .pa-bg-orb.cyan{top:-4rem;left:-6rem} .pa-hero .pa-bg-orb.blue{bottom:-8rem;right:-6rem} .pa-hero .pa-eyebrow,.pa-pricing .pa-eyebrow,.pa-section-head .pa-eyebrow{ font-size:.6rem;padding:.35rem .7rem;letter-spacing:.1em; } .pa-h1{font-size:clamp(2.6rem,11vw,3.75rem);line-height:.98;letter-spacing:-.025em} .pa-h1 .thin,.pa-h2 .thin{font-size:.6em;margin-top:.35em} /* Homepage hero specifically: keep "Automate Your Edge" on a single line on mobile, matching the original Webflow site. Tighter clamp ensures the gradient line fits inside the container with comfortable side-margins on every common mobile width (320–430px). */ .pa-hero-headline{ font-size:clamp(1.4rem,6.25vw,2.875rem); line-height:1; letter-spacing:-.025em; text-align:center; width:100%; margin-left:auto;margin-right:auto; padding-left:.5rem;padding-right:.5rem; } .pa-hero-headline .cyan{ display:block; width:100%; text-align:center; white-space:nowrap; } .pa-hero-headline .thin{font-size:.66em;margin-top:.4em;text-align:center} .pa-h2{font-size:clamp(1.85rem,7.5vw,2.6rem);line-height:1.05} .pa-sub{font-size:.875rem;line-height:1.55;padding:0 .25rem} .pa-hero-inner{max-width:100%} /* Override the desktop inline-grid (3 max-content cols overflows on mobile). Switch to single-column grid so each badge gets its own row, perfectly centered, never cut off by the viewport edge. */ .pa-badges{ display:grid;grid-template-columns:1fr; justify-items:center; gap:.625rem; width:100%;max-width:none; padding:0 .5rem; } .pa-badge{width:auto;font-size:.75rem;padding:.55rem 1rem} .pa-cta{width:auto;max-width:none;padding:.95rem 1.75rem;font-size:.875rem;border-radius:.75rem} .pa-hero .pa-cta{padding:1rem 2rem} .pa-grid-4,.pa-grid-3,.pa-grid-2,.pa-carousel{grid-template-columns:1fr;gap:1rem} .pa-pain,.pa-features,.pa-social,.pa-pricing,.pa-gallery,.pa-faq{padding:4rem 0} .pa-section-head{margin-bottom:2.5rem} .pa-close{padding:5rem 0} .pa-card,.pa-feature,.pa-testimonial{padding:1.5rem 1.25rem} .pa-feature h3{font-size:1.125rem} .pa-price-card{padding:2rem 1.5rem} .pa-price-card.pa-featured{transform:none} .pa-price-num{font-size:3rem} .pa-checkout-trust{padding:1rem 1.25rem;margin:1.5rem auto 1rem;max-width:100%} .pa-pay-badges{gap:1rem;row-gap:.9rem;justify-content:center} .pa-pay-badges img{height:1rem;max-width:none} .pa-checkout{padding:3rem 0} .pa-checkout .pa-checkout-trust{margin:0 auto} .pa-checkout-label{font-size:.625rem} /* sub-page hero padding override — targets inline styles */ .pa-hero[style*="200px"]{padding:7rem 0 3rem!important} .pa-hero[style*="220px"]{padding:7rem 0 3rem!important} /* Generic sub-page hero h1 — tighter than the desktop default but still large. Excluded for the homepage hero which uses the .pa-hero-headline override below (single-line "Automate Your Edge"). */ .pa-hero .pa-h1:not(.pa-hero-headline){font-size:clamp(2.25rem,10vw,3.25rem)} .pa-hero .pa-h1:not(.pa-hero-headline) .thin{font-size:.58em} /* Homepage hero override (higher specificity than .pa-hero .pa-h1 above so this actually wins on the homepage). Single-line size that fits 'Automate Your Edge' edge-to-edge on every common mobile width. */ .pa-hero .pa-hero-headline{ font-size:clamp(1.4rem,6.25vw,2.875rem); line-height:1; letter-spacing:-.025em; } .pa-hero .pa-hero-headline .cyan{ display:block;width:100%; text-align:center;white-space:nowrap; } .pa-hero .pa-hero-headline .thin{font-size:.66em;margin-top:.4em} /* generic sub-page section spacing */ section[class*="pa-"]{padding-left:0;padding-right:0} .pa-section-head{margin-bottom:2rem} .pa-section-head .pa-h2{font-size:clamp(1.625rem,6.5vw,2.25rem)} /* features/stratera feature cards tighter */ .pa-feature{padding:1.5rem 1.25rem} .pa-feature h3{font-size:1.0625rem;line-height:1.3} .pa-feature p{font-size:.875rem;line-height:1.55} .pa-feat-icon{width:2.75rem;height:2.75rem;font-size:1.2rem;margin-bottom:.875rem} .pa-report{padding:2rem 0 4rem} .pa-report-frame{padding:.5rem;border-radius:1rem} .pa-report-frame img{border-radius:.75rem} .pa-logos{padding:2rem 0} .pa-marquee-track{gap:2.25rem;animation-duration:45s} .pa-logo-img{height:1.4rem} .pa-foot .pa-container{flex-direction:column;text-align:center} .pa-foot-links{justify-content:center;flex-wrap:wrap} .pa-faq-list summary{font-size:.9375rem} } @media (max-width:420px){ .pa-h1{font-size:2.125rem} .pa-h2{font-size:1.625rem} .pa-badges{flex-direction:column} .pa-marquee-track{gap:1.75rem} } /* The chatbot widget now mounts via /chatbot-ui/paradox-chat.js with its own self-contained styling. The previous Elfsight-targeted halo animations (paChatGlowSpin/paChatGlowPulse + body::before/::after) were removed to avoid double-glow stacking and reduce overall motion. */ /* ============================================================ THANK YOU PAGE — section utilities Standard ambient blend matching the rest of the site so cards never sit naked against section edges. ============================================================ */ .pa-ty-section{ padding:5rem 0;background:transparent;position:relative; } .pa-ty-section::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60rem 28rem at 50% 50%,rgba(0,226,255,.06),transparent 65%); } .pa-ty-section.pa-ty-confirm::before{ background:radial-gradient(50rem 24rem at 50% 0%,rgba(0,226,255,.09),transparent 60%); } .pa-ty-section.pa-ty-stratera::before{ background:radial-gradient(45rem 22rem at 80% 50%,rgba(0,63,245,.12),transparent 65%); } .pa-ty-confirm-grid{max-width:64rem;margin:0 auto;padding:1rem 0 0} .pa-ty-confirm-card{padding:2rem 1.625rem;text-align:center;display:flex;flex-direction:column;align-items:center} .pa-ty-confirm-card .pa-eyebrow{font-size:.7rem;margin-bottom:.875rem} .pa-ty-confirm-card h3{font-size:1.125rem;font-weight:700;margin-bottom:.625rem;line-height:1.25;color:#fff} .pa-ty-confirm-card p{font-size:.875rem;line-height:1.65;color:var(--pa-text);margin-bottom:1.125rem;flex-grow:1} .pa-ty-confirm-card p:last-child{margin-bottom:0} .pa-ty-confirm-card .pa-cta{margin-top:auto} .pa-ty-fineprint{font-size:.75rem;color:rgba(255,255,255,.5);margin:0} .pa-ty-tier-pill{ display:inline-flex;align-items:center;gap:.5rem; padding:.5rem 1rem;border-radius:999px; border:1px solid rgba(0,226,255,.25); background:linear-gradient(135deg,rgba(0,226,255,.1),rgba(0,63,245,.12)); color:var(--pa-cyan);font-size:.75rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;backdrop-filter:blur(12px); margin-bottom:1.25rem; } .pa-ty-stratera-card{max-width:60rem;margin:0 auto;padding:3rem 2.5rem;text-align:center} .pa-ty-included-grid{max-width:72rem;margin:0 auto} .pa-ty-included-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;font-size:.875rem;color:rgba(255,255,255,.85)} .pa-ty-included-list li{line-height:1.5} .pa-ty-included-list a{color:var(--pa-cyan)} @media (max-width:760px){ .pa-ty-section{padding:3.5rem 0} .pa-ty-stratera-card{padding:2.25rem 1.5rem} .pa-ty-confirm-card{padding:1.75rem 1.375rem} } /* ============================================================ MOBILE FOOTER POLISH — center logo, brand text, social row, and column links on small screens for proper visual balance. ============================================================ */ @media (max-width:560px){ .pa-foot-brand{align-items:center;text-align:center;gap:1rem} .pa-foot-brand p{margin-left:auto;margin-right:auto;max-width:24rem} .pa-foot-socials{justify-content:center;width:100%} .pa-foot-col{text-align:center} .pa-foot-col h4{margin-bottom:1rem} .pa-foot-col ul{align-items:center} .pa-foot-col a{display:inline-block} .pa-foot-news p{margin-left:auto;margin-right:auto} .pa-foot-form{margin-left:auto;margin-right:auto} .pa-foot-news ul{align-items:center} } /* ============================================================ PRICING CARD ORDER — mobile-only reorder so users see tier contents in logical sequence: Core ($60) → Pro Monthly ($90) → Yearly Pro ($270, anchor) This way "Everything in Pro Monthly" makes sense (Pro Monthly was just shown above), and the price ladder primes the value of locking in $270/yr vs $1080/yr monthly billing. Desktop preserves Yearly-Pro-in-middle for visual anchor. ============================================================ */ @media (max-width:980px){ .pa-price-grid-3 .pa-price-card:nth-child(1){order:1} /* Core (left) → 1st */ .pa-price-grid-3 .pa-price-card:nth-child(2){order:3} /* Yearly Pro (mid) → 3rd */ .pa-price-grid-3 .pa-price-card:nth-child(3){order:2} /* Pro Monthly (right)→ 2nd */ } /* ============================================================ ASCII SHADER — subtle refinement Slightly soften the maximum opacity, add a gentle radial mask so shaders fade toward edges (less hard cropping at viewport boundaries), and tighten contrast so they read as ambient texture rather than competing with hero text. ============================================================ */ .pa-ascii-shader{ opacity:.32; /* slight softening from existing default */ mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 55%,transparent 95%); -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 55%,transparent 95%); filter:contrast(.95) saturate(.85); transition:opacity 1.2s ease; } .pa-ascii-shader[data-variant="orderbook"]{opacity:.42} .pa-ascii-shader[data-variant="heatmap"]{opacity:.35} .pa-ascii-shader[data-variant="tape"]{opacity:.36} .pa-ascii-shader[data-variant="candles"]{opacity:.34} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .pa-marquee-track{animation:none!important} .pa-ascii-shader{opacity:.18!important} }