@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ─── TOKENS ─── */
:root {
  --bg: #f9f9f7;
  --white: #ffffff;
  --off: #f2f2ef;
  --black: #0d0d0b;
  --g1: #2b2b29;
  --g2: #5a5a56;
  --g3: #9a9a94;
  --g4: #c8c8c0;
  --g5: #e2e2da;
  --blue: #1a56ff;
  --blue2: #0040e6;
  --blue-s: rgba(26, 86, 255, .07);
  --r: 18px;
  --sh-sm: 0 2px 20px rgba(0, 0, 0, .05), 0 0 0 1px rgba(0, 0, 0, .04);
  --sh-md: 0 8px 44px rgba(0, 0, 0, .09), 0 0 0 1px rgba(0, 0, 0, .04);
  --sh-lg: 0 24px 72px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .04);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--black);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--g4); border-radius: 2px; }
img, svg { display: block; }

/* ─── NAV ─── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(28px, 4.5vw);
  background: rgba(249, 249, 247, .82);
  backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.n-logo {
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--black);
  text-decoration: none;
}

.n-logo em { color: var(--blue); font-style: normal; }

.n-links { display: flex; gap: 2.4rem; list-style: none; }

.n-links a {
  font-size: .78rem;
  font-weight: 400;
  color: var(--g2);
  text-decoration: none;
  transition: color .2s;
}

.n-links a:hover { color: var(--black); }

.n-btn {
  font-size: .78rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  background: var(--black);
  padding: .44rem 1.1rem;
  border-radius: 980px;
  transition: background .25s;
}

.n-btn:hover { background: var(--blue); }

.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}

.ham span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--black);
  transition: all .3s;
  border-radius: 2px;
}

.ham.op span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.ham.op span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.op span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

.mob {
  display: none;
  position: fixed;
  top: 54px;
  left: 12px;
  right: 12px;
  z-index: 790;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid var(--g5);
  box-shadow: 0 16px 60px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0,0,0,.04);
  flex-direction: column;
  padding: .6rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transform-origin: top center;
  transition: opacity .25s cubic-bezier(.23,1,.32,1),
              transform .25s cubic-bezier(.23,1,.32,1);
}

.mob.op {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}

.mob a {
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 500;
  color: var(--g1);
  text-decoration: none;
  padding: .85rem 1.1rem;
  border-radius: 12px;
  transition: background .18s, color .18s;
  letter-spacing: -.01em;
}

.mob a:hover {
  background: var(--off);
  color: var(--black);
}

.mob-cta {
  margin-top: .3rem;
  padding: .85rem 1.1rem;
  background: var(--black);
  color: var(--white) !important;
  border-radius: 12px;
  font-weight: 600 !important;
  text-align: center;
  transition: background .2s !important;
}

.mob-cta:hover {
  background: var(--blue) !important;
  color: var(--white) !important;
}

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10rem max(28px, 6vw) 8rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(26, 86, 255, .055) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(26, 86, 255, .035) 0%, transparent 55%);
}

.h-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--white);
  border: 1px solid var(--g5);
  border-radius: 980px;
  padding: .36rem 1rem;
  margin-bottom: 2.2rem;
  box-shadow: var(--sh-sm);
  animation: fU .6s ease .1s both;
  position: relative;
  z-index: 1;
}

.h-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 7px rgba(34, 197, 94, .6);
  animation: pulse 2s ease infinite;
}

.h-chip span { font-size: .72rem; font-weight: 500; color: var(--g1); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .3; transform: scale(.6); }
}

.h-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1.05;
  color: var(--black);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.h-title .ln { display: block; }

.h-title .ln-i {
  display: block;
  animation: lU 1s cubic-bezier(.23, 1, .32, 1) both;
}

.h-title .ln:nth-child(1) .ln-i { animation-delay: .2s; }
.h-title .ln:nth-child(2) .ln-i { animation-delay: .35s; }
.h-title .ln:nth-child(3) .ln-i { animation-delay: .5s; }

.h-title .bl {
  background: linear-gradient(120deg, var(--blue) 0%, #5a8bff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.h-title .thin { font-weight: 400; font-style: italic; }

.h-sub {
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
  font-weight: 300;
  color: var(--g2);
  max-width: 480px;
  line-height: 1.72;
  letter-spacing: -.01em;
  margin-bottom: 3rem;
  animation: fU .7s ease .8s both;
  position: relative;
  z-index: 1;
}

.h-sub strong { color: var(--g1); font-weight: 500; }

.h-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: fU .7s ease 1s both;
  position: relative;
  z-index: 1;
}

.btn-blue {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .9rem 2rem;
  background: var(--black);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 980px;
  transition: all .28s cubic-bezier(.23, 1, .32, 1);
  letter-spacing: -.01em;
}

.btn-blue:hover {
  background: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(26, 86, 255, .28);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .9rem 2rem;
  background: transparent;
  color: var(--black);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 980px;
  border: 1.5px solid var(--g4);
  transition: all .28s cubic-bezier(.23, 1, .32, 1);
  letter-spacing: -.01em;
}

.btn-ghost:hover {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}

@keyframes lU {
  from { opacity: 0; transform: translateY(110%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fU {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── MARQUEE ─── */
