:root { --ink:#0d1726; --muted:#617086; --line:#dbe3ef; --blue:#0057ff; --sky:#0a9af5; --paper:#f7f9fc; --font:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:20rem; margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); }
a { color:inherit; }
.home-page { width:min(100% - 2rem, 90rem); margin:0 auto; padding:0.6rem 0 2rem; overflow:hidden; }
.site-header { position:relative; z-index:20; min-height:4.5rem; padding:0 .9rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem; background:rgba(255,255,255,.91); border:1px solid rgba(255,255,255,.88); border-radius:.9rem; box-shadow:0 .55rem 1.6rem rgba(13,23,38,.09); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); }
.brand img { width:8.5rem; display:block; }
.desktop-nav { justify-self:center; display:flex; align-items:center; gap:1.2rem; }
.desktop-nav>a,.services-menu summary { color:#29364a; font-size:.84rem; font-weight:600; text-decoration:none; cursor:pointer; list-style:none; }
.desktop-nav>a:hover,.desktop-nav>a.is-current,.services-menu summary:hover { color:var(--blue); }
.services-menu { position:relative; }
.services-menu summary { display:flex; align-items:center; gap:.3rem; }
.services-menu summary::-webkit-details-marker { display:none; }
.services-menu summary svg { width:.9rem; height:.9rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; transition:transform 180ms ease; }
.services-menu[open] summary svg { transform:rotate(180deg); }
.service-popover { position:absolute; top:calc(100% + .7rem); left:50%; width:17.5rem; padding:.5rem; display:grid; gap:.2rem; background:rgba(255,255,255,.91); border:1px solid rgba(255,255,255,.88); border-radius:.9rem; box-shadow:0 1rem 2rem rgba(13,23,38,.12); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); transform:translateX(-50%); }
.service-popover a { padding:.58rem; display:grid; grid-template-columns:2rem 1fr; gap:.65rem; align-items:center; border-radius:.62rem; color:var(--ink); text-decoration:none; transition:background-color 180ms ease,color 180ms ease,transform 180ms ease; }
.service-popover a:hover { color:var(--blue); background:rgba(233,242,255,.85); transform:translateX(.12rem); }
.service-icon { width:2rem; height:2rem; display:grid; place-content:center; border-radius:.55rem; background:#f1f5fa; color:var(--blue); }
.service-icon::before { width:1rem; height:1rem; display:block; content:""; background:currentColor; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.icon-screen::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 18v3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 18v3'/%3E%3C/svg%3E"); }
.icon-share::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Ccircle cx='6' cy='12' r='2'/%3E%3Ccircle cx='18' cy='19' r='2'/%3E%3Cpath d='m8 11 8-5M8 13l8 5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Ccircle cx='6' cy='12' r='2'/%3E%3Ccircle cx='18' cy='19' r='2'/%3E%3Cpath d='m8 11 8-5M8 13l8 5'/%3E%3C/svg%3E"); }
.icon-pin::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.icon-bot::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='6' width='16' height='13' rx='3'/%3E%3Cpath d='M9 6V4M15 6V4M9 12h.01M15 12h.01M9 16h6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='6' width='16' height='13' rx='3'/%3E%3Cpath d='M9 6V4M15 6V4M9 12h.01M15 12h.01M9 16h6'/%3E%3C/svg%3E"); }
.icon-grid::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E"); }
.service-popover strong { display:block; font-size:.78rem; line-height:1.25; }.service-popover small { display:block; margin-top:.12rem; color:var(--muted); font-size:.62rem; line-height:1.25; }
.header-cta,.primary-cta { display:inline-flex; align-items:center; justify-content:center; border-radius:99rem; background:linear-gradient(135deg,var(--sky),var(--blue)); color:#fff; box-shadow:0 .5rem 1.1rem rgba(0,87,255,.18); font-weight:800; text-decoration:none; }
.header-cta { min-height:2.45rem; padding:.35rem .45rem .35rem .95rem; gap:.55rem; font-size:.72rem; }.header-cta span { width:1.65rem;height:1.65rem;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.22);font-size:.95rem; }
.menu-toggle { display:none; }
.hero { position:relative; min-height:46rem; margin-top:.7rem; display:grid; place-items:center; overflow:hidden; border-radius:1.2rem; background:#fbfcfe; isolation:isolate; }
.dot-field { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(0,87,255,.18) 1px,transparent 1.2px); background-size:9px 9px; -webkit-mask-image:radial-gradient(ellipse 64% 60% at center,black,transparent 78%); mask-image:radial-gradient(ellipse 64% 60% at center,black,transparent 78%); opacity:.76; }
.hero::after { position:absolute; inset:25% 18% 13%; z-index:-1; border-radius:50%; background:radial-gradient(ellipse,rgba(0,87,255,.14),transparent 66%); content:""; filter:blur(22px); }
.hero-content { position:relative; z-index:3; width:min(100% - 2rem,48rem); padding:4.5rem 0 5rem; text-align:center; animation:enter .75s both; }
.eyebrow { margin:0 0 1rem; display:flex; align-items:center; justify-content:center; gap:.5rem; color:var(--blue); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.eyebrow span { width:.5rem;height:.5rem;border-radius:50%;background:#54c968;box-shadow:0 0 0 .22rem rgba(84,201,104,.13); }
h1 { margin:0; font-size:clamp(2.65rem,5.2vw,5.2rem); line-height:.99; letter-spacing:0; }h1 em { color:var(--blue); font-style:normal; }
.hero-copy { max-width:41rem; margin:1.25rem auto 0; color:#506078; font-size:1rem; line-height:1.65; }.rating-proof { margin:1.8rem auto 1rem; display:flex; justify-content:center; align-items:center; gap:.7rem; text-align:left; }.proof-avatars { display:flex; }.proof-avatars span { width:1.7rem;height:1.7rem;margin-left:-.38rem;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:linear-gradient(135deg,#001b4d,#118df2);color:#fff;font-size:.43rem;font-weight:800; }.proof-avatars span:first-child { margin-left:0;background:linear-gradient(135deg,#ef5b3f,#ffc23c); }.proof-avatars span:nth-child(2) { background:linear-gradient(135deg,#8243e8,#ff8aa8); }.rating-proof b { display:block;font-size:.72rem; }.stars { color:#f7b832;font-size:.74rem;letter-spacing:.08em; }
.primary-cta { min-height:3.25rem; min-width:11.6rem; padding:.35rem .45rem .35rem 1.2rem; gap:1rem; font-size:.86rem; transition:transform 180ms ease,box-shadow 180ms ease; }.primary-cta:hover { box-shadow:0 .8rem 1.5rem rgba(0,87,255,.28); transform:translateY(-.16rem); }.primary-cta i { width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.2);font-size:1.05rem;font-style:normal; }.microcopy { margin:.7rem 0 0;color:#738197;font-size:.68rem;font-weight:600; }
.floating-card { position:absolute; z-index:2; overflow:hidden; border:1px solid rgba(218,226,239,.95); border-radius:.9rem; background:rgba(255,255,255,.9); box-shadow:0 1.2rem 2.3rem rgba(13,23,38,.14); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); animation:float 6s ease-in-out infinite; }.social-shot { top:6.2rem;left:-1rem;width:13.2rem;transform:rotate(-9deg); }.business-shot { top:4.2rem;right:3rem;width:13.2rem;animation-delay:-2s; }.site-shot { bottom:1.6rem;left:3.2rem;width:18rem;transform:rotate(8deg);animation-delay:-3.5s; }.system-shot { right:-.3rem;bottom:2.5rem;width:19rem;transform:rotate(-7deg);animation-delay:-1s; }
.shot-top { height:1.7rem;padding:.35rem .45rem;display:flex;align-items:center;gap:.25rem;border-bottom:1px solid #edf1f7; }.shot-top span:not(.mini-logo) { width:.28rem;height:.28rem;border-radius:50%;background:#d7e0ed; }.mini-logo { width:.8rem;height:.8rem;margin-right:auto;display:grid;place-items:center;border-radius:.24rem;background:var(--blue);color:#fff;font-size:.48rem;font-weight:800; }.post-visual { height:8rem;padding:1rem;display:flex;align-items:end;background:linear-gradient(140deg,#051a45,#075eff 67%,#6ac5ff);color:#fff;font-size:1rem;line-height:1.05; }.post-copy { padding:.7rem;display:grid;gap:.32rem; }.post-copy i,.business-lines i { height:.32rem;border-radius:99rem;background:#e9eef5; }.post-copy i:nth-child(2) { width:75%; }.post-copy i:nth-child(3) { width:52%; }
.business-head { padding:.85rem .9rem .55rem;display:grid;grid-template-columns:1.3rem 1fr;column-gap:.45rem;align-items:center; }.pin-mark { width:1.25rem;height:1.25rem;display:grid;place-items:center;border-radius:.35rem;background:#e8f2ff;color:var(--blue);font-size:.75rem; }.business-head b { font-size:.7rem; }.business-head small { grid-column:2;color:var(--muted);font-size:.5rem; }.rating { padding:.65rem .9rem;display:flex;align-items:center;gap:.3rem;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7; }.rating b { font-size:.8rem; }.rating span { color:#f5a817;font-size:.55rem;letter-spacing:.04em; }.rating small { color:var(--muted);font-size:.45rem; }.business-lines { padding:.75rem .9rem;display:grid;gap:.4rem; }.business-lines i:last-child { width:62%; }
.browser-bar { height:1.7rem;padding:.45rem .6rem;display:flex;align-items:center;gap:.25rem;border-bottom:1px solid #e9eef5; }.browser-bar i { width:.27rem;height:.27rem;border-radius:50%;background:#e0e7f1; }.browser-bar span { margin-left:.4rem;color:#96a3b4;font-size:.43rem; }.site-inside { min-height:8.8rem;padding:1.1rem;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(120deg,#fff,#e9f4ff); }.site-inside small { color:var(--blue);font-size:.45rem;font-weight:800;letter-spacing:.08em; }.site-inside b { margin-top:.45rem;font-size:1.15rem;line-height:1; }.site-inside button { margin-top:auto;padding:.38rem .6rem;border:0;border-radius:99rem;background:var(--ink);color:#fff;font:700 .48rem var(--font); }
.table-head { padding:.75rem .8rem;display:flex;justify-content:space-between;border-bottom:1px solid #e9eef5; }.table-head b { font-size:.65rem; }.table-head span { padding:.18rem .35rem;border-radius:99rem;background:#e7f1ff;color:var(--blue);font-size:.45rem;font-weight:800; }.table-row { min-height:1.85rem;padding:0 .8rem;display:grid;grid-template-columns:1.35fr .8fr .7fr;align-items:center;border-bottom:1px solid #eef2f7;color:#536277;font-size:.48rem; }.table-row i { width:.45rem;height:.45rem;margin-right:.28rem;display:inline-block;border-radius:50%;background:#f2a24b;vertical-align:middle; }.table-label { min-height:1.45rem;color:#9aa7b7;font-size:.42rem; }.success,.warning { width:max-content;padding:.17rem .3rem;border-radius:99rem;font-size:.4rem;font-weight:800; }.success { background:#e6f7eb;color:#198c4d; }.warning { background:#fff1d5;color:#bd7a00; }
.orbit-icons { position:absolute; inset:0; z-index:1; pointer-events:none; }.orbit-icons span { position:absolute;width:2.55rem;height:2.55rem;display:grid;place-items:center;border:1px solid #dae2ef;border-radius:.65rem;background:rgba(255,255,255,.82);box-shadow:0 .7rem 1.4rem rgba(13,23,38,.1);color:var(--blue);font-size:.68rem;font-weight:800;animation:float 5s ease-in-out infinite; }.orbit-icons span:nth-child(1){left:22%;bottom:8%;color:#e54b87;transform:rotate(-12deg)}.orbit-icons span:nth-child(2){left:31%;bottom:4%;color:#1877f2;animation-delay:-2s}.orbit-icons span:nth-child(3){right:30%;bottom:7%;color:#067abc;animation-delay:-3.5s}.orbit-icons span:nth-child(4){right:22%;bottom:11%;color:#f02b2b;transform:rotate(12deg);animation-delay:-1s}.orbit-icons span:nth-child(5){left:17%;top:19%;color:#4285f4;animation-delay:-4s}.orbit-icons span:nth-child(6){right:16%;top:16%;color:#343d4d;animation-delay:-.5s}.orbit-icons span:nth-child(7){left:36%;top:8%;color:#e2a500;animation-delay:-1.5s}.orbit-icons span:nth-child(8){right:37%;top:10%;color:#2777c7;animation-delay:-2.5s}
.logo-belt { padding:2rem 0 .2rem; }.logo-belt p { margin:0 0 1rem;text-align:center;color:#758399;font-size:.7rem;font-weight:700; }.marquee { overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent); }.marquee-track { width:max-content;display:flex;align-items:center;gap:4.2rem;animation:marquee 22s linear infinite; }.marquee img { width:8.5rem;height:auto;opacity:.6;filter:grayscale(1); }
.services-section { padding:clamp(4.5rem,9vw,8rem) 0 2rem; }.section-heading { width:min(100% - 2rem,44rem);margin:0 auto 2.5rem;text-align:center; }.section-heading h2 { margin:0;color:var(--ink);font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:0; }.section-heading h2 em { color:var(--blue);font-style:normal; }.section-heading>p:last-child { max-width:37rem;margin:1rem auto 0;color:var(--muted);font-size:.94rem;line-height:1.65; }
.services-grid { width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem; }.service-card { position:relative;min-height:28rem;padding:1.25rem;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid #e1e8f2;border-radius:.9rem;background:#fff;color:var(--ink);isolation:isolate;text-decoration:none;transition:transform 260ms ease,border-color 260ms ease,box-shadow 260ms ease; }.service-card::before { position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,87,255,.09),transparent 38%);content:"";opacity:0;transition:opacity 260ms ease; }.service-card:hover,.service-card:focus-visible { border-color:rgba(0,87,255,.3);box-shadow:0 1.2rem 2.8rem rgba(13,23,38,.11);outline:none;transform:translateY(-.35rem); }.service-card:hover::before,.service-card:focus-visible::before { opacity:1; }.service-card-copy { position:relative;z-index:2; }.card-index { color:#7d8ba0;font-size:.64rem;font-weight:800;letter-spacing:.08em; }.service-card h3 { margin:.45rem 0 .4rem;font-size:1.25rem;line-height:1.2; }.service-card p { max-width:18rem;margin:0;color:#637188;font-size:.75rem;line-height:1.55; }.card-link { position:absolute;top:0;right:0;display:flex;align-items:center;gap:.35rem;color:var(--blue);font-size:.66rem;font-weight:800;opacity:0;transform:translateX(-.4rem);transition:opacity 180ms ease,transform 180ms ease; }.card-link b { width:1.35rem;height:1.35rem;display:grid;place-items:center;border-radius:50%;background:#e7f1ff;font-size:.8rem; }.service-card:hover .card-link,.service-card:focus-visible .card-link { opacity:1;transform:none; }
.service-visual { position:relative;align-self:end;min-height:15.5rem;margin-top:1rem;overflow:hidden;border-radius:.65rem;background:#f5f8fc; }.service-visual::before { position:absolute;inset:0;background-image:linear-gradient(rgba(0,87,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,87,255,.06) 1px,transparent 1px);background-size:1.25rem 1.25rem;content:"";mask-image:radial-gradient(ellipse at 50% 60%,black,transparent 72%); }.float-tag { position:absolute;z-index:3;width:2.05rem;height:2.05rem;display:grid;place-items:center;border:1px solid #dae4f1;border-radius:.6rem;background:rgba(255,255,255,.92);box-shadow:0 .6rem 1rem rgba(13,23,38,.12);color:var(--blue);font-size:.68rem;font-weight:800;transition:transform 350ms cubic-bezier(.2,.8,.2,1),box-shadow 250ms ease; }.service-card:hover .float-tag,.service-card:focus-visible .float-tag { box-shadow:0 .9rem 1.3rem rgba(0,87,255,.19); }.visual-web { display:grid;place-items:center; }.web-browser { position:relative;z-index:1;width:79%;overflow:hidden;border:1px solid #dbe5f2;border-radius:.45rem;background:#fff;box-shadow:0 .8rem 1.5rem rgba(13,23,38,.12);transform:translateY(1.7rem) rotate(-4deg);transition:transform 450ms cubic-bezier(.2,.8,.2,1); }.service-card:hover .web-browser,.service-card:focus-visible .web-browser { transform:translateY(.7rem) rotate(0); }.web-toolbar { height:1.55rem;padding:0 .45rem;display:flex;align-items:center;gap:.2rem;border-bottom:1px solid #eef2f7; }.web-toolbar i { width:.25rem;height:.25rem;border-radius:50%;background:#d8e0eb; }.web-toolbar span { margin-left:.25rem;color:#9aa7b6;font-size:.38rem; }.web-layout { min-height:9.8rem;padding:1rem;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(135deg,#eaf5ff,#fff 58%,#e6edff); }.web-layout small { color:var(--blue);font-size:.38rem;font-weight:800;letter-spacing:.08em; }.web-layout strong { margin-top:.55rem;font-size:1.35rem;line-height:1.02; }.web-layout b { margin-top:auto;padding:.35rem .55rem;border-radius:99rem;background:var(--ink);color:#fff;font-size:.4rem; }.tag-code { top:1.4rem;right:1rem; }.tag-css { bottom:1.45rem;left:1rem; }.service-card:hover .tag-code { transform:translate(.15rem,-.5rem) rotate(7deg); }.service-card:hover .tag-css { transform:translate(-.2rem,.3rem) rotate(-9deg); }
.visual-social { display:grid;place-items:center; }.social-post { position:relative;z-index:1;width:66%;overflow:hidden;border:1px solid #e2e8f2;border-radius:.6rem;background:#fff;box-shadow:0 .8rem 1.6rem rgba(13,23,38,.12);transform:rotate(4deg) translateY(1.6rem);transition:transform 450ms cubic-bezier(.2,.8,.2,1); }.service-card:hover .social-post,.service-card:focus-visible .social-post { transform:rotate(0) translateY(.5rem) scale(1.04); }.social-profile { min-height:1.75rem;padding:.4rem .5rem;display:flex;align-items:center;gap:.3rem; }.social-profile i { width:.65rem;height:.65rem;border-radius:50%;background:linear-gradient(135deg,#fe8e43,#d72c92,#6b43ce); }.social-profile span { font-size:.38rem;font-weight:800; }.social-profile b { margin-left:auto;font-size:.52rem; }.social-art { height:7.6rem;padding:.8rem;display:flex;align-items:end;background:linear-gradient(145deg,#051b46,#0064e8 68%,#9cd9ff);color:#fff;font-size:1rem;font-weight:800;line-height:1; }.social-meta { padding:.55rem;display:grid;gap:.35rem; }.social-meta b { font-size:.53rem;letter-spacing:.05rem; }.social-meta span { color:#8290a4;font-size:.37rem; }.tag-instagram { top:1.2rem;left:1rem;color:#de3d88; }.tag-play { right:1.25rem;bottom:1.35rem;color:#f04040; }.service-card:hover .tag-instagram { transform:translate(-.15rem,-.5rem) rotate(-8deg); }.service-card:hover .tag-play { transform:translate(.25rem,.15rem) rotate(8deg); }
.visual-google { display:grid;place-items:center; }.google-panel { position:relative;z-index:1;width:79%;overflow:hidden;border:1px solid #dce5f0;border-radius:.55rem;background:#fff;box-shadow:0 .8rem 1.5rem rgba(13,23,38,.1);transform:translateY(1.8rem);transition:transform 450ms cubic-bezier(.2,.8,.2,1); }.service-card:hover .google-panel,.service-card:focus-visible .google-panel { transform:translateY(.65rem) scale(1.03); }.google-brand { padding:.7rem;display:grid;grid-template-columns:1.2rem 1fr;column-gap:.35rem;align-items:center; }.google-brand>span { width:1.15rem;height:1.15rem;display:grid;place-items:center;border-radius:.3rem;background:#e8f1ff;color:#4285f4;font-size:.7rem;font-weight:800; }.google-brand b { font-size:.6rem; }.google-brand small { grid-column:2;color:#8896a9;font-size:.36rem; }.google-rate { padding:.55rem .7rem;display:flex;align-items:center;gap:.28rem;border-top:1px solid #edf1f6;border-bottom:1px solid #edf1f6; }.google-rate strong { font-size:.72rem; }.google-rate span { color:#f2aa19;font-size:.48rem;letter-spacing:.04em; }.google-rate small { color:#8794a7;font-size:.35rem; }.google-action { padding:.6rem .7rem;color:#728096;font-size:.4rem; }.google-action b { float:right;color:#168750; }.tag-pin { top:1rem;right:1rem;color:#e75d46; }.tag-search { left:1rem;bottom:1.25rem;color:#4285f4; }.service-card:hover .tag-pin { transform:translate(.2rem,-.5rem) rotate(8deg); }.service-card:hover .tag-search { transform:translate(-.2rem,.2rem) rotate(-9deg); }
.visual-ai { display:grid;place-items:center; }.chat-window { position:relative;z-index:1;width:78%;min-height:11.4rem;padding:.65rem;overflow:hidden;border:1px solid #dce5f0;border-radius:.65rem;background:#fff;box-shadow:0 .8rem 1.5rem rgba(13,23,38,.1);transform:translateY(1.55rem) rotate(-3deg);transition:transform 450ms cubic-bezier(.2,.8,.2,1); }.service-card:hover .chat-window,.service-card:focus-visible .chat-window { transform:translateY(.45rem) rotate(0); }.chat-title { display:flex;align-items:center;gap:.35rem;padding-bottom:.55rem;border-bottom:1px solid #edf1f7; }.chat-title i { width:.65rem;height:.65rem;border-radius:50%;background:linear-gradient(135deg,#0057ff,#0a9af5); }.chat-title b { font-size:.43rem; }.chat-title span { margin-left:auto;color:#28a463;font-size:.35rem; }.bubble { width:max-content;max-width:78%;margin:.5rem 0 0;padding:.4rem .5rem;border-radius:.4rem;font-size:.4rem;line-height:1.3; }.incoming { background:#f0f4f9;color:#526176; }.outgoing { margin-left:auto;background:#e7f1ff;color:#0057ff; }.highlight { opacity:.58;transform:translateY(.8rem);transition:opacity 300ms ease,transform 350ms ease; }.service-card:hover .highlight,.service-card:focus-visible .highlight { opacity:1;transform:none; }.tag-spark { top:1rem;right:1rem;color:#7954ec; }.service-card:hover .tag-spark { transform:translate(.2rem,-.55rem) rotate(18deg); }
.service-card-wide { grid-column:span 2;min-height:25rem; }.service-card-wide .service-card-copy { max-width:20rem; }.visual-system { position:absolute;right:1.25rem;bottom:1.25rem;width:min(58%,35rem);min-height:17.5rem;display:grid;place-items:center; }.system-window { position:relative;z-index:1;width:94%;overflow:hidden;border:1px solid #dce5f0;border-radius:.6rem;background:#fff;box-shadow:0 .9rem 1.6rem rgba(13,23,38,.12);transform:translateY(2rem) rotate(-2deg);transition:transform 450ms cubic-bezier(.2,.8,.2,1); }.service-card:hover .system-window,.service-card:focus-visible .system-window { transform:translateY(.4rem) rotate(0); }.system-nav { min-height:2rem;padding:0 .7rem;display:flex;align-items:center;gap:.65rem;border-bottom:1px solid #edf1f7;color:#8a98aa;font-size:.39rem; }.system-nav b { color:var(--ink);font-size:.44rem; }.system-nav i { margin-left:auto;padding:.25rem .4rem;border-radius:99rem;background:#e7f1ff;color:var(--blue);font-size:.35rem;font-style:normal;font-weight:800; }.system-content { padding:.65rem .75rem; }.metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem; }.metrics span { padding:.45rem;border-radius:.35rem;background:#f5f8fc; }.metrics small { display:block;color:#8896a9;font-size:.33rem; }.metrics b { display:block;margin-top:.18rem;font-size:.75rem; }.progress-row { margin:.65rem 0;padding:.45rem 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7;color:#68778b;font-size:.37rem; }.progress-row i { width:44%;height:.25rem;overflow:hidden;border-radius:99rem;background:#e9eef5; }.progress-row i b { width:72%;height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#0a9af5,#0057ff);transition:width 400ms ease; }.service-card:hover .progress-row i b { width:91%; }.data-row { min-height:1.25rem;display:grid;grid-template-columns:1fr .68fr .6fr;align-items:center;color:#667589;font-size:.37rem; }.data-row b { width:max-content;padding:.16rem .27rem;border-radius:99rem;font-size:.32rem; }.data-row .active { background:#e5f7eb;color:#18864a; }.data-row .review { background:#fff0d6;color:#b87600; }.tag-system { top:1rem;right:1rem;color:#0057ff; }.tag-gear { left:1rem;bottom:1rem;color:#7b59e8; }.service-card:hover .tag-system { transform:translate(.25rem,-.5rem) rotate(10deg); }.service-card:hover .tag-gear { transform:translate(-.2rem,.25rem) rotate(-16deg); }
@keyframes float { 50% { translate:0 -.6rem; } } @keyframes enter { from { opacity:0;transform:translateY(.8rem) } to { opacity:1;transform:none } } @keyframes marquee { to { transform:translateX(-50%); } }
@media (max-width:900px) { .desktop-nav { gap:.8rem; }.site-shot { left:-3rem;opacity:.7; }.system-shot { right:-5rem;opacity:.7; }.business-shot { right:-3rem; }.social-shot { left:-4rem; }.orbit-icons span:nth-child(5),.orbit-icons span:nth-child(6){display:none;} .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.service-card-wide { grid-column:span 2; } }
@media (max-width:720px) { .home-page { width:100%;padding:0; }.site-header { position:relative;border-radius:0 0 .9rem .9rem;grid-template-columns:1fr auto; }.desktop-nav,.header-cta { display:none; }.desktop-nav.mobile-open { position:absolute;top:calc(100% + .55rem);right:1rem;left:1rem;padding:.55rem;display:grid;gap:.1rem;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.88);border-radius:.9rem;box-shadow:0 1rem 2rem rgba(13,23,38,.12);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%); }.desktop-nav.mobile-open>a,.desktop-nav.mobile-open summary { padding:.7rem;color:var(--ink);font-size:.84rem; }.desktop-nav.mobile-open .services-menu { padding:.1rem .7rem; }.desktop-nav.mobile-open .service-popover { position:static;width:auto;margin:.35rem 0 0;transform:none; }.menu-toggle { width:2.45rem;height:2.45rem;display:grid;align-content:center;gap:.35rem;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff; }.menu-toggle i { width:.95rem;height:1.5px;margin:auto;background:var(--ink); }.hero { min-height:40rem;margin-top:0;border-radius:0; }.hero-content { padding:4rem 1.3rem 2rem; }.hero-copy { font-size:.91rem; }.floating-card { opacity:.42;filter:blur(.15px); }.business-shot { top:2.5rem;right:-5rem; }.social-shot { top:3.8rem;left:-7rem; }.site-shot { bottom:2rem;left:-8rem; }.system-shot { right:-8rem;bottom:1rem; }.orbit-icons span { scale:.78; }.orbit-icons span:nth-child(1){left:9%;bottom:12%}.orbit-icons span:nth-child(2){left:23%;bottom:6%}.orbit-icons span:nth-child(3){right:22%;bottom:7%}.orbit-icons span:nth-child(4){right:8%;bottom:14%}.orbit-icons span:nth-child(7){left:16%;top:14%}.orbit-icons span:nth-child(8){right:16%;top:17%}.logo-belt { padding:1.7rem 0 .2rem; }.marquee-track { gap:2.8rem; }.marquee img { width:7rem; }.services-section { padding-top:4.5rem; }.services-grid { grid-template-columns:1fr; }.service-card,.service-card-wide { grid-column:auto;min-height:25rem; }.service-card-wide { min-height:28rem; }.visual-system { right:.8rem;bottom:1rem;width:76%; }.card-link { opacity:1;transform:none; }.section-heading { width:min(100% - 2.5rem,44rem); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important; } }
.home-page { overflow:clip; }
.home-page { width:100%;margin:0;padding:0; }.home-page>.mattic-header-host { position:fixed;top:.6rem;right:.75rem;left:.75rem;z-index:60; }.home-page .hero { min-height:100dvh;margin-top:0;border-radius:0; }
@media (max-width:720px) { .home-page>.mattic-header-host { top:0;right:0;left:0; } }
.service-card-copy { padding-bottom:1.35rem; }.service-visual { margin-top:2.35rem; }
.visual-social { display:block; }.post-stack { position:relative;width:100%;height:100%; }.visual-social .social-post { position:absolute;bottom:.55rem;left:50%;width:66%;transform-origin:center bottom;transition:transform 520ms cubic-bezier(.2,.8,.2,1),filter 340ms ease,box-shadow 340ms ease; }.visual-social .social-post-left { z-index:1;transform:translateX(-76%) rotate(-10deg) scale(.86);filter:saturate(.78) brightness(.97); }.visual-social .social-post-center { z-index:3;transform:translateX(-50%) rotate(3deg) translateY(1rem); }.visual-social .social-post-right { z-index:2;transform:translateX(-24%) rotate(10deg) scale(.86);filter:saturate(.78) brightness(.97); }.service-card:hover .social-post-left,.service-card:focus-visible .social-post-left { transform:translateX(-125%) rotate(-9deg) scale(.94);filter:none; }.service-card:hover .social-post-center,.service-card:focus-visible .social-post-center { transform:translateX(-50%) translateY(.2rem) scale(1.03); }.service-card:hover .social-post-right,.service-card:focus-visible .social-post-right { transform:translateX(25%) rotate(9deg) scale(.94);filter:none; }.service-card:hover .visual-social .social-post { box-shadow:0 1rem 1.7rem rgba(13,23,38,.15); }
.visual-google { display:block;background:linear-gradient(135deg,#edf6ff,#f8fbff 55%,#e8f0ff); }.visual-google .google-panel { display:none; }.google-print { position:absolute;bottom:-.7rem;right:0;height:95%;width:auto;max-width:78%;border:1px solid #dbe5f0;border-radius:.5rem;box-shadow:0 1rem 1.8rem rgba(13,23,38,.16);object-fit:cover;object-position:top;transition:transform 520ms cubic-bezier(.2,.8,.2,1),right 520ms cubic-bezier(.2,.8,.2,1),filter 300ms ease; }.google-print-back { z-index:1;right:24%;height:84%;filter:brightness(.94) saturate(.86);transform:rotate(-13deg); }.google-print-front { z-index:2;right:3%;transform:rotate(-7deg); }.service-card:hover .google-print-back,.service-card:focus-visible .google-print-back { right:38%;filter:none;transform:rotate(-16deg) translateY(-.3rem); }.service-card:hover .google-print-front,.service-card:focus-visible .google-print-front { right:5%;transform:rotate(-4deg) translateY(-.35rem); }.visual-google .float-tag { display:none; }
@media (max-width:720px) { .service-visual { margin-top:1.8rem; }.service-card:hover .social-post-left,.service-card:focus-visible .social-post-left { transform:translateX(-108%) rotate(-8deg) scale(.9); }.service-card:hover .social-post-right,.service-card:focus-visible .social-post-right { transform:translateX(8%) rotate(8deg) scale(.9); }.google-print-back { right:22%; }.google-print-front { right:0; } }
.visual-social .post-stack { position:absolute;inset:0;height:auto; }.visual-social .social-post { box-shadow:0 .3rem .65rem rgba(13,23,38,.08); }.service-card:hover .visual-social .social-post { box-shadow:0 .4rem .8rem rgba(13,23,38,.1); }.google-print { box-shadow:0 .3rem .65rem rgba(13,23,38,.08); }.google-print-back { z-index:2; }.google-print-front { z-index:1; }
.google-print-back { bottom:-.1rem;filter:none; }.google-print-front { bottom:-2.15rem; }.service-card:hover .google-print-front,.service-card:focus-visible .google-print-front { transform:rotate(-4deg) translateY(-.1rem); }

/* Mantem os mesmos dois planos, apenas troca a ordem horizontal dos perfis. */
.google-print-back { right:3%; }
.google-print-front { right:24%; }
.service-card:hover .google-print-back,.service-card:focus-visible .google-print-back { right:5%; }
.service-card:hover .google-print-front,.service-card:focus-visible .google-print-front { right:38%; }

@media (max-width:720px) {
  .google-print-back { right:0; }
  .google-print-front { right:22%; }
  .service-card:hover .google-print-back,.service-card:focus-visible .google-print-back { right:1%; }
  .service-card:hover .google-print-front,.service-card:focus-visible .google-print-front { right:30%; }
}

.service-feature-list { display:flex;flex-wrap:wrap;align-items:center;gap:.42rem .75rem;margin:7px 0 0;padding:0;list-style:none;color:#536277;font-size:.78rem;font-weight:650;line-height:1.25; }
.service-feature-list li { display:flex;align-items:center;gap:.36rem;min-width:0; }
.service-feature-list li::before { width:.8rem;height:.8rem;flex:0 0 .8rem;background:var(--blue);content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.1 16.2-4.3-4.3 1.7-1.7 2.6 2.6 8.4-8.4 1.7 1.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.1 16.2-4.3-4.3 1.7-1.7 2.6 2.6 8.4-8.4 1.7 1.7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.google-print-back { height:92.4%; }

/* Aproxima as ilustracoes das listas sem alterar o card largo de Sistemas. */
.service-card:not(.service-card-wide) .service-card-copy { padding-bottom:0; }
.service-card:not(.service-card-wide) .service-visual { align-self:end; margin-top:7px; }

/* O painel de Sistemas ocupa toda a lateral direita do card largo. */
.service-card-wide .visual-system { top:0; right:0; bottom:0; width:min(60%,35rem); min-height:0; height:auto; align-self:stretch; margin-top:0; border-radius:0 .85rem .85rem 0; }
.service-card-wide .service-feature-list { max-width:19rem; }
.service-card-wide .visual-system { background:transparent; overflow:visible; }
.service-card-wide .visual-system::before { inset:1.25rem; border:1px solid #e6edf6; border-radius:.65rem; background-color:#f5f8fc; }
.service-card-wide .visual-system .system-window { width:85%; }
.service-card-wide .visual-system .tag-system { top:2.25rem; right:1.25rem; }
.service-card-wide .visual-system .tag-gear { bottom:2.25rem; left:1.25rem; }

.visual-social { min-height:16rem; }
.visual-social .social-post { width:44%; }
.social-art { height:auto;padding:0;display:block;overflow:hidden;aspect-ratio:4 / 5;background:#f4f6f8; }
.social-art img { display:block;width:100%;height:100%;object-fit:contain;object-position:center; }

/* Linha do tempo da secao Como trabalhamos. */
.process-section { width:100%; margin:4rem 0 0; padding:clamp(6rem,11vw,9rem) max(1rem,calc((100% - 72rem) / 2)); display:grid; grid-template-columns:minmax(15rem,.78fr) minmax(0,1.22fr); gap:clamp(3rem,9vw,9rem); align-items:start; background:#060a12; color:#fff; }
.process-section .section-heading { position:sticky; top:100px; width:auto; margin:0; text-align:left; align-self:start; }
.process-section .eyebrow { justify-content:flex-start; color:#8bbfff; }
.process-section .eyebrow span { background:#58d887; }
.process-section h2 { margin:0; color:#f8fbff; font-size:clamp(2.4rem,4.3vw,4.5rem); line-height:1.02; }
.process-section h2 em { color:#1d7dff; font-style:normal; }
.process-section .section-heading > p:last-child { max-width:22rem; margin:1.25rem 0 0; color:#8290a7; font-size:.95rem; line-height:1.7; }
.process-steps { --timeline-progress:0%; position:relative; margin:0; padding:0; display:grid; grid-template-columns:1fr; border:0; list-style:none; }
.process-steps::before,.process-steps::after { position:absolute; top:.85rem; bottom:.85rem; left:.72rem; width:2px; border-radius:99px; content:""; }
.process-steps::before { background:#283241; }
.process-steps::after { bottom:auto; height:calc((100% - 1.7rem) * (var(--timeline-progress) / 100)); background:linear-gradient(180deg,#0a9af5,#0057ff); transition:height 260ms ease-out; }
.process-steps li { position:relative; min-height:10.5rem; padding:0 0 4.5rem 3.15rem; border:0; color:#657288; transition:color 320ms ease; }
.process-steps li:last-child { min-height:auto; padding-bottom:0; }
.process-steps li::before { position:absolute; top:.22rem; left:0; z-index:1; width:1.5rem; height:1.5rem; box-sizing:border-box; border:2px solid #3b4656; border-radius:50%; background:#060a12; box-shadow:0 0 0 .3rem #060a12; content:""; transition:border-color 320ms ease,background 320ms ease,box-shadow 320ms ease; }
.process-steps span { display:block; margin:0 0 .7rem; color:#617089; font-size:.68rem; font-weight:800; letter-spacing:.1em; transition:color 320ms ease; }
.process-steps h3 { margin:0 0 .65rem; color:#8390a4; font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.15; transition:color 320ms ease; }
.process-steps p { max-width:30rem; margin:0; color:#66758b; font-size:.9rem; line-height:1.7; transition:color 320ms ease; }
.process-steps li.is-active::before { border-color:#53b0ff; background:#0a78f0; box-shadow:0 0 0 .3rem #060a12,0 0 0 .42rem rgba(33,137,255,.16); }
.process-steps li.is-active span { color:#69b9ff; }
.process-steps li.is-active h3 { color:#f4f8ff; }
.process-steps li.is-active p { color:#b7c4d6; }

@media (max-width:720px) {
  .process-section { grid-template-columns:1fr; gap:3.5rem; margin-top:2rem; padding:5rem 1.25rem; }
  .process-section .section-heading { position:static; }
  .process-steps li { min-height:9rem; padding-bottom:3.2rem; }
}

.google-service-logo { position:absolute;z-index:4;display:grid;place-items:center;border:1px solid rgba(214,225,239,.96);border-radius:.55rem;background:rgba(255,255,255,.96);box-shadow:0 .35rem .8rem rgba(13,23,38,.08);transition:transform 320ms cubic-bezier(.2,.8,.2,1),box-shadow 240ms ease; }
.google-service-logo img { display:block;max-width:82%;max-height:82%;object-fit:contain; }
.google-logo-waze { top:1rem;left:.85rem;width:2.3rem;height:2.3rem;transform:rotate(-8deg); }
.google-logo-business { top:4.1rem;left:1.3rem;width:2.45rem;height:2.45rem;transform:rotate(7deg); }
.google-logo-maps { top:7.25rem;left:.75rem;width:2.35rem;height:2.35rem;transform:rotate(-6deg); }
.google-logo-google { bottom:1rem;left:.8rem;width:4.5rem;height:1.65rem;padding:.2rem;transform:rotate(-4deg); }
.service-card:hover .google-logo-waze,.service-card:focus-visible .google-logo-waze { box-shadow:0 .6rem 1.05rem rgba(13,23,38,.12);transform:translate(-.16rem,-.3rem) rotate(-12deg); }
.service-card:hover .google-logo-business,.service-card:focus-visible .google-logo-business { box-shadow:0 .6rem 1.05rem rgba(13,23,38,.12);transform:translate(.16rem,-.16rem) rotate(10deg); }
.service-card:hover .google-logo-maps,.service-card:focus-visible .google-logo-maps { box-shadow:0 .6rem 1.05rem rgba(13,23,38,.12);transform:translate(-.18rem,-.14rem) rotate(-10deg); }
.service-card:hover .google-logo-google,.service-card:focus-visible .google-logo-google { box-shadow:0 .6rem 1.05rem rgba(13,23,38,.12);transform:translate(-.08rem,.14rem) rotate(-2deg); }

.visual-social .float-tag { overflow:hidden;padding:.22rem; }
.visual-social .float-tag img { display:block;width:100%;height:100%;object-fit:contain; }
.tag-facebook { right:1.1rem;bottom:1.35rem; }
.tag-linkedin { top:1rem;right:1rem; }
.service-card:hover .tag-facebook,.service-card:focus-visible .tag-facebook { transform:translate(.22rem,.16rem) rotate(8deg); }
.service-card:hover .tag-linkedin,.service-card:focus-visible .tag-linkedin { transform:translate(.18rem,-.35rem) rotate(7deg); }

/* Home sections */
.section-heading-left { width:min(100% - 2rem,72rem);margin-right:auto;margin-left:auto;text-align:left; }
.section-heading-left .eyebrow { justify-content:flex-start; }
.process-section,.projects-section,.approach-section,.faq-section { width:min(100% - 2rem,72rem);margin:0 auto;padding:clamp(5rem,10vw,8.5rem) 0; }
.process-section { display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2.5rem,7vw,7rem);align-items:end; }
.process-section .section-heading { width:auto;margin:0;text-align:left; }
.process-section .eyebrow { justify-content:flex-start; }
.process-steps { margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);list-style:none;counter-reset:steps; }
.process-steps li { min-height:11.5rem;padding:1.3rem 1.25rem 1.25rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line); }
.process-steps li:nth-child(2n) { border-right:0; }
.process-steps span { color:var(--blue);font-size:.68rem;font-weight:800;letter-spacing:.08em; }
.process-steps h3 { margin:2.8rem 0 .5rem;font-size:1.15rem; }
.process-steps p { margin:0;color:var(--muted);font-size:.77rem;line-height:1.6; }
.projects-section { padding-top:0; }
.projects-section .section-heading { margin:0 0 2.2rem; }
.projects-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem; }
.project-card { min-height:28rem;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:.85rem;background:#fff;color:var(--ink);text-decoration:none;transition:transform 220ms ease,box-shadow 220ms ease,border-color 220ms ease; }
.project-card:hover,.project-card:focus-visible { border-color:rgba(0,87,255,.32);box-shadow:0 1.1rem 2.6rem rgba(13,23,38,.1);outline:none;transform:translateY(-.3rem); }
.project-art { position:relative;flex:1;min-height:21rem;overflow:hidden;background:#eff5fc; }
.project-art::after { position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(4,17,40,.16));content:"";pointer-events:none; }
.project-art img { width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform 500ms cubic-bezier(.2,.8,.2,1); }
.project-card:hover .project-art img,.project-card:focus-visible .project-art img { transform:scale(1.035); }
.project-card-social .project-art img { object-position:center 45%; }
.project-card-business .project-art img { object-position:center top; }
.project-info { min-height:6.8rem;padding:1.1rem 1.25rem;display:grid;grid-template-columns:1fr auto;align-items:end;gap:.6rem; }
.project-info span { grid-column:1/-1;color:var(--blue);font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; }
.project-info h3 { margin:0;font-size:1.1rem;line-height:1.2; }
.project-info b { display:flex;align-items:center;gap:.35rem;color:var(--blue);font-size:.69rem;white-space:nowrap; }
.project-info i { width:1.35rem;height:1.35rem;display:grid;place-items:center;border-radius:50%;background:#e7f1ff;font-size:.8rem;font-style:normal; }
.approach-section { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,8vw,9rem);align-items:start;border-top:1px solid var(--line); }
.approach-copy h2 { max-width:31rem;margin:0;font-size:clamp(2rem,4vw,3.45rem);line-height:1.07;letter-spacing:0; }
.approach-copy h2 em { color:var(--blue);font-style:normal; }
.approach-copy .eyebrow { justify-content:flex-start; }
.approach-points>p { margin:0 0 1.75rem;color:#536277;font-size:.94rem;line-height:1.75; }
.approach-points ul { margin:0;padding:0;border-top:1px solid var(--line);list-style:none; }
.approach-points li { padding:1rem 0;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:1rem;border-bottom:1px solid var(--line); }
.approach-points b { font-size:.78rem; }
.approach-points span { color:var(--muted);font-size:.74rem;line-height:1.5; }
.faq-section { padding-top:0; }
.faq-section .section-heading { margin:0 0 2.25rem; }
.faq-shell { display:grid;grid-template-columns:14rem minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:start; }
.faq-tabs { display:grid;gap:.35rem;padding:0; }
.faq-tabs button { min-height:2.75rem;padding:.55rem .8rem;border:1px solid transparent;border-radius:.55rem;background:transparent;color:#637188;font:700 .77rem var(--font);text-align:left;cursor:pointer;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease; }
.faq-tabs button:hover { color:var(--blue); }
.faq-tabs button[aria-selected="true"] { border-color:#c9dafc;background:#eef5ff;color:var(--blue); }
.faq-tabs button:focus-visible,.project-card:focus-visible,.primary-cta:focus-visible { outline:3px solid rgba(0,87,255,.35);outline-offset:3px; }
.faq-panel { border-top:1px solid var(--line); }
.faq-panel details { border-bottom:1px solid var(--line); }
.faq-panel summary { min-height:4.35rem;padding:1rem 2.1rem 1rem 0;position:relative;display:flex;align-items:center;color:var(--ink);font-size:.92rem;font-weight:800;line-height:1.4;cursor:pointer;list-style:none; }
.faq-panel summary::-webkit-details-marker { display:none; }
.faq-panel summary::after { position:absolute;right:0;width:1.4rem;height:1.4rem;display:grid;place-items:center;border:1px solid #cfdbea;border-radius:50%;color:var(--blue);content:"+";font-size:1.05rem;font-weight:500;transition:transform 180ms ease,background-color 180ms ease; }
.faq-panel details[open] summary::after { background:#e7f1ff;transform:rotate(45deg); }
.faq-panel details p { max-width:44rem;margin:0;padding:0 0 1.2rem;color:var(--muted);font-size:.84rem;line-height:1.7; }
.final-cta { position:relative;min-height:22rem;margin-top:clamp(1rem,4vw,4rem);padding:clamp(3rem,7vw,6rem) max(1rem,calc((100% - 72rem) / 2));display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2rem;align-items:end;overflow:hidden;background:#081b3e;color:#fff; }
.final-cta::before { position:absolute;inset:0;background-image:linear-gradient(rgba(122,164,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(122,164,255,.11) 1px,transparent 1px);background-size:2rem 2rem;content:"";mask-image:linear-gradient(90deg,black,transparent 78%);opacity:.45; }
.final-cta > * { position:relative;z-index:1; }
.final-cta .eyebrow { justify-content:flex-start;color:#9fc9ff; }
.final-cta h2 { margin:0;font-size:clamp(2.3rem,4.5vw,4.25rem);line-height:1.02;letter-spacing:0; }
.final-cta-action { max-width:25rem;justify-self:end; }
.final-cta-action p { margin:0 0 1.25rem;color:#c4d3ec;font-size:.9rem;line-height:1.65; }
.final-cta .primary-cta { background:linear-gradient(135deg,#0a9af5,#0057ff); }

@media (max-width:720px) {
  .services-grid,.projects-grid,.process-section,.approach-section,.faq-shell,.final-cta { grid-template-columns:1fr; }
  .section-heading-left { width:min(100% - 2.5rem,72rem); }
  .process-section,.projects-section,.approach-section,.faq-section { width:min(100% - 2.5rem,72rem);padding:4.5rem 0; }
  .process-steps { grid-template-columns:1fr; }
  .process-steps li,.process-steps li:nth-child(2n) { min-height:auto;padding:1.1rem 0;border-right:0; }
  .process-steps h3 { margin:1.6rem 0 .4rem; }
  .project-card { min-height:25rem; }
  .project-art { min-height:18rem; }
  .approach-section { gap:2.2rem; }
  .approach-points li { grid-template-columns:1fr;gap:.35rem; }
  .faq-section { padding-top:0; }
  .faq-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .faq-tabs button { min-height:2.9rem;text-align:center;font-size:.7rem; }
  .final-cta { min-height:0;margin-top:0;padding:4rem 1.25rem; }
  .final-cta-action { justify-self:start; }
}

/* FAQ - layout de duas colunas com tabs acima das perguntas. */
.faq-section { width:min(100% - 2rem,72rem);margin:0 auto;padding:clamp(5rem,10vw,8.5rem) 0;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2.5rem,8vw,8rem);align-items:start; }
.faq-intro { align-self:start; }
.faq-intro .eyebrow { justify-content:flex-start; }
.faq-intro h2 { max-width:25rem;margin:0;color:var(--ink);font-size:clamp(1.95rem,3.45vw,3.15rem);line-height:1.08;letter-spacing:0; }
.faq-intro h2 em { color:var(--blue);font-style:normal; }
.faq-intro>p:not(.eyebrow) { max-width:23rem;margin:1.25rem 0 2.25rem;color:var(--muted);font-size:.9rem;line-height:1.7; }
.faq-contact { min-height:2.9rem;padding:.42rem .46rem .42rem 1rem;display:inline-flex;align-items:center;gap:.65rem;border-radius:99rem;background:linear-gradient(135deg,#0a9af5 0%,#0057ff 55%,#0046df 100%);background-size:180% 180%;box-shadow:0 .55rem 1.1rem rgba(0,87,255,.18);color:#fff;font-size:.75rem;font-weight:800;text-decoration:none;transition:transform 180ms ease,box-shadow 180ms ease;animation:faq-gradient-flow 5s ease-in-out infinite; }
.faq-contact span { width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.2);font-size:.9rem; }
.faq-contact:hover { box-shadow:0 .8rem 1.4rem rgba(0,87,255,.25);transform:translateY(-.12rem); }
.faq-contact:focus-visible { outline:3px solid rgba(0,87,255,.35);outline-offset:3px; }
.faq-content { min-width:0;display:grid;gap:1.1rem; }
.faq-tabs { display:flex;flex-wrap:wrap;gap:.4rem;padding:0;border:0; }
.faq-tabs button { min-height:2.75rem;padding:.55rem .8rem;border:1px solid #d5e0ef;border-radius:.52rem;background:#fff;color:#617086;font:700 .73rem var(--font);text-align:center;cursor:pointer;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 180ms ease; }
.faq-tabs button:hover { border-color:#b7d0ff;color:var(--blue); }
.faq-tabs button[aria-selected="true"] { border-color:#bcd5ff;background:#edf5ff;color:var(--blue); }
.faq-tabs button:focus-visible { outline:3px solid rgba(0,87,255,.35);outline-offset:3px; }
.faq-panel { border:0; }
.faq-panel details { margin:0 0 .62rem;padding:0 1.15rem;border:1px solid #e0e7f1;border-radius:.7rem;background:#fff;transition:border-color 180ms ease,background-color 180ms ease; }
.faq-panel details[open] { border-color:#cadbfa;background:#f7faff; }
.faq-panel summary { min-height:4rem;padding:1rem 2.1rem 1rem 0;color:var(--ink);font-size:.83rem;font-weight:700; }
.faq-panel summary::after { right:0;width:1.45rem;height:1.45rem;border-color:#c9daf1;background:#fff;color:var(--blue); }
.faq-panel details[open] summary::after { background:#e7f1ff; }
.faq-panel details p { margin:0;padding:0 0 1.2rem;color:#64738a;font-size:.79rem;line-height:1.65; }
@keyframes faq-gradient-flow { 50% { background-position:100% 50%; } }

/* Remove o brilho que seguia a posicao do cursor dentro dos cards. */
.service-card::before { display:none; }

@media (max-width:720px) {
  .faq-section { width:min(100% - 2.5rem,72rem);padding:4.5rem 0;grid-template-columns:1fr;gap:2rem; }
  .faq-intro h2 { max-width:22rem;font-size:clamp(1.9rem,8vw,2.45rem); }
  .faq-tabs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
  .faq-tabs button { min-height:2.95rem;padding:.5rem;font-size:.69rem; }
  .faq-panel details { padding:0 .9rem; }
  .faq-panel summary { min-height:4.35rem;font-size:.79rem; }
}

/* Versao final: etapas empilhadas em uma unica linha do tempo vertical. */
.process-section { width:100%; margin:4rem 0 0; padding:clamp(6rem,10vw,9rem) max(1.25rem,calc((100% - 72rem) / 2)); display:grid; grid-template-columns:minmax(16rem,.72fr) minmax(0,1.28fr); gap:clamp(3rem,9vw,9rem); align-items:start; background:#05070b; color:#fff; }
.process-section .section-heading { position:sticky; top:100px; width:auto; margin:0; text-align:left; align-self:start; }
.process-section .eyebrow { justify-content:flex-start; color:#8dbfff; }
.process-section .eyebrow span { background:#54da87; }
.process-section h2 { margin:0; color:#f7faff; font-size:clamp(2.5rem,4.35vw,4.6rem); line-height:1.02; }
.process-section h2 em { color:#1978ff; font-style:normal; }
.process-section .section-heading > p:last-child { max-width:22rem; margin:1.3rem 0 0; color:#8c99ad; font-size:.95rem; line-height:1.7; }
.process-steps { --timeline-progress:0%; position:relative; display:grid !important; grid-template-columns:1fr !important; gap:0; margin:0; padding:0; border:0; list-style:none; }
.process-steps::before,.process-steps::after { position:absolute; top:.8rem; bottom:.8rem; left:.72rem; width:2px; border-radius:99px; content:""; }
.process-steps::before { background:#26303d; }
.process-steps::after { bottom:auto; height:calc((100% - 1.6rem) * (var(--timeline-progress) / 100)); background:linear-gradient(180deg,#0a9af5,#0057ff); transition:height 260ms ease-out; }
.process-steps li,.process-steps li:nth-child(2n) { position:relative; min-height:11.5rem; padding:0 0 4rem 3.4rem; border:0 !important; border-right:0 !important; color:#69778b; transition:color 280ms ease; }
.process-steps li:last-child { min-height:auto; padding-bottom:0; }
.process-steps li::before { position:absolute; top:.1rem; left:0; z-index:1; width:1.5rem; height:1.5rem; box-sizing:border-box; border:2px solid #3b4757; border-radius:50%; background:#05070b; box-shadow:0 0 0 .28rem #05070b; content:""; transition:border-color 280ms ease,background-color 280ms ease,box-shadow 280ms ease; }
.process-steps span { display:block; margin:0 0 .7rem; color:#66758a; font-size:.68rem; font-weight:800; letter-spacing:.1em; transition:color 280ms ease; }
.process-steps h3 { margin:0 0 .7rem; color:#7c899b; font-size:clamp(1.45rem,2vw,1.85rem); line-height:1.12; transition:color 280ms ease; }
.process-steps p { max-width:32rem; margin:0; color:#647187; font-size:.92rem; line-height:1.7; transition:color 280ms ease; }
.process-steps li.is-active::before { border-color:#6ebcff; background:#087ded; box-shadow:0 0 0 .28rem #05070b,0 0 0 .42rem rgba(37,139,255,.18); }
.process-steps li.is-active span { color:#74bcff; }
.process-steps li.is-active h3 { color:#f5f8ff; }
.process-steps li.is-active p { color:#bac7d8; }

@media (max-width:720px) {
  .process-section { grid-template-columns:1fr; gap:3.5rem; margin-top:2rem; padding:5rem 1.25rem; }
  .process-section .section-heading { position:static; }
  .process-steps li,.process-steps li:nth-child(2n) { min-height:9rem; padding:0 0 3.1rem 3rem; }
}

/* Hero editorial: texto como ponto focal e interfaces reais na lateral. */
.hero { min-height:100dvh; margin:0; display:block; overflow:hidden; border-radius:0; background:#fff; }
.dot-field { z-index:0; background-image:linear-gradient(rgba(15,38,73,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(15,38,73,.055) 1px,transparent 1px); background-size:1.75rem 1.75rem; -webkit-mask-image:none; mask-image:none; opacity:1; }
.hero::after { inset:8% 0 0 44%; z-index:0; border-radius:0; background:radial-gradient(ellipse at 65% 50%,rgba(19,143,255,.13),transparent 58%); filter:blur(10px); }
.hero-content { width:min(100% - 2.5rem,78rem); margin:0 auto; padding:clamp(8rem,13vw,11rem) 0 5rem; text-align:left; }
.hero-content .eyebrow { justify-content:flex-start; margin-bottom:1.1rem; }
.hero-content h1 { max-width:44rem; font-size:clamp(3.1rem,5.65vw,6.15rem); line-height:.93; letter-spacing:0; }
.hero-content h1 em { position:relative; display:inline-block; color:var(--blue); font-style:normal; }
.hero-content h1 em::after { position:absolute; top:-.12em; right:-.17em; bottom:-.16em; left:-.15em; border:1.5px solid rgba(5,36,80,.72); border-radius:50%; content:""; transform:rotate(-7deg); }
.hero-copy { max-width:31rem; margin:1.45rem 0 0; color:#596981; font-size:1rem; }
.rating-proof { justify-content:flex-start; margin:1.65rem 0 1rem; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.hero-secondary { min-height:3.25rem; padding:0 1.2rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid #cfd9e7; border-radius:99rem; color:#16253a; font-size:.82rem; font-weight:800; text-decoration:none; transition:border-color 180ms ease,background-color 180ms ease,transform 180ms ease; }
.hero-secondary:hover { border-color:#94b7f5; background:#f2f7ff; transform:translateY(-.12rem); }
.microcopy { margin-top:.75rem; }
.hero-visual { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-hex { position:absolute; top:16%; right:7%; width:clamp(18rem,30vw,33rem); opacity:.09; filter:saturate(1.2); }
.floating-card { z-index:2; border-radius:.75rem; box-shadow:0 1.2rem 2rem rgba(8,25,54,.12); animation:none; }
.site-shot { right:5%; bottom:7%; left:auto; width:clamp(20rem,32vw,31rem); transform:rotate(-3deg); }
.site-inside { min-height:13.2rem; padding:1.45rem; }
.site-inside b { font-size:1.8rem; }
.business-shot { top:15%; right:40%; width:11.5rem; transform:rotate(-6deg); }
.social-shot { top:9%; right:5%; left:auto; width:10.5rem; transform:rotate(5deg); }
.system-shot { right:25%; bottom:7%; width:21rem; transform:rotate(4deg); }
.orbit-icons { z-index:2; }
.orbit-icons span { width:2.3rem; height:2.3rem; border-radius:.6rem; animation:none; box-shadow:0 .7rem 1.2rem rgba(12,31,61,.1); }
.orbit-icons span:nth-child(1) { left:auto; right:34%; bottom:8%; }.orbit-icons span:nth-child(2) { display:none; }.orbit-icons span:nth-child(3) { right:8%; bottom:11%; }.orbit-icons span:nth-child(4) { display:none; }.orbit-icons span:nth-child(5) { left:auto; top:14%; right:31%; }.orbit-icons span:nth-child(6) { display:none; }.orbit-icons span:nth-child(7) { display:none; }.orbit-icons span:nth-child(8) { right:12%; top:24%; }

@media (max-width:900px) {
  .hero-content { padding-top:9rem; }
  .hero-content h1 { max-width:34rem; }
  .site-shot { right:-3rem; width:29rem; opacity:.84; }.system-shot { right:15%; width:18rem; opacity:.78; }.business-shot { right:32%; }.social-shot { right:0; }
}

@media (max-width:720px) {
  .hero { min-height:45rem; }
  .hero::after { inset:34% -30% 0 0; }
  .hero-content { width:min(100% - 2.5rem,34rem); padding:8rem 0 3rem; }
  .hero-content h1 { max-width:22rem; font-size:clamp(2.8rem,12vw,4.4rem); }
  .hero-copy { max-width:23rem; font-size:.91rem; }
  .hero-visual { opacity:.34; transform:translateX(20%); }
  .site-shot { right:-5rem; bottom:1rem; width:24rem; }.system-shot { right:18%; bottom:2rem; width:14rem; }.business-shot { display:none; }.social-shot { top:12%; right:4%; width:8rem; }
  .orbit-icons span:nth-child(3),.orbit-icons span:nth-child(8) { display:none; }
}

/* Hero inspirado na composicao Corporalis, adaptado para a identidade Mattic. */
.home-page>.mattic-header-host { top:0; right:0; left:0; }
.home-page .mattic-header { padding-right:max(1rem,calc((100% - 72rem) / 2)); padding-left:max(1rem,calc((100% - 72rem) / 2)); border:0; border-radius:0; background:rgba(255,255,255,.88); box-shadow:none; }
.hero { min-height:100dvh; background:#fff; }
.hero::after { inset:0 0 0 48%; background:radial-gradient(circle at 58% 48%,rgba(31,149,255,.12),transparent 53%); filter:none; }
.dot-field { background-image:linear-gradient(rgba(24,50,87,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(24,50,87,.055) 1px,transparent 1px); background-size:2rem 2rem; }
.hero-content { z-index:4; width:min(100% - 2.5rem,72rem); padding:clamp(8.5rem,15vh,10.5rem) 0 2.5rem; }
.hero-content h1 { max-width:41rem; font-size:clamp(3.3rem,5.6vw,5.75rem); line-height:.93; }
.hero-content h1 em::after { top:-.08em; right:-.13em; bottom:-.12em; left:-.12em; border-color:#101820; border-width:1.3px; transform:rotate(-6deg); }
.hero-copy { max-width:32rem; margin-top:1.35rem; }
.rating-proof { margin-top:1.5rem; }
.hero-support { margin-top:2.5rem; display:grid; gap:.65rem; }
.hero-support small { color:#8b98aa; font-size:.68rem; font-weight:700; }
.hero-support>div { display:flex; align-items:center; gap:1.3rem; }
.hero-support img { width:auto; height:1.7rem; object-fit:contain; filter:grayscale(1); opacity:.72; }
.hero-support img:first-child { width:5.5rem; height:auto; }
.hero-visual { z-index:2; overflow:hidden; }
.hero-orbit { position:absolute; z-index:2; display:block; border:1.2px solid rgba(10,19,31,.72); border-radius:50%; }
.hero-orbit-one { top:29%; right:-2%; width:35rem; height:10.5rem; transform:rotate(11deg); }
.hero-orbit-two { right:-4%; bottom:11%; width:37rem; height:12rem; transform:rotate(-10deg); }
.hero-orbit-three { right:12%; bottom:31%; width:28rem; height:8rem; transform:rotate(4deg); }
.hero-star { position:absolute; z-index:4; width:2rem; height:2rem; display:block; background:#07101b; clip-path:polygon(50% 0,59% 38%,85% 15%,62% 41%,100% 50%,62% 59%,85% 85%,59% 62%,50% 100%,41% 62%,15% 85%,38% 59%,0 50%,38% 41%,15% 15%,41% 38%); }
.hero-star-one { top:36%; right:7%; }
.hero-star-two { right:43%; bottom:17%; width:1.6rem; height:1.6rem; }
.hero-accent { position:absolute; z-index:0; width:2rem; height:2rem; display:block; background:#edf8ff; }
.hero-accent-one { top:8%; right:19%; }.hero-accent-two { top:28%; right:47%; }
.hero-float { position:absolute; z-index:5; min-width:10.5rem; padding:.65rem .75rem; display:flex; align-items:center; gap:.65rem; border:1px solid #e0e7ef; border-radius:.85rem; background:rgba(255,255,255,.94); box-shadow:0 .75rem 1.7rem rgba(8,25,54,.1); }
.hero-float img,.hero-code { width:2.15rem; height:2.15rem; flex:0 0 2.15rem; object-fit:contain; }
.hero-code { display:grid; place-items:center; border-radius:.55rem; background:#eaf4ff; color:var(--blue); font-size:.7rem; font-weight:800; }
.hero-float strong,.hero-float small { display:block; white-space:nowrap; }
.hero-float strong { color:#0f1c2d; font-size:.68rem; }.hero-float small { margin-top:.12rem; color:#8190a4; font-size:.52rem; }
.hero-float-business { top:16%; right:1.8%; transform:rotate(1deg); }
.hero-float-site { top:24%; right:39%; transform:rotate(-3deg); }

@media (max-width:1000px) {
  .hero-content h1 { max-width:36rem; font-size:clamp(3.2rem,6.4vw,5rem); }
  .hero-float-business { right:1%; }.hero-float-site { right:34%; }
}

@media (max-width:720px) {
  .home-page .mattic-header { padding-right:1rem; padding-left:1rem; }
  .hero { min-height:48rem; }
  .hero-content { padding:7.5rem 0 3rem; }
  .hero-content h1 { max-width:23rem; font-size:clamp(2.8rem,12vw,4rem); }
  .hero-copy { max-width:22rem; }
  .hero-orbit,.hero-star,.hero-float { display:none; }
  .hero-support { margin-top:1.7rem; }
}

/* Retorno ao cabeçalho flutuante e hero sem personagem ou grade. */
.home-page>.mattic-header-host { top:.6rem; right:.75rem; left:.75rem; }
.home-page .mattic-header { padding-right:.9rem; padding-left:.9rem; border:1px solid rgba(255,255,255,.88); border-radius:.9rem; background:rgba(255,255,255,.91); box-shadow:0 .55rem 1.6rem rgba(13,23,38,.09); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); }
.hero::after { background:radial-gradient(circle at 58% 48%,rgba(31,149,255,.1),transparent 53%); }

@media (max-width:720px) {
  .home-page>.mattic-header-host { top:0; right:0; left:0; }
  .home-page .mattic-header { border-radius:0 0 .9rem .9rem; }
}

/* Esteira contínua de projetos no card Websites. */
.visual-web { display:block; }
.web-carousel { position:absolute; inset:0; z-index:1; display:flex; align-items:center; overflow:hidden; transform-origin:center; transition:transform 420ms cubic-bezier(.2,.8,.2,1); }
.web-carousel-track { display:flex; align-items:center; width:max-content; height:100%; animation:web-projects-marquee 28s linear infinite; }
.web-carousel-set { display:flex; align-items:center; gap:.75rem; height:100%; padding-right:.75rem; }
.web-slide { width:12.5rem; height:auto; max-height:78%; flex:0 0 12.5rem; object-fit:contain; object-position:center; border:3px solid #fff; border-radius:.45rem; background:#fff; box-shadow:0 .45rem .95rem rgba(13,23,38,.14); }
.service-card:hover .web-carousel,.service-card:focus-visible .web-carousel { transform:scale(1.2); }
.service-card:hover .web-carousel-track,.service-card:focus-visible .web-carousel-track { animation-play-state:paused; }
.visual-web .tag-code { top:1rem; right:.75rem; }.visual-web .tag-css { bottom:1rem; left:.75rem; }
@keyframes web-projects-marquee { to { transform:translateX(-50%); } }

/* Projetos por serviço e CTA fotográfico. */
.projects-section { width:min(100% - 2rem,72rem); margin:0 auto; padding:clamp(5rem,10vw,8.5rem) 0 0; }
.projects-heading { max-width:44rem; margin:0 auto; text-align:center; }
.projects-heading .eyebrow { justify-content:center; }
.projects-heading .eyebrow { gap:.42rem; color:#101820; }
.projects-heading h2 { margin:0; color:var(--ink); font-size:clamp(2rem,4.1vw,3.7rem); line-height:1.08; letter-spacing:0; }
.projects-heading h2 em { color:var(--blue); font-style:normal; }
.projects-heading>p:last-child { max-width:32rem; margin:1rem auto 0; color:var(--muted); font-size:.92rem; line-height:1.65; }
.projects-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.65rem; margin:2.2rem auto 2rem; }
.project-tab { min-height:3.9rem; padding:.3rem .65rem; display:flex; align-items:center; gap:.55rem; border:1px solid #dbe5f1; border-radius:.75rem; background:#fff; color:#617087; font:700 .76rem var(--font); text-align:left; cursor:pointer; transition:border-color 180ms ease,background-color 180ms ease,color 180ms ease,transform 180ms ease,box-shadow 180ms ease; }
.project-tab .service-icon { width:2.2rem; height:2.2rem; border-radius:.62rem; background:#f0f5fb; }
.project-tab-label { display:grid; gap:.1rem; }.project-tab-label b { color:var(--ink); font-size:.78rem; line-height:1.2; }.project-tab-label small { color:#7b899c; font-size:.61rem; font-weight:600; line-height:1.22; }
.project-tab:hover { border-color:#bdd3fb; color:var(--blue); transform:translateY(-.16rem); }
.project-tab[aria-selected="true"] { border-color:#b9d1ff; background:#eef5ff; color:var(--blue); box-shadow:0 .55rem 1.2rem rgba(0,87,255,.1); }
.project-tab[aria-selected="true"] .service-icon { background:#dfeeff; }.project-tab[aria-selected="true"] .project-tab-label b { color:var(--blue); }
.project-tab:focus-visible { outline:3px solid rgba(0,87,255,.32); outline-offset:3px; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.project-panel[hidden] { display:none; }
.project-panel:not([hidden]) { animation:project-panel-in 300ms ease both; }
.project-empty { min-height:12rem; margin:0; display:grid; place-items:center; border-top:1px solid var(--line); color:#7b899c; font-size:.86rem; }
.projects-section .project-card { position:relative; min-height:27rem; border-radius:.8rem; background:#0b1b35; color:#fff; isolation:isolate; }
.projects-section .project-art { position:absolute; inset:0; min-height:0; background:#0b1b35; }.projects-section .project-art::after { background:linear-gradient(180deg,transparent 0%,transparent 68%,rgba(3,12,28,.86) 100%); }
.projects-section .project-art img { object-position:center; }
.projects-section .project-info { position:relative; z-index:1; min-height:0; margin-top:auto; padding:1.45rem; display:grid; grid-template-columns:1fr auto; column-gap:.6rem; row-gap:.18rem; align-items:end; }
.projects-section .project-info span { color:#bcd8ff; }.projects-section .project-info h3 { color:#fff; font-size:1.35rem; }.projects-section .project-info b { min-height:2.55rem; padding:.32rem .36rem .32rem .8rem; border-radius:99rem; background:#fff; color:var(--ink); font-size:.7rem; }.projects-section .project-info i { width:1.8rem; height:1.8rem; background:#e6f0ff; color:var(--blue); }
#project-panel-websites .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.35rem; }#project-panel-websites .project-card { min-height:0; aspect-ratio:16 / 10; }
#project-panel-redes .project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }#project-panel-redes .project-card { min-height:0; aspect-ratio:4 / 5; }#project-panel-redes .project-art img { object-fit:cover; object-position:center; }
#project-panel-google .project-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }#project-panel-google .project-card { min-height:28rem; flex:0 1 calc(33.333% - .7rem); aspect-ratio:3 / 4.6; }#project-panel-google .project-art img { object-fit:cover; object-position:center top; }
#project-panel-ia .project-grid { grid-template-columns:minmax(0,1.3fr) minmax(14rem,.7fr); }#project-panel-ia .project-card:first-child { min-height:23rem; }#project-panel-ia .project-card:last-child { min-height:23rem; }
#project-panel-sistemas .project-grid { grid-template-columns:minmax(0,1.45fr) minmax(14rem,.55fr); }#project-panel-sistemas .project-card:first-child { min-height:23rem; }#project-panel-sistemas .project-card:last-child { min-height:23rem; }
.project-card-interface { background:#0b1b35; }.project-card-interface .project-info { color:#fff; }
.project-interface { position:absolute; inset:0; min-height:0; padding:1rem; overflow:hidden; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(135deg,#f3f8ff,#eaf3ff); }
.project-interface::before { position:absolute; inset:0; background-image:linear-gradient(rgba(0,87,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,87,255,.06) 1px,transparent 1px); background-size:1.25rem 1.25rem; content:""; mask-image:radial-gradient(ellipse at 50% 50%,black,transparent 75%); }
.project-interface>* { position:relative; z-index:1; }
.project-chat-case { align-items:flex-start; gap:.55rem; }
.project-chat-case>span,.project-flow-case>span,.project-system-case>span { width:100%; padding:.6rem .7rem; display:flex; justify-content:space-between; border-bottom:1px solid #edf2f8; background:#fff; color:#334154; font-size:.55rem; font-weight:800; }
.project-chat-case>span b { color:#1cab64; font-size:.42rem; }
.project-chat-case p { max-width:72%; margin:0; padding:.55rem .7rem; border-radius:.45rem; background:#fff; color:#53647b; font-size:.58rem; line-height:1.35; box-shadow:0 .4rem .8rem rgba(13,23,38,.05); }
.project-chat-case p:nth-of-type(2) { align-self:flex-end; background:#e5f0ff; color:#1761d6; }.project-chat-case p:nth-of-type(3) { opacity:.78; }
.project-flow-case { align-items:center; gap:.58rem; }
.project-flow-case>span { margin-bottom:.1rem; }.project-flow-case i { width:76%; padding:.65rem .75rem; display:block; border:1px solid #e2eaf4; border-radius:.45rem; background:#fff; color:#53647b; font-size:.58rem; font-style:normal; box-shadow:0 .35rem .7rem rgba(13,23,38,.045); }.project-flow-case i::before { width:.42rem; height:.42rem; margin-right:.4rem; display:inline-block; border-radius:50%; background:#0a8df4; content:""; vertical-align:middle; }.project-flow-case i:nth-of-type(2)::before { background:#7d5be7; }.project-flow-case i:nth-of-type(3)::before { background:#2fb36d; }
.project-system-case { justify-content:flex-start; padding:1.1rem; }.project-system-case>span { border:1px solid #e5edf6; border-radius:.45rem .45rem 0 0; }.project-system-case>span b { padding:.15rem .35rem; border-radius:99rem; background:#e7f1ff; color:var(--blue); font-size:.4rem; }.project-system-case>div { width:100%; padding:.7rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; border:1px solid #e5edf6; border-top:0; background:#fff; }.project-system-case i { padding:.5rem; border-radius:.35rem; background:#f5f8fc; font-style:normal; }.project-system-case small,.project-system-case strong { display:block; }.project-system-case small { color:#8a98aa; font-size:.38rem; }.project-system-case strong { margin-top:.2rem; color:var(--ink); font-size:.78rem; }.project-system-case p { width:82%; height:.28rem; margin:.9rem auto 0; border-radius:99rem; background:linear-gradient(90deg,#0a9af5 74%,#e6edf6 74%); }
.projects-cta { position:relative; width:min(100% - 2rem,72rem); min-height:25rem; margin:clamp(3rem,7vw,6rem) auto 0; overflow:hidden; border-radius:.9rem; background:#02050a; color:#fff; }
.projects-cta::after { display:none; }
.projects-cta-content { position:relative; z-index:1; max-width:34rem; padding:clamp(2.5rem,6vw,5rem); }
.projects-cta .eyebrow { justify-content:flex-start; color:#b8d8ff; }.projects-cta .eyebrow span { background:#57dc8c; }
.projects-cta h2 { margin:0; font-size:clamp(2rem,4.1vw,3.6rem); line-height:1.07; letter-spacing:0; }
.projects-cta-content>p:not(.eyebrow) { max-width:29rem; margin:1rem 0 1.65rem; color:#d5e1f2; font-size:.92rem; line-height:1.65; }
.projects-cta .primary-cta { background:linear-gradient(135deg,#0a9af5,#0057ff); }
@keyframes project-panel-in { from { opacity:0; transform:translateY(.5rem); } to { opacity:1; transform:none; } }

@media (max-width:720px) {
  .projects-section { width:min(100% - 2.5rem,72rem); padding-top:4.5rem; }
  .projects-heading h2 { font-size:clamp(2rem,10vw,3rem); }
  .projects-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin:1.7rem auto; }.project-tab { min-height:6.2rem; padding:.8rem; }.project-tab:last-child { grid-column:1/-1; width:calc(50% - .25rem); justify-self:center; }.project-tab .service-icon { width:1.9rem; height:1.9rem; }.project-tab-label b { font-size:.72rem; }.project-tab-label small { font-size:.56rem; }
  .project-grid,#project-panel-websites .project-grid,#project-panel-redes .project-grid,#project-panel-ia .project-grid,#project-panel-sistemas .project-grid { grid-template-columns:1fr; }#project-panel-google .project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }#project-panel-google .project-card { min-height:20rem; flex:auto; aspect-ratio:3 / 4.35; }.projects-section .project-card { min-height:25rem; }#project-panel-websites .project-card,#project-panel-redes .project-card { aspect-ratio:auto; }.projects-section .project-art,.project-interface { min-height:0; }
  .projects-cta { width:min(100% - 2.5rem,72rem); min-height:29rem; margin-top:4rem; }.projects-cta-content { padding:2rem; display:flex; min-height:29rem; flex-direction:column; justify-content:flex-end; }.projects-cta h2 { font-size:clamp(2rem,9.5vw,3rem); }
}

/* Marca leve nos títulos de seção. */
.eyebrow { gap:.46rem; }
.eyebrow>span { display:none; }
.eyebrow { color:#101820; }
.eyebrow::before { width:.82rem; height:.82rem; flex:0 0 .82rem; display:block; background:center / contain no-repeat url("../assets/logo-mattic-preta-isolada.avif"); content:""; }
.process-section .eyebrow,.projects-cta .eyebrow { color:var(--blue); }
.process-section .eyebrow::before,.projects-cta .eyebrow::before { background-image:url("../assets/logo-mattic-branca-isolada.avif"); }

/* Projetos: ajustes de leitura para telas pequenas. */
@media (max-width:720px) {
  .projects-tabs { gap:.45rem; }
  .project-tab { min-height:4rem; padding:.28rem .55rem; gap:.5rem; }
  .project-tab .service-icon { width:1.7rem; height:1.7rem; border-radius:.5rem; }
  .project-tab-label { gap:.05rem; }.project-tab-label b { font-size:.68rem; }.project-tab-label small { font-size:.52rem; line-height:1.15; }
  .project-grid,#project-panel-websites .project-grid,#project-panel-redes .project-grid,#project-panel-google .project-grid,#project-panel-ia .project-grid,#project-panel-sistemas .project-grid { display:grid; grid-template-columns:1fr; }
  .projects-section .project-card { min-height:0; }
  #project-panel-websites .project-card { aspect-ratio:16 / 10; }
  #project-panel-redes .project-card { aspect-ratio:4 / 5; }
  #project-panel-google .project-card { aspect-ratio:3 / 4.6; }
  #project-panel-ia .project-card,#project-panel-sistemas .project-card { aspect-ratio:4 / 3; }
  .projects-section .project-art img { object-fit:contain; object-position:center; background:#0b1b35; }
}

/* Hero: resultados reais ao redor da pessoa, sem ornamentos circulares. */
.hero-content h1 em::after { display:none; }

/* Escala de títulos contida para preservar respiro no hero e no CTA final. */
.home-page { --mattic-shell-width:75rem; }
.home-page > .mattic-header-host { right:auto; left:50%; width:min(calc(100% - 1.5rem),var(--mattic-shell-width)); transform:translateX(-50%); }
.hero-content h1 { max-width:33rem; font-size:clamp(2.6rem,4.1vw,4.1rem); }
.projects-cta h2 { max-width:14ch; font-size:clamp(1.75rem,3vw,2.6rem); }
@media (max-width:720px) { .home-page > .mattic-header-host { right:auto; left:50%; width:calc(100% - 1rem); transform:translateX(-50%); }.hero-content h1 { max-width:22rem; font-size:clamp(2.4rem,10vw,3.4rem); }.projects-cta h2 { max-width:13ch; font-size:clamp(1.7rem,7.7vw,2.3rem); } }
.hero-accent,.hero-orbit,.hero-star,.hero-float { display:none; }
.hero-visual { overflow:visible; }
.hero-status { position:absolute; z-index:5; min-width:9.7rem; padding:.72rem .85rem; display:grid; grid-template-columns:1.65rem 1fr; column-gap:.48rem; align-items:center; border:1px solid rgba(218,228,241,.96); border-radius:.75rem; background:rgba(255,255,255,.96); box-shadow:0 .7rem 1.5rem rgba(13,30,59,.1); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#728098; }
.hero-status-icon { width:1.65rem; height:1.65rem; grid-row:1 / span 2; display:grid; place-items:center; border-radius:.5rem; background:#eaf3ff; }
.hero-status-icon::before { width:.52rem; height:.52rem; display:block; border-radius:50%; background:linear-gradient(135deg,#0a9af5,#0057ff); box-shadow:0 0 0 .22rem rgba(0,87,255,.1); content:""; }
.hero-status span:not(.hero-status-icon) { font-size:.62rem; font-weight:700; line-height:1.2; }
.hero-status strong { color:#10213a; font-size:1.05rem; line-height:1.15; letter-spacing:0; }
.hero-status-visits { top:27%; right:40%; }
.hero-status-views { top:13%; right:5%; }
.hero-status-profile { right:36%; bottom:13%; min-width:12.4rem; }
.hero-projects { position:absolute; z-index:3; top:50%; right:clamp(1.5rem,5vw,6rem); width:min(39vw,31rem); height:min(60vh,32rem); transform:translateY(-43%); }
.hero-project-card { position:absolute; overflow:hidden; display:block; border:1px solid rgba(220,230,242,.98); border-radius:.75rem; background:#fff; box-shadow:0 1rem 2.1rem rgba(11,30,58,.15); color:#fff; text-decoration:none; transform-origin:center; transition:transform 260ms cubic-bezier(.2,.8,.2,1),box-shadow 260ms ease,filter 260ms ease,opacity 260ms ease; }
.hero-project-card::after { position:absolute; right:0; bottom:0; left:0; height:43%; background:linear-gradient(transparent,rgba(3,13,31,.86)); content:""; pointer-events:none; }
.hero-project-card>img:first-child { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.hero-project-web { top:3%; left:2%; width:61%; aspect-ratio:16 / 10; transform:rotate(-5deg); }.hero-project-web>img:first-child { object-position:center top; }
.hero-project-social { top:29%; right:1%; width:39%; aspect-ratio:4 / 5; transform:rotate(5deg); }.hero-project-social>img:first-child { object-position:center; }
.hero-project-maps { bottom:2%; left:15%; width:49%; aspect-ratio:3 / 4; transform:rotate(-2deg); }.hero-project-maps>img:first-child { object-position:center top; }
.hero-project-caption { position:absolute; z-index:2; right:.65rem; bottom:.6rem; left:.65rem; display:grid; gap:.08rem; }.hero-project-caption b { font-size:.68rem; line-height:1.2; }.hero-project-caption small { font-size:.48rem; line-height:1.2; opacity:.84; }
.hero-project-logos { position:absolute; z-index:3; top:.5rem; right:.5rem; display:flex; align-items:center; }.hero-project-logos img { width:1.2rem; height:1.2rem; margin-left:-.2rem; padding:.16rem; border:1px solid #e4ebf4; border-radius:50%; background:#fff; object-fit:contain; }.hero-project-logos img:first-child { margin-left:0; }
.hero-projects:hover .hero-project-card:not(:hover),.hero-projects:focus-within .hero-project-card:not(:focus-visible) { opacity:.5; filter:saturate(.72); transform:scale(.94); }
.hero-project-card:hover,.hero-project-card:focus-visible { z-index:4; box-shadow:0 1.5rem 2.7rem rgba(6,27,59,.22); filter:none; outline:0; }
.hero-project-web:hover,.hero-project-web:focus-visible { transform:rotate(-2deg) scale(1.08); }.hero-project-social:hover,.hero-project-social:focus-visible { transform:rotate(2deg) scale(1.1); }.hero-project-maps:hover,.hero-project-maps:focus-visible { transform:rotate(1deg) scale(1.1); }

@media (max-width:1000px) {
  .hero-status-visits { right:33%; }.hero-status-views { right:2%; }.hero-status-profile { right:29%; }
  .hero-projects { right:1rem; width:43vw; }
}

@media (max-width:720px) {
  .hero { min-height:49rem; }
  .hero-status { min-width:0; padding:.58rem .62rem; border-radius:.65rem; grid-template-columns:1.45rem 1fr; column-gap:.38rem; box-shadow:0 .45rem 1rem rgba(13,30,59,.08); }
  .hero-status-icon { width:1.45rem; height:1.45rem; border-radius:.42rem; }
  .hero-status span:not(.hero-status-icon) { font-size:.54rem; }.hero-status strong { font-size:.84rem; }
  .hero-status-visits { top:auto; right:auto; bottom:7.5rem; left:1.25rem; }
  .hero-status-views { top:auto; right:1.25rem; bottom:11.7rem; }
  .hero-status-profile { right:1.25rem; bottom:7.5rem; min-width:10.9rem; }
  .hero-projects { top:auto; right:.6rem; bottom:15rem; width:13rem; height:10.5rem; transform:none; opacity:.32; pointer-events:none; }
  .hero-project-caption { display:none; }.hero-project-logos { transform:scale(.78); transform-origin:top right; }
}