/* =========================================================================== EVITEX — SITE LAYER (loads after evitex.css) Everything the inner pages need, built only from the tokens in evitex.css. Numbering continues from evitex.css (which ends at 43) so one index covers both files. Each block names its Elementor equivalent. =========================================================================== */ /* =========================================================================== 44. GLOBAL ADDITIONS =========================================================================== */ [hidden]{display:none !important;} /* stagger: evitex.css steps 7 children, the inner-page grids need 12 */ .stagger.in > *:nth-child(8){transition-delay:.51s} .stagger.in > *:nth-child(9){transition-delay:.58s} .stagger.in > *:nth-child(10){transition-delay:.65s} .stagger.in > *:nth-child(11){transition-delay:.72s} .stagger.in > *:nth-child(12){transition-delay:.79s} /* cross-page transition — pure CSS, no JS interception, header stays put. Elementor: Site Settings > Custom CSS (Chrome/Edge; other browsers just navigate normally). */ @view-transition{navigation:auto;} ::view-transition-old(root),::view-transition-new(root){animation-duration:.34s;animation-timing-function:cubic-bezier(.16,1,.3,1);} ::view-transition-old(root){animation-name:vtOut;} ::view-transition-new(root){animation-name:vtIn;} @keyframes vtOut{to{opacity:0;transform:translateY(-8px);}} @keyframes vtIn{from{opacity:0;transform:translateY(10px);}} .site-head{view-transition-name:evx-head;} /* the header slide-in is a first-visit moment only */ .is-return .site-head{animation:none;opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;} } /* unset contact details show dashed in local preview only (see evitex-config.js) */ .cfg-preview{outline:1.5px dashed rgba(43,178,231,.7);outline-offset:3px;cursor:help;} .toast{ position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:1300; transform:translate(-50%,16px);opacity:0;pointer-events:none; background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px; font-size:14px;line-height:1.45;box-shadow:var(--sh-3);max-width:min(92vw,460px);text-align:center; transition:opacity .3s var(--ease),transform .45s var(--ease-out); } .toast.is-on{opacity:1;transform:translate(-50%,0);} /* =========================================================================== 45. SERVICES MEGA MENU Elementor: Nav Menu > Mega Menu (Pro 3.16+) with a Container template; the pane switch is the only custom JS (evitex-site.js > MEGA MENU). =========================================================================== */ .nav__main{display:contents;} .nav__svc .nav__caret{transition:transform .3s var(--ease);} .nav__svc[aria-expanded="true"]{color:var(--blue);} .nav__svc[aria-expanded="true"] .nav__caret{transform:rotate(180deg);opacity:1;} .site-head.is-mega{background:rgba(255,255,255,.97);border-bottom-color:var(--line);} .mega{position:absolute;left:0;right:0;top:100%;padding-top:10px;visibility:hidden;pointer-events:none;} .mega.is-open{visibility:visible;pointer-events:auto;} .mega__card{ max-width:1080px;margin:0 auto;background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden; opacity:0;transform:translateY(-10px) scale(.985);transform-origin:top center; transition:opacity .26s var(--ease),transform .45s var(--ease-out); } .mega.is-open .mega__card{opacity:1;transform:none;} .mega__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);} .mega__list{position:relative;padding:12px;border-right:1px solid var(--line-soft);} .mega__hl{ position:absolute;left:12px;right:12px;top:0;height:0;border-radius:12px; background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line-soft); transition:transform .38s var(--ease-out),height .38s var(--ease-out);pointer-events:none; } .mega__item{ position:relative;z-index:1;display:grid;grid-template-columns:30px minmax(0,1fr) 18px; column-gap:10px;align-items:center;padding:10px 12px;border-radius:12px; } .mega__n{grid-row:1 / 3;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:12px;letter-spacing:.03em;color:#B6C2D8;transition:color .3s var(--ease);} .mega__t{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:-.02em;color:var(--ink);line-height:1.3;} .mega__d{grid-column:2;font-size:12.5px;color:var(--muted);line-height:1.4;} .mega__arr{grid-column:3;grid-row:1 / 3;width:15px;height:15px;color:var(--blue);opacity:0;transform:translateX(-5px);transition:opacity .3s var(--ease),transform .3s var(--ease);} .mega__item.is-on .mega__n{color:var(--cyan-ink);} .mega__item.is-on .mega__arr{opacity:1;transform:none;} .mega__item.is-on .mega__t{color:var(--blue);} .mega__panes{position:relative;background:linear-gradient(180deg,#FCFDFF,var(--paper-2));} .mega__pane{position:absolute;inset:0;padding:24px 26px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(10px);transition:opacity .25s var(--ease),transform .4s var(--ease-out),visibility .25s;} .mega__pane.is-on{opacity:1;visibility:visible;transform:none;} .mega__ph{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.025em;color:var(--ink);margin-bottom:6px;} .mega__pp{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:16px;max-width:44ch;} .mega__plats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:auto;} .mega__plat{ position:relative;display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line); border-radius:10px;background:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700; font-size:13px;letter-spacing:-.015em;color:var(--ink);overflow:hidden; transition:border-color .3s var(--ease),transform .3s var(--ease-out),box-shadow .35s var(--ease),color .3s var(--ease); } /* fixed-size logo badge: hover only scales/glows the badge itself, so the row's own box never changes size (no layout shift, no reflow). Real brand marks come in very different aspect ratios (square app icons vs. wide wordmarks), so the box is fixed and the image is contained inside it — this is what keeps every logo undistorted at a consistent visual size. */ .mega__plat-mk{ position:relative;z-index:1;flex-shrink:0;width:34px;height:22px;border-radius:7px; display:grid;place-items:center;background:#fff;border:1px solid var(--line); overflow:hidden;padding:3px;box-sizing:border-box; transition:transform .38s var(--ease-out),box-shadow .38s var(--ease-out),border-color .3s var(--ease); } .mega__plat-mk img{display:block;max-width:100%;max-height:100%;object-fit:contain;} /* Tight-crop fix (audit, Sep 2026): several brand assets (Amazon, Flipkart, Myntra, eBay, Etsy, Shopify, Google Ads) ship with a lot of transparent / white canvas around the mark, so plain object-fit:contain rendered them as a tiny sliver with dead space inside this small fixed badge. These rules crop each mark to its own artwork bounding box — the same measurement already used for the platform pages' .plg badges and the homepage .lcard__logo marquee — so the real, unmodified artwork fills the badge. Logos not listed here (none currently) keep the safe rule above. */ .mega__plat-mk img[alt="Amazon logo"],.mega__box-mk img[alt="Amazon logo"]{position:absolute;top:50%;left:50%;max-width:none;max-height:none;width:35.8px;height:23.9px;margin:-11.9px 0 0 -17.9px;} .mega__plat-mk img[alt="Flipkart logo"],.mega__box-mk img[alt="Flipkart logo"]{position:absolute;top:50%;left:50%;max-width:none;max-height:none;width:35.8px;height:23.9px;margin:-11.9px 0 0 -17.9px;} .mega__plat-mk img[alt="Myntra logo"],.mega__box-mk img[alt="Myntra logo"]{position:absolute;top:50%;left:50%;max-width:none;max-height:none;width:28.9px;height:12.7px;margin:-6.4px 0 0 -14.5px;} .mega__plat-mk img[alt="Etsy logo"],.mega__box-mk img[alt="Etsy logo"]{position:absolute;top:50%;left:50%;max-width:none;max-height:none;width:30px;height:15px;margin:-7.5px 0 0 -15px;} .mega__plat-mk img[alt="eBay logo"],.mega__box-mk img[alt="eBay logo"]{position:absolute;top:50%;left:50%;max-width:none;max-height:none;width:35.8px;height:23.9px;margin:-11.9px 0 0 -17.9px;} .mega__plat-mk img[alt="Shopify / D2C logo"],.mega__box-mk img[alt="Shopify / D2C logo"]{position:absolute;top:50%;left:50%;max-width:none;max-height:none;width:16px;height:16px;margin:-8px 0 0 -8px;} .mega__plat-mk img[alt="Google Ads logo"],.mega__box-mk img[alt="Google Ads logo"]{position:absolute;top:50%;left:50%;max-width:none;max-height:none;width:31px;height:15.5px;margin:-7.5px 0 0 -15.7px;} /* Meesho / Blinkit fix (Sep 2026): same bug as above — these are full-bleed square app icons (no dead canvas to crop), but with no explicit size the browser mis-resolves the percentage max-height and renders them ~26x26, spilling out of the 22px-tall badge. Sized like Shopify, the other square icon in this row, for a consistent, centred result. */ .mega__plat-mk img[alt="Meesho logo"],.mega__box-mk img[alt="Meesho logo"]{position:absolute;top:50%;left:50%;max-width:none;max-height:none;width:16px;height:16px;margin:-8px 0 0 -8px;} .mega__plat-mk img[alt="Blinkit logo"],.mega__box-mk img[alt="Blinkit logo"]{position:absolute;top:50%;left:50%;max-width:none;max-height:none;width:16px;height:16px;margin:-8px 0 0 -8px;} .mega__plat::before{ content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none; background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--brand,#2BB2E7) 9%,transparent),transparent); transition:opacity .35s var(--ease); } .mega__plat:hover,.mega__plat:focus-visible{border-color:var(--brand,var(--blue));transform:translateY(-2px);box-shadow:var(--sh-1);color:var(--ink);} .mega__plat:hover .mega__plat-mk,.mega__plat:focus-visible .mega__plat-mk{ transform:scale(1.14) rotate(-4deg); box-shadow:0 0 0 5px color-mix(in srgb,var(--brand,#2BB2E7) 16%,transparent),0 6px 14px color-mix(in srgb,var(--brand,#2BB2E7) 35%,transparent); } .mega__plat:hover::before,.mega__plat:focus-visible::before{opacity:1;} /* mobile: no hover, so the drawer's platform links get the same badge as a static brand cue, and a tap gives the identical glow via :active */ @media (hover:none){ .mega__plat:active .mega__plat-mk{transform:scale(1.1);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand,#2BB2E7) 18%,transparent);} } .mega__two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:auto;} .mega__box{display:block;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);} .mega__box:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh-1);} .mega__box-mk{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:22px;border-radius:7px;background:#fff;border:1px solid var(--line);overflow:hidden;padding:3px;box-sizing:border-box;margin-bottom:10px;transition:transform .38s var(--ease-out),box-shadow .38s var(--ease-out);} .mega__box-mk img{display:block;max-width:100%;max-height:100%;object-fit:contain;} .mega__box:hover .mega__box-mk{transform:scale(1.08);box-shadow:0 6px 14px rgba(11,27,58,.12);} .mega__box b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px;} .mega__box span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:10px;} .mega__box em{font-style:normal;font-size:12px;font-weight:700;color:var(--cyan-ink);} .mega__chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:auto;} .mega__chips span{font-size:12.5px;font-weight:500;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;} .mega__more{margin-top:18px;align-self:flex-start;} .mega__pane.is-on > *{animation:paneIn .5s var(--ease-out) both;} .mega__pane.is-on > *:nth-child(2){animation-delay:.04s} .mega__pane.is-on > *:nth-child(3){animation-delay:.08s} .mega__pane.is-on > *:nth-child(4){animation-delay:.12s} @keyframes paneIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} .mega__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px;border-top:1px solid var(--line-soft);background:#fff;font-size:13.5px;color:var(--muted);} .mega__foot button{font-weight:600;color:var(--blue);} .mega__foot button:hover{text-decoration:underline;text-underline-offset:3px;} @media (max-width:980px){.mega{display:none;}} /* =========================================================================== 46. MOBILE DRAWER — nested accordion Elementor: Nav Menu (dropdown, toggle) or Accordion; height uses the grid-rows 0fr -> 1fr trick, so no JS measuring. =========================================================================== */ .drawer .drw__a{ display:flex;align-items:center;justify-content:space-between;width:100%; padding:14px 0;font-size:16.5px;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em;color:var(--ink);border-bottom:1px solid var(--line-soft);text-align:left; } .drawer .drw__a[aria-current="page"]{color:var(--blue);} .drw__chev{width:16px;height:16px;color:var(--muted);transition:transform .4s var(--ease-out);} [aria-expanded="true"] > .drw__chev{transform:rotate(180deg);color:var(--blue);} .drw__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out);} .drw__sub.is-open{grid-template-rows:1fr;} .drw__in{overflow:hidden;min-height:0;} .drw__in > *{opacity:0;transform:translateY(-4px);transition:opacity .35s var(--ease),transform .4s var(--ease-out);} .drw__sub.is-open > .drw__in > *{opacity:1;transform:none;} .drw__sub.is-open > .drw__in > *:nth-child(2){transition-delay:.03s} .drw__sub.is-open > .drw__in > *:nth-child(3){transition-delay:.06s} .drw__sub.is-open > .drw__in > *:nth-child(4){transition-delay:.09s} .drw__sub.is-open > .drw__in > *:nth-child(5){transition-delay:.12s} .drw__sub.is-open > .drw__in > *:nth-child(n+6){transition-delay:.15s} .drw__lvl1{padding:6px 0 10px 12px;border-left:1.5px solid var(--line);margin:4px 0 6px 2px;} .drw__lvl2{padding:2px 0 8px 12px;border-left:1.5px solid var(--line-soft);margin:0 0 4px 2px;} .drw__row{display:flex;align-items:center;justify-content:space-between;} .drawer .drw__l{display:block;flex:1;padding:10px 0;font-size:15px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);border:0;} .drawer .drw__l[aria-current="page"]{color:var(--blue);} .drawer .drw__s{display:block;padding:8px 0;font-size:14px;font-weight:500;font-family:'Inter',sans-serif;color:var(--muted);border:0;} .drawer .drw__s[aria-current="page"]{color:var(--blue);font-weight:600;} .drw__t2{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;} .drw__t2:hover{background:var(--paper-2);} .drawer .btn{display:flex;padding:15px 24px;font-size:15px;border-bottom:0;margin-top:26px;} .drw__contact{margin-top:22px;font-size:13.5px;color:var(--muted);} .drw__contact a{display:inline;padding:0;border:0;font-size:13.5px;font-weight:600;color:var(--blue);font-family:'Inter',sans-serif;} /* =========================================================================== 47. INNER-PAGE HERO Same background, tag pill and load choreography as the homepage hero; the headline rises word by word from a mask instead of fading, so inner pages have their own signature without leaving the family. Elementor: Container (2 col) + Breadcrumbs + Heading; mask reveal = the snippet under "RISE HEADLINE" in evitex-site.js. =========================================================================== */ .phero{ position:relative;overflow:hidden;padding:128px 0 clamp(60px,6.4vw,92px); background: radial-gradient(760px 420px at 88% -8%, rgba(43,178,231,.10), transparent 62%), linear-gradient(180deg,var(--paper-2) 0%,#FBFDFF 58%,var(--paper) 100%); } .phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);} .phero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center;} .phero--solo .phero__grid{grid-template-columns:minmax(0,1fr);} .phero--solo .phero__copy{max-width:860px;} .phero .crumb{opacity:0;transform:translateY(12px);animation:heroUp .8s var(--ease-out) .05s forwards;margin-bottom:20px;flex-wrap:wrap;} .phero h1{font-size:clamp(33px,4.4vw,56px);line-height:1.06;letter-spacing:-.038em;margin-bottom:22px;max-width:18ch;opacity:0;animation:heroUp .6s var(--ease-out) .18s forwards;} .phero--solo h1{max-width:21ch;} .phero .hero__lede{max-width:54ch;} .phero .hero__cta{margin-bottom:0;} .phero .hero__proof{margin-top:36px;} @media (max-width:980px){ .phero{padding-top:112px;} .phero__grid{grid-template-columns:1fr;gap:44px;} .phero__vis{max-width:560px;} } /* word-rise headline: JS wraps each word of .rw in word */ .rw.rw--rise > span{opacity:1;transform:none;overflow:hidden;display:inline-block;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em;} .rw--rise > span > i{display:inline-block;font-style:normal;transform:translateY(108%);transition:transform .95s var(--ease-out);transition-delay:calc(var(--w,0) * 55ms + .12s);} .rw--rise.in > span > i{transform:none;} @media (prefers-reduced-motion:reduce){.rw--rise > span > i{transform:none;}} /* hero visual: opens from a rounded mask, then gets out of the way */ .phero__vis{position:relative;opacity:0;animation:visIn 1.2s var(--ease-out) .42s forwards;} @keyframes visIn{ 0% {opacity:0;clip-path:inset(9% 9% 9% 9% round 26px);} 65% {opacity:1;clip-path:inset(0 0 0 0 round 20px);} 100%{opacity:1;clip-path:inset(-240px -240px -240px -240px round 0);} } @media (prefers-reduced-motion:reduce){.phero__vis{animation:none;opacity:1;}} /* scroll-driven mask reveal for images and panels further down */ .mask-r{clip-path:inset(0 0 100% 0 round 16px);transition:clip-path 1.1s var(--ease-out);} .mask-r.in{clip-path:inset(0 0 0 0 round 0);} @media (prefers-reduced-motion:reduce){.mask-r{clip-path:none;}} /* =========================================================================== 48. HERO VISUALS — interface illustrations, never client data. Every one carries a "Sample view" label where it looks like a report. Elementor: HTML widget per visual (markup) + this CSS. =========================================================================== */ /* --- 48a. platform console (reuses .console from the homepage) ---------- */ .pcon .console__bar{box-shadow:inset 0 3px 0 var(--brand,var(--cyan));} .pcon__brand{display:inline-flex;align-items:center;gap:8px;} .pcon__brand i{width:8px;height:8px;border-radius:50%;background:var(--brand,var(--cyan));} .pcon__meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:#FCFDFF;margin-bottom:12px;} .pcon__k{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .pcon__bar{height:6px;border-radius:99px;background:var(--paper-2);border:1px solid var(--line-soft);overflow:hidden;} .pcon__bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--cyan));animation:barFill 1.7s var(--ease-out) 1.35s forwards;} @keyframes barFill{to{width:var(--w,74%);}} .pcon__v{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:-.02em;color:var(--ink);} .pcon__list{display:grid;gap:7px;} .pcon__row{ display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--line-soft); border-radius:var(--r-sm);background:#fff;opacity:0;transform:translateX(16px); animation:toastIn .6s var(--ease-out) forwards;animation-delay:calc(.9s + var(--k,0) * .11s); } .pcon__ic{width:24px;height:24px;border-radius:7px;background:var(--paper-2);display:grid;place-items:center;flex-shrink:0;} .pcon__ic svg{width:12px;height:12px;color:var(--muted-2);} .pcon__t{font-size:13px;font-weight:500;color:var(--text);line-height:1.3;min-width:0;} .pcon__t small{display:block;font-size:11px;color:var(--muted);font-weight:400;} .pcon__st{margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:999px;border:1px solid var(--line-soft);background:var(--paper-2);color:var(--muted);white-space:nowrap;} .pcon__row.is-done .pcon__ic{background:rgba(43,178,231,.12);} .pcon__row.is-done .pcon__ic svg{color:var(--cyan-ink);} .pcon__row.is-done .pcon__st{background:rgba(43,178,231,.1);color:#1583B5;border-color:rgba(43,178,231,.22);} .pcon__row.is-act .pcon__ic{background:rgba(27,54,145,.07);} .pcon__row.is-act .pcon__ic svg{color:var(--blue);animation:spin 2.4s linear infinite;} .pcon__row.is-act .pcon__st{background:rgba(27,54,145,.06);color:var(--blue);border-color:rgba(27,54,145,.14);} @keyframes spin{to{transform:rotate(360deg);}} .pcon__foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);} .pcon__foot span{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--cyan-ink);background:rgba(43,178,231,.08);border:1px solid rgba(43,178,231,.18);padding:4px 9px;border-radius:999px;opacity:0;animation:fcardIn .5s var(--ease-out) forwards;animation-delay:calc(1.7s + var(--k,0) * .1s);} .pcon__foot svg{width:11px;height:11px;} @media (prefers-reduced-motion:reduce){.pcon__row.is-act .pcon__ic svg{animation:none;}} /* --- 48b. marketplace orbit (e-commerce hub) ----------------------------- */ .orbit{position:relative;width:100%;max-width:580px;aspect-ratio:1000/900;margin-inline:auto;} .orbit__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;} .orbit__ring{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 9;transform-box:fill-box;transform-origin:center;animation:spin 90s linear infinite;} .orbit__ring--2{stroke:rgba(43,178,231,.28);animation-duration:140s;animation-direction:reverse;} .orbit__ln{stroke:rgba(27,54,145,.12);stroke-width:1.5;} .orbit__flow{stroke:var(--cyan);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:3 22;opacity:0;animation:orbFlow 1.9s linear infinite,fcardIn .6s ease forwards;animation-delay:0s,1.4s;} @keyframes orbFlow{to{stroke-dashoffset:-50;}} .orbit__core{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3; width:clamp(104px,24%,138px);aspect-ratio:1;border-radius:50%;background:#fff; border:1px solid var(--line);box-shadow:var(--sh-3);display:grid;place-items:center;text-align:center; } .orbit__core::before,.orbit__core::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(43,178,231,.4);animation:ping 3.2s var(--ease-out) infinite;} .orbit__core::after{animation-delay:1.6s;} @keyframes ping{0%{transform:scale(1);opacity:.9;}100%{transform:scale(1.55);opacity:0;}} .orbit__core .brand__mark{width:34px;height:34px;margin:0 auto 6px;} .orbit__core b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;letter-spacing:-.02em;color:var(--ink);line-height:1.1;} .orbit__core small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px;} .orbit__node{ position:absolute;left:var(--x);top:var(--y);z-index:4; transform:translate(-50%,-50%) translate3d(calc(var(--mx,0) * var(--d,6) * 1px),calc(var(--my,0) * var(--d,6) * 1px),0); transition:transform .6s var(--ease-out); } .orbit__pop{display:block;opacity:0;transform:scale(.7);animation:popIn .7s var(--ease-out) forwards;animation-delay:calc(.75s + var(--k,0) * .07s);} @keyframes popIn{to{opacity:1;transform:none;}} .orbit__pill{ display:flex;align-items:center;gap:8px;padding:7px 13px 7px 7px;background:#fff; border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh-2); font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;letter-spacing:-.015em; color:var(--ink);white-space:nowrap;animation:bob var(--dur,8s) ease-in-out var(--del,0s) infinite; transition:border-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease); } .orbit__pill i{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:0;} a.orbit__node:hover .orbit__pill{border-color:var(--brand);box-shadow:var(--sh-3);color:var(--blue);} @media (max-width:560px){ .orbit__pill{font-size:11px;padding:5px 9px 5px 5px;gap:6px;} .orbit__pill i{width:17px;height:17px;font-size:8px;} .orbit__core small{display:none;} .orbit__core .brand__mark{width:26px;height:26px;margin-bottom:4px;} .orbit__core b{font-size:12.5px;} } @media (prefers-reduced-motion:reduce){.orbit__ring,.orbit__flow,.orbit__core::before,.orbit__core::after,.orbit__pill{animation:none;}.orbit__flow{opacity:.6;}} /* --- 48c. Meta campaign tree -------------------------------------------- */ .mtree{display:grid;gap:8px;} .mtree__camp{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-sm);background:var(--ink);color:#fff;} .mtree__camp b{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;letter-spacing:-.02em;} .mtree__lvl{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);} .mtree__camp .pcon__st{background:rgba(43,178,231,.18);border-color:rgba(43,178,231,.3);color:#9FE3FF;} .mtree__sets{position:relative;display:grid;gap:7px;padding-left:22px;} .mtree__sets::before{content:"";position:absolute;left:9px;top:-8px;bottom:18px;width:1.5px;background:var(--line);} .mtree__sets .pcon__row{position:relative;} .mtree__sets .pcon__row::before{content:"";position:absolute;left:-13px;top:50%;width:12px;height:1.5px;background:var(--line);} .mtree__ads{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:4px;} .mtree__ad{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:7px;background:#fff;opacity:0;animation:dIn .6s var(--ease-out) forwards;animation-delay:calc(1.45s + var(--k,0) * .1s);} .mtree__ad span{display:block;height:44px;border-radius:5px;background:linear-gradient(135deg,var(--paper-3),#D6E5FB);margin-bottom:6px;position:relative;} .mtree__ad:nth-child(2) span{background:linear-gradient(135deg,#DDF3FC,#BFE6F7);} .mtree__ad:nth-child(3) span{background:linear-gradient(135deg,#E6EBF8,#CCD7F0);} .mtree__ad span svg{position:absolute;left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);color:rgba(27,54,145,.5);} .mtree__ad em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);} /* --- 48d. Google search mock --------------------------------------------- */ .gs__bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--sh-1);margin-bottom:14px;} .gs__bar svg{width:16px;height:16px;color:var(--muted);flex-shrink:0;} .gs__q{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;} .gs__caret{width:1.5px;height:17px;background:var(--blue);animation:blink 1s steps(1) infinite;} @keyframes blink{50%{opacity:0;}} .gs__ad{padding:14px 15px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:#FCFDFF;margin-bottom:12px;opacity:0;animation:dIn .6s var(--ease-out) 2.1s forwards;} .gs__top{display:flex;align-items:center;gap:8px;margin-bottom:5px;} .gs__spon{font-size:11px;font-weight:700;color:var(--ink);} .gs__url{font-size:12px;color:var(--muted);} .gs__h{font-size:15px;font-weight:600;color:#1a47b8;line-height:1.35;margin-bottom:6px;} .gs__d{height:6px;border-radius:99px;background:var(--paper-3);margin-bottom:5px;} .gs__d.s{width:70%;} .gs__links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:12px;font-weight:600;color:#1a47b8;} .gs__kw{display:grid;gap:6px;} .gs__kw .pcon__row{animation-delay:calc(2.4s + var(--k,0) * .11s);} .gs__mt{font-size:10.5px;font-weight:700;color:var(--muted);margin-left:6px;} /* --- 48e. social phone ---------------------------------------------------- */ .phone{ width:min(300px,78vw);margin:0 auto;padding:14px 12px 16px;border-radius:34px; background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3);position:relative; } .phone__notch{width:84px;height:6px;border-radius:99px;background:var(--line);margin:0 auto 14px;} .phone__prof{display:flex;align-items:center;gap:12px;padding:0 6px;margin-bottom:12px;} .phone__av{width:54px;height:54px;border-radius:50%;padding:2.5px;background:conic-gradient(from 210deg,var(--cyan),var(--blue),#8B5CF6,var(--cyan));flex-shrink:0;} .phone__av i{display:block;width:100%;height:100%;border-radius:50%;border:2.5px solid #fff;background:#fff var(--logo) center/60% no-repeat;} .phone__stats{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;} .phone__stats span{display:grid;gap:4px;justify-items:center;} .phone__stats b{width:26px;height:8px;border-radius:99px;background:var(--ink);opacity:.8;} .phone__stats em{width:34px;height:5px;border-radius:99px;background:var(--line);} .phone__bio{padding:0 6px;margin-bottom:12px;display:grid;gap:5px;} .phone__bio i{height:6px;border-radius:99px;background:var(--paper-3);} .phone__bio i:first-child{width:46%;background:var(--ink);opacity:.75;} .phone__bio i:last-child{width:72%;} .phone__hl{display:flex;gap:10px;padding:0 6px;margin-bottom:12px;} .phone__hl span{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper-2);} .phone__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border-radius:10px;overflow:hidden;} .phone__tile{position:relative;aspect-ratio:4/5;background:linear-gradient(150deg,var(--blue),#24449F 60%,var(--cyan) 150%);opacity:0;transform:scale(.9);animation:popIn .6s var(--ease-out) forwards;animation-delay:calc(1s + var(--k,0) * .08s);} .phone__tile:nth-child(3n+2){background:linear-gradient(150deg,#0E7CAE,var(--cyan) 75%,#7FD3F2 150%);} .phone__tile:nth-child(3n){background:linear-gradient(150deg,var(--ink),#16305E 60%,#2B6FB0 150%);} .phone__tile:nth-child(4n){background:linear-gradient(150deg,#E8EEFA,#CFDCF3);} .phone__tile svg{position:absolute;right:6px;top:6px;width:13px;height:13px;color:#fff;} /* --- 48f. responsive browser (container queries do the reflow) ---------- */ .bro{position:relative;height:340px;display:flex;justify-content:center;align-items:flex-start;} .bro__frame{ width:100%;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-3);overflow:hidden;container-type:inline-size; animation:broResize 12s var(--ease) 1.8s infinite; } @keyframes broResize{0%,22%{width:100%;}32%,52%{width:66%;}62%,82%{width:40%;}92%,100%{width:100%;}} .bro__bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft);background:#FCFDFF;} .bro__url{flex:1;min-width:0;font-size:11.5px;color:var(--muted);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bro__dev{position:relative;width:62px;height:20px;flex-shrink:0;} .bro__dev span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-ink);background:rgba(43,178,231,.1);border-radius:999px;opacity:0;animation:devLbl 12s linear 1.8s infinite;} .bro__dev span:nth-child(1){opacity:1;} .bro__dev span:nth-child(2){animation-name:devLbl2;} .bro__dev span:nth-child(3){animation-name:devLbl3;} @keyframes devLbl {0%,26%{opacity:1}28%,88%{opacity:0}90%,100%{opacity:1}} @keyframes devLbl2{0%,26%{opacity:0}28%,56%{opacity:1}58%,100%{opacity:0}} @keyframes devLbl3{0%,56%{opacity:0}58%,86%{opacity:1}88%,100%{opacity:0}} .bro__page{padding:14px;} .bro__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;} .bro__logo{width:54px;height:9px;border-radius:99px;background:var(--ink);} .bro__links{display:flex;gap:8px;} .bro__links i{width:26px;height:6px;border-radius:99px;background:var(--line);} .bro__links b{width:44px;height:16px;border-radius:5px;background:var(--blue);} .bro__hero{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:center;margin-bottom:14px;} .bro__h{display:grid;gap:7px;} .bro__h i{height:10px;border-radius:99px;background:var(--ink);opacity:.85;} .bro__h i:nth-child(2){width:78%;} .bro__h em{height:6px;width:90%;border-radius:99px;background:var(--line);} .bro__h b{width:74px;height:20px;border-radius:6px;background:var(--blue);margin-top:4px;} .bro__img{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(150deg,var(--blue),#24449F 55%,var(--cyan) 140%);} .bro__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} .bro__cards span{height:54px;border-radius:8px;border:1px solid var(--line-soft);background:var(--paper-2);} @container (max-width:420px){ .bro__hero{grid-template-columns:1fr;} .bro__img{aspect-ratio:16/8;} .bro__cards{grid-template-columns:1fr 1fr;} .bro__links i{display:none;} } @container (max-width:280px){ .bro__cards{grid-template-columns:1fr;} .bro__cards span{height:30px;} } @media (prefers-reduced-motion:reduce){.bro__frame,.bro__dev span{animation:none;}} /* --- 48g. brand kit bento ------------------------------------------------ */ .kit{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(92px,auto);gap:10px;} .kit__t{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:14px;box-shadow:var(--sh-1);opacity:0;transform:translateY(12px) scale(.97);animation:dIn .7s var(--ease-out) forwards;animation-delay:calc(.8s + var(--k,0) * .1s);position:relative;overflow:hidden;} .kit__logo{grid-column:span 2;grid-row:span 2;display:grid;place-items:center;background:linear-gradient(160deg,#fff,var(--paper-2));} .kit__mk{position:relative;width:96px;height:96px;} .kit__mk i{position:absolute;border-radius:22px;} .kit__mk i:nth-child(1){inset:0 24px 24px 0;background:var(--blue);} .kit__mk i:nth-child(2){inset:24px 0 0 24px;background:var(--cyan);mix-blend-mode:multiply;opacity:.9;} .kit__word{margin-top:14px;display:flex;gap:6px;justify-content:center;} .kit__word b{width:64px;height:10px;border-radius:99px;background:var(--ink);} .kit__word em{width:38px;height:10px;border-radius:99px;background:var(--line);} .kit__lbl{position:absolute;left:12px;top:10px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .kit__pal{display:flex;gap:5px;align-items:flex-end;padding-top:30px;} .kit__pal i{flex:1;border-radius:6px;height:0;animation:swatch .8s var(--ease-out) forwards;animation-delay:calc(1.3s + var(--k,0) * .08s);} @keyframes swatch{to{height:48px;}} .kit__type{display:flex;flex-direction:column;justify-content:flex-end;padding-top:28px;} .kit__type b{font-family:'Plus Jakarta Sans',sans-serif;font-size:34px;line-height:1;letter-spacing:-.05em;color:var(--ink);} .kit__type span{font-size:11px;color:var(--muted);margin-top:4px;} .kit__card{display:flex;flex-direction:column;justify-content:space-between;background:var(--ink);} .kit__card .kit__lbl{color:rgba(255,255,255,.55);} .kit__card i{display:block;width:26px;height:26px;border-radius:8px;background:var(--cyan);margin-top:26px;} .kit__card em{display:block;width:60%;height:6px;border-radius:99px;background:rgba(255,255,255,.4);margin-top:10px;} .kit__post{grid-column:span 2;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-top:32px;} .kit__post span{aspect-ratio:1;border-radius:8px;background:linear-gradient(150deg,var(--blue),var(--cyan) 140%);} .kit__post span:nth-child(2){background:linear-gradient(150deg,#E8EEFA,#CFDCF3);} .kit__post span:nth-child(3){background:linear-gradient(150deg,var(--ink),#2B6FB0 150%);} /* --- 48h. video editor --------------------------------------------------- */ .edit__mon{position:relative;aspect-ratio:16/8.4;border-radius:var(--r-sm);overflow:hidden;background:linear-gradient(150deg,var(--ink),#16305E 60%,#2B6FB0 140%);margin-bottom:12px;} .edit__safe{position:absolute;top:8%;bottom:8%;left:50%;width:30%;transform:translateX(-50%);border:1.5px dashed rgba(255,255,255,.35);border-radius:6px;} .edit__safe::after{content:"9:16";position:absolute;left:6px;top:4px;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.6);} .edit__play{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);transform:translate(-50%,-50%);display:grid;place-items:center;backdrop-filter:blur(4px);} .edit__play svg{width:16px;height:16px;color:#fff;margin-left:2px;} .edit__tc{position:absolute;right:10px;bottom:8px;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums;} .edit__tl{position:relative;display:grid;gap:6px;padding:10px 10px 8px 44px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:#FCFDFF;} .edit__rule{height:8px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12px);margin-bottom:2px;} .edit__trk{position:relative;display:flex;gap:4px;height:22px;} .edit__trk::before{content:attr(data-l);position:absolute;left:-36px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:var(--muted);} .edit__clip{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--blue),#2F4FB0);opacity:0;animation:fcardIn .5s var(--ease-out) forwards;animation-delay:calc(1s + var(--k,0) * .09s);} .edit__trk--t .edit__clip{background:rgba(43,178,231,.35);border:1px solid rgba(43,178,231,.5);} .edit__wave{display:flex;align-items:center;gap:2px;height:100%;flex:1;} .edit__wave i{flex:1;border-radius:2px;background:rgba(14,124,174,.45);} .edit__head{position:absolute;top:4px;bottom:4px;left:44px;width:2px;background:#E2574C;border-radius:2px;animation:playhead 8s linear 1.4s infinite;} .edit__head::before{content:"";position:absolute;top:-3px;left:-4px;width:10px;height:8px;border-radius:2px;background:#E2574C;} @keyframes playhead{from{left:44px;}to{left:calc(100% - 12px);}} @media (prefers-reduced-motion:reduce){.edit__head{animation:none;left:40%;}} /* =========================================================================== 49. CAPABILITY GRID ("What Evitex manages") Hairline grid like "Why Evitex", in the light register. Cursor spotlight follows the pointer inside the hovered cell only. Elementor: Container grid, 3 col, 1px gap on a #E4EAF4 background. =========================================================================== */ .caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;} .cap{position:relative;background:#fff;padding:clamp(24px,2.6vw,32px) clamp(20px,2.2vw,28px);transition:background .4s var(--ease);} .cap > *{position:relative;z-index:1;} .cap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(300px circle at var(--sx,50%) var(--sy,50%),rgba(43,178,231,.12),transparent 62%);opacity:0;transition:opacity .45s var(--ease);} @media (hover:hover) and (pointer:fine){.cap:hover::before{opacity:1;}} .cap__ico{width:40px;height:40px;border-radius:11px;background:var(--paper-2);border:1px solid var(--line-soft);display:grid;place-items:center;margin-bottom:18px;transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease-out);} .cap__ico svg{width:18px;height:18px;color:var(--blue);transition:color .4s var(--ease);} .cap:hover .cap__ico{background:var(--blue);border-color:var(--blue);transform:rotate(-5deg) scale(1.05);} .cap:hover .cap__ico svg{color:#fff;} .cap h3{font-size:17px;letter-spacing:-.026em;margin-bottom:8px;} .cap p{font-size:14.5px;color:var(--muted);line-height:1.6;} .cap--cta{background:linear-gradient(160deg,var(--blue) 0%,#24449F 70%,#2B7FC4 140%);color:#fff;display:flex;flex-direction:column;} .cap--cta h3{color:#fff;} .cap--cta p{color:rgba(255,255,255,.8);margin-bottom:18px;} .cap--cta .tlink{color:#fff;margin-top:auto;align-self:flex-start;} .cap--cta::before{background:radial-gradient(300px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.14),transparent 62%);} @media (max-width:980px){.caps{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:600px){.caps{grid-template-columns:1fr;}} /* =========================================================================== 50. CHALLENGE block — split head + the homepage .pain grid =========================================================================== */ .pain--3{grid-template-columns:repeat(3,1fr);} @media (max-width:900px){.pain--3{grid-template-columns:1fr 1fr;}} @media (max-width:640px){.pain--3{grid-template-columns:1fr;}} /* =========================================================================== 51. GROWTH OPPORTUNITIES — editorial rows (not cards, on purpose) =========================================================================== */ .opps{border-top:1px solid var(--line);} .opp{display:grid;grid-template-columns:44px minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(14px,2.4vw,32px);align-items:start;padding:clamp(22px,2.4vw,30px) 6px;border-bottom:1px solid var(--line);transition:background .4s var(--ease),padding-left .4s var(--ease-out);} .opp:hover{background:linear-gradient(90deg,var(--paper-2),transparent 85%);padding-left:16px;} .opp__ic{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:border-color .4s var(--ease),background .4s var(--ease);} .opp__ic svg{width:16px;height:16px;color:var(--cyan-ink);transition:transform .45s var(--ease-out),color .4s var(--ease);} .opp:hover .opp__ic{border-color:var(--blue);background:var(--blue);} .opp:hover .opp__ic svg{color:#fff;transform:translate(1px,-1px);} .opp h3{font-size:clamp(17px,1.8vw,20px);letter-spacing:-.028em;padding-top:5px;} .opp p{font-size:15px;color:var(--muted);line-height:1.65;padding-top:6px;} @media (max-width:760px){.opp{grid-template-columns:40px 1fr;}.opp p{grid-column:2;padding-top:0;}} /* =========================================================================== 52. DELIVERABLES =========================================================================== */ .deliv{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start;} .deliv__list{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .deliv__list li{display:flex;gap:12px;align-items:flex-start;padding:16px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;font-size:14.5px;line-height:1.5;color:var(--text);transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);} .deliv__list li:hover{border-color:#D4E0F4;transform:translateY(-2px);box-shadow:var(--sh-1);} .deliv__list svg{width:18px;height:18px;color:var(--cyan-ink);flex-shrink:0;margin-top:1px;} .deliv__card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(24px,2.8vw,32px);background:var(--ink);color:#fff;} .deliv__card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 260px at 90% 0%,rgba(43,178,231,.22),transparent 65%);} .deliv__card > *{position:relative;} .deliv__card h3{color:#fff;font-size:19px;letter-spacing:-.028em;margin-bottom:18px;} .deliv__rhythm{display:grid;} .deliv__rhythm div{display:grid;grid-template-columns:86px 1fr;gap:14px;padding:13px 0;border-top:1px solid rgba(255,255,255,.1);} .deliv__rhythm dt{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);padding-top:2px;} .deliv__rhythm dd{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.84);} @media (max-width:980px){.deliv{grid-template-columns:1fr;}} @media (max-width:560px){.deliv__list{grid-template-columns:1fr;}} /* =========================================================================== 53. PROCESS — numbered steps joined by a line that draws on entry CSS-only once JS adds .in (data-io). Horizontal on desktop, a vertical rail on mobile. Elementor: Container + this CSS, or Icon List. =========================================================================== */ .proc{--n:5;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:22px;} .proc::before,.proc__fill{content:"";position:absolute;left:20px;right:20px;top:20px;height:1.5px;border-radius:2px;} .proc::before{background:var(--line);} .proc__fill{background:linear-gradient(90deg,var(--blue),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease-out) .15s;} .proc.in .proc__fill{transform:scaleX(1);} .proc__step{position:relative;z-index:2;opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--k,0) * .14s);} .proc.in .proc__step{opacity:1;transform:none;} .proc__n{width:41px;height:41px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;color:var(--muted-2);margin-bottom:18px;transition:border-color .5s var(--ease),color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease);transition-delay:calc(.35s + var(--k,0) * .3s);} .proc.in .proc__n{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 5px rgba(27,54,145,.06);} .proc.in .proc__step:last-child .proc__n{background:var(--blue);color:#fff;} .proc__step h3{font-size:16.5px;letter-spacing:-.026em;margin-bottom:7px;} .proc__step p{font-size:14.5px;color:var(--muted);line-height:1.6;padding-right:6px;} @media (max-width:900px){ .proc{grid-template-columns:1fr;gap:26px;padding-left:58px;} .proc::before,.proc__fill{left:20px;right:auto;top:6px;bottom:6px;width:1.5px;height:auto;} .proc__fill{transform:scaleY(0);transform-origin:top;} .proc.in .proc__fill{transform:scaleY(1);} .proc__n{position:absolute;left:-58px;top:-6px;margin:0;} } /* =========================================================================== 54. PIPELINE — interactive 8-step diagram (performance marketing) Auto-advances while visible, stops the moment someone clicks a step. Elementor: Tabs widget styled with this CSS + the PIPELINE snippet. =========================================================================== */ .pipe{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-1);overflow:hidden;} .pipe__track{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));padding:28px clamp(16px,2.4vw,30px) 22px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#FCFDFF,var(--paper-2));} .pipe__rail{position:absolute;left:calc(clamp(16px,2.4vw,30px) + 6.25%);right:calc(clamp(16px,2.4vw,30px) + 6.25%);top:47px;height:2px;border-radius:2px;background:var(--line);} .pipe__rail i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));transform:scaleX(var(--p,0));transform-origin:left;transition:transform .7s var(--ease-out);} .pipe__node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 4px;text-align:center;} .pipe__dot{width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:12px;color:var(--muted-2);transition:all .45s var(--ease-out);} .pipe__lbl{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;letter-spacing:-.015em;color:var(--muted);transition:color .35s var(--ease);} .pipe__node:hover .pipe__dot{border-color:var(--cyan);} .pipe__node.is-past .pipe__dot{border-color:var(--blue);color:var(--blue);} .pipe__node.is-on .pipe__dot{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px rgba(27,54,145,.1),0 8px 18px rgba(27,54,145,.25);} .pipe__node.is-on .pipe__lbl{color:var(--ink);} .pipe__panels{position:relative;min-height:220px;} .pipe__panel{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);padding:clamp(24px,3vw,36px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s var(--ease),transform .5s var(--ease-out),visibility .35s;} .pipe__panel.is-on{position:relative;opacity:1;visibility:visible;transform:none;} .pipe__big{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;color:var(--cyan-ink);letter-spacing:.06em;margin-bottom:10px;} .pipe__panel h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.032em;margin-bottom:12px;} .pipe__panel p{font-size:15.5px;color:var(--muted);line-height:1.65;} .pipe__out{align-self:start;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--paper-2);padding:18px 20px;} .pipe__out h4{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-family:'Inter',sans-serif;} .pipe__out li{display:flex;gap:10px;font-size:14.5px;line-height:1.5;padding:6px 0;color:var(--text);} .pipe__out svg{width:16px;height:16px;color:var(--cyan-ink);flex-shrink:0;margin-top:3px;} @media (max-width:860px){ .pipe__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:6px;padding:22px 16px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .pipe__track::-webkit-scrollbar{display:none;} .pipe__node{flex:0 0 88px;scroll-snap-align:center;} .pipe__rail{display:none;} .pipe__panel{grid-template-columns:1fr;} } /* =========================================================================== 55. PLATFORM SELECTOR — "Which platform do you want to grow on?" Tilt (3deg) + brand-coloured cursor light + reveal-on-hover CTA. Elementor: Loop Grid / 10 Containers as links, Motion Effects > 3D Tilt. =========================================================================== */ .psel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;} .psel__cell{perspective:900px;} .plat-card{ position:relative;height:100%;min-height:236px;display:flex;flex-direction:column; padding:22px 20px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff; overflow:hidden;text-align:left;width:100%; transition:border-color .4s var(--ease),box-shadow .45s var(--ease-out),transform .5s var(--ease-out); } .plat-card > *{position:relative;z-index:1;} .plat-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(260px circle at var(--sx,50%) var(--sy,0%),color-mix(in srgb,var(--brand,#2BB2E7) 16%,transparent),transparent 65%); opacity:0;transition:opacity .45s var(--ease);} .plat-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand,var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out);} .plat-card:hover,.plat-card:focus-visible{border-color:color-mix(in srgb,var(--brand,#2BB2E7) 45%,#E4EAF4);box-shadow:var(--sh-2);} .plat-card:hover::before,.plat-card:focus-visible::before{opacity:1;} .plat-card:hover::after,.plat-card:focus-visible::after{transform:scaleX(1);} .plat-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;} .plat-card__mk{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line-soft);font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:-.03em;color:var(--brand,var(--blue));transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease-out);} .plat-card:hover .plat-card__mk{background:var(--brand,var(--blue));border-color:var(--brand,var(--blue));color:#fff;transform:rotate(-6deg);} .plat-card__rg{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);} .plat-card h3{font-size:17px;letter-spacing:-.026em;margin-bottom:8px;} .plat-card p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:18px;} .plat-card__go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line-soft);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;color:var(--blue);} .plat-card__go span{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease-out);} .plat-card__go i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);transition:background .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease-out);} .plat-card__go svg{width:14px;height:14px;transition:transform .4s var(--ease-out);} .plat-card:hover .plat-card__go span,.plat-card:focus-visible .plat-card__go span{clip-path:inset(0 0 0 0);} .plat-card:hover .plat-card__go i{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateX(2px);} .plat-card:hover .plat-card__go svg{transform:rotate(-45deg);} .plat-card--other{background:linear-gradient(160deg,var(--paper-2),#fff);border-style:dashed;} .plat-card--other .plat-card__mk{color:var(--blue);} @media (hover:none){.plat-card__go span{clip-path:none;}} @media (max-width:1180px){.psel{grid-template-columns:repeat(3,minmax(0,1fr));}.psel__cell--other{grid-column:span 3;}.psel__cell--other .plat-card{min-height:0;}} @media (max-width:760px){.psel{grid-template-columns:1fr 1fr;gap:10px;}.psel__cell--other{grid-column:auto;}.plat-card{min-height:210px;padding:18px 16px 16px;}} @media (max-width:420px){.psel{grid-template-columns:1fr;}.plat-card{min-height:0;}} /* =========================================================================== 56. OPERATING RHYTHM TABS (daily / weekly / monthly) Elementor: Tabs widget; the sliding indicator is the only custom CSS. =========================================================================== */ .tabs__bar{position:relative;display:inline-flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--sh-1);margin-bottom:26px;} .tabs__ind{position:absolute;top:5px;bottom:5px;left:0;border-radius:999px;background:var(--ink);transition:transform .5s var(--ease-out),width .5s var(--ease-out);} .tabs__btn{position:relative;z-index:1;padding:10px 20px;border-radius:999px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--muted);transition:color .35s var(--ease);} .tabs__btn[aria-selected="true"]{color:#fff;} .tabs__panel{animation:paneIn .55s var(--ease-out) both;} .rhythm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;} .rhythm li{padding:20px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;} .rhythm li:nth-child(2){animation:paneIn .55s var(--ease-out) .05s both} .rhythm li:nth-child(3){animation:paneIn .55s var(--ease-out) .1s both} .rhythm li:nth-child(4){animation:paneIn .55s var(--ease-out) .15s both} .rhythm svg{width:18px;height:18px;color:var(--cyan-ink);margin-bottom:12px;} .rhythm b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:15.5px;letter-spacing:-.02em;color:var(--ink);margin-bottom:5px;} .rhythm span{font-size:14px;color:var(--muted);line-height:1.55;} @media (max-width:900px){.rhythm{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.rhythm{grid-template-columns:1fr;}.tabs__btn{padding:9px 14px;font-size:13.5px;}} /* =========================================================================== 57. PACKAGES Plan cards rise in sequence; numeric prices count up (en-IN grouping); the most complete plan sits on the dark ink with a slow ambient light. No fake discounts, no strike-through prices, no countdowns. Elementor: Price Table widget x3, or Containers + this CSS. =========================================================================== */ .plans{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px;align-items:stretch;} .plan{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s var(--ease);} .plan > *{position:relative;z-index:1;} .plan::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(320px circle at var(--sx,50%) var(--sy,0%),rgba(43,178,231,.10),transparent 62%);opacity:0;transition:opacity .45s var(--ease);} .plan:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#D4E0F4;} @media (hover:hover) and (pointer:fine){.plan:hover::before{opacity:1;}} .plan__tier{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:10px;} .plan__name{font-size:clamp(20px,2vw,23px);letter-spacing:-.03em;margin-bottom:8px;} .plan__for{font-size:14.5px;color:var(--muted);line-height:1.55;min-height:3.1em;} .plan__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:22px 0 4px;padding-top:20px;border-top:1px solid var(--line-soft);} .plan__amt{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(30px,3.4vw,40px);line-height:1;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;} .plan__amt--q{font-size:clamp(24px,2.6vw,30px);} .plan__per{font-size:14px;font-weight:600;color:var(--muted);} .plan__fine{font-size:12.5px;color:var(--muted);margin-bottom:20px;line-height:1.5;} .plan .btn{margin-bottom:22px;} .plan__list{display:grid;gap:10px;} .plan__list li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--text);} .plan__list svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;color:var(--cyan-ink);} .plan__list li.is-out{color:var(--muted-2);} .plan__list li.is-out svg{color:#C3CCDB;} .plan__list li.is-head{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink);padding-top:4px;} .plan__badge{position:absolute;top:22px;right:22px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(43,178,231,.16);color:#9FE3FF;border:1px solid rgba(43,178,231,.35);} .plan--feat{background:var(--ink);border-color:var(--ink);color:#fff;} .plan--feat::after{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background:radial-gradient(40% 35% at 70% 20%,rgba(43,178,231,.26),transparent 70%),radial-gradient(35% 30% at 20% 90%,rgba(27,54,145,.55),transparent 70%);animation:glowDrift 22s ease-in-out infinite;} .plan--feat::before{background:radial-gradient(320px circle at var(--sx,50%) var(--sy,0%),rgba(255,255,255,.08),transparent 62%);} .plan--feat .plan__name,.plan--feat .plan__amt{color:#fff;} .plan--feat .plan__tier{color:var(--cyan);} .plan--feat .plan__for,.plan--feat .plan__per,.plan--feat .plan__fine{color:rgba(255,255,255,.72);} .plan--feat .plan__price{border-top-color:rgba(255,255,255,.12);} .plan--feat .plan__list li{color:rgba(255,255,255,.88);} .plan--feat .plan__list li.is-head{color:#fff;} .plan--feat .plan__list svg{color:var(--cyan);} .plan--feat:hover{border-color:var(--ink);box-shadow:0 30px 70px rgba(11,27,58,.28);} .plans__note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;margin-top:22px;font-size:14px;color:var(--muted);text-align:center;} .plans__note svg{width:16px;height:16px;color:var(--cyan-ink);} .plans__note span{display:inline-flex;align-items:center;gap:7px;} @media (max-width:1000px){.plans{grid-template-columns:1fr;max-width:560px;margin-inline:auto;}.plan__for{min-height:0;}} @media (prefers-reduced-motion:reduce){.plan--feat::after{animation:none;}} /* --- comparison table ---------------------------------------------------- */ .cmp-wrap{margin-top:clamp(36px,4vw,52px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow-x:auto;} .cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px;} .cmp caption{text-align:left;padding:20px 22px 6px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.025em;color:var(--ink);} .cmp th,.cmp td{padding:14px 18px;border-bottom:1px solid var(--line-soft);text-align:center;vertical-align:middle;} .cmp thead th{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px;color:var(--ink);background:var(--paper-2);position:sticky;top:0;} .cmp tbody th{text-align:left;font-weight:500;color:var(--text);} .cmp tbody tr{transition:background .25s var(--ease);} .cmp tbody tr:hover{background:#FAFCFF;} .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0;} .cmp td svg{width:18px;height:18px;margin:0 auto;color:var(--cyan-ink);} .cmp td.no svg{color:#C9D1DE;} .cmp td small{font-size:13px;color:var(--muted);font-weight:500;} .cmp .is-feat{background:rgba(27,54,145,.035);} .cmp thead .is-feat{background:var(--ink);color:#fff;} /* --- service fee vs ad spend -------------------------------------------- */ .fee{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;} .fee__side{padding:clamp(22px,2.6vw,30px);} .fee__side--us{background:linear-gradient(160deg,var(--paper-2),#fff);} .fee__k{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:10px;} .fee__k i{width:8px;height:8px;border-radius:50%;background:currentColor;} .fee__side b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(19px,2vw,22px);letter-spacing:-.03em;color:var(--ink);margin-bottom:8px;} .fee__side p{font-size:14.5px;color:var(--muted);line-height:1.6;} .fee__plus{display:grid;place-items:center;padding:0 6px;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);} .fee__plus span{width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;color:var(--blue);} .fee__side--them .fee__k{color:var(--muted);} @media (max-width:760px){.fee{grid-template-columns:1fr;}.fee__plus{border:0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:10px 0;}} /* --- extra-page calculator (web development) ---------------------------- */ .calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(160deg,#fff,var(--paper-2));box-shadow:var(--sh-1);} .calc__lbl{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:12px;display:block;} .calc__step{display:flex;align-items:center;gap:14px;margin-bottom:18px;} .calc__step button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;transition:border-color .25s,color .25s,transform .2s;} .calc__step button:hover{border-color:var(--blue);color:var(--blue);} .calc__step button:active{transform:scale(.94);} .calc__step button:disabled{opacity:.4;cursor:not-allowed;} .calc__step svg{width:18px;height:18px;} .calc__step output{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.04em;color:var(--ink);min-width:2ch;text-align:center;font-variant-numeric:tabular-nums;} .calc__step span{font-size:14px;color:var(--muted);} .calc__range{width:100%;accent-color:var(--blue);} .calc__ticks{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted-2);margin-top:6px;font-variant-numeric:tabular-nums;} .calc__out{padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);background:var(--ink);color:#fff;position:relative;overflow:hidden;} .calc__out::before{content:"";position:absolute;inset:0;background:radial-gradient(300px 200px at 90% 0%,rgba(43,178,231,.25),transparent 65%);pointer-events:none;} .calc__out > *{position:relative;} .calc__k{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px;} .calc__total{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(38px,4.4vw,52px);letter-spacing:-.05em;line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums;} .calc__break{font-size:14px;color:rgba(255,255,255,.72);margin-bottom:20px;min-height:1.5em;} @media (max-width:820px){.calc{grid-template-columns:1fr;}} /* --- what "free hosting" covers ------------------------------------------ */ .host{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:18px;} .host > div{background:#fff;padding:22px 22px;} .host h4{display:flex;align-items:center;gap:9px;font-size:15.5px;letter-spacing:-.02em;margin-bottom:12px;} .host h4 svg{width:18px;height:18px;color:var(--cyan-ink);} .host .host__no h4 svg{color:#B6C2D8;} .host li{position:relative;padding-left:16px;font-size:14px;line-height:1.55;color:var(--muted);margin-bottom:7px;} .host li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:2px;background:var(--line);} .host .host__yes li::before{background:var(--cyan);} @media (max-width:860px){.host{grid-template-columns:1fr;}} /* =========================================================================== 58. FAQ — native
, height animated by JS Elementor: Accordion / Toggle widget (FAQ schema toggle on). =========================================================================== */ .faq{border-top:1px solid var(--line);} .faq__item{border-bottom:1px solid var(--line);} .faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:-.022em;color:var(--ink);transition:color .25s var(--ease);} .faq__item summary::-webkit-details-marker{display:none;} .faq__item summary:hover{color:var(--blue);} .faq__ico{position:relative;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;transition:background .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease-out);} .faq__ico::before,.faq__ico::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.8px;border-radius:2px;background:var(--blue);transform:translate(-50%,-50%);transition:background .35s var(--ease);} .faq__ico::after{transform:translate(-50%,-50%) rotate(90deg);} .faq__item[open] .faq__ico{background:var(--blue);border-color:var(--blue);transform:rotate(45deg);} .faq__item[open] .faq__ico::before,.faq__item[open] .faq__ico::after{background:#fff;} .faq__a{overflow:hidden;transition:height .45s var(--ease-out);} .faq__a > div{padding:0 50px 22px 4px;} .faq__a p{font-size:15.5px;color:var(--muted);line-height:1.7;} .faq__a p + p{margin-top:10px;} .faq__a a{color:var(--blue);font-weight:500;border-bottom:1.5px solid rgba(27,54,145,.25);} .faq__grp{margin-bottom:clamp(36px,4vw,52px);} .faq__grp h2{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.028em;margin-bottom:12px;} /* =========================================================================== 59. RELATED PLATFORMS / LINK CARDS =========================================================================== */ .rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;} .rel__a{display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);} .rel__a:hover{border-color:var(--brand,var(--blue));transform:translateY(-3px);box-shadow:var(--sh-1);} .rel__mk{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--paper-2);border:1px solid var(--line-soft);font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:12.5px;color:var(--brand,var(--blue));transition:background .35s var(--ease),color .35s var(--ease);} .rel__a:hover .rel__mk{background:var(--brand,var(--blue));color:#fff;} .rel__a b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;letter-spacing:-.02em;color:var(--ink);} .rel__a span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;} .rel__a > svg{width:15px;height:15px;margin-left:auto;color:var(--muted-2);flex-shrink:0;transition:transform .35s var(--ease),color .35s var(--ease);} .rel__a:hover > svg{transform:translateX(3px);color:var(--blue);} @media (max-width:1000px){.rel{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:520px){.rel{grid-template-columns:1fr;}} /* =========================================================================== 60. SERVICES HUB — large rows with a cursor-following preview =========================================================================== */ .srows{border-top:1px solid var(--line);} .srow{position:relative;display:grid;grid-template-columns:70px minmax(0,1.1fr) minmax(0,1fr) 52px;gap:clamp(14px,2.4vw,32px);align-items:center;padding:clamp(24px,2.8vw,34px) 8px;border-bottom:1px solid var(--line);isolation:isolate;} .srow::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--paper-2),#fff);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out);} .srow:hover::before,.srow:focus-visible::before{transform:scaleX(1);} .srow__n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;color:#B6C2D8;letter-spacing:.02em;transition:color .35s var(--ease);} .srow:hover .srow__n{color:var(--cyan-ink);} .srow h2{font-size:clamp(22px,2.8vw,34px);letter-spacing:-.035em;line-height:1.1;transition:transform .5s var(--ease-out),color .35s var(--ease);} .srow:hover h2{transform:translateX(8px);color:var(--blue);} .srow h2 small{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:14.5px;letter-spacing:0;color:var(--muted);margin-top:8px;} .srow__tags{display:flex;flex-wrap:wrap;gap:6px;} .srow__tags span{font-size:12.5px;font-weight:500;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px;} .srow__go{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;justify-self:end;transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease-out);} .srow__go svg{width:18px;height:18px;color:var(--ink);transition:transform .5s var(--ease-out),color .3s;} .srow:hover .srow__go{background:var(--blue);border-color:var(--blue);} .srow:hover .srow__go svg{color:#fff;transform:rotate(-45deg);} .srow--lead h2{font-size:clamp(25px,3.3vw,40px);} @media (max-width:860px){.srow{grid-template-columns:44px 1fr 44px;}.srow__tags{grid-column:2 / 4;grid-row:2;}.srow__go{grid-row:1;grid-column:3;width:40px;height:40px;}} .sprev{position:fixed;left:0;top:0;z-index:40;width:220px;pointer-events:none;transform:translate3d(var(--cx,-400px),var(--cy,-400px),0);} .sprev__in{transform:translate(24px,-50%) scale(.6) rotate(-4deg);opacity:0;transition:transform .5s var(--ease-out),opacity .3s var(--ease);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-3);} .sprev.is-on .sprev__in{transform:translate(24px,-50%) scale(1) rotate(-2deg);opacity:1;} .sprev .panel{aspect-ratio:4/3;} @media (max-width:900px),(hover:none){.sprev{display:none;}} /* --- small helpers used across service pages --------------------------- */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .duo__card{position:relative;display:flex;flex-direction:column;padding:clamp(26px,3vw,38px);border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s var(--ease);} .duo__card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#D4E0F4;} .duo__card > *{position:relative;z-index:1;} .duo__card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px circle at var(--sx,80%) var(--sy,0%),rgba(43,178,231,.12),transparent 62%);opacity:0;transition:opacity .45s var(--ease);} .duo__card:hover::before{opacity:1;} .duo__mk{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line-soft);margin-bottom:22px;} .duo__mk svg{width:24px;height:24px;color:var(--blue);} .duo__card h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.034em;margin-bottom:6px;} .duo__role{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:14px;} .duo__card p{font-size:15.5px;color:var(--muted);line-height:1.65;margin-bottom:18px;} .duo__best{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px;} .duo__best span{font-size:12.5px;font-weight:500;color:var(--text);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:5px 11px;} .duo__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:20px;border-top:1px solid var(--line-soft);} .duo__price{font-size:14px;color:var(--muted);} .duo__price b{font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);font-size:15px;} @media (max-width:860px){.duo{grid-template-columns:1fr;}} .growth{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:stretch;} .growth .plan--feat{padding:clamp(28px,3.4vw,42px);} .growth__side{display:grid;gap:12px;align-content:start;} .growth__side h3{font-size:16px;letter-spacing:-.02em;margin:4px 0 2px;} @media (max-width:900px){.growth{grid-template-columns:1fr;}} .chips{display:flex;flex-wrap:wrap;gap:8px;} .chips span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;transition:border-color .3s var(--ease),transform .3s var(--ease);} .chips span:hover{border-color:var(--cyan);transform:translateY(-2px);} .chips svg{width:15px;height:15px;color:var(--cyan-ink);} .need{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .need li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line-soft);font-size:14.5px;line-height:1.5;} .need svg{width:18px;height:18px;color:var(--blue);flex-shrink:0;margin-top:1px;} @media (max-width:620px){.need{grid-template-columns:1fr;}} .honest{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;} .honest > div{background:#fff;padding:clamp(22px,2.6vw,32px);} .honest > div:first-child{background:var(--paper-2);} .honest h3{font-size:17px;letter-spacing:-.025em;margin-bottom:14px;display:flex;align-items:center;gap:10px;} .honest h3 svg{width:18px;height:18px;} .honest > div:first-child h3 svg{color:#B6C2D8;} .honest > div:last-child h3 svg{color:var(--cyan-ink);} .honest li{font-size:15px;color:var(--muted);line-height:1.6;padding:8px 0;border-top:1px solid var(--line-soft);} .honest > div:first-child li{text-decoration:line-through;text-decoration-color:rgba(107,114,128,.45);} @media (max-width:760px){.honest{grid-template-columns:1fr;}} .start3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;} .start3 a{display:flex;flex-direction:column;padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .35s var(--ease);} .start3 a:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#D4E0F4;} .start3 small{font-size:13px;color:var(--muted);margin-bottom:8px;} .start3 b{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;letter-spacing:-.025em;color:var(--ink);margin-bottom:16px;} .start3 .tlink{margin-top:auto;} @media (max-width:860px){.start3{grid-template-columns:1fr;}} /* =========================================================================== 61. PORTFOLIO — project, video, website and creative slots Every card is a real button that opens the modal; content for the modal lives in a