/* ApeLogic Landing Pages — v7: Virayo-style layout system Strict rules: - ONE container width, ONE section padding everywhere - Section headers ALWAYS centered (eyebrow + h2 + sub) - Content rows alternate left/right, equal-height, vertically centered - Scrolling logo marquee */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --bg: hsl(30, 5%, 10%); --bg-deep: hsl(30, 5%, 6%); --fg: hsl(30, 10%, 92%); --card: hsl(30, 6%, 14%); --primary: hsl(28, 85%, 52%); --primary-dark: hsl(25, 80%, 45%); --primary-fg: hsl(30, 5%, 8%); --secondary: hsl(30, 5%, 18%); --secondary-fg: hsl(30, 10%, 85%); --muted-fg: hsl(30, 8%, 68%); --surface: hsl(30, 6%, 16%); --border: hsl(28, 85%, 52% / .25); --border-hover: hsl(28, 85%, 52% / .4); --gold: linear-gradient(135deg, hsl(28, 85%, 52%) 0%, hsl(25, 80%, 45%) 100%); --glow: 0 0 50px hsl(28, 85%, 52% / .25); --glow-lg: 0 0 80px hsl(28, 85%, 52% / .3); --shadow-card: 0 4px 24px hsl(0, 0%, 0% / .5); --radius: .6rem; --font: 'Inter', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* THE layout constants — used everywhere, no exceptions */ --maxw: 1120px; --section-pad: 6rem; /* vertical padding on every section */ --gap: 4rem; /* gap in alternating rows */ } html{scroll-behavior:smooth} body{ font-family:var(--font);font-size:16px;line-height:1.65; color:var(--muted-fg); background: radial-gradient(ellipse 1400px 900px at 50% 0%, hsl(28,75%,22%/.55) 0%, hsl(28,65%,16%/.25) 25%, transparent 50%), radial-gradient(ellipse 1100px 700px at 90% 35%, hsl(28,70%,20%/.30) 0%, transparent 55%), radial-gradient(ellipse 1100px 700px at 10% 65%, hsl(28,70%,20%/.30) 0%, transparent 55%), radial-gradient(ellipse 1400px 900px at 50% 100%, hsl(28,75%,22%/.50) 0%, hsl(28,65%,16%/.20) 30%, transparent 55%), var(--bg); background-attachment:fixed; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.03em;color:var(--fg);line-height:1.12} /* ═══════════ THE CONTAINER — one width everywhere ═══════════ */ .container{width:min(100% - 3rem, var(--maxw));margin-inline:auto} /* ═══════════ THE SECTION — one rhythm everywhere ═══════════ */ .section{padding:var(--section-pad) 0;border-top:1px solid var(--border)} .section:first-of-type{border-top:none} /* Centered section header — ALWAYS centered, same treatment */ .sec-head{max-width:760px;margin:0 auto 3.5rem;text-align:center} .sec-head .eyebrow{ font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--primary);margin-bottom:1rem; } .sec-head h2{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;margin-bottom:1rem} .sec-head p{font-size:1.1rem;color:var(--muted-fg);line-height:1.6} /* ═══════════ NAV ═══════════ */ .site-nav{ position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border); background:hsl(30,5%,10%/.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); } .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0} .nav-logo img{height:28px;width:auto} .nav-right{display:flex;gap:.75rem;align-items:center} .nav-cta{display:inline-flex;align-items:center;padding:.6rem 1.3rem;border-radius:var(--radius);font-size:.875rem;font-weight:600;transition:all .25s} .nav-cta-primary{background:var(--gold);color:var(--primary-fg);box-shadow:var(--glow)} .nav-cta-primary:hover{filter:brightness(1.1);box-shadow:var(--glow-lg);color:var(--primary-fg)} .nav-cta-ghost{background:transparent;border:1px solid var(--border);color:var(--fg)} .nav-cta-ghost:hover{border-color:var(--border-hover);color:#fff} /* ═══════════ HERO — centered, like Virayo ═══════════ */ .hero{position:relative;padding:6rem 0 3rem;text-align:center;overflow:hidden} .hero::before{ content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%); width:900px;height:700px;background:radial-gradient(ellipse at 50% 30%, hsl(28,85%,52%/.13) 0%, transparent 55%); pointer-events:none;z-index:-1; } .hero .eyebrow{ font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--primary);margin-bottom:1.5rem; } .hero h1{font-size:clamp(2.5rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;max-width:900px;margin:0 auto 1.5rem} .hero .sub{font-size:1.2rem;line-height:1.6;color:var(--muted-fg);max-width:680px;margin:0 auto 2.5rem} .hero .cta-group{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:center} /* hero product visual sits centered below */ .hero-visual{width:min(100% - 3rem, 880px);margin:3.5rem auto 0} /* ═══════════ BUTTONS ═══════════ */ .btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.9rem;border-radius:var(--radius);font-weight:700;font-size:.95rem;transition:all .25s;cursor:pointer;border:none;letter-spacing:-.01em} .btn-primary{background:var(--gold);color:var(--primary-fg);box-shadow:var(--glow)} .btn-primary:hover{filter:brightness(1.12);box-shadow:var(--glow-lg);color:var(--primary-fg);transform:translateY(-1px)} .btn-secondary{background:transparent;color:var(--fg);border:1px solid var(--border)} .btn-secondary:hover{border-color:var(--border-hover);color:#fff} .btn-lg{padding:1rem 2.5rem;font-size:1.1rem} /* ═══════════ SCROLLING LOGO MARQUEE ═══════════ */ .marquee{overflow:hidden;padding:2.5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative} .marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none} .marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)} .marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)} .marquee-label{text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:1.5rem} .marquee-track{display:flex;gap:3.5rem;width:max-content;animation:scroll-x 30s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-item{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;color:var(--secondary-fg);white-space:nowrap;opacity:.7;transition:opacity .2s} .marquee-item:hover{opacity:1} .marquee-item svg{width:20px;height:20px;color:var(--primary);flex-shrink:0} @keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* marquee runs regardless of reduce-motion (client wants the scroll); slowed for comfort */ /* ═══════════ ALTERNATING ROW — equal height, vertically centered ═══════════ */ .row{ display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center; max-width:var(--maxw);margin:0 auto; } .row + .row{margin-top:5rem} .row.flip .row-media{order:-1} /* image on left */ .row-copy .eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:.85rem} .row-copy h3{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;margin-bottom:1rem} .row-copy p{font-size:1.02rem;color:var(--muted-fg);line-height:1.65;margin-bottom:1rem} .row-copy ul{list-style:none;padding:0;margin-top:1rem} .row-copy li{position:relative;padding-left:1.5rem;margin-bottom:.7rem;font-size:.95rem;color:var(--muted-fg)} .row-copy li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--primary)} /* media side fills the row equally */ .row-media{align-self:stretch;display:flex} .row-media > *{width:100%;align-self:center} @media(max-width:860px){ .row{grid-template-columns:1fr;gap:2rem} .row.flip .row-media{order:0} .row + .row{margin-top:3.5rem} } /* ═══════════ CARD GRID (centered header + grid) ═══════════ */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;max-width:var(--maxw);margin-inline:auto} .card{padding:1.85rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);transition:all .3s ease} .card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-card);transform:translateY(-3px)} .card .icon{width:44px;height:44px;border-radius:.5rem;background:hsl(28,60%,16%);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem} .card .icon svg{width:22px;height:22px;color:var(--primary)} .card .num{font-family:var(--mono);font-size:.7rem;color:var(--primary);font-weight:600;letter-spacing:.08em;margin-bottom:.6rem} .card h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem} .card p{font-size:.9rem;color:var(--muted-fg);line-height:1.65} /* ═══════════ MEDIA COMPONENTS (the visuals) ═══════════ */ /* chat mock */ .chat-mock{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-deep);overflow:hidden;box-shadow:var(--shadow-card)} .chat-row{padding:1.1rem 1.25rem;border-bottom:1px solid var(--border)} .chat-row:last-child{border-bottom:none} .chat-role{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.05em;color:var(--primary);text-transform:uppercase;margin-bottom:.6rem} .chat-file{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--border);border-radius:.35rem;padding:.35rem .7rem;font-family:var(--mono);font-size:.78rem;color:var(--fg);background:hsl(30,5%,12%);margin-bottom:.6rem} .chat-file svg{width:13px;height:13px;color:var(--primary)} .chat-text{font-family:var(--mono);font-size:.82rem;color:var(--secondary-fg);line-height:1.6} .chat-code{background:hsl(28,60%,14%);border-radius:.35rem;padding:.85rem 1rem;margin-top:.2rem;font-family:var(--mono);font-size:.78rem;line-height:1.7;color:hsl(28,90%,68%);white-space:pre;overflow-x:auto;text-align:left;min-height:11.5em} .chat-code .kw{color:hsl(28,90%,60%);font-weight:500} .chat-code .dim{color:var(--muted-fg)} .chat-text{text-align:left;min-height:1.6em} /* typing cursor */ .type-cursor{display:inline-block;width:.55ch;background:var(--primary);color:transparent;animation:blink 1s steps(1) infinite;margin-left:1px} @keyframes blink{50%{opacity:0}} @media(prefers-reduced-motion:reduce){.type-cursor{animation:none}} /* scene image card */ .scene-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow-card)} .scene-card img{width:100%;display:block;border-bottom:1px solid var(--border);background:hsl(30,7%,11%)} /* UI mockup */ .ui-mock{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-card);overflow:hidden} .ui-mock-head{padding:1.1rem 1.25rem;border-bottom:1px solid var(--border)} .ui-mock-head h4{font-size:.95rem;font-weight:700;margin-bottom:.15rem} .ui-mock-head span{font-size:.78rem;color:var(--muted-fg)} .ui-mock-body{padding:1.25rem} .ui-field{margin-bottom:1rem} .ui-field label{display:block;font-size:.72rem;color:var(--muted-fg);margin-bottom:.35rem;font-family:var(--mono)} .ui-input{border:1px solid var(--border);border-radius:.35rem;padding:.6rem .75rem;font-family:var(--mono);font-size:.8rem;color:var(--fg);background:var(--bg-deep)} .ui-input.placeholder{color:var(--muted-fg)} .ui-row{display:flex;align-items:center;justify-content:space-between;border:1px solid hsl(140,40%,40%/.4);border-radius:.35rem;padding:.65rem .85rem;background:hsl(140,30%,16%/.3)} .ui-pill{font-size:.68rem;font-family:var(--mono);padding:.15rem .5rem;border-radius:999px;background:hsl(140,50%,40%);color:#fff;font-weight:600} .ui-dot{width:7px;height:7px;border-radius:50%;background:hsl(140,60%,50%);display:inline-block;margin-right:.5rem} .ui-btns{display:flex;gap:.5rem} .ui-btn{font-size:.72rem;padding:.3rem .7rem;border-radius:.3rem;border:1px solid var(--border);color:var(--muted-fg);font-family:var(--mono)} .ui-btn.green{background:hsl(140,50%,40%);color:#fff;border-color:transparent} /* dashboard mock */ .dash-mock{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-deep);padding:1.25rem;box-shadow:var(--shadow-card);display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem} .dash-tile{border:1px solid var(--border);border-radius:.4rem;padding:1rem;background:var(--card)} .dash-tile .label{font-size:.65rem;font-family:var(--mono);color:var(--muted-fg);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem} .dash-tile .val{font-size:1.5rem;font-weight:800;color:var(--fg);letter-spacing:-.02em} .dash-tile .val .accent{color:var(--primary)} .dash-bars{display:flex;align-items:flex-end;gap:4px;height:38px;margin-top:.5rem} .dash-bars span{flex:1;background:var(--gold);border-radius:2px 2px 0 0;opacity:.85} /* diagram frame */ .diagram{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-deep);padding:1.5rem;box-shadow:var(--shadow-card)} /* video frame */ .video-frame{position:relative;border:1px solid var(--border-hover);border-radius:var(--radius);overflow:hidden;background:var(--bg-deep);aspect-ratio:16/10;box-shadow:var(--shadow-card)} .video-frame .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:var(--glow);cursor:pointer;transition:all .25s;border:none} .video-frame .play:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:var(--glow-lg)} .video-frame .play svg{width:24px;height:24px;color:var(--primary-fg);margin-left:3px} .video-frame .vlabel{position:absolute;bottom:1rem;left:1.25rem;font-family:var(--mono);font-size:.75rem;color:var(--muted-fg)} /* code block */ .code-block{padding:1.5rem 1.75rem;background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--mono);font-size:.85rem;color:var(--primary);line-height:2;overflow-x:auto;box-shadow:var(--shadow-card)} /* checklist visual */ .checklist{display:flex;flex-direction:column;gap:.85rem} .check-item{display:flex;align-items:center;gap:1rem;border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.4rem;background:var(--card)} .check-item.good{border-color:var(--border-hover)} .check-item .mark{font-size:1.4rem;font-weight:800;flex-shrink:0} .check-item.bad .mark{color:hsl(0,60%,55%)} .check-item.good .mark{color:var(--primary)} .check-item span{font-size:.95rem;color:var(--secondary-fg)} /* handoff bar */ .handoff{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)} .handoff-phase{flex:1;padding:1.5rem 1.6rem} .handoff-phase.build{background:linear-gradient(135deg,hsl(28,60%,16%),hsl(30,6%,14%))} .handoff-phase .ph{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--primary);font-weight:700;margin-bottom:.5rem} .handoff-phase h4{font-size:1rem;font-weight:700;margin-bottom:.35rem} .handoff-phase p{font-size:.82rem;color:var(--muted-fg);line-height:1.55} .handoff-arrow{display:flex;align-items:center;padding:0 .25rem;color:var(--primary);background:var(--surface)} .handoff-arrow svg{width:22px;height:22px} @media(max-width:680px){.handoff{flex-direction:column}.handoff-arrow{transform:rotate(90deg);padding:.5rem 0;justify-content:center}} /* dashboard 11-view list */ .dash-list{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2.5rem;list-style:none;padding:0;max-width:var(--maxw);margin-inline:auto} .dash-list li{font-size:.875rem;color:var(--muted-fg);padding:.65rem 0;border-bottom:1px solid var(--border);transition:color .2s} .dash-list li:hover{color:var(--fg)} .dash-list .num{color:var(--primary);font-size:.75rem;margin-right:.6rem;font-weight:600;font-family:var(--mono)} @media(max-width:680px){.dash-list{grid-template-columns:1fr}} /* tags */ .tag-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:760px;margin:0 auto} .tag{padding:.5rem 1.1rem;border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:var(--secondary-fg);background:var(--secondary);transition:all .2s} .tag:hover{border-color:var(--border-hover);color:var(--fg)} /* visual caption */ .visual-cap{font-size:.78rem;color:var(--muted-fg);font-family:var(--mono);margin-top:1rem;text-align:center} /* ═══════════ TESTIMONIAL ═══════════ */ .quote-block{max-width:820px;margin:0 auto;text-align:center} .quote-block blockquote{font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.5;color:var(--fg);font-weight:600;letter-spacing:-.01em;margin-bottom:1.5rem} .quote-block .attribution{font-family:var(--mono);font-size:.8rem;color:var(--primary);text-transform:uppercase;letter-spacing:.08em} .quote-block .placeholder{padding:3rem 2rem;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted-fg);font-size:.9rem;background:var(--card)} /* ═══════════ BOTTOM CTA ═══════════ */ .bottom-cta{position:relative;padding:var(--section-pad) 0;border-top:1px solid var(--border);text-align:center;overflow:hidden} .bottom-cta::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(ellipse at 50% 20%, hsl(28,85%,52%/.15) 0%, transparent 60%);pointer-events:none} .bottom-cta h2{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;margin-bottom:1rem;letter-spacing:-.03em;max-width:760px;margin-inline:auto} .bottom-cta p{max-width:640px;margin:0 auto 2.5rem;color:var(--muted-fg);font-size:1.1rem} .bottom-cta .fine-print{font-size:.8rem;color:var(--muted-fg);margin-top:1.5rem} .hs-form-frame{max-width:500px;margin:0 auto} /* HubSpot dark overrides */ .hs-form-frame .hs-form-private{background:transparent !important} .hs-form-frame .hs-input{background:var(--secondary)!important;border:1px solid var(--border)!important;color:var(--fg)!important;border-radius:var(--radius)!important;padding:.75rem 1rem!important;font-family:var(--font)!important;font-size:.95rem!important} .hs-form-frame .hs-input:focus{border-color:var(--primary)!important;outline:none!important;box-shadow:0 0 0 2px hsl(28,85%,52%/.2)!important} .hs-form-frame label{color:var(--fg)!important;font-family:var(--font)!important;font-weight:600!important;font-size:.875rem!important} .hs-form-frame .hs-button{background:var(--gold)!important;color:var(--primary-fg)!important;border:none!important;border-radius:var(--radius)!important;padding:.8rem 2rem!important;font-weight:700!important;font-family:var(--font)!important;font-size:1rem!important;cursor:pointer!important;box-shadow:var(--glow)!important} .hs-form-frame .hs-button:hover{filter:brightness(1.1)!important} .hs-form-frame .hs-form-required{color:var(--primary)!important} /* ═══════════ FOOTER ═══════════ */ .site-footer{border-top:1px solid var(--border);padding:2.5rem 0;text-align:center;color:var(--muted-fg);font-size:.8rem} .site-footer a{color:var(--muted-fg);transition:color .2s} .site-footer a:hover{color:var(--fg)} .footer-links{display:flex;gap:1.5rem;justify-content:center;margin-top:.5rem;flex-wrap:wrap} /* focus states */ .btn:focus-visible,.nav-cta:focus-visible,.play:focus-visible{outline:2px solid var(--primary);outline-offset:3px} /* ═══════════ RESPONSIVE ═══════════ */ @media(max-width:768px){ :root{--section-pad:3.5rem;--gap:2.5rem} .hero{padding:3.5rem 0 2rem} .hero h1{font-size:2rem} .hero .sub{font-size:1.05rem} .sec-head{margin-bottom:2.5rem} .nav-right .nav-cta-ghost{display:none} } /* ═══════════ SCROLL-REVEAL + ANIMATION ENGINE ═══════════ */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* count-up tiles pop */ .dash-tile .val{transition:color .3s} .dash-tile.lit{box-shadow:0 0 0 1px var(--border-hover), var(--glow)} /* animated dashboard bars grow from 0 */ .dash-bars span{height:0;transition:height .9s cubic-bezier(.2,.8,.2,1)} .dash-bars.grow span{/* heights set inline via --h */height:var(--h)} /* terminal typing block */ .term{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden} .term-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--border);background:hsl(30,5%,9%)} .term-dot{width:11px;height:11px;border-radius:50%} .term-dot.r{background:#ff5f56}.term-dot.y{background:#ffbd2e}.term-dot.g{background:#27c93f} .term-title{margin-left:.5rem;font-family:var(--mono);font-size:.72rem;color:var(--muted-fg)} .term-body{padding:1.25rem 1.4rem;font-family:var(--mono);font-size:.84rem;line-height:1.9;color:var(--secondary-fg);white-space:pre-wrap;min-height:11em;text-align:left} .term-body .pr{color:var(--primary);font-weight:600} .term-body .ok{color:#27c93f} .term-body .dim{color:var(--muted-fg)} /* VPC diagram pulse packets (animated dots along paths) */ .pulse-dot{fill:var(--primary)} /* marquee subtle speed */ /* ═══════════ BALANCED CONTRAST COLUMNS (equal height) ═══════════ */ .row.balance{align-items:stretch} .want-col{display:flex;flex-direction:column} .col-title{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:800;letter-spacing:-.02em;margin-bottom:1.5rem;color:var(--fg)} .col-title .tag-want{color:var(--primary)} .col-title .tag-risk{color:hsl(0,65%,60%)} .check-stack{display:flex;flex-direction:column;gap:.85rem;flex:1} .check-stack .check-item{flex:1;align-items:center} .check-stack .check-item .mark{font-size:1.5rem} .check-stack .check-item span:last-child{font-size:1rem;line-height:1.4} @media(max-width:860px){ .row.balance{gap:2rem} .check-stack .check-item{flex:0 0 auto} } /* ═══════════ V11 — VISUAL ESSENCE PASS ═══════════ - Display font for headings (heavier character) - Orange radial bursts on every section - Alternating section schemes (dark / warm-tinted / dark) - Hero stack diagram with flowing packets - Stat callouts (big-number block) - Before/After comparison cards */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap'); :root{ --font-display:'Space Grotesk','Inter',system-ui,sans-serif; --warm-bg:hsl(28,40%,11%); --warm-bg-2:hsl(28,30%,13%); } h1,h2,h3,.col-title{font-family:var(--font-display)} /* ─── SECTION BACKGROUND BURSTS — every section gets ambient orange ─── */ .section{position:relative;overflow:hidden} .section::before{ content:'';position:absolute;pointer-events:none; width:1100px;height:700px; background:radial-gradient(ellipse at center, hsl(28,85%,52%/.10) 0%, hsl(28,85%,52%/.04) 35%, transparent 65%); z-index:0; } .section > *{position:relative;z-index:1} /* alternate burst position: odd top-left, even top-right */ .section:nth-of-type(odd)::before{top:-300px;left:-200px} .section:nth-of-type(even)::before{top:-300px;right:-200px;left:auto} /* ─── ALTERNATING SCHEME — warm orange-tinted sections ─── */ .section.warm{ background:linear-gradient(180deg, var(--warm-bg) 0%, var(--warm-bg-2) 100%); border-top:1px solid hsl(28,85%,52%/.35); } .section.warm::before{ background:radial-gradient(ellipse at center, hsl(28,85%,52%/.18) 0%, hsl(28,85%,52%/.06) 40%, transparent 70%); } .section.warm .card{background:hsl(28,40%,15%);border-color:hsl(28,85%,52%/.4)} .section.warm .check-item{background:hsl(28,40%,15%);border-color:hsl(28,85%,52%/.35)} /* ─── BIG STAT CALLOUTS ─── */ .stats-row{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; margin-top:3.5rem;max-width:var(--maxw);margin-inline:auto; } .stat-cell{ text-align:center;padding:2rem 1.5rem; border:1px solid var(--border);border-radius:var(--radius); background:hsl(30,5%,12%/.6);backdrop-filter:blur(8px); position:relative;overflow:hidden; } .stat-cell::before{ content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px; background:linear-gradient(135deg, hsl(28,85%,52%/.6), transparent 60%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; } .stat-cell .big{ font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem);font-weight:700; background:var(--gold);-webkit-background-clip:text;background-clip:text; color:transparent;letter-spacing:-.04em;line-height:1; margin-bottom:.6rem; } .stat-cell .label{font-size:.95rem;color:var(--muted-fg);line-height:1.45} @media(max-width:680px){.stats-row{grid-template-columns:1fr}} /* ─── BEFORE / AFTER COMPARISON ─── */ .compare-grid{ display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:stretch; max-width:var(--maxw);margin-inline:auto; } .compare-card{ padding:2rem;border:1px solid var(--border);border-radius:var(--radius); background:var(--card);display:flex;flex-direction:column; } .compare-card.after{background:linear-gradient(135deg, hsl(28,40%,14%), hsl(30,6%,14%));border-color:hsl(28,85%,52%/.45)} .compare-card .ba-label{ font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; color:var(--muted-fg);margin-bottom:.5rem; } .compare-card.after .ba-label{color:var(--primary)} .compare-card h4{font-size:1.15rem;font-weight:700;margin-bottom:1.25rem;line-height:1.3} .compare-card ul{list-style:none;padding:0;flex:1} .compare-card li{padding:.6rem 0 .6rem 1.5rem;font-size:.92rem;color:var(--muted-fg);position:relative;line-height:1.5;border-bottom:1px solid var(--border)} .compare-card li:last-child{border-bottom:none} .compare-card li::before{ content:'';position:absolute;left:0;top:1em;width:8px;height:8px;border-radius:50%; background:var(--muted-fg); } .compare-card.after li::before{background:var(--primary)} .compare-arrow{ align-self:center;color:var(--primary); display:flex;align-items:center;justify-content:center; width:48px;height:48px;border-radius:50%;border:1px solid var(--border-hover); background:hsl(28,60%,14%); } .compare-arrow svg{width:22px;height:22px} @media(max-width:860px){ .compare-grid{grid-template-columns:1fr;gap:1rem} .compare-arrow{transform:rotate(90deg)} } /* ─── HERO STACK DIAGRAM (animated) ─── */ .stack-diagram{ position:relative;width:100%;max-width:760px;margin-inline:auto; display:flex;flex-direction:column;gap:1.25rem; text-align:left; } .stack-layer{ position:relative;border:1px solid var(--border);border-radius:var(--radius); padding:1.25rem 1.4rem;background:var(--card); box-shadow:var(--shadow-card); } .stack-layer.core{ background:linear-gradient(135deg, hsl(28,55%,18%), hsl(28,50%,14%)); border-color:hsl(28,85%,52%/.5); } .stack-layer .lyr-label{ font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase; color:var(--primary);font-weight:700;margin-bottom:.4rem; } .stack-layer .lyr-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:.85rem;color:var(--fg)} .stack-chips{display:flex;flex-wrap:wrap;gap:.5rem} .stack-chip{ font-family:var(--mono);font-size:.74rem;padding:.35rem .75rem;border-radius:999px; border:1px solid var(--border);background:hsl(30,5%,11%);color:var(--secondary-fg); } .stack-layer.core .stack-chip{background:hsl(28,60%,14%);border-color:hsl(28,85%,52%/.45);color:hsl(28,30%,92%)} .stack-connector{display:flex;justify-content:center;margin:-.4rem 0} .stack-connector svg{width:30px;height:36px;color:var(--primary)} .stack-connector .pulse{animation:pulseDown 2.2s ease-in-out infinite} @keyframes pulseDown{ 0%{opacity:.25;transform:translateY(-6px)} 50%{opacity:1;transform:translateY(0)} 100%{opacity:.25;transform:translateY(6px)} } /* ─── BIGGER COLUMN TITLE (you asked for bigger) ─── */ .col-title{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:1.75rem} /* ─── ROW MEDIA glow frame ─── */ .scene-card,.ui-mock,.dash-mock,.diagram,.term,.video-frame{ position:relative; } .scene-card::after,.ui-mock::after,.dash-mock::after,.diagram::after,.term::after,.video-frame::after{ content:'';position:absolute;inset:0;border-radius:var(--radius); box-shadow:0 0 60px hsl(28,85%,52%/.08) inset; pointer-events:none; } /* ═══════════ V12 — AMBIENT WARM WASH ON DARK SECTIONS ═══════════ Mimics apelogic.ai's hero glow: soft orange radial behind dark sections, fading top-to-bottom so the page reads warmer without going full warm-scheme. */ /* Hero — big warm wash from top */ .hero{ background: radial-gradient(ellipse 1200px 700px at 50% -20%, hsl(28,75%,28%/.55) 0%, hsl(28,70%,18%/.3) 35%, transparent 65%), radial-gradient(ellipse 900px 500px at 50% 100%, hsl(28,70%,20%/.35) 0%, transparent 60%), var(--bg); } .hero::before{display:none} /* old narrow burst no longer needed */ /* Dark sections get a softer ambient wash so they feel like the same room */ .section:not(.warm){ background: radial-gradient(ellipse 1100px 500px at 50% 0%, hsl(28,60%,18%/.30) 0%, hsl(28,60%,15%/.12) 30%, transparent 60%), var(--bg); } /* keep the existing burst as a secondary highlight but lighter, and only on some sections */ .section:not(.warm)::before{opacity:.6} /* Bottom CTA gets a stronger wash to mirror the hero */ .bottom-cta{ background: radial-gradient(ellipse 1100px 600px at 50% 100%, hsl(28,75%,28%/.55) 0%, hsl(28,70%,18%/.3) 40%, transparent 70%), radial-gradient(ellipse 800px 400px at 50% 0%, hsl(28,60%,20%/.25) 0%, transparent 60%), var(--bg); } .bottom-cta::before{display:none} /* Marquee stays subtly tinted so the transition from hero feels continuous */ .marquee{ background:linear-gradient(180deg, hsl(28,60%,12%/.5) 0%, hsl(30,5%,10%) 100%); } /* ═══════════ V14 — COHERENT BACKGROUND SYSTEM (final, overrides everything above) ═══════════ */ /* 1. BODY = single warm-tinted base. Sections will be transparent so this shows through. */ html,body{background:var(--bg)!important} body{ background: radial-gradient(ellipse 80% 80% at 50% 0%, hsl(28,75%,22%/.45) 0%, transparent 60%), radial-gradient(ellipse 80% 80% at 50% 100%, hsl(28,75%,22%/.40) 0%, transparent 60%), var(--bg)!important; background-attachment:fixed!important; } /* 2. HERO — strong warm wash so the orange is unmistakable */ .hero{ background: radial-gradient(ellipse 1200px 800px at 50% 0%, hsl(28,80%,32%/.85) 0%, hsl(28,75%,22%/.50) 30%, transparent 60%)!important; } .hero::before{display:none!important} /* 3. DARK SECTIONS — transparent, each gets its own warm BURST ambient (overrides any earlier .section bg) */ .section:not(.warm){ background:transparent!important; } .section:not(.warm)::before{ content:''!important;display:block!important; position:absolute!important; top:0!important;left:50%!important;transform:translateX(-50%)!important;right:auto!important; width:1400px!important;height:600px!important; background:radial-gradient(ellipse at 50% 0%, hsl(28,80%,30%/.55) 0%, hsl(28,75%,22%/.20) 35%, transparent 65%)!important; opacity:1!important; pointer-events:none;z-index:0; } /* alternating burst position so it doesn't look identical each section */ .section:not(.warm):nth-of-type(odd)::before{ background:radial-gradient(ellipse at 30% 0%, hsl(28,80%,30%/.55) 0%, hsl(28,75%,22%/.18) 35%, transparent 65%)!important; } .section:not(.warm):nth-of-type(even)::before{ background:radial-gradient(ellipse at 70% 0%, hsl(28,80%,30%/.55) 0%, hsl(28,75%,22%/.18) 35%, transparent 65%)!important; } /* 4. WARM SECTIONS — actually full color, no transparency */ .section.warm{ background:linear-gradient(180deg, hsl(28,55%,16%) 0%, hsl(28,50%,12%) 100%)!important; border-top:1px solid hsl(28,85%,52%/.4)!important; border-bottom:1px solid hsl(28,85%,52%/.4)!important; } .section.warm::before{ content:''!important;display:block!important; position:absolute!important;top:-100px!important;left:50%!important;transform:translateX(-50%)!important; width:1400px!important;height:600px!important; background:radial-gradient(ellipse at 50% 0%, hsl(28,85%,52%/.25) 0%, transparent 60%)!important; pointer-events:none; } /* 5. MARQUEE — bridge between hero and first dark section */ .marquee{ background:linear-gradient(180deg, hsl(28,60%,14%/.6) 0%, transparent 100%)!important; } /* 6. BOTTOM CTA — mirror the hero with wash from bottom */ .bottom-cta{ background: radial-gradient(ellipse 1200px 800px at 50% 100%, hsl(28,80%,32%/.85) 0%, hsl(28,75%,22%/.50) 30%, transparent 60%)!important; } .bottom-cta::before{display:none!important} /* Make sure section content always sits above the burst */ .section{position:relative} .section > *{position:relative;z-index:1} /* ═══════════ V15 — STRONGER BURSTS + CONTINUOUS BODY GLOW ═══════════ */ /* Continuous warm tint on the whole document body — fixed so it's always visible */ html{background:var(--bg)!important} body{ background: radial-gradient(ellipse 70% 60% at 15% 10%, hsl(28,80%,30%/.35) 0%, transparent 50%), radial-gradient(ellipse 70% 60% at 85% 35%, hsl(28,80%,30%/.35) 0%, transparent 50%), radial-gradient(ellipse 70% 60% at 15% 60%, hsl(28,80%,30%/.35) 0%, transparent 50%), radial-gradient(ellipse 70% 60% at 85% 85%, hsl(28,80%,30%/.35) 0%, transparent 50%), var(--bg)!important; background-attachment:fixed!important; } /* MUCH bigger, brighter bursts inside each dark section — and TWO per section so they reach */ .section:not(.warm)::before{ content:''!important; width:1600px!important;height:1400px!important; top:-200px!important; background:radial-gradient(ellipse at 50% 30%, hsl(28,85%,40%/.45) 0%, hsl(28,80%,30%/.18) 30%, transparent 60%)!important; opacity:1!important;mix-blend-mode:screen; } .section:not(.warm):nth-of-type(odd)::before{ background:radial-gradient(ellipse at 25% 30%, hsl(28,85%,40%/.50) 0%, hsl(28,80%,30%/.20) 30%, transparent 55%)!important; } .section:not(.warm):nth-of-type(even)::before{ background:radial-gradient(ellipse at 75% 30%, hsl(28,85%,40%/.50) 0%, hsl(28,80%,30%/.20) 30%, transparent 55%)!important; } /* Make sure dark sections themselves stay transparent */ .section:not(.warm){background:transparent!important} .section.warm{background:linear-gradient(180deg, hsl(28,55%,16%) 0%, hsl(28,50%,12%) 100%)!important} /* ═══════════ V16 — ACTUALLY VISIBLE BURSTS (no blend mode, brighter, contained) ═══════════ */ /* Body — strong continuous warm tint, no fixed attachment (was hiding it) */ body{ background: radial-gradient(ellipse 60% 50% at 20% 15%, hsl(28,90%,38%/.30) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 30%, hsl(28,90%,38%/.30) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 20% 55%, hsl(28,90%,38%/.30) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, hsl(28,90%,38%/.30) 0%, transparent 60%), var(--bg)!important; background-attachment:scroll!important; } /* DARK sections: transparent + a HUGE bright burst sized to the section */ .section:not(.warm){ background:transparent!important; overflow:visible!important; /* so the bursts can spread */ } .section:not(.warm)::before{ content:''!important; position:absolute!important; top:-30%!important;left:-20%!important;right:-20%!important; width:auto!important;height:160%!important; /* fills the section + spills out */ background:radial-gradient(ellipse at 50% 30%, hsl(28,85%,50%/.40) 0%, hsl(28,85%,40%/.18) 35%, transparent 65%)!important; opacity:1!important; mix-blend-mode:normal!important; /* normal paint, not screen */ filter:blur(20px)!important; /* soft the edges */ z-index:0!important; pointer-events:none; } .section:not(.warm):nth-of-type(odd)::before{ background:radial-gradient(ellipse at 25% 30%, hsl(28,85%,50%/.42) 0%, hsl(28,85%,40%/.20) 35%, transparent 60%)!important; } .section:not(.warm):nth-of-type(even)::before{ background:radial-gradient(ellipse at 75% 30%, hsl(28,85%,50%/.42) 0%, hsl(28,85%,40%/.20) 35%, transparent 60%)!important; } /* ═══════════ V17 — HUBSPOT FORM CARD (matches the target screenshot pattern) ═══════════ */ .form-card{ max-width:580px;margin:0 auto; background:#fff; border-radius:16px; padding:2.5rem 2.25rem 2rem; box-shadow:0 30px 80px hsl(28,80%,40%/.25), 0 0 0 1px hsl(28,85%,52%/.15); text-align:left; } .form-card-title{ font-family:var(--font-display, var(--font)); font-size:1.6rem;font-weight:800;letter-spacing:-.02em; color:hsl(30,5%,12%); margin-bottom:.4rem; text-align:center; } .form-card-sub{ font-size:.95rem;color:hsl(30,5%,40%)!important; margin-bottom:1.75rem!important; text-align:center;max-width:none!important; } .form-card-foot{ margin-top:1.25rem!important; font-size:.78rem;color:hsl(30,5%,45%)!important; text-align:center;max-width:none!important; } .form-card-foot a{color:var(--primary);text-decoration:underline} /* AGGRESSIVE HubSpot overrides — cover every selector variant */ .form-card .hs-form-frame, .form-card .hs-form-frame *{ font-family:var(--font)!important; box-sizing:border-box; } .form-card .hs-form-frame{ background:transparent!important; max-width:none;margin:0; color:hsl(30,5%,12%)!important; } /* Labels — orange, bold, like target */ .form-card .hs-form-frame label, .form-card label, .form-card legend{ display:block!important; font-size:.95rem!important; font-weight:700!important; color:var(--primary)!important; margin-bottom:.5rem!important; letter-spacing:-.01em!important; } .form-card .hs-form-required, .form-card .hs-form-frame .hs-form-required{ color:var(--primary)!important; margin-left:2px; } /* Field wrapper spacing */ .form-card .hs-form-field, .form-card .hs-form-frame .hs-form-field, .form-card .hsForm-field, .form-card fieldset{ margin-bottom:1.25rem!important; width:100%!important; max-width:none!important; padding:0!important; border:none!important; } /* INPUT FIELDS — rounded, light, on light card */ .form-card .hs-input, .form-card input[type="text"], .form-card input[type="email"], .form-card input[type="tel"], .form-card input[type="url"], .form-card input[type="number"], .form-card textarea, .form-card select, .form-card .hs-form-frame input, .form-card .hs-form-frame textarea, .form-card .hs-form-frame select{ width:100%!important; background:#fff!important; border:1.5px solid hsl(30,5%,85%)!important; border-radius:10px!important; padding:.85rem 1rem!important; font-family:var(--font)!important; font-size:1rem!important; color:hsl(30,5%,12%)!important; transition:border-color .2s, box-shadow .2s!important; box-shadow:none!important; height:auto!important; min-height:48px!important; } .form-card .hs-input:focus, .form-card input:focus, .form-card textarea:focus, .form-card select:focus, .form-card .hs-form-frame input:focus{ border-color:var(--primary)!important; outline:none!important; box-shadow:0 0 0 3px hsl(28,85%,52%/.18)!important; } .form-card .hs-input::placeholder, .form-card input::placeholder, .form-card textarea::placeholder{ color:hsl(30,5%,55%)!important; font-weight:400!important; } .form-card textarea{min-height:120px!important;resize:vertical!important} /* Two-column for first/last name on wider screens */ .form-card .form-columns-2, .form-card .hs-fieldtype-text + .hs-fieldtype-text{} /* HS uses inline-grid sometimes — keep stack on mobile */ /* SUBMIT BUTTON — full width, orange, big like target */ .form-card .hs-button, .form-card .actions input[type="submit"], .form-card input[type="submit"], .form-card button[type="submit"], .form-card .hs-form-frame button, .form-card .hs-form-frame input[type="submit"]{ display:block!important; width:100%!important; background:var(--gold)!important; background-color:hsl(28,85%,52%)!important; color:#fff!important; border:none!important; border-radius:10px!important; padding:1.05rem 2rem!important; font-family:var(--font)!important; font-size:1.05rem!important; font-weight:800!important; letter-spacing:-.01em!important; cursor:pointer!important; margin-top:.75rem!important; box-shadow:0 8px 24px hsl(28,85%,52%/.35)!important; transition:filter .2s, transform .15s, box-shadow .2s!important; text-transform:none!important; -webkit-appearance:none!important; appearance:none!important; height:auto!important; min-height:54px!important; } .form-card .hs-button:hover, .form-card input[type="submit"]:hover, .form-card button[type="submit"]:hover{ filter:brightness(1.08)!important; box-shadow:0 12px 32px hsl(28,85%,52%/.45)!important; transform:translateY(-1px)!important; } /* HubSpot submit row container */ .form-card .hs-submit, .form-card .actions{margin-top:.5rem!important;padding:0!important} /* Hide HubSpot's own confirmation white box weirdness */ .form-card .submitted-message{ background:transparent!important; color:hsl(30,5%,12%)!important; font-size:1.1rem!important; text-align:center!important; padding:2rem 0!important; } /* Error states */ .form-card .hs-error-msg, .form-card .hs-error-msgs{ color:hsl(0,75%,55%)!important; font-size:.825rem!important; margin-top:.35rem!important; } /* Hide the weird "..." or close button some embeds inject */ .form-card .hs-form-frame [data-hs-cf-bound], .form-card .hs-form-frame button[aria-label*="close"]{display:none!important} /* Bottom CTA needs less padding around the card now */ .bottom-cta .container > p{margin-bottom:2rem} .bottom-cta .fine-print{display:none} /* moved into the card */ /* ═══════════ V18 — TIGHTER FORM CARD ═══════════ */ /* Card hugs content; remove the excess vertical breathing room */ .form-card{padding:2rem 2rem 1.5rem!important;max-width:520px!important} .form-card-title{font-size:1.4rem!important;margin-bottom:.25rem!important} .form-card-sub{margin-bottom:1.25rem!important;font-size:.9rem!important} .form-card-foot{margin-top:1rem!important} /* HubSpot's own embedded title/subtitle */ .form-card .hs-form-frame h1, .form-card .hs-form-frame h2, .form-card .hs-form-frame h3, .form-card .hs-form-frame .hs-richtext, .form-card .hs-form-frame .hs-richtext p{ font-size:1.05rem!important; font-weight:600!important; color:hsl(30,5%,30%)!important; margin:0 0 1.25rem 0!important; text-align:left!important; padding:0!important; } /* Kill any extra HubSpot vertical padding/margin */ .form-card .hs-form-frame, .form-card .hs-form-frame form, .form-card .hs-form-frame > div{padding:0!important;margin:0!important} .form-card .hs-form-field{margin-bottom:1rem!important} /* Make the submit full-width like the inputs (target pattern) — overrides current right-aligned button */ .form-card .hs-button, .form-card input[type="submit"], .form-card button[type="submit"], .form-card .actions{ width:100%!important; display:block!important; margin-left:0!important;margin-right:0!important; margin-top:.25rem!important; } .form-card .actions{padding:0!important;text-align:center!important} /* ═══════════ V19 — DARK FORM CARD (matches db-mcp section vibe) ═══════════ */ /* Dark card with orange border, white labels, orange accent — overrides v17/v18 light card */ .form-card{ background:hsl(30,6%,12%)!important; border:1.5px solid hsl(28,85%,52%/.55)!important; box-shadow:0 30px 80px hsl(28,80%,40%/.20), 0 0 0 1px hsl(28,85%,52%/.20), inset 0 0 60px hsl(28,85%,52%/.04)!important; padding:2rem 2rem 1.5rem!important; max-width:520px!important; } /* Title now white */ .form-card-title{color:#fff!important;font-size:1.4rem!important;margin-bottom:.4rem!important} .form-card-sub{color:hsl(30,8%,68%)!important;margin-bottom:1.5rem!important} .form-card-foot{color:hsl(30,8%,60%)!important;margin-top:1rem!important} .form-card-foot a{color:var(--primary)!important;text-decoration:underline} /* HubSpot's own embedded subtitle becomes muted grey */ .form-card .hs-form-frame h1, .form-card .hs-form-frame h2, .form-card .hs-form-frame h3, .form-card .hs-form-frame .hs-richtext, .form-card .hs-form-frame .hs-richtext p{ color:hsl(30,8%,68%)!important; font-weight:500!important; font-size:.95rem!important; } /* Labels — orange (kept) but on dark now */ .form-card .hs-form-frame label, .form-card label, .form-card legend{ color:var(--primary)!important; font-weight:700!important; font-size:.9rem!important; } /* INPUTS — dark fields, subtle orange border, white text */ .form-card .hs-input, .form-card input[type="text"], .form-card input[type="email"], .form-card input[type="tel"], .form-card input[type="url"], .form-card input[type="number"], .form-card textarea, .form-card select, .form-card .hs-form-frame input, .form-card .hs-form-frame textarea, .form-card .hs-form-frame select{ background:hsl(30,5%,8%)!important; border:1.5px solid hsl(28,85%,52%/.30)!important; color:#fff!important; border-radius:10px!important; } .form-card .hs-input:focus, .form-card input:focus, .form-card textarea:focus, .form-card select:focus, .form-card .hs-form-frame input:focus{ border-color:hsl(28,85%,52%)!important; background:hsl(30,5%,10%)!important; box-shadow:0 0 0 3px hsl(28,85%,52%/.25)!important; } .form-card .hs-input::placeholder, .form-card input::placeholder, .form-card textarea::placeholder{ color:hsl(30,8%,50%)!important; } /* Submit button stays full-width orange (kept from v18) */ /* ═══════════ V20 — CUSTOM VIBE-CODED FORM (no iframe) ═══════════ */ /* Card: hugs content tight */ .form-card{padding:1.75rem!important;max-width:520px!important} .ap-form{display:flex;flex-direction:column;gap:1rem} .ap-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media(max-width:520px){.ap-row{grid-template-columns:1fr}} .ap-field{display:flex;flex-direction:column;gap:.45rem} .ap-field label{ font-family:var(--font); font-size:.82rem;font-weight:700; color:var(--primary); letter-spacing:.01em; } .ap-req{color:var(--primary)} .ap-field input, .ap-field textarea{ background:hsl(30,5%,8%); border:1.5px solid hsl(28,85%,52%/.30); border-radius:10px; padding:.85rem 1rem; font-family:var(--font); font-size:.95rem; color:#fff; width:100%; transition:border-color .2s, box-shadow .2s, background .2s; outline:none; } .ap-field input::placeholder, .ap-field textarea::placeholder{color:hsl(30,8%,45%)} .ap-field input:hover, .ap-field textarea:hover{border-color:hsl(28,85%,52%/.5)} .ap-field input:focus, .ap-field textarea:focus{ border-color:hsl(28,85%,52%); background:hsl(30,5%,10%); box-shadow:0 0 0 3px hsl(28,85%,52%/.22); } .ap-field input.ap-err, .ap-field textarea.ap-err{ border-color:hsl(0,75%,55%); box-shadow:0 0 0 3px hsl(0,75%,55%/.18); } .ap-field textarea{resize:vertical;min-height:88px;font-family:var(--font)} .ap-submit{ margin-top:.5rem; background:var(--gold); color:#fff; border:none; border-radius:10px; padding:1rem 1.5rem; font-family:var(--font); font-size:1rem; font-weight:700; letter-spacing:-.01em; cursor:pointer; display:flex;align-items:center;justify-content:center;gap:.5rem; box-shadow:0 8px 24px hsl(28,85%,52%/.35); transition:filter .2s, transform .15s, box-shadow .2s, opacity .2s; } .ap-submit:hover:not([disabled]){ filter:brightness(1.08); box-shadow:0 12px 32px hsl(28,85%,52%/.45); transform:translateY(-1px); } .ap-submit:active{transform:translateY(0)} .ap-submit[disabled]{opacity:.6;cursor:wait} .ap-submit-arrow{transition:transform .2s} .ap-submit:hover:not([disabled]) .ap-submit-arrow{transform:translateX(3px)} .ap-status{font-size:.85rem;text-align:center;min-height:1.2em;margin-top:.5rem} .ap-status.ok{color:hsl(140,55%,60%)} .ap-status.err{color:hsl(0,75%,65%)} /* ═══════════ V21 — BURSTS, FINAL ATTEMPT (clean geometry) ═══════════ */ .section{overflow:visible!important} .section:not(.warm)::before{ content:''!important; position:absolute!important; top:-200px!important; left:50%!important; transform:translateX(-50%)!important; width:1600px!important; height:1000px!important; right:auto!important; background:radial-gradient(closest-side at 50% 50%, hsl(28,85%,55%/.45) 0%, hsl(28,85%,40%/.22) 35%, transparent 70%)!important; filter:blur(40px)!important; opacity:1!important; z-index:0!important; pointer-events:none!important; display:block!important; mix-blend-mode:normal!important; } /* ═══════════ V22 — FINAL BURST (test 3 recipe, slightly lighter) ═══════════ */ .section{overflow:visible!important} .section:not(.warm)::before{ content:''!important; position:absolute!important; top:-100px!important;left:50%!important; transform:translateX(-50%)!important; width:900px!important;height:450px!important; right:auto!important;bottom:auto!important; background:hsl(28,90%,58%)!important; border-radius:50%!important; filter:blur(120px)!important; opacity:.50!important; z-index:0!important; pointer-events:none!important; display:block!important; mix-blend-mode:normal!important; } /* alternate burst position per section so it doesn't look identical */ .section:not(.warm):nth-of-type(odd)::before{left:30%!important} .section:not(.warm):nth-of-type(even)::before{left:70%!important} /* hero gets its own bigger one anchored at top */ .hero{position:relative!important;overflow:visible!important;background:var(--bg)!important} .hero::before{ content:''!important;display:block!important; position:absolute!important; top:-200px!important;left:50%!important; transform:translateX(-50%)!important; width:1200px!important;height:700px!important; right:auto!important;bottom:auto!important; background:hsl(28,90%,58%)!important; border-radius:50%!important; filter:blur(150px)!important; opacity:.55!important; z-index:0!important; pointer-events:none!important; mix-blend-mode:normal!important; } .hero > *{position:relative;z-index:1} /* bottom CTA same treatment, anchored at bottom */ .bottom-cta{overflow:visible!important;background:var(--bg)!important} .bottom-cta::before{ content:''!important;display:block!important; position:absolute!important; bottom:-200px!important;left:50%!important;top:auto!important; transform:translateX(-50%)!important; width:1200px!important;height:700px!important; background:hsl(28,90%,58%)!important; border-radius:50%!important; filter:blur(150px)!important; opacity:.55!important; z-index:0!important; pointer-events:none!important; mix-blend-mode:normal!important; } .bottom-cta > *{position:relative;z-index:1} /* ═══════════ V23 — CENTERED, SOFTER BURSTS ═══════════ */ /* Override the v22 alternating offsets — keep bursts centered, wider, softer */ .section:not(.warm)::before{ width:1400px!important; height:500px!important; left:50%!important; transform:translateX(-50%)!important; top:-50px!important; background:hsl(28,90%,55%)!important; filter:blur(160px)!important; opacity:.35!important; border-radius:50%!important; } /* override v22 odd/even nudges */ .section:not(.warm):nth-of-type(odd)::before{left:50%!important} .section:not(.warm):nth-of-type(even)::before{left:50%!important} /* Hero: slightly less intense so the headline reads clearly */ .hero::before{ width:1400px!important; height:800px!important; top:-300px!important; opacity:.45!important; filter:blur(160px)!important; } /* Bottom CTA: same softer recipe */ .bottom-cta::before{ width:1400px!important; height:800px!important; bottom:-300px!important; opacity:.45!important; filter:blur(160px)!important; } /* ═══════════ V24 — REAL CARDS (Virayo-inspo level) ═══════════ */ /* ─── STAT CELLS: huge cream cards with massive numbers ─── */ .stats-row{ display:grid;grid-template-columns:repeat(3,1fr); gap:1.5rem!important; margin-top:3.5rem!important; max-width:var(--maxw);margin-inline:auto; } @media(max-width:860px){.stats-row{grid-template-columns:1fr}} .stat-cell{ background:hsl(40,40%,94%)!important; border:none!important; border-radius:24px!important; padding:3rem 2rem!important; text-align:center!important; position:relative!important; overflow:hidden!important; backdrop-filter:none!important; box-shadow:0 20px 50px hsl(28,80%,40%/.15), 0 0 0 1px hsl(40,30%,80%)!important; transition:transform .3s ease, box-shadow .3s ease!important; display:flex!important;flex-direction:column!important;justify-content:center!important; min-height:240px!important; } .stat-cell:hover{ transform:translateY(-4px)!important; box-shadow:0 30px 70px hsl(28,80%,40%/.25), 0 0 0 1px hsl(28,85%,52%/.4)!important; } .stat-cell::before{ content:''!important; position:absolute!important; inset:auto!important; top:auto!important;left:auto!important;right:auto!important;bottom:auto!important; width:auto!important;height:auto!important; background:none!important; display:none!important; } .stat-cell .big{ font-family:var(--font-display)!important; font-size:clamp(3rem,6vw,5rem)!important; font-weight:800!important; color:hsl(28,85%,48%)!important; -webkit-background-clip:initial!important; background-clip:initial!important; background:none!important; -webkit-text-fill-color:hsl(28,85%,48%)!important; letter-spacing:-.04em!important; line-height:.95!important; margin-bottom:1rem!important; } .stat-cell .label{ font-size:1.05rem!important; color:hsl(30,15%,30%)!important; line-height:1.4!important; font-weight:500!important; } /* ─── BEFORE / AFTER: bigger cards with big icon at top ─── */ .compare-grid{ display:grid;grid-template-columns:1fr auto 1fr; gap:2rem!important; align-items:stretch; max-width:var(--maxw);margin-inline:auto; } @media(max-width:860px){ .compare-grid{grid-template-columns:1fr;gap:1.25rem!important} .compare-arrow{transform:rotate(90deg)} } .compare-card{ padding:2.5rem 2.25rem!important; border-radius:24px!important; border:none!important; background:hsl(30,6%,16%)!important; display:flex!important;flex-direction:column!important; box-shadow:0 20px 50px hsl(0,0%,0%/.4), 0 0 0 1px hsl(30,5%,25%)!important; position:relative; } .compare-card.after{ background:linear-gradient(135deg, hsl(28,55%,20%) 0%, hsl(28,50%,14%) 100%)!important; box-shadow:0 20px 60px hsl(28,80%,30%/.35), 0 0 0 1.5px hsl(28,85%,52%/.45)!important; } /* Big circular icon at top of each card */ .compare-card::before{ content:''!important; display:block; width:56px;height:56px; border-radius:14px; background:hsl(30,5%,22%); margin-bottom:1.5rem; background-image:url("data:image/svg+xml;utf8,"); background-size:28px;background-repeat:no-repeat;background-position:center; } .compare-card.after::before{ background-color:hsl(28,85%,52%/.18); background-image:url("data:image/svg+xml;utf8,"); } .compare-card .ba-label{ font-family:var(--mono)!important; font-size:.72rem!important;letter-spacing:.18em!important;text-transform:uppercase!important; color:hsl(30,8%,55%)!important; margin-bottom:.6rem!important; } .compare-card.after .ba-label{color:hsl(28,85%,60%)!important} .compare-card h4{ font-family:var(--font-display)!important; font-size:1.4rem!important;font-weight:700!important; margin-bottom:1.5rem!important;line-height:1.25!important; color:#fff!important;letter-spacing:-.02em!important; } .compare-card ul{list-style:none;padding:0;flex:1;display:flex;flex-direction:column;gap:.85rem} .compare-card li{ padding:0 0 0 1.75rem!important; font-size:.98rem!important; color:hsl(30,8%,75%)!important; position:relative; line-height:1.5; border-bottom:none!important; } .compare-card li::before{ content:''!important; position:absolute;left:0;top:.55em; width:9px;height:9px;border-radius:50%; background:hsl(30,8%,40%)!important; } .compare-card.after li::before{background:hsl(28,85%,55%)!important} .compare-arrow{ align-self:center; width:60px!important;height:60px!important; border-radius:50%!important; background:hsl(28,85%,52%)!important; border:none!important; color:#fff!important; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px hsl(28,85%,52%/.4)!important; } .compare-arrow svg{width:26px;height:26px;color:#fff} /* ─── REGULAR CARDS (the .cards grid): bigger, more dramatic ─── */ .card{ padding:2.25rem 2rem!important; border-radius:20px!important; background:hsl(30,6%,15%)!important; border:1px solid hsl(30,5%,22%)!important; transition:all .3s ease!important; position:relative; overflow:hidden; } .card:hover{ border-color:hsl(28,85%,52%/.5)!important; transform:translateY(-4px)!important; box-shadow:0 20px 50px hsl(28,80%,30%/.25)!important; } .card .num{ font-family:var(--mono)!important; font-size:.72rem!important; color:hsl(28,85%,55%)!important; font-weight:700!important; letter-spacing:.12em!important; margin-bottom:1rem!important; text-transform:uppercase; } .card h3{ font-family:var(--font-display)!important; font-size:1.25rem!important;font-weight:700!important; margin-bottom:.75rem!important; color:#fff!important; letter-spacing:-.02em!important; } .card p{ font-size:.95rem!important; color:hsl(30,8%,70%)!important; line-height:1.6!important; } /* warm-section cards: cream-on-warm */ .section.warm .card{ background:hsl(40,40%,94%)!important; border:none!important; box-shadow:0 12px 40px hsl(28,80%,30%/.18), 0 0 0 1px hsl(40,30%,82%)!important; } .section.warm .card:hover{ box-shadow:0 24px 60px hsl(28,80%,30%/.3), 0 0 0 1px hsl(28,85%,52%/.5)!important; } .section.warm .card .num{color:hsl(28,85%,45%)!important} .section.warm .card h3{color:hsl(30,15%,15%)!important} .section.warm .card p{color:hsl(30,15%,38%)!important} /* ═══════════ V25 — VIRAYO-LEVEL CARDS (cream everywhere, dramatic icons) ═══════════ */ /* BEFORE/AFTER cards: cream like the inspo, not dark anymore */ .compare-card{ background:hsl(40,40%,94%)!important; border:none!important; border-radius:28px!important; padding:2.75rem 2.5rem!important; box-shadow:0 25px 60px hsl(28,80%,30%/.20), 0 0 0 1px hsl(40,30%,82%)!important; position:relative; } .compare-card.after{ background:hsl(40,40%,94%)!important; box-shadow:0 30px 70px hsl(28,80%,40%/.32), 0 0 0 2px hsl(28,85%,52%)!important; } /* Bigger, more dramatic icon block at top */ .compare-card::before{ width:72px!important;height:72px!important; border-radius:18px!important; background-color:hsl(28,30%,88%); background-size:38px!important; margin-bottom:1.75rem!important; background-image:url("data:image/svg+xml;utf8,")!important; } .compare-card.after::before{ background-color:hsl(28,85%,52%); background-image:url("data:image/svg+xml;utf8,")!important; } /* Labels + headings dark on cream */ .compare-card .ba-label{color:hsl(30,15%,40%)!important} .compare-card.after .ba-label{color:hsl(28,85%,48%)!important;font-weight:700!important} .compare-card h4{ color:hsl(30,15%,15%)!important; font-size:1.55rem!important; letter-spacing:-.02em!important; } .compare-card li{color:hsl(30,15%,32%)!important;font-size:1rem!important} .compare-card li::before{background:hsl(30,15%,55%)!important;width:8px!important;height:8px!important} .compare-card.after li::before{background:hsl(28,85%,52%)!important} /* Bigger compare arrow */ .compare-arrow{ width:72px!important;height:72px!important; background:hsl(28,85%,52%)!important; box-shadow:0 12px 30px hsl(28,85%,52%/.5)!important; } .compare-arrow svg{width:32px!important;height:32px!important} /* STAT CELLS: even bigger, more dramatic */ .stat-cell{ border-radius:28px!important; padding:3.5rem 2rem!important; min-height:280px!important; box-shadow:0 25px 60px hsl(28,80%,30%/.20), 0 0 0 1px hsl(40,30%,82%)!important; } .stat-cell .big{ font-size:clamp(3.5rem,7vw,5.5rem)!important; font-weight:900!important; margin-bottom:1.25rem!important; } .stat-cell .label{ font-size:1.1rem!important; font-weight:500!important; color:hsl(30,15%,32%)!important; } /* REGULAR cards in warm sections: bigger radius, more presence */ .section.warm .card{ border-radius:24px!important; padding:2.5rem 2.25rem!important; box-shadow:0 20px 50px hsl(28,80%,30%/.22), 0 0 0 1px hsl(40,30%,80%)!important; } .section.warm .card h3{font-size:1.4rem!important} .section.warm .card .num{font-size:.78rem!important} /* ═══════════ V26 — GLASS BLACK CARDS, FITTING TEXT, RED WARNING ═══════════ */ /* STAT CELLS: glass black, smaller text that fits */ .stat-cell{ background:hsla(30,8%,10%,.55)!important; backdrop-filter:blur(20px) saturate(140%)!important; -webkit-backdrop-filter:blur(20px) saturate(140%)!important; border:1px solid hsl(28,85%,52%/.28)!important; box-shadow:0 25px 60px hsl(0,0%,0%/.35), inset 0 1px 0 hsl(28,85%,52%/.10)!important; border-radius:24px!important; padding:2.75rem 1.75rem!important; min-height:220px!important; overflow:hidden!important; } .stat-cell .big{ font-size:clamp(2.5rem,5vw,3.75rem)!important; font-weight:800!important; color:hsl(28,90%,58%)!important; -webkit-text-fill-color:hsl(28,90%,58%)!important; line-height:1!important; margin-bottom:1rem!important; word-break:break-word!important; hyphens:auto!important; } .stat-cell .label{ color:hsl(30,15%,80%)!important; font-size:1rem!important; line-height:1.5!important; } /* BEFORE/AFTER cards: glass black */ .compare-card{ background:hsla(30,8%,10%,.55)!important; backdrop-filter:blur(20px) saturate(140%)!important; -webkit-backdrop-filter:blur(20px) saturate(140%)!important; border:1px solid hsl(30,8%,28%)!important; box-shadow:0 25px 60px hsl(0,0%,0%/.40)!important; border-radius:24px!important; } .compare-card.after{ background:hsla(28,40%,12%,.55)!important; border:1.5px solid hsl(28,85%,52%/.55)!important; box-shadow:0 25px 60px hsl(28,80%,30%/.35), inset 0 1px 0 hsl(28,85%,52%/.18)!important; } /* BEFORE icon: RED warning */ .compare-card::before{ background-color:hsl(0,75%,20%/.35); border:1px solid hsl(0,80%,55%/.45); background-image:url("data:image/svg+xml;utf8,")!important; width:64px!important;height:64px!important; border-radius:16px!important; } .compare-card.after::before{ background-color:hsl(28,85%,52%); border:none; } /* Text colors back to white on dark */ .compare-card .ba-label{color:hsl(30,15%,65%)!important} .compare-card.after .ba-label{color:hsl(28,90%,62%)!important} .compare-card h4{color:#fff!important;font-size:1.4rem!important} .compare-card li{color:hsl(30,8%,80%)!important} .compare-card li::before{background:hsl(30,8%,50%)!important} .compare-card.after li::before{background:hsl(28,85%,55%)!important} /* WARM-SECTION cards (How It Works): glass black too */ .section.warm .card{ background:hsla(30,8%,10%,.55)!important; backdrop-filter:blur(20px) saturate(140%)!important; -webkit-backdrop-filter:blur(20px) saturate(140%)!important; border:1px solid hsl(28,85%,52%/.28)!important; box-shadow:0 20px 50px hsl(0,0%,0%/.35), inset 0 1px 0 hsl(28,85%,52%/.10)!important; } .section.warm .card .num{color:hsl(28,90%,62%)!important} .section.warm .card h3{color:#fff!important} .section.warm .card p{color:hsl(30,8%,78%)!important} /* ═══════════ V27 — chat-mock idle state ═══════════ */ .chat-mock .dim{ color:hsl(30,8%,42%); font-style:italic; letter-spacing:.02em; opacity:.85; } /* ═══════════ V28 — center bursts vertically in each section (hero exempt) ═══════════ */ .section:not(.warm)::before{ top:50%!important; bottom:auto!important; transform:translate(-50%, -50%)!important; width:1200px!important; height:600px!important; filter:blur(140px)!important; opacity:.35!important; } /* Bottom CTA: also center the burst (was anchored to bottom) */ .bottom-cta::before{ top:50%!important; bottom:auto!important; transform:translate(-50%, -50%)!important; width:1200px!important; height:600px!important; filter:blur(140px)!important; opacity:.40!important; } /* Hero stays untouched — its burst remains anchored to the top */ /* ═══════════ V29 — reverse dark burst in warm sections (mirror of v28) ═══════════ */ .section.warm{overflow:visible!important;position:relative} .section.warm::before{ content:''!important; display:block!important; position:absolute!important; top:50%!important; left:50%!important; right:auto!important; bottom:auto!important; transform:translate(-50%, -50%)!important; width:1200px!important; height:600px!important; background:hsl(30,15%,5%)!important; border-radius:50%!important; filter:blur(140px)!important; opacity:.55!important; z-index:0!important; pointer-events:none!important; mix-blend-mode:normal!important; } .section.warm > *{position:relative;z-index:1} /* ═══════════ V30 — REAL FROSTED GLASS CARDS ═══════════ Recipe: - Milky-white translucent fill (low-opacity gradient, not dark-tinted) - Heavy backdrop blur + saturation so the orange/dark behind tints the glass - Bright inner top-edge highlight (the "lit" edge in the stock photo) - Drop shadow + a faint bottom inner shadow so it floats */ /* STAT CELLS — clear milky glass with a hint of warm tint */ .stat-cell{ background:linear-gradient(135deg, hsla(28,40%,90%,.10), hsla(28,30%,80%,.04))!important; backdrop-filter:blur(28px) saturate(180%)!important; -webkit-backdrop-filter:blur(28px) saturate(180%)!important; border:1px solid hsla(28,80%,80%,.22)!important; box-shadow: 0 20px 50px hsl(0,0%,0%/.45), inset 0 1px 0 hsla(28,90%,90%,.35), inset 0 -1px 0 hsla(0,0%,0%,.15)!important; border-radius:24px!important; padding:2.75rem 1.75rem!important; min-height:220px!important; } .stat-cell .big{ color:hsl(28,95%,65%)!important; -webkit-text-fill-color:hsl(28,95%,65%)!important; text-shadow:0 2px 12px hsl(28,90%,55%/.35)!important; } .stat-cell .label{color:hsla(28,30%,92%,.85)!important} /* BEFORE/AFTER cards — same glass treatment */ .compare-card{ background:linear-gradient(135deg, hsla(30,15%,85%,.09), hsla(30,15%,75%,.03))!important; backdrop-filter:blur(28px) saturate(180%)!important; -webkit-backdrop-filter:blur(28px) saturate(180%)!important; border:1px solid hsla(0,0%,100%,.18)!important; box-shadow: 0 25px 60px hsl(0,0%,0%/.5), inset 0 1px 0 hsla(0,0%,100%,.25), inset 0 -1px 0 hsla(0,0%,0%,.2)!important; } /* AFTER card: same glass, warmer orange tint */ .compare-card.after{ background:linear-gradient(135deg, hsla(28,80%,70%,.18), hsla(28,80%,60%,.06))!important; border:1px solid hsla(28,90%,70%,.40)!important; box-shadow: 0 25px 60px hsl(28,80%,30%/.4), inset 0 1px 0 hsla(28,90%,80%,.45), inset 0 -1px 0 hsla(28,80%,30%,.25)!important; } /* Heading/body colors back to bright */ .compare-card h4{color:#fff!important;text-shadow:0 1px 2px hsl(0,0%,0%/.5)!important} .compare-card .ba-label{color:hsla(0,0%,100%,.7)!important} .compare-card.after .ba-label{color:hsl(28,95%,72%)!important} .compare-card li{color:hsla(0,0%,100%,.85)!important} /* REGULAR cards in warm sections (How It Works steps) — glass too */ .section.warm .card{ background:linear-gradient(135deg, hsla(28,40%,90%,.12), hsla(28,30%,80%,.04))!important; backdrop-filter:blur(28px) saturate(180%)!important; -webkit-backdrop-filter:blur(28px) saturate(180%)!important; border:1px solid hsla(28,80%,80%,.25)!important; box-shadow: 0 20px 50px hsl(0,0%,0%/.45), inset 0 1px 0 hsla(28,90%,90%,.35), inset 0 -1px 0 hsla(0,0%,0%,.15)!important; } .section.warm .card h3{color:#fff!important} .section.warm .card p{color:hsla(0,0%,100%,.78)!important} .section.warm .card .num{color:hsl(28,95%,65%)!important} /* Dark-section .check-item also gets glass treatment so the Problem cards match */ .check-stack .check-item{ background:linear-gradient(135deg, hsla(30,15%,85%,.07), hsla(30,15%,75%,.02))!important; backdrop-filter:blur(20px) saturate(160%)!important; -webkit-backdrop-filter:blur(20px) saturate(160%)!important; border:1px solid hsla(0,0%,100%,.10)!important; box-shadow: 0 10px 30px hsl(0,0%,0%/.3), inset 0 1px 0 hsla(0,0%,100%,.15)!important; } .check-stack .check-item.good{border-color:hsla(28,90%,60%,.25)!important} .check-stack .check-item.bad{border-color:hsla(0,80%,60%,.20)!important} /* ═══════════ V33 — REAL VISIBLE FROST ═══════════ The v30 glass was too dark-tinted; you couldn't see the frost. Going significantly milkier, brighter inner edge, more saturation in the blur. */ .stat-cell, .compare-card, .section.warm .card{ background: linear-gradient(135deg, hsla(0,0%,100%,.16) 0%, hsla(0,0%,100%,.06) 50%, hsla(0,0%,100%,.04) 100% )!important; backdrop-filter:blur(32px) saturate(200%) brightness(1.05)!important; -webkit-backdrop-filter:blur(32px) saturate(200%) brightness(1.05)!important; border:1px solid hsla(0,0%,100%,.30)!important; box-shadow: 0 30px 80px hsl(0,0%,0%/.55), 0 10px 30px hsl(0,0%,0%/.35), inset 0 1.5px 0 hsla(0,0%,100%,.55), inset 1.5px 0 0 hsla(0,0%,100%,.25), inset 0 -1px 0 hsla(0,0%,0%,.25)!important; } /* AFTER card: orange-tinted but still milky glass */ .compare-card.after{ background: linear-gradient(135deg, hsla(28,100%,75%,.22) 0%, hsla(28,100%,70%,.10) 50%, hsla(28,100%,65%,.06) 100% )!important; border:1px solid hsla(28,100%,80%,.55)!important; box-shadow: 0 30px 80px hsl(28,80%,30%/.55), 0 10px 30px hsl(28,80%,30%/.35), inset 0 1.5px 0 hsla(28,100%,90%,.65), inset 1.5px 0 0 hsla(28,100%,85%,.30), inset 0 -1px 0 hsl(28,80%,30%/.35)!important; } /* Brighten the bursts behind warm-section cards so the orange/light actually refracts through the glass (was too dim — glass had nothing to refract) */ .section.warm::before{ background:radial-gradient(ellipse at center, hsl(28,90%,55%) 0%, hsl(28,80%,40%) 30%, hsl(30,15%,5%) 70%) !important; opacity:.7!important; filter:blur(120px)!important; } /* Stat-cell numbers — keep bright */ .stat-cell .big{ text-shadow:0 2px 16px hsl(28,90%,55%/.5), 0 0 30px hsl(28,90%,55%/.3)!important; } /* ═══════════ V34 — tone down v33 frost (same recipe, dialed back) ═══════════ */ .stat-cell, .compare-card, .section.warm .card{ background: linear-gradient(135deg, hsla(0,0%,100%,.10) 0%, hsla(0,0%,100%,.04) 50%, hsla(0,0%,100%,.02) 100% )!important; backdrop-filter:blur(28px) saturate(160%)!important; -webkit-backdrop-filter:blur(28px) saturate(160%)!important; border:1px solid hsla(0,0%,100%,.18)!important; box-shadow: 0 24px 60px hsl(0,0%,0%/.45), 0 6px 18px hsl(0,0%,0%/.25), inset 0 1px 0 hsla(0,0%,100%,.32), inset 1px 0 0 hsla(0,0%,100%,.12), inset 0 -1px 0 hsla(0,0%,0%,.18)!important; } .compare-card.after{ background: linear-gradient(135deg, hsla(28,100%,75%,.13) 0%, hsla(28,100%,70%,.06) 50%, hsla(28,100%,65%,.03) 100% )!important; border:1px solid hsla(28,100%,80%,.32)!important; box-shadow: 0 24px 60px hsl(28,80%,30%/.40), 0 6px 18px hsl(28,80%,30%/.22), inset 0 1px 0 hsla(28,100%,90%,.40), inset 1px 0 0 hsla(28,100%,85%,.18), inset 0 -1px 0 hsl(28,80%,30%/.25)!important; } /* Dim the warm-section bursts so they read as ambient light, not a flashlight */ .section.warm::before{ background:radial-gradient(ellipse at center, hsl(28,85%,52%) 0%, hsl(28,75%,38%) 30%, hsl(30,15%,5%) 70%) !important; opacity:.45!important; filter:blur(140px)!important; } /* Pull stat-number glow back to subtle */ .stat-cell .big{ text-shadow:0 2px 10px hsl(28,90%,55%/.30)!important; } /* ═══════════ V35 — hero burst centered behind sub paragraph + assistant idle fix ═══════════ */ .hero::before{ top:auto!important; bottom:auto!important; /* anchor to the vertical center of the hero block (roughly the H1+sub middle) */ top:50%!important; transform:translate(-50%, -42%)!important; width:1400px!important; height:900px!important; opacity:.50!important; filter:blur(150px)!important; } /* ═══════════ V36 — style