: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; }
}