:root {
--bg:           #F7F8FC;
--bg-2:         #E8ECF6;
--ink:          #040825;
--ink-2:        #151B38;
--muted:        #626775;
--line:         rgba(4, 8, 37, 0.10);
--line-hi:      rgba(4, 8, 37, 0.18);

--blue:         #0b2bd1;
--blue-soft:    #DCE4FF;
--green:        #00d255;
--green-soft:   #E4F9EC;
--green-ink:    #022D17;
--red:          #ff004e;
--red-soft:     #FFE0EA;
--yellow:       #ffdc82;
--yellow-soft:  #FFF3D4;
--sand:         #ebecde;
--sand-soft:    #F8F8EF;
--f-display: 'Fraunces', Georgia, serif;
--f-mono:    'IBM Plex Mono', 'Courier New', monospace;
--f-body:    'DM Sans', system-ui, sans-serif;
--r-sm: 10px;
--r-md: 18px;
--r-lg: 28px;
--r-xl: 40px;
--r-pill: 999px;
--shadow-sm: 0 2px 8px -2px rgba(4, 8, 37, 0.08);
--shadow-md: 0 20px 50px -20px rgba(4, 8, 37, 0.18);
--shadow-lg: 0 40px 90px -30px rgba(4, 8, 37, 0.25);

--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--f-body);
font-size: 17px;
line-height: 1.6;
overflow-x: hidden;
position: relative;
}

body::before,
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}

body::before {
background-image:
linear-gradient(rgba(4, 8, 37, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(4, 8, 37, 0.045) 1px, transparent 1px),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
background-size: 54px 54px, 54px 54px, 220px 220px;
mix-blend-mode: multiply;
opacity: 0.46;
}

body::after {
display: none;
}

.f-display { font-family: var(--f-display); font-optical-sizing: auto; }
.f-mono    { font-family: var(--f-mono); }

.label {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}

.pill-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
padding: 8px 16px;
border-radius: var(--r-pill);
}
.pill-label::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 0 3px rgba(11, 43, 209, 0.15);
}
.pill-label.variant-green::before { background: var(--green); box-shadow: 0 0 0 3px rgba(0, 210, 85, 0.2); }
.pill-label.variant-red::before   { background: var(--red); box-shadow: 0 0 0 3px rgba(255, 0, 78, 0.16); }

.wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
}

.site-header {
position: sticky;
top: 20px;
z-index: 100;
padding: 0 28px;
}

.header-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 14px 0 24px;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid var(--line);
border-radius: var(--r-pill);
box-shadow: var(--shadow-sm);
}

.header-logo {
display: flex;
align-items: center;
text-decoration: none;
color: var(--ink);
min-width: 90px;
}
.brand-logo {
display: block;
width: 96px;
height: auto;
}

.header-nav {
display: flex;
align-items: center;
gap: 6px;
}
.header-nav a {
font-family: var(--f-body);
font-size: 14px;
font-weight: 500;
color: var(--ink-2);
text-decoration: none;
padding: 9px 16px;
border-radius: var(--r-pill);
transition: background 0.18s, color 0.18s;
}
.header-nav a:hover { background: var(--bg-2); color: var(--ink); }

.header-controls {
display: flex;
align-items: center;
gap: 10px;
}

.lang-switch {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 7px 5px 5px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 236, 246, 0.92) 100%);
border: 1px solid var(--line);
border-radius: var(--r-pill);
box-shadow:
var(--shadow-sm),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
position: relative;
}

.lang-switch::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(120deg, rgba(11, 43, 209, 0.08), rgba(0, 210, 85, 0.12));
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
padding: 1px;
mask-composite: exclude;
-webkit-mask-composite: xor;
}

.lang-switch-icon {
width: 30px;
height: 30px;
border-radius: 50%;
flex: 0 0 auto;
background:
radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.9) 0 18%, transparent 19%),
radial-gradient(circle at 68% 70%, rgba(0, 210, 85, 0.9) 0 18%, transparent 19%),
linear-gradient(135deg, var(--blue) 0%, #2848e2 60%, #6b7cf0 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
0 8px 16px -10px rgba(11, 43, 209, 0.75);
position: relative;
}

