:root {
 --ink: #0a1220;
 --muted: #687386;
 --line: #e5e9ef;
 --blue: #4169ff;
 --blue2: #7d90ff;
 --soft: #f5f7fb;
 --dark: #07101e;
 --shadow: 0 24px 70px rgba(19,32,59,.12);
 --radius: 28px;
}

* {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 color: var(--ink);
 font-family: "DM Sans",Arial,sans-serif;
 background: #fff;
}

body:before {
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
 opacity: .22;
 background-image: radial-gradient(#cfd5df .6px,transparent .6px);
 background-size: 6px 6px;
 z-index: -2;
}

.progress {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: 14px;
 z-index: 100;
 background: white;
}

.progress span {
 display: block;
 width: 0;
 height: 100%;
 background: linear-gradient(90deg,#4169ff,#a9b5ff);
}

a {
 color: inherit;
}

.wrap {
 width: min(1180px,calc(100% - 48px));
 margin: auto;
}

.nav {
 position: sticky;
 top: 14px;
 z-index: 80;
 width: min(1180px,calc(100% - 28px));
 height: 72px;
 margin: 14px auto 0;
 padding: 0 10px 0 16px;
 border: 1px solid rgba(225,230,238,.9);
 background: rgba(255,255,255,.84);
 backdrop-filter: blur(18px);
 border-radius: 0px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 box-shadow: 0 12px 45px rgba(24,36,59,.06);
}

.brand {
 display: flex;
 align-items: center;
 gap: 9px;
 text-decoration: none;
}

.brand img {
 width: 108px;
 height: 34px;
 object-fit: contain;
}

.brand span {
 font: 800 10px Manrope;
 letter-spacing: .08em;
 display: none;
}

.nav nav {
 display: flex;
 gap: 27px;
 margin-left: auto;
 margin-right: 25px;
}

.nav nav a {
 font-size: 11px;
 text-decoration: none;
 color: #626c7c;
 font-weight: 600;
}

.nav nav a:hover {
 color: var(--ink);
}

.nav-actions {
 display: flex;
 align-items: center;
 gap: 10px;
}

.langs {
 position: relative;
}

.lang-btn {
 border: 1px solid var(--line);
 background: #fff;
 border-radius: 11px;
 padding: 10px 11px;
 font-size: 10px;
 font-weight: 800;
 cursor: pointer;
}

.lang-btn span {
 margin-left: 3px;
}

.lang-menu {
 display: none;
 position: absolute;
 right: 0;
 top: 46px;
 background: #fff;
 border: 1px solid var(--line);
 border-radius: 13px;
 padding: 7px;
 min-width: 125px;
 box-shadow: var(--shadow);
}

.langs.open .lang-menu {
 display: grid;
}

.lang-menu a {
 padding: 9px 10px;
 text-decoration: none;
 font-size: 11px;
 border-radius: 8px;
}

.lang-menu a:hover {
 background: var(--soft);
}

.nav-cta,.drawer-cta {
 background: var(--ink);
 color: #fff;
 border-radius: 11px;
 padding: 12px 15px;
 text-decoration: none;
 font-size: 10px;
 font-weight: 800;
}

.nav-cta span {
 margin-left: 7px;
}

.menu {
 display: none;
 border: 0;
 background: var(--ink);
 color: #fff;
 border-radius: 11px;
 width: 40px;
 height: 40px;
 font-size: 18px;
}

.mobile-drawer {
 display: none;
}

.hero {
 min-height: 670px;
 display: grid;
 grid-template-columns: 1.02fr .98fr;
 align-items: center;
 gap: 35px;
 padding-top: 58px;
 padding-bottom: 65px;
}

.eyebrow {
 font-size: 9px;
 letter-spacing: .18em;
 font-weight: 800;
 color: #8992a2;
}

.eyebrow i {
 display: inline-block;
 width: 22px;
 height: 1px;
 background: var(--blue);
 vertical-align: middle;
 margin-right: 9px;
}

.hero h1 {
 font: 800 clamp(54px,6.1vw,86px)/.96 Manrope;
 letter-spacing: -.065em;
 margin: 19px 0 25px;
 max-width: 690px;
}

.hero h1 em {
 font-style: normal;
 color: var(--blue);
}

.hero h1 span {
 color: #8993a4;
}

.lead {
 font-size: 17px;
 line-height: 1.65;
 color: var(--muted);
 max-width: 610px;
}

.hero-actions {
 display: flex;
 align-items: center;
 gap: 25px;
 margin-top: 30px;
}

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 16px;
 border: 0;
 text-decoration: none;
 border-radius: 13px;
 padding: 15px 19px;
 font-size: 11px;
 font-weight: 800;
 cursor: pointer;
}

.btn.primary {
 background: var(--ink);
 color: #fff;
 box-shadow: 0 13px 28px rgba(8,17,31,.15);
}

.btn b {
 font-size: 15px;
 font-weight: 400;
}

.btn.light {
 background: #fff;
 color: var(--ink);
}

.text-link {
 font-size: 11px;
 text-decoration: none;
 font-weight: 800;
 color: #5c6677;
}

.text-link span {
 margin-left: 8px;
 color: var(--blue);
}

.hero-pills {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
 margin-top: 42px;
}

.hero-pills span {
 border: 1px solid #e3e7ed;
 border-radius: 100px;
 padding: 8px 11px;
 font-size: 9px;
 font-weight: 700;
 color: #70798a;
 background: rgba(255,255,255,.65);
}

.hero-stage {
 height: 535px;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}

.stage-ring {
 position: absolute;
 width: 450px;
 height: 450px;
 border: 1px solid #dfe5ef;
 border-radius: 50%;
 box-shadow: 0 0 0 40px rgba(246,248,252,.65),0 0 0 80px rgba(249,250,253,.8);
}

.orb {
 position: absolute;
 border-radius: 50%;
 filter: blur(1px);
}

.orb-a {
 width: 90px;
 height: 90px;
 right: 10%;
 top: 7%;
 background: radial-gradient(circle at 35% 30%,#a9b8ff,#e7ebff 68%,transparent 70%);
 opacity: .9;
}

.orb-b {
 width: 50px;
 height: 50px;
 left: 6%;
 bottom: 18%;
 background: radial-gradient(circle,#c6d0ff,transparent 68%);
}

.stage-label {
 position: absolute;
 left: 2%;
 top: 11%;
 display: grid;
 gap: 4px;
}

.stage-label span {
 font: 800 8px Manrope;
 letter-spacing: .18em;
 color: #9aa3b1;
}

.stage-label b {
 font: 700 12px Manrope;
}

.browser-card {
 position: absolute;
 width: 77%;
 height: 335px;
 right: 5%;
 top: 91px;
 border: 1px solid #dbe1eb;
 border-radius: 20px;
 background: #fff;
 box-shadow: 0 35px 80px rgba(23,39,71,.16);
 overflow: hidden;
 transform: rotate(1deg);
}

.browser-top {
 height: 36px;
 border-bottom: 1px solid #edf0f4;
 display: flex;
 align-items: center;
 padding: 0 13px;
 gap: 5px;
}

.browser-top i {
 width: 6px;
 height: 6px;
 background: #d6dce6;
 border-radius: 50%;
}

.browser-top span {
 margin: auto;
 color: #9ba4b2;
 font-size: 8px;
}

.browser-top b {
 font-size: 9px;
 color: #c1c7d1;
}

.browser-body {
 height: calc(100% - 36px);
 padding: 13px;
}

.site-ui {
 height: 100%;
 border-radius: 12px;
 background: linear-gradient(135deg,#f6f8fc,#eef2f8);
 overflow: hidden;
 padding: 15px;
}

.site-nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 7px;
 color: #929cab;
}

.site-nav strong {
 font: 800 8px Manrope;
 color: #1c2635;
}

.site-nav i {
 width: 30px;
 height: 6px;
 border-radius: 10px;
 background: #d8dee9;
}

.site-hero {
 margin-top: 28px;
 position: relative;
 height: 165px;
 border-radius: 15px;
 background: linear-gradient(135deg,#17243a,#314a76);
 padding: 27px;
 color: #fff;
 overflow: hidden;
}

.site-hero:after {
 content: "";
 position: absolute;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 right: -30px;
 top: -40px;
 background: radial-gradient(circle,#94a9ff,transparent 65%);
 opacity: .8;
}

.site-hero small {
 font: 700 6px Manrope;
 letter-spacing: .16em;
 color: #c9d4ec;
}

.site-hero strong {
 display: block;
 font: 800 25px/1.02 Manrope;
 letter-spacing: -.05em;
 margin-top: 10px;
 position: relative;
 z-index: 1;
}

.site-hero span {
 display: block;
 width: 65px;
 height: 7px;
 border-radius: 5px;
 background: #fff;
 margin-top: 18px;
 opacity: .85;
}

.site-hero div {
 position: absolute;
 width: 90px;
 height: 90px;
 border: 1px solid rgba(255,255,255,.35);
 border-radius: 50%;
 right: 25px;
 bottom: -30px;
}

.site-cards {
 display: grid;
 grid-template-columns: repeat(3,1fr);
 gap: 8px;
 margin-top: 10px;
}

.site-cards i {
 height: 45px;
 background: #fff;
 border-radius: 8px;
 display: block;
}

.float-card {
 position: absolute;
 background: rgba(255,255,255,.94);
 border: 1px solid #e1e6ee;
 box-shadow: 0 18px 45px rgba(24,39,70,.13);
 border-radius: 15px;
 padding: 13px 15px;
 min-width: 130px;
 z-index: 3;
}

.float-card span,.float-card small {
 display: block;
 font-size: 7px;
 letter-spacing: .12em;
 color: #8d96a6;
 font-weight: 800;
}

.float-card strong {
 display: block;
 font: 800 27px Manrope;
 letter-spacing: -.06em;
 margin-top: 4px;
}

.float-card small {
 letter-spacing: 0;
 margin-top: 2px;
 font-size: 8px;
 font-weight: 500;
}

.float-card b {
 position: absolute;
 right: 12px;
 top: 12px;
 font-size: 11px;
 color: var(--blue);
}

.leads {
 left: 0;
 bottom: 68px;
}

.social {
 right: 0;
 top: 55px;
}

.google {
 left: 12%;
 top: 22px;
}

.trust {
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 padding: 21px 0;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1.4fr;
 align-items: center;
}

.trust>div {
 padding: 4px 24px;
 border-right: 1px solid var(--line);
}

.trust>div:first-child {
 padding-left: 0;
}

.trust>div:last-child {
 border-right: 0;
}

.trust span {
 display: block;
 font-size: 7px;
 letter-spacing: .15em;
 color: #9aa2af;
 font-weight: 800;
}

.trust strong {
 display: block;
 font: 800 19px Manrope;
 margin-top: 5px;
}

.trust-note {
 position: relative;
}

.trust-note strong {
 font-size: 13px;
}

.trust-note b {
 position: absolute;
 right: 0;
 top: 50%;
 font-size: 16px;
 color: var(--blue);
}

.section {
 padding: 130px 0;
}

.section-head {
 display: grid;
 grid-template-columns: 1.25fr .75fr;
 gap: 80px;
 align-items: end;
 margin-bottom: 55px;
}

.section-head h2,.about h2,.contact h2 {
 font: 800 clamp(39px,4.5vw,63px)/1.03 Manrope;
 letter-spacing: -.055em;
 margin: 16px 0 0;
}

.section-head>p {
 font-size: 14px;
 line-height: 1.75;
 color: var(--muted);
 margin: 0 0 4px;
}

.service-filter {
 display: flex;
 gap: 8px;
 margin: -23px 0 27px;
}

.service-filter button {
 border: 1px solid var(--line);
 background: #fff;
 color: #7b8493;
 border-radius: 100px;
 padding: 9px 13px;
 font-size: 9px;
 font-weight: 800;
 cursor: pointer;
}

.service-filter button.active {
 background: var(--ink);
 color: #fff;
 border-color: var(--ink);
}

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

.service-card {
 border: 1px solid #e1e6ee;
 border-radius: 21px;
 overflow: hidden;
 background: #fff;
 transition: .45s ease;
 box-shadow: 0 12px 35px rgba(22,35,60,.04);
 opacity: 0;
 transform: translateY(24px);
 transition-delay: var(--delay);
}

.service-card.seen {
 opacity: 1;
 transform: none;
}

.service-card:hover {
 transform: translateY(-8px);
 box-shadow: var(--shadow);
 border-color: #d5dce8;
}

.service-card.filtered-out {
 display: none;
}

.service-image {
 height: 230px;
 position: relative;
 background: #f0f3f8;
 overflow: hidden;
}

.service-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: .5s;
}

.service-card:hover .service-image img {
 transform: scale(1.05);
}

.service-image:after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg,rgba(7,16,30,.05),transparent 45%,rgba(7,16,30,.3));
}

.service-image>span {
 position: absolute;
 left: 13px;
 top: 13px;
 z-index: 2;
 background: #fff;
 border-radius: 8px;
 padding: 7px 8px;
 font: 800 8px Manrope;
}

.service-image>b {
 position: absolute;
 right: 13px;
 bottom: 13px;
 z-index: 2;
 color: #fff;
 font: 800 8px Manrope;
 letter-spacing: .12em;
}

.service-content {
 padding: 21px;
}

.service-content>div {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.service-content h3 {
 margin: 0;
 font: 800 22px Manrope;
 letter-spacing: -.04em;
}

.arrow {
 font-size: 17px;
 color: var(--blue);
}

.service-content p {
 color: var(--muted);
 font-size: 12px;
 line-height: 1.65;
 min-height: 58px;
}

.service-content a {
 font-size: 9px;
 font-weight: 800;
 text-decoration: none;
}

.ai-band {
 position: relative;
 overflow: hidden;
 background: #07101e;
 color: #fff;
 padding: 125px 0;
}

.ai-grid-bg {
 position: absolute;
 inset: 0;
 opacity: .32;
 background-image: linear-gradient(rgba(141,160,205,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(141,160,205,.1) 1px,transparent 1px);
 background-size: 42px 42px;
 mask-image: linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
}

.ai-band:before {
 content: "";
 position: absolute;
 width: 500px;
 height: 500px;
 left: -180px;
 top: -200px;
 border-radius: 50%;
 background: radial-gradient(circle,rgba(77,102,255,.26),transparent 68%);
}

.ai-layout {
 display: grid;
 grid-template-columns: .85fr 1.15fr;
 gap: 90px;
 align-items: center;
 position: relative;
}

.ai-copy h2 {
 font: 800 clamp(42px,4.8vw,68px)/1 Manrope;
 letter-spacing: -.06em;
 margin: 17px 0 22px;
}

.ai-copy p {
 color: #aeb8ca;
 line-height: 1.75;
 font-size: 14px;
 max-width: 530px;
}

.ai-copy .btn {
 margin-top: 22px;
}

.ai-visual {
 height: 470px;
 position: relative;
}

.ai-core {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 width: 150px;
 height: 150px;
 border-radius: 50%;
 border: 1px solid #46536c;
 background: radial-gradient(circle at 35% 30%,#334c83,#111d32 65%);
 box-shadow: 0 0 0 24px rgba(70,88,126,.08),0 0 80px rgba(66,93,255,.18);
 display: grid;
 place-items: center;
 text-align: center;
}

.ai-core span {
 font: 800 35px Manrope;
 color: #fff;
}

.ai-core strong {
 position: absolute;
 font-size: 20px;
 right: 35px;
 top: 30px;
 color: #92a7ff;
}

.ai-core small {
 position: absolute;
 bottom: 30px;
 font-size: 7px;
 letter-spacing: .15em;
 color: #9ba8c0;
}

.ai-node {
 position: absolute;
 width: 240px;
 border: 1px solid #2b3952;
 background: rgba(9,18,32,.72);
 backdrop-filter: blur(10px);
 border-radius: 13px;
 padding: 13px;
 display: grid;
 grid-template-columns: 28px 1fr 20px;
 gap: 10px;
 align-items: center;
 opacity: 0;
 transform: translateY(18px);
 transition: opacity .65s ease,transform .65s ease;
 transition-delay: var(--delay);
}

.ai-node.seen {
 opacity: 1;
 transform: none;
}

.ai-node small {
 color: #61708a;
 font: 800 8px Manrope;
}

.ai-node span {
 font-size: 10px;
 font-weight: 700;
 color: #dbe3f0;
}

.ai-node b {
 color: #728aff;
 font-size: 12px;
}

.node-1 {
 left: 0;
 top: 8%;
}

.node-2 {
 right: 0;
 top: 20%;
}

.node-3 {
 left: 4%;
 bottom: 17%;
}

.node-4 {
 right: 0;
 bottom: 27%;
}

.node-5 {
 left: 12%;
 bottom: 1%;
}

.node-6 {
 right: 5%;
 bottom: 2%;
}

.ai-node:after {
 content: "";
 position: absolute;
 width: 95px;
 height: 1px;
 background: #2c3951;
 right: -95px;
 top: 50%;
 z-index: -1;
}

.node-2:after,.node-4:after,.node-6:after {
 left: -95px;
 right: auto;
}

.process {
 padding-bottom: 70px;
}

.journey {
 display: grid;
 grid-template-columns: repeat(4,1fr);
 gap: 18px;
}

.journey-step {
 border-top: 1px solid #dce2eb;
 padding-top: 16px;
 opacity: 0;
 transform: translateY(24px);
 transition: .65s ease;
 transition-delay: var(--delay);
}

.journey-step.seen {
 opacity: 1;
 transform: none;
}

.journey-step.dim {
 opacity: .35;
}

.step-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.step-top span {
 font: 800 11px Manrope;
 color: var(--blue);
}

.step-top i {
 display: block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #dfe4ec;
}

.journey-step:nth-child(2) .step-top i {
 background: #aab7ff;
}

.journey-step:nth-child(3) .step-top i {
 background: #7188ff;
}

.journey-step:nth-child(4) .step-top i {
 background: #4169ff;
}

.step-index {
 font-size: 7px;
 letter-spacing: .16em;
 color: #9ba3b0;
 font-weight: 800;
 margin-top: 40px;
}

.journey-step h3 {
 font: 800 28px Manrope;
 letter-spacing: -.04em;
 margin: 8px 0;
}

.journey-step p {
 font-size: 11px;
 color: var(--muted);
 line-height: 1.6;
}

.journey-bottom {
 display: grid;
 grid-template-columns: auto 1fr auto 1fr auto;
 align-items: center;
 gap: 12px;
 margin-top: 40px;
 color: #a1a9b7;
 font-size: 7px;
 letter-spacing: .18em;
 font-weight: 800;
}

.journey-bottom div {
 height: 1px;
 background: #e3e7ed;
}

.journey-bottom strong {
 color: var(--blue);
 font-size: 7px;
}

.ecosystem {
 height: 500px;
 margin-top: 85px;
 border-radius: 28px;
 background: #f5f7fb;
 border: 1px solid #e2e6ed;
 position: relative;
 overflow: hidden;
}

.ecosystem:before {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at 70% 50%,rgba(91,111,255,.12),transparent 34%);
}

.eco-copy {
 position: absolute;
 left: 42px;
 top: 43px;
 width: 300px;
}

.eco-copy h3 {
 font: 800 28px/1.05 Manrope;
 letter-spacing: -.05em;
 margin: 13px 0;
}

.eco-copy p {
 font-size: 11px;
 line-height: 1.7;
 color: var(--muted);
}

.eco-center {
 position: absolute;
 left: 68%;
 top: 50%;
 transform: translate(-50%,-50%);
 width: 140px;
 height: 140px;
 border-radius: 50%;
 background: #fff;
 border: 1px solid #dfe5ee;
 box-shadow: 0 20px 65px rgba(31,47,83,.13);
 display: grid;
 place-items: center;
 text-align: center;
 z-index: 2;
}

.eco-center img {
 width: 42px;
 height: 42px;
 object-fit: contain;
}

.eco-center strong {
 font: 800 11px Manrope;
}

.eco-node {
 position: absolute;
 background: #fff;
 border: 1px solid #dfe5ec;
 border-radius: 100px;
 padding: 11px 15px;
 font-size: 9px;
 font-weight: 800;
 box-shadow: 0 9px 30px rgba(26,41,70,.08);
 z-index: 3;
}

.eco-node small {
 color: #9aa2af;
 margin-left: 4px;
 font-size: 7px;
 font-weight: 500;
}

.eco-node:after {
 content: "";
 position: absolute;
 height: 1px;
 width: 120px;
 background: #d5dce7;
 top: 50%;
 z-index: -1;
}

.n1 {
 top: 20%;
 left: 55%;
}

.n1:after,.n2:after,.n6:after {
 right: -120px;
 transform: rotate(22deg);
 transform-origin: left;
}

.n2 {
 top: 17%;
 right: 8%;
}

.n3 {
 bottom: 18%;
 right: 11%;
}

.n3:after,.n4:after {
 left: -120px;
 transform: rotate(-22deg);
 transform-origin: right;
}

.n4 {
 bottom: 16%;
 left: 52%;
}

.n5 {
 top: 49%;
 left: 43%;
}

.n5:after {
 right: -120px;
}

.n6 {
 top: 52%;
 right: 7%;
}

.work {
 padding-top: 100px;
}

.work .section-head {
 align-items: end;
}

.masonry {
 display: grid;
 grid-template-columns: 1.35fr .8fr .8fr;
 grid-template-rows: 245px 245px;
 gap: 16px;
}

.masonry>div {
 position: relative;
 overflow: hidden;
 border-radius: 20px;
 background: #eef1f6;
}

.masonry img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: .6s;
}

.masonry>div:hover img {
 transform: scale(1.06);
}

.masonry>div:after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg,transparent 35%,rgba(5,12,23,.68));
 pointer-events: none;
}

.work-large {
 grid-row: span 2;
 opacity: 0;
 transform: translateY(24px);
 transition: .65s ease;
}

.work-large.seen {
 opacity: 1;
 transform: none;
}

.work-large>div {
 position: absolute;
 left: 25px;
 bottom: 23px;
 color: #fff;
 z-index: 2;
}

.work-large span,.work-tile>span,.work-mini>span {
 font: 800 7px Manrope;
 letter-spacing: .16em;
}

.work-large strong {
 display: block;
 font: 800 33px/1.03 Manrope;
 letter-spacing: -.05em;
 margin: 7px 0 15px;
}

.work-large a {
 color: #fff;
 text-decoration: none;
 font-size: 9px;
 font-weight: 800;
}

.work-tile,.work-mini {
 opacity: 0;
 transform: translateY(24px);
 transition: .65s ease;
 transition-delay: var(--delay);
}

.work-tile.seen,.work-mini.seen {
 opacity: 1;
 transform: none;
}

.work-tile>span,.work-tile>strong,.work-mini>span,.work-mini>strong {
 position: absolute;
 left: 18px;
 z-index: 2;
 color: #fff;
}

.work-tile>span,.work-mini>span {
 top: 18px;
}

.work-tile>strong,.work-mini>strong {
 bottom: 18px;
 font: 800 19px/1.03 Manrope;
 letter-spacing: -.04em;
}

.light-tile:after {
 background: linear-gradient(180deg,transparent 35%,rgba(255,255,255,.72));
}

.light-tile>span,.light-tile>strong {
 color: var(--ink);
}

.app-tile {
 grid-column: 2;
}

.work-mini {
 grid-column: 3;
 grid-row: 2;
 background: #dce4ff;
}

.work-mini img {
 object-position: center;
}

.about {
 padding: 130px 0 140px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 105px;
 align-items: center;
}

.about-visual {
 position: relative;
 opacity: 0;
 transform: translateY(24px);
 transition: .7s ease;
}

.about-visual.seen,.about-copy.seen {
 opacity: 1;
 transform: none;
}

.about-frame {
 height: 475px;
 border-radius: 28px;
 overflow: hidden;
 background: #e9edf5;
 position: relative;
}

.about-frame img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.frame-glow {
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg,rgba(65,105,255,.12),transparent 55%);
}

