/* ========================================================= ONYXARRO — FUTURIST GLASS DESIGN SYSTEM Drop this file in as /assets/onyxarro.css Every page links this once in ========================================================= */ :root{ --bg:#04070e; --bg2:#09101c; --surface:#0d1a28; --surface2:#111f30; --teal:#0ea5e9; --violet:#9333ea; --text:#e2e8f0; --muted:#94a3b8; --dim:#64748b; --border:rgba(255,255,255,.06); --border2:rgba(255,255,255,.11); --border3:rgba(255,255,255,.18); --grad:linear-gradient(90deg,#0ea5e9,#9333ea); --grad135:linear-gradient(135deg,#0ea5e9,#9333ea); --font:-apple-system,'Helvetica Neue',Arial,sans-serif; --mono:'SF Mono',ui-monospace,Menlo,monospace; --maxw:1280px; } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased} body{overflow-x:hidden;min-height:100vh} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} img{max-width:100%;display:block} ul{list-style:none} ::selection{background:rgba(14,165,233,.35);color:#fff} /* ---------- FLOATING ORB BACKGROUND ---------- */ .bg-orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .bg-orbs::before,.bg-orbs::after{content:'';position:absolute;border-radius:50%;filter:blur(60px)} .bg-orbs::before{top:-10%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(14,165,233,.28),transparent 60%);animation:float-orb 18s ease-in-out infinite} .bg-orbs::after{bottom:-10%;right:-10%;width:700px;height:700px;background:radial-gradient(circle,rgba(147,51,234,.26),transparent 60%);animation:float-orb 22s ease-in-out infinite reverse} @keyframes float-orb{ 0%,100%{transform:translate(0,0)} 33%{transform:translate(40px,-30px)} 66%{transform:translate(-30px,40px)} } @keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}} @keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} /* ---------- TYPE UTILS ---------- */ .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .grad-text.glow{filter:drop-shadow(0 0 40px rgba(14,165,233,.3))} /* ---------- LAYOUT ---------- */ .container{max-width:var(--maxw);margin:0 auto;padding:0 32px} .section{padding:110px 0;position:relative} @media (max-width:760px){.section{padding:72px 0}.container{padding:0 20px}} .eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)} .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(14,165,233,.8);animation:pulse 2s ease-in-out infinite} .section-h{font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:800;letter-spacing:-2.5px;line-height:1;margin-top:16px;text-wrap:balance;max-width:18ch} .section-sub{margin-top:18px;font-size:17px;color:var(--muted);max-width:56ch;line-height:1.65} .section-head{text-align:center;margin-bottom:56px} .section-head.left{text-align:left} .section-head.left .section-h,.section-head.left .section-sub{margin-left:0;margin-right:auto} .section-head.center .section-h{margin-left:auto;margin-right:auto} .section-head.center .section-sub{margin:18px auto 0} /* ---------- GLASS CARD BASE ---------- */ .glass{ padding:28px;border-radius:22px; background:linear-gradient(180deg,rgba(13,26,40,.65),rgba(9,16,28,.35)); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06); } .glass.elevated{box-shadow:0 30px 80px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)} .glass-pill{padding:8px 16px;border-radius:999px;background:rgba(13,26,40,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(14,165,233,.3);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#cfe8fb;display:inline-flex;gap:10px;align-items:center} .glass-pill i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px rgba(14,165,233,.8);animation:pulse 2s ease-in-out infinite} /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:14px;font-size:14px;font-weight:600;min-height:48px;transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease,border-color .25s ease} .btn:hover{transform:translateY(-2px)} .btn-grad{background:var(--grad);color:#fff;box-shadow:0 0 50px rgba(14,165,233,.3),0 18px 40px rgba(147,51,234,.22)} .btn-grad:hover{box-shadow:0 0 70px rgba(14,165,233,.4),0 24px 50px rgba(147,51,234,.3)} .btn-glass{background:rgba(13,26,40,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border3)} .btn-glass:hover{border-color:var(--teal)} .btn .arr{transition:transform .25s ease} .btn:hover .arr{transform:translateX(4px)} /* ---------- NAV ---------- */ .nav{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:50;width:calc(100% - 40px);max-width:1240px} .nav-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:rgba(13,26,40,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:999px;box-shadow:0 20px 50px rgba(0,0,0,.25)} .nav-wm{font-size:16px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:10px} .nav-wm .arro{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .nav-links{display:flex;gap:28px} .nav-links a{font-size:13px;color:var(--muted);transition:color .2s ease} .nav-links a:hover,.nav-links a.active{color:var(--text)} .nav-right{display:flex;gap:10px;align-items:center} .nav-curr{display:flex;gap:2px;padding:3px;background:rgba(0,0,0,.3);border-radius:999px;border:1px solid var(--border);font-family:var(--mono);font-size:10px} .nav-curr span{padding:4px 8px;border-radius:999px;color:var(--muted);cursor:pointer} .nav-curr span.on{background:var(--grad);color:#fff} .nav-cta{padding:8px 16px;background:var(--grad);border-radius:999px;font-weight:600;font-size:12px;color:#fff;box-shadow:0 0 30px rgba(14,165,233,.35)} @media (max-width:900px){.nav-links,.nav-curr{display:none}} /* ---------- HERO ---------- */ .hero{padding:150px 0 90px;text-align:center} .hero.left{text-align:left} .hero-h1{margin-top:28px;font-size:clamp(3rem,8vw,7rem);font-weight:800;letter-spacing:-5px;line-height:.95;text-wrap:balance} .hero-sub{margin:28px auto 0;max-width:620px;font-size:18px;color:var(--muted);line-height:1.6;text-wrap:pretty} .hero.left .hero-sub{margin-left:0;margin-right:auto} .hero-ctas{margin-top:36px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .hero.left .hero-ctas{justify-content:flex-start} /* ---------- STAT CHIPS ---------- */ .chips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:64px} @media (max-width:860px){.chips{grid-template-columns:repeat(2,1fr)}} .chip{padding:22px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)} .chip .n{font-size:38px;font-weight:800;letter-spacing:-1.5px;line-height:1;font-variant-numeric:tabular-nums} .chip .k{margin-top:10px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700} .chip .d{margin-top:4px;font-size:12px;color:var(--dim)} /* ---------- PROCESS CARDS ---------- */ .proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:900px){.proc-grid{grid-template-columns:1fr}} .proc{padding:32px;border-radius:22px;background:linear-gradient(180deg,rgba(13,26,40,.7),rgba(9,16,28,.4));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;transition:transform .3s ease} .proc:hover{transform:translateY(-6px)} .proc::before{content:'';position:absolute;top:0;right:0;width:300px;height:300px;background:radial-gradient(circle at center,rgba(14,165,233,.18),transparent 60%);transform:translate(40%,-40%);pointer-events:none} .proc:nth-child(2)::before{background:radial-gradient(circle at center,rgba(147,51,234,.2),transparent 60%)} .proc>*{position:relative} .proc .d{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);font-weight:700} .proc h3{margin-top:14px;font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1.1} .proc p{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.7} /* ---------- PRICING ---------- */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch} @media (max-width:960px){.price-grid{grid-template-columns:1fr}} .plan{padding:36px 30px;border-radius:24px;background:linear-gradient(180deg,rgba(13,26,40,.65),rgba(9,16,28,.35));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:18px;position:relative;transition:transform .3s ease;box-shadow:0 30px 80px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)} .plan:hover{transform:translateY(-4px)} .plan.featured{background:linear-gradient(180deg,rgba(14,165,233,.14),rgba(147,51,234,.1));border-color:transparent;box-shadow:0 40px 100px rgba(14,165,233,.2),0 20px 60px rgba(147,51,234,.15),inset 0 1px 0 rgba(255,255,255,.12);transform:scale(1.03)} .plan.featured::after{content:'';position:absolute;inset:0;border-radius:24px;pointer-events:none;background:linear-gradient(140deg,rgba(14,165,233,.6),transparent 35%,transparent 65%,rgba(147,51,234,.6));mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px} .plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad);padding:6px 14px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;box-shadow:0 10px 30px rgba(14,165,233,.4)} .plan .pn{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700} .plan.featured .pn{color:var(--teal)} .plan .pp{display:flex;align-items:baseline;gap:8px} .plan .pp .n{font-size:52px;font-weight:800;letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums} .plan.featured .pp .n{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(14,165,233,.3))} .plan .pp .c{font-size:12px;color:var(--muted);letter-spacing:1px} .plan .for{font-size:14px;color:var(--muted);line-height:1.6} .plan ul{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)} .plan ul li{display:flex;gap:12px;font-size:14px;line-height:1.5} .plan ul li::before{content:'✓';flex-shrink:0;width:18px;height:18px;border-radius:50%;background:rgba(14,165,233,.15);border:1px solid rgba(14,165,233,.4);display:grid;place-items:center;font-size:10px;color:var(--teal);margin-top:2px} .plan .cta{margin-top:auto;padding:14px;border-radius:12px;font-weight:600;font-size:14px;text-align:center;border:1px solid rgba(255,255,255,.15);justify-content:center} .plan.featured .cta{background:var(--grad);border-color:transparent;box-shadow:0 0 40px rgba(14,165,233,.3)} /* ---------- WORK GRID ---------- */ .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.work-grid{grid-template-columns:1fr}} .wk{border-radius:20px;overflow:hidden;background:rgba(13,26,40,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;display:block;color:inherit} .wk:hover{transform:translateY(-6px);border-color:rgba(14,165,233,.3);box-shadow:0 30px 70px rgba(14,165,233,.15)} .wk .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--surface)} .wk .thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transform-origin:top left} .wk .meta{padding:20px 22px} .wk .meta .row{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700} .wk .meta .row .cat{color:var(--teal)} .wk .meta .t{margin-top:8px;font-size:18px;font-weight:800;letter-spacing:-.5px} .wk .meta .d{margin-top:4px;font-size:13px;color:var(--muted)} /* ---------- TESTIMONIALS ---------- */ .tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:900px){.tm-grid{grid-template-columns:1fr}} .tm{padding:28px;border-radius:20px;background:linear-gradient(180deg,rgba(13,26,40,.65),rgba(9,16,28,.35));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 50px rgba(0,0,0,.25)} .tm .stars{color:#f59e0b;font-size:14px;letter-spacing:2px} .tm blockquote{font-size:16px;line-height:1.55;font-weight:500} .tm blockquote::before{content:'\201C'}.tm blockquote::after{content:'\201D'} .tm .by{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:12px;align-items:center} .tm .av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800;font-size:13px;box-shadow:0 0 20px rgba(14,165,233,.35)} .tm .n{font-size:14px;font-weight:700} .tm .r{font-size:12px;color:var(--muted)} /* ---------- FAQ ---------- */ .faq{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:10px} .faq-item{border-radius:16px;background:rgba(13,26,40,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:border-color .25s ease} .faq-item.open{border-color:rgba(14,165,233,.35)} .faq-q{width:100%;padding:22px 26px;text-align:left;display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:16px;font-weight:700;letter-spacing:-.2px} .faq-q .icn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border3);position:relative;flex-shrink:0;transition:all .3s ease} .faq-q .icn::before,.faq-q .icn::after{content:'';position:absolute;background:var(--text);transition:transform .3s ease} .faq-q .icn::before{width:10px;height:1.5px}.faq-q .icn::after{width:1.5px;height:10px} .faq-item.open .faq-q .icn{border-color:var(--teal);background:rgba(14,165,233,.15)} .faq-item.open .faq-q .icn::after{transform:scaleY(0)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease} .faq-a-inner{padding:0 26px 26px;color:var(--muted);line-height:1.75;max-width:70ch} /* ---------- FORMS ---------- */ .field{margin-bottom:18px} .field label{display:block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .field input,.field textarea,.field select{width:100%;padding:14px 16px;background:rgba(13,26,40,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border2);border-radius:12px;color:var(--text);font:inherit;font-size:15px;transition:border-color .25s ease} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,165,233,.15)} .field textarea{resize:vertical;min-height:120px} /* ---------- CLOSE CTA BANNER ---------- */ .close-cta{margin-top:40px;padding:80px 50px;border-radius:32px;background:linear-gradient(140deg,rgba(14,165,233,.2),rgba(147,51,234,.2));backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;text-align:center;box-shadow:0 60px 150px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1)} .close-cta::before{content:'';position:absolute;top:-50%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(14,165,233,.5),transparent 60%);filter:blur(40px);pointer-events:none} .close-cta::after{content:'';position:absolute;bottom:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(147,51,234,.5),transparent 60%);filter:blur(40px);pointer-events:none} .close-cta>*{position:relative;z-index:1} .close-cta h2{font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-3.5px;font-weight:800;line-height:.95;text-wrap:balance} .close-cta p{margin:24px auto 0;font-size:17px;color:var(--muted);max-width:56ch;line-height:1.6} .close-cta .ctas{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .close-cta .pledge{margin-top:26px;display:inline-flex;gap:10px;align-items:center;padding:10px 18px;border-radius:999px;background:rgba(14,165,233,.14);border:1px solid rgba(14,165,233,.4);font-size:11px;letter-spacing:2px;color:#cfe8fb;text-transform:uppercase;font-weight:600} /* ---------- FOOTER ---------- */ .footer{border-top:1px solid var(--border);padding:72px 0 36px;margin-top:100px;background:rgba(4,7,14,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px} @media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}} .footer-brand .wm{font-size:22px;font-weight:800;letter-spacing:-.7px} .footer-brand .wm .arro{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .footer-brand .bar{width:80px;height:2px;background:var(--grad);margin:8px 0} .footer-brand .sub{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700} .footer-brand .tagline{margin-top:18px;color:var(--muted);font-size:14px;max-width:36ch;line-height:1.6} .footer-col h5{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:14px} .footer-col a{display:block;font-size:14px;color:var(--text);margin-bottom:8px;transition:color .2s ease} .footer-col a:hover{color:var(--teal)} .footer-bottom{margin-top:56px;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)} /* ---------- REVEAL ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease} .reveal.in,.reveal.visible{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---------- BLOG ---------- */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:900px){.blog-grid{grid-template-columns:1fr}} .post{padding:26px;border-radius:20px;background:rgba(13,26,40,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);transition:transform .3s ease,border-color .3s ease;display:flex;flex-direction:column;gap:14px;min-height:280px;color:inherit} .post:hover{transform:translateY(-4px);border-color:rgba(14,165,233,.3)} .post .pmeta{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .post .pmeta .cat{color:var(--teal)} .post .ptitle{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.25} .post .pdesc{color:var(--muted);font-size:14px;line-height:1.65} .post .pread{margin-top:auto;font-size:13px;font-weight:600;color:var(--teal);display:inline-flex;gap:6px} /* ---------- SMALL-MOBILE OVERFLOW FIXES (≤480px) ---------- */ @media (max-width:480px){ .container{padding:0 16px} .nav{width:calc(100% - 24px);top:14px} .hero{padding:130px 0 70px} .hero-h1{font-size:clamp(2.2rem,11vw,2.8rem);letter-spacing:-2px;line-height:1.02} .hero-sub{font-size:16px} .section-h{font-size:clamp(2rem,9vw,2.5rem);letter-spacing:-1.5px;max-width:100%} .section-sub{font-size:16px} .audit-hero{padding:110px 16px 40px!important;gap:1.5rem!important} .audit-hero .hero-h1{font-size:clamp(2rem,9vw,2.5rem)!important;letter-spacing:-1.5px!important} .chips{grid-template-columns:1fr 1fr;gap:10px;margin-top:48px} .chip{padding:16px} .chip .n{font-size:30px;letter-spacing:-1px} .price-grid{gap:14px} .plan{padding:28px 22px} .plan.featured{transform:none} .plan .pp .n{font-size:42px;letter-spacing:-1.5px} .close-cta{padding:56px 24px;border-radius:24px} .close-cta h2{font-size:clamp(2rem,8.5vw,2.5rem);letter-spacing:-1.5px} .close-cta p{font-size:16px} .footer{padding:56px 0 28px;margin-top:72px} .footer-grid{gap:28px} .footer-brand .wm{font-size:20px} .proc{padding:24px} .proc h3{font-size:22px;letter-spacing:-.5px} .tm{padding:22px} } /* niche-specific hero preview band (audit landing pages) */ .niche-preview{max-width:1280px;margin:0 auto;padding:0 32px 60px} .niche-preview-inner{border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.08);position:relative;background:linear-gradient(180deg,rgba(13,26,40,.65),rgba(9,16,28,.35))} .niche-preview-inner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(4,7,14,.45));pointer-events:none} .niche-preview img{display:block;width:100%;height:auto} @media(max-width:900px){.niche-preview{padding:0 20px 40px}}