.lang-switch-icon::before,
.lang-switch-icon::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.9);
border-radius: 999px;
}

.lang-switch-icon::before {
width: 14px;
height: 2px;
left: 8px;
top: 14px;
}

.lang-switch-icon::after {
width: 2px;
height: 14px;
left: 14px;
top: 8px;
}

.lang-switch-track {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px;
border-radius: var(--r-pill);
background: rgba(4, 8, 37, 0.05);
}

.lang-btn {
border: none;
background: transparent;
color: var(--muted);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
min-width: 46px;
padding: 8px 12px;
border-radius: var(--r-pill);
cursor: pointer;
position: relative;
transition: background 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.lang-btn:hover {
background: rgba(255, 255, 255, 0.78);
color: var(--ink);
transform: translateY(-1px);
}

.lang-btn.is-active {
background: #fff;
color: var(--ink);
box-shadow:
0 10px 22px -16px rgba(4, 8, 37, 0.75),
inset 0 0 0 1px rgba(4, 8, 37, 0.06);
}

.lang-btn.is-active[data-lang="pt-BR"] {
color: var(--blue);
}

.lang-btn.is-active[data-lang="en"] {
color: var(--green);
}

.header-cta {
font-family: var(--f-body);
font-size: 13px;
font-weight: 600;
color: #fff;
text-decoration: none;
background: var(--ink);
padding: 12px 22px;
border-radius: var(--r-pill);
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 0.18s, background 0.18s;
}
.header-cta:hover { background: var(--blue); transform: translateY(-1px); }
.header-cta svg { width: 14px; height: 14px; }

.menu-toggle {
display: none;
background: var(--ink);
border: none;
color: #fff;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
align-items: center;
justify-content: center;
}

.mobile-nav {
display: none;
margin: 12px auto 0;
max-width: 1200px;
padding: 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
display: block;
padding: 14px 18px;
font-size: 15px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
border-radius: var(--r-md);
transition: background 0.18s;
}
.mobile-nav a:hover { background: var(--bg-2); }
.mobile-nav .nav-cta {
margin-top: 6px;
background: var(--ink);
color: #fff;
text-align: center;
}

.hero {
position: relative;
z-index: 1;
padding: 80px 28px 100px;
max-width: 1200px;
margin: 0 auto;
}

.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: center;
}

.hero-copy { position: relative; z-index: 2; }

.hero-headline {
font-family: var(--f-display);
font-optical-sizing: auto;
font-size: clamp(3rem, 6.8vw, 6.2rem);
font-weight: 800;
line-height: 0.95;
letter-spacing: 0;
color: var(--ink);
margin: 28px 0 32px;
}
.hero-headline.is-typewriter {
min-height: 2.85em;
}
.hero-headline .italic {
font-style: italic;
font-weight: 400;
color: var(--blue);
}
.hero-headline .underline-accent {
position: relative;
display: inline-block;
}
.hero-headline .underline-accent::after {
content: '';
position: absolute;
left: -4%;
right: -4%;
bottom: 6%;
height: 28%;
background: var(--green);
z-index: -1;
border-radius: 999px;
transform: skew(-6deg, -1deg);
}
.typewriter-caret {
display: inline-block;
width: 0.08em;
height: 0.74em;
margin-left: 0.06em;
background: var(--red);
border-radius: 999px;
transform: translateY(0.08em);
animation: caret-blink 0.88s steps(2, start) infinite;
}
@keyframes caret-blink {
0%, 42% { opacity: 1; }
43%, 100% { opacity: 0; }
}

.hero-body {
max-width: 480px;
color: var(--muted);
font-size: 18px;
line-height: 1.7;
margin-bottom: 40px;
}
.hero-body strong { color: var(--ink); font-weight: 600; }

.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 44px;
}