.since {
 position: absolute;
 right: -25px;
 bottom: 22px;
 background: #fff;
 border: 1px solid #e3e7ed;
 border-radius: 16px;
 padding: 17px 20px;
 width: 185px;
 box-shadow: var(--shadow);
}

.since small {
 display: block;
 color: #8e97a5;
 font-size: 7px;
 letter-spacing: .15em;
 font-weight: 800;
}

.since strong {
 display: block;
 font: 800 45px Manrope;
 line-height: 1;
 letter-spacing: -.06em;
 margin-top: 3px;
}

.since span {
 display: block;
 color: #697487;
 font-size: 9px;
 margin-top: 5px;
}

.about-tag {
 position: absolute;
 left: -20px;
 top: 28px;
 background: var(--ink);
 color: #fff;
 padding: 13px 16px;
 border-radius: 12px;
 font-size: 7px;
 letter-spacing: .13em;
 line-height: 1.6;
 box-shadow: 0 15px 35px rgba(8,17,31,.18);
}

.about-tag b {
 color: #a9b7ff;
}

.about-copy {
 opacity: 0;
 transform: translateY(24px);
 transition: .7s ease;
 transition-delay: .1s;
}

.about-copy>p {
 color: var(--muted);
 font-size: 14px;
 line-height: 1.8;
 max-width: 530px;
 margin-top: 25px;
}