.mq {
  overflow: hidden;
  padding: 1.1rem 0;
  background: var(--off);
  border-top: 1px solid var(--g5);
  border-bottom: 1px solid var(--g5);
}

.mq-t {
  display: flex;
  animation: mq 30s linear infinite;
  white-space: nowrap;
}

.mq:hover .mq-t { animation-play-state: paused; }

.mi {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--g3);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 2rem;
  border-right: 1px solid var(--g5);
  transition: color .2s;
}

.mi:hover { color: var(--blue); }

@keyframes mq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ─── SECTION COMMONS ─── */
.sec { padding: 9rem max(28px, 5.5vw); }

.sec-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .8rem;
}

.sec-h {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.0;
  color: var(--black);
}

.sec-h span {
  background: linear-gradient(120deg, var(--blue) 0%, #5a8bff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sec-p {
  font-size: clamp(.88rem, 1.4vw, 1rem);
  color: var(--g2);
  line-height: 1.75;
  font-weight: 300;
  margin-top: .8rem;
}

/* ─── SERVICES ─── */
.services { background: var(--off); }

.sv-intro {
  max-width: 600px;
  margin: 0 auto 4rem;
  text-align: center;
}

.sv-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 960px;
  margin: 0 auto;
}

.sv-item {
  background: var(--white);
  border-radius: var(--r);
  padding: 2.2rem;
  border: 1px solid rgba(0, 0, 0, .04);
  display: grid;
  grid-template-columns: 1.2fr 1fr .8fr;
  align-items: center;
  gap: 2.5rem;
  transition: transform .4s cubic-bezier(.23, 1, .32, 1), box-shadow .4s;
}

.sv-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.sv-main {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.sv-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--off);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}

.sv-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: .4rem;
  color: var(--black);
}

.sv-desc {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--g2);
  font-weight: 300;
}

.sv-features {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.sv-feat {
  font-size: .8rem;
  color: var(--g1);
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 400;
}

.sv-feat svg {
  width: 14px; height: 14px;
  color: var(--blue);
  background: var(--blue-s);
  border-radius: 50%;
  padding: 2px;
}

.sv-price-area {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .8rem;
}

.sv-price {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -.04em;
}

.sv-desde {
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--g3);
  letter-spacing: .08em;
  display: block;
  margin-bottom: -4px;
}

.sv-cta {
  font-size: .78rem;
  font-weight: 600;
  color: var(--white);
  background: var(--black);
  padding: .6rem 1.4rem;
  border-radius: 980px;
  text-decoration: none;
  transition: all .25s;
}

.sv-cta:hover {
  background: var(--blue);
  box-shadow: 0 4px 15px rgba(26, 86, 255, .25);
}

@media (max-width: 900px) {
  .sv-item {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 2rem;
  }
  .sv-price-area {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--off);
    padding-top: 1.5rem;
  }
}

/* ─── PROJECTS ─── */
.projects { background: var(--white); }

.pj-top { margin-bottom: 4rem; }

.pj-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .pj-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .pj-card:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 2.2 / 1; }
}

.pj-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--g5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  aspect-ratio: 1 / 1.1;
  border: 1px solid rgba(0, 0, 0, .05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  transition: box-shadow 0.4s;
}

