:root {
    --bg: #050505;
    --surface: #0d0d0e;
    --surface-2: #171717;
    --line: #292929;
    --text: #f4f4f4;
    --muted: #a9a9ad;
    --blue: #2c96f3;
    --blue-2: #0b5fa8;
    --max: 1280px;
    --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.section-dark { position: relative; overflow: hidden; background: #050505; }
.section-light { color: #101010; background: radial-gradient(circle at 50% 45%, #fff 0%, #f4f4f4 50%, #d8d8d8 100%); }

.site-shell { overflow: clip; }
.site-header { position: absolute; inset: 22px 0 auto; z-index: 50; transition: .25s ease; }
.site-header.is-scrolled { position: fixed; top: 0; padding: 10px 0; background: rgba(5,5,5,.78); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.06); }
.site-header__inner { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 7px; width: 121px; flex: 0 0 auto; }
.brand__mark { width: 47px; height: 51px; overflow: hidden; display: grid; place-items: center; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__word { width: 65px; overflow: hidden; display: grid; place-items: center; }
.brand__word img { width: 100%; max-height: 40px; object-fit: contain; object-position: left center; }
.site-nav { display: flex; align-items: center; gap: clamp(32px, 5vw, 52px); margin-left: auto; margin-right: auto; }
.site-nav a { position: relative; font-size: 15px; color: #bebebe; letter-spacing: -.06em; transition: .2s; }
.site-nav a:hover, .site-nav a.active { color: var(--blue); }
.site-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--blue); }
.menu-button { display: none; width: 44px; height: 44px; border: 1px solid #333; border-radius: 50%; background: #111; }
.menu-button span { display: block; width: 17px; height: 1px; margin: 5px auto; background: #fff; }
.mobile-menu { display: none; }

.gex-button { min-height: 50px; border: 1px solid var(--blue); border-radius: 999px; padding: 6px 8px 6px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--blue); font-size: 13px; font-weight: 700; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.gex-button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(44,150,243,.18); }
.gex-button__arrow { font-size: 15px; transform: rotate(90deg); }
.gex-button__dot { width: 26px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #000; font-size: 13px; }
.gex-button--filled { border-color: #8cc6f9; color: #030303; background: linear-gradient(180deg, var(--blue), #bddefb); box-shadow: 0 10px 38px rgba(44,150,243,.32); }
.gex-button--filled .gex-button__dot { background: #050505; color: #fff; }

.section-tag { display: inline-flex; align-items: center; min-height: 40px; padding: 5px 20px 5px 8px; gap: 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.06)); color: rgba(255,255,255,.76); font-size: 19px; letter-spacing: -.03em; }
.section-tag__icon { width: 48px; height: 28px; display: grid; place-items: center; border-radius: 999px; border: 2px solid rgba(255,255,255,.15); background: linear-gradient(180deg, var(--blue), #bddefb); color: #050505; font-size: 17px; }

.hero { min-height: 930px; padding-top: 160px; background:
    radial-gradient(900px 340px at 50% 62%, rgba(13,120,222,.35), transparent 58%),
    radial-gradient(650px 260px at 50% 75%, rgba(44,150,243,.18), transparent 70%), #050505; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, #000, transparent 65%); }
.hero__inner { position: relative; z-index: 2; text-align: center; }
.hero__title { max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.hero__title h1 { margin: 0; font-size: clamp(54px, 4.8vw, 76px); line-height: .99; letter-spacing: -.055em; font-weight: 400; background: linear-gradient(90deg,#fff,#aaa); -webkit-background-clip: text; color: transparent; }
.hero__title h1 span { color: inherit; }
.hero__title p { max-width: 710px; margin: 0; font-size: clamp(18px,1.4vw,24px); line-height: 1.12; letter-spacing: -.02em; color: rgba(255,255,255,.7); }
.hero__title strong { color: #fff; }
.hero__chips { position: absolute; inset: 100px 0 auto; pointer-events: none; }
.hero__chips > span { position: absolute; padding: 8px 20px; border: 1px solid var(--blue); border-radius: 999px; color: #8fcaff; font-size: 12px; box-shadow: inset 0 0 12px rgba(44,150,243,.1); }
.hero__chips > span:nth-child(1){left:3%;top:30px;transform:rotate(-10deg)}
.hero__chips > span:nth-child(2){right:0;top:18px;transform:rotate(8deg)}
.hero__chips > span:nth-child(3){left:1%;top:175px;transform:rotate(-6deg)}
.hero__chips > span:nth-child(4){right:3%;top:190px;transform:rotate(-5deg)}
.hero__chips > span:nth-child(5){right:10%;top:105px;transform:rotate(8deg)}
.hero__actions { margin-top: 74px; display: flex; justify-content: center; gap: 14px; }
.hero__horizon { position: absolute; left: 50%; bottom: 10px; width: min(1800px,120vw); height: 400px; transform: translateX(-50%); border-radius: 50% 50% 0 0; border-top: 10px solid rgba(58,163,255,.25); box-shadow: 0 -20px 70px rgba(44,150,243,.55), inset 0 50px 80px rgba(44,150,243,.15); opacity: .88; }

.story { padding: 80px 0 130px; min-height: 850px; background: radial-gradient(700px 420px at 80% 55%, rgba(44,150,243,.08), transparent 70%), #050505; }
.story::after { content:""; position:absolute; left:-220px; bottom:-160px; width:560px; height:620px; border-radius:45%; background:#101010; transform:rotate(-18deg); }
.story__grid { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.25fr; align-items: center; gap: 30px; }
.story__copy { padding-left: 0; }
.story__copy .section-tag { transform: scale(.72); transform-origin: left; margin-bottom: 25px; }
.story__copy h2 { margin: 0 0 30px; font-size: clamp(48px,4vw,72px); line-height: 1.02; font-weight: 400; letter-spacing: -.055em; max-width: 620px; }
.story__body { max-width: 550px; font-size: clamp(19px,1.5vw,24px); line-height: 1.1; color: rgba(255,255,255,.74); }
.story__body p { margin: 0 0 23px; }
.story__body strong { color: var(--blue); }
.story__visual { position: relative; min-height: 680px; display: grid; place-items: center; }
.story__visual img { position: relative; z-index: 2; width: 760px; max-width: 115%; filter: drop-shadow(0 30px 45px rgba(0,0,0,.7)); }
.story__visual-glow { position:absolute; width:520px; height:520px; border-radius:50%; background:var(--blue); box-shadow:0 0 110px rgba(44,150,243,.45); }

.ecosystem-wrap { padding: 20px 0 90px; }
.ecosystem { border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #fff 0%, #f5f5f5 52%, #cfcfcf 100%); color: #111; text-align: center; box-shadow: 0 24px 90px rgba(0,0,0,.35); }
.ecosystem__eyebrow { display: block; color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .09em; padding-top: 74px; }
.ecosystem > h2 { max-width: 900px; margin: 8px auto 24px; padding: 0 30px; font-size: clamp(42px,4vw,65px); line-height: 1.02; font-weight: 400; letter-spacing: -.055em; }
.ecosystem > h2 span { color: #8b8b8b; }
.ecosystem > .gex-button { margin-bottom: 72px; color: #111; border-color:#8d8d8d; }
.ecosystem__blue { padding: 60px 140px 70px; background: radial-gradient(circle at 50% 25%, #2c96f3 0, #1676ca 48%, #064b86 100%); color: #fff; position: relative; overflow: hidden; }
.ecosystem__blue::before { content:""; position:absolute; inset:-30% auto auto -80px; width:420px; height:680px; border-radius:50%; border:80px solid rgba(255,255,255,.06); }
.ecosystem__blue h3 { position: relative; max-width: 1040px; margin: 0 auto 52px; font-size: clamp(40px,3.5vw,58px); line-height: 1.04; letter-spacing: -.05em; font-weight: 400; }
.process-grid { position: relative; display:grid; grid-template-columns:1fr 1fr; gap:6px; max-width:1000px; margin:0 auto; text-align:left; }
.process-grid article { min-height: 160px; padding:26px; border-radius:16px; background:radial-gradient(circle at 50% 25%,#303030,#070707 75%); border:1px solid rgba(255,255,255,.06); }
.process-grid article span { color:var(--blue); font-size:28px; }
.process-grid h4 { display:inline; margin-left:12px; font-size:22px; font-weight:500; }
.process-grid p { margin:14px 0 0; max-width:90%; font-size:16px; line-height:1.2; color:#f1f1f1; }
.process-cta { position:relative; max-width:1000px; min-height:112px; margin:16px auto 0; padding:20px 24px 20px 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left; border-radius:17px; background:radial-gradient(circle at 50% 35%,#333,#080808 75%); }
.process-cta strong { max-width:440px; font-size:21px; line-height:1.15; }

.companies { padding: 70px 0 150px; }
.companies__inner { max-width: 990px; text-align: center; }
.companies .section-tag { transform: scale(.72); margin-bottom: 25px; }
.companies h2 { margin:0; font-size:clamp(48px,4vw,66px); font-weight:400; letter-spacing:-.055em; line-height:1; }
.companies h2 span { color:#8d8d8d; }
.companies__lead { margin:20px auto 54px; max-width:720px; color:#9d9d9d; font-size:18px; line-height:1.25; }
.companies__list { display:flex; flex-direction:column; gap:10px; text-align:left; }
.company-row { min-height:78px; padding:0 24px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:25px; border:1px solid #2a2a2a; border-radius:12px; background:linear-gradient(100deg,#1d1d1d,#101010); }
.company-row:first-child { color:#050505; background:linear-gradient(90deg,#2c96f3,#9dd1ff); border-color:#65b5fb; }
.company-row strong { font-size:20px; color:var(--blue); }
.company-row:first-child strong { color:#050505; }
.company-row span { font-size:14px; color:#a6a6a6; }
.company-row:first-child span { color:#171717; }

.solutions { padding: 130px 0 150px; border-radius: 0; }
.solutions__head { display:grid; grid-template-columns:.95fr 1.05fr; gap:90px; align-items:center; margin-bottom:80px; }
.solutions__head h2 { margin:0; font-size:clamp(48px,4.2vw,60px); font-weight:400; line-height:1.01; letter-spacing:-.05em; color:#3d3d3d; }
.solutions__head h2 strong { color:#111; }
.solutions__head p { margin:0; font-size:22px; line-height:1.15; color:#747474; }
.solutions__head p strong { color:#111; }
.services-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.service-card { position:relative; min-height:340px; overflow:hidden; border-radius:25px; border:1px solid #2e2e2e; background:rgba(0,0,0,.96); color:#fff; box-shadow:inset 0 0 80px rgba(92,92,92,.24); }
.service-card--wide { grid-column:1/-1; }
.service-card__copy { position:relative; z-index:3; width:47%; padding:52px 0 40px 38px; }
.service-card__icon { width:36px; height:36px; display:grid; place-items:center; background:var(--blue); color:#050505; border-radius:6px; margin-bottom:24px; }
.service-card h3 { margin:0 0 20px; font-size:29px; line-height:1.1; }
.service-card p { margin:0; max-width:260px; color:#d0d0d0; font-size:17px; line-height:1.2; }
.service-card__image { position:absolute; z-index:2; right:-5%; bottom:-15%; width:58%; height:115%; object-fit:contain; object-position:center; }
.service-card--wide .service-card__image { width:58%; height:140%; right:0; bottom:-38%; object-fit:cover; transform:skewX(-12deg); }
.service-card__blue-shape { position:absolute; z-index:1; right:-8%; top:-15%; width:52%; height:110%; border-radius:45% 0 0 45%; border:46px solid var(--blue); opacity:.95; transform:rotate(-7deg); }

.portfolio { padding: 110px 0 130px; }
.portfolio__head { text-align:center; }
.portfolio__head .section-tag { transform:scale(.72); }
.portfolio__head h2 { margin:25px 0 55px; font-size:clamp(50px,4.5vw,70px); font-weight:400; letter-spacing:-.05em; }
.portfolio__connector { width:70%; margin:0 auto 55px; display:flex; align-items:center; gap:24px; }
.portfolio__connector span { flex:1; height:1px; background:linear-gradient(90deg,transparent,#2c96f3); }
.portfolio__connector span:last-child { transform:scaleX(-1); }
.portfolio__connector i { width:76px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#101010; border:8px solid var(--blue); color:var(--blue); font-style:normal; font-size:25px; box-shadow:0 0 45px rgba(44,150,243,.3); }
.portfolio-grid { display:grid; grid-template-columns: .7fr .7fr 1.6fr; grid-auto-rows:260px; gap:5px; background:#111; }
.portfolio-item { margin:0; overflow:hidden; min-height:0; }
.portfolio-item img { width:100%; height:100%; object-fit:cover; }
.portfolio-item--3 { grid-column:3; grid-row:1; }
.portfolio-item--4 { grid-column:1/3; grid-row:2; }
.portfolio-item--5 { grid-column:3; grid-row:2; }
.portfolio-item--6 { grid-column:1; grid-row:3; background:#fff; }
.portfolio-item--7 { grid-column:2/4; grid-row:3; }
.portfolio-item--8 { display:none; }

.manifesto { padding: 20px 0 100px; }
.manifesto__box { position:relative; overflow:hidden; min-height:347px; padding:62px 100px; border:1px solid #303030; border-radius:18px; background:linear-gradient(100deg,#0b4d84,#050505 62%); display:grid; grid-template-columns:1fr 1fr; gap:110px; align-items:center; }
.manifesto__box::before { content:"↘"; position:absolute; left:-75px; top:-155px; font-size:520px; line-height:1; color:rgba(44,150,243,.13); transform:rotate(-5deg); }
.manifesto h2 { position:relative; margin:0; font-size:38px; line-height:1.05; letter-spacing:-.04em; }
.manifesto h2 span { color:var(--blue); }
.manifesto p { position:relative; margin:0; color:#bcbcbc; font-size:18px; line-height:1.4; }

.contact { padding: 110px 0 160px; min-height:930px; }
.contact__glow { position:absolute; right:-40px; top:-90px; width:900px; height:380px; border-radius:50%; border-top:12px solid rgba(44,150,243,.28); box-shadow:0 -20px 70px rgba(44,150,243,.32); transform:rotate(-5deg); }
.contact__title { position:relative; margin:0 0 60px; font-size:clamp(58px,5vw,78px); line-height:.98; letter-spacing:-.055em; font-weight:400; }
.contact__grid { position:relative; display:grid; grid-template-columns:.75fr 1.15fr; gap:180px; align-items:start; }
.whatsapp-card, .contact-form-card { border:1px solid #2b2b2b; border-radius:18px; background:radial-gradient(circle at 50% 35%,#242424,#080808 74%); box-shadow:0 25px 65px rgba(0,0,0,.45), inset 0 0 60px rgba(255,255,255,.03); }
.whatsapp-card { padding:44px; min-height:430px; display:flex; flex-direction:column; }
.whatsapp-card__icon { width:55px; height:55px; display:grid; place-items:center; border-radius:14px; background:var(--blue); color:#050505; font-size:32px; margin-bottom:42px; }
.whatsapp-card h3, .contact-form-card h3 { margin:0 0 18px; font-size:28px; line-height:1.1; }
.whatsapp-card p, .contact-form-card p { color:#b9b9b9; font-size:17px; line-height:1.35; }
.whatsapp-card .gex-button { margin-top:auto; width:max-content; }
.contact-form-card { padding:54px 72px 62px; }
.contact-form-card h3 { max-width:480px; font-size:34px; }
.contact-form-card form { margin-top:34px; display:grid; gap:10px; }
.contact-form-card input, .contact-form-card textarea { width:100%; border:1px solid #213a50; background:#183149; color:#fff; border-radius:0; padding:14px 20px; outline:none; transition:.2s; }
.contact-form-card textarea { min-height:100px; resize:vertical; }
.contact-form-card input::placeholder, .contact-form-card textarea::placeholder { color:#bac8d2; }
.contact-form-card input:focus, .contact-form-card textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(44,150,243,.12); }
.contact-form-card button { width:100%; border:0; margin-top:8px; }
.form-success { padding:12px 14px; margin-top:20px; border-radius:8px; background:rgba(58,190,109,.14); color:#95e3b3; border:1px solid rgba(58,190,109,.28); }
.form-errors { color:#ff9a9a; font-size:14px; }

.site-footer { background:#050505; border-top:1px solid #1f1f1f; padding:38px 0 70px; }
.site-footer__inner { display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:center; }
.site-footer p { margin:0; color:#747474; font-size:13px; }
.site-footer nav { display:flex; gap:32px; color:#8f8f8f; font-size:14px; }
.brand--footer { width:104px; }
.brand--footer .brand__mark { width:40px; height:44px; }

[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].in-view { opacity:1; transform:none; }

@media (max-width: 1050px) {
    .site-nav, .site-header > .container > .gex-button { display:none; }
    .menu-button { display:block; margin-left:auto; }
    .mobile-menu { position:absolute; top:64px; left:24px; right:24px; padding:18px; border:1px solid #292929; border-radius:18px; background:rgba(8,8,8,.97); backdrop-filter:blur(18px); flex-direction:column; gap:8px; }
    .mobile-menu.is-open { display:flex; }
    .mobile-menu a { padding:13px 14px; color:#ccc; }
    .story__grid { grid-template-columns:1fr; }
    .story__visual { min-height:560px; }
    .story__visual img { width:650px; }
    .ecosystem__blue { padding-inline:50px; }
    .contact__grid { gap:50px; }
}

@media (max-width: 760px) {
    .container { width:min(calc(100% - 28px), var(--max)); }
    .site-header { top:12px; }
    .brand { width:106px; }
    .brand__mark { width:41px; height:44px; }
    .brand__word { width:57px; }
    .hero { min-height:800px; padding-top:130px; }
    .hero__title { gap:22px; }
    .hero__title h1 { font-size:clamp(42px,12vw,62px); }
    .hero__title p { font-size:18px; }
    .hero__chips { display:none; }
    .hero__actions { margin-top:42px; flex-direction:column; align-items:center; }
    .hero__horizon { bottom:30px; width:160%; height:270px; }
    .section-tag { font-size:15px; min-height:36px; }
    .section-tag__icon { width:40px; height:24px; }
    .story { padding:40px 0 80px; }
    .story__copy h2 { font-size:46px; }
    .story__body { font-size:18px; }
    .story__visual { min-height:390px; }
    .story__visual-glow { width:290px; height:290px; }
    .story__visual img { width:480px; max-width:130%; }
    .ecosystem-wrap { padding-bottom:70px; }
    .ecosystem__eyebrow { padding-top:48px; }
    .ecosystem > h2 { font-size:40px; }
    .ecosystem > .gex-button { margin-bottom:45px; }
    .ecosystem__blue { padding:50px 18px 35px; }
    .ecosystem__blue h3 { font-size:36px; }
    .process-grid { grid-template-columns:1fr; }
    .process-cta { flex-direction:column; align-items:flex-start; }
    .companies { padding:45px 0 90px; }
    .companies h2 { font-size:46px; }
    .company-row { grid-template-columns:1fr; gap:8px; padding:18px; }
    .solutions { padding:80px 0; }
    .solutions__head { grid-template-columns:1fr; gap:24px; margin-bottom:48px; }
    .solutions__head h2 { font-size:44px; }
    .solutions__head p { font-size:18px; }
    .services-grid { grid-template-columns:1fr; }
    .service-card--wide { grid-column:auto; }
    .service-card { min-height:380px; }
    .service-card__copy { width:62%; padding:35px 0 30px 26px; }
    .service-card__image { width:62%; right:-14%; }
    .service-card--wide .service-card__image { width:60%; height:110%; bottom:-10%; }
    .portfolio { padding:80px 0; }
    .portfolio__head h2 { font-size:48px; }
    .portfolio__connector { width:95%; }
    .portfolio-grid { grid-template-columns:1fr 1fr; grid-auto-rows:180px; }
    .portfolio-item--3, .portfolio-item--4, .portfolio-item--5, .portfolio-item--6, .portfolio-item--7 { grid-column:auto; grid-row:auto; }
    .portfolio-item--7 { grid-column:1/-1; }
    .manifesto__box { padding:44px 28px; grid-template-columns:1fr; gap:28px; }
    .manifesto h2 { font-size:34px; }
    .contact { padding:80px 0 100px; }
    .contact__title { font-size:56px; }
    .contact__grid { grid-template-columns:1fr; gap:30px; }
    .contact-form-card { padding:38px 24px; }
    .site-footer__inner { grid-template-columns:1fr; justify-items:center; text-align:center; }
    .site-footer nav { flex-wrap:wrap; justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    [data-reveal] { opacity:1; transform:none; }
}


/* =========================================================
   Figma fidelity pass 01 — desktop proportions + first fold
   Reference canvas: 1920px / SITE - GEX
   ========================================================= */
.container--wide { max-width: 1699px; }

/* Header: Figma node 8006:456 = 1280 x 51 at x321/y34 */
.site-header { top: clamp(18px, 1.78vw, 34px); }
.site-header__inner { min-height: 51px; }

/* Hero typography: Figma node 8006:432 */
.hero__title { max-width: 799px; gap: 30px; }
.hero__title > .section-tag { width: 270px; height: 40px; justify-content: flex-start; }
.hero__title h1 { font-size: clamp(52px, 3.125vw, 60px); line-height: 1.01; letter-spacing: -1px; }
.hero__title p { width: 703px; max-width: 100%; font-size: clamp(20px, 1.25vw, 24px); line-height: 26px; letter-spacing: -.5px; }

/* Story: title/body and illustration are mapped to the Figma measurements. */
.story__grid { grid-template-columns: 560px minmax(0, 1fr); gap: 0; align-items: start; }
.story__copy { position: relative; z-index: 4; padding-top: 97px; }
.story__copy h2 { max-width: 567px; margin-bottom: 29px; font-size: clamp(52px, 3.125vw, 60px); line-height: 1.01; letter-spacing: -1px; }
.story__body { width: 547px; max-width: 100%; font-size: clamp(20px, 1.25vw, 24px); line-height: 1.1; letter-spacing: -.99px; }
.story__body p { margin-bottom: 24px; }
.story__visual { min-height: 853px; margin-top: 0; margin-right: -97px; overflow: visible; display: block; }
.story__visual-glow { display: none; }
.story__visual img { filter: none; }
.story__visual .story__ring,
.story__visual .story__laptop { position: absolute; max-width: none; }
.story__ring--1 { z-index: 1; width: 487px; height: 482px; left: 247px; top: 163px; mix-blend-mode: screen; }
.story__ring--2 { z-index: 1; width: 619px; height: 542px; left: 171px; top: 153px; mix-blend-mode: screen; }
.story__ring--3 { z-index: 1; width: 706px; height: 706px; left: 142px; top: 77px; }
.story__visual .story__laptop { z-index: 3; width: 756px; height: 809px; left: 130px; top: 44px; object-fit: contain; }

/* The large framed panels in Figma are 1699px wide at a 1920px canvas. */
.ecosystem-wrap > .container--wide { width: min(calc(100% - 32px), 1699px); }
.solutions { width: min(calc(100% - 32px), 1699px); margin-inline: auto; border-radius: 24px; overflow: hidden; padding-top: 175px; padding-bottom: 139px; }
.solutions__head { grid-template-columns: 584px 588px; gap: 108px; margin-bottom: 120px; }

/* Ecosystem list: Figma node 8006:494 inner width = 956px. */
.companies__inner { max-width: 956px; }

/* Contact: exact desktop columns from nodes 8006:1523 and 8014:292. */
.contact__title { width: 478px; max-width: 100%; font-size: clamp(58px, 3.125vw, 60px); line-height: 1.01; letter-spacing: -1px; }
.contact__grid { grid-template-columns: 375px 564px; justify-content: space-between; gap: 0; }
.whatsapp-card { min-height: 422px; padding: 43px; }
.contact-form-card { min-height: 600px; padding: 63px 78px 63px; }
.contact-form-card h3 { max-width: 395px; }
.contact-form-card form { margin-top: 24px; gap: 8px; }
.contact-form-card input { height: 47px; padding: 0 22px; }

@media (max-width: 1439px) {
    .story__grid { grid-template-columns: .9fr 1.25fr; gap: 30px; align-items: center; }
    .story__copy { padding-top: 0; }
    .story__visual { min-height: 680px; margin-right: 0; display: grid; place-items: center; }
    .story__visual .story__ring--1 { width: 390px; height: auto; left: 50%; top: 50%; transform: translate(-42%, -44%); }
    .story__visual .story__ring--2 { width: 500px; height: auto; left: 50%; top: 50%; transform: translate(-48%, -46%); }
    .story__visual .story__ring--3 { width: 565px; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .story__visual .story__laptop { width: min(760px, 115%); height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .solutions__head { grid-template-columns: .95fr 1.05fr; gap: 70px; }
    .contact__grid { grid-template-columns: minmax(320px, .75fr) minmax(520px, 1.15fr); gap: 70px; }
    .contact-form-card { min-height: 0; padding: 54px 56px 62px; }
}

@media (max-width: 1050px) {
    .solutions { width: min(calc(100% - 24px), 1699px); padding-top: 100px; padding-bottom: 100px; }
    .solutions__head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 60px; }
    .contact__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 760px) {
    .hero__title > .section-tag { width: auto; height: auto; }
    .hero__title h1 { font-size: clamp(42px, 12vw, 62px); letter-spacing: -.04em; }
    .hero__title p { width: auto; font-size: 18px; line-height: 1.12; letter-spacing: -.02em; }
    .story__copy h2 { font-size: 46px; letter-spacing: -.04em; }
    .story__body { font-size: 18px; letter-spacing: -.02em; }
    .story__visual { min-height: 390px; }
    .story__visual .story__ring--1 { width: 230px; }
    .story__visual .story__ring--2 { width: 300px; }
    .story__visual .story__ring--3 { width: 335px; }
    .story__visual .story__laptop { width: 480px; max-width: 130%; }
    .solutions { border-radius: 18px; padding-top: 80px; padding-bottom: 80px; }
    .contact__title { width: auto; font-size: 56px; }
    .contact-form-card { padding: 38px 24px; }
}


/* Figma custom-project card: replace the unrelated medical portfolio image
   with the approved diagonal project collage composition. */
.service-card--custom { min-height: 339px; }
.service-card--custom .service-card__copy { width: 38%; }
.service-card__collage { position: absolute; z-index: 2; inset: -22% -5% -20% 36%; transform: skewX(-17deg) rotate(-2deg); display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 50%; gap: 7px; padding: 5px; overflow: hidden; }
.service-card__collage::before { content: ""; position: absolute; inset: -10%; z-index: -1; background: #2c96f3; border-radius: 35%; opacity: .92; }
.service-card__collage img { width: 100%; height: 100%; object-fit: cover; transform: skewX(17deg) scale(1.22); }
.service-card__collage img:nth-child(1) { grid-column: 1; grid-row: 1; }
.service-card__collage img:nth-child(2) { grid-column: 2; grid-row: 1; }
.service-card__collage img:nth-child(3) { grid-column: 3; grid-row: 1; }
.service-card__collage img:nth-child(4) { grid-column: 1; grid-row: 2; }
.service-card__collage img:nth-child(5) { grid-column: 2; grid-row: 2; }
.service-card__collage img:nth-child(6) { grid-column: 3; grid-row: 2; }

@media (max-width: 760px) {
    .service-card--custom .service-card__copy { width: 62%; }
    .service-card__collage { left: 55%; right: -30%; opacity: .72; }
}

/* =========================================================
   Figma fidelity pass 02 — hero at notebook/desktop widths
   Figma reference: node 8006:432 (799 x 309)
   ========================================================= */
@media (min-width: 1100px) {
    .hero__title {
        width: 799px;
        max-width: calc(100vw - 96px);
    }

    .hero__title h1 {
        font-size: 60px;
        line-height: 1.01;
        letter-spacing: -1px;
    }

    .hero__title p {
        width: 703px;
        max-width: calc(100vw - 140px);
        font-size: 24px;
        line-height: 26px;
        letter-spacing: -.5px;
    }

    .hero__actions {
        margin-top: 74px;
    }
}

@media (min-width: 1100px) and (max-width: 1439px) {
    .hero {
        padding-top: 166px;
    }

    .hero__chips > span {
        font-size: 12px;
    }
}

/* =========================================================
   Figma fidelity pass 03 — UI controls and hero floating chips
   Exact component proportions are based on the approved Figma
   nodes already extracted for header CTA / highlight tag.
   ========================================================= */

/* CTA: separate the real icon assets from the text. */
.gex-button__arrow,
.gex-button__dot {
    flex: 0 0 auto;
    overflow: hidden;
}

.gex-button__arrow {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    transform: none;
}

.gex-button__arrow img {
    width: 11px;
    height: 11px;
    object-fit: contain;
    display: block;
    transform: rotate(135deg);
}

.gex-button__label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.gex-button__dot {
    width: 28px;
    height: 28px;
    aspect-ratio: auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--blue);
    color: transparent;
}

.gex-button__dot img {
    width: 14px;
    height: 15px;
    object-fit: contain;
    display: block;
}

/* Header CTA — Figma node 8006:482 = 202 x 50. */
.gex-button--header {
    width: 202px;
    min-width: 202px;
    height: 50px;
    min-height: 50px;
    padding: 0 10px 0 22px;
    justify-content: flex-start;
    gap: 10px;
    border-width: 1px;
    background: rgba(0, 0, 0, .12);
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.15px;
}

.gex-button--header .gex-button__arrow {
    width: 14px;
    height: 14px;
    margin-right: 0;
}

.gex-button--header .gex-button__label {
    width: 96px;
    min-width: 96px;
    justify-content: flex-start;
    line-height: 21px;
}

.gex-button--header .gex-button__dot {
    width: 30px;
    height: 30px;
    margin-left: auto;
}

.gex-button--header:hover {
    transform: none;
    box-shadow: 0 0 22px rgba(44,150,243,.10);
}

/* Filled CTA keeps the approved black trailing circle. */
.gex-button--filled .gex-button__dot {
    background: #050505;
}

.gex-button--filled .gex-button__dot img {
    filter: brightness(0) invert(1);
}

/* Highlight tag — Figma node 8006:433 = 270 x 40. */
.section-tag {
    min-height: 40px;
    height: 40px;
    padding: 0 18px 0 8px;
    gap: 20.83px;
    border: 1px solid rgba(255,255,255,.05);
    background: linear-gradient(169deg, rgba(255,255,255,.15) 33.4%, rgba(255,255,255,.08) 93.8%);
    color: transparent;
}

.section-tag__icon {
    width: 47.67px;
    height: 28px;
    flex: 0 0 47.67px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    border: 2px solid rgba(255,255,255,.15);
    background: linear-gradient(180deg, #2c96f3 0%, #bddefb 100%);
    color: transparent;
    overflow: hidden;
}

.section-tag__icon img {
    width: 20.273px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.section-tag__label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 19.152px;
    font-weight: 400;
    line-height: 31.121px;
    letter-spacing: -.5985px;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hero floating chips: pill + detached exported arrow marker. */
.hero__chips > span {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    box-shadow: none;
}

.hero-chip {
    position: absolute;
    width: max-content;
    height: 58px;
}

.hero-chip__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 17px;
    border: 1.4px solid #2c96f3;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(5,8,12,.92) 0%, rgba(8,12,17,.76) 100%);
    box-shadow: inset 0 0 14px rgba(44,150,243,.07);
    color: #48aafc;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.18px;
    white-space: nowrap;
}

.hero-chip__marker {
    position: absolute;
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.hero-chip--gestao { left: 3%; top: 30px; }
.hero-chip--gestao .hero-chip__pill { transform: rotate(-9deg); }
.hero-chip--gestao .hero-chip__marker { right: -16px; top: 25px; transform: rotate(25deg); }

.hero-chip--programacao { right: 0; top: 18px; }
.hero-chip--programacao .hero-chip__pill { transform: rotate(8deg); }
.hero-chip--programacao .hero-chip__marker { right: -17px; top: -3px; transform: rotate(-155deg); }

.hero-chip--estrategia { left: 1%; top: 175px; }
.hero-chip--estrategia .hero-chip__pill { transform: rotate(-6deg); }
.hero-chip--estrategia .hero-chip__marker { right: -17px; top: 25px; transform: rotate(25deg); }

.hero-chip--treinamentos { right: 3%; top: 190px; }
.hero-chip--treinamentos .hero-chip__pill { transform: rotate(-5deg); }
.hero-chip--treinamentos .hero-chip__marker { right: -17px; top: -3px; transform: rotate(-155deg); }

.hero-chip--criacao { right: 10%; top: 105px; }
.hero-chip--criacao .hero-chip__pill { transform: rotate(8deg); }
.hero-chip--criacao .hero-chip__marker { right: -16px; top: 25px; transform: rotate(25deg); }

@media (min-width: 1100px) and (max-width: 1439px) {
    .gex-button--header {
        width: 184px;
        min-width: 184px;
        padding-left: 16px;
    }

    .gex-button--header .gex-button__label {
        width: 90px;
        min-width: 90px;
    }

    .hero-chip__pill {
        min-height: 36px;
        padding-inline: 15px;
        font-size: 11px;
    }

    .hero-chip__marker {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 1050px) {
    .gex-button--header { display: none; }
}

@media (max-width: 760px) {
    .section-tag__label { font-size: 15px; line-height: 1; letter-spacing: -.35px; }
    .section-tag__icon { width: 40px; height: 24px; flex-basis: 40px; }
    .section-tag__icon img { width: 17px; height: 18px; }
    .hero__chips { display: none; }
}

/* =========================================================
   Figma fidelity pass 04 — bring hero badges closer together
   ========================================================= */
@media (min-width: 1100px) {
    .hero__chips {
        inset: 100px auto auto 50%;
        width: min(900px, calc(100vw - 120px));
        height: 280px;
        transform: translateX(-50%);
    }

    .hero-chip--gestao { left: 0; top: 38px; }
    .hero-chip--programacao { right: 0; top: 24px; }
    .hero-chip--estrategia { left: 0; top: 178px; }
    .hero-chip--treinamentos { right: 0; top: 192px; }
    .hero-chip--criacao { right: 7%; top: 108px; }
}

@media (min-width: 1100px) and (max-width: 1439px) {
    .hero__chips {
        width: min(860px, calc(100vw - 110px));
    }
}

/* =========================================================
   Figma fidelity pass 05 — badge arrows + centered labels
   ========================================================= */

/* Keep the label mathematically centered inside each rotated pill. */
.hero-chip__pill {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    padding: 0;
    overflow: visible;
}

.hero-chip__label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* Individual widths preserve the compact proportions from the approved badges. */
.hero-chip--gestao .hero-chip__pill { width: 90px; }
.hero-chip--programacao .hero-chip__pill { width: 122px; }
.hero-chip--estrategia .hero-chip__pill { width: 108px; }
.hero-chip--criacao .hero-chip__pill { width: 92px; }
.hero-chip--treinamentos .hero-chip__pill { width: 126px; }

/*
 * The Figma arrow SVG is dark in its raw export. Recolor the exported asset
 * to the approved blue so it remains visible against the black hero.
 */
.hero-chip__marker {
    width: 18px;
    height: 18px;
    max-width: none;
    display: block;
    opacity: 1;
    visibility: visible;
    z-index: 6;
    pointer-events: none;
    filter: brightness(0) saturate(100%) invert(59%) sepia(91%) saturate(1900%) hue-rotate(177deg) brightness(101%) contrast(101%);
    drop-shadow: 0 0 5px rgba(44, 150, 243, .28);
}

/* Gestão: arrow detached on the right, slightly above center. */
.hero-chip--gestao .hero-chip__marker {
    left: calc(100% + 10px);
    right: auto;
    top: 10px;
    transform: rotate(45deg);
}

/* Programação: arrow detached on the right and above the pill. */
.hero-chip--programacao .hero-chip__marker {
    left: calc(100% + 9px);
    right: auto;
    top: -8px;
    transform: rotate(135deg);
}

/* Estratégia: arrow belongs on the LEFT in the approved design. */
.hero-chip--estrategia .hero-chip__marker {
    left: -28px;
    right: auto;
    top: 10px;
    transform: rotate(-45deg);
}

/* Criação: arrow belongs on the LEFT and slightly above. */
.hero-chip--criacao .hero-chip__marker {
    left: -27px;
    right: auto;
    top: -5px;
    transform: rotate(-135deg);
}

/* Treinamentos follows the right-side badge family. */
.hero-chip--treinamentos .hero-chip__marker {
    left: calc(100% + 9px);
    right: auto;
    top: -6px;
    transform: rotate(135deg);
}

@media (min-width: 1100px) and (max-width: 1439px) {
    .hero-chip__pill {
        height: 36px;
        min-height: 36px;
        padding: 0;
    }

    .hero-chip--gestao .hero-chip__pill { width: 82px; }
    .hero-chip--programacao .hero-chip__pill { width: 112px; }
    .hero-chip--estrategia .hero-chip__pill { width: 98px; }
    .hero-chip--criacao .hero-chip__pill { width: 84px; }
    .hero-chip--treinamentos .hero-chip__pill { width: 116px; }

    .hero-chip__marker {
        width: 17px;
        height: 17px;
    }
}


/* =========================================================
   GEX UI pass 06 — simplified controls, no arrows
   - Floating hero badges are text-only.
   - CTA buttons have no directional arrow.
   - Company glyph is preserved where the component already uses it.
   - Outline CTA hover becomes the same filled blue treatment as selected CTA.
   ========================================================= */

/* --- CTA buttons --------------------------------------------------------- */
.gex-button {
    padding-left: 18px;
    padding-right: 8px;
    gap: 12px;
}

.gex-button__arrow {
    display: none !important;
}

.gex-button__label {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    text-align: center;
}

.gex-button__dot {
    flex: 0 0 28px;
    margin-left: 0;
}

.gex-button--header {
    padding-left: 18px;
    padding-right: 9px;
    gap: 10px;
}

.gex-button--header .gex-button__label {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
}

.gex-button--header .gex-button__dot {
    margin-left: 0;
}

/* Text-only buttons (no arrow, no company icon). */
.gex-button--text-only {
    padding-left: 20px;
    padding-right: 20px;
    gap: 0;
}

/* Outline buttons receive the same blue fill treatment on hover/focus. */
.gex-button:not(.gex-button--filled):hover,
.gex-button:not(.gex-button--filled):focus-visible {
    color: #030303;
    border-color: #8cc6f9;
    background: linear-gradient(180deg, var(--blue), #bddefb);
    box-shadow: 0 10px 38px rgba(44,150,243,.32);
}

.gex-button:not(.gex-button--filled):hover .gex-button__dot,
.gex-button:not(.gex-button--filled):focus-visible .gex-button__dot {
    background: #050505;
}

.gex-button:not(.gex-button--filled):hover .gex-button__dot img,
.gex-button:not(.gex-button--filled):focus-visible .gex-button__dot img {
    filter: brightness(0) invert(1);
}

.gex-button--header:not(.gex-button--filled):hover,
.gex-button--header:not(.gex-button--filled):focus-visible {
    transform: none;
    color: #030303;
    border-color: #8cc6f9;
    background: linear-gradient(180deg, var(--blue), #bddefb);
    box-shadow: 0 10px 38px rgba(44,150,243,.22);
}

/* --- Hero floating badges ----------------------------------------------- */
.hero__chips > .hero-chip {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border: 1.4px solid #2c96f3;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(5,8,12,.92) 0%, rgba(8,12,17,.76) 100%);
    box-shadow: inset 0 0 14px rgba(44,150,243,.07);
    color: #48aafc;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.12px;
    white-space: nowrap;
    text-align: center;
}

/* Compact individual proportions. */
.hero-chip--gestao { width: 82px; }
.hero-chip--programacao { width: 112px; }
.hero-chip--estrategia { width: 98px; }
.hero-chip--criacao { width: 84px; }
.hero-chip--treinamentos { width: 116px; }

/* Remove all detached arrow artwork from previous revisions. */
.hero-chip__marker,
.hero-chip__pill,
.hero-chip__label {
    all: unset;
}

/* Keep only the approved rotations, with no detached symbols. */
.hero__chips > .hero-chip--gestao { transform: rotate(-9deg); }
.hero__chips > .hero-chip--programacao { transform: rotate(8deg); }
.hero__chips > .hero-chip--estrategia { transform: rotate(-6deg); }
.hero__chips > .hero-chip--treinamentos { transform: rotate(-5deg); }
.hero__chips > .hero-chip--criacao { transform: rotate(8deg); }

@media (min-width: 1440px) {
    .hero__chips > .hero-chip {
        height: 38px;
        min-height: 38px;
        font-size: 12px;
    }

    .hero-chip--gestao { width: 90px; }
    .hero-chip--programacao { width: 122px; }
    .hero-chip--estrategia { width: 108px; }
    .hero-chip--criacao { width: 92px; }
    .hero-chip--treinamentos { width: 126px; }
}

@media (max-width: 760px) {
    .hero__chips { display: none; }
}

/* =========================================================
   Figma fidelity pass 07 — increase breathing room around hero copy
   Keep badges text-only; move them away from title/description.
   ========================================================= */

/* Notebook / compact desktop */
@media (min-width: 761px) and (max-width: 1099px) {
    .hero__chips > .hero-chip--gestao {
        left: -2%;
        top: 24px;
    }

    .hero__chips > .hero-chip--programacao {
        right: -2%;
        top: 14px;
    }

    .hero__chips > .hero-chip--estrategia {
        left: -3%;
        top: 188px;
    }

    .hero__chips > .hero-chip--criacao {
        right: 2%;
        top: 116px;
    }

    .hero__chips > .hero-chip--treinamentos {
        right: -1%;
        top: 202px;
    }
}

/* Standard desktop: widen the invisible badge field so the chips sit farther
   from the central title and description without changing the hero copy. */
@media (min-width: 1100px) {
    .hero__chips {
        inset: 100px auto auto 50%;
        width: min(1040px, calc(100vw - 80px));
        height: 300px;
        transform: translateX(-50%);
    }

    .hero__chips > .hero-chip--gestao {
        left: 0;
        top: 34px;
    }

    .hero__chips > .hero-chip--programacao {
        right: 0;
        top: 20px;
    }

    .hero__chips > .hero-chip--estrategia {
        left: 0;
        top: 190px;
    }

    .hero__chips > .hero-chip--criacao {
        right: 5%;
        top: 112px;
    }

    .hero__chips > .hero-chip--treinamentos {
        right: 0;
        top: 205px;
    }
}

/* Large desktop */
@media (min-width: 1440px) {
    .hero__chips {
        width: min(1240px, calc(100vw - 120px));
    }

    .hero__chips > .hero-chip--gestao { left: 0; }
    .hero__chips > .hero-chip--programacao { right: 0; }
    .hero__chips > .hero-chip--estrategia { left: 0; }
    .hero__chips > .hero-chip--criacao { right: 6%; }
    .hero__chips > .hero-chip--treinamentos { right: 0; }
}

/* =========================================================
   Figma fidelity pass 08 — hero/story transition
   Adds vertical blue lines + floating strategic-analysis CTA.
   Keeps badges text-only and preserves GEX brand icons only.
   ========================================================= */

/* Keep the transition artwork behind content but above the base horizon. */
.hero {
    position: relative;
    overflow: hidden;
}

.hero__inner {
    position: relative;
    z-index: 6;
}

.hero__horizon {
    z-index: 2;
}

/* Soft blue bridge between hero and story. */
.hero__transition-glow {
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: min(1540px, 122vw);
    height: 255px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    border-radius: 50% 50% 0 0;
    background:
        radial-gradient(ellipse 72% 42% at 50% 10%, rgba(77, 180, 255, .50) 0%, rgba(44, 150, 243, .30) 28%, rgba(12, 83, 145, .13) 54%, rgba(5, 5, 5, 0) 78%);
    filter: blur(8px);
    opacity: .96;
}

/* Thin vertical lines following the upper arc from the reference. */
.hero__transition-lines {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: min(1510px, 118vw);
    height: 235px;
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
    opacity: .92;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(82, 180, 255, .42) 0,
        rgba(82, 180, 255, .42) 1px,
        rgba(82, 180, 255, .06) 1px,
        rgba(82, 180, 255, .06) 6px
    );
    -webkit-mask-image:
        radial-gradient(ellipse 72% 46% at 50% 18%, #000 0%, rgba(0,0,0,.94) 30%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.22) 68%, transparent 84%),
        linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.62) 66%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(ellipse 72% 46% at 50% 18%, #000 0%, rgba(0,0,0,.94) 30%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.22) 68%, transparent 84%),
        linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.62) 66%, transparent 100%);
    mask-composite: intersect;
}

/* Floating contact strip at the right side of the transition. */
.hero-contact-float {
    position: absolute;
    right: 0;
    top: 560px;
    z-index: 9;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px 7px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(37,37,38,.97) 0%, rgba(22,22,23,.98) 100%);
    box-shadow: 0 12px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
    white-space: nowrap;
}

.hero-contact-float__brand {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(180deg, #71c2ff 0%, #2c96f3 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.hero-contact-float__brand img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.hero-contact-float__copy {
    min-width: 122px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: left;
    line-height: 1;
}

.hero-contact-float__copy strong,
.hero-contact-float__copy > span {
    color: rgba(255,255,255,.95);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: -.01em;
}

.hero-contact-float__copy strong {
    font-weight: 700;
}

.hero-contact-float__action {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 5px 7px 5px 14px;
    border: 1px solid #47a9fb;
    border-radius: 999px;
    color: #47a9fb;
    background: rgba(8,15,23,.82);
    font-size: 9px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hero-contact-float__action-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #2c96f3;
}

.hero-contact-float__action-icon img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* Match the approved hover language: outline -> selected blue state. */
.hero-contact-float__action:hover,
.hero-contact-float__action:focus-visible {
    color: #030303;
    border-color: #8cc6f9;
    background: linear-gradient(180deg, var(--blue), #bddefb);
    box-shadow: 0 10px 30px rgba(44,150,243,.30);
    transform: translateY(-1px);
    outline: none;
}

.hero-contact-float__action:hover .hero-contact-float__action-icon,
.hero-contact-float__action:focus-visible .hero-contact-float__action-icon {
    background: #050505;
}

/* Desktop alignment matching the wider reference composition. */
@media (min-width: 1100px) {
    .hero-contact-float {
        right: clamp(0px, 1.2vw, 18px);
        top: 555px;
    }
}

@media (min-width: 1440px) {
    .hero-contact-float {
        right: 24px;
        top: 552px;
        transform: scale(1.04);
        transform-origin: right center;
    }

    .hero__transition-lines {
        width: min(1710px, 120vw);
        height: 255px;
    }
}

/* Keep the contact available without crowding the layout on tablets. */
@media (max-width: 1099px) {
    .hero-contact-float {
        position: relative;
        top: auto;
        right: auto;
        margin: 38px auto 0;
        width: max-content;
        max-width: 100%;
    }

    .hero__transition-lines {
        bottom: 14px;
        width: 138vw;
        height: 205px;
        opacity: .72;
    }

    .hero__transition-glow {
        width: 140vw;
        height: 220px;
    }
}

@media (max-width: 760px) {
    .hero-contact-float {
        display: none;
    }

    .hero__transition-lines {
        height: 160px;
        width: 160vw;
        opacity: .50;
    }

    .hero__transition-glow {
        height: 180px;
        width: 165vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-contact-float__action {
        transition: none;
    }
}

/* =========================================================
   Figma fidelity pass 09 — transition arc alignment
   Keeps the approved hero intact and corrects only the bridge:
   - vertical lines rise and follow the curved arc
   - floating CTA aligns with the central hero actions
   - the blue glow is integrated into the same curve
   ========================================================= */

@media (min-width: 1100px) {
    /* The line curtain must start on the luminous arc, not as a flat strip below it. */
    .hero__transition-lines {
        bottom: 86px;
        width: min(1660px, 126vw);
        height: 330px;
        opacity: .90;
        clip-path: ellipse(82% 76% at 50% 100%);
        background-image: repeating-linear-gradient(
            90deg,
            rgba(83, 184, 255, .48) 0,
            rgba(83, 184, 255, .48) 1px,
            rgba(83, 184, 255, .055) 1px,
            rgba(83, 184, 255, .055) 6px
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,1) 30%,
            rgba(0,0,0,.92) 56%,
            rgba(0,0,0,.48) 78%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,1) 30%,
            rgba(0,0,0,.92) 56%,
            rgba(0,0,0,.48) 78%,
            transparent 100%
        );
        -webkit-mask-composite: initial;
        mask-composite: initial;
    }

    /* Glow follows the same dome and sits directly under the two central CTAs. */
    .hero__transition-glow {
        bottom: 72px;
        width: min(1680px, 128vw);
        height: 350px;
        border-radius: 0;
        clip-path: ellipse(82% 76% at 50% 100%);
        background: radial-gradient(
            ellipse 64% 38% at 50% 27%,
            rgba(101, 199, 255, .64) 0%,
            rgba(44, 150, 243, .42) 23%,
            rgba(23, 104, 174, .19) 48%,
            rgba(5,5,5,0) 76%
        );
        filter: blur(10px);
        opacity: .98;
    }

    /* Reduce the separate solid dome so the line curtain becomes the visual transition. */
    .hero__horizon {
        bottom: 58px;
        width: min(1710px, 128vw);
        height: 300px;
        border-top-width: 5px;
        box-shadow:
            0 -11px 42px rgba(44,150,243,.48),
            inset 0 35px 58px rgba(44,150,243,.10);
        opacity: .76;
    }

    /* In the reference the floating contact is on the same horizontal band as the hero CTAs. */
    .hero-contact-float {
        top: 430px;
        right: clamp(6px, 1.5vw, 22px);
    }
}

@media (min-width: 1440px) {
    .hero__transition-lines {
        bottom: 92px;
        width: min(1780px, 124vw);
        height: 350px;
    }

    .hero__transition-glow {
        bottom: 78px;
        width: min(1810px, 126vw);
        height: 370px;
    }

    .hero__horizon {
        bottom: 64px;
        width: min(1820px, 126vw);
        height: 318px;
    }

    .hero-contact-float {
        top: 426px;
        right: 24px;
    }
}

/* =========================================================
   Figma fidelity pass 10 — transition with lines only
   Removes the luminous dome/glow and keeps only the vertical
   blue line curtain between hero and story.
   ========================================================= */

.hero__horizon,
.hero__transition-glow {
    display: none !important;
}

.hero__transition-lines {
    z-index: 4;
    opacity: .92;
    filter: none;
}

@media (min-width: 1100px) {
    .hero__transition-lines {
        bottom: 72px;
        width: min(1660px, 126vw);
        height: 325px;
        clip-path: ellipse(82% 76% at 50% 100%);
        background-image: repeating-linear-gradient(
            90deg,
            rgba(78, 176, 246, .52) 0,
            rgba(78, 176, 246, .52) 1px,
            rgba(78, 176, 246, .055) 1px,
            rgba(78, 176, 246, .055) 6px
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,.90) 0%,
            rgba(0,0,0,1) 28%,
            rgba(0,0,0,.92) 52%,
            rgba(0,0,0,.52) 76%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,.90) 0%,
            rgba(0,0,0,1) 28%,
            rgba(0,0,0,.92) 52%,
            rgba(0,0,0,.52) 76%,
            transparent 100%
        );
        -webkit-mask-composite: initial;
        mask-composite: initial;
    }
}

@media (min-width: 1440px) {
    .hero__transition-lines {
        bottom: 78px;
        width: min(1780px, 124vw);
        height: 345px;
    }
}

@media (max-width: 1099px) {
    .hero__transition-lines {
        bottom: 24px;
        opacity: .74;
    }
}

/* =========================================================
   GEX visual pass 11 — clean hero/story transition
   - remove all transition lines/glow
   - bring hero and story closer together
   - make the floating strategic-analysis CTA larger
   - place the CTA across the boundary between the two sections
   ========================================================= */

/* No decorative transition artwork. */
.hero__transition-lines,
.hero__transition-glow,
.hero__horizon {
    display: none !important;
}

/* Reduce the empty bridge below the hero content. */
@media (min-width: 1100px) {
    .hero {
        min-height: 720px;
        padding-bottom: 34px;
        overflow: visible;
    }

    .hero__inner {
        min-height: 560px;
    }

    /* Larger contact strip crossing the hero/story boundary. */
    .hero-contact-float {
        top: auto;
        right: clamp(28px, 4vw, 72px);
        bottom: -48px;
        min-height: 78px;
        gap: 16px;
        padding: 12px 13px 12px 14px;
        border-radius: 18px;
        transform: none;
    }

    .hero-contact-float__brand {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .hero-contact-float__brand img {
        width: 28px;
        height: 28px;
    }

    .hero-contact-float__copy {
        min-width: 158px;
        gap: 3px;
    }

    .hero-contact-float__copy strong,
    .hero-contact-float__copy > span {
        font-size: 10px;
        line-height: 1.08;
    }

    .hero-contact-float__action {
        min-height: 46px;
        gap: 11px;
        padding: 6px 8px 6px 18px;
        font-size: 11px;
    }

    .hero-contact-float__action-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .hero-contact-float__action-icon img {
        width: 17px;
        height: 17px;
    }

    /* Start the next section much sooner while preserving room for the floating CTA. */
    .story {
        padding-top: 74px;
        margin-top: 0;
        min-height: 760px;
    }
}

@media (min-width: 1440px) {
    .hero {
        min-height: 735px;
    }

    .hero-contact-float {
        right: 56px;
        bottom: -50px;
    }
}

@media (max-width: 1099px) {
    .hero__transition-lines,
    .hero__transition-glow,
    .hero__horizon {
        display: none !important;
    }

    .hero-contact-float {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        margin: 28px auto 0;
        min-height: 68px;
        transform: none;
    }

    .story {
        padding-top: 58px;
    }
}

@media (max-width: 760px) {
    .hero-contact-float {
        display: none;
    }
}

/* =========================================================
   Revisão 12 — Ecossistema sem setas
   Mantém apenas os ícones oficiais GEX nos botões.
   ========================================================= */

/* remove qualquer seta legada apenas desta seção */
.ecosystem .gex-button__arrow,
.ecosystem .process-grid article > span {
    display: none !important;
}

/* títulos dos quatro cards passam a ocupar o espaço da seta */
.ecosystem .process-grid h4 {
    display: block;
    margin-left: 0;
    margin-top: 0;
}

/* mantém o ícone oficial da marca no lado direito dos CTAs */
.ecosystem .gex-button__dot {
    display: grid !important;
}

/* =========================================================
   Revisão 13 — Ecossistema numerado + símbolo GEX
   ========================================================= */

/* substitui o texto "GEX CORE" pelo símbolo oficial da empresa */
.ecosystem__eyebrow {
    display: none !important;
}

.ecosystem__brand-symbol {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: max-content;
    margin: 0 auto;
    padding-top: 62px;
}

.ecosystem__brand-symbol::before,
.ecosystem__brand-symbol::after {
    content: "";
    display: block;
    width: 92px;
    height: 1px;
    background: linear-gradient(90deg, rgba(44,150,243,0), rgba(44,150,243,.5));
}

.ecosystem__brand-symbol::after {
    background: linear-gradient(90deg, rgba(44,150,243,.5), rgba(44,150,243,0));
}

.ecosystem__brand-symbol img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* abre a tipografia do título principal da seção */
.ecosystem > h2 {
    max-width: 980px;
    margin: 20px auto 30px;
    padding: 0 40px;
    font-size: clamp(42px, 4vw, 65px);
    line-height: 1.10;
    font-weight: 400;
    letter-spacing: -0.012em;
    word-spacing: 0.025em;
}

.ecosystem > h2 span {
    color: #8b8b8b;
    letter-spacing: -0.006em;
}

/* cards numerados */
.ecosystem .process-grid article {
    display: block;
}

.ecosystem .process-card__head {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ecosystem .process-grid .process-card__number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: linear-gradient(180deg, #53b9ff 0%, #168ff0 100%);
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 0 18px rgba(64, 174, 255, .20);
}

.ecosystem .process-grid h4 {
    display: block;
    margin: 0;
    font-size: 22px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.015em;
}

.ecosystem .process-grid p {
    margin: 15px 0 0 45px;
    max-width: calc(100% - 45px);
}

/* mantém a seção sem setas */
.ecosystem .gex-button__arrow,
.ecosystem .process-grid .arrow,
.ecosystem .process-grid .icon-arrow {
    display: none !important;
}

@media (max-width: 760px) {
    .ecosystem__brand-symbol {
        padding-top: 42px;
        gap: 10px;
    }

    .ecosystem__brand-symbol::before,
    .ecosystem__brand-symbol::after {
        width: 56px;
    }

    .ecosystem__brand-symbol img {
        width: 30px;
        height: 30px;
    }

    .ecosystem > h2 {
        padding: 0 22px;
        font-size: 38px;
        line-height: 1.12;
        letter-spacing: -0.008em;
        word-spacing: 0.02em;
    }

    .ecosystem .process-grid .process-card__number {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 11px;
    }

    .ecosystem .process-grid h4 {
        font-size: 18px;
    }

    .ecosystem .process-grid p {
        margin-left: 43px;
        max-width: calc(100% - 43px);
    }
}

/* =========================================================
   Revisão 14 — tipografia sem letras condensadas
   Regra global: nenhum texto usa tracking negativo.
   ========================================================= */
body *,
body *::before,
body *::after {
    font-stretch: normal !important;
    letter-spacing: normal !important;
}

/* Títulos principais com um pouco mais de respiro */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    letter-spacing: 0.01em !important;
}

/* Textos corridos continuam naturais e legíveis */
body p,
body a,
body button,
body label,
body input,
body textarea,
body select,
body span {
    font-stretch: normal !important;
}

/* Seção ecossistema — frase principal da área azul */
.ecosystem__blue h3 {
    max-width: 1120px;
    line-height: 1.12 !important;
    letter-spacing: 0.014em !important;
    word-spacing: 0.035em;
}

/* Título branco superior da seção também ganha mais respiro */
.ecosystem > h2 {
    line-height: 1.1 !important;
    letter-spacing: 0.008em !important;
    word-spacing: 0.025em;
}

/* Labels em caixa alta podem ter espaçamento positivo, nunca negativo */
.ecosystem__eyebrow,
.section-tag,
.section-tag__label,
.process-card__number {
    letter-spacing: 0.04em !important;
}

@media (max-width: 760px) {
    .ecosystem__blue h3 {
        line-height: 1.16 !important;
        letter-spacing: 0.01em !important;
        word-spacing: 0.02em;
    }

    .ecosystem > h2 {
        line-height: 1.13 !important;
        letter-spacing: 0.006em !important;
    }
}


/* =========================================================
   Revisão 17 — seção "O que podemos executar por você?"
   Layout baseado na referência aprovada enviada pelo cliente.
   Sem setas e sem tracking negativo/condensado.
   ========================================================= */
.solutions-showcase {
    width: 100%;
    margin: 0;
    padding: 108px 0 96px;
    background: #eeeeee;
    color: #111;
    overflow: hidden;
}

.solutions-showcase,
.solutions-showcase * {
    letter-spacing: 0 !important;
}

.solutions-showcase__container {
    width: min(calc(100% - 72px), 1240px);
    max-width: 1240px;
    margin-inline: auto;
}

.solutions-showcase__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr);
    gap: 90px;
    align-items: start;
    margin-bottom: 72px;
}

.solutions-showcase__head h2 {
    width: 520px;
    max-width: 100%;
    margin: 0;
    color: #333333;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(48px, 4.1vw, 68px);
    line-height: 1.02;
    font-weight: 300;
}

.solutions-showcase__head h2 strong {
    color: #171717;
    font-weight: 700;
}

.solutions-showcase__intro {
    max-width: 500px;
    padding-top: 3px;
}

.solutions-showcase__intro p,
.solutions-showcase__intro strong {
    display: block;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.22;
}

.solutions-showcase__intro p {
    margin-bottom: 30px;
    color: #696969;
    font-weight: 400;
}

.solutions-showcase__intro strong {
    color: #080808;
    font-weight: 700;
}

.solutions-showcase__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.exec-service-card {
    position: relative;
    min-height: 306px;
    overflow: hidden;
    border: 1px solid #242424;
    border-radius: 19px;
    background:
        radial-gradient(circle at 15% 18%, rgba(64,64,64,.20), rgba(5,5,5,0) 42%),
        linear-gradient(180deg, #080808 0%, #0b0b0b 100%);
    color: #fff;
    isolation: isolate;
}

.exec-service-card--custom {
    grid-column: 1 / -1;
    min-height: 294px;
}

.exec-service-card__marker {
    position: absolute;
    z-index: 5;
    top: 27px;
    left: 30px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: #159ff1;
    box-shadow: 0 0 14px rgba(21,159,241,.15);
}

.exec-service-card__copy {
    position: relative;
    z-index: 4;
    width: 44%;
    padding: 85px 0 38px 31px;
}

.exec-service-card__copy h3 {
    margin: 0 0 25px;
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 26px;
    line-height: 1.02;
    font-weight: 700;
}

.exec-service-card__copy p {
    max-width: 230px;
    margin: 0;
    color: rgba(255,255,255,.86);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.28;
    font-weight: 400;
}

.exec-service-card__media {
    position: absolute;
    z-index: 1;
    inset: 0 0 0 42%;
    overflow: hidden;
}

.exec-service-card__blue-shape {
    position: absolute;
    z-index: 1;
    right: -80px;
    top: -72px;
    width: 360px;
    height: 430px;
    border: 54px solid #2799ec;
    border-radius: 50%;
    transform: rotate(8deg);
    opacity: .98;
}

.exec-service-card__media img {
    position: absolute;
    z-index: 2;
    display: block;
    max-width: none;
    object-fit: contain;
}

.exec-service-card--management .exec-service-card__media img {
    width: 345px;
    right: 18px;
    bottom: -18px;
}

.exec-service-card--tech .exec-service-card__blue-shape {
    right: -112px;
    top: -84px;
    width: 370px;
    height: 440px;
}

.exec-service-card--tech .exec-service-card__media img {
    width: 360px;
    right: -14px;
    bottom: -18px;
}

.exec-service-card--creative .exec-service-card__blue-shape {
    right: -102px;
    top: -90px;
    width: 380px;
    height: 445px;
}

.exec-service-card--creative .exec-service-card__media img {
    width: 365px;
    right: -8px;
    bottom: -38px;
}

.exec-service-card--training .exec-service-card__blue-shape {
    right: -112px;
    top: -82px;
    width: 390px;
    height: 445px;
}

.exec-service-card--training .exec-service-card__media img {
    width: 366px;
    right: -5px;
    bottom: -25px;
}

.exec-service-card__custom-media {
    position: absolute;
    z-index: 1;
    inset: 0 0 0 36%;
    overflow: hidden;
}

.exec-service-card__custom-blue {
    position: absolute;
    z-index: 1;
    left: -88px;
    top: -90px;
    width: 260px;
    height: 470px;
    background: #228fdf;
    transform: skewX(-18deg);
}

.exec-service-card__collage {
    position: absolute;
    z-index: 2;
    inset: 0 -8px 0 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 5px;
    padding: 0;
    transform: skewX(-8deg) scale(1.04);
    transform-origin: center;
}

.exec-service-card__collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: skewX(8deg) scale(1.10);
}

.exec-service-card--custom .exec-service-card__copy {
    width: 35%;
    padding-top: 91px;
}

.exec-service-card--custom .exec-service-card__copy h3 {
    margin-bottom: 25px;
    font-size: 27px;
}

.exec-service-card--custom .exec-service-card__copy p {
    max-width: 235px;
}

@media (max-width: 1120px) {
    .solutions-showcase {
        padding: 86px 0 80px;
    }

    .solutions-showcase__container {
        width: min(calc(100% - 40px), 1040px);
    }

    .solutions-showcase__head {
        grid-template-columns: 1fr 1fr;
        gap: 54px;
        margin-bottom: 58px;
    }

    .solutions-showcase__head h2 {
        font-size: 52px;
    }

    .exec-service-card {
        min-height: 286px;
    }

    .exec-service-card__copy {
        width: 48%;
        padding-left: 26px;
    }

    .exec-service-card__marker {
        left: 26px;
    }

    .exec-service-card__media {
        left: 43%;
    }

    .exec-service-card__media img {
        transform: scale(.9);
        transform-origin: right bottom;
    }
}

@media (max-width: 820px) {
    .solutions-showcase__container {
        width: min(calc(100% - 28px), 760px);
    }

    .solutions-showcase__head {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 42px;
    }

    .solutions-showcase__head h2 {
        width: 100%;
        font-size: 46px;
    }

    .solutions-showcase__intro {
        max-width: 620px;
    }

    .solutions-showcase__grid {
        grid-template-columns: 1fr;
    }

    .exec-service-card--custom {
        grid-column: auto;
    }

    .exec-service-card,
    .exec-service-card--custom {
        min-height: 300px;
    }

    .exec-service-card--custom .exec-service-card__copy {
        width: 48%;
    }

    .exec-service-card__custom-media {
        left: 44%;
    }
}

@media (max-width: 560px) {
    .solutions-showcase {
        padding: 62px 0 64px;
    }

    .solutions-showcase__head h2 {
        font-size: 40px;
        line-height: 1.05;
    }

    .solutions-showcase__intro p,
    .solutions-showcase__intro strong {
        font-size: 15px;
        line-height: 1.3;
    }

    .exec-service-card,
    .exec-service-card--custom {
        min-height: 330px;
    }

    .exec-service-card__copy,
    .exec-service-card--custom .exec-service-card__copy {
        width: 58%;
        padding: 78px 0 30px 22px;
    }

    .exec-service-card__marker {
        top: 24px;
        left: 22px;
        width: 22px;
        height: 22px;
    }

    .exec-service-card__copy h3,
    .exec-service-card--custom .exec-service-card__copy h3 {
        font-size: 23px;
    }

    .exec-service-card__copy p {
        max-width: 180px;
        font-size: 12px;
    }

    .exec-service-card__media {
        left: 48%;
    }

    .exec-service-card__media img {
        right: -60px !important;
        transform: scale(.78);
    }

    .exec-service-card__custom-media {
        left: 52%;
    }

    .exec-service-card__collage {
        left: 15px;
        right: -120px;
    }
}


/* =========================================================
   REVISÃO 18 — PORTFÓLIO / "O que fazemos na prática"
   ========================================================= */
.portfolio-intro {
    position: relative;
    overflow: hidden;
    padding: 76px 0 82px;
    background:
        radial-gradient(circle at 50% 15%, rgba(255,255,255,.035), transparent 32%),
        linear-gradient(180deg, #111214 0%, #08090b 100%);
}

.portfolio-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(72, 160, 255, .06) 0,
            rgba(72, 160, 255, .06) 1px,
            transparent 1px,
            transparent 11px
        );
    mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

.portfolio-intro__inner {
    position: relative;
    z-index: 2;
    max-width: 1220px;
}

.portfolio-intro__tag {
    width: fit-content;
    height: 32px;
    margin: 0 auto 30px;
    padding: 0 14px 0 7px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(52,52,52,.96), rgba(26,26,26,.96));
    color: rgba(255,255,255,.66);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .03em;
}

.portfolio-intro__tag-icon {
    width: 28px;
    height: 20px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, #8bcfff, #51adff);
}

.portfolio-intro__tag-icon img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
}

.portfolio-intro__title {
    margin: 0 auto;
    max-width: 850px;
    text-align: center;
    color: #f3f3f3;
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1.08;
    font-weight: 300;
    letter-spacing: .015em;
}

.portfolio-intro__diagram {
    position: relative;
    max-width: 1080px;
    height: 230px;
    margin: 40px auto 0;
}

.portfolio-intro__mark {
    position: absolute;
    left: 50%;
    top: 72px;
    width: 96px;
    height: 96px;
    transform: translateX(-50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #349fff, #2b82d3);
    box-shadow: 0 0 30px rgba(37,151,255,.2);
}

.portfolio-intro__mark-inner {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0d141b;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.portfolio-intro__mark-inner img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(58%) sepia(91%) saturate(1510%) hue-rotate(181deg) brightness(105%) contrast(102%);
}

.portfolio-intro__connector {
    position: absolute;
    top: 24px;
    width: 235px;
    height: 106px;
    border-color: #269cff;
    border-style: solid;
    opacity: .95;
}

.portfolio-intro__connector--left {
    left: calc(50% - 283px);
    border-width: 0 0 1px 1px;
    border-radius: 0 0 0 18px;
}

.portfolio-intro__connector--right {
    right: calc(50% - 283px);
    border-width: 0 1px 1px 0;
    border-radius: 0 0 18px 0;
}

.portfolio-intro__copy {
    position: absolute;
    top: 135px;
    width: 220px;
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: .015em;
}

.portfolio-intro__copy--left {
    left: 0;
    text-align: left;
}

.portfolio-intro__copy--right {
    right: 0;
    text-align: left;
}

@media (max-width: 1024px) {
    .portfolio-intro {
        padding: 68px 0 70px;
    }

    .portfolio-intro__diagram {
        max-width: 820px;
    }

    .portfolio-intro__connector {
        width: 165px;
    }

    .portfolio-intro__connector--left {
        left: calc(50% - 215px);
    }

    .portfolio-intro__connector--right {
        right: calc(50% - 215px);
    }

    .portfolio-intro__copy {
        width: 175px;
        font-size: 12px;
    }
}

@media (max-width: 760px) {
    .portfolio-intro {
        padding: 58px 0 62px;
    }

    .portfolio-intro__tag {
        margin-bottom: 24px;
    }

    .portfolio-intro__diagram {
        height: auto;
        margin-top: 34px;
        display: grid;
        justify-items: center;
        gap: 18px;
    }

    .portfolio-intro__copy,
    .portfolio-intro__connector,
    .portfolio-intro__mark {
        position: relative;
        inset: auto;
        transform: none;
    }

    .portfolio-intro__copy {
        width: min(100%, 360px);
        text-align: center;
    }

    .portfolio-intro__connector {
        width: 1px;
        height: 42px;
        border: 0;
        background: #269cff;
        border-radius: 0;
    }

    .portfolio-intro__mark {
        left: auto;
        top: auto;
    }

    .portfolio-intro__copy--left { order: 1; }
    .portfolio-intro__connector--left { order: 2; }
    .portfolio-intro__mark { order: 3; }
    .portfolio-intro__connector--right { order: 4; }
    .portfolio-intro__copy--right { order: 5; }
}

/* =========================================================
   REVISÃO 19 — PORTFÓLIO COMPOSIÇÃO COMPACTA
   Ajuste fino baseado no print de referência:
   - título menor
   - conectores mais próximos do centro
   - símbolo central menor e mais alto
   - textos laterais trazidos para dentro
   - evita corte do texto da direita
   ========================================================= */
@media (min-width: 1025px) {
    .portfolio-intro {
        padding: 58px 0 62px;
    }

    .portfolio-intro__inner {
        max-width: 1120px;
    }

    .portfolio-intro__tag {
        height: 28px;
        margin-bottom: 22px;
        padding: 0 13px 0 7px;
    }

    .portfolio-intro__title {
        max-width: 760px;
        font-size: 48px;
        line-height: 1.08;
        font-weight: 300;
        letter-spacing: .015em;
    }

    .portfolio-intro__diagram {
        max-width: 900px;
        height: 188px;
        margin-top: 28px;
    }

    .portfolio-intro__mark {
        top: 62px;
        width: 76px;
        height: 76px;
        box-shadow: 0 0 24px rgba(37,151,255,.18);
    }

    .portfolio-intro__mark-inner {
        width: 56px;
        height: 56px;
    }

    .portfolio-intro__mark-inner img {
        width: 31px;
        height: 31px;
    }

    .portfolio-intro__connector {
        top: 16px;
        width: 150px;
        height: 96px;
        opacity: .88;
    }

    .portfolio-intro__connector--left {
        left: calc(50% - 190px);
        border-radius: 0 0 0 16px;
    }

    .portfolio-intro__connector--right {
        right: calc(50% - 190px);
        border-radius: 0 0 16px 0;
    }

    .portfolio-intro__copy {
        top: 108px;
        width: 190px;
        font-size: 11px;
        line-height: 1.35;
        letter-spacing: .02em;
    }

    .portfolio-intro__copy--left {
        left: 58px;
    }

    .portfolio-intro__copy--right {
        right: 58px;
    }
}

@media (min-width: 1280px) {
    .portfolio-intro__inner {
        max-width: 1180px;
    }

    .portfolio-intro__copy--left {
        left: 72px;
    }

    .portfolio-intro__copy--right {
        right: 72px;
    }
}


/* =========================================================
   REVISÃO 20 — PORTFÓLIO LINHAS INVERTIDAS PARA BAIXO
   - conectores com vertical no lado interno
   - curva para baixo como nas referências 2 e 3
   - seta na ponta externa de cada lado
   ========================================================= */
@media (min-width: 1025px) {
    .portfolio-intro__diagram {
        max-width: 900px;
        height: 196px;
        margin-top: 26px;
    }

    .portfolio-intro__mark {
        top: 70px;
    }

    .portfolio-intro__connector {
        top: 24px;
        width: 146px;
        height: 104px;
        opacity: .95;
    }

    /* esquerda: desce no lado de dentro e segue para fora */
    .portfolio-intro__connector--left {
        left: calc(50% - 184px);
        border-width: 0 1px 1px 0;
        border-radius: 0 0 16px 0;
    }

    /* direita: desce no lado de dentro e segue para fora */
    .portfolio-intro__connector--right {
        right: calc(50% - 184px);
        border-width: 0 0 1px 1px;
        border-radius: 0 0 0 16px;
    }

    .portfolio-intro__connector::after {
        content: "";
        position: absolute;
        bottom: -5px;
        width: 9px;
        height: 9px;
        border-top: 1.5px solid #269cff;
        border-right: 1.5px solid #269cff;
    }

    .portfolio-intro__connector--left::after {
        left: -2px;
        transform: rotate(-135deg);
    }

    .portfolio-intro__connector--right::after {
        right: -2px;
        transform: rotate(45deg);
    }

    .portfolio-intro__copy {
        top: 126px;
        width: 168px;
        font-size: 11px;
        line-height: 1.35;
    }

    .portfolio-intro__copy--left {
        left: 14px;
    }

    .portfolio-intro__copy--right {
        right: 14px;
    }
}


/* =========================================================
   REVISÃO 21 — PORTFÓLIO / DISTÂNCIAS DA COMPOSIÇÃO
   Baseado na referência enviada:
   - selo centralizado no topo
   - respiro maior até o título
   - respiro definido do título até os conectores
   - verticais mais afastadas do círculo central
   - curvas longas, simétricas e voltadas para baixo
   - círculo central mais baixo, cruzando a linha horizontal
   ========================================================= */
@media (min-width: 1025px) {
    .portfolio-intro {
        padding: 46px 0 54px;
    }

    .portfolio-intro__inner {
        max-width: 1180px;
    }

    .portfolio-intro__tag {
        height: 34px;
        margin-bottom: 30px;
        padding: 0 16px 0 8px;
        gap: 12px;
    }

    .portfolio-intro__tag-icon {
        width: 32px;
        height: 22px;
    }

    .portfolio-intro__tag-icon img {
        width: 17px;
        height: 17px;
    }

    .portfolio-intro__title {
        max-width: 980px;
        font-size: 56px;
        line-height: 1.04;
        font-weight: 300;
        letter-spacing: .012em;
    }

    .portfolio-intro__diagram {
        max-width: 1040px;
        height: 250px;
        margin-top: 48px;
    }

    .portfolio-intro__connector {
        top: 0;
        width: 220px;
        height: 170px;
        border-color: #269cff;
        opacity: .96;
    }

    /*
       A vertical fica para o lado interno e desce antes de virar.
       As duas peças são espelhadas para manter a mesma distância
       em relação ao centro.
    */
    .portfolio-intro__connector--left {
        left: calc(50% - 402px);
        border-width: 0 1px 1px 0;
        border-radius: 0 0 24px 0;
    }

    .portfolio-intro__connector--right {
        right: calc(50% - 402px);
        border-width: 0 0 1px 1px;
        border-radius: 0 0 0 24px;
    }

    .portfolio-intro__connector::after {
        bottom: -5px;
        width: 9px;
        height: 9px;
    }

    .portfolio-intro__mark {
        top: 86px;
        width: 126px;
        height: 126px;
        box-shadow: 0 0 30px rgba(37,151,255,.18);
    }

    .portfolio-intro__mark-inner {
        width: 94px;
        height: 94px;
    }

    .portfolio-intro__mark-inner img {
        width: 54px;
        height: 54px;
    }

    .portfolio-intro__copy {
        top: 160px;
        width: 185px;
        font-size: 12px;
        line-height: 1.38;
        letter-spacing: .02em;
    }

    .portfolio-intro__copy--left {
        left: 0;
    }

    .portfolio-intro__copy--right {
        right: 0;
    }
}

@media (min-width: 1280px) {
    .portfolio-intro__inner {
        max-width: 1220px;
    }

    .portfolio-intro__diagram {
        max-width: 1080px;
    }

    .portfolio-intro__copy--left {
        left: 8px;
    }

    .portfolio-intro__copy--right {
        right: 8px;
    }
}


/* =========================================================
   REVISÃO 22 — PORTFÓLIO
   - setas/horizontais mais curtas para não invadir os textos
   - retirar círculo central e deixar somente o símbolo da empresa
   ========================================================= */
@media (min-width: 1025px) {
    .portfolio-intro__diagram {
        max-width: 1020px;
        height: 238px;
        margin-top: 46px;
    }

    .portfolio-intro__connector {
        top: 4px;
        width: 164px;
        height: 158px;
    }

    .portfolio-intro__connector--left {
        left: calc(50% - 360px);
        border-radius: 0 0 20px 0;
    }

    .portfolio-intro__connector--right {
        right: calc(50% - 360px);
        border-radius: 0 0 0 20px;
    }

    .portfolio-intro__connector::after {
        bottom: -4px;
        width: 8px;
        height: 8px;
    }

    .portfolio-intro__mark {
        top: 104px;
        width: 64px;
        height: 64px;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0;
    }

    .portfolio-intro__mark::before,
    .portfolio-intro__mark::after {
        display: none !important;
        content: none !important;
    }

    .portfolio-intro__mark-inner {
        width: 64px;
        height: 64px;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0;
    }

    .portfolio-intro__mark-inner img {
        width: 64px;
        height: 64px;
        filter: brightness(0) saturate(100%) invert(71%) sepia(95%) saturate(1585%) hue-rotate(180deg) brightness(103%) contrast(102%);
    }

    .portfolio-intro__copy {
        top: 158px;
        width: 158px;
        font-size: 12px;
        line-height: 1.34;
    }

    .portfolio-intro__copy--left {
        left: 18px;
    }

    .portfolio-intro__copy--right {
        right: 18px;
    }
}


/* =========================================================
   REVISÃO 23 — PORTFÓLIO / COMPOSIÇÃO E DISTÂNCIAS
   - selo PORTFÓLIO realmente centralizado
   - título menor e mais próximo do layout
   - diagrama sobe e fica mais compacto
   - conectores mais curtos e afastados dos textos
   - símbolo GEX sem círculo, maior e mais alto
   - textos laterais sobem e entram um pouco
   ========================================================= */
@media (min-width: 1025px) {
    .portfolio-intro {
        padding: 34px 0 46px;
    }

    .portfolio-intro__inner {
        max-width: 1160px;
    }

    .portfolio-intro__tag {
        display: flex;
        width: fit-content;
        height: 32px;
        margin: 0 auto 22px;
        padding: 0 15px 0 8px;
        gap: 11px;
    }

    .portfolio-intro__title {
        max-width: 800px;
        margin: 0 auto;
        font-size: 48px;
        line-height: 1.06;
        font-weight: 300;
        letter-spacing: .012em;
        text-align: center;
    }

    .portfolio-intro__diagram {
        max-width: 1020px;
        height: 192px;
        margin: 28px auto 0;
    }

    .portfolio-intro__connector {
        top: 0;
        width: 120px;
        height: 128px;
        border-color: #269cff;
        opacity: .95;
    }

    .portfolio-intro__connector--left {
        left: calc(50% - 300px);
        border-width: 0 1px 1px 0;
        border-radius: 0 0 20px 0;
    }

    .portfolio-intro__connector--right {
        right: calc(50% - 300px);
        border-width: 0 0 1px 1px;
        border-radius: 0 0 0 20px;
    }

    .portfolio-intro__connector::after {
        bottom: -4px;
        width: 8px;
        height: 8px;
    }

    .portfolio-intro__mark {
        top: 72px;
        width: 62px;
        height: 62px;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0;
    }

    .portfolio-intro__mark-inner {
        width: 62px;
        height: 62px;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0;
    }

    .portfolio-intro__mark-inner img {
        width: 62px;
        height: 62px;
    }

    .portfolio-intro__copy {
        top: 116px;
        width: 180px;
        font-size: 12px;
        line-height: 1.34;
        letter-spacing: .02em;
    }

    .portfolio-intro__copy--left {
        left: 24px;
    }

    .portfolio-intro__copy--right {
        right: 24px;
    }
}

@media (min-width: 1280px) {
    .portfolio-intro__inner {
        max-width: 1200px;
    }

    .portfolio-intro__diagram {
        max-width: 1060px;
    }

    .portfolio-intro__copy--left {
        left: 28px;
    }

    .portfolio-intro__copy--right {
        right: 28px;
    }
}


/* =========================================================
   REVISÃO 24 — ECOSSISTEMA + MANIFESTO + CONTATO
   ========================================================= */

/* Remove definitivamente a seta decorativa sob o manifesto */
.manifesto__box::before {
    content: none !important;
    display: none !important;
}

/* Mantém títulos sem aspecto condensado */
.manifesto h2 {
    letter-spacing: .01em;
}

/* Ícone de WhatsApp no card "Conte o que você precisa" */
.whatsapp-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-card__icon svg {
    width: 26px;
    height: 26px;
    fill: #050505;
    display: block;
}

/* Hover do Nosso Ecossistema: acende para o azul */
.company-row {
    position: relative;
    overflow: hidden;
    transition:
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        transform .28s ease;
}

.company-row strong,
.company-row span {
    transition: color .28s ease;
}

.company-row:hover {
    background: linear-gradient(90deg, #2c96f3 0%, #70bcff 58%, #9dd1ff 100%);
    border-color: #65b5fb;
    box-shadow: 0 10px 28px rgba(44,150,243,.18), inset 0 0 0 1px rgba(255,255,255,.08);
    transform: translateY(-1px);
}

.company-row:hover strong,
.company-row:hover span {
    color: #050505;
}

/* Todos os itens começam no estado neutro. O azul aparece somente no hover. */
.company-row:first-child {
    background: #151515;
    border-color: #303030;
    box-shadow: none;
    transform: none;
}

.company-row:first-child strong {
    color: #2c96f3;
}

.company-row:first-child span {
    color: #b8b8b8;
}


/* =========================================================
   REVISÃO 26 — NOSSO ECOSSISTEMA: HOVER + ESTADO CLICADO
   - todos os itens começam neutros, inclusive Gestão & Programação
   - hover acende para azul
   - clique mantém o mesmo estado visual do hover
   - clicar em outro item transfere o estado ativo
   ========================================================= */
.company-row,
.company-row:first-child {
    background: linear-gradient(100deg, #1d1d1d, #101010) !important;
    border-color: #2a2a2a !important;
    box-shadow: none !important;
    transform: none !important;
    color: inherit !important;
    cursor: pointer;
    user-select: none;
    outline: none;
}

.company-row strong,
.company-row:first-child strong {
    color: #d9d9d9 !important;
}

.company-row span,
.company-row:first-child span {
    color: #a6a6a6 !important;
}

.company-row:hover,
.company-row:focus-visible,
.company-row.is-active,
.company-row:first-child:hover,
.company-row:first-child:focus-visible,
.company-row:first-child.is-active {
    background: linear-gradient(90deg, #2c96f3 0%, #70bcff 58%, #9dd1ff 100%) !important;
    border-color: #65b5fb !important;
    box-shadow: 0 10px 28px rgba(44,150,243,.18), inset 0 0 0 1px rgba(255,255,255,.08) !important;
    transform: translateY(-1px) !important;
}

.company-row:hover strong,
.company-row:hover span,
.company-row:focus-visible strong,
.company-row:focus-visible span,
.company-row.is-active strong,
.company-row.is-active span,
.company-row:first-child:hover strong,
.company-row:first-child:hover span,
.company-row:first-child:focus-visible strong,
.company-row:first-child:focus-visible span,
.company-row:first-child.is-active strong,
.company-row:first-child.is-active span {
    color: #050505 !important;
}


/* =========================================================
   REVISÃO 27 — NAVEGAÇÃO ATIVA
   Home / Soluções / Portfólio / Contato recebem underline
   apenas quando estão ativos/clicados.
   ========================================================= */
.site-nav a,
.mobile-menu a {
    position: relative;
}

.site-nav a::after,
.mobile-menu a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -7px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
    opacity: 0;
    transition: left .22s ease, right .22s ease, opacity .22s ease;
}

.site-nav a.active,
.mobile-menu a.active {
    color: var(--blue);
}

.site-nav a.active::after,
.mobile-menu a.active::after {
    left: 0;
    right: 0;
    opacity: 1;
}

/* Hover muda apenas a cor; o underline permanente fica somente no ativo */
.site-nav a:hover,
.mobile-menu a:hover {
    color: var(--blue);
}

@media (max-width: 1050px) {
    .mobile-menu a::after {
        left: 14px;
        right: calc(100% - 14px);
        bottom: 5px;
        width: auto;
    }

    .mobile-menu a.active::after {
        left: 14px;
        right: 14px;
    }
}


/* =========================================================
   REVISÃO 28 — ÍCONE NOS CARDS DE SOLUÇÕES
   Adiciona a seta diagonal dentro do marcador azul nos cards:
   Gestão, Programação & Tecnologia, Criação & Presença Digital e Treinamentos.
   ========================================================= */
.exec-service-card--management .exec-service-card__marker,
.exec-service-card--tech .exec-service-card__marker,
.exec-service-card--creative .exec-service-card__marker,
.exec-service-card--training .exec-service-card__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.exec-service-card--management .exec-service-card__marker::before,
.exec-service-card--tech .exec-service-card__marker::before,
.exec-service-card--creative .exec-service-card__marker::before,
.exec-service-card--training .exec-service-card__marker::before {
    content: "↘";
    display: block;
    color: #050505;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    transform: translateY(-1px);
}


/* =========================================================
   REVISÃO 29 — ÍCONE TAMBÉM EM PROJETOS PERSONALIZADOS
   ========================================================= */
.exec-service-card--custom .exec-service-card__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.exec-service-card--custom .exec-service-card__marker::before {
    content: "↘";
    display: block;
    color: #050505;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    transform: translateY(-1px);
}


/* =========================================================
   REVISÃO 30 — HERO / CTA E BOTÕES DE AÇÃO
   - análise estratégica imediatamente abaixo dos dois botões
   - os dois botões começam sem preenchimento
   - hover/focus acende em azul
   - clique mantém o estado azul no botão selecionado
   ========================================================= */

/* Os dois CTAs principais do hero ficam neutros até hover/clique. */
.hero__actions .gex-button {
    color: var(--blue);
    border-color: var(--blue);
    background: rgba(0, 0, 0, .10);
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.hero__actions .gex-button .gex-button__dot {
    background: var(--blue);
}

.hero__actions .gex-button .gex-button__dot img {
    filter: none;
}

.hero__actions .gex-button:hover,
.hero__actions .gex-button:focus-visible,
.hero__actions .gex-button.is-active {
    color: #030303;
    border-color: #8cc6f9;
    background: linear-gradient(180deg, var(--blue), #bddefb);
    box-shadow: 0 10px 38px rgba(44,150,243,.32);
}

.hero__actions .gex-button:hover .gex-button__dot,
.hero__actions .gex-button:focus-visible .gex-button__dot,
.hero__actions .gex-button.is-active .gex-button__dot {
    background: #050505;
}

.hero__actions .gex-button:hover .gex-button__dot img,
.hero__actions .gex-button:focus-visible .gex-button__dot img,
.hero__actions .gex-button.is-active .gex-button__dot img {
    filter: brightness(0) invert(1);
}

/* A faixa de análise deixa de flutuar à direita e entra no fluxo logo abaixo. */
.hero-contact-float {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex;
    width: max-content;
    max-width: min(100%, 470px);
    margin: 18px auto 0 !important;
    transform: none !important;
    z-index: 8;
}

@media (min-width: 1100px) {
    .hero {
        min-height: 760px;
        padding-bottom: 40px;
    }

    .hero__inner {
        min-height: 610px;
    }

    .hero__actions {
        margin-top: 58px;
    }

    .hero-contact-float {
        min-height: 72px;
        gap: 14px;
        padding: 10px 12px;
        border-radius: 17px;
    }
}

@media (max-width: 760px) {
    .hero-contact-float {
        display: flex !important;
        width: calc(100% - 24px);
        max-width: 430px;
        white-space: normal;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px !important;
    }

    .hero-contact-float__copy {
        flex: 1 1 150px;
    }

    .hero-contact-float__action {
        flex: 0 0 auto;
    }
}


/* =========================================================
   REVISÃO 31 — HERO COM CTA ÚNICO
   - remove os botões Conheça o ecossistema / Veja nossas soluções
   - mantém somente Agende uma análise estratégica gratuita
   ========================================================= */
.hero-contact-float {
    margin-top: 48px !important;
}

@media (min-width: 1100px) {
    .hero-contact-float {
        margin-top: 54px !important;
    }
}

@media (max-width: 760px) {
    .hero-contact-float {
        margin-top: 34px !important;
    }
}


/* =========================================================
   REVISÃO 32 — CTA "CLIQUE AQUI" SEM ÍCONE FINAL
   - remove o símbolo após o texto
   - centraliza o texto dentro do botão
   ========================================================= */
.hero-contact-float__action {
    gap: 0;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 1100px) {
    .hero-contact-float__action {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =========================================================
   REVISÃO 33 — IDENTIDADE OFICIAL GRUPO EXECUTA
   - substitui GEX CORE por EX + GRUPO EXECUTA
   - versão horizontal sem "Soluções Web"
   - símbolo EX nas aplicações reduzidas
   ========================================================= */
.brand.brand--grupo-executa {
    width: 174px;
    min-width: 174px;
    height: auto;
    display: inline-flex;
    align-items: center;
    overflow: visible;
}

.brand--grupo-executa .brand__horizontal-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 34px;
    object-fit: contain;
    object-position: left center;
}

.brand--footer.brand--grupo-executa {
    width: 154px;
    min-width: 154px;
}

.brand--footer.brand--grupo-executa .brand__horizontal-logo {
    max-height: 30px;
}

/* Símbolo oficial EX nas áreas compactas da interface. */
.hero-contact-float__brand img,
.ecosystem__brand-symbol img,
.portfolio-intro__tag-icon img,
.portfolio-intro__mark-inner img,
.gex-button__dot img {
    object-fit: contain;
}

.hero-contact-float__brand img {
    width: 24px;
    height: 18px;
}

.ecosystem__brand-symbol img {
    width: 38px;
    height: 28px;
}

.portfolio-intro__tag-icon img {
    width: 18px;
    height: 13px;
}

@media (min-width: 1025px) {
    .portfolio-intro__mark-inner img {
        width: 70px;
        height: 48px;
    }
}

@media (max-width: 760px) {
    .brand.brand--grupo-executa {
        width: 146px;
        min-width: 146px;
    }

    .brand--grupo-executa .brand__horizontal-logo {
        max-height: 29px;
    }

    .brand--footer.brand--grupo-executa {
        width: 138px;
        min-width: 138px;
    }
}


/* REVISÃO 37 — ícone EX quadrado preto no navegador e entre as linhas do ecossistema */
.ecosystem__brand-symbol img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}


/* REVISÃO 38 — HERO EM EXATAMENTE DUAS LINHAS */
.hero__title h1 .hero-title-line {
    display: block;
    white-space: nowrap;
}

@media (min-width: 769px) {
    .hero__title {
        max-width: 1040px;
    }
}

@media (max-width: 768px) {
    .hero__title h1 .hero-title-line {
        white-space: normal;
    }
}


/* =========================================================
   REVISÃO 39 — MENU ATIVO POR CLIQUE E SEÇÃO VISÍVEL
   O visual do underline continua igual; a lógica agora
   acompanha automaticamente a seção acessada durante o scroll.
   ========================================================= */


/* =========================================================
   REVISÃO 45 — MENU PRINCIPAL DEFINITIVO
   - normal: cinza, sem underline
   - hover: azul + underline
   - clicado/ativo: azul + underline permanente
   - somente um item ativo por vez
   ========================================================= */

.site-nav a,
.mobile-menu a {
    position: relative;
    color: #bebebe !important;
    transition: color .18s ease;
}

.site-nav a::after,
.mobile-menu a::after {
    content: "";
    position: absolute;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
    opacity: 0;
    transition: left .18s ease, right .18s ease, opacity .18s ease;
}

/* Desktop */
.site-nav a::after {
    left: 50%;
    right: 50%;
    bottom: -8px;
}

/* HOVER */
.site-nav a:hover,
.mobile-menu a:hover {
    color: var(--blue) !important;
}

.site-nav a:hover::after {
    left: 0;
    right: 0;
    opacity: 1;
}

/* ATIVO/CLICADO */
.site-nav a.active,
.site-nav a[aria-current="page"],
.mobile-menu a.active,
.mobile-menu a[aria-current="page"] {
    color: var(--blue) !important;
}

.site-nav a.active::after,
.site-nav a[aria-current="page"]::after {
    left: 0;
    right: 0;
    opacity: 1;
}

/* Itens não ativos voltam ao estado normal */
.site-nav a:not(.active):not([aria-current="page"]):not(:hover) {
    color: #bebebe !important;
}

.site-nav a:not(.active):not([aria-current="page"]):not(:hover)::after {
    left: 50%;
    right: 50%;
    opacity: 0;
}

/* Mobile */
@media (max-width: 1050px) {
    .mobile-menu a::after {
        left: 50%;
        right: 50%;
        bottom: 5px;
    }

    .mobile-menu a:hover::after,
    .mobile-menu a.active::after,
    .mobile-menu a[aria-current="page"]::after {
        left: 14px;
        right: 14px;
        opacity: 1;
    }

    .mobile-menu a:not(.active):not([aria-current="page"]):not(:hover)::after {
        left: 50%;
        right: 50%;
        opacity: 0;
    }
}


/* =========================================================
   REVISÃO 46 — FORMULÁRIO + OPEN GRAPH
   - campo de necessidade/projeto
   - textarea coerente com os demais campos
   ========================================================= */

.contact-form-card textarea {
    min-height: 132px;
    padding: 16px 22px;
    line-height: 1.45;
    resize: vertical;
    font-family: inherit;
}

.contact-form-card textarea::placeholder {
    color: #bac8d2;
}

.contact-form-card textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(44,150,243,.12);
}


/* =========================================================
   REVISÃO 49 — RODAPÉ
   - mantém o logotipo oficial atual do Grupo Executa
   - composição inspirada na referência enviada
   - crédito central inferior: Site desenvolvido por GEX CORE
   ========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 15%, rgba(255,255,255,.045), transparent 38%),
        #050505;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 42px 0 76px;
}

.site-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.site-footer__brand-block {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.brand--footer {
    width: auto !important;
    flex: 0 0 auto;
}

.brand--footer .brand__horizontal-logo {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
}

.site-footer__copy {
    display: grid;
    gap: 3px;
    padding-left: 26px;
    border-left: 1px solid rgba(255,255,255,.13);
}

.site-footer__copy p {
    margin: 0;
    color: rgba(255,255,255,.52);
    font-size: 12px;
    line-height: 1.35;
}

.site-footer__copy span {
    color: rgba(255,255,255,.9);
    font-size: 12px;
    line-height: 1.35;
}

.site-footer__nav {
    display: flex;
    align-items: center;
    gap: 34px;
    flex: 0 0 auto;
}

.site-footer__nav a {
    color: rgba(255,255,255,.72);
    font-size: 13px;
    transition: color .18s ease;
}

.site-footer__nav a:hover {
    color: var(--blue);
}

.site-footer__developer {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    min-width: 330px;
    height: 46px;
    padding: 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: rgba(255,255,255,.82);
    font-size: 11px;
    white-space: nowrap;
    background: linear-gradient(180deg, #222, #171717);
    border: 1px solid rgba(255,255,255,.09);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 28px rgba(0,0,0,.22);
}

.site-footer__developer strong {
    color: var(--blue);
    font-weight: 600;
}

.site-footer__developer-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--blue);
    color: #050505;
    flex: 0 0 auto;
}

.site-footer__developer-icon svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 900px) {
    .site-footer {
        padding: 42px 0 92px;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .site-footer__brand-block {
        flex-direction: column;
        gap: 18px;
    }

    .site-footer__copy {
        padding-left: 0;
        border-left: 0;
    }

    .site-footer__nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 28px;
    }

    .site-footer__developer {
        min-width: min(330px, calc(100% - 36px));
        padding: 0 22px;
    }
}


/* =========================================================
   REVISÃO 50 — FAIXA "SITE DESENVOLVIDO POR GEX CORE"
   Formato fiel à referência:
   - faixa ocupa toda a largura do rodapé
   - topo horizontal nas laterais
   - ressalto central integrado à faixa
   - sem formato de cápsula/pílula isolada
   ========================================================= */

.site-footer {
    padding-bottom: 64px;
}

/* Faixa inferior contínua */
.site-footer__developer {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255,255,255,.82);
    font-size: 10px;
    white-space: nowrap;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018)),
        #171717;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.10);
    border-radius: 0;
    box-shadow: none;
}

/*
 * Ressalto central da referência.
 * O fundo cobre o trecho central da borda reta e cria
 * a subida curva antes de retornar à linha horizontal.
 */
.site-footer__developer::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    width: 320px;
    height: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.022)),
        #171717;
    border-top: 1px solid rgba(255,255,255,.10);
    border-left: 1px solid rgba(255,255,255,.10);
    border-right: 1px solid rgba(255,255,255,.10);
    border-radius: 30px 30px 0 0;
}

/* Conteúdo acima do ressalto */
.site-footer__developer > * {
    position: relative;
    z-index: 2;
}

.site-footer__developer strong {
    color: var(--blue);
    font-weight: 600;
}

.site-footer__developer-icon {
    width: 16px;
    height: 16px;
}

.site-footer__developer-icon svg {
    width: 9px;
    height: 9px;
}

@media (max-width: 900px) {
    .site-footer {
        padding-bottom: 76px;
    }

    .site-footer__developer {
        height: 42px;
        min-width: 0;
        width: 100%;
        padding: 0 18px;
        font-size: 10px;
    }

    .site-footer__developer::before {
        width: min(300px, calc(100% - 56px));
        top: -14px;
        height: 15px;
    }
}


/* =========================================================
   REVISÃO 51 — CARDS DE SERVIÇOS EM FORMATO "ANÚNCIO"
   Estrutura de cada card:
   1. bloco de informações (ícone, título e descrição)
   2. bloco exclusivo para uma única imagem
   As imagens serão adicionadas individualmente em uma próxima etapa.
   ========================================================= */

.solutions-showcase__grid {
    gap: 18px;
}

/* Reinicia a estrutura antiga baseada em mídia absoluta. */
.exec-service-card {
    display: grid;
    grid-template-rows: auto minmax(210px, 1fr);
    min-height: 500px;
    overflow: hidden;
    border: 1px solid #242424;
    border-radius: 22px;
    background: #080808;
}

.exec-service-card--custom {
    min-height: 520px;
}

/* Bloco superior de informações. */
.exec-service-card__info {
    position: relative;
    z-index: 3;
    min-height: 252px;
    padding: 30px 32px 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.055), transparent 38%),
        linear-gradient(180deg, #0b0b0b 0%, #080808 100%);
}

.exec-service-card__marker {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 auto;
    margin: 0 0 26px;
}

.exec-service-card__copy,
.exec-service-card--custom .exec-service-card__copy {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0;
}

.exec-service-card__copy h3,
.exec-service-card--custom .exec-service-card__copy h3 {
    max-width: 360px;
    margin: 0 0 24px;
    font-size: clamp(25px, 2vw, 32px);
    line-height: 1.05;
    letter-spacing: .01em;
}

.exec-service-card__copy p,
.exec-service-card--custom .exec-service-card__copy p {
    max-width: 360px;
    margin: 0;
    font-size: 15px;
    line-height: 1.42;
    letter-spacing: .01em;
}

/*
 * Área reservada para a imagem única de cada serviço.
 * Futuramente basta inserir:
 * <img src="..." alt="...">
 * dentro desta DIV.
 */
.exec-service-card__image-slot {
    position: relative;
    min-height: 230px;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 78% 22%, rgba(44,150,243,.10), transparent 35%),
        linear-gradient(145deg, #111315 0%, #08090a 100%);
}

.exec-service-card__image-slot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.16));
}

.exec-service-card__image-slot img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
}

/* A antiga arte/composição deixa de participar destes novos cards. */
.exec-service-card__media,
.exec-service-card__custom-media,
.exec-service-card__blue-shape,
.exec-service-card__custom-blue,
.exec-service-card__collage {
    display: none !important;
}

.exec-service-card--custom {
    grid-column: 1 / -1;
    grid-template-rows: auto minmax(260px, 1fr);
}

.exec-service-card--custom .exec-service-card__info {
    min-height: 230px;
}

.exec-service-card__image-slot--wide,
.exec-service-card--custom .exec-service-card__image-slot {
    min-height: 270px;
}

@media (max-width: 800px) {
    .solutions-showcase__grid {
        grid-template-columns: 1fr;
    }

    .exec-service-card,
    .exec-service-card--custom {
        grid-column: auto;
        min-height: 0;
        grid-template-rows: auto 220px;
    }

    .exec-service-card__info,
    .exec-service-card--custom .exec-service-card__info {
        min-height: 0;
        padding: 28px 26px 32px;
    }

    .exec-service-card__copy h3,
    .exec-service-card--custom .exec-service-card__copy h3 {
        font-size: 26px;
    }

    .exec-service-card__image-slot,
    .exec-service-card__image-slot--wide,
    .exec-service-card--custom .exec-service-card__image-slot {
        min-height: 220px;
    }
}


/* =========================================================
   REVISÃO 52 — RESPONSIVIDADE GLOBAL
   Breakpoints principais:
   - Desktop largo: 1440px+
   - Notebook / desktop: 1025px–1439px
   - Tablet: 769px–1024px
   - Mobile: até 768px
   - Mobile compacto: até 480px
   ========================================================= */

/* ---------- BASE FLUIDA ---------- */
html {
    scroll-padding-top: 92px;
}

body {
    overflow-x: hidden;
}

.site-shell,
main,
section {
    max-width: 100%;
}

.container,
.container--wide {
    width: min(calc(100% - 48px), 1280px);
    margin-inline: auto;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

/* Títulos sem aparência condensada */
.hero__title h1,
.story__copy h2,
.ecosystem > h2,
.ecosystem__blue h3,
.companies h2,
.solutions-showcase__head h2,
.portfolio-intro__title,
.manifesto h2,
.contact__title {
    letter-spacing: 0 !important;
    overflow-wrap: normal;
    word-break: normal;
}

/* ---------- NOTEBOOK / DESKTOP MENOR ---------- */
@media (max-width: 1200px) {
    .container,
    .container--wide {
        width: min(calc(100% - 40px), 1080px);
    }

    .site-header__inner {
        gap: 22px;
    }

    .brand.brand--grupo-executa {
        width: 160px;
    }

    .hero {
        min-height: 720px;
        padding-top: 145px;
    }

    .hero__title {
        max-width: 860px;
    }

    .hero__title h1 {
        font-size: clamp(52px, 6vw, 68px);
        line-height: 1.02;
    }

    .hero__title p {
        max-width: 720px;
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.28;
    }

    .hero-contact-float {
        max-width: 460px;
    }

    .story {
        padding-top: 70px;
        padding-bottom: 100px;
    }

    .story__grid {
        gap: 44px;
    }

    .story__copy h2 {
        font-size: clamp(46px, 5vw, 62px);
        line-height: 1.05;
    }

    .story__body {
        font-size: clamp(18px, 1.8vw, 22px);
        line-height: 1.35;
    }

    .ecosystem__blue {
        padding-left: 64px;
        padding-right: 64px;
    }

    .companies__inner {
        width: min(100%, 960px);
    }

    .solutions-showcase__head {
        gap: 50px;
    }

    .contact__grid {
        grid-template-columns: minmax(300px, .8fr) minmax(480px, 1.2fr);
        gap: 48px;
    }

    .contact-form-card {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* ---------- TABLET / MENU MOBILE ---------- */
@media (max-width: 1050px) {
    .site-header {
        inset: 14px 0 auto;
    }

    .site-header.is-scrolled {
        inset: 0 0 auto;
        padding: 9px 0;
    }

    .site-header__inner {
        min-height: 52px;
    }

    .brand.brand--grupo-executa {
        width: 150px !important;
    }

    .brand__horizontal-logo {
        width: 100%;
        height: auto;
    }

    .menu-button {
        display: block;
        flex: 0 0 44px;
        margin-left: auto;
    }

    .site-nav,
    .site-header__inner > .gex-button {
        display: none !important;
    }

    .mobile-menu {
        top: 66px;
        left: 20px;
        right: 20px;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        padding: 14px;
        border-radius: 16px;
        box-shadow: 0 18px 60px rgba(0,0,0,.45);
    }

    .mobile-menu a {
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 12px 14px;
        font-size: 15px;
    }

    .hero {
        min-height: auto;
        padding: 130px 0 90px;
    }

    .hero__inner {
        min-height: 0 !important;
    }

    .hero__chips {
        inset: 80px 0 auto;
        opacity: .85;
    }

    .hero__horizon {
        bottom: -80px;
        height: 300px;
    }

    .story__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .story__copy {
        max-width: 760px;
        margin-inline: auto;
    }

    .story__visual {
        min-height: 500px;
        overflow: visible;
    }

    .story__visual img {
        width: min(720px, 100%);
        max-width: 100%;
        margin-inline: auto;
    }

    .ecosystem > h2 {
        max-width: 820px;
        padding-inline: 34px;
        font-size: clamp(42px, 6vw, 58px);
        line-height: 1.06;
    }

    .ecosystem__blue {
        padding: 52px 34px 54px;
    }

    .ecosystem__blue h3 {
        font-size: clamp(36px, 5vw, 50px);
        line-height: 1.08;
    }

    .process-grid {
        max-width: 850px;
    }

    .companies {
        padding-inline: 0;
    }

    .company-row {
        grid-template-columns: minmax(180px, .75fr) minmax(0, 1.4fr);
        gap: 30px;
    }

    .solutions-showcase {
        padding-top: 86px;
        padding-bottom: 86px;
    }

    .solutions-showcase__head {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 46px;
    }

    .solutions-showcase__head h2 {
        width: 100%;
        max-width: 760px;
        font-size: clamp(46px, 7vw, 62px);
        line-height: 1.04;
    }

    .solutions-showcase__intro {
        max-width: 720px;
    }

    .solutions-showcase__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exec-service-card {
        min-height: 470px;
    }

    .exec-service-card__info {
        min-height: 240px;
        padding: 28px;
    }

    .exec-service-card__copy h3,
    .exec-service-card--custom .exec-service-card__copy h3 {
        font-size: clamp(24px, 3vw, 30px);
    }

    .exec-service-card__copy p,
    .exec-service-card--custom .exec-service-card__copy p {
        font-size: 14px;
    }

    .portfolio-intro {
        padding: 64px 0 70px;
    }

    .portfolio-intro__title {
        max-width: 760px;
        font-size: clamp(40px, 6vw, 52px);
        line-height: 1.08;
    }

    .manifesto {
        padding-bottom: 82px;
    }

    .manifesto__box {
        padding: 52px 48px;
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
    }

    .manifesto h2 {
        max-width: 760px;
        font-size: clamp(34px, 4.5vw, 44px);
        line-height: 1.08;
    }

    .manifesto p {
        max-width: 760px;
        font-size: 17px;
    }

    .contact {
        padding: 86px 0 110px;
    }

    .contact__title {
        font-size: clamp(52px, 7vw, 68px);
        line-height: 1.02;
        margin-bottom: 44px;
    }

    .contact__grid {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 780px;
        margin-inline: auto;
    }

    .whatsapp-card,
    .contact-form-card {
        width: 100%;
        min-height: 0;
    }

    .whatsapp-card {
        padding: 38px;
    }

    .contact-form-card {
        padding: 44px 42px 48px;
    }

    .site-footer__inner {
        gap: 28px;
    }
}

/* ---------- TABLET RETRATO ---------- */
@media (max-width: 820px) {
    .container,
    .container--wide {
        width: min(calc(100% - 30px), 760px);
    }

    .hero {
        padding-top: 118px;
        padding-bottom: 72px;
    }

    .hero__title {
        gap: 20px;
    }

    .hero__title h1 {
        font-size: clamp(44px, 8vw, 58px);
        line-height: 1.04;
    }

    .hero-title-line {
        display: block;
    }

    .hero__title p {
        font-size: 18px;
        line-height: 1.38;
    }

    .hero__chips {
        display: none;
    }

    .hero-contact-float {
        width: min(100%, 470px);
        margin-top: 32px !important;
    }

    .story {
        padding-top: 52px;
        padding-bottom: 76px;
    }

    .story__copy .section-tag {
        transform: none;
    }

    .story__copy h2 {
        font-size: clamp(40px, 8vw, 54px);
        margin-bottom: 24px;
    }

    .story__body {
        font-size: 18px;
        line-height: 1.42;
    }

    .story__visual {
        min-height: 390px;
    }

    .ecosystem {
        border-radius: 18px;
    }

    .ecosystem__brand-symbol {
        padding-top: 48px;
    }

    .ecosystem__brand-symbol::before,
    .ecosystem__brand-symbol::after {
        width: 64px;
    }

    .ecosystem > h2 {
        padding-inline: 22px;
        font-size: clamp(36px, 8vw, 48px);
    }

    .ecosystem > .gex-button {
        margin-bottom: 46px;
    }

    .ecosystem__blue {
        padding: 44px 20px 38px;
    }

    .ecosystem__blue h3 {
        margin-bottom: 34px;
        font-size: clamp(32px, 7vw, 42px);
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .process-grid article {
        min-height: 0;
        padding: 24px;
    }

    .process-grid p {
        max-width: 100%;
    }

    .process-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .companies {
        padding: 60px 0 82px;
    }

    .companies h2 {
        font-size: clamp(38px, 8vw, 50px);
        line-height: 1.08;
    }

    .companies__lead {
        margin-bottom: 36px;
        font-size: 17px;
    }

    .company-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px;
    }

    .company-row strong {
        font-size: 20px;
    }

    .company-row span {
        font-size: 15px;
        line-height: 1.4;
    }

    .solutions-showcase__grid {
        grid-template-columns: 1fr;
    }

    .exec-service-card,
    .exec-service-card--custom {
        grid-column: auto;
        min-height: 0;
        grid-template-rows: auto minmax(220px, 42vw);
    }

    .exec-service-card__info,
    .exec-service-card--custom .exec-service-card__info {
        min-height: 0;
        padding: 28px;
    }

    .exec-service-card__image-slot,
    .exec-service-card__image-slot--wide,
    .exec-service-card--custom .exec-service-card__image-slot {
        min-height: 220px;
    }

    /* Portfolio: no tablet mantém composição, mas compacta */
    .portfolio-intro__diagram {
        max-width: 720px;
        margin-inline: auto;
        transform: scale(.92);
        transform-origin: top center;
    }

    .contact__glow {
        width: 650px;
        right: -250px;
        opacity: .7;
    }

    .site-footer {
        padding-top: 40px;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-footer__brand-block {
        flex-direction: column;
        gap: 18px;
    }

    .site-footer__copy {
        padding-left: 0;
        border-left: 0;
    }

    .site-footer__nav {
        justify-content: center;
        flex-wrap: wrap;
        gap: 18px 26px;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 78px;
    }

    .container,
    .container--wide {
        width: calc(100% - 28px);
    }

    .site-header {
        inset: 10px 0 auto;
    }

    .brand.brand--grupo-executa {
        width: 138px !important;
    }

    .mobile-menu {
        left: 14px;
        right: 14px;
        top: 60px;
    }

    .hero {
        padding: 106px 0 62px;
    }

    .hero::before {
        background-size: 28px 28px;
    }

    .section-tag {
        min-height: 34px;
        padding-right: 14px;
        gap: 10px;
        font-size: 13px;
    }

    .section-tag__icon {
        width: 36px;
        height: 23px;
    }

    .hero__title h1 {
        font-size: clamp(38px, 10.8vw, 52px);
        line-height: 1.06;
    }

    .hero__title p {
        max-width: 560px;
        font-size: 17px;
        line-height: 1.42;
    }

    .hero-contact-float {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        padding: 11px;
        gap: 10px;
        border-radius: 15px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .hero-contact-float__brand {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .hero-contact-float__copy {
        min-width: 0;
        flex: 1 1 auto;
    }

    .hero-contact-float__copy strong,
    .hero-contact-float__copy > span {
        font-size: 8px;
    }

    .hero-contact-float__action {
        min-height: 38px;
        padding-inline: 14px;
        flex: 0 0 auto;
    }

    .hero__horizon {
        display: none;
    }

    .story__copy h2 br {
        display: none;
    }

    .story__visual {
        min-height: 320px;
    }

    .story__visual img {
        width: min(520px, 112%);
        max-width: 112%;
        margin-left: -6%;
    }

    .ecosystem-wrap {
        padding: 10px 0 62px;
    }

    .ecosystem__brand-symbol img {
        width: 36px;
        height: 36px;
    }

    .ecosystem__brand-symbol::before,
    .ecosystem__brand-symbol::after {
        width: 50px;
    }

    .ecosystem > h2 {
        font-size: clamp(32px, 9vw, 43px);
        line-height: 1.08;
    }

    .ecosystem__blue h3 {
        font-size: clamp(29px, 8vw, 38px);
    }

    .process-card__head {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .process-card__number {
        flex: 0 0 auto;
    }

    .process-grid h4 {
        margin-left: 0;
        font-size: 19px;
    }

    .process-grid p {
        font-size: 15px;
        line-height: 1.4;
    }

    .process-cta {
        padding: 22px;
    }

    .process-cta strong {
        font-size: 20px;
        line-height: 1.25;
    }

    .companies .section-tag {
        transform: none;
    }

    .solutions-showcase {
        padding: 68px 0 72px;
    }

    .solutions-showcase__head {
        gap: 22px;
        margin-bottom: 34px;
    }

    .solutions-showcase__head h2 {
        font-size: clamp(38px, 10vw, 48px);
    }

    .solutions-showcase__intro p,
    .solutions-showcase__intro strong {
        font-size: 16px;
        line-height: 1.4;
    }

    .solutions-showcase__intro p {
        margin-bottom: 20px;
    }

    .exec-service-card {
        border-radius: 18px;
    }

    .exec-service-card__info,
    .exec-service-card--custom .exec-service-card__info {
        padding: 24px;
    }

    .exec-service-card__marker {
        margin-bottom: 22px;
    }

    .exec-service-card__copy h3,
    .exec-service-card--custom .exec-service-card__copy h3 {
        margin-bottom: 16px;
        font-size: clamp(24px, 7vw, 29px);
    }

    .exec-service-card__copy p,
    .exec-service-card--custom .exec-service-card__copy p {
        max-width: none;
        font-size: 15px;
        line-height: 1.42;
    }

    .exec-service-card__image-slot,
    .exec-service-card__image-slot--wide,
    .exec-service-card--custom .exec-service-card__image-slot {
        min-height: 210px;
    }

    .portfolio-intro {
        padding: 58px 0 64px;
    }

    .portfolio-intro__tag {
        margin-bottom: 24px;
    }

    .portfolio-intro__title {
        max-width: 100%;
        font-size: clamp(34px, 9vw, 44px);
        line-height: 1.08;
    }

    /* Portfolio: empilha em mobile para não cortar textos/conectores */
    .portfolio-intro__diagram {
        position: relative;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 20px;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 36px;
        transform: none !important;
    }

    .portfolio-intro__connector {
        display: none !important;
    }

    .portfolio-intro__copy,
    .portfolio-intro__mark {
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        height: auto;
        transform: none !important;
        margin: 0 !important;
    }

    .portfolio-intro__copy {
        max-width: 420px;
        justify-self: center;
        text-align: center;
        font-size: 14px;
        line-height: 1.45;
    }

    .portfolio-intro__copy--left {
        order: 1;
    }

    .portfolio-intro__mark {
        order: 2;
        justify-self: center;
        display: grid;
        place-items: center;
        width: 72px !important;
        height: 54px !important;
    }

    .portfolio-intro__mark-inner {
        width: 72px !important;
        height: 54px !important;
        display: grid;
        place-items: center;
    }

    .portfolio-intro__mark-inner img {
        width: 72px !important;
        height: 54px !important;
        object-fit: contain;
    }

    .portfolio-intro__copy--right {
        order: 3;
    }

    .manifesto {
        padding: 16px 0 72px;
    }

    .manifesto__box {
        padding: 34px 26px;
        border-radius: 16px;
    }

    .manifesto h2 {
        font-size: clamp(30px, 8.5vw, 38px);
    }

    .manifesto p {
        font-size: 16px;
        line-height: 1.5;
    }

    .contact {
        padding: 70px 0 100px;
    }

    .contact__title {
        font-size: clamp(44px, 12vw, 58px);
        margin-bottom: 34px;
    }

    .whatsapp-card {
        padding: 30px 24px;
    }

    .whatsapp-card__icon {
        margin-bottom: 28px;
    }

    .whatsapp-card h3,
    .contact-form-card h3 {
        font-size: 27px;
    }

    .whatsapp-card p,
    .contact-form-card p {
        font-size: 16px;
    }

    .whatsapp-card .gex-button {
        width: 100%;
        margin-top: 28px;
    }

    .contact-form-card {
        padding: 32px 22px 34px;
    }

    .contact-form-card form {
        margin-top: 26px;
        gap: 10px;
    }

    .contact-form-card input,
    .contact-form-card textarea {
        min-height: 48px;
        padding: 13px 16px;
        font-size: 16px; /* evita zoom automático no iOS */
    }

    .contact-form-card textarea {
        min-height: 128px;
    }

    .site-footer {
        padding: 38px 0 82px;
    }

    .brand--footer .brand__horizontal-logo {
        width: 160px;
    }

    .site-footer__copy p,
    .site-footer__copy span {
        font-size: 12px;
        line-height: 1.45;
    }

    .site-footer__nav {
        width: 100%;
        gap: 14px 22px;
    }

    .site-footer__nav a {
        font-size: 13px;
    }

    .site-footer__developer {
        height: 42px;
        padding-inline: 14px;
        font-size: 9px;
    }

    .site-footer__developer::before {
        width: min(280px, calc(100% - 44px));
    }
}

/* ---------- MOBILE COMPACTO ---------- */
@media (max-width: 480px) {
    .container,
    .container--wide {
        width: calc(100% - 22px);
    }

    .brand.brand--grupo-executa {
        width: 124px !important;
    }

    .menu-button {
        width: 42px;
        height: 42px;
    }

    .hero {
        padding-top: 98px;
        padding-bottom: 54px;
    }

    .hero__title h1 {
        font-size: clamp(35px, 11.5vw, 46px);
    }

    .hero__title p {
        font-size: 16px;
    }

    .hero-contact-float {
        display: grid !important;
        grid-template-columns: 36px 1fr;
        gap: 8px 10px;
    }

    .hero-contact-float__brand {
        grid-row: 1;
        grid-column: 1;
    }

    .hero-contact-float__copy {
        grid-row: 1;
        grid-column: 2;
    }

    .hero-contact-float__action {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 2px;
    }

    .story__copy h2 {
        font-size: 38px;
    }

    .story__visual {
        min-height: 270px;
    }

    .ecosystem__brand-symbol::before,
    .ecosystem__brand-symbol::after {
        width: 36px;
    }

    .ecosystem > h2 {
        padding-inline: 16px;
    }

    .ecosystem__blue {
        padding-inline: 14px;
    }

    .process-grid article {
        padding: 20px;
    }

    .solutions-showcase__head h2 {
        font-size: 38px;
    }

    .exec-service-card__info,
    .exec-service-card--custom .exec-service-card__info {
        padding: 22px 20px 24px;
    }

    .exec-service-card__image-slot,
    .exec-service-card__image-slot--wide,
    .exec-service-card--custom .exec-service-card__image-slot {
        min-height: 190px;
    }

    .portfolio-intro__title {
        font-size: 34px;
    }

    .manifesto__box {
        padding: 30px 22px;
    }

    .contact-form-card {
        padding: 28px 18px 30px;
    }

    .site-footer__nav {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
    }

    .site-footer__developer {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }
}

/* ---------- ACESSIBILIDADE / MOVIMENTO ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   REVISÃO 53 — AJUSTES FINOS MOBILE / RESPONSIVO
   1. Portfólio no mobile: remove o ícone central grande
   2. Centraliza badges "SOBRE O GRUPO" e "PORTFÓLIO"
   3. Story mobile: evita texto por cima da imagem
   4. Menu mobile vira drawer lateral
   ========================================================= */

/* Base do menu lateral */
body.mobile-menu-open {
    overflow: hidden;
}

@media (max-width: 1050px) {
    .site-header {
        z-index: 120;
    }

    .menu-button {
        position: relative;
        z-index: 140;
    }

    .menu-button.is-open span:first-child {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-button.is-open span:last-child {
        transform: translateY(-6px) rotate(-45deg);
    }

    .menu-button span {
        transition: transform .22s ease, opacity .22s ease;
    }

    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        width: min(320px, calc(100vw - 34px));
        height: 100vh;
        padding: 86px 16px 24px !important;
        display: flex !important;
        gap: 10px !important;
        background: rgba(7,7,7,.98) !important;
        border-left: 1px solid rgba(255,255,255,.08) !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-radius: 18px 0 0 18px !important;
        backdrop-filter: blur(18px);
        box-shadow: -24px 0 60px rgba(0,0,0,.48);
        transform: translateX(108%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .26s ease, opacity .22s ease, visibility .22s ease;
        z-index: 130;
        overflow-y: auto;
    }

    .mobile-menu::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.46);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
        z-index: -1;
    }

    .mobile-menu.is-open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-menu.is-open::before {
        opacity: 1;
    }

    .mobile-menu a {
        min-height: 50px;
        padding: 14px 16px !important;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 12px;
        background: rgba(255,255,255,.01);
        font-size: 15px;
        letter-spacing: 0;
    }
}

/* TABLET / MOBILE */
@media (max-width: 820px) {
    .story__copy .section-tag,
    .portfolio-intro__tag {
        display: inline-flex;
        margin-inline: auto;
    }

    .story__copy {
        text-align: left;
    }

    .story__copy .section-tag {
        transform: none !important;
        transform-origin: center;
        margin-bottom: 22px;
    }

    .portfolio-intro__inner {
        text-align: center;
    }

    .portfolio-intro__tag {
        margin: 0 auto 24px;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    /* 1) SOBRE O GRUPO */
    .story__copy {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .story__copy h2,
    .story__body {
        width: 100%;
        max-width: 100%;
    }

    .story__copy h2 {
        text-align: left;
    }

    .story__body {
        font-size: 16px !important;
        line-height: 1.52 !important;
    }

    .story__body p {
        margin-bottom: 18px;
    }

    .story__visual {
        min-height: 0 !important;
        margin-top: 8px;
        padding-top: 8px;
        overflow: hidden;
        display: grid;
        place-items: center;
    }

    .story__ring {
        display: none !important;
    }

    .story__laptop,
    .story__visual img.story__laptop {
        width: min(100%, 360px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        filter: drop-shadow(0 18px 28px rgba(0,0,0,.42));
    }

    /* 2) PORTFÓLIO */
    .portfolio-intro__tag {
        display: inline-flex;
        margin-inline: auto;
    }

    .portfolio-intro__diagram {
        margin-top: 26px;
        gap: 14px;
    }

    .portfolio-intro__mark {
        display: none !important; /* retira o ícone central no mobile */
    }

    .portfolio-intro__copy {
        max-width: 320px;
        font-size: 13px;
        line-height: 1.5;
    }
}

/* MOBILE COMPACTO */
@media (max-width: 480px) {
    .mobile-menu {
        width: min(300px, calc(100vw - 18px));
        padding-top: 78px !important;
    }

    .story__copy .section-tag,
    .portfolio-intro__tag {
        transform: scale(.96);
    }

    .portfolio-intro__copy {
        font-size: 12px;
    }
}


/* =========================================================
   REVISÃO 54 — MENU DO RODAPÉ IGUAL AO MENU DO TOPO
   - mesmo estado normal
   - mesmo hover azul + underline
   - mesmo estado ativo/clicado
   - acompanha a mesma seção selecionada no topo
   ========================================================= */

.site-footer__nav a {
    position: relative;
    color: #bebebe !important;
    transition: color .18s ease;
}

.site-footer__nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -8px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
    opacity: 0;
    transition: left .18s ease, right .18s ease, opacity .18s ease;
}

/* Hover igual ao topo */
.site-footer__nav a:hover {
    color: var(--blue) !important;
}

.site-footer__nav a:hover::after {
    left: 0;
    right: 0;
    opacity: 1;
}

/* Ativo/clicado igual ao topo */
.site-footer__nav a.active,
.site-footer__nav a[aria-current="page"] {
    color: var(--blue) !important;
}

.site-footer__nav a.active::after,
.site-footer__nav a[aria-current="page"]::after {
    left: 0;
    right: 0;
    opacity: 1;
}

/* Demais links permanecem neutros */
.site-footer__nav a:not(.active):not([aria-current="page"]):not(:hover) {
    color: #bebebe !important;
}

.site-footer__nav a:not(.active):not([aria-current="page"]):not(:hover)::after {
    left: 50%;
    right: 50%;
    opacity: 0;
}

@media (max-width: 768px) {
    .site-footer__nav a::after {
        bottom: -5px;
    }
}


/* =========================================================
   REVISÃO 55 — SCROLLSPY
   A aparência não muda. O estado ativo dos menus do topo,
   mobile e rodapé agora acompanha a seção visível na rolagem.
   ========================================================= */


/* =========================================================
   REVISÃO 56 — MOBILE
   - menu mobile com <details> nativo: abertura garantida
   - drawer lateral preservado
   - imagem/computador da seção "Sobre o Grupo" ocultado 100%
     no mobile para eliminar qualquer sobreposição ou sobra
   ========================================================= */

.mobile-nav {
    display: none;
    margin-left: auto;
}

.mobile-nav > summary {
    list-style: none;
}

.mobile-nav > summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 1050px) {
    /* Remove o comportamento antigo do botão solto. */
    .site-header__inner > .menu-button {
        display: none !important;
    }

    .mobile-nav {
        display: block;
        margin-left: auto;
    }

    .mobile-nav .menu-button {
        display: block !important;
        position: relative;
        z-index: 10020;
        margin-left: auto;
        cursor: pointer;
    }

    /* Drawer fechado */
    .mobile-nav .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: min(320px, calc(100vw - 34px)) !important;
        height: 100dvh !important;
        padding: 88px 16px 28px !important;
        display: flex !important;
        flex-direction: column;
        gap: 10px !important;
        background: rgba(7,7,7,.985) !important;
        border: 0 !important;
        border-left: 1px solid rgba(255,255,255,.09) !important;
        border-radius: 18px 0 0 18px !important;
        box-shadow: -28px 0 70px rgba(0,0,0,.58) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transform: translateX(110%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition:
            transform .28s ease,
            opacity .2s ease,
            visibility .2s ease !important;
        z-index: 10010 !important;
        overflow-y: auto;
    }

    /* Drawer aberto via atributo nativo open */
    .mobile-nav[open] .mobile-menu {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* X no botão quando aberto */
    .mobile-nav[open] .menu-button span:first-child {
        transform: translateY(6px) rotate(45deg);
    }

    .mobile-nav[open] .menu-button span:last-child {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Overlay fora do drawer */
    body.mobile-menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0,0,0,.58);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    /* Permite que o drawer fixo não seja cortado pelo container geral. */
    .site-shell {
        overflow: visible !important;
    }

    body {
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    /*
     * Retira completamente o computador/imagem no mobile.
     * Não fica altura reservada, sombra, anel ou pedaço da imagem.
     */
    .story__visual {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .story__visual *,
    .story__ring,
    .story__laptop,
    .story__visual-glow {
        display: none !important;
    }

    .story__grid {
        display: block !important;
    }

    .story__copy {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .mobile-nav .mobile-menu {
        width: min(300px, calc(100vw - 18px)) !important;
        padding-top: 80px !important;
    }
}


/* =========================================================
   REVISÃO 57 — MENU MOBILE TELA CHEIA
   - cobre 100% da tela
   - links visíveis e mais legíveis
   - símbolo da empresa no topo do menu
   - assinatura da marca no rodapé do menu
   ========================================================= */

@media (max-width: 1050px) {
    .mobile-nav {
        position: static;
    }

    .mobile-nav .menu-button {
        position: relative;
        z-index: 10030;
    }

    .mobile-nav[open] .menu-button {
        position: fixed !important;
        top: 16px;
        right: 14px;
        margin: 0;
        z-index: 10040 !important;
        background: rgba(15, 15, 15, .92);
        border-color: rgba(255,255,255,.12);
        box-shadow: 0 8px 26px rgba(0,0,0,.35);
    }

    .mobile-nav .mobile-menu {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        padding: 88px 18px 24px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background:
            linear-gradient(180deg, rgba(10,10,10,.985), rgba(5,5,5,.995)),
            #050505 !important;
        box-shadow: none !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: 26px !important;
        overflow-y: auto;
    }

    .mobile-menu__top-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 68px;
        padding-top: 6px;
    }

    .mobile-menu__top-brand img {
        width: 58px;
        height: 58px;
        object-fit: contain;
        filter: drop-shadow(0 0 18px rgba(44,150,243,.14));
    }

    .mobile-menu__links {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: min(100%, 420px);
        margin: 0 auto;
        flex: 1 1 auto;
        justify-content: center;
    }

    .mobile-menu a {
        min-height: 58px;
        padding: 16px 18px !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 14px;
        background: rgba(255,255,255,.03) !important;
        color: rgba(255,255,255,.86) !important;
        font-size: 17px !important;
        line-height: 1.2;
        font-weight: 500;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    }

    .mobile-menu a:hover,
    .mobile-menu a.active,
    .mobile-menu a[aria-current="page"] {
        background: rgba(44,150,243,.08) !important;
        border-color: rgba(44,150,243,.45) !important;
        color: var(--blue) !important;
    }

    .mobile-menu a::after {
        left: 18px !important;
        right: 18px !important;
        bottom: 10px !important;
    }

    .mobile-menu__bottom-brand {
        width: min(100%, 420px);
        margin: 0 auto;
        padding-top: 18px;
        border-top: 1px solid rgba(255,255,255,.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        color: rgba(255,255,255,.78);
        font-size: 11px;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .mobile-menu__bottom-brand img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    /* tela cheia, sem sombra externa */
    body.mobile-menu-open::before {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .mobile-nav[open] .menu-button {
        top: 14px;
        right: 12px;
    }

    .mobile-nav .mobile-menu {
        padding: 82px 14px 22px !important;
    }

    .mobile-menu__top-brand img {
        width: 52px;
        height: 52px;
    }

    .mobile-menu__links {
        width: 100%;
    }

    .mobile-menu a {
        min-height: 56px;
        font-size: 16px !important;
        padding-inline: 16px !important;
    }

    .mobile-menu__bottom-brand {
        width: 100%;
        font-size: 10px;
        letter-spacing: .16em;
    }
}


/* =========================================================
   REVISÃO 58 — MENU MOBILE REALMENTE TELA CHEIA + IMAGENS
   - remove símbolo do topo do menu
   - mantém marca somente no rodapé do menu
   - menu cobre 100% da viewport, sem mostrar a página por baixo
   - corrige max-height antigo que limitava o drawer
   ========================================================= */

@media (max-width: 1050px) {
    .mobile-nav .mobile-menu {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        max-width: none !important;

        height: 100vh !important;
        min-height: 100vh !important;
        max-height: none !important;

        height: 100svh !important;
        min-height: 100svh !important;

        height: 100dvh !important;
        min-height: 100dvh !important;

        padding:
            max(86px, env(safe-area-inset-top))
            18px
            max(24px, env(safe-area-inset-bottom))
            !important;

        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;

        background: #050505 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;

        transform: translateX(100%) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;

        z-index: 10010 !important;
        isolation: isolate;

        transition:
            transform .28s ease,
            opacity .18s ease,
            visibility .18s ease !important;
    }

    .mobile-nav[open] .mobile-menu {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-menu__top-brand {
        display: none !important;
    }

    .mobile-menu__links {
        width: min(100%, 440px);
        margin: auto;
        flex: 0 0 auto;
        justify-content: center;
        gap: 12px;
    }

    .mobile-menu__bottom-brand {
        width: min(100%, 440px);
        margin: 28px auto 0;
        padding:
            20px
            0
            max(8px, env(safe-area-inset-bottom));
        flex: 0 0 auto;
    }

    body.mobile-menu-open {
        overflow: hidden !important;
        height: 100dvh;
        touch-action: none;
    }

    body.mobile-menu-open::before {
        display: none !important;
        content: none !important;
    }

    /* O botão fechar permanece acima do painel */
    .mobile-nav[open] .menu-button {
        position: fixed !important;
        top: max(14px, env(safe-area-inset-top));
        right: 14px;
        z-index: 10030 !important;
    }
}

/* As imagens dos cards ocupam integralmente o espaço reservado. */
.exec-service-card__image-slot img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
    object-position: center;
}

.exec-service-card--management .exec-service-card__image-slot img {
    object-position: center center;
}

.exec-service-card--tech .exec-service-card__image-slot img {
    object-position: center center;
}

.exec-service-card--creative .exec-service-card__image-slot img {
    object-position: center center;
}

.exec-service-card--training .exec-service-card__image-slot img {
    object-position: center center;
}

@media (max-width: 768px) {
    .exec-service-card__image-slot img {
        min-height: 210px;
    }
}

@media (max-width: 480px) {
    .mobile-nav .mobile-menu {
        padding:
            max(78px, env(safe-area-inset-top))
            14px
            max(18px, env(safe-area-inset-bottom))
            !important;
    }

    .mobile-menu__links,
    .mobile-menu__bottom-brand {
        width: 100%;
    }

    .exec-service-card__image-slot img {
        min-height: 190px;
    }
}


/* =========================================================
   REVISÃO 59 — AJUSTE DO BOTÃO ABRIR/FECHAR MENU
   - corrige deformação do botão
   - deixa o botão perfeitamente circular
   - ícone hamburger e X centralizados
   ========================================================= */

@media (max-width: 1050px) {
    .mobile-nav {
        position: relative;
        display: block;
        margin-left: auto;
    }

    .mobile-nav > summary.menu-button,
    .mobile-nav .menu-button {
        -webkit-appearance: none;
        appearance: none;
        list-style: none;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 0 0 auto !important;
        border-radius: 50% !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        background: rgba(12,12,12,.94) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.24);
        cursor: pointer;
        overflow: hidden;
        line-height: 1;
    }

    .mobile-nav > summary.menu-button::-webkit-details-marker,
    .mobile-nav > summary.menu-button::marker {
        display: none;
        content: "";
    }

    .mobile-nav .menu-button span {
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        width: 14px !important;
        height: 1.6px !important;
        margin: 0 !important;
        border-radius: 999px;
        background: rgba(255,255,255,.92) !important;
        transform-origin: center;
        transition: transform .2s ease, opacity .2s ease, background .2s ease;
    }

    .mobile-nav .menu-button span:first-child {
        transform: translate(-50%, calc(-50% - 4px));
    }

    .mobile-nav .menu-button span:last-child {
        transform: translate(-50%, calc(-50% + 4px));
    }

    .mobile-nav[open] .menu-button span:first-child {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    .mobile-nav[open] .menu-button span:last-child {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    .mobile-nav[open] .menu-button {
        position: fixed !important;
        top: max(14px, env(safe-area-inset-top)) !important;
        right: 14px !important;
        margin: 0 !important;
        background: rgba(12,12,12,.96) !important;
        border-color: rgba(255,255,255,.12) !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
        z-index: 10030 !important;
    }
}

@media (max-width: 480px) {
    .mobile-nav > summary.menu-button,
    .mobile-nav .menu-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .mobile-nav .menu-button span {
        width: 13px !important;
    }

    .mobile-nav[open] .menu-button {
        top: max(12px, env(safe-area-inset-top)) !important;
        right: 12px !important;
    }
}


/* =========================================================
   REVISÃO 60 — PORTFÓLIO + PROJETO PERSONALIZADO + CONTATO
   ========================================================= */

/* Textos laterais do portfólio um pouco maiores. */
.portfolio-intro__copy {
    font-size: 14px !important;
    line-height: 1.48 !important;
}

/* E-mail oficial exibido no card do formulário. */
.contact-form-card__email {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    color: var(--blue);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    border-bottom: 1px solid rgba(44,150,243,.35);
    transition: color .18s ease, border-color .18s ease;
}

.contact-form-card__email:hover {
    color: #8ccfff;
    border-color: #8ccfff;
}

/* Imagem exclusiva de Projetos Personalizados. */
.exec-service-card--custom .exec-service-card__image-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 768px) {
    .portfolio-intro__copy {
        font-size: 14px !important;
        line-height: 1.52 !important;
    }
}

@media (max-width: 480px) {
    .portfolio-intro__copy {
        font-size: 13px !important;
    }

    .contact-form-card__email {
        font-size: 13px;
    }
}


/* =========================================================
   REVISÃO 61 — FORMULÁRIO
   O e-mail de destino foi removido da interface pública.
   O endereço agora existe somente no backend/configuração.
   ========================================================= */


/* =========================================================
   REVISÃO 62 — CONTATO SEM IMAGEM/ARCO DE FUNDO
   ========================================================= */

.contact {
    background: #050505 !important;
}

.contact__glow {
    display: none !important;
}


/* =========================================================
   REVISÃO 63 — REMOVE E-MAIL VISÍVEL DO FORMULÁRIO
   O endereço permanece somente no backend como destino do envio.
   ========================================================= */

.contact-form-card__email {
    display: none !important;
}