.check-list {
 display: grid;
 gap: 12px;
 margin: 30px 0;
}

.check-list span {
 font-size: 11px;
 font-weight: 700;
}

.check-list b {
 display: inline-grid;
 place-items: center;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: #edf1ff;
 color: var(--blue);
 margin-right: 10px;
 font-size: 10px;
}

.faq {
 padding-top: 0;
}

.faq .section-head {
 margin-bottom: 40px;
}

.faq-list {
 border-top: 1px solid var(--line);
 opacity: 0;
 transform: translateY(24px);
 transition: .7s ease;
}

.faq-list.seen {
 opacity: 1;
 transform: none;
}

details {
 border-bottom: 1px solid var(--line);
}

summary {
 list-style: none;
 cursor: pointer;
 display: grid;
 grid-template-columns: 45px 1fr 30px;
 align-items: center;
 padding: 24px 0;
 font: 700 18px Manrope;
 letter-spacing: -.02em;
}

summary::-webkit-details-marker {
 display: none;
}

summary span {
 font: 800 9px Manrope;
 color: #9aa3b1;
}

summary b {
 font-size: 24px;
 font-weight: 400;
 color: #8993a2;
 text-align: right;
 transition: .25s;
}

details[open] summary b {
 transform: rotate(45deg);
 color: var(--blue);
}