.hero-focus {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.hero-focus .label {
padding-right: 22px;
border-right: 1px solid var(--line);
}
.hero-focus-items {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.focus-chip {
font-family: var(--f-mono);
font-weight: 500;
font-size: 10px;
color: var(--ink-2);
letter-spacing: 0.06em;
text-transform: uppercase;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 8px 12px;
}

.btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-body);
font-size: 14px;
font-weight: 600;
text-decoration: none;
padding: 16px 26px;
border-radius: var(--r-pill);
cursor: pointer;
transition: transform 0.2s var(--ease-out), background 0.2s, box-shadow 0.2s;
border: 1px solid transparent;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary {
background: var(--ink);
color: #fff;
box-shadow: 0 14px 30px -10px rgba(4, 8, 37, 0.4);
}
.btn-primary:hover {
background: var(--blue);
transform: translateY(-2px);
box-shadow: 0 18px 40px -10px rgba(11, 43, 209, 0.55);
}
.btn-outline {
background: #fff;
color: var(--ink);
border-color: var(--line);
}
.btn-outline:hover { background: var(--green); border-color: var(--green); transform: translateY(-2px); }

.hero-visual {
position: relative;
width: 100%;
aspect-ratio: 1 / 1.02;
max-width: 560px;
margin-left: auto;
justify-self: end;
overflow: visible;
}
.hero-visual::before,
.hero-visual::after {
content: '';
position: absolute;
pointer-events: none;
z-index: 0;
will-change: transform;
}
.hero-visual::before {
inset: 8% 2% 11% 4%;
border-radius: 28px;
background:
linear-gradient(135deg, rgba(11, 43, 209, 0.16), rgba(255, 255, 255, 0.36) 44%, rgba(0, 210, 85, 0.26)),
repeating-linear-gradient(90deg, rgba(4, 8, 37, 0.06) 0 1px, transparent 1px 22px);
border: 1px solid rgba(4, 8, 37, 0.08);
transform: translate3d(0, var(--hero-layer-back-y, 0px), 0) rotate(-5deg);
}
.hero-visual::after {
inset: 16% 9% 8% 14%;
border-radius: 22px;
background:
linear-gradient(145deg, rgba(0, 210, 85, 0.12), rgba(255, 255, 255, 0.18) 40%, rgba(11, 43, 209, 0.12)),
repeating-linear-gradient(0deg, rgba(4, 8, 37, 0.06) 0 1px, transparent 1px 24px);
transform: translate3d(0, var(--hero-layer-mid-y, 0px), 0) rotate(6deg);
opacity: 0.84;
}

.visual-main {
position: absolute;
inset: 2% -2% 3% -1%;
overflow: visible;
display: grid;
place-items: center;
z-index: 2;
}
.visual-main::before {
content: '';
position: absolute;
inset: 11% 3% 13% 4%;
border: 1px solid rgba(4, 8, 37, 0.12);
border-radius: 26px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(221, 227, 255, 0.72) 48%, rgba(0, 210, 85, 0.24)),
repeating-linear-gradient(90deg, rgba(4, 8, 37, 0.045) 0 1px, transparent 1px 26px),
repeating-linear-gradient(0deg, rgba(4, 8, 37, 0.035) 0 1px, transparent 1px 26px);
box-shadow:
0 34px 72px -44px rgba(4, 8, 37, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transform: translate3d(0, var(--hero-layer-front-y, 0px), 0) rotate(-2deg);
z-index: 1;
will-change: transform;
}
.media-shell {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
z-index: 2;
}
.media-art {
display: block;
width: 100%;
height: auto;
max-width: none;
object-position: center;
filter: drop-shadow(0 28px 42px rgba(4, 8, 37, 0.18));
position: relative;
z-index: 2;
}
.media-art.hero-art {
position: absolute;
width: 106%;
height: 72%;
left: 51%;
top: 48%;
border: 1px solid rgba(4, 8, 37, 0.12);
border-radius: 24px;
object-fit: cover;
transform: translate(-50%, calc(-50% + var(--hero-art-y, 0px)));
filter:
saturate(1.12)
contrast(1.06)
drop-shadow(0 34px 50px rgba(4, 8, 37, 0.24));
z-index: 3;
}
.media-art.context-art {
width: 118%;
transform: translateX(-4%) translateY(2%);
}
.media-art.control-art {
width: 114%;
transform: translateX(-7%) translateY(4%);
}
.float-card {
--float-scroll-y: 0px;
position: absolute;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 14px 16px;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 12px;
animation: gentle-bob 6s ease-in-out infinite;
z-index: 8;
}
@keyframes gentle-bob {
0%, 100% { transform: translate3d(0, var(--float-scroll-y), 0); }
50%      { transform: translate3d(0, calc(var(--float-scroll-y) - 8px), 0); }
}

.float-card.fc-latency {
top: 10%;
left: 2%;
animation-delay: 0s;
}
.float-card.fc-devices {
bottom: 15%;
right: 3%;
animation-delay: -2s;
}
.float-card.fc-mini {
top: 40%;
right: 6%;
animation-delay: -4s;
background: var(--green);
border-color: var(--green);
}

.fc-ico {
width: 38px;
height: 38px;
border-radius: 11px;
display: grid;
place-items: center;
color: #fff;
flex-shrink: 0;
}
.fc-ico.blue  { background: var(--blue); }
.fc-ico.green { background: var(--green); }
.fc-ico.ink     { background: var(--ink); }

.fc-meta .fc-label {
font-family: var(--f-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 2px;
}
.fc-meta .fc-value {
font-family: var(--f-display);
font-weight: 700;
font-size: 18px;
color: var(--ink);
line-height: 1;
}
.fc-meta .fc-value sup { font-size: 10px; font-weight: 500; color: var(--muted); margin-left: 2px; }

.float-card.fc-mini .fc-label { color: rgba(2, 45, 23, 0.7); }
.float-card.fc-mini .fc-value { color: var(--green-ink); }

.section {
position: relative;
z-index: 1;
padding: 120px 0;
}
.section + .section { padding-top: 40px; }

.section-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
margin-bottom: 56px;
}
.section-head.center {
align-items: center;
text-align: center;
}

.section-title {
font-family: var(--f-display);
font-optical-sizing: auto;
font-size: clamp(2.3rem, 4.6vw, 3.8rem);
font-weight: 800;
line-height: 1.02;
letter-spacing: 0;
color: var(--ink);
max-width: 720px;
}
.section-title .italic { font-style: italic; font-weight: 300; color: var(--blue); }
.section-title .mark {
background: var(--green);
padding: 0 12px;
border-radius: 8px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.section-sub {
font-size: 17px;
color: var(--muted);
line-height: 1.7;
max-width: 620px;
}

.porque-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 56px;
align-items: start;
}

.porque-text p {
color: var(--muted);
line-height: 1.78;
margin-bottom: 20px;
font-size: 16.5px;
}
.porque-text p strong { color: var(--ink); font-weight: 600; }

.porque-visual {
position: relative;
aspect-ratio: 1 / 1.05;
overflow: visible;
isolation: isolate;
border: 1px solid rgba(4, 8, 37, 0.1);
border-radius: var(--r-lg);
background:
linear-gradient(140deg, rgba(255, 255, 255, 0.94), rgba(232, 236, 246, 0.72) 52%, rgba(248, 248, 239, 0.88)),
repeating-linear-gradient(90deg, rgba(4, 8, 37, 0.045) 0 1px, transparent 1px 28px),
repeating-linear-gradient(0deg, rgba(4, 8, 37, 0.035) 0 1px, transparent 1px 28px);
box-shadow:
0 34px 76px -48px rgba(4, 8, 37, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.porque-visual::before {
content: '';
position: absolute;
inset: 9% 8% 12% 10%;
border-radius: 24px;
background:
linear-gradient(140deg, rgba(255, 255, 255, 0.82), rgba(221, 227, 255, 0.48) 54%, rgba(248, 248, 239, 0.52)),
repeating-linear-gradient(90deg, rgba(4, 8, 37, 0.045) 0 1px, transparent 1px 22px),
repeating-linear-gradient(0deg, rgba(4, 8, 37, 0.035) 0 1px, transparent 1px 22px);
border: 1px solid rgba(4, 8, 37, 0.08);
box-shadow:
0 24px 52px -36px rgba(4, 8, 37, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
transform: rotate(-5deg);
z-index: 0;
}
.porque-visual::after {
content: '';
position: absolute;
left: 12%;
right: 10%;
bottom: 4%;
height: 18%;
border-radius: 50%;
background: rgba(4, 8, 37, 0.18);
filter: blur(24px);
transform: rotate(-8deg);
z-index: 1;
}
.porque-visual .media-shell {
z-index: 2;
}
.porque-visual .media-shell::before {
content: '';
position: absolute;
left: 12%;
right: 4%;
bottom: 8%;
height: 24%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(4, 8, 37, 0), rgba(4, 8, 37, 0.18), rgba(4, 8, 37, 0.04));
filter: blur(18px);
transform: skewX(-18deg) rotate(-8deg);
z-index: 1;
}
.porque-visual .media-art.context-art {
position: absolute;
width: 145%;
left: 54%;
top: 43%;
transform: translate(-50%, -50%) rotate(-2deg);
z-index: 3;
filter:
saturate(1.06)
contrast(1.04)
drop-shadow(0 30px 40px rgba(4, 8, 37, 0.24));
}
.spec-list {
list-style: none;
margin-top: 36px;
display: flex;
flex-direction: column;
gap: 12px;
}
.spec-item {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 20px 24px;
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 20px;
align-items: center;
transition: transform 0.2s var(--ease-out), border-color 0.2s;
}
.spec-item:hover { transform: translateX(4px); border-color: var(--ink); }
.spec-key {
font-family: var(--f-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.spec-val { font-size: 15px; color: var(--ink); line-height: 1.55; }
.spec-chip {
font-family: var(--f-mono);
font-size: 10px;
font-weight: 500;
padding: 6px 12px;
border-radius: var(--r-pill);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.chip-blue   { background: var(--blue-soft); color: var(--blue); }
.chip-yellow { background: var(--yellow-soft); color: var(--ink); }
.chip-green  { background: rgba(0, 210, 85, 0.14); color: var(--green-ink); }
.chip-sand   { background: var(--sand); color: var(--ink-2); }

.expertise-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.expertise-card {
position: relative;
padding: 32px 28px 28px;
border-radius: var(--r-lg);
border: 1px solid var(--line);
overflow: visible;
display: flex;
flex-direction: column;
min-height: 560px;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.expertise-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}

.expertise-card.variant-blue {
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.66), rgba(220, 228, 255, 0.92)),
#edf2ff;
border-color: rgba(11, 43, 209, 0.16);
}
.expertise-card.variant-yellow {
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.76), rgba(255, 220, 130, 0.62)),
var(--yellow-soft);
border-color: rgba(255, 220, 130, 0.78);
}
.expertise-card.variant-green {
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.7), rgba(0, 210, 85, 0.18)),
#e9fbf1;
border-color: rgba(0, 210, 85, 0.24);
}

