@font-face {
  font-family:Jakarta;
  src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}

:root {
  --color-primary:#334ddb;
  --color-secondary:#151d47;
  --color-bg:#fff;
  --color-text:#192345;
  --color-muted:#626b80;
  --color-light:#f5f7fc;
  --color-border:#e5e9f1;
  --color-cyan:#daf5f8;
  --radius:18px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow:0 16px 48px #1526570c;
  --space:8px;
  --space-2:16px;
  --space-3:24px;
  --container:1200px;
  --header-height:88px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:115px;
}

body {
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:Jakarta,Arial,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

body.menu-open {
  overflow:hidden;
}

h1,h2,h3,h4,p,figure {
  margin:0;
}

h1,h2,h3,h4 {
  line-height:1.16;
  letter-spacing:-.045em;
}

h1 {
  font-size:clamp(2.65rem,5.1vw,4.65rem);
  font-weight:700;
}

h2 {
  font-size:clamp(2rem,3.25vw,2.9rem);
  font-weight:650;
}

h3 {
  font-size:1.2rem;
  letter-spacing:-.025em;
}

p {
  color:var(--color-muted);
}

a {
  color:inherit;
  text-decoration:none;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:wait;
}

button {
  color:inherit;
}

a,button {
  touch-action:manipulation;
}

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

img {
  display:block;
  height:auto;
}

svg.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  flex-shrink:0;
  vertical-align:middle;
}

ul,ol {
  margin:0;
  padding:0;
  list-style:none;
}

::selection {
  background:#dce4ff;
  color:#172145;
}

:focus-visible {
  outline:3px solid #5269e8;
  outline-offset:5px;
}

section[id],article[id] {
  scroll-margin-top:115px;
}

[hidden] {
  display:none!important;
}

.container {
  width:min(var(--container),calc(100% - 96px));
  margin-inline:auto;
}

.section {
  padding-block:100px;
}

.section-soft {
  background:var(--color-light);
}

.section-line {
  border-top:1px solid var(--color-border);
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--color-primary);
  font-size:0.75rem;
  font-weight:750;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:20px;
}

.eyebrow::before {
  content:'';
  width:21px;
  height:2px;
  background:currentColor;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:48px;
  margin-bottom:44px;
}

.section-heading h2 {
  max-width:700px;
}

.section-heading p {
  max-width:400px;
  margin-top:18px;
}

.section-heading .text-link {
  flex-shrink:0;
  margin-bottom:5px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--color-primary);
  font-size:.9rem;
  font-weight:700;
  line-height:1.5;
}

.text-link .icon {
  width:19px;
}

.text-link:hover .icon {
  transform:translateX(4px);
}

.text-link .icon {
  transition:transform .2s;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:51px;
  padding:13px 23px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-weight:650;
  font-size:.87rem;
  line-height:1.4;
  transition:background .2s,transform .2s,box-shadow .2s;
}

.button:hover {
  transform:translateY(-2px);
}

.button:active {
  transform:translateY(0);
}

.button-primary {
  color:white;
  background:var(--color-primary);
  box-shadow:0 5px 14px #334ddb18;
}

.button-primary:hover {
  background:#263fca;
  box-shadow:0 8px 20px #334ddb28;
}

.button-secondary {
  border-color:#d9dfeb;
  background:#ffffffb0;
  color:var(--color-text);
}

.button-secondary:hover {
  background:#fff;
  border-color:#acb7ce;
}

.button-light {
  background:#fff;
  color:var(--color-primary);
}

.button-light:hover {
  background:#edf1ff;
}

.button .icon {
  width:18px;
  height:18px;
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--color-primary);
  color:white;
  padding:12px 22px;
  z-index:1000;
  border-radius:0 0 8px 8px;
}

.skip-link:focus {
  top:0;
}

.site-header {
  height:var(--header-height);
  position:sticky;
  top:0;
  z-index:50;
  background:#ffffffec;
  border-bottom:1px solid #e9edf380;
  backdrop-filter:blur(18px);
  transition:box-shadow .25s;
}

.site-header.is-scrolled {
  box-shadow:0 4px 24px #17214509;
  border-color:var(--color-border);
}

.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

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

.brand-word {
  font-size:1.37rem;
  font-weight:800;
  letter-spacing:-.06em;
  color:#202750;
}

.brand-word span {
  color:var(--color-primary);
}

.main-nav {
  display:flex;
  align-items:center;
  gap:32px;
}

.nav-link {
  font-size:.83rem;
  font-weight:550;
  color:#5d6379;
  position:relative;
  transition:color .2s;
}

.nav-link:hover,.nav-link[aria-current] {
  color:var(--color-primary);
}

.nav-link[aria-current]::after {
  content:'';
  position:absolute;
  bottom:-9px;
  left:0;
  width:16px;
  height:2px;
  background:var(--color-primary);
}

.nav-cta {
  margin-left:10px;
  min-height:43px;
  padding:11px 17px;
  font-size:.78rem;
}

.menu-toggle {
  display:none;
  width:44px;
  height:44px;
  padding:10px;
  border:1px solid var(--color-border);
  background:#fff;
  border-radius:var(--radius-sm);
  position:relative;
}