details p {
 margin: 0 45px 24px;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.7;
 max-width: 750px;
}

.contact {
 margin-bottom: 100px;
 border-radius: 30px;
 background: #f3f5f9;
 padding: 67px;
 display: grid;
 grid-template-columns: 1.05fr .95fr;
 gap: 75px;
 opacity: 0;
 transform: translateY(24px);
 transition: .7s ease;
}

.contact.seen {
 opacity: 1;
 transform: none;
}

.contact h2 {
 margin-top: 16px;
}

.contact-copy>p {
 font-size: 14px;
 line-height: 1.75;
 color: var(--muted);
 max-width: 550px;
 margin-top: 25px;
}

.contact-links {
 display: grid;
 grid-template-columns: repeat(3,1fr);
 gap: 9px;
 margin-top: 35px;
}

.contact-links a {
 position: relative;
 text-decoration: none;
 background: #fff;
 border: 1px solid #e5e9ef;
 border-radius: 14px;
 padding: 14px;
}

.contact-links small {
 display: block;
 color: #939baa;
 font-size: 7px;
 letter-spacing: .14em;
 font-weight: 800;
}

.contact-links strong {
 display: block;
 font-size: 9px;
 margin-top: 8px;
 padding-right: 8px;
 word-break: break-word;
}

.contact-links span {
 position: absolute;
 right: 10px;
 bottom: 10px;
 color: var(--blue);
 font-size: 11px;
}