.exp-idx {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
opacity: 0.55;
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 10px;
}
.exp-idx::after {
content: '';
flex: 1;
height: 1px;
background: currentColor;
opacity: 0.3;
}

.exp-title {
font-family: var(--f-display);
font-optical-sizing: auto;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0;
margin-bottom: 16px;
color: var(--ink);
}
.exp-title .italic { font-style: italic; font-weight: 300; }

.exp-desc {
font-size: 15px;
color: var(--ink-2);
line-height: 1.65;
margin-bottom: 24px;
flex: 1;
}

.exp-img {
margin-top: auto;
height: 230px;
position: relative;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
padding: 4px 0 0;
margin-bottom: 20px;
}
.exp-img::before {
content: '';
position: absolute;
inset: 16% 6% 4%;
border-radius: 24px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)),
repeating-linear-gradient(0deg, rgba(4, 8, 37, 0.045) 0 1px, transparent 1px 20px);
filter: blur(14px);
transform: rotate(-3deg);
}
.exp-img .media-art {
position: relative;
z-index: 1;
}
.exp-img .media-art.edge-art,
.exp-img .media-art.control-art,
.exp-img .media-art.integration-art {
width: 112%;
max-height: 100%;
object-fit: contain;
transform: translate3d(0, 4%, 0);
}
.exp-img .media-art.control-art {
width: 108%;
transform: translate3d(0, 2%, 0);
}
.exp-img .media-art.integration-art {
width: 110%;
transform: translate3d(0, 5%, 0);
}