.menu-toggle span {
  height:2px;
  background:var(--color-text);
  display:block;
  position:absolute;
  left:12px;
  width:18px;
  transition:transform .25s,top .25s;
  top:16px;
}

.menu-toggle span+span {
  top:24px;
}

.menu-toggle[aria-expanded=true] span {
  top:20px;
  transform:rotate(45deg);
}

.menu-toggle[aria-expanded=true] span+span {
  transform:rotate(-45deg);
}

.hero {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 85% 40%,#e9edff 0,transparent 50%),radial-gradient(ellipse at 53% 100%,#e8f6fa 0,transparent 55%),#fbfcff;
}

.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(#52689b06 1px,transparent 1px),linear-gradient(90deg,#52689b06 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to right,transparent,#000);
}

.hero-main {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:25px;
  align-items:center;
  min-height:662px;
  position:relative;
  padding-block:70px 65px;
}

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

.hero-copy .eyebrow {
  font-size:0.75rem;
  letter-spacing:.12em;
  margin-bottom:25px;
}

.hero h1 {
  line-height:1.12;
  font-size:clamp(3.4rem,5.15vw,4.55rem);
  max-width:620px;
  letter-spacing:-.065em;
}

.hero h1 span {
  color:var(--color-primary);
}

.hero-description {
  font-size:1rem;
  line-height:1.85;
  max-width:475px;
  margin-top:25px;
}

.hero .actions {
  margin-top:30px;
}

.hero-note {
  display:flex;
  align-items:center;
  gap:var(--space);
  font-size:0.75rem;
  color:var(--color-muted);
  margin-top:23px;
}

.hero-note .icon {
  width:14px;
  height:14px;
}

.hero-visual {
  height:465px;
  position:relative;
  margin-right:-35px;
  isolation:isolate;
}

.orbit {
  position:absolute;
  width:510px;
  height:510px;
  left:0;
  top:-10px;
  border:1px solid #8397d421;
  border-radius:50%;
  z-index:-1;
}

.orbit::before,.orbit::after {
  content:'';
  position:absolute;
  border:1px solid #8397d41a;
  border-radius:50%;
  inset:45px;
}

.orbit::after {
  inset:-45px;
  border-style:dashed;
}

.dashboard {
  background:#fff;
  border:1px solid #dbe2ef;
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 30px 70px #314b871b;
  font-size:11px;
  text-align:left;
  color:#4d5973;
}

.hero-visual>.dashboard {
  position:absolute;
  width:530px;
  top:55px;
  left:8px;
  transform:perspective(1400px) rotateY(-7deg) rotateZ(-3deg);
  transform-origin:center;
  z-index:1;
}

.window-bar {
  display:flex;
  align-items:center;
  gap:5px;
  height:30px;
  padding:0 12px;
  border-bottom:1px solid #eaf0f7;
  background:#fafbfe;
}

.window-bar i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d4dbeb;
}

.window-bar i:first-child {
  background:#eaaea9;
}

.window-bar i:nth-child(2) {
  background:#ead4a0;
}

.window-bar i:nth-child(3) {
  background:#a5d3bb;
}

.window-address {
  margin:auto;
  font-size:8px;
  color:#7a8499;
  letter-spacing:.03em;
  padding-right:25px;
}

.dashboard-body {
  display:grid;
  grid-template-columns:106px 1fr;
  min-height:300px;
}

.dash-sidebar {
  background:#f9faff;
  padding:18px 10px;
  border-right:1px solid #edf0f8;
}

.dash-brand {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:800;
  color:#2e3e73;
  letter-spacing:-.04em;
  margin-bottom:26px;
}

.dash-brand img {
  width:20px;
  height:20px;
}

.dash-nav {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  padding:var(--space);
  border-radius:5px;
  color:#7c879c;
  margin-bottom:5px;
}

.dash-nav .icon {
  width:12px;
  height:12px;
}

.dash-nav.active {
  color:var(--color-primary);
  background:#e8edff;
  font-weight:700;
}

.dash-main {
  padding:20px 18px;
}

.dash-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.dash-title strong {
  font-size:15px;
  letter-spacing:-.035em;
  color:#263355;
}

.dash-title p {
  font-size:8px;
  margin-top:4px;
}

.dash-avatar {
  background:#e9edfd;
  border:3px solid #fff;
  outline:1px solid #e8edf6;
  border-radius:50%;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  color:#455fbc;
  font-size:8px;
  font-weight:700;
}

.dash-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space);
  margin-bottom:var(--space-2);
}

.dash-stat {
  border:1px solid #e9edf4;
  border-radius:6px;
  padding:10px;
}

.dash-stat>span {
  font-size:7px;
  color:#7f8ba1;
  display:block;
}

.dash-stat strong {
  font-size:14px;
  font-weight:700;
  display:block;
  margin:3px 0;
  color:#344261;
}

.dash-stat small {
  font-size:6px;
  color:#19876b;
}

.dash-chart {
  border:1px solid #e8edf5;
  border-radius:6px;
  padding:12px;
  position:relative;
}

.dash-chart-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
}

.dash-chart-top span {
  color:#8491a8;
  font-size:7px;
}