form {
 background: #fff;
 border: 1px solid #e2e7ee;
 border-radius: 20px;
 padding: 25px;
 box-shadow: 0 18px 45px rgba(24,38,67,.07);
}

.form-head {
 display: grid;
 grid-template-columns: 28px 1fr;
 gap: 5px;
 margin-bottom: 22px;
}

.form-head span {
 font: 800 9px Manrope;
 color: var(--blue);
}

.form-head strong {
 font: 800 12px Manrope;
}

.form-head small {
 grid-column: 2;
 color: #9aa3b0;
 font-size: 8px;
}

label {
 display: block;
 font-size: 10px;
 font-weight: 800;
 margin-bottom: 15px;
}

input,textarea {
 font: inherit;
 width: 100%;
 display: block;
 margin-top: 7px;
 border: 1px solid #dfe4ec;
 border-radius: 10px;
 padding: 11px 12px;
 outline: 0;
 background: #fbfcfe;
 font-size: 11px;
 color: var(--ink);
}

input:focus,textarea:focus {
 border-color: #9caeff;
 background: #fff;
 box-shadow: 0 0 0 3px #eef1ff;
}

textarea {
 resize: vertical;
}

form .btn {
 width: 100%;
}

.form-note {
 display: block;
 text-align: center;
 color: #9ba3af;
 font-size: 7px;
 margin-top: 10px;
 line-height: 1.5;
}

footer {
 background: #07101e;
 color: #fff;
 padding: 45px 0 20px;
}

.footer-top {
 display: grid;
 grid-template-columns: 1fr 2fr auto;
 align-items: center;
 gap: 30px;
}

.footer-top .brand {
 /* filter: brightness(1) invert(1); */
 background: white;
 max-width: 110px;
 border-radius: 4px;
}

.footer-top p {
 margin: 0;
 color: #8995a9;
 font-size: 10px;
}

.back {
 color: #fff;
 text-decoration: none;
 font-size: 9px;
 font-weight: 800;
}

.footer-bottom {
 border-top: 1px solid #202b3f;
 margin-top: 35px;
 padding-top: 18px;
 display: flex;
 justify-content: space-between;
 color: #5f6b81;
 font-size: 8px;
}

.wa {
 position: fixed;
 right: 22px;
 bottom: 22px;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: #16a66b;
 color: #fff;
 text-decoration: none;
 z-index: 70;
 box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

.wa span {
 font-size: 27px;
}

.desktop-only {
 display: block;
}

@media(max-width:980px){.nav nav{display:none}.nav-cta{display:none}.menu{display:block}.hero{grid-template-columns:1fr;padding-top:42px}.hero-stage{height:490px}.trust{grid-template-columns:repeat(3,1fr)}.trust-note{display:none}.section-head,.ai-layout,.about,.contact{grid-template-columns:1fr;gap:35px}.service-grid{grid-template-columns:repeat(2,1fr)}.ai-layout{gap:65px}.ai-visual{max-width:700px;width:100%;margin:auto}.ecosystem{height:450px}.eco-copy{left:28px;top:28px}.eco-center{left:68%}.masonry{grid-template-columns:1.1fr .9fr;grid-template-rows:240px 240px 240px}.work-large{grid-row:span 2}.work-mini{grid-column:2;grid-row:3}.app-tile{grid-column:2}.about{padding-top:100px}.contact{padding:45px}}
@media(max-width:650px){.wrap{width:min(100% - 30px,1180px)}.nav{height:66px;margin-top:9px}.brand img{width:98px}.nav-actions{gap:6px}.hero{padding-top:34px;min-height:auto}.hero h1{font-size:49px;margin-top:15px}.lead{font-size:15px}.hero-actions{align-items:flex-start;flex-direction:column;gap:16px}.hero-pills{margin-top:29px}.hero-stage{height:375px;margin-top:5px}.stage-ring{width:290px;height:290px;box-shadow:0 0 0 24px rgba(246,248,252,.65),0 0 0 48px rgba(249,250,253,.8)}.browser-card{height:250px;top:72px;width:100%;right:0}.site-hero{height:120px;padding:18px}.site-hero strong{font-size:19px}.site-cards i{height:35px}.float-card{min-width:105px;padding:10px 11px}.float-card strong{font-size:21px}.leads{left:-4px;bottom:18px}.social{right:-4px;top:29px}.google{left:7%;top:4px}.trust{grid-template-columns:1fr 1fr;padding:17px 0}.trust>div{padding:5px 12px}.trust>div:nth-child(2){border-right:0}.trust>div:nth-child(3){display:none}.trust strong{font-size:16px}.section{padding:90px 0}.section-head{gap:17px;margin-bottom:36px}.section-head h2,.about h2,.contact h2{font-size:39px}.section-head>p{font-size:12px}.service-filter{overflow:auto;padding-bottom:3px;margin-top:-8px}.service-filter button{white-space:nowrap}.service-grid{grid-template-columns:1fr}.service-image{height:205px}.service-content p{min-height:0}.ai-band{padding:85px 0}.ai-copy h2{font-size:43px}.ai-copy p{font-size:12px}.ai-visual{height:600px}.ai-core{width:125px;height:125px}.ai-node{width:calc(100% - 25px);max-width:290px}.node-1{left:0;top:1%}.node-2{right:0;top:16%}.node-3{left:0;bottom:32%}.node-4{right:0;bottom:19%}.node-5{left:0;bottom:7%}.node-6{right:0;bottom:0}.ai-node:after{width:45px;right:-45px}.node-2:after,.node-4:after,.node-6:after{left:-45px}.journey{grid-template-columns:1fr;gap:35px}.journey-bottom{display:none}.journey-step{padding-top:13px}.ecosystem{height:520px;margin-top:55px}.eco-copy{position:relative;left:22px;top:22px;width:calc(100% - 44px)}.eco-copy h3{font-size:23px}.eco-center{left:50%;top:61%;width:115px;height:115px}.eco-node{font-size:8px;padding:9px 11px}.eco-node small{display:none}.eco-node:after{width:55px}.n1{top:42%;left:8%}.n2{top:31%;right:7%}.n3{bottom:17%;right:6%}.n4{bottom:14%;left:7%}.n5{top:52%;left:5%}.n6{top:53%;right:5%}.n1:after,.n2:after,.n6:after{right:-55px}.n3:after,.n4:after{left:-55px}.masonry{grid-template-columns:1fr 1fr;grid-template-rows:190px 190px 190px}.work-large{grid-row:span 2}.work-large strong{font-size:22px}.work-tile>strong,.work-mini>strong{font-size:15px}.work-mini{grid-column:2;grid-row:3}.about{padding:80px 0 95px;gap:45px}.about-frame{height:340px}.about-tag{left:-6px}.since{right:8px;bottom:12px}.contact{padding:30px 20px;margin-bottom:70px}.contact-links{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:7px}.desktop-only{display:none}.wa{right:15px;bottom:15px;width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* V4 visual refinement: Font Awesome, richer motion, touch-friendly controls */
.service-image b,.float-card b,.contact-links span,.wa{display:grid;place-items:center}.btn i,.text-link i,.nav-cta i,.drawer-cta i{transition:transform .25s}.btn:hover i,.text-link:hover i,.nav-cta:hover i,.drawer-cta:hover i{transform:translateX(3px)}.service-card,.journey-step,.work-large,.work-tile,.work-mini,.about-visual,.about-copy,.faq-list,.contact,.ai-node{will-change:transform,opacity}.service-card,.journey-step,.work-large,.work-tile,.work-mini,.about-visual,.about-copy,.faq-list,.contact,.ai-node{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.service-card.seen,.journey-step.seen,.work-large.seen,.work-tile.seen,.work-mini.seen,.about-visual.seen,.about-copy.seen,.faq-list.seen,.contact.seen,.ai-node.seen{opacity:1;transform:none}.service-card:hover,.journey-step:hover{transform:translateY(-7px)}.service-image{position:relative}.service-image:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(76,111,255,.08),transparent 45%);pointer-events:none}.image-shine{position:absolute;z-index:3;top:-80%;left:-70%;width:35%;height:260%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:rotate(25deg);transition:1s}.service-card:hover .image-shine{left:130%}.lang-btn{display:flex;align-items:center;gap:7px}.lang-btn i:first-child{color:var(--blue);font-size:14px}.lang-btn i:last-child{font-size:8px}.lang-menu a{display:flex;align-items:center;gap:9px}.lang-menu a.active{color:var(--blue);background:var(--soft)}.wa i{font-size:25px}.contact{position:relative;overflow:hidden}.contact:before{content:"";position:absolute;width:380px;height:380px;right:-170px;bottom:-190px;border-radius:50%;background:radial-gradient(circle,rgba(65,105,255,.14),transparent 70%);pointer-events:none}.contact-copy, .contact form{position:relative;z-index:2}.float-card{animation:floatCard 6s ease-in-out infinite}.float-card:nth-of-type(2){animation-delay:-2s}.float-card:nth-of-type(3){animation-delay:-4s}@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}.hero-stage .browser-card{animation:browserFloat 7s ease-in-out infinite}@keyframes browserFloat{0%,100%{transform:rotate(1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-8px)}}.service-content a{display:inline-flex;align-items:center;gap:6px}.service-content a i{font-size:9px}.faq summary b{display:grid;place-items:center}.contact-links a{transition:.25s}.contact-links a:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(24,39,70,.08)}input,textarea{font-size:11px}.drawer-open{overflow:hidden}@media(max-width:650px){.hero-stage .browser-card{animation:none}.float-card{animation:none}.contact-links{grid-template-columns:1fr}.service-image{height:220px}}
/* =========================================================
   CONTACT SECTION — PREMIUM UI ENHANCEMENT
   ========================================================= */