.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tech-tag {
font-family: var(--f-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ink);
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(4, 8, 37, 0.12);
padding: 5px 11px;
border-radius: var(--r-pill);
text-transform: uppercase;
}
.expertise-card.variant-green .tech-tag {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(0, 210, 85, 0.22);
}

.method-layout {
display: grid;
grid-template-columns: 1fr 420px;
gap: 64px;
align-items: start;
}

.method-steps {
display: flex;
flex-direction: column;
gap: 14px;
}

.method-step {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 28px 32px;
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 24px;
align-items: center;
transition: all 0.3s var(--ease-out);
cursor: default;
}
.method-step:hover {
border-color: var(--ink);
transform: translateX(6px);
}
.method-step:hover .step-arrow { transform: translateX(4px); opacity: 1; }

.step-n {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bg-2);
color: var(--ink);
display: grid;
place-items: center;
font-family: var(--f-display);
font-weight: 700;
font-size: 20px;
transition: background 0.2s, color 0.2s;
}
.method-step:nth-child(1) .step-n { background: var(--blue-soft); color: var(--blue); }
.method-step:nth-child(2) .step-n { background: var(--yellow-soft); color: var(--ink); }
.method-step:nth-child(3) .step-n { background: var(--green); color: var(--green-ink); }
.method-step:nth-child(4) .step-n { background: var(--red-soft); color: var(--red); }