.bars {
  display:flex;
  align-items:end;
  gap:13px;
  height:83px;
  border-bottom:1px solid #e7edf9;
  margin-top:13px;
  padding-inline:8px;
  background:repeating-linear-gradient(to top,transparent,transparent 26px,#f1f4fa 26px,#f1f4fa 27px);
}

.bar {
  flex:1;
  background:linear-gradient(#7388f4,#4964de);
  border-radius:3px 3px 0 0;
  height:65%;
}

.bar:nth-child(2) {
  height:83%;
}

.bar:nth-child(3) {
  height:74%;
}

.bar:nth-child(4) {
  height:94%;
}

.bar:nth-child(5) {
  height:83%;
}

.bar:nth-child(6) {
  height:50%;
  background:#c6d2fc;
}

.bar:nth-child(7) {
  height:40%;
  background:#dbe3fc;
}

.chart-days {
  display:flex;
  justify-content:space-around;
  font-size:6px;
  color:#8590a6;
  margin-top:5px;
}

.dash-bottom {
  display:flex;
  gap:6px;
  margin-top:12px;
  font-size:7px;
  align-items:center;
  color:#8491a8;
}

.dash-bottom .icon {
  width:10px;
  height:10px;
  color:#548d7d;
}

.floating-card {
  position:absolute;
  z-index:3;
  background:#ffffffee;
  box-shadow:0 14px 40px #25366514;
  border:1px solid #e0e7f3;
  border-radius:var(--radius-md);
  backdrop-filter:blur(12px);
}

.float-code {
  top:7px;
  right:17px;
  padding:14px 20px;
  transform:rotate(4deg);
  font-size:10px;
  width:194px;
}

.code-head {
  font-size:9px;
  color:#9aa4b7;
  border-bottom:1px solid #edf0f7;
  padding-bottom:9px;
  margin-bottom:var(--space);
  display:flex;
  align-items:center;
  gap:6px;
}

.code-head .icon {
  width:11px;
  height:11px;
}

.code-line {
  font-family:Consolas,monospace;
  color:#648690;
  line-height:1.9;
}

.code-line span {
  color:#8167bb;
}

.code-indent {
  padding-left:14px;
}

.float-status {
  left:-13px;
  bottom:16px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 19px;
  transform:rotate(2deg);
}

.float-status>.status-check {
  background:#e9f8f0;
  color:#31846b;
  padding:var(--space);
  display:grid;
  place-items:center;
  border-radius:10px;
}

.float-status strong {
  display:block;
  font-size:11px;
  color:#34425b;
}

.float-status small {
  font-size:9px;
  color:#8a94a5;
}

.float-mobile {
  right:8px;
  bottom:39px;
  padding:12px;
  transform:rotate(7deg);
  display:flex;
  align-items:center;
  gap:9px;
}

.float-mobile .icon {
  width:24px;
  height:24px;
  color:var(--color-primary);
}

.float-mobile strong {
  font-size:10px;
  display:block;
}

.float-mobile small {
  font-size:8px;
  display:block;
  color:#7a859c;
}

.visual-caption {
  position:absolute;
  bottom:-16px;
  right:56px;
  font-size:9px;
  letter-spacing:.03em;
  color:#838c9e;
}

.capabilities-bar {
  border-top:1px solid #dfe6f1;
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-block:24px;
  gap:20px;
}

.capability {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  font-size:.76rem;
  color:#68748e;
  line-height:1.6;
  border-right:1px solid #dfe6f1;
}

.capability:last-child {
  border-right:0;
}

.capability .icon {
  width:21px;
  height:21px;
  color:#536da4;
}

.capability strong {
  font-size:.79rem;
  font-weight:600;
  color:#3a4964;
  display:block;
}

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

.service-card {
  display:flex;
  flex-direction:column;
  align-items:start;
  min-height:235px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:27px 24px;
  position:relative;
  transition:border-color .2s,transform .25s,box-shadow .25s;
  background:#fff;
}

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

.icon-box {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  background:#eef2ff;
  color:#4b62d1;
  border-radius:10px;
  margin-bottom:25px;
}

.service-card:nth-child(3n+2) .icon-box {
  background:#ecf7fb;
  color:#3b8ba5;
}

.service-card h3 {
  font-size:1rem;
  line-height:1.4;
  letter-spacing:-.025em;
  margin-bottom:10px;
}

.service-card p {
  font-size:0.875rem;
  line-height:1.8;
}

.card-arrow {
  position:absolute;
  right:23px;
  top:29px;
  color:#a2abc0;
}

.card-arrow .icon {
  width:16px;
  height:16px;
}

.service-card:hover .card-arrow {
  color:var(--color-primary);
}

.service-card>a::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius-md);
}

.service-card:focus-within {
  outline:3px solid #5269e8;
  outline-offset:3px;
}

.project-grid {
  display:grid;
  grid-template-columns:1.18fr 1fr;
  gap:28px;
}

.project-card {
  background:white;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow .25s,transform .25s;
}

.project-card:hover {
  box-shadow:var(--shadow);
  transform:translateY(-4px);
}

.project-art {
  height:290px;
  position:relative;
  overflow:hidden;
  background:#e9eefb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.project-art .dashboard {
  width:380px;
  transform:translate(16px,40px) rotate(-5deg);
  flex-shrink:0;
  box-shadow:0 18px 40px #34437e24;
}