.contact-expanded {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-top: clamp(70px, 8vw, 120px);
    padding-bottom: clamp(70px, 8vw, 120px);
}

/* Soft background atmosphere */
.contact-expanded::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: 5%;
    left: -260px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(100, 90, 255, 0.12) 0%,
        rgba(100, 90, 255, 0) 70%
    );
    pointer-events: none;
    z-index: -1;
}

.contact-expanded::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -240px;
    bottom: -120px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 200, 170, 0.10) 0%,
        rgba(0, 200, 170, 0) 70%
    );
    pointer-events: none;
    z-index: -1;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

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

.contact-expanded .contact-copy > p {
    max-width: 720px;
    line-height: 1.8;
}


/* =========================================================
   PRIMARY CONTACT CARDS
   ========================================================= */

.contact-expanded .contact-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
}

.contact-expanded .contact-links a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 92px;
    padding: 18px 58px 18px 20px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );
    text-decoration: none;
    overflow: hidden;
    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.contact-expanded .contact-links a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.07),
        transparent 80%
    );
    transform: translateX(-120%);
    transition: transform .7s ease;
}

.contact-expanded .contact-links a:hover::before {
    transform: translateX(120%);
}

.contact-expanded .contact-links a:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,.22);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.035)
        );
    box-shadow: 0 18px 45px rgba(0,0,0,.16);
}

.contact-expanded .contact-links small {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    opacity: .58;
}

.contact-expanded .contact-links strong {
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.35;
    color: inherit;
}

.contact-expanded .contact-links a > span {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    transition:
        transform .35s ease,
        background .35s ease;
}

.contact-expanded .contact-links a:hover > span {
    transform: translateY(-50%) scale(1.08);
    background: rgba(255,255,255,.15);
}


/* =========================================================
   OFFICE CARD
   ========================================================= */

.contact-office {
    margin-top: 20px;
    padding: 24px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.02)
        );
    box-shadow: 0 15px 50px rgba(0,0,0,.08);
    transition:
        transform .35s ease,
        border-color .35s ease;
}

.contact-office:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.18);
}

.contact-office-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.contact-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(255,255,255,.09);
    font-size: 18px;
}

.contact-office-head small {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    opacity: .55;
}

.contact-office-head strong {
    display: block;
    font-size: 16px;
}

.contact-office address {
    margin: 0 0 18px;
    padding-left: 62px;
    font-style: normal;
    line-height: 1.75;
    opacity: .78;
}

.contact-location-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
    line-height: 1.6;
    opacity: .65;
}

.contact-location-note i {
    margin-top: 3px;
}


/* =========================================================
   GLOBAL CONTACT
   ========================================================= */

.contact-global {
    margin-top: 20px;
    padding: 24px;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );
    border: 1px solid rgba(255,255,255,.08);
}

.contact-global-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    opacity: .7;
}

.global-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.global-contact-grid > div {
    min-width: 0;
    padding: 15px;
    border-radius: 15px;
    background: rgba(255,255,255,.045);
    transition: background .3s ease, transform .3s ease;
}

.global-contact-grid > div:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.08);
}

.global-contact-grid small {
    display: block;
    margin-bottom: 7px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    opacity: .5;
}

.global-contact-grid strong {
    display: block;
    font-size: 13px;
    line-height: 1.4;
}

.global-contact-grid span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .5;
}


/* =========================================================
   SOCIAL MEDIA
   ========================================================= */

.contact-social {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.contact-social-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.contact-social-title span {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.contact-social-title small {
    font-size: 11px;
    opacity: .45;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-icons a {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 16px;
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.social-icons a:hover {
    transform: translateY(-5px) scale(1.03);
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
    box-shadow: 0 12px 25px rgba(0,0,0,.14);
}


/* =========================================================
   FORM CARD
   ========================================================= */

.contact-expanded .contact-form {
    position: relative;
    padding: clamp(25px, 4vw, 42px);
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.12);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );
    box-shadow:
        0 30px 80px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.contact-expanded .contact-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
}

.contact-expanded .form-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 30px;
}

.contact-expanded .form-head > span {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(255,255,255,.09);
    font-size: 11px;
    font-weight: 800;
}

.contact-expanded .form-head strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    letter-spacing: .08em;
}