.pj-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.pj-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.pj-glass {
  position: relative;
  z-index: 2;
  margin: 1.2rem;
  padding: 1.4rem;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  color: var(--black);
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.pj-card:hover .pj-glass {
  transform: translateY(-8px);
}

.pj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem;
}

.pj-badge {
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  padding: .35rem .7rem;
  border-radius: 980px;
  letter-spacing: .06em;
}

.pj-arrow {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--black);
  transition: transform .25s ease;
}

.pj-card:hover .pj-arrow {
  transform: translate(3px, -3px);
  color: var(--blue);
}

.pj-name {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .4rem;
  color: var(--black);
  transition: color .2s;
}

.pj-card:hover .pj-name {
  color: var(--blue);
}

.pj-desc {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--g1);
  margin-bottom: 1.2rem;
  max-width: 90%;
}

.pj-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.pill {
  font-size: .75rem;
  font-weight: 600;
  background: rgba(0, 0, 0, .05);
  color: var(--black);
  padding: .35rem .8rem;
  border-radius: 980px;
}

/* ─── ABOUT ─── */
.about { background: var(--off); }

.ab-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 6rem;
  align-items: center;
}

.ab-card {
  background: var(--black);
  border-radius: 24px;
  padding: 3rem;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 15, 60, .3);
}

.ab-card::before {
  content: '';
  position: absolute;
  top: -80px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 86, 255, .3) 0%, transparent 65%);
  pointer-events: none;
}

.ab-avatar {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.8);
  margin-bottom: 1.5rem;
  border: 1.5px solid rgba(255, 255, 255, .15);
  position: relative;
  z-index: 1;
}

.ab-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -.05em;
  margin-bottom: .2rem;
  position: relative;
  z-index: 1;
}

.ab-role {
  font-size: .8rem;
  opacity: .45;
  margin-bottom: 2.2rem;
  position: relative;
  z-index: 1;
  font-weight: 300;
}

.ab-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 980px;
  padding: .4rem 1rem;
  font-size: .72rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.ab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, .9);
}

.ab-text .sec-h { margin-bottom: 1.4rem; }

.ab-body {
  font-size: clamp(.88rem, 1.3vw, 1rem);
  line-height: 1.88;
  color: var(--g2);
  font-weight: 300;
  margin-bottom: 1.8rem;
}

.ab-body strong { color: var(--black); font-weight: 600; }

.ab-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.8rem;
}

.ab-li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .86rem;
  color: var(--g1);
}

.ab-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ab-check svg { width: 10px; height: 10px; color: var(--blue); }

.ab-chips { display: flex; flex-wrap: wrap; gap: .45rem; }

.ab-chip {
  padding: .42rem .95rem;
  background: var(--white);
  border: 1px solid var(--g5);
  border-radius: 980px;
  font-size: .76rem;
  font-weight: 500;
  color: var(--g1);
  transition: all .22s;
}

.ab-chip:hover {
  background: var(--blue-s);
  color: var(--blue);
  border-color: rgba(26, 86, 255, .14);
}

/* ─── CONTACT ─── */
.contact { background: var(--white); }

.ct-head {
  text-align: center;
  margin-bottom: 4.5rem;
}

.ct-head .sec-p { max-width: 420px; margin: .8rem auto 0; }

.ct-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 640px;
  margin: 0 auto;
}

.ct-cards { display: flex; flex-direction: column; gap: .7rem; }

.ct-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.2rem;
  background: var(--off);
  border-radius: 13px;
  border: 1px solid var(--g5);
  text-decoration: none;
  color: inherit;
  transition: all .25s cubic-bezier(.23, 1, .32, 1);
  cursor: pointer;
}

.ct-card:hover {
  background: var(--blue-s);
  border-color: rgba(26, 86, 255, .12);
  transform: translateX(4px);
}

/* Form success message */
.ct-success {
  display: none;
  align-items: center;
  gap: .6rem;
  margin-top: 1.2rem;
  padding: .9rem 1.2rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  color: #15803d;
  font-size: .85rem;
  font-weight: 500;
}

.ct-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--g5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g2);
  flex-shrink: 0;
}

.ct-lbl {
  font-size: .58rem;
  font-weight: 700;
  color: var(--g3);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: block;
  margin-bottom: .1rem;
}

.ct-val {
  font-size: .85rem;
  font-weight: 500;
  color: var(--black);
}