.project-art .dashboard-body {
  min-height:270px;
}

.project-art .dash-main {
  padding:15px 13px;
}

.project-art .dash-sidebar {
  padding:17px 8px;
}

.project-art .dash-brand {
  font-size:12px;
}

.project-art .dashboard-body {
  grid-template-columns:85px 1fr;
}

.project-art .dash-stat {
  padding:7px;
}

.project-art .dash-stat strong {
  font-size:11px;
}

.project-art .bars {
  gap:var(--space);
  height:73px;
}

.project-art::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 80%,#b8c8fd99,transparent 60%);
}

.project-caption {
  position:absolute;
  top:20px;
  left:23px;
  font-size:9px;
  color:#657b9e;
  letter-spacing:.02em;
}

.project-art-label {
  position:absolute;
  right:24px;
  top:24px;
  font-size:10px;
  color:#516b96;
  background:#ffffff85;
  border:1px solid #ffffffb0;
  border-radius:6px;
  padding:4px 9px;
}

.project-art-mobile {
  background:#e7f2f4;
}

.project-art-mobile::before {
  background:radial-gradient(circle at 80% 80%,#b3d4dc80,transparent 65%);
}

.phone-mockup {
  position:relative;
  width:159px;
  min-height:282px;
  background:white;
  border:5px solid #344056;
  border-radius:26px;
  box-shadow:12px 18px 35px #42667b2b;
  padding:13px 10px 10px;
  transform:rotate(8deg) translate(32px,41px);
  font-size:8px;
  color:#465976;
}

.phone-island {
  height:9px;
  width:42px;
  border-radius:9px;
  background:#344056;
  margin:-8px auto 16px;
}

.phone-greeting {
  font-size:7px;
  color:#7a899e;
}

.phone-mockup h4 {
  font-size:13px;
  letter-spacing:-.03em;
  margin:4px 0 12px;
}

.phone-map {
  height:87px;
  border-radius:var(--radius-sm);
  position:relative;
  background:repeating-linear-gradient(22deg,transparent,transparent 14px,#fff 15px,#fff 20px,transparent 21px),repeating-linear-gradient(105deg,#eaf0e9,#eaf0e9 24px,#fff 25px,#fff 30px);
  overflow:hidden;
}

.phone-map::after {
  content:'';
  position:absolute;
  inset:-20px 28px;
  transform:rotate(24deg);
  background:#b7ddeb;
  width:15px;
}

.phone-map .map-dot {
  position:absolute;
  top:25px;
  left:58px;
  border-radius:50%;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  background:#4266d9;
  color:#fff;
  border:3px solid white;
  z-index:1;
}

.phone-map .icon {
  width:10px;
  height:10px;
}

.phone-categories {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-top:11px;
  text-align:center;
  font-size:5px;
}

.phone-categories span {
  display:block;
}

.phone-categories .icon {
  width:13px;
  height:13px;
  color:#5b76a9;
  background:#eef3fa;
  border-radius:4px;
  padding:2px;
  box-sizing:content-box;
  margin-bottom:3px;
}

.phone-news {
  padding:9px 7px;
  background:#f2f6fb;
  border-radius:5px;
  margin-top:11px;
  display:flex;
  gap:7px;
  align-items:center;
  font-size:6px;
  line-height:1.6;
}

.phone-news .icon {
  width:16px;
  height:16px;
  color:#6485b8;
}

.phone-bottom {
  margin:11px auto -2px;
  display:flex;
  justify-content:space-around;
  color:#8390a6;
}

.phone-bottom .icon {
  width:12px;
  height:12px;
}

.mobile-art-copy {
  position:absolute;
  top:95px;
  left:37px;
  width:145px;
  z-index:1;
}

.mobile-art-copy strong {
  display:block;
  font-size:27px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:-.06em;
  color:#385569;
}

.mobile-art-copy p {
  font-size:9px;
  line-height:1.7;
  margin-top:10px;
  width:115px;
  color:#6d8896;
}

.mobile-art-copy .mini-tag {
  display:inline-block;
  margin-top:13px;
  font-size:8px;
  border:1px solid #adcad480;
  border-radius:5px;
  padding:3px 7px;
  color:#65849a;
}

.project-content {
  padding:28px 30px;
}

.project-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}

.project-category {
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:.09em;
  color:var(--color-primary);
  text-transform:uppercase;
}

.project-content h3 {
  font-size:1.55rem;
  margin-bottom:11px;
}

.project-content>p {
  font-size:1rem;
  line-height:1.85;
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:19px;
}

.tag {
  padding:4px 10px;
  border:1px solid #e6eaf3;
  background:#f8f9fc;
  border-radius:5px;
  font-size:0.75rem;
  line-height:1.6;
  color:var(--color-muted);
}

.project-footer {
  margin-top:23px;
  border-top:1px solid #eef0f6;
  padding-top:19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.project-footer small {
  font-size:0.75rem;
  color:#8790a2;
}

.project-footer .text-link {
  font-size:0.875rem;
}

.custom-project {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  border:1px solid var(--color-border);
  background:#fff;
  border-radius:var(--radius-md);
  padding:27px 32px;
  margin-top:25px;
}

.custom-project-main {
  display:flex;
  gap:22px;
  align-items:center;
}

.custom-project .icon-box {
  margin:0;
  flex-shrink:0;
}

.custom-project h3 {
  font-size:1rem;
}

.custom-project p {
  font-size:.8rem;
  margin-top:7px;
}

.custom-project .text-link {
  font-size:.8rem;
  flex-shrink:0;
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:26px;
  position:relative;
  margin-top:58px;
}

.process-grid::before {
  content:'';
  position:absolute;
  top:23px;
  height:1px;
  background:#dfe5f3;
  left:20px;
  right:20px;
}

.process-step {
  position:relative;
}

.step-number {
  display:grid;
  place-items:center;
  width:47px;
  height:47px;
  border:1px solid #dce3f7;
  border-radius:50%;
  background:white;
  font-size:.87rem;
  color:#4760ca;
  margin-bottom:26px;
  box-shadow:0 0 0 8px white;
  position:relative;
}

.process-step h3 {
  font-size:1rem;
  margin-bottom:12px;
}

.process-step p {
  font-size:0.875rem;
  line-height:1.85;
  max-width:205px;
}

.process-note {
  display:flex;
  align-items:center;
  gap:var(--space);
  color:#8390a8;
  font-size:.75rem;
  margin-top:35px;
}

.process-note .icon {
  width:15px;
  height:15px;
}

.why-layout {
  display:grid;
  grid-template-columns:.95fr 1.15fr;
  gap:85px;
  align-items:center;
}

.why-copy h2 {
  max-width:390px;
}

.why-copy>p {
  font-size:.9rem;
  line-height:1.9;
  margin-top:25px;
  max-width:420px;
}

.why-copy .text-link {
  margin-top:26px;
}

.benefits-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 32px;
}

.benefit .icon {
  color:#5670c8;
  margin-bottom:15px;
  width:24px;
  height:24px;
}

.benefit h3 {
  font-size:.92rem;
  line-height:1.45;
  margin-bottom:var(--space);
}

.benefit p {
  font-size:0.875rem;
  line-height:1.85;
}

.technology-section {
  padding-block:60px;
  border-bottom:1px solid var(--color-border);
}

.technology-intro {
  text-align:center;
  font-size:0.875rem;
  color:#8790a3;
  margin-bottom:28px;
}

.technology-list {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px 34px;
  align-items:center;
}

.technology-list li {
  font-weight:650;
  color:#65718a;
  font-size:.93rem;
  letter-spacing:-.03em;
  display:flex;
  align-items:center;
  gap:7px;
}

.technology-list .icon {
  width:18px;
  height:18px;
  color:#8191ad;
}

.technology-list .tech-small {
  font-size:.77rem;
  font-weight:500;
  color:#8993a6;
}

.public-block {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding-block:39px;
}

.public-copy {
  display:flex;
  gap:20px;
  align-items:center;
}

.public-symbol {
  width:47px;
  height:47px;
  background:#edf3fc;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#4f729e;
  flex-shrink:0;
}

.public-copy h3 {
  font-size:.93rem;
  line-height:1.5;
}

.public-copy p {
  font-size:.78rem;
  margin-top:3px;
}

.public-block .text-link {
  font-size:.78rem;
  white-space:nowrap;
}

.cta-section {
  padding:30px 0 90px;
}

.cta-panel {
  position:relative;
  overflow:hidden;
  padding:64px 65px;
  border-radius:var(--radius);
  background:linear-gradient(115deg,#273dac,#405ad4 65%,#425ccf);
  background-color:#334abb;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.cta-panel::after {
  content:'';
  position:absolute;
  width:370px;
  height:370px;
  border:1px solid #ffffff15;
  border-radius:50%;
  right:-80px;
  top:-170px;
  box-shadow:0 0 0 50px #ffffff04,0 0 0 100px #ffffff04;
  pointer-events:none;
}

.cta-panel h2 {
  font-size:2.1rem;
  line-height:1.3;
}

.cta-panel p {
  color:#f2f5ff;
  font-size:1rem;
  margin-top:14px;
  max-width:510px;
}

.cta-panel .button {
  flex-shrink:0;
  z-index:1;
}

.cta-eyebrow {
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#c2cffc;
  margin-bottom:var(--space-2);
}

.site-footer {
  background:#f8faff;
  border-top:1px solid #e9edf6;
  padding:59px 0 0;
}

.footer-main {
  display:grid;
  grid-template-columns:1.5fr .75fr 1fr 1.2fr;
  gap:48px;
  padding-bottom:45px;
}

.footer-brand>p {
  font-size:0.875rem;
  max-width:240px;
  margin-top:18px;
  line-height:1.9;
}

.footer-location {
  font-size:0.75rem;
  color:#8a94a7;
  margin-top:20px;
  display:flex;
  align-items:center;
  gap:6px;
}

.footer-location .icon {
  width:13px;
  height:13px;
}

.footer-column h3 {
  font-size:0.875rem;
  font-weight:700;
  letter-spacing:0;
  margin:9px 0 22px;
}

.footer-column li {
  font-size:0.875rem;
  color:#778199;
  margin-top:9px;
}

.footer-column a:hover {
  color:var(--color-primary);
}

.footer-column .footer-email {
  color:#465c9b;
  font-size:0.875rem;
}

.footer-column p {
  font-size:0.875rem;
}

.footer-column .footer-public {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.75rem;
  padding:6px 10px;
  background:#edf2fb;
  border-radius:5px;
  margin-top:var(--space-2);
  color:#687ea1;
}

.footer-public .icon {
  width:13px;
  height:13px;
}

.footer-bottom {
  padding:22px 0;
  border-top:1px solid #e3e8f2;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:0.75rem;
  color:#8b94a8;
}

.footer-bottom > span:last-child {
  display:flex;
  gap:7px;
  align-items:center;
}

.footer-bottom .icon {
  width:12px;
  height:12px;
}

.page-hero {
  position:relative;
  overflow:hidden;
  padding:69px 0 76px;
  background:radial-gradient(ellipse at 95% 0%,#eaf0ff,transparent 62%),#f8faff;
  border-bottom:1px solid #e6ecf5;
}

.breadcrumb {
  display:flex;
  gap:10px;
  color:#8a94a8;
  font-size:0.75rem;
  margin-bottom:37px;
  align-items:center;
}

.breadcrumb a:hover {
  color:var(--color-primary);
}

.breadcrumb span[aria-hidden] {
  color:#b9c1d0;
}

.page-hero h1 {
  max-width:850px;
}

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

.page-hero .lead {
  max-width:660px;
  margin-top:var(--space-3);
  font-size:1.05rem;
  line-height:1.9;
}

.page-hero .eyebrow {
  margin-bottom:18px;
}

.page-hero .hero-footer-note {
  font-size:.75rem;
  display:flex;
  align-items:center;
  gap:var(--space);
  margin-top:28px;
  color:#7d8ba4;
}

.hero-footer-note .icon {
  width:16px;
  height:16px;
}

.about-intro {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:85px;
  align-items:center;
}

.prose p+p {
  margin-top:20px;
}

.prose p {
  font-size:1rem;
  line-height:1.95;
}

.prose h2 {
  margin-bottom:27px;
}

.origin-art {
  background:linear-gradient(140deg,#eef2fe,#eaf5f8);
  border:1px solid #e0e8f3;
  border-radius:20px;
  padding:45px;
  min-height:385px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}

.origin-art::after {
  content:'';
  width:300px;
  height:300px;
  border:1px solid #b8c8df50;
  border-radius:50%;
  position:absolute;
  right:-70px;
  top:-75px;
  box-shadow:0 0 0 40px #b8c8df0e,0 0 0 80px #b8c8df0c;
}

.origin-art .brand {
  position:relative;
  z-index:1;
}

.origin-art .brand img {
  width:50px;
  height:50px;
}

.origin-art .brand-word {
  font-size:2rem;
}

.origin-location {
  position:relative;
  z-index:1;
}

.origin-location .icon {
  width:30px;
  height:30px;
  color:#537cc0;
  margin-bottom:17px;
}

.origin-location h3 {
  font-size:1.7rem;
  line-height:1.4;
}

.origin-location p {
  font-size:.83rem;
  margin-top:10px;
}

.origin-coordinates {
  font-size:.66rem;
  color:#8292aa;
  margin-top:var(--space-3);
  letter-spacing:.08em;
}

.mission-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.mission-card {
  padding:40px;
  border:1px solid #e1e8f4;
  border-radius:var(--radius-lg);
  background:#fff;
}

.mission-card h2 {
  font-size:1.8rem;
  margin:8px 0 20px;
}

.mission-card p {
  font-size:1rem;
  line-height:1.95;
}

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

.principle {
  padding-top:25px;
  border-top:1px solid #dce3f2;
}

.principle>span {
  font-size:.73rem;
  color:var(--color-primary);
  font-weight:700;
}

.principle h3 {
  font-size:1.05rem;
  margin:22px 0 15px;
  line-height:1.5;
}

.principle p {
  font-size:0.9375rem;
  line-height:1.9;
}

.service-index {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:31px;
}

.service-index a {
  font-size:0.8125rem;
  line-height:1.5;
  color:#64779a;
  background:#fff;
  border:1px solid #dee6f4;
  border-radius:6px;
  padding:9px 13px;
  transition:border-color .2s,color .2s;
}

.service-index a:hover {
  color:var(--color-primary);
  border-color:#aabbee;
}

.service-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}

.service-detail {
  padding:35px;
  border:1px solid var(--color-border);
  border-radius:15px;
  background:white;
  display:flex;
  flex-direction:column;
  align-items:start;
}

.service-detail .service-heading {
  display:flex;
  align-items:center;
  gap:17px;
  margin-bottom:21px;
}

.service-detail .icon-box {
  margin:0;
  flex-shrink:0;
}

.service-detail h2 {
  font-size:1.28rem;
  line-height:1.4;
  letter-spacing:-.035em;
}

.service-detail p {
  font-size:1rem;
  line-height:1.9;
}

.check-list {
  margin-top:21px;
  display:grid;
  gap:10px;
}

.check-list li {
  display:flex;
  align-items:start;
  gap:9px;
  font-size:0.875rem;
  line-height:1.7;
  color:#65738c;
}

.check-list .icon {
  width:16px;
  height:16px;
  color:#5a79c0;
  margin-top:2px;
}

.service-detail .text-link {
  font-size:.8rem;
  margin-top:auto;
  padding-top:24px;
}

.service-detail .tags {
  margin-bottom:22px;
}

.support-band {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.support-band p {
  margin-top:22px;
  font-size:.95rem;
}

.support-band .check-list {
  padding:30px;
  border:1px solid #dae3f4;
  border-radius:15px;
  background:#fff;
  gap:20px;
}

.support-band .check-list li {
  font-size:.9rem;
}

.filter-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:35px;
}

.filter-group {
  display:flex;
  gap:var(--space);
  flex-wrap:wrap;
}

.filter-button {
  background:#fff;
  border:1px solid #e3e8f2;
  border-radius:7px;
  padding:9px 18px;
  font-size:0.875rem;
  color:#7a859a;
  transition:background .2s,color .2s;
}

.filter-button:hover {
  border-color:#aebceb;
  color:var(--color-primary);
}

.filter-button[aria-pressed=true] {
  background:#eaf0ff;
  color:#354fc9;
  border-color:#d2ddff;
  font-weight:650;
}

.filter-count {
  font-size:0.75rem;
  color:#8a94a6;
}

.projects-list {
  display:grid;
  gap:28px;
}

.case-card {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:white;
}

.case-card .project-art {
  height:100%;
  min-height:365px;
}

.case-card .project-art>.dashboard {
  width:410px;
  transform:rotate(-5deg) translate(15px,20px);
}

.case-card .project-content {
  padding:38px;
}

.case-card .project-content h2 {
  font-size:2rem;
  margin:12px 0 18px;
}

.case-card .project-content>p {
  font-size:.86rem;
}

.case-card .project-content .text-link {
  margin-top:23px;
  font-size:.81rem;
}

.case-card .project-art-mobile .phone-mockup {
  transform:rotate(8deg) translate(35px,47px);
  width:177px;
  min-height:326px;
}

.case-card .phone-map {
  height:112px;
}

.case-card .phone-categories {
  margin-top:15px;
}

.case-card .phone-news {
  padding:12px 7px;
}

.case-card .mobile-art-copy {
  left:37px;
  top:91px;
}

.case-card .mobile-art-copy strong {
  font-size:32px;
}

.case-detail {
  grid-column:1/-1;
  border-top:1px solid #e8edf5;
  padding:0 38px;
  background:#fcfdff;
}

.case-detail summary {
  padding:20px 0;
  cursor:pointer;
  color:#5069b0;
  font-size:.82rem;
  font-weight:600;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.case-detail summary::-webkit-details-marker {
  display:none;
}

.case-detail summary .icon {
  width:18px;
  height:18px;
  transition:transform .25s;
}

.case-detail[open] summary .icon {
  transform:rotate(180deg);
}

.case-detail-content {
  padding:8px 0 31px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:50px;
}

.case-detail-content h3 {
  font-size:1rem;
  margin-bottom:15px;
}

.case-detail-content p {
  font-size:0.875rem;
  line-height:1.9;
}

.case-detail-content .check-list {
  margin-top:0;
  grid-template-columns:1fr 1fr;
  gap:12px 22px;
}

.case-detail-content .text-link {
  font-size:.8rem;
  margin-top:20px;
}

.custom-art {
  background:#edf1fb;
  flex-direction:column;
  padding:45px;
  gap:var(--space-3);
}

.architecture-diagram {
  width:100%;
  max-width:330px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:23px;
  position:relative;
}

.diagram-core {
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid #dbe3f7;
  padding:17px 24px;
  border-radius:var(--radius-md);
  box-shadow:0 8px 25px #3247770a;
  color:#4e60a0;
  font-size:.81rem;
  font-weight:600;
  z-index:1;
}

.diagram-core img {
  width:25px;
  height:25px;
}

.diagram-line {
  height:23px;
  width:1px;
  background:#b4c6e9;
  position:absolute;
  top:62px;
}

.diagram-nodes {
  display:flex;
  gap:13px;
  position:relative;
}

.diagram-nodes::before {
  content:'';
  position:absolute;
  left:42px;
  right:42px;
  top:-13px;
  height:12px;
  border:1px solid #b4c6e9;
  border-bottom:none;
}

.diagram-node {
  width:85px;
  text-align:center;
  background:#ffffffae;
  border:1px solid #d6e1f4;
  padding:16px 6px;
  border-radius:9px;
  font-size:.64rem;
  color:#7584a6;
  position:relative;
}

.diagram-node .icon {
  display:block;
  margin:0 auto 9px;
  color:#5c78bd;
  width:23px;
  height:23px;
}

.diagram-caption {
  font-size:.64rem;
  color:#8997b1;
  margin-top:6px;
  text-align:center;
}

.contact-layout {
  display:grid;
  grid-template-columns:.75fr 1.3fr;
  gap:80px;
  align-items:start;
}

.contact-info h2 {
  font-size:2rem;
  line-height:1.25;
}

.contact-info>p {
  font-size:1rem;
  line-height:1.9;
  margin-top:20px;
}

.contact-method {
  display:flex;
  gap:15px;
  margin-top:33px;
}

.contact-method .icon-box {
  width:41px;
  height:41px;
  flex-shrink:0;
}

.contact-method strong {
  font-size:0.875rem;
  display:block;
  line-height:1.5;
  margin-bottom:7px;
}

.contact-method p,.contact-method a {
  font-size:0.9375rem;
  line-height:1.8;
  display:block;
  color:#77839a;
}

.contact-method a:hover {
  color:var(--color-primary);
}

.contact-public {
  border:1px solid #dce5f2;
  border-radius:var(--radius-md);
  background:#f7faff;
  padding:var(--space-3);
  margin-top:18px;
}

.contact-public h3 {
  font-size:.87rem;
  display:flex;
  align-items:center;
  gap:9px;
}

.contact-public .icon {
  width:18px;
  height:18px;
  color:#647eb7;
}

.contact-public p {
  font-size:.77rem;
  margin-top:12px;
}

.contact-public .text-link {
  font-size:.73rem;
  margin-top:var(--space-2);
}

.contact-form {
  padding:35px;
  border:1px solid #e0e7f1;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  background:#fff;
}

.contact-form h2 {
  font-size:1.4rem;
  margin-bottom:9px;
}

.form-intro {
  font-size:0.875rem;
  margin-bottom:27px;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.form-field {
  min-width:0;
}

.form-field-full {
  grid-column:1/-1;
}

.form-field label {
  display:block;
  font-size:0.875rem;
  color:#4f5e79;
  font-weight:600;
  margin-bottom:var(--space);
}

.form-field label>span {
  color:#929eb1;
  font-weight:400;
  font-size:0.75rem;
}

.form-field input,.form-field select,.form-field textarea {
  display:block;
  width:100%;
  border:1px solid #dce3ee;
  background:#fcfdff;
  border-radius:7px;
  padding:11px 13px;
  min-height:45px;
  font-size:1rem;
  color:#3e4d6a;
  transition:border-color .2s,box-shadow .2s;
}

.form-field textarea {
  resize:vertical;
  min-height:128px;
  line-height:1.8;
}

.form-field input::placeholder,.form-field textarea::placeholder {
  color:#919aae;
}

.form-field select {
  cursor:pointer;
}

.form-field input:focus,.form-field textarea:focus,.form-field select:focus {
  border-color:#869bef;
  background:#fff;
  outline:none;
  box-shadow:0 0 0 3px #536deb14;
}

.form-field [aria-invalid=true] {
  border-color:#c65163;
}

.field-error {
  color:#b1384a;
  font-size:0.8125rem;
  display:block;
  margin-top:5px;
  line-height:1.6;
  min-height:0;
}

.form-submit {
  margin-top:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.form-submit p {
  font-size:0.75rem;
  line-height:1.7;
  max-width:230px;
}

.form-submit .button {
  font-size:.78rem;
  white-space:nowrap;
}

.form-demo-note {
  padding:14px 16px;
  background:#f4f7fd;
  border:1px solid #e3eaf7;
  border-radius:7px;
  font-size:0.8125rem;
  line-height:1.8;
  color:#7c88a0;
  margin-top:23px;
}

.form-demo-note strong {
  color:#566786;
}

.form-demo-note a {
  text-decoration:underline;
  text-underline-offset:3px;
  color:#506bb6;
}

.form-status {
  margin-top:20px;
  border-radius:var(--radius-sm);
  font-size:.83rem;
  line-height:1.85;
  padding:16px 18px;
  background:#edf5ff;
  color:#36537a;
  border:1px solid #ccdef7;
}

.form-status[data-state=error] {
  background:#fff3f4;
  border-color:#f3d4da;
  color:#a6394c;
}

.form-status:empty {
  display:none;
}

.honeypot {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.contact-bottom {
  border-top:1px solid var(--color-border);
  padding-top:30px;
  margin-top:70px;
  display:flex;
  justify-content:space-between;
  gap:30px;
}

.contact-bottom p {
  font-size:.78rem;
  max-width:730px;
}

.contact-bottom .text-link {
  font-size:.78rem;
  white-space:nowrap;
}

.noscript-notice {
  padding:12px;
  background:#edf3ff;
  border:1px solid #cedbf2;
  font-size:.8rem;
  border-radius:7px;
  color:#41597c;
  margin-bottom:20px;
}

.project-features {
  display:flex;
  flex-wrap:wrap;
  gap:9px 18px;
  margin-top:var(--space-2);
}

.project-features span {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:0.75rem;
  color:#7988a0;
}

.project-features .icon {
  width:13px;
  height:13px;
  color:#6e86ba;
}

/* Mantiene legibilidad y dimensiones estables en todos los contenedores. */
.hero-main > *, .contact-layout > *, .about-intro > *, .case-card > * {
  min-width: 0;
}

.footer-column li, .footer-column p, .footer-location, .footer-bottom,
.breadcrumb, .form-demo-note, .filter-button, .filter-count,
.project-footer small, .technology-intro, .process-note,
.form-field label > span, .contact-method p, .contact-method a,
.page-hero .hero-footer-note, .project-features span, .diagram-caption,
.origin-coordinates, .technology-list .tech-small {
  color: var(--color-muted);
}

.form-field input::placeholder, .form-field textarea::placeholder {
  color: #68758b;
}

.footer-column .footer-public {
  color: #536683;
}