.contact-expanded .form-head small {
    display: block;
    font-size: 12px;
    line-height: 1.55;
    opacity: .55;
}


/* =========================================================
   FORM LABELS / INPUTS
   ========================================================= */

.contact-expanded .contact-form label {
    display: block;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.contact-expanded .contact-form input,
.contact-expanded .contact-form textarea {
    width: 100%;
    margin-top: 8px;
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    outline: none;
    background: rgba(0,0,0,.16);
    color: inherit;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.contact-expanded .contact-form input::placeholder,
.contact-expanded .contact-form textarea::placeholder {
    opacity: .38;
}

.contact-expanded .contact-form input:focus,
.contact-expanded .contact-form textarea:focus {
    border-color: rgba(255,255,255,.35);
    background: rgba(0,0,0,.22);
    box-shadow: 0 0 0 4px rgba(255,255,255,.045);
}

.contact-expanded .contact-form textarea {
    min-height: 130px;
    resize: vertical;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.contact-expanded .contact-form .btn.primary {
    width: 100%;
    min-height: 56px;
    margin-top: 5px;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 10px;
}

.contact-expanded .contact-form .btn.primary b {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(0,0,0,.16);
    transition: transform .3s ease;
}

.contact-expanded .contact-form .btn.primary:hover b {
    transform: translateX(3px);
}


/* =========================================================
   FORM NOTE
   ========================================================= */

.contact-expanded .form-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    font-size: 11px;
    line-height: 1.6;
    opacity: .5;
}

.contact-expanded .form-note i {
    margin-top: 3px;
    font-size: 14px;
}


/* =========================================================
   QUICK CONTACT / TRUST STRIP
   ========================================================= */

.form-quick-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.form-quick-contact > div {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.form-quick-contact > div > i {
    margin-top: 3px;
    opacity: .65;
}

.form-quick-contact span {
    min-width: 0;
}

.form-quick-contact small {
    display: block;
    margin-bottom: 4px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    opacity: .45;
}

.form-quick-contact strong {
    display: block;
    font-size: 11px;
    line-height: 1.45;
}


/* =========================================================
   TOOLTIP ENHANCEMENT
   Works with the existing title attributes.
   ========================================================= */

.social-icons a,
.contact-links a,
.contact-icon {
    position: relative;
}

.social-icons a[title]::after,
.contact-links a[title]::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translate(-50%, 5px);
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(10,10,15,.95);
    color: #fff;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity .2s ease,
        transform .2s ease;
    z-index: 100;
    box-shadow: 0 8px 25px rgba(0,0,0,.25);
}

.social-icons a[title]:hover::after,
.contact-links a[title]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Active navbar item while scrolling */
.nav nav a.active {
    color: #0d6efd;
}

.nav nav a.active::after {
    width: 100%;
}

/* Active item in mobile drawer */
.mobile-drawer a.active {
    color: #0d6efd;
}

.mobile-drawer a.active small,
.mobile-drawer a.active b {
    color: #0d6efd;
}
/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .contact-expanded .contact-links {
        grid-template-columns: 1fr 1fr;
    }

    .global-contact-grid {
        grid-template-columns: 1fr 1fr;
    }

    .global-contact-grid > div:last-child {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .contact-expanded {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .contact-expanded .contact-links {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 25px;
    }

    .contact-expanded .contact-links a {
        min-height: 82px;
    }

    .contact-office,
    .contact-global {
        padding: 20px;
        border-radius: 19px;
    }

    .contact-office address {
        padding-left: 0;
        margin-top: 15px;
    }

    .global-contact-grid {
        grid-template-columns: 1fr;
    }

    .global-contact-grid > div:last-child {
        grid-column: auto;
    }

    .contact-social-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .social-icons a {
        width: 42px;
        height: 42px;
    }

    .contact-expanded .contact-form {
        margin-top: 15px;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .form-quick-contact {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   REDUCE MOTION — ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

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

}

 /* Smooth scrolling for all internal page navigation. */
 html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
 }

 /* Dynamic scroll-to-top button */
 .scroll-top {
  position: fixed;
  right: 24px;
  bottom: 0;
  z-index: 9998;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(8,17,31,.88);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(.92);
  transition: opacity .25s ease, visibility .25s ease,
  transform .25s ease, background .25s ease;
 }
 .scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
 }

 .scroll-top:hover,
 .scroll-top:focus-visible {
  background: #0d6efd;
  transform: translateY(-3px) scale(1.04);
 }
/* Bootstrap 5.3-style tooltip */
.scroll-top[data-tooltip] {
    position: fixed;
}

.scroll-top[data-tooltip]::before {
    content: "";
    position: absolute;
    right: 18px;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: #000;
    transform: rotate(45deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}

.scroll-top[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    padding: .35rem .65rem;
    border-radius: .375rem;
    background: #000;
    color: #fff;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}

.scroll-top[data-tooltip]:hover::before,
.scroll-top[data-tooltip]:hover::after,
.scroll-top[data-tooltip]:focus-visible::before,
.scroll-top[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.scroll-top[data-tooltip]:hover::after,
.scroll-top[data-tooltip]:focus-visible::after {
    transform: translateY(0);
}
 .scroll-top:focus-visible {
  outline: 3px solid rgba(13,110,253,.30);
  outline-offset: 3px;
 }

 .scroll-top i {
  font-size: 17px;
  transition: transform .2s ease;
 }

 .scroll-top:hover i {
  transform: translateY(-2px);
 }

 .footer-spacer {
  display: block;
  min-width: 1px;
 }

 @media (max-width: 700px) {
  .scroll-top {
   right: 16px;
   bottom: 16px;
   width: 44px;
   height: 44px;
  }
 }

 @media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-top { transition: none; }
 }

 /* =========================================================
   CONTACT SECTION — FINAL UI/UX
   ========================================================= */

.contact-expanded {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 70px;
    padding: clamp(55px, 7vw, 90px);
    margin-bottom: 100px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 8% 12%, rgba(65,105,255,.18), transparent 30%),
        radial-gradient(circle at 92% 88%, rgba(0,190,170,.10), transparent 28%),
        #07101e;
    color: #fff;
    box-shadow: 0 30px 90px rgba(7,16,30,.18);
}

.contact-expanded::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -300px;
    top: -300px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.07);
    box-shadow:
        0 0 0 70px rgba(255,255,255,.025),
        0 0 0 140px rgba(255,255,255,.018);
    pointer-events: none;
    z-index: -1;
}

.contact-expanded::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 45px 45px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    pointer-events: none;
    z-index: -1;
}

.contact-intro,
.contact-expanded .contact-form {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.contact-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9da9bc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.contact-eyebrow span {
    width: 25px;
    height: 1px;
    background: #6f86ff;
}

.contact-expanded .contact-intro h2 {
    max-width: 650px;
    margin: 18px 0 22px;
    font: 800 clamp(42px, 4.8vw, 68px)/1.02 Manrope;
    letter-spacing: -.06em;
    color: #fff;
}

.contact-lead {
    max-width: 610px;
    margin: 0;
    color: #9eabc0;
    font-size: 14px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   PHONE METHODS
   --------------------------------------------------------- */

.contact-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 34px;
}

.contact-method {
    position: relative;
    min-width: 0;
    min-height: 108px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 13px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 17px;
    background: rgba(255,255,255,.045);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.contact-method::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 25%,
        rgba(255,255,255,.08),
        transparent 75%
    );
    transform: translateX(-120%);
    transition: transform .65s ease;
}

.contact-method:hover::before {
    transform: translateX(120%);
}

.contact-method:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.method-icon {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #91a4ff;
}

.method-content {
    min-width: 0;
}

.method-content small {
    display: block;
    margin-bottom: 4px;
    color: #8795ab;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .12em;
}

.method-content strong {
    display: block;
    font-size: 10px;
    line-height: 1.35;
    white-space: nowrap;
}

.method-content em {
    display: block;
    margin-top: 4px;
    color: #758299;
    font-size: 8px;
    font-style: normal;
}

.method-arrow {
    position: absolute;
    right: 11px;
    top: 11px;
    color: #6178ff;
    font-size: 9px;
    transition: transform .25s ease;
}

.contact-method:hover .method-arrow {
    transform: translate(2px,-2px);
}


/* ---------------------------------------------------------
   WHATSAPP + EMAIL
   --------------------------------------------------------- */

.contact-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.contact-quick a {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 11px;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
    color: #fff;
    text-decoration: none;
    transition: .3s ease;
}

.contact-quick a:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
}