.step-title {
font-family: var(--f-display);
font-weight: 700;
font-size: 18px;
margin-bottom: 6px;
color: var(--ink);
}
.step-body { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

.step-arrow {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--bg-2);
display: grid;
place-items: center;
color: var(--ink);
opacity: 0.4;
transition: all 0.25s var(--ease-out);
}

.method-aside { position: sticky; top: 110px; }

.principles-card {
background:
radial-gradient(circle at 14% 100%, rgba(255, 0, 78, 0.2), transparent 34%),
radial-gradient(circle at 82% 8%, rgba(11, 43, 209, 0.34), transparent 36%),
linear-gradient(145deg, var(--ink), #071342 100%);
color: #fff;
border-radius: var(--r-lg);
padding: 36px 34px;
position: relative;
overflow: hidden;
}
.principles-card::before {
content: '';
position: absolute;
top: -90px;
right: -70px;
width: 180px;
height: 420px;
background: linear-gradient(165deg, rgba(11, 43, 209, 0.62), rgba(255, 0, 78, 0.14), rgba(0, 210, 85, 0.16));
opacity: 0.42;
transform: rotate(16deg);
}

.principles-title {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 28px;
position: relative;
}

.principle {
display: flex;
gap: 16px;
padding: 22px 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
position: relative;
}
.principle:last-child { padding-bottom: 0; }

.principle-n {
font-family: var(--f-mono);
font-size: 11px;
color: var(--green);
flex-shrink: 0;
padding-top: 2px;
}
.principle-body { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); line-height: 1.6; }
.principle-body strong {
color: #fff;
font-weight: 600;
font-family: var(--f-display);
font-size: 16px;
display: block;
margin-bottom: 6px;
}

.method-aside-img {
margin-top: 16px;
aspect-ratio: 4/3;
position: relative;
overflow: visible;
}
.method-aside-img::before {
content: '';
position: absolute;
inset: 16% 8% 7%;
border-radius: 26px;
background:
linear-gradient(135deg, rgba(0, 210, 85, 0.2), rgba(255, 255, 255, 0.28) 52%, rgba(11, 43, 209, 0.14)),
repeating-linear-gradient(90deg, rgba(4, 8, 37, 0.045) 0 1px, transparent 1px 24px);
filter: blur(16px);
transform: rotate(-5deg);
}
.media-art.method-art {
width: 118%;
transform: translateX(-9%) translateY(2%);
}

.site-footer {
position: relative;
z-index: 1;
padding: 40px 28px 32px;
}

.footer-hero {
max-width: 1200px;
margin: 0 auto;
background: var(--ink);
color: #fff;
border-radius: var(--r-xl);
padding: 80px 64px 64px;
position: relative;
overflow: hidden;
}

.footer-hero::before {
content: '';
position: absolute;
top: -160px;
left: -96px;
width: 260px;
height: 640px;
background: linear-gradient(160deg, rgba(11, 43, 209, 0.72), rgba(0, 210, 85, 0.12));
opacity: 0.36;
transform: rotate(22deg);
pointer-events: none;
}
.footer-hero::after {
content: '';
position: absolute;
bottom: -180px;
right: -96px;
width: 240px;
height: 560px;
background: linear-gradient(160deg, rgba(0, 210, 85, 0.42), rgba(255, 255, 255, 0.08));
opacity: 0.28;
transform: rotate(22deg);
pointer-events: none;
}

.footer-main {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 72px;
align-items: start;
position: relative;
z-index: 2;
}
.footer-headline {
font-family: var(--f-display);
font-optical-sizing: auto;
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
font-weight: 800;
line-height: 1.04;
letter-spacing: 0;
margin: 24px 0 24px;
}
.footer-headline .italic { font-style: italic; font-weight: 300; color: var(--green); }

.footer-sub {
font-size: 16px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.72;
margin-bottom: 36px;
max-width: 460px;
}

.footer-pill-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 8px 16px;
border-radius: var(--r-pill);
}
.footer-pill-label::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 3px rgba(0, 210, 85, 0.25);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}