.ct-form {
  background: var(--off);
  border-radius: 22px;
  padding: 2.5rem;
  border: 1px solid var(--g5);
}

.ct-form-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 1.8rem;
}

.fg { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }

.flbl {
  font-size: .65rem;
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.fin, .fta {
  background: var(--white);
  border: 1.5px solid transparent;
  border-radius: 11px;
  color: var(--black);
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  padding: .82rem 1rem;
  outline: none;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
  resize: none;
}

.fin::placeholder, .fta::placeholder { color: var(--g3); }

.fin:focus, .fta:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(26, 86, 255, .08);
}

.fta { min-height: 105px; }

.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

.btn-submit {
  width: 100%;
  padding: .9rem;
  background: var(--black);
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  border: none;
  border-radius: 980px;
  margin-top: .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  transition: all .28s cubic-bezier(.23, 1, .32, 1);
}

.btn-submit:hover {
  background: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(26, 86, 255, .28);
}

.btn-submit .arr { transition: transform .25s; }
.btn-submit:hover .arr { transform: translate(3px, -3px); }

/* ─── FOOTER ─── */
footer {
  background: var(--black);
  padding: 3rem max(28px, 5.5vw);
}

.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  flex-wrap: wrap;
}

.f-logo {
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.03em;
  margin-bottom: .35rem;
}

.f-logo em { color: var(--blue); font-style: normal; }

.f-tagline { font-size: .74rem; color: rgba(255, 255, 255, .3); }

.f-cols { display: flex; gap: 4rem; flex-wrap: wrap; }

.f-col h4 {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .25);
  margin-bottom: 1rem;
}

.f-col a {
  display: block;
  font-size: .78rem;
  color: rgba(255, 255, 255, .42);
  text-decoration: none;
  margin-bottom: .5rem;
  transition: color .2s;
}

.f-col a:hover { color: var(--white); }

.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.f-copy { font-size: .7rem; color: rgba(255, 255, 255, .22); }

.f-back {
  font-size: .74rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: gap .2s;
}

.f-back:hover { gap: .6rem; }

/* ─── SCROLL REVEAL ─── */
.sr {
  transition: opacity .9s cubic-bezier(.23, 1, .32, 1),
              transform .9s cubic-bezier(.23, 1, .32, 1),
              filter .9s cubic-bezier(.23, 1, .32, 1);
  will-change: opacity, transform;
}

/* Default: rise up */
.sr.hi               { opacity: 0; transform: translateY(44px); filter: blur(2px); }

/* From left */
.sr.hi.sl            { opacity: 0; transform: translateX(-50px) rotate(-1deg); filter: blur(2px); }

/* From right */
.sr.hi.sr2           { opacity: 0; transform: translateX(50px) rotate(1deg); filter: blur(2px); }

/* Scale up */
.sr.hi.sc            { opacity: 0; transform: scale(.88) translateY(24px); filter: blur(3px); }

/* Flip in from bottom (cards) */
.sr.hi.flip          { opacity: 0; transform: perspective(800px) rotateX(12deg) translateY(36px); filter: blur(1px); }

/* Visible state — all variants */
.sr.vi               { opacity: 1; transform: none; filter: blur(0); }

/* Stagger delays */
.d1 { transition-delay: .06s; }
.d2 { transition-delay: .13s; }
.d3 { transition-delay: .20s; }
.d4 { transition-delay: .27s; }
.d5 { transition-delay: .34s; }

/* ─── SECTION ENTRANCE DECORATIONS ─── */

/* Marquee text pop */
.mq { transition: opacity .6s ease; }
.mq.hi { opacity: 0; }
.mq.vi { opacity: 1; }

/* Service cards — staggered flip */
.sv-card { transform-origin: bottom center; }

/* Project cards — staggered with slight rotate */
.pj-card.hi  { opacity: 0; transform: translateY(48px) rotate(.6deg); filter: blur(1px); }
.pj-card.vi  { opacity: 1; transform: none; filter: blur(0); }

/* About card — dramatic slide */
.ab-card.hi  { opacity: 0; transform: translateX(-60px) scale(.96); filter: blur(3px); }
.ab-card.vi  { opacity: 1; transform: none; filter: blur(0); }