.contact-quick a > span {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.07);
    color: #8da0ff;
    font-size: 16px;
}

.contact-quick strong {
    font-size: 10px;
}

.contact-quick small {
    margin-top: 2px;
    color: #758299;
    font-size: 8px;
}


/* ---------------------------------------------------------
   OFFICE
   --------------------------------------------------------- */

.contact-office {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 22px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
}

.office-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: #8da0ff;
}

.contact-office small {
    display: block;
    margin-bottom: 4px;
    color: #758299;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .14em;
}

.contact-office strong {
    display: block;
    font-size: 12px;
}

.contact-office address {
    margin-top: 8px;
    color: #8794a8;
    font-size: 10px;
    font-style: normal;
    line-height: 1.65;
}

.contact-global-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #66748b;
    font-size: 9px;
}

.contact-global-note i {
    color: #7187ff;
}


/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.contact-expanded .contact-form {
    align-self: start;
    margin: 0;
    padding: clamp(25px, 3vw, 35px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 25px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.035)
        );
    box-shadow:
        0 30px 80px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.form-topline {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 27px;
}

.form-number {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #91a4ff;
    font: 800 10px Manrope;
}

.form-topline small {
    display: block;
    margin-bottom: 4px;
    color: #748198;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .16em;
}

.form-topline h3 {
    margin: 0;
    font: 800 23px/1.15 Manrope;
    letter-spacing: -.04em;
}

.form-topline p {
    margin: 6px 0 0;
    color: #7d899d;
    font-size: 10px;
    line-height: 1.5;
}

.form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

.contact-expanded .contact-form label {
    display: block;
    margin-bottom: 16px;
    color: #c0c9d7;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
}

.contact-expanded .contact-form input,
.contact-expanded .contact-form textarea {
    width: 100%;
    margin-top: 7px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    outline: none;
    background: rgba(0,0,0,.16);
    color: #fff;
    font: inherit;
    font-size: 11px;
    line-height: 1.5;
    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.contact-expanded .contact-form input::placeholder,
.contact-expanded .contact-form textarea::placeholder {
    color: #7b8799;
    opacity: 1;
}

.contact-expanded .contact-form input:focus,
.contact-expanded .contact-form textarea:focus {
    border-color: rgba(119,139,255,.65);
    background: rgba(0,0,0,.24);
    box-shadow: 0 0 0 4px rgba(65,105,255,.10);
}

.message-field {
    margin-top: 1px;
}

.contact-expanded .contact-form textarea {
    min-height: 120px;
    resize: vertical;
}


/* ---------------------------------------------------------
   SUBMIT
   --------------------------------------------------------- */

.contact-submit {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 4px;
    padding: 9px 10px 9px 18px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #07101e;
    cursor: pointer;
    text-align: left;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.contact-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,.20);
}

.contact-submit strong {
    display: block;
    font: 800 12px Manrope;
}

.contact-submit small {
    display: block;
    margin-top: 3px;
    color: #727d8e;
    font-size: 8px;
}

.contact-submit b {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #07101e;
    color: #fff;
    font-size: 13px;
    transition: transform .3s ease;
}

.contact-submit:hover b {
    transform: translateX(3px);
}


/* ---------------------------------------------------------
   FORM TRUST
   --------------------------------------------------------- */

.form-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
}

.form-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #68758a;
    font-size: 8px;
}

.form-trust i {
    color: #7187ff;
}


/* ---------------------------------------------------------
   CONTACT TOOLTIPS
   Bootstrap-like visual treatment
   --------------------------------------------------------- */

.contact-method[title],
.contact-quick a[title] {
    position: relative;
}

.contact-method[title]::after,
.contact-quick a[title]::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translate(-50%, 4px);
    padding: 6px 9px;
    border-radius: 6px;
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 3px 8px rgba(0,0,0,.20);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
}

.contact-method[title]::before,
.contact-quick a[title]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    width: 8px;
    height: 8px;
    background: #000;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 19;
}

.contact-method[title]:hover::after,
.contact-method[title]:hover::before,
.contact-quick a[title]:hover::after,
.contact-quick a[title]:hover::before {
    opacity: 1;
    visibility: visible;
}

.contact-method[title]:hover::after,
.contact-quick a[title]:hover::after {
    transform: translate(-50%, 0);
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 980px) {

    .contact-expanded {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 55px;
    }

    .contact-methods {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 700px) {

    .contact-expanded {
        width: calc(100% - 30px);
        padding: 38px 22px;
        border-radius: 25px;
        gap: 35px;
        margin-bottom: 70px;
    }

    .contact-expanded .contact-intro h2 {
        font-size: 40px;
    }

    .contact-lead {
        font-size: 12px;
    }

    .contact-methods {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 25px;
    }

    .contact-method {
        min-height: 76px;
    }

    .contact-quick {
        grid-template-columns: 1fr;
    }

    .contact-office {
        padding: 17px;
    }

    .contact-expanded .contact-form {
        padding: 22px 18px;
        border-radius: 21px;
    }

    .form-fields {
        grid-template-columns: 1fr;
    }

    .form-topline h3 {
        font-size: 21px;
    }

    .form-trust {
        gap: 10px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .contact-expanded *,
    .contact-expanded *::before,
    .contact-expanded *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

}