/* ===================================================================== BlueMint Services — Round 5 design system One cohesive, modern, editorial light theme. Shared by every page. Visual language: confident type, calm white space, a single blue→cyan→mint accent, recurring "surface" + "AI answer" motifs. ===================================================================== */ /* ---------- Fonts ---------- Loaded via in each page's (parallel, non-blocking) rather than an @import here (which would chain: site.css → fonts). */ /* ---------- Tokens ---------- */ :root{ --bg:#F7F8FB; /* page */ --bg-tint:#EEF2F9; /* alt band */ --panel:#FFFFFF; /* cards */ --ink:#0B1018; /* headings */ --ink-soft:#46505F; /* body */ --ink-dim:#5F6874; /* meta — AA-contrast on light bg */ --line:rgba(11,16,24,.10); --line-strong:rgba(11,16,24,.16); --blue:#2B5BFF; --blue-d:#1E45D6; --cyan:#16C7E8; --mint:#0FB89A; --mint-bright:#1FE0BE; --navy:#0B1F3A; --navy-2:#0E1116; --grad:linear-gradient(120deg,var(--blue),var(--cyan) 55%,var(--mint)); --grad-soft:linear-gradient(135deg,rgba(43,91,255,.10),rgba(15,184,154,.08)); --maxw:1180px; --pad:clamp(20px,5vw,56px); --r-lg:22px; --r-md:16px; --r-sm:12px; --shadow-sm:0 8px 22px -16px rgba(11,16,24,.30); --shadow-md:0 18px 44px -26px rgba(11,16,24,.34); --shadow-lift:0 28px 56px -28px rgba(43,91,255,.40); --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg);color:var(--ink);line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } svg{display:block} img{max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;line-height:1.08;letter-spacing:-.02em;color:var(--ink)} ::selection{background:rgba(43,91,255,.18)} /* ---------- Layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .section{position:relative;padding:clamp(64px,9vw,116px) 0} .band{background:var(--bg-tint)} .band-white{background:var(--panel)} .band-ink{background:var(--navy-2);color:#fff} .center{text-align:center} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} /* gradient blob decoration */ .blob{position:absolute;border-radius:50%;filter:blur(44px);opacity:.45;pointer-events:none;z-index:0;will-change:transform} .blob-blue{background:radial-gradient(circle,rgba(43,91,255,.34),transparent 70%)} .blob-mint{background:radial-gradient(circle,rgba(15,184,154,.30),transparent 70%)} /* ---------- Eyebrow / section head ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk'; font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)} .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)} .eyebrow.center-eb{justify-content:center} .sec-head{max-width:720px} .sec-head.center{margin:0 auto} .sec-head h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;margin-top:16px} .sec-head .lead{color:var(--ink-soft);font-size:clamp(1.04rem,1.5vw,1.22rem);margin-top:18px;max-width:640px} .sec-head.center .lead{margin-left:auto;margin-right:auto} .kbig{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:700;letter-spacing:-.035em} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:600; font-size:15px;padding:14px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s; line-height:1} .btn svg{width:17px;height:17px} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 28px -14px rgba(43,91,255,.7)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(43,91,255,.8)} .btn-ghost{border-color:var(--line-strong);color:var(--ink);background:rgba(255,255,255,.4)} .btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)} .btn-light{background:#fff;color:var(--ink)} .btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} /* ---------- Nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s,border-color .3s} .nav-inner{max-width:var(--maxw);margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between} .nav.scrolled{background:rgba(247,248,251,.97);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:700;font-size:18px;letter-spacing:-.01em} .brand .mk{width:34px;height:34px;flex:none} .brand b{font-weight:700} .brand span{color:var(--mint)} .nav-links{display:flex;align-items:center;gap:18px} .nav-links a.link{font-size:13.5px;font-weight:500;color:var(--ink-soft);transition:color .2s;position:relative} .nav-links a.link:hover,.nav-links a.link[aria-current="page"]{color:var(--ink)} .nav-links a.link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--grad)} .nav-cta{display:flex;align-items:center;gap:14px} /* desktop: single CTA lives in .nav-cta; the in-menu CTA is mobile-only */ .nav-links > .btn{display:none} /* inner pages (with .phero) get an anchored header from the start; home keeps its transparent hero nav */ body:has(.phero) .nav{background:rgba(247,248,251,.97);border-bottom:1px solid var(--line)} /* services dropdown */ .has-dd{position:relative;display:flex;align-items:center} .has-dd::after{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:16px} .ddtoggle{display:inline-flex;align-items:center;gap:5px} .ddtoggle .cv{width:13px;height:13px;transition:transform .25s var(--ease)} .has-dd:hover .ddtoggle .cv,.has-dd:focus-within .ddtoggle .cv{transform:rotate(180deg)} .dd-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);min-width:236px; background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);padding:8px; opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:60} .has-dd:hover .dd-menu,.has-dd:focus-within .dd-menu,.has-dd.open .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .dd-menu a{display:flex;flex-direction:column;gap:1px;padding:10px 13px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink)} .dd-menu a small{color:var(--ink-dim);font-size:12px;font-weight:400} .dd-menu a:hover{background:var(--bg-tint)} .dd-menu a[aria-current="page"]{background:var(--grad-soft)} .nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:10px;padding:9px 10px;cursor:pointer} .nav-toggle span{display:block;width:19px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;transition:.25s} @media(max-width:1120px){ .nav-links{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:flex-start;gap:6px; background:rgba(247,248,251,.97);backdrop-filter:blur(18px);padding:90px var(--pad) 30px; transform:translateY(-110%);transition:transform .4s var(--ease);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)} .nav-links.open{transform:none} .nav-links a.link{font-size:19px;padding:11px 0;width:100%} .nav-links > .btn{display:inline-flex;margin-top:10px} .nav-toggle{display:block;z-index:60;position:relative} .nav-cta .btn:not(.nav-toggle){display:none} .has-dd{display:block;width:100%} .has-dd .ddtoggle .cv{display:none} .dd-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:transparent; padding:2px 0 8px 16px;min-width:0} .dd-menu a{padding:8px 0} .dd-menu a small{display:none} } /* ---------- Generic cards & grids ---------- */ .grid{display:grid;gap:22px} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} @media(max-width:920px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px; box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} .card.hover:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)} .card h3{font-size:1.28rem;font-weight:600;margin-bottom:8px} .card h4{font-size:1.12rem;font-weight:600;margin-bottom:7px} .card p{color:var(--ink-soft);font-size:.97rem} /* icon chip */ .ichip{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center; background:var(--grad-soft);border:1px solid var(--line);margin-bottom:18px} .ichip svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.7} .ichip.solid{background:var(--grad)} .ichip.solid svg{stroke:#fff} /* number tag */ .ntag{font-family:'Space Grotesk';font-weight:600;font-size:13px;color:var(--blue);letter-spacing:.04em} /* ---------- Stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{padding:6px 4px} .stat .num{font-family:'Space Grotesk';font-weight:700;font-size:clamp(2.1rem,4vw,3rem);letter-spacing:-.03em; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .stat .lbl{color:var(--ink-soft);font-size:.92rem;margin-top:9px} /* ---------- Surface diagram (recurring motif) ---------- */ .surface-stage{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1} .surface-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px; text-align:center} .surface-node .pip{width:54px;height:54px;border-radius:15px;background:var(--panel);border:1px solid var(--line-strong); display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease)} .surface-node:hover .pip{transform:translateY(-4px)} .surface-node .pip svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.7} .surface-node .nl{font-size:12.5px;font-weight:600;color:var(--ink-soft)} .surface-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:128px;height:128px;border-radius:50%; background:var(--grad);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff; box-shadow:0 22px 50px -18px rgba(43,91,255,.7);z-index:3;text-align:center;padding:10px} .surface-core b{font-family:'Space Grotesk';font-size:15px;font-weight:600;line-height:1.15} .surface-core span{font-size:10.5px;opacity:.85;letter-spacing:.08em;text-transform:uppercase;margin-top:3px} /* surface diagram — radar sweep (touchpoints add up to presence; viewers look in) */ .surface-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .surface-lines .tpL line{stroke-width:1.1;opacity:.42} .surface-lines .sightL line{stroke:rgba(15,184,154,.6);stroke-width:1.2;stroke-dasharray:2 4} .surface-bound{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74%;height:74%;border:1.5px dashed rgba(43,91,255,.26);border-radius:50%;z-index:1;pointer-events:none} .surface-sweep{position:absolute;left:50%;top:50%;width:74%;height:74%;transform:translate(-50%,-50%);border-radius:50%;z-index:1;pointer-events:none;background:conic-gradient(from 0deg,rgba(43,91,255,.22),rgba(43,91,255,.03) 20%,transparent 30%);animation:ssweep 6s linear infinite} @keyframes ssweep{to{transform:translate(-50%,-50%) rotate(360deg)}} .surface-node{z-index:3} .surface-node .pip{animation:spop 6s linear infinite} .surface-node:nth-of-type(4) .pip{animation-delay:0s} .surface-node:nth-of-type(5) .pip{animation-delay:1s} .surface-node:nth-of-type(6) .pip{animation-delay:2s} .surface-node:nth-of-type(7) .pip{animation-delay:3s} .surface-node:nth-of-type(8) .pip{animation-delay:4s} .surface-node:nth-of-type(9) .pip{animation-delay:5s} @keyframes spop{0%,90%,100%{transform:scale(1);border-color:var(--line-strong)}95%{transform:scale(1.14);border-color:var(--mint)}} .surface-viewer{position:absolute;transform:translate(-50%,-50%);z-index:5;display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line-strong);border-radius:999px;padding:6px 12px;box-shadow:var(--shadow-sm);font-family:'Space Grotesk';font-weight:600;font-size:12px;color:var(--ink);white-space:nowrap;animation:svp 6s ease-in-out infinite} .surface-viewer svg{width:15px;height:15px;stroke:var(--mint);fill:none;stroke-width:2} @keyframes svp{0%,100%{opacity:.8}50%{opacity:1}} @media(prefers-reduced-motion:reduce){.surface-sweep,.surface-node .pip,.surface-viewer{animation:none}} /* ---------- AI answer card (recurring motif) ---------- */ .ai-card{position:relative;border-radius:18px;background:var(--navy-2);padding:24px 24px 22px;color:#fff; box-shadow:0 26px 60px -28px rgba(14,17,22,.7);overflow:hidden} .ai-card::before{content:"";position:absolute;top:-90px;right:-60px;width:240px;height:240px;border-radius:50%; background:radial-gradient(circle,rgba(43,91,255,.30),transparent 70%)} .ai-card .ai-top{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:15px} .ai-card .ai-badge{width:26px;height:26px;border-radius:8px;background:var(--grad);display:flex;align-items:center;justify-content:center} .ai-card .ai-badge svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2} .ai-card .ai-lab{font-family:'Space Grotesk';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-bright)} .ai-card .ai-q{position:relative;font-size:.86rem;color:rgba(255,255,255,.6);margin-bottom:12px;font-style:italic} .ai-card .ai-body{position:relative;font-size:.98rem;line-height:1.62;color:rgba(255,255,255,.93)} .ai-card .ai-body .hl{color:var(--mint-bright);font-weight:600;font-style:normal} .ai-card .caret{display:inline-block;width:2px;height:1.05em;background:var(--mint-bright);margin-left:2px;vertical-align:-2px;animation:caret 1s steps(1) infinite} @keyframes caret{50%{opacity:0}} .ai-card .ai-srcs{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .ai-card .ai-src{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.16);border-radius:999px; padding:5px 11px;font-size:.66rem;letter-spacing:.04em;color:rgba(255,255,255,.8);font-family:'Space Grotesk'} .ai-card .ai-src .d{width:7px;height:7px;border-radius:50%;background:var(--mint-bright)} /* ---------- Pills / chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:999px; padding:9px 16px;background:var(--panel);font-size:13.5px;font-weight:500;color:var(--ink-soft);box-shadow:var(--shadow-sm)} .chip svg{width:15px;height:15px;stroke:var(--mint);fill:none;stroke-width:2} /* tick list */ .ticks{list-style:none;display:flex;flex-direction:column;gap:14px} .ticks li{display:flex;gap:13px;font-size:1rem;color:var(--ink-soft)} .ticks li .tk{flex:none;width:24px;height:24px;border-radius:8px;background:var(--grad-soft);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;margin-top:2px} .ticks li .tk svg{width:14px;height:14px;stroke:var(--mint);fill:none;stroke-width:2.4} .ticks li b{color:var(--ink)} /* before / after */ .ba{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:680px){.ba{grid-template-columns:1fr}} .ba .col{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:var(--panel);box-shadow:var(--shadow-sm)} .ba .col.after{border-color:rgba(15,184,154,.4);background:linear-gradient(180deg,rgba(15,184,154,.05),var(--panel))} .ba .tag{font-family:'Space Grotesk';font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-dim)} .ba .col.after .tag{color:var(--mint)} .ba h4{margin:8px 0 10px;font-size:1.15rem;font-weight:600} .ba p{color:var(--ink-soft);font-size:.96rem} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s} @media(max-width:760px){.steps{grid-template-columns:1fr}} .step{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;background:var(--panel);box-shadow:var(--shadow-sm)} .step .sn{font-family:'Space Grotesk';font-weight:700;font-size:1rem;width:38px;height:38px;border-radius:11px; background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .step h4{font-size:1.14rem;font-weight:600;margin-bottom:7px} .step p{color:var(--ink-soft);font-size:.95rem} /* big CTA band */ .cta-band{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a1530,#0e2747 60%,#0c3a4f);color:#fff; border-radius:28px;padding:clamp(40px,6vw,72px);text-align:center} .cta-band h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;color:#fff} .cta-band h2 .grad-text{background:linear-gradient(90deg,var(--mint-bright),#7fe6d4);-webkit-background-clip:text;background-clip:text;color:transparent} .cta-band p{color:#bcd4e8;margin:18px auto 0;max-width:520px;font-size:1.05rem} .cta-band .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px} .cta-band .email{margin-top:24px;font-size:.9rem;color:#8fb0cc} .cta-band .email a{color:var(--mint-bright)} /* ---------- Footer ---------- */ .foot{background:var(--navy-2);color:#9fb0c4;padding:60px 0 34px} .foot .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px} @media(max-width:760px){.foot .ftop{grid-template-columns:1fr}} .foot .brand{color:#fff;font-size:20px;margin-bottom:14px} .foot .fdesc{font-size:.92rem;max-width:34ch;line-height:1.7} .foot h5{color:#fff;font-family:'Space Grotesk';font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px} .foot a.fl{display:block;font-size:.94rem;padding:5px 0;color:#9fb0c4;transition:color .2s} .foot a.fl:hover{color:var(--mint-bright)} .foot .fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.1); margin-top:42px;padding-top:22px;font-size:.82rem;color:#6f8298} /* ---------- Reveal animations ---------- */ .no-js .reveal{opacity:1!important;transform:none!important} .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .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}.caret{animation:none}} /* ---------- Page hero (non-WebGL inner pages) ---------- */ .phero{position:relative;padding:clamp(132px,15vw,176px) 0 clamp(40px,6vw,70px);overflow:hidden} .phero .eyebrow{margin-bottom:18px} .phero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);font-weight:700;letter-spacing:-.035em} .phero .lead{color:var(--ink-soft);font-size:clamp(1.08rem,1.7vw,1.34rem);margin-top:22px;max-width:600px} .phero .pcta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} /* utility */ .mw-720{max-width:720px}.mw-640{max-width:640px}.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:46px} .two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center} @media(max-width:880px){.two-col{grid-template-columns:1fr}} .lead-soft{color:var(--ink-soft);font-size:1.05rem} /* ---------- AEO content blocks (FAQ, definitions, stats, testimonials) ---------- */ .faq{max-width:820px;margin:0 auto} .faq details{border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow-sm);margin-bottom:12px;overflow:hidden} .faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:'Space Grotesk';font-weight:600;font-size:1.04rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.3rem;color:var(--blue);transition:transform .25s;line-height:1} .faq details[open] summary::after{transform:rotate(45deg)} .faq .fa{padding:0 22px 20px;color:var(--ink-soft);font-size:.96rem;line-height:1.62;max-width:72ch} .defbox{border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:14px;background:var(--panel);box-shadow:var(--shadow-sm);padding:22px 26px;max-width:780px} .defbox .dt{font-family:'Space Grotesk';font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--blue);margin-bottom:8px} .defbox p{color:var(--ink-soft);font-size:1.02rem;line-height:1.62}.defbox p b{color:var(--ink)} .defbox p+p{margin-top:12px} .bynum{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:760px){.bynum{grid-template-columns:repeat(2,1fr)}} .bynum .n{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.05} .bynum .l{color:var(--ink-soft);font-size:.92rem;margin-top:8px} .tcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow-sm);padding:26px;display:flex;flex-direction:column} .tcard .wtag{font-family:'Space Grotesk';font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--blue);margin-bottom:10px} .tcard .q{font-size:1rem;color:var(--ink);line-height:1.55;flex:1} .tcard .who{margin-top:16px;font-size:.85rem;color:var(--ink-dim)}.tcard .who b{color:var(--ink);font-family:'Space Grotesk';font-weight:600} .answer-lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);max-width:70ch;line-height:1.6} /* ---- Reality: Brand SERP look-up mock (replaces button-like chips) ---- */ .serp-mock{max-width:580px;margin:36px auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px -34px rgba(10,27,51,.30);overflow:hidden;text-align:left} .serp-chrome{display:flex;align-items:center;gap:7px;padding:12px 16px;background:linear-gradient(180deg,#f7f9fc,#eaeff6);border-bottom:1px solid var(--line)} .serp-chrome .dot{width:10px;height:10px;border-radius:50%;background:#d3dbe6;flex:0 0 auto} .serp-chrome .serp-url{margin-left:8px;flex:1;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:.82rem;color:var(--ink-dim);display:flex;align-items:center;gap:8px} .serp-chrome .serp-url svg{width:14px;height:14px;stroke:var(--ink-dim);fill:none;stroke-width:2;flex:0 0 auto} .serp-chrome .serp-url b{color:var(--ink);font-weight:600} .serp-chrome .serp-url .cur{width:1.5px;height:15px;background:var(--blue);display:inline-block;animation:serpcur 1.05s steps(1) infinite;margin-left:-4px} @keyframes serpcur{50%{opacity:0}} .serp-body{padding:16px 20px 18px} .serp-res{padding:10px 0;border-bottom:1px dashed var(--line)} .serp-res:last-of-type{border-bottom:none} .serp-res .t{font-size:.95rem;color:var(--blue);font-weight:600;line-height:1.3} .serp-res .u{font-size:.76rem;color:#0c8f78;margin-top:1px} .serp-res .d{font-size:.82rem;color:var(--ink-soft);margin-top:3px} .serp-who{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:.83rem;color:var(--ink-dim);display:flex;flex-wrap:wrap;align-items:center;gap:6px} .serp-who .wl{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600} .serp-who .wl svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:2} .serp-who .sep{color:var(--line)} .serp-who .wl.ai svg{stroke:#0c8f78} /* ---- Reality: person viewing two screens (Google search + AI answer) ---- */ .viewer-scene{max-width:500px;margin:34px auto 0} .viewer-scene .screens{display:flex;gap:14px;justify-content:center;align-items:stretch} .screen{flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 22px 46px -28px rgba(10,27,51,.34);text-align:left} .screen .scr-cap{display:flex;align-items:center;gap:6px;padding:8px 11px;font-size:.72rem;font-weight:700;letter-spacing:.01em;color:var(--ink-dim);background:linear-gradient(180deg,#f7f9fc,#eaeff6);border-bottom:1px solid var(--line)} .screen .scr-cap svg{width:13px;height:13px;stroke:var(--blue);fill:none;stroke-width:2;flex:0 0 auto} .screen.ai .scr-cap{color:#0c8f78} .screen.ai .scr-cap svg{stroke:#0c8f78} .scr-body{padding:11px 12px;min-height:96px} .sline{font-size:.75rem;color:var(--ink-soft);padding:5px 0;border-bottom:1px dashed var(--line);line-height:1.35} .sline:last-child{border-bottom:none} .sline b{color:var(--blue)} .sline.muted{color:var(--ink-dim)} .aians{font-size:.79rem;line-height:1.55;color:var(--ink-soft);margin:0} .aians b{color:#0c8f78;font-weight:600} .viewer-figure{display:flex;justify-content:center;margin-top:-4px} .viewer-figure svg{width:108px;height:58px;display:block} @media(max-width:420px){.viewer-scene .screens{gap:9px}.scr-body{min-height:86px}} /* ---- Tangible results: visual stat cards ---- */ .rescard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 24px;box-shadow:0 18px 42px -30px rgba(10,27,51,.28);display:flex;flex-direction:column} .rescard .resn{font-size:clamp(2.5rem,5.4vw,3.4rem);font-weight:700;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .rescard .resl{font-weight:700;color:var(--ink);font-size:1.04rem;margin-top:10px} .rescard p{color:var(--ink-soft);font-size:.9rem;margin:6px 0 0;line-height:1.5} .rescard .restag{margin-top:14px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-dim)} /* ---- Reality: find -> impression -> decision flow ---- */ .impression{max-width:360px;margin:0 auto;display:flex;flex-direction:column;align-items:center} .imp-find{display:flex;gap:11px;width:100%;align-items:stretch} .mini{flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 16px 36px -28px rgba(10,27,51,.28);display:flex;flex-direction:column} .mini-cap{display:flex;align-items:center;gap:5px;padding:7px 10px;font-size:.68rem;font-weight:700;color:var(--ink-dim);border-bottom:1px solid var(--line)} .mini-cap svg{width:12px;height:12px;stroke:var(--blue);fill:none;stroke-width:2;flex:none} .mini.a .mini-cap{color:#0c8f78}.mini.a .mini-cap svg{stroke:#0c8f78} .mini-body{padding:10px;flex:1;display:flex;flex-direction:column;justify-content:center} .mini-bar{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:.7rem;color:var(--ink-soft);border:1px solid var(--line);border-radius:7px;padding:5px 8px;margin-bottom:9px} .mini-bar svg{width:11px;height:11px;stroke:var(--ink-dim);fill:none;stroke-width:2;flex:none} .mini-lines,.mini-ans{display:flex;flex-direction:column;gap:6px} .mini-lines span,.mini-ans span{height:6px;border-radius:3px;background:#e7ecf3} .mini-lines span:first-child{width:72%;background:linear-gradient(90deg,var(--blue),#9db6ff)} .mini-lines span:nth-child(2){width:92%}.mini-lines span:nth-child(3){width:58%} .mini-ans span{background:#d9efe8}.mini-ans span:first-child{width:90%}.mini-ans span:nth-child(2){width:72%}.mini-ans span.short{width:50%} .imp-screen{flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(10,27,51,.32);text-align:left} .imp-cap{display:flex;align-items:center;gap:5px;padding:7px 10px;font-size:.7rem;font-weight:700;color:var(--ink-dim);background:linear-gradient(180deg,#f7f9fc,#eaeff6);border-bottom:1px solid var(--line)} .imp-cap svg{width:12px;height:12px;stroke:var(--blue);fill:none;stroke-width:2;flex:0 0 auto} .imp-screen.ai .imp-cap{color:#0c8f78} .imp-screen.ai .imp-cap svg{stroke:#0c8f78} .iline{font-size:.72rem;color:var(--ink-soft);padding:5px 10px;border-bottom:1px dashed var(--line);line-height:1.3} .iline:last-child{border-bottom:none} .iline b{color:var(--blue)} .iline.muted{color:var(--ink-dim)} .ians{font-size:.73rem;color:var(--ink-soft);margin:0;padding:8px 10px;line-height:1.5} .imp-conn{display:flex;flex-direction:column;align-items:center;padding:7px 0} .imp-conn::before{content:"";width:2px;height:15px;background:linear-gradient(var(--line),var(--blue));margin-bottom:5px} .imp-txt{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;color:var(--ink-dim);font-style:italic} .imp-emoji{display:inline-flex;font-style:normal} .imp-emoji svg{width:21px;height:21px} .imp-mind{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 16px;box-shadow:0 14px 34px -28px rgba(10,27,51,.3)} .imp-mind svg{width:30px;height:30px;flex:0 0 auto} .imp-think{font-size:.9rem;color:var(--ink);font-weight:600} .imp-decide{display:flex;gap:8px;margin-top:1px;flex-wrap:wrap;justify-content:center} .dout{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:#0a7f68} .dout svg{width:14px;height:14px;stroke:#0a7f68;fill:none;stroke-width:2} @media(max-width:420px){.imp-find{gap:8px}.imp-think{font-size:.82rem}} /* In-plain-terms authority line */ .defbox .bm-line{display:block;margin-top:11px;font-family:'Space Grotesk';font-weight:600;font-size:.88rem;color:var(--blue)} /* ---- Reality: credibility gauge (needle sweeps unconvincing -> credible on reveal) ---- */ .imp-gauge{display:flex;flex-direction:column;align-items:center;gap:5px;margin:4px 0} .imp-gauge svg{width:210px;max-width:100%;height:auto;overflow:visible} .g-arc{stroke-dashoffset:251} .g-needle{transform-box:view-box;transform-origin:100px 118px;transform:rotate(-70deg)} .impression.in .g-needle{animation:gswing 1.7s cubic-bezier(.34,1.12,.5,1) .25s forwards} .impression.in .g-arc{animation:gdash 1.7s ease .25s forwards} @keyframes gswing{from{transform:rotate(-70deg)}to{transform:rotate(72deg)}} @keyframes gdash{from{stroke-dashoffset:251}to{stroke-dashoffset:20}} .no-js .g-needle{transform:rotate(72deg)} .no-js .g-arc{stroke-dashoffset:20} @media(prefers-reduced-motion:reduce){.impression.in .g-needle,.impression.in .g-arc{animation:none}.g-needle{transform:rotate(72deg)}.g-arc{stroke-dashoffset:20}} /* ---- footer social ("Follow") ---- */ .fsocial{margin-top:24px} .fsocial-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#6f8299} .fsocial-icons{display:flex;gap:10px;margin-top:10px} .fsocial-icons a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid rgba(159,176,196,.22);color:#9fb0c4;transition:color .2s,background .2s,border-color .2s,transform .2s} .fsocial-icons svg{width:19px;height:19px;fill:currentColor} .fsocial-icons a:hover,.fsocial-icons a:focus-visible{color:#fff;border-color:transparent;background:var(--grad);transform:translateY(-2px)} .fsocial-icons a:focus-visible{outline:2px solid var(--mint-bright);outline-offset:2px} .floc{display:inline-flex;align-items:center;gap:7px;font-size:.94rem;padding:5px 0;color:#9fb0c4} .floc svg{width:15px;height:15px;stroke:var(--mint-bright);fill:none;stroke-width:2;flex:none}