/* Section headings — clip reveal via translateY */
.sec-h.hi   { opacity: 0; transform: translateY(32px); filter: blur(1px); }
.sec-h.vi   { opacity: 1; transform: none; filter: blur(0); }

/* Contact form */
.ct-form.hi  { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(2px); }
.ct-form.vi  { opacity: 1; transform: none; filter: blur(0); }

/* Contact cards stagger */
.ct-card { transition: all .25s cubic-bezier(.23,1,.32,1); }
.ct-cards.hi .ct-card { opacity: 0; transform: translateX(-20px); }
.ct-cards.vi .ct-card { opacity: 1; transform: none; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1000px) {
  .sv-grid { grid-template-columns: 1fr; }
  .sv-card.dark { grid-column: span 1; grid-template-columns: 1fr; }
  .pj-grid { grid-template-columns: 1fr 1fr; }
  .ab-inner { grid-template-columns: 1fr; gap: 3rem; }
  .ct-inner { grid-template-columns: 1fr; gap: 3rem; }
  .sec { padding: 7rem max(20px, 4vw); }
}

@media (max-width: 768px) {
  nav { padding: 0 5vw; }
  .n-links, .n-btn { display: none; }
  .ham { display: flex; }
  .mob { display: flex; }
  .hero { padding: 7rem 5vw 5rem; min-height: auto; }
  .h-title { font-size: clamp(2.6rem, 10vw, 4rem); }
  .h-sub { font-size: .92rem; }
  .h-actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .btn-blue, .btn-ghost { justify-content: center; }
  .pj-grid { grid-template-columns: 1fr; }
  .sec { padding: 5.5rem 5vw; }
  .ct-form { padding: 1.8rem; }
  .f2 { grid-template-columns: 1fr; }
  .foot-top { flex-direction: column; }
  .f-cols { flex-direction: column; gap: 2rem; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 390px) {
  .hero { padding: 6rem 4vw 4rem; }
  .h-title { font-size: clamp(2.1rem, 11vw, 2.8rem); }
  .sec { padding: 4.5rem 4vw; }
}

/* ─── SCREEN MODE (SPA) ─── */
body.screen-mode {
  overflow: hidden; /* Disable main window scroll */
}

/* Consistency for all screen sections */
.screen-mode .screen-section {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--bg);
  z-index: 10;
  padding-top: 54px; /* Space for nav */
  padding-left: 0 !important; /* Footers should hit the edge */
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  display: block; /* Consistent block behavior for scrolling */
  text-align: left; /* Reset centering for the container */
}

/* All sections (except hero which uses hero-inner) should have their padding on content */
.screen-mode .sec > *:not(footer) {
  padding-left: max(28px, 5.5vw);
  padding-right: max(28px, 5.5vw);
}

.screen-mode .hero {
  min-height: auto;
}

.screen-mode .hero-inner {
  min-height: calc(100vh - 54px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* padding: 4rem max(28px, 6vw); moved to logic below */
}

.screen-mode .hero-inner, 
.screen-mode .hero > .mq {
  padding-left: max(28px, 5.5vw);
  padding-right: max(28px, 5.5vw);
}

.screen-mode .screen-section.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  z-index: 20;
  transform: translateY(0) scale(1);
}

/* Initial state for non-active screens to enable transitions */
.screen-mode .screen-section:not(.active) {
  transform: translateY(20px) scale(0.98);
}

/* Hide marquee and other global elements if they don't fit the screen model */
/* or wrap them into sections */
.screen-mode .mq {
  display: block;
  margin-top: 4rem; /* Spacing between hero buttons and marquee */
}

.screen-mode footer {
  margin-top: 0; /* Footer will be at the bottom of the contact screen or each screen */
}

/* Active navigation link indicator */
.n-links a.active {
  color: var(--blue);
  font-weight: 600;
}
/* ─── PRELOADER ─── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.8s;
}

.preloader.fade-out { opacity: 0; visibility: hidden; }

.pre-logo {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--white);
  display: flex;
  align-items: center;
}

.pre-em { color: var(--blue); }

.letter-c, .letter-s {
  display: inline-block;
  opacity: 0;
  animation: letterDrop 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.letter-c { transform: translateY(-30px); }
.letter-s { transform: translateY(30px); animation-delay: 0.15s; }

@keyframes letterDrop {
  to { opacity: 1; transform: translateY(0); }
}

.text-expand {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 1.1s cubic-bezier(0.25, 1, 0.35, 1);
}

.preloader.open .text-expand {
  grid-template-columns: 1fr;
}

.text-expand .inner {
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.preloader.open .text-expand .inner {
  opacity: 1;
  transition-delay: 0.15s; 
}

/* ─── REGISTRO ─── */
.rg-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  min-height: calc(100vh - 54px);
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem max(28px, 5.5vw);
}