.footer-btn-primary {
background: var(--green);
color: var(--green-ink);
box-shadow: 0 20px 40px -10px rgba(0, 210, 85, 0.35);
}
.footer-btn-primary:hover { background: #00bd4d; transform: translateY(-2px); }

.contact-panel {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--r-lg);
padding: 36px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
flex-direction: column;
gap: 18px;
}
.contact-panel-title {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 6px;
}
.contact-panel-item {
display: grid;
grid-template-columns: 34px 1fr;
gap: 14px;
align-items: start;
padding: 18px 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.contact-panel-n {
font-family: var(--f-mono);
font-size: 11px;
color: var(--green);
padding-top: 2px;
}
.contact-panel-item p {
color: rgba(255, 255, 255, 0.76);
font-size: 15px;
line-height: 1.6;
}
.contact-panel-btn {
display: inline-flex;
justify-content: center;
align-items: center;
margin-top: 8px;
width: 100%;
font-family: var(--f-body);
font-size: 14px;
font-weight: 700;
text-decoration: none;
color: var(--green-ink);
background: var(--green);
border-radius: var(--r-pill);
padding: 16px 20px;
transition: background 0.18s, transform 0.18s;
}
.contact-panel-btn:hover {
background: #00bd4d;
transform: translateY(-1px);
}

.footer-bottom {
max-width: 1200px;
margin: 24px auto 0;
padding: 22px 8px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.footer-copy {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.04em;
}
.footer-links { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-links a {
font-family: var(--f-body);
font-size: 13px;
font-weight: 500;
color: var(--muted);
text-decoration: none;
padding: 8px 14px;
border-radius: var(--r-pill);
transition: all 0.18s;
}
.footer-links a:hover { background: var(--ink); color: #fff; }

.whatsapp-float {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 120;
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
background: #00d255;
text-decoration: none;
border-radius: var(--r-pill);
padding: 12px 18px 12px 12px;
box-shadow: 0 18px 38px -16px rgba(0, 120, 48, 0.65);
border: 1px solid rgba(0, 0, 0, 0.08);
transition: transform 0.18s, box-shadow 0.18s;
}
.whatsapp-float:hover {
transform: translateY(-2px);
box-shadow: 0 22px 44px -18px rgba(0, 120, 48, 0.75);
}
.whatsapp-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.18);
}
.whatsapp-icon svg {
width: 24px;
height: 24px;
}
.whatsapp-text {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}

@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
.hero-copy > *   { animation: fade-up 0.7s var(--ease-out) both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.28s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.4s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.5s; }
.hero-visual    { animation: fade-up 0.9s var(--ease-out) both 0.25s; }

.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.28s; }
.reveal-d4 { transition-delay: 0.38s; }

.scroll-fx {
--scroll-shift: 0px;
will-change: transform;
}
.reveal.scroll-fx {
transition: opacity 0.8s var(--ease-out);
}
.scroll-fx:not(.reveal) {
transform: translate3d(0, var(--scroll-shift), 0);
}
.reveal.scroll-fx {
transform: translate3d(0, calc(30px + var(--scroll-shift)), 0);
}
.reveal.visible.scroll-fx {
transform: translate3d(0, var(--scroll-shift), 0);
}
.expertise-card.scroll-fx:hover {
transform: translate3d(0, calc(var(--scroll-shift) - 6px), 0);
}
.method-step.scroll-fx:hover {
transform: translate3d(6px, var(--scroll-shift), 0);
}
.method-step.scroll-fx:hover .step-arrow {
transform: translateX(4px);
opacity: 1;
}
.footer-btn-primary.scroll-fx:hover {
transform: translate3d(0, calc(var(--scroll-shift) - 2px), 0);
}

@media (prefers-reduced-motion: reduce) {
.hero-visual::before {
transform: rotate(-5deg);
}
.hero-visual::after {
transform: rotate(6deg);
}
.visual-main::before {
transform: rotate(-2deg);
}
.hero-visual::before,
.hero-visual::after,
.visual-main::before,
.scroll-fx {
will-change: auto;
}
.scroll-fx:not(.reveal),
.reveal.visible.scroll-fx {
transform: translate3d(0, 0, 0);
}
.reveal.scroll-fx {
transform: translateY(30px);
}
.media-art.hero-art {
transform: translate(-50%, -50%);
}
.typewriter-caret {
animation: none;
}
}

@media (max-width: 1024px) {
.hero-grid      { grid-template-columns: 1fr; gap: 48px; }
.hero-visual    { margin: 0 auto; max-width: 480px; }
.porque-grid    { grid-template-columns: 1fr; gap: 40px; }
.method-layout  { grid-template-columns: 1fr; gap: 48px; }
.method-aside   { position: static; }
.expertise-grid { grid-template-columns: 1fr; }
.footer-main    { grid-template-columns: 1fr; gap: 48px; }
.footer-hero    { padding: 60px 36px 48px; }
}

@media (max-width: 720px) {
.header-nav, .header-cta { display: none; }
.menu-toggle             { display: flex; }
.site-header             { top: 14px; padding: 0 16px; }
.header-inner            { height: 60px; padding: 0 10px 0 18px; }
.brand-logo              { width: 84px; }
.header-controls         { gap: 8px; }
.lang-switch             { gap: 6px; padding: 4px 6px 4px 4px; }
.lang-switch-icon        { width: 26px; height: 26px; }
.lang-switch-track       { gap: 3px; padding: 2px; }
.lang-btn                { min-width: 40px; padding: 7px 9px; font-size: 10px; }
.wrap                    { padding: 0 20px; }
.hero                    { padding: 56px 20px 80px; }
.section                 { padding: 80px 0; }
.hero-headline           { font-size: clamp(2.6rem, 11vw, 4rem); }
.spec-item               { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
.method-step             { grid-template-columns: 56px 1fr; padding: 22px; }
.method-step .step-arrow { display: none; }
.step-n                  { width: 48px; height: 48px; font-size: 17px; }
.float-card.fc-latency   { left: 4%; top: 4%; }
.float-card.fc-devices   { right: 4%; bottom: 10%; }
.float-card.fc-mini      { display: none; }
.footer-hero             { padding: 48px 26px 40px; border-radius: var(--r-lg); }
.whatsapp-float          { right: 16px; bottom: 16px; padding: 10px; }
.whatsapp-text           { display: none; }
.whatsapp-icon           { width: 40px; height: 40px; }
.media-art.hero-art      { width: 108%; height: 70%; }
}