/* ==========================================================================
   Vision Digital — Design System
   ========================================================================== */
:root {
    --black: #050505;
    --black-soft: #090b0f;
    --surface: #0c0f14;
    --surface-light: #11161d;
    --blue: #1e88ff;
    --blue-light: #53b6ff;
    --white: #fff;
    --text: #f5f7fa;
    --muted: #8993a3;
    --border: rgba(255, 255, 255, .09);
    --border-blue: rgba(83, 182, 255, .22);
    --gradient: linear-gradient(135deg, var(--blue-light), var(--blue));
    --font: "Inter", system-ui, sans-serif;
    --display: "Manrope", "Inter", sans-serif;
    --container: 1240px;
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 30px;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--blue) var(--black); }
body {
    margin: 0;
    color: var(--text);
    background: var(--black);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.menu-open, body.modal-open { overflow: hidden; }
::selection { color: var(--white); background: rgba(30, 136, 255, .7); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: #1f2835; border: 2px solid var(--black); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -.035em; }
h1 em, h2 em {
    color: transparent;
    background: linear-gradient(105deg, #fff 5%, var(--blue-light) 48%, var(--blue) 95%);
    background-clip: text;
    -webkit-background-clip: text;
    font-style: normal;
}
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.section { position: relative; padding: 140px 0; }
.page-noise {
    position: fixed; inset: 0; z-index: 10000; pointer-events: none; opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.cursor-glow {
    position: fixed; z-index: -1; width: 500px; height: 500px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(30, 136, 255, .07), transparent 68%);
    transform: translate(-50%, -50%); transition: opacity .3s; opacity: 0;
}
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 99999; padding: 10px 16px; background: var(--blue); border-radius: 8px; }
.skip-link:focus { top: 16px; }
.section-kicker, .eyebrow {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--blue-light);
    font-size: .73rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.section-kicker::before { width: 20px; height: 1px; content: ""; background: var(--blue-light); box-shadow: 0 0 10px var(--blue); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 70px; margin-bottom: 64px; }
.section-heading h2, .sticky-copy h2, .feature-copy h2 { max-width: 800px; margin-bottom: 0; font-size: clamp(2.3rem, 5vw, 4.2rem); }
.section-heading > p { max-width: 410px; margin-bottom: 8px; color: var(--muted); font-size: 1.04rem; }
.section-heading.center { display: block; max-width: 770px; margin-inline: auto; text-align: center; }
.section-heading.center .section-kicker { justify-content: center; }
.section-heading.center p { max-width: 590px; margin: 22px auto 0; }
.section-action { margin-top: 48px; text-align: center; }

/* Header */
.site-header {
    position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; padding: 20px 0;
    border-bottom: 1px solid transparent; transition: .4s var(--ease);
}
.site-header.scrolled {
    padding: 12px 0; border-color: var(--border); background: rgba(5, 5, 5, .76);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2); backdrop-filter: blur(18px) saturate(140%);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo {
    width: auto; height: 46px; object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(30, 136, 255, .35));
    transition: filter .35s var(--ease), transform .35s var(--ease);
}
.brand:hover .brand-logo { filter: drop-shadow(0 0 18px rgba(83, 182, 255, .5)); transform: translateY(-1px); }
.brand-logo-footer { height: 58px; }
.main-nav { display: flex; align-items: center; gap: 36px; }
.main-nav a { position: relative; color: #aab2bf; font-size: .85rem; font-weight: 500; transition: color .25s; }
.main-nav a::after { position: absolute; right: 50%; bottom: -10px; left: 50%; height: 1px; content: ""; background: var(--blue-light); transition: .3s var(--ease); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--white); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; left: 0; box-shadow: 0 0 8px var(--blue); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: rgba(255,255,255,.04); }
.menu-toggle span { display: block; width: 17px; height: 1px; margin: 5px auto; background: var(--white); transition: .3s; }
.button {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 52px;
    padding: 0 24px; overflow: hidden; border: 1px solid rgba(83, 182, 255, .4); border-radius: var(--radius-sm);
    color: var(--white); background: linear-gradient(135deg, #2995ff, #096cdc); box-shadow: 0 10px 35px rgba(30, 136, 255, .22), inset 0 1px rgba(255, 255, 255, .2);
    font-size: .86rem; font-weight: 700; letter-spacing: -.01em; transition: .35s var(--ease);
}
.button::before { position: absolute; top: 0; left: -120%; width: 80%; height: 100%; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transform: skewX(-20deg); transition: .65s; }
.button:hover { border-color: var(--blue-light); box-shadow: 0 14px 44px rgba(30, 136, 255, .35), inset 0 1px rgba(255,255,255,.25); transform: translateY(-3px); }
.button:hover::before { left: 140%; }
.button span { position: relative; font-size: 1rem; transition: transform .3s; }
.button:hover span { transform: translate(2px, -2px); }
.button-sm { min-height: 43px; padding-inline: 19px; font-size: .78rem; }
.button-lg { min-height: 58px; padding-inline: 27px; }
.button-xl { min-height: 68px; padding-inline: 38px; border-radius: 15px; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
.button-ghost { border-color: var(--border); background: rgba(255, 255, 255, .035); box-shadow: inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(10px); }
.button-ghost:hover { border-color: rgba(83,182,255,.35); background: rgba(30,136,255,.08); }
.text-link { display: inline-flex; gap: 12px; color: #dce3ec; font-size: .88rem; font-weight: 650; }
.text-link span { color: var(--blue-light); transition: .3s; }
.text-link:hover span { transform: translate(3px, -3px); }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 780px; display: flex; align-items: center; padding: 135px 0 90px; overflow: hidden; background: radial-gradient(ellipse at 70% 35%, rgba(13, 69, 125, .18), transparent 42%), linear-gradient(180deg, #050505, #06080b 75%, #050505); }
.hero::before { position: absolute; inset: 0; content: ""; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.hero-orb-one { top: 8%; right: -12%; width: 520px; height: 520px; border: 1px solid rgba(83,182,255,.1); box-shadow: inset 0 0 100px rgba(30,136,255,.04); }
.hero-orb-two { bottom: 3%; left: 35%; width: 220px; height: 220px; background: rgba(30,136,255,.08); filter: blur(100px); }
.hero-grid { position: relative; display: grid; grid-template-columns: .87fr 1.13fr; align-items: center; gap: 50px; }
.hero-copy { position: relative; z-index: 3; }
.eyebrow { padding: 8px 13px; border: 1px solid rgba(83,182,255,.17); border-radius: 30px; background: rgba(30,136,255,.055); backdrop-filter: blur(10px); letter-spacing: .11em; }
.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 12px var(--blue); animation: pulse 2s infinite; }
.hero h1 { max-width: 670px; margin-bottom: 25px; font-size: clamp(3rem, 5.4vw, 5.25rem); letter-spacing: -.058em; }
.hero-copy > p { max-width: 620px; margin-bottom: 34px; color: #9ba5b4; font-size: clamp(1rem, 1.5vw, 1.17rem); line-height: 1.75; }
.hero-actions { display: flex; gap: 13px; }
.hero-trust { display: flex; align-items: center; gap: 16px; margin-top: 38px; }
.avatar-stack { display: flex; }
.avatar-stack span { display: grid; width: 34px; height: 34px; margin-left: -8px; place-items: center; border: 2px solid #090b0f; border-radius: 50%; color: #dcecff; background: #152b43; font-size: .55rem; font-weight: 700; }
.avatar-stack span:first-child { margin-left: 0; background: #413059; }
.avatar-stack span:nth-child(2) { background: #234b45; }
.avatar-stack span:nth-child(3) { background: #49362b; }
.stars { color: #78bdff; font-size: .65rem; letter-spacing: 2px; }
.hero-trust small { color: #707a89; font-size: .66rem; }
.hero-visual { position: relative; z-index: 2; perspective: 1200px; }
.visual-halo { position: absolute; inset: -18%; z-index: -1; background: radial-gradient(circle, rgba(30,136,255,.15), transparent 62%); filter: blur(20px); }
.dashboard-window {
    position: relative; width: 106%; overflow: hidden; border: 1px solid rgba(118, 184, 255, .25); border-radius: 16px;
    background: rgba(8, 12, 18, .88); box-shadow: 0 45px 90px rgba(0,0,0,.65), 0 0 60px rgba(30,136,255,.11), inset 0 1px rgba(255,255,255,.06);
    transform: rotateY(-7deg) rotateX(3deg); transform-style: preserve-3d; backdrop-filter: blur(16px);
}
.window-bar { display: flex; height: 42px; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.025); color: #5c6878; font-size: .53rem; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #29303a; }
.window-bar b { padding: 3px 6px; border-radius: 4px; color: #65d99b; background: rgba(101,217,155,.08); font-size: .46rem; letter-spacing: .1em; }
.dashboard-layout { display: grid; grid-template-columns: 55px 1fr; min-height: 490px; }
.dash-sidebar { display: flex; align-items: center; flex-direction: column; gap: 25px; padding: 18px 0; border-right: 1px solid var(--border); }
.dash-logo { display: grid; width: 27px; height: 27px; margin-bottom: 8px; place-items: center; border-radius: 7px; background: var(--gradient); box-shadow: 0 0 15px rgba(30,136,255,.3); font-size: .65rem; font-weight: 800; }
.dash-sidebar i { width: 15px; height: 15px; border: 1px solid #39414c; border-radius: 4px; }
.dash-sidebar i.active { border-color: var(--blue); background: rgba(30,136,255,.18); box-shadow: 0 0 8px rgba(30,136,255,.3); }
.dash-sidebar .dash-bottom { margin-top: auto; border-radius: 50%; }
.dash-main { padding: 24px 25px; }
.dash-head, .card-title { display: flex; align-items: center; justify-content: space-between; }
.dash-head small, .card-title small, .mini-card > small { display: block; margin-bottom: 3px; color: #4c5a6c; font-size: .47rem; font-weight: 700; letter-spacing: .13em; }
.dash-head strong { font-size: .9rem; letter-spacing: -.02em; }
.dash-user { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(83,182,255,.3); border-radius: 50%; color: #8ccaff; background: rgba(30,136,255,.1); font-size: .5rem; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 21px; }
.metric-card, .chart-card, .mini-card { border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.018); }
.metric-card { position: relative; padding: 13px; }
.metric-card small { display: block; color: #657083; font-size: .52rem; }
.metric-card strong { display: block; margin: 4px 0 7px; font-size: .9rem; }
.metric-card span { color: #64d69a; font-size: .48rem; }
.chart-card { margin-top: 10px; padding: 15px 15px 5px; }
.card-title strong { display: block; font-size: .72rem; }
.card-title > span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; color: #586475; font-size: .46rem; }
.hero-chart { width: 100%; height: 145px; margin-top: 12px; overflow: visible; }
.chart-grid path { fill: none; stroke: rgba(255,255,255,.04); stroke-width: 1; }
.chart-area { fill: url(#chart-fill); }
.chart-line { fill: none; stroke: #43a7ff; stroke-width: 2; filter: url(#line-glow); }
.hero-chart circle { fill: var(--white); stroke: var(--blue); stroke-width: 3; }
.dash-bottom-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin-top: 10px; }
.mini-card { display: flex; min-height: 71px; align-items: center; justify-content: space-between; padding: 11px 13px; }
.funnel { display: flex; height: 33px; align-items: end; gap: 4px; }
.funnel i { width: 13px; border-radius: 3px 3px 0 0; background: linear-gradient(to top, #1768bb, #4daeff); }
.funnel i:first-child { height: 100%; } .funnel i:nth-child(2) { height: 70%; } .funnel i:last-child { height: 43%; }
.ring { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue) 84%, #1b222c 0); }
.ring::before { position: absolute; width: 32px; height: 32px; border-radius: 50%; content: ""; background: #0b0f14; }
.ring span { position: relative; font-size: .45rem; font-weight: 700; }
.floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(83,182,255,.21); border-radius: 10px; background: rgba(11,16,23,.82); box-shadow: 0 20px 35px rgba(0,0,0,.4), 0 0 25px rgba(30,136,255,.08); backdrop-filter: blur(14px); animation: float 5s ease-in-out infinite; }
.floating-card small { display: block; color: #697688; font-size: .46rem; }
.floating-card strong { display: block; font-size: .65rem; }
.floating-card b { margin-left: 10px; color: #62d594; font-size: .5rem; }
.float-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: #9fd4ff; background: rgba(30,136,255,.16); }
.floating-leads { top: 13%; right: -8%; }
.floating-ai { right: 4%; bottom: -4%; animation-delay: -2.5s; }
.ai-pulse { width: 10px; height: 10px; border-radius: 50%; background: #4fd395; box-shadow: 0 0 0 5px rgba(79,211,149,.1), 0 0 15px #4fd395; }
.scroll-cue { position: absolute; bottom: 27px; left: 50%; z-index: 3; display: flex; align-items: center; gap: 10px; color: #596271; font-size: .52rem; letter-spacing: .2em; transform: translateX(-50%); }
.scroll-cue span { width: 23px; height: 36px; border: 1px solid #343c47; border-radius: 15px; }
.scroll-cue span::after { display: block; width: 2px; height: 6px; margin: 7px auto; content: ""; background: var(--blue-light); animation: scrollDown 1.8s infinite; }

/* Stats and services */
.stats-section { position: relative; z-index: 5; border-block: 1px solid var(--border); background: rgba(8,10,13,.82); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 45px; }
.stats-grid > div { padding: 0 30px; border-left: 1px solid var(--border); text-align: center; }
.stats-grid > div:first-child { border-left: 0; }
.stats-grid strong { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.05em; }
.stats-grid sup { color: var(--blue-light); font-size: .45em; vertical-align: super; }
.stats-grid p { margin: 3px 0 0; color: #6e7887; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.services-section { background: radial-gradient(circle at 15% 10%, rgba(30,136,255,.07), transparent 27%); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: 1000px; }
.service-card { position: relative; min-height: 295px; padding: 30px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); transition: border-color .4s, box-shadow .4s, transform .2s; transform-style: preserve-3d; }
.service-card::before { position: absolute; width: 220px; height: 220px; right: -130px; bottom: -150px; border-radius: 50%; content: ""; background: rgba(30,136,255,.13); filter: blur(45px); opacity: 0; transition: .5s; }
.service-card:hover { border-color: rgba(83,182,255,.32); box-shadow: 0 25px 55px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06); }
.service-card:hover::before { opacity: 1; }
.service-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 46px; }
.service-top small { color: #3d4653; font-family: var(--display); font-size: .65rem; }
.service-icon { position: relative; display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid rgba(83,182,255,.18); border-radius: 12px; background: rgba(30,136,255,.075); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.service-icon::before, .service-icon::after { position: absolute; content: ""; }
.icon-window::before { width: 21px; height: 16px; border: 1.5px solid var(--blue-light); border-radius: 3px; box-shadow: 4px 4px 0 -1px rgba(83,182,255,.3); }
.icon-window::after { top: 18px; width: 17px; height: 1px; background: var(--blue-light); }
.icon-code::before { width: 18px; height: 18px; border-left: 1.5px solid var(--blue-light); border-bottom: 1.5px solid var(--blue-light); transform: rotate(45deg); }
.icon-code::after { width: 8px; height: 1.5px; background: var(--blue-light); box-shadow: 0 6px rgba(83,182,255,.7), 0 -6px rgba(83,182,255,.7); transform: rotate(-60deg); }
.icon-target::before { width: 22px; height: 22px; border: 1.5px solid var(--blue-light); border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(83,182,255,.1); }
.icon-target::after { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 8px var(--blue); }
.icon-bag::before { width: 19px; height: 17px; bottom: 11px; border: 1.5px solid var(--blue-light); border-radius: 3px; }
.icon-bag::after { top: 10px; width: 9px; height: 7px; border: 1.5px solid var(--blue-light); border-bottom: 0; border-radius: 5px 5px 0 0; }
.icon-chart::before { width: 22px; height: 17px; border-bottom: 1.5px solid var(--blue-light); border-left: 1.5px solid var(--blue-light); }
.icon-chart::after { width: 17px; height: 9px; border-top: 1.5px solid var(--blue-light); transform: rotate(-24deg); }
.icon-spark::before { width: 23px; height: 23px; background: var(--blue-light); clip-path: polygon(50% 0,59% 37%,100% 50%,59% 60%,50% 100%,40% 60%,0 50%,40% 38%); filter: drop-shadow(0 0 5px var(--blue)); }
.service-card h3 { margin-bottom: 12px; font-size: 1.25rem; }
.service-card p { min-height: 50px; margin-bottom: 24px; color: var(--muted); font-size: .85rem; line-height: 1.65; }
.service-card a { display: inline-flex; gap: 10px; color: #c7d1de; font-size: .74rem; font-weight: 650; }
.service-card a span { color: var(--blue-light); transition: .3s; }
.service-card:hover a span { transform: translate(3px, -3px); }

/* Portfolio */
.portfolio-section { background: #07080a; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.project-card { width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); background: #0a0c0f; text-align: left; transition: .5s var(--ease); }
.project-card:hover { border-color: rgba(255,255,255,.19); box-shadow: 0 30px 65px rgba(0,0,0,.4); transform: translateY(-7px); }
.project-visual { position: relative; display: block; height: 365px; overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--project-glow), transparent 65%), linear-gradient(145deg, var(--project-a), var(--project-b)); }
.project-visual::after { position: absolute; inset: 0; content: ""; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 35px 35px; mask-image: linear-gradient(to bottom, black, transparent); }
.project-blue { --project-a: #0c2751; --project-b: #07101c; --project-glow: #298df7; }
.project-purple { --project-a: #29134d; --project-b: #0e0917; --project-glow: #8b55ff; }
.project-cyan { --project-a: #073b44; --project-b: #071719; --project-glow: #17d8df; }
.project-gold { --project-a: #4b3515; --project-b: #171007; --project-glow: #e9a93c; }
.project-green { --project-a: #104331; --project-b: #071610; --project-glow: #3cdb97; }
.project-indigo { --project-a: #181e56; --project-b: #090b1b; --project-glow: #637cff; }
.project-sage { --project-a: #1f3a2c; --project-b: #0b1410; --project-glow: #8fbf9a; }
.project-browser { position: absolute; top: 18%; right: 8%; bottom: -3%; left: 8%; z-index: 2; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 12px 12px 0 0; background: rgba(5,8,13,.78); box-shadow: 0 25px 50px rgba(0,0,0,.45), 0 0 35px var(--project-glow); transform: perspective(800px) rotateX(4deg) rotateY(-3deg) translateY(12px); transition: .6s var(--ease); }
.project-card:hover .project-browser { transform: perspective(800px) rotateX(0) rotateY(0) translateY(0) scale(1.02); }
.browser-bar { display: block; height: 27px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.browser-bar::before { display: block; width: 5px; height: 5px; margin: 11px 0 0 13px; border-radius: 50%; content: ""; background: rgba(255,255,255,.35); box-shadow: 9px 0 rgba(255,255,255,.2), 18px 0 rgba(255,255,255,.14); }
.project-ui { position: absolute; inset: 46px 30px 25px; display: grid; grid-template: 1fr 1fr / 1.4fr .7fr; gap: 10px; }
.project-ui i { border: 1px solid rgba(255,255,255,.075); border-radius: 7px; background: rgba(255,255,255,.035); }
.project-ui i:first-child { grid-row: span 2; background: linear-gradient(145deg, rgba(255,255,255,.06), transparent); }
.project-ui i:nth-child(4) { grid-column: span 2; height: 25px; }
.project-ui i:nth-child(5), .project-ui i:nth-child(6) { display: none; }
.project-browser > strong { position: absolute; top: 50%; left: 29%; z-index: 2; color: rgba(255,255,255,.8); font-family: var(--display); font-size: 4rem; text-shadow: 0 0 25px var(--project-glow); transform: translate(-50%,-50%); }
.project-metric { position: absolute; top: 28%; right: 3%; z-index: 4; padding: 8px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #fff; background: rgba(5,8,12,.62); box-shadow: 0 10px 25px rgba(0,0,0,.3); font-size: .63rem; font-weight: 700; backdrop-filter: blur(10px); }
.project-content { display: block; padding: 28px 30px 31px; }
.project-content > small { display: block; margin-bottom: 11px; color: var(--blue-light); font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.project-title-row strong { font-family: var(--display); font-size: 1.45rem; letter-spacing: -.03em; }
.project-title-row i { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--blue-light); font-style: normal; transition: .35s; }
.project-card:hover .project-title-row i { color: var(--white); background: var(--blue); transform: rotate(45deg); }
.project-content > span:not(.project-title-row) { display: block; color: var(--muted); font-size: .82rem; }
.project-content > em { display: block; margin-top: 18px; color: #525d6b; font-size: .62rem; font-style: normal; letter-spacing: .03em; }

/* Advantages and process */
.advantages-section { border-top: 1px solid var(--border); background: radial-gradient(circle at 80% 40%, rgba(30,136,255,.055), transparent 30%); }
.advantages-layout, .faq-layout { display: grid; grid-template-columns: .77fr 1.23fr; gap: 100px; align-items: start; }
.sticky-copy { position: sticky; top: 130px; }
.sticky-copy h2 { margin-bottom: 25px; }
.sticky-copy > p { max-width: 460px; margin-bottom: 31px; color: var(--muted); }
.advantages-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.advantage-card { display: flex; min-height: 145px; gap: 18px; padding: 28px 24px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: .35s; }
.advantage-card:nth-child(2n) { border-right: 0; }
.advantage-card:nth-last-child(-n+2) { border-bottom: 0; }
.advantage-card:hover { background: linear-gradient(135deg, rgba(30,136,255,.08), transparent); }
.advantage-card > span { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border: 1px solid rgba(83,182,255,.15); border-radius: 10px; color: var(--blue-light); background: rgba(30,136,255,.07); }
.advantage-card h3 { margin-bottom: 8px; font-size: .95rem; letter-spacing: -.01em; }
.advantage-card p { margin: 0; color: #707b8a; font-size: .75rem; line-height: 1.55; }
.process-section { overflow: hidden; background: #07080a; }
.process-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
.process-line::before {
    position: absolute;
    top: 38px;
    right: 4%;
    left: 4%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, var(--blue), rgba(83,182,255,.25), var(--border));
}
.process-line article {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
    z-index: 1;
}
.process-line article > span {
    display: block;
    margin-bottom: 18px;
    color: #566171;
    font-family: var(--display);
    font-size: .65rem;
    letter-spacing: .08em;
}
.process-line article > i {
    position: relative;
    z-index: 2;
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 0 22px;
    border: 3px solid #07080a;
    border-radius: 50%;
    background: #4e5967;
    box-shadow: 0 0 0 1px #4e5967;
    transition: .4s;
    flex-shrink: 0;
}
.process-line article:hover > i,
.process-line article:first-child > i {
    background: var(--blue-light);
    box-shadow: 0 0 0 1px var(--blue-light), 0 0 18px var(--blue);
}
.process-line h3 {
    margin: 0 0 10px;
    font-size: .95rem;
    line-height: 1.25;
}
.process-line p {
    max-width: 160px;
    margin: 0;
    color: #687383;
    font-size: .68rem;
    line-height: 1.5;
}

/* Feature sections */
.feature-split { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 90px; }
.feature-split.reverse { grid-template-columns: 1.15fr .85fr; }
.feature-copy h2 { margin-bottom: 25px; }
.feature-copy > p { max-width: 510px; margin-bottom: 30px; color: var(--muted); font-size: .98rem; }
.platform-list { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 33px; }
.platform-list span { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; color: #aab4c1; background: rgba(255,255,255,.02); font-size: .72rem; }
.platform-list i { font-style: normal; font-weight: 700; }
.meta-icon { color: #378ffc; font-size: 1rem; } .google-icon { color: #64bf77; } .instagram-icon { color: #ea65ae; font-size: 1rem; }
.ads-section { background: radial-gradient(circle at 85% 60%, rgba(30,136,255,.09), transparent 32%); }
.ads-dashboard { padding: 28px; border: 1px solid var(--border-blue); border-radius: var(--radius); background: linear-gradient(145deg, rgba(16,23,32,.94), rgba(7,10,14,.92)); box-shadow: 0 35px 70px rgba(0,0,0,.45), 0 0 60px rgba(30,136,255,.07), inset 0 1px rgba(255,255,255,.06); }
.ads-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.ads-top small { display: block; color: #556172; font-size: .52rem; font-weight: 700; letter-spacing: .12em; }
.ads-top strong { display: block; margin-top: 3px; font-size: 1rem; }
.ads-top > span { color: #5dd591; font-size: .53rem; }
.ads-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-block: 18px; }
.ads-metrics > div { padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.015); }
.ads-metrics small, .ads-metrics em { display: block; color: #606c7e; font-size: .48rem; font-style: normal; }
.ads-metrics strong { display: block; margin: 5px 0; font-size: .85rem; }
.ads-metrics .positive { color: #52cd8b; }
.ads-chart { padding: 17px 16px 0; border: 1px solid var(--border); border-radius: 10px; }
.chart-label { display: flex; align-items: end; justify-content: space-between; }
.chart-label > span { color: #687486; font-size: .58rem; }
.chart-label b { font-size: .76rem; }
.chart-label small { margin-left: 6px; color: #53d18e; font-size: .48rem; }
.ads-chart svg { height: 165px; overflow: visible; }
.grid-lines { fill: none; stroke: rgba(255,255,255,.045); }
.ads-area { fill: url(#adsFill); }
.ads-line { fill: none; stroke: var(--blue-light); stroke-width: 2; filter: drop-shadow(0 0 4px var(--blue)); }
.campaign-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; }
.campaign-status { width: 7px; height: 7px; border-radius: 50%; background: #59d193; box-shadow: 0 0 8px #59d193; }
.campaign-row div { margin-right: auto; }
.campaign-row strong, .campaign-row small { display: block; font-size: .55rem; }
.campaign-row small { color: #5e6a7b; }
.campaign-row > b { color: #6cdca0; font-size: .55rem; }
.automation-section { overflow: hidden; border-block: 1px solid var(--border); background: #07090c; }
.automation-orb { position: absolute; top: 5%; left: -10%; width: 500px; height: 500px; border-radius: 50%; background: rgba(30,136,255,.06); filter: blur(100px); }
.automation-visual { position: relative; min-height: 500px; }
.flow-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle, black, transparent 72%); }
.flow-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 11px 15px; border: 1px solid rgba(83,182,255,.18); border-radius: 10px; background: rgba(12,17,24,.86); box-shadow: 0 15px 30px rgba(0,0,0,.35); backdrop-filter: blur(10px); }
.flow-node span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; color: var(--blue-light); background: rgba(30,136,255,.12); }
.flow-node strong { font-size: .62rem; }
.flow-center { top: 50%; left: 50%; flex-direction: column; width: 145px; height: 145px; justify-content: center; border-radius: 50%; border-color: rgba(83,182,255,.4); background: radial-gradient(circle, #132c48, #0a1018 70%); box-shadow: 0 0 0 15px rgba(30,136,255,.025), 0 0 50px rgba(30,136,255,.17); transform: translate(-50%,-50%); }
.flow-center span { width: 39px; height: 39px; border-radius: 12px; font-size: 1.1rem; box-shadow: 0 0 20px rgba(30,136,255,.25); }
.flow-center strong { margin-top: 4px; color: #d9ebff; font-size: .72rem; letter-spacing: .1em; }
.flow-center small { color: #4dca89; font-size: .48rem; }
.node-whatsapp { top: 14%; left: 8%; } .node-crm { top: 13%; right: 5%; }
.node-chat { bottom: 12%; left: 6%; } .node-data { right: 4%; bottom: 11%; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-lines path { fill: none; stroke: rgba(83,182,255,.32); stroke-width: 1; stroke-dasharray: 5 7; }
.data-particle { position: absolute; z-index: 3; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 10px var(--blue); animation: particleFlow 4s infinite; }
.p1 { top: 31%; left: 30%; } .p2 { top: 31%; right: 29%; animation-delay: -1s; } .p3 { bottom: 30%; left: 29%; animation-delay: -2s; } .p4 { right: 27%; bottom: 29%; animation-delay: -3s; }
.check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 18px; margin: 0 0 30px; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 24px; color: #a7b1bf; font-size: .76rem; }
.check-list li::before { position: absolute; left: 0; display: grid; width: 15px; height: 15px; place-items: center; border: 1px solid rgba(83,182,255,.3); border-radius: 50%; color: var(--blue-light); content: "✓"; font-size: .5rem; }

/* Testimonials and FAQ */
.testimonials-section { background: radial-gradient(circle at 50% 50%, rgba(30,136,255,.07), transparent 35%); }
.testimonial-slider { max-width: 870px; margin: 0 auto; }
.testimonial-track { position: relative; min-height: 315px; }
.testimonial { position: absolute; inset: 0; display: flex; align-items: center; flex-direction: column; padding: 48px 70px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: 0 30px 60px rgba(0,0,0,.25); text-align: center; opacity: 0; transform: translateX(30px) scale(.98); transition: .55s var(--ease); pointer-events: none; }
.testimonial.active { opacity: 1; transform: none; pointer-events: auto; }
.quote-mark { height: 42px; color: var(--blue-light); font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; text-shadow: 0 0 25px rgba(30,136,255,.35); }
.testimonial blockquote { max-width: 730px; margin: 14px auto 28px; color: #dce2ea; font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.5; letter-spacing: -.025em; }
.client { display: flex; align-items: center; gap: 12px; text-align: left; }
.client-avatar { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid rgba(255,255,255,.12); border-radius: 50%; font-size: .61rem; font-weight: 700; }
.avatar-one { background: linear-gradient(135deg,#374f6c,#1b2634); } .avatar-two { background: linear-gradient(135deg,#654c70,#2d2132); } .avatar-three { background: linear-gradient(135deg,#3c6655,#1e3229); }
.client strong, .client small { display: block; }
.client strong { font-size: .72rem; }
.client small { color: #6c7786; font-size: .59rem; }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 25px; }
.slider-controls > button { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: rgba(255,255,255,.02); transition: .3s; }
.slider-controls > button:hover { border-color: var(--blue); color: var(--blue-light); background: rgba(30,136,255,.08); }
.slider-dots { display: flex; gap: 7px; }
.slider-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 5px; background: #343c47; transition: .3s; }
.slider-dots button.active { width: 22px; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.faq-section { border-top: 1px solid var(--border); background: #07080a; }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item > button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 25px 4px; border: 0; background: transparent; text-align: left; }
.faq-item > button span { font-family: var(--display); font-size: 1rem; font-weight: 650; letter-spacing: -.015em; }
.faq-item > button i { position: relative; flex: 0 0 30px; height: 30px; margin-left: 20px; border: 1px solid var(--border); border-radius: 50%; transition: .3s; }
.faq-item > button i::before, .faq-item > button i::after { position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; content: ""; background: #8e99a8; transform: translate(-50%,-50%); transition: .3s; }
.faq-item > button i::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item.open > button { color: var(--blue-light); }
.faq-item.open > button i { border-color: rgba(83,182,255,.35); background: rgba(30,136,255,.1); transform: rotate(180deg); }
.faq-item.open > button i::after { transform: translate(-50%,-50%) rotate(0); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-answer > div { overflow: hidden; }
.faq-answer p { max-width: 670px; margin: 0; padding: 0 45px 25px 4px; color: var(--muted); font-size: .84rem; line-height: 1.75; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }

/* CTA, footer and modal */
.final-cta { position: relative; padding: 150px 0; overflow: hidden; border-top: 1px solid var(--border); text-align: center; background: #06080b; }
.cta-grid-bg { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(83,182,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(83,182,255,.1) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse, black, transparent 70%); }
.cta-orb { position: absolute; top: 50%; left: 50%; width: 750px; height: 400px; border-radius: 50%; background: rgba(30,136,255,.13); filter: blur(110px); transform: translate(-50%,-50%); }
.final-cta .container { position: relative; }
.final-cta .section-kicker { justify-content: center; }
.final-cta h2 { max-width: 950px; margin: 0 auto 25px; font-size: clamp(2.5rem, 5.7vw, 5rem); }
.final-cta p { max-width: 620px; margin: 0 auto 35px; color: var(--muted); font-size: 1rem; }
.final-cta > .container > small { display: block; margin-top: 15px; color: #535d6b; font-size: .6rem; }
.site-footer { position: relative; padding-top: 85px; overflow: hidden; border-top: 1px solid var(--border); background: #040405; }
.footer-glow { position: absolute; right: 15%; bottom: -300px; width: 500px; height: 500px; border-radius: 50%; background: rgba(30,136,255,.05); filter: blur(100px); }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.7fr .7fr .9fr 1.1fr; gap: 60px; padding-bottom: 65px; }
.footer-brand p { max-width: 335px; margin: 22px 0; color: #667181; font-size: .75rem; }
.footer-grid h3 { margin-bottom: 19px; color: #9fa8b5; font-family: var(--font); font-size: .63rem; letter-spacing: .11em; text-transform: uppercase; }
.footer-grid > div:not(.footer-brand) a, .footer-grid > div:not(.footer-brand) span { display: block; margin-bottom: 11px; color: #697483; font-size: .72rem; transition: color .25s; }
.footer-grid > div:not(.footer-brand) a:hover { color: var(--blue-light); }
.social-links { display: flex; gap: 8px; }
.social-links a { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: #8c97a6; font-size: .6rem; font-weight: 700; transition: .3s; }
.social-links a:hover { border-color: var(--blue); color: var(--white); background: var(--blue); transform: translateY(-3px); }
.footer-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-top: 1px solid var(--border); color: #414956; font-size: .59rem; letter-spacing: .04em; text-transform: uppercase; }
.footer-bottom p { margin: 0; }
.footer-bottom span { margin: 0 5px; color: var(--blue); }
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: grid; width: 53px; height: 53px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: #20bd65; box-shadow: 0 12px 30px rgba(32,189,101,.25); transition: .3s; }
.whatsapp-float:hover { box-shadow: 0 15px 38px rgba(32,189,101,.4); transform: translateY(-4px) scale(1.04); }
.whatsapp-float svg { width: 24px; fill: #fff; }
.project-modal { width: min(900px, calc(100% - 32px)); padding: 0; overflow: hidden; border: 1px solid var(--border-blue); border-radius: var(--radius-lg); color: var(--text); background: #090c11; box-shadow: 0 50px 100px rgba(0,0,0,.75), 0 0 80px rgba(30,136,255,.12); }
.project-modal::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(13px); }
.project-modal[open] { display: grid; grid-template-columns: 1fr 1fr; animation: modalIn .4s var(--ease); }
.modal-close { position: absolute; top: 15px; right: 15px; z-index: 5; display: grid; width: 35px; height: 35px; place-items: center; padding: 0 0 3px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(5,5,5,.55); font-size: 1.5rem; line-height: 1; backdrop-filter: blur(8px); }
.modal-visual { display: grid; min-height: 480px; padding: 50px 0 0 50px; place-items: end; overflow: hidden; background: radial-gradient(circle at 50%, rgba(30,136,255,.4), transparent 60%), #081322; }
.modal-screen { position: relative; width: 100%; height: 88%; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 15px 0 0; background: rgba(5,8,12,.82); box-shadow: 0 25px 50px rgba(0,0,0,.4); }
.modal-screen i { display: block; height: 34px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.03); }
.modal-screen i::before { display: block; width: 6px; height: 6px; margin: 14px; border-radius: 50%; content: ""; background: #4c5664; box-shadow: 10px 0 #343c47, 20px 0 #28303a; }
.modal-screen span { position: absolute; top: 55px; left: 20px; color: #485467; font-size: .5rem; letter-spacing: .15em; }
.modal-screen strong { position: absolute; top: 52%; left: 50%; color: #badeff; font-family: var(--display); font-size: 6rem; text-shadow: 0 0 40px var(--blue); transform: translate(-50%,-50%); }
.modal-content { display: flex; flex-direction: column; justify-content: center; padding: 60px 45px; }
.modal-content h2 { margin-bottom: 17px; font-size: 2.15rem; }
.modal-content > p { color: var(--muted); font-size: .84rem; }
.modal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 30px; }
.modal-meta span { padding: 12px; border: 1px solid var(--border); border-radius: 9px; }
.modal-meta small, .modal-meta strong { display: block; }
.modal-meta small { margin-bottom: 4px; color: #596575; font-size: .5rem; }
.modal-meta strong { color: #c4cfdd; font-size: .58rem; }

/* Inner pages and forms */
.inner-hero { position: relative; padding: 190px 0 105px; overflow: hidden; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 65% 25%, rgba(30,136,255,.14), transparent 34%), #050608; }
.inner-hero::before { position: absolute; inset: 0; content: ""; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to bottom, black, transparent); }
.inner-hero .container { position: relative; }
.inner-hero h1 { max-width: 950px; margin-bottom: 24px; font-size: clamp(3rem, 7vw, 6rem); }
.inner-hero p { max-width: 680px; margin-bottom: 0; color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem); }
.breadcrumbs { display: flex; gap: 8px; margin-bottom: 28px; color: #5d6878; font-size: .68rem; }
.breadcrumbs a { color: var(--blue-light); }
.content-section { padding: 110px 0; }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.content-grid h2 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); }
.content-grid p { color: var(--muted); }
.value-panel { padding: 45px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(30,136,255,.08), rgba(255,255,255,.02)); }
.value-panel blockquote { margin: 0; font-family: var(--display); font-size: 1.5rem; line-height: 1.5; letter-spacing: -.03em; }
.value-panel span { display: block; margin-top: 25px; color: var(--blue-light); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.detail-card { padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.02); }
.detail-card > span { color: var(--blue-light); font-family: var(--display); font-size: .7rem; }
.detail-card h2, .detail-card h3 { margin: 25px 0 13px; font-size: 1.3rem; }
.detail-card p { margin: 0; color: var(--muted); font-size: .8rem; }
.detail-card ul { margin: 22px 0 0; padding: 0; list-style: none; }
.detail-card li { padding: 8px 0; border-top: 1px solid var(--border); color: #8290a1; font-size: .72rem; }
.contact-section { padding: 170px 0 120px; background: radial-gradient(circle at 80% 15%, rgba(30,136,255,.11), transparent 30%); }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
.contact-layout-simple { grid-template-columns: 1fr; max-width: 720px; }
.contact-copy h1 { font-size: clamp(2.8rem, 5.5vw, 4.8rem); }
.contact-copy > p { color: var(--muted); }
.contact-options { margin-top: 45px; }
.contact-option { display: flex; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--border); }
.contact-option > span { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid var(--border-blue); border-radius: 10px; color: var(--blue-light); background: rgba(30,136,255,.07); }
.contact-option small, .contact-option strong { display: block; }
.contact-option small { color: #576373; font-size: .56rem; text-transform: uppercase; letter-spacing: .1em; }
.contact-option strong { font-size: .78rem; }
.contact-form-wrap { padding: 38px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(12,15,20,.78); box-shadow: 0 30px 65px rgba(0,0,0,.3); backdrop-filter: blur(18px); }
.contact-form-wrap h2 { margin-bottom: 8px; font-size: 1.65rem; }
.contact-form-wrap > p { margin-bottom: 28px; color: var(--muted); font-size: .77rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.form-field { position: relative; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { display: block; margin-bottom: 7px; color: #98a3b1; font-size: .67rem; font-weight: 600; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; outline: 0; background: rgba(255,255,255,.025); transition: .3s; }
.form-field input { height: 49px; padding: 0 14px; }
.form-field textarea { min-height: 135px; padding: 13px 14px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: rgba(83,182,255,.55); box-shadow: 0 0 0 3px rgba(30,136,255,.08); }
.form-field .error { display: block; margin-top: 5px; color: #ff7b8a; font-size: .58rem; }
.form-field.has-error input, .form-field.has-error textarea { border-color: rgba(255,91,112,.55); }
.form-honeypot { position: absolute; left: -9999px; }
.form-submit { width: 100%; margin-top: 20px; }
.form-status { margin-bottom: 20px; padding: 12px 15px; border: 1px solid; border-radius: 9px; font-size: .72rem; }
.form-status.success { border-color: rgba(75,209,140,.3); color: #7be0aa; background: rgba(75,209,140,.07); }
.form-status.error { border-color: rgba(255,91,112,.3); color: #ff8d9c; background: rgba(255,91,112,.07); }

/* Reveal and animations */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .15s; }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 8px var(--blue); } 50% { opacity: .45; box-shadow: 0 0 16px var(--blue); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes scrollDown { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@keyframes particleFlow { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(25px) scale(.97); } }

/* Responsive */
@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: .92fr 1.08fr; gap: 25px; }
    .dashboard-window { width: 100%; }
    .floating-leads { right: -2%; }
    .main-nav { gap: 24px; }
    .feature-split { gap: 50px; }
    .advantages-layout, .faq-layout { gap: 55px; }
}
@media (max-width: 900px) {
    .section { padding: 105px 0; }
    .nav-cta { display: none; }
    .menu-toggle { display: block; position: relative; z-index: 3; }
    .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
    body.menu-open .site-header { backdrop-filter: none; }
    .main-nav {
        position: fixed;
        top: 0;
        left: 50%;
        z-index: 2;
        width: 100vw;
        height: 100dvh;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 30px;
        padding: 90px 24px 40px;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -15px);
        transition: opacity .3s var(--ease), visibility .3s var(--ease), transform .3s var(--ease);
    }
    .main-nav.open { opacity: 1; visibility: visible; transform: translateX(-50%); }
    .main-nav a {
        width: min(100%, 320px);
        padding: 8px 16px;
        color: #183553;
        font-family: var(--display);
        font-size: clamp(1.35rem, 6vw, 1.8rem);
        text-align: center;
    }
    .hero { min-height: auto; padding: 155px 0 110px; }
    .hero-grid { grid-template-columns: 1fr; gap: 75px; }
    .hero-copy { text-align: center; }
    .eyebrow { justify-content: center; }
    .hero h1, .hero-copy > p { margin-inline: auto; }
    .hero-actions, .hero-trust { justify-content: center; }
    .hero-visual { width: min(700px, 92%); margin: 0 auto; }
    .dashboard-window { transform: rotateY(-3deg) rotateX(2deg); }
    .scroll-cue { display: none; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .project-visual { height: 300px; }
    .advantages-layout, .faq-layout { grid-template-columns: 1fr; }
    .sticky-copy { position: static; }
    .process-line { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
    .process-line::before { display: none; }
    .process-line article {
        padding: 18px 0 18px 22px;
        border-left: 1px solid var(--border);
    }
    .process-line article > i {
        position: absolute;
        top: 22px;
        left: -7px;
        margin: 0;
    }
    .process-line article > span { margin-bottom: 10px; }
    .process-line h3 { margin: 0 0 8px; }
    .feature-split, .feature-split.reverse { grid-template-columns: 1fr; }
    .ads-dashboard { grid-row: 1; }
    .automation-visual { min-height: 450px; }
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
    .footer-contact { grid-column: 2 / 4; }
    .content-grid, .contact-layout { grid-template-columns: 1fr; gap: 50px; }
    .detail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .container { width: min(calc(100% - 30px), var(--container)); }
    .section { padding: 82px 0; }
    .site-header { padding: 14px 0; }
    .brand-logo { height: 38px; }
    .brand-logo-footer { height: 48px; }
    .hero { padding: 130px 0 85px; }
    .hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
    .eyebrow { font-size: .57rem; }
    .hero-copy > p { font-size: .93rem; }
    .hero-actions { align-items: stretch; flex-direction: column; }
    .hero-actions .button { width: 100%; }
    .hero-trust { margin-top: 28px; }
    .hero-visual { width: 105%; margin-left: -2.5%; }
    .dashboard-layout { grid-template-columns: 39px 1fr; min-height: 385px; }
    .dash-sidebar { gap: 17px; padding: 12px 0; }
    .dash-sidebar i { width: 11px; height: 11px; }
    .dash-logo { width: 22px; height: 22px; }
    .dash-main { padding: 16px 12px; }
    .mobile-hide { display: none; }
    .metric-row { grid-template-columns: repeat(2, 1fr); }
    .hero-chart { height: 110px; }
    .dash-bottom-grid { display: none; }
    .floating-leads { top: 4%; right: -1%; }
    .floating-ai { right: 0; bottom: -6%; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); padding: 20px 0; }
    .stats-grid > div { padding: 20px 5px; }
    .stats-grid > div:nth-child(3) { border-left: 0; }
    .stats-grid strong { font-size: 1.75rem; }
    .stats-grid p { font-size: .55rem; }
    .section-heading { display: block; margin-bottom: 40px; }
    .section-heading > p { margin-top: 20px; }
    .section-heading h2, .sticky-copy h2, .feature-copy h2 { font-size: 2.35rem; }
    .services-grid, .portfolio-grid { grid-template-columns: 1fr; }
    .service-card { min-height: 270px; }
    .project-visual { height: 265px; }
    .project-browser { right: 5%; left: 5%; }
    .project-content { padding: 24px 22px 26px; }
    .advantages-grid { grid-template-columns: 1fr; }
    .advantage-card { border-right: 0; }
    .advantage-card:nth-last-child(2) { border-bottom: 1px solid var(--border); }
    .process-line { grid-template-columns: repeat(2, 1fr); row-gap: 35px; }
    .ads-dashboard { padding: 17px 12px; }
    .ads-metrics > div { padding: 10px 8px; }
    .ads-metrics strong { font-size: .72rem; }
    .ads-chart svg { height: 125px; }
    .automation-visual { min-height: 390px; transform: scale(.93); }
    .flow-center { width: 115px; height: 115px; }
    .flow-node { padding: 8px 9px; }
    .flow-node span { width: 21px; height: 21px; }
    .node-whatsapp { left: 0; } .node-crm { right: 0; } .node-chat { left: 0; } .node-data { right: 0; }
    .check-list { grid-template-columns: 1fr; }
    .testimonial-track { min-height: 400px; }
    .testimonial { padding: 35px 22px; }
    .testimonial blockquote { font-size: 1.08rem; }
    .final-cta { padding: 100px 0; }
    .final-cta h2 { font-size: 2.6rem; }
    .button-xl { width: 100%; padding-inline: 18px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 25px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-contact { grid-column: 1 / -1; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
    .whatsapp-float { right: 14px; bottom: 14px; width: 49px; height: 49px; }
    .project-modal[open] { display: block; max-height: calc(100vh - 25px); overflow-y: auto; }
    .modal-visual { min-height: 260px; padding: 45px 0 0 30px; }
    .modal-content { padding: 35px 25px; }
    .inner-hero { padding: 145px 0 80px; }
    .inner-hero h1 { font-size: 3rem; }
    .detail-grid { grid-template-columns: 1fr; }
    .contact-section { padding: 135px 0 85px; }
    .contact-form-wrap { padding: 26px 18px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-field.full { grid-column: auto; }
}

/* Hero comercial — vitrine de sites */
.page-home .hero {
    color: #071426;
    background:
        radial-gradient(circle at 82% 18%, rgba(30, 136, 255, .22), transparent 28%),
        radial-gradient(circle at 18% 85%, rgba(83, 182, 255, .15), transparent 30%),
        linear-gradient(135deg, #f9fbff 0%, #edf5ff 52%, #f7fbff 100%);
}
.page-home .hero::before {
    opacity: .45;
    background-image:
        linear-gradient(rgba(30, 136, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 136, 255, .07) 1px, transparent 1px);
}
.page-home .hero h1 { color: #071426; }
.page-home .hero h1 em {
    background: linear-gradient(105deg, #0a63c9, #1e88ff 55%, #53b6ff);
    background-clip: text;
    -webkit-background-clip: text;
}
.page-home .hero-copy > p { color: #526277; }
.page-home .eyebrow {
    color: #096acb;
    border-color: rgba(30, 136, 255, .2);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 35px rgba(31, 105, 180, .08);
}
.page-home .button-ghost {
    color: #0b315d;
    border-color: rgba(12, 78, 145, .18);
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 10px 30px rgba(35, 88, 139, .08);
}
.page-home .hero-trust small { color: #607087; }
.page-home .stars { color: #0878e7; }
.page-home .avatar-stack span { border-color: #eef6ff; }
.page-home .scroll-cue { color: #59718c; }
.page-home .scroll-cue span { border-color: rgba(17, 86, 153, .3); }
.page-home .site-header:not(.scrolled) .main-nav a { color: #34485f; }
.page-home .site-header:not(.scrolled) .main-nav a:hover,
.page-home .site-header:not(.scrolled) .main-nav a[aria-current="page"] { color: #056fd8; }
.page-home .site-header:not(.scrolled) .menu-toggle {
    border-color: rgba(7, 63, 119, .2);
    background: rgba(255, 255, 255, .72);
}
.page-home .site-header:not(.scrolled) .menu-toggle span { background: #0a315b; }
.page-home .hero-orb-one {
    border-color: rgba(30, 136, 255, .2);
    box-shadow: inset 0 0 100px rgba(30, 136, 255, .08);
}
.page-home .visual-halo {
    inset: -25%;
    background: radial-gradient(circle, rgba(30, 136, 255, .25), transparent 62%);
    filter: blur(30px);
}
.hero-sites-showcase { min-width: 0; }
.sites-browser {
    position: relative;
    z-index: 3;
    width: 108%;
    overflow: hidden;
    border: 1px solid rgba(25, 91, 158, .2);
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 45px 90px rgba(20, 63, 106, .25),
        0 10px 30px rgba(30, 136, 255, .13),
        inset 0 1px rgba(255, 255, 255, .9);
    transform: perspective(1300px) rotateY(-5deg) rotateX(1.5deg);
    transform-origin: center;
}
.sites-browser .window-bar {
    color: #728197;
    border-color: #e5ebf2;
    background: #f7f9fc;
}
.sites-browser .window-dots i:first-child { background: #ff6b68; }
.sites-browser .window-dots i:nth-child(2) { background: #ffbe43; }
.sites-browser .window-dots i:nth-child(3) { background: #36c96d; }
.sites-browser .window-bar b {
    color: #0878e7;
    background: rgba(30, 136, 255, .08);
}
.browser-address {
    max-width: 54%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sites-carousel-viewport { position: relative; width: 100%; overflow: hidden; background: #f4f7fa; }
.sites-carousel-track {
    display: flex;
    width: 100%;
    transition: transform .75s var(--ease);
    will-change: transform;
}
.site-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    background: #fff;
}
.site-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: top center;
}
.site-slide figcaption {
    position: absolute;
    right: 17px;
    bottom: 16px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 9px;
    color: #fff;
    background: rgba(5, 15, 28, .72);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px);
}
.site-slide figcaption span {
    color: #82c8ff;
    font-size: .45rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.site-slide figcaption strong { font-size: .68rem; }
.sites-carousel-footer {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px 0 18px;
    background: #fff;
}
.site-carousel-dots { display: flex; gap: 7px; }
.site-carousel-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #cbd5e1;
    transition: .35s var(--ease);
}
.site-carousel-dots button.active {
    width: 28px;
    background: var(--blue);
    box-shadow: 0 0 12px rgba(30, 136, 255, .4);
}
.site-carousel-arrows { display: flex; gap: 7px; }
.site-carousel-arrows button {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid #dce4ed;
    border-radius: 50%;
    color: #274867;
    background: #f8fafc;
    transition: .3s;
}
.site-carousel-arrows button:hover {
    color: #fff;
    border-color: var(--blue);
    background: var(--blue);
    transform: translateY(-2px);
}
.site-peek-card {
    position: absolute;
    z-index: 1;
    width: 72%;
    overflow: hidden;
    border: 7px solid rgba(255, 255, 255, .78);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 24px 55px rgba(20, 60, 100, .18);
    opacity: .58;
}
.site-peek-card img { width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: top; }
.site-peek-one { top: -7%; right: -15%; transform: rotate(5deg) translateY(-4%); }
.site-peek-two { bottom: -8%; left: -5%; transform: rotate(-5deg); opacity: .35; }
.hero-sites-showcase .floating-leads {
    top: auto;
    right: -7%;
    bottom: 8%;
    color: #15283d;
    border-color: rgba(30, 136, 255, .18);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 42px rgba(20, 65, 110, .18);
}
.hero-sites-showcase .floating-card small { color: #728197; }
.hero-sites-showcase .floating-card b { color: #0878e7; }
.page-home .stats-section {
    color: #14253a;
    border-color: rgba(22, 77, 128, .12);
    background: rgba(255, 255, 255, .96);
}
.page-home .stats-grid > div { border-color: rgba(22, 77, 128, .12); }
.page-home .stats-grid p { color: #68798d; }

/* Tema claro em toda a experiência */
body {
    color: #10233a;
    background: #f7faff;
}
h1 em, h2 em {
    background: linear-gradient(105deg, #075fb9, #1e88ff 58%, #53b6ff);
    background-clip: text;
    -webkit-background-clip: text;
}
.site-header.scrolled {
    border-color: rgba(20, 73, 126, .12);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 40px rgba(22, 66, 110, .09);
}
.site-header.scrolled .main-nav a { color: #455a70; }
.site-header.scrolled .main-nav a:hover,
.site-header.scrolled .main-nav a[aria-current="page"] { color: #0878e7; }
.site-header:not(.scrolled) .main-nav a { color: #34485f; }
.site-header:not(.scrolled) .main-nav a:hover,
.site-header:not(.scrolled) .main-nav a[aria-current="page"] { color: #0878e7; }
.site-header.scrolled .menu-toggle {
    border-color: rgba(20, 73, 126, .15);
    background: #f3f7fb;
}
.site-header.scrolled .menu-toggle span { background: #173b61; }
.site-header:not(.scrolled) .menu-toggle {
    border-color: rgba(20, 73, 126, .15);
    background: rgba(255, 255, 255, .78);
}
.site-header:not(.scrolled) .menu-toggle span { background: #173b61; }
.section-heading > p,
.sticky-copy > p,
.feature-copy > p,
.content-grid p,
.detail-card p,
.contact-copy > p { color: #627389; }
.services-section {
    background:
        radial-gradient(circle at 12% 10%, rgba(30, 136, 255, .11), transparent 28%),
        #f8fbff;
}
.service-card {
    color: #12263e;
    border-color: rgba(21, 78, 133, .12);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 45px rgba(27, 73, 117, .07);
}
.service-card:hover {
    border-color: rgba(30, 136, 255, .3);
    box-shadow: 0 24px 55px rgba(28, 80, 132, .13);
}
.service-card p { color: #66778b; }
.service-card a { color: #0b6bc8; }
.service-top small { color: #8291a4; }
.portfolio-section { background: #edf5ff; }
.project-card {
    color: #10233a;
    border-color: rgba(21, 78, 133, .12);
    background: #fff;
    box-shadow: 0 18px 46px rgba(28, 70, 112, .08);
}
.project-card:hover {
    border-color: rgba(30, 136, 255, .25);
    box-shadow: 0 30px 65px rgba(27, 73, 117, .15);
}
.project-content > small { color: #0878e7; }
.project-content > span:not(.project-title-row) { color: #68798d; }
.project-title-row i { border-color: #dbe6f1; color: #0878e7; }
.advantages-section {
    border-color: rgba(21, 78, 133, .1);
    background:
        radial-gradient(circle at 80% 40%, rgba(30, 136, 255, .1), transparent 32%),
        #fff;
}
.advantage-card { border-color: rgba(21, 78, 133, .11); }
.advantage-card h3 { color: #132943; }
.advantage-card p { color: #68798d; }
.advantage-card:hover { background: linear-gradient(135deg, rgba(30,136,255,.09), rgba(255,255,255,.4)); }
.process-section { background: #edf5ff; }
.process-line::before { background: linear-gradient(90deg, var(--blue), rgba(30,136,255,.28), rgba(21,78,133,.12)); }
.process-line article > i { border-color: #edf5ff; }
.process-line h3 { color: #132943; }
.process-line p { color: #68798d; }
.ads-section {
    background:
        radial-gradient(circle at 85% 60%, rgba(30,136,255,.13), transparent 34%),
        #fff;
}
.platform-list span {
    color: #4d6178;
    border-color: rgba(21, 78, 133, .12);
    background: #f7faff;
}
.ads-dashboard {
    color: #132943;
    border-color: rgba(30, 136, 255, .18);
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 30px 70px rgba(25, 72, 118, .15);
}
.ads-top,
.ads-metrics > div,
.ads-chart,
.campaign-row { border-color: rgba(21, 78, 133, .11); }
.ads-metrics > div { background: #f8fbff; }
.grid-lines { stroke: rgba(16, 56, 96, .08); }
.automation-section {
    color: #10233a;
    border-color: rgba(21, 78, 133, .1);
    background: #edf5ff;
}
.flow-grid {
    opacity: .3;
    background-image:
        linear-gradient(rgba(30,136,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,136,255,.12) 1px, transparent 1px);
}
.flow-node {
    color: #17304d;
    border-color: rgba(30, 136, 255, .2);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 15px 30px rgba(28, 70, 112, .12);
}
.flow-center {
    color: #fff;
    background: radial-gradient(circle, #1e88ff, #0b5daf 72%);
}
.flow-center strong { color: #fff; }
.check-list li { color: #52677e; }
.testimonials-section {
    background:
        radial-gradient(circle at 50% 50%, rgba(30,136,255,.1), transparent 38%),
        #fff;
}
.testimonial {
    border-color: rgba(21, 78, 133, .12);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 25px 60px rgba(27, 73, 117, .1);
}
.testimonial blockquote { color: #1c314a; }
.client strong { color: #17304d; }
.slider-controls > button {
    color: #294967;
    border-color: rgba(21, 78, 133, .15);
    background: #f7faff;
}
.faq-section {
    border-color: rgba(21, 78, 133, .1);
    background: #edf5ff;
}
.faq-list,
.faq-item { border-color: rgba(21, 78, 133, .12); }
.faq-item > button { color: #142a44; }
.faq-item > button i { border-color: rgba(21, 78, 133, .18); }
.faq-item.open > button { color: #0878e7; }
.faq-answer p { color: #627389; }
.final-cta {
    color: #10233a;
    border-color: rgba(21, 78, 133, .1);
    background:
        radial-gradient(circle at 50% 50%, rgba(30, 136, 255, .18), transparent 48%),
        linear-gradient(135deg, #f8fbff, #e6f2ff);
}
.final-cta p { color: #5b6e84; }
.final-cta > .container > small { color: #6c7d90; }
.cta-grid-bg {
    opacity: .4;
    background-image:
        linear-gradient(rgba(30,136,255,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,136,255,.1) 1px, transparent 1px);
}
.site-footer {
    color: #18304b;
    border-color: rgba(21, 78, 133, .1);
    background: #fff;
}
.footer-brand p { color: #66778b; }
.footer-grid h3 { color: #344d68; }
.footer-grid > div:not(.footer-brand) a,
.footer-grid > div:not(.footer-brand) span { color: #68798d; }
.social-links a {
    color: #31516f;
    border-color: rgba(21, 78, 133, .15);
}
.footer-bottom {
    color: #7a899a;
    border-color: rgba(21, 78, 133, .1);
}
.inner-hero {
    color: #10233a;
    border-color: rgba(21, 78, 133, .1);
    background:
        radial-gradient(circle at 65% 25%, rgba(30,136,255,.17), transparent 36%),
        #f5f9ff;
}
.inner-hero::before {
    background-image:
        linear-gradient(rgba(30,136,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,136,255,.08) 1px, transparent 1px);
}
.inner-hero p { color: #627389; }
.content-section,
.contact-section { background-color: #f8fbff; }
.value-panel,
.detail-card,
.contact-form-wrap {
    color: #142a44;
    border-color: rgba(21, 78, 133, .12);
    background: #fff;
    box-shadow: 0 20px 50px rgba(27, 73, 117, .08);
}
.detail-card li,
.contact-option { border-color: rgba(21, 78, 133, .11); }
.form-field input,
.form-field textarea {
    color: #142a44;
    border-color: rgba(21, 78, 133, .14);
    background: #f8fbff;
}

@media (max-width: 900px) {
    .sites-browser { width: 100%; transform: rotateY(-2deg) rotateX(1deg); }
    .site-peek-one { right: -8%; }
    .hero-sites-showcase .floating-leads { right: -3%; }
    .main-nav {
        background: rgba(248, 251, 255, .97);
    }
    .main-nav a,
    .page-home .main-nav.open a { color: #183553; }
}
@media (max-width: 640px) {
    .page-home .hero { padding: 120px 0 90px; }
    .hero-grid { gap: 48px; }
    .hero-copy { width: 100%; }
    .hero h1 {
        max-width: 100%;
        font-size: clamp(2.4rem, 11.5vw, 3.4rem);
        line-height: 1.04;
    }
    .hero-copy > p { font-size: .9rem; line-height: 1.65; }
    .hero-trust { flex-wrap: wrap; }
    .hero-sites-showcase { width: 100%; margin-left: 0; }
    .sites-browser { border-radius: 14px; transform: none; }
    .site-slide img {
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }
    .site-slide figcaption { right: 9px; bottom: 9px; padding: 7px 9px; }
    .site-peek-card { display: none; }
    .hero-sites-showcase .floating-leads { display: none; }
    .sites-carousel-footer { min-height: 48px; }
    .browser-address { max-width: 45%; font-size: .48rem; }
    .section { padding: 76px 0; }
    .services-grid { grid-template-columns: 1fr; }
    .service-card { min-height: auto; padding: 25px; }
    .service-top { margin-bottom: 28px; }
    .process-line { grid-template-columns: 1fr; }
    .process-line article { min-height: 105px; }
    .feature-split,
    .feature-split.reverse { gap: 42px; }
    .automation-visual { width: 112%; margin-left: -6%; }
    .testimonial-track { min-height: 430px; }
    .faq-item > button { padding-block: 21px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand,
    .footer-contact { grid-column: auto; }
}

/* Refinamento premium: ícones, provas sociais e portfólio real */
.service-icon svg,
.advantage-card > span svg,
.flow-node span svg,
.platform-list i svg,
.project-title-row i svg,
.project-view svg,
.social-links svg,
.social-float svg,
.trust-brands svg {
    width: 21px;
    height: 21px;
}
.service-icon { color: #0878e7; }
.advantage-card > span svg { width: 19px; height: 19px; }
.flow-node span svg { width: 15px; height: 15px; }
.flow-center span svg { width: 21px; height: 21px; }
.platform-list i { display: grid; width: 20px; place-items: center; }
.platform-list i svg { width: 17px; height: 17px; }

.avatar-stack img,
.avatar-stack span {
    width: 38px;
    height: 38px;
    margin-left: -9px;
    border: 3px solid #eef6ff;
    border-radius: 50%;
}
.avatar-stack img {
    object-fit: cover;
    box-shadow: 0 5px 14px rgba(20, 66, 110, .18);
}
.avatar-stack img:first-child { margin-left: 0; }
.avatar-stack span {
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #1e88ff, #0865c5);
    font-size: .6rem;
    font-weight: 800;
}

.trust-strip {
    padding: 27px 0 31px;
    border-block: 1px solid rgba(21, 78, 133, .1);
    background: #fff;
}
.trust-strip p {
    margin: 0 0 18px;
    color: #718196;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-align: center;
    text-transform: uppercase;
}
.trust-brands {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.trust-brands > span {
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 13px 16px;
    border: 1px solid rgba(21, 78, 133, .1);
    border-radius: 12px;
    color: #173c64;
    background: #f8fbff;
}
.trust-brands svg {
    grid-row: 1 / 3;
    width: 23px;
    height: 23px;
    color: #1785ed;
}
.trust-brands b { font: 750 .75rem/1.2 var(--display); }
.trust-brands small { color: #78899c; font-size: .55rem; }

.project-visual {
    height: 355px;
    background: #dfeaf6;
}
.project-visual::after {
    z-index: 1;
    opacity: .24;
    background: linear-gradient(to top, rgba(5, 18, 32, .42), transparent 45%);
    mask-image: none;
}
.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .7s var(--ease);
}
.project-card:hover .project-image { transform: scale(1.035); }
.project-metric { top: 18px; right: 18px; }
.project-view {
    position: absolute;
    right: 18px;
    bottom: 17px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 9px;
    color: #fff;
    background: rgba(5, 23, 42, .72);
    font-size: .62rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}
.project-view svg { width: 14px; height: 14px; transition: transform .3s; }
.project-card:hover .project-view svg { transform: translate(2px, -2px); }
.project-title-row i svg { width: 16px; height: 16px; }
.mobile-swipe-hint { display: none; }

.client-avatar {
    width: 56px;
    height: 56px;
    border: 3px solid #fff;
    object-fit: cover;
    box-shadow: 0 8px 22px rgba(22, 65, 106, .18);
}
.client strong { font-size: .78rem; }
.client small { color: #66788c; font-size: .62rem; }

.faq-section .text-link {
    align-items: center;
    padding: 13px 17px;
    border: 1px solid rgba(30, 136, 255, .28);
    border-radius: 10px;
    color: #075fae;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 25px rgba(25, 75, 125, .08);
}
.faq-section .text-link:hover {
    color: #fff;
    border-color: #1e88ff;
    background: #1e88ff;
}
.faq-section .text-link:hover span { color: #fff; }

.social-links a { width: 39px; height: 39px; }
.social-links svg { width: 18px; height: 18px; }
.floating-socials {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 11px;
}
.social-float {
    display: flex;
    width: 55px;
    height: 55px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 28px;
    color: #fff;
    box-shadow: 0 14px 35px rgba(18, 61, 102, .24);
    transition: width .35s var(--ease), transform .3s, box-shadow .3s;
}
.social-float svg { flex: 0 0 24px; width: 24px; height: 24px; }
.social-float span {
    width: 0;
    overflow: hidden;
    font-size: .72rem;
    font-weight: 750;
    opacity: 0;
    transition: width .35s var(--ease), margin .35s, opacity .25s;
    white-space: nowrap;
}
.social-float:hover {
    width: 138px;
    transform: translateY(-3px);
}
.social-float:hover span { width: 72px; margin-left: 9px; opacity: 1; }
.whatsapp-float {
    position: static;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #2bd36f, #12a953);
    box-shadow: 0 14px 35px rgba(18, 169, 83, .3);
    animation: socialPulse 2.8s ease-in-out infinite;
}
.whatsapp-float:hover {
    width: 138px;
    box-shadow: 0 17px 42px rgba(18,169,83,.4);
    transform: translateY(-3px);
    animation-play-state: paused;
}
.whatsapp-float svg,
.social-links a[aria-label="WhatsApp"] svg,
.contact-option[href*="wa.me"] svg,
.flow-node.node-whatsapp span svg {
    fill: currentColor;
    stroke: none;
}
.whatsapp-float svg { color: #fff; }
.instagram-float {
    background: linear-gradient(135deg, #6f42d9 0%, #d62f86 58%, #f4a23a 100%);
}
.instagram-float:hover { width: 138px; box-shadow: 0 17px 42px rgba(190, 45, 130, .35); }
@keyframes socialPulse {
    0%, 100% { box-shadow: 0 14px 35px rgba(18,169,83,.3), 0 0 0 0 rgba(34,197,94,.22); }
    55% { box-shadow: 0 14px 35px rgba(18,169,83,.35), 0 0 0 10px rgba(34,197,94,0); }
}

.project-modal {
    color: #142a44;
    border-color: rgba(30,136,255,.22);
    background: #fff;
    box-shadow: 0 45px 100px rgba(13, 47, 82, .28);
}
.modal-visual { min-height: 500px; padding: 0; place-items: stretch; background: #eaf3fc; }
.modal-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.modal-content > p { color: #617389; }
.modal-meta span { border-color: rgba(21,78,133,.12); background: #f7faff; }
.modal-meta strong { color: #183653; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-actions .button { flex: 1 1 160px; padding-inline: 14px; }
.modal-actions .button-ghost { color: #0b67bf; border-color: rgba(30,136,255,.25); background: #f3f8fe; }
.contact-option > span svg { width: 19px; height: 19px; }
.detail-card li { display: flex; align-items: center; gap: 9px; }
.detail-card li svg { flex: 0 0 15px; width: 15px; height: 15px; color: #1683ec; }

@media (max-width: 900px) {
    .trust-brands { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .trust-strip { padding-block: 24px; overflow: hidden; }
    .trust-brands {
        display: flex;
        gap: 10px;
        margin-right: -15px;
        padding-right: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .trust-brands::-webkit-scrollbar,
    .portfolio-grid::-webkit-scrollbar { display: none; }
    .trust-brands > span { flex: 0 0 185px; scroll-snap-align: start; }
    .portfolio-section { overflow: hidden; }
    .mobile-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        margin: -15px 0 14px;
        color: #54708c;
        font-size: .67rem;
        font-weight: 700;
    }
    .mobile-swipe-hint svg { width: 14px; height: 14px; }
    .portfolio-grid {
        display: flex;
        gap: 14px;
        margin-right: -15px;
        padding: 5px 15px 22px 0;
        overflow-x: auto;
        scroll-padding-left: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .portfolio-grid .project-card {
        flex: 0 0 88%;
        scroll-snap-align: start;
    }
    .project-visual { height: 250px; }
    .project-content { padding: 22px 20px 24px; }
    .testimonial-track { min-height: 455px; }
    .floating-socials { right: 13px; bottom: 13px; gap: 9px; }
    .social-float,
    .whatsapp-float { width: 50px; height: 50px; }
    .social-float:hover,
    .whatsapp-float:hover,
    .instagram-float:hover { width: 50px; transform: translateY(-2px); }
    .social-float:hover span { width: 0; margin: 0; opacity: 0; }
    .modal-visual { min-height: 270px; padding: 0; }
}

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