.rg-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(26, 86, 255, .12);
  border: 1px solid rgba(26, 86, 255, .3);
  border-radius: 980px;
  padding: .4rem 1rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(26, 86, 255, .9);
  margin-bottom: 1.8rem;
}

.rg-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  margin-bottom: 1.4rem;
  color: var(--black);
}

.rg-title span { color: var(--blue); }

.rg-desc {
  font-size: clamp(.9rem, 1.2vw, 1rem);
  line-height: 1.8;
  color: var(--g2);
  margin-bottom: 2rem;
  font-weight: 400;
}

.rg-desc strong { color: var(--black); font-weight: 600; }

.rg-perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.rg-perks li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .88rem;
  color: var(--g2);
  font-weight: 500;
}

.rg-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(26, 86, 255, .15);
  border: 1px solid rgba(26, 86, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--blue);
  font-weight: 700;
}

/* Card */
.rg-card {
  background: var(--white);
  border-radius: 22px;
  padding: 2.4rem;
  color: var(--black);
  box-shadow: 0 20px 50px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
}

.rg-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.rg-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--blue-s);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
}

.rg-card-title { font-weight: 700; font-size: 1rem; margin-bottom: .15rem; }
.rg-card-sub { font-size: .78rem; color: var(--g2); }

.rg-form { display: flex; flex-direction: column; gap: 1rem; }

.rg-fg { display: flex; flex-direction: column; gap: .4rem; }

.rg-lbl {
  font-size: .72rem;
  font-weight: 600;
  color: var(--g2);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rg-input {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--g5);
  border-radius: 12px;
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
  background: var(--off);
  color: var(--black);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}

.rg-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 86, 255, .1);
  background: var(--white);
}

.rg-btn {
  width: 100%;
  padding: 1rem;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: all .25s cubic-bezier(.23, 1, .32, 1);
  margin-top: .5rem;
}

.rg-btn:hover { background: #1248e0; box-shadow: 0 8px 24px rgba(26, 86, 255, .35); }
.rg-btn:disabled { opacity: .6; cursor: not-allowed; }

.rg-arrow { transition: transform .25s; }
.rg-btn:hover .rg-arrow { transform: translateX(3px); }

.rg-error {
  font-size: .82rem;
  color: #ef4444;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 9px;
  padding: .75rem 1rem;
}

/* Success state */
.rg-success {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
  gap: 1rem;
}

.rg-success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
}

.rg-success h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.04em;
  margin: 0;
}

.rg-success p {
  font-size: .88rem;
  color: var(--g2);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 800px) {
  .rg-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    min-height: auto;
    padding: 5rem max(28px, 5.5vw);
  }
}

/* ─── PROMO MODAL ─── */
.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  padding: 1.5rem;
}

.promo-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.promo-box {
  background: var(--white);
  border-radius: 24px;
  padding: 2.8rem 2.4rem;
  max-width: 440px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.promo-modal.show .promo-box {
  transform: translateY(0) scale(1);
}

.promo-close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--g2);
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}

.promo-close:hover {
  color: var(--black);
}

.promo-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--blue);
  background: rgba(26, 86, 255, 0.12);
  padding: 0.4rem 0.8rem;
  border-radius: 980px;
  letter-spacing: 0.05em;
  margin-bottom: 1.2rem;
}

.promo-box h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--black);
  letter-spacing: -0.04em;
  margin-bottom: 0.8rem;
  line-height: 1.2;
}

.promo-box p {
  font-size: 0.95rem;
  color: var(--g2);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.promo-btn {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 980px;
  font-size: 1.05rem;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 8px 20px rgba(26, 86, 255, 0.25);
  width: 100%;
}

.promo-btn:hover {
  background: #1248e0;
  transform: translateY(-2px);
}