/* ============================================
   CODE-STYLE — Framework CSS
   Inspired by Code Barcelona (codewebbarcelona.com)
   Deep purple + pink accent · Proxima Nova + Roboto Mono
   ============================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: 'proxima-nova', 'Helvetica Neue', Arial, sans-serif; font-size: 2rem; font-weight: 300; line-height: 1.4; background: #DBDCDE; color: #130046; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
input, textarea { font: inherit; color: inherit; }
svg { display: block; flex-shrink: 0; }

/* ---------- FOCUS ---------- */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- SKIP LINK ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 1rem 2rem;
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: none;
}

/* ---------- SCREEN READER ---------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  .hero-marquee-track, .logo-strip-track { animation: none; }
  .hanim > div > div { transform: none; opacity: 1; }
}

/* ---------- CUSTOM PROPERTIES ---------- */
:root {
  --c-primary: #130046;
  --c-accent: #FF608C;
  --c-bg: #DBDCDE;
  --c-lightgray: #F0F0F0;
  --c-gray: #999;
  --c-white: #fff;
  --c-card-bg: #F0F0F0;
  --c-faq-border: #C3C3C3;
  --c-gray-blue1: #678086;
  --c-gray-blue2: #C8D0D2;
  --c-purple-muted: #7A7797;

  --ff-body: 'proxima-nova', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: 'Roboto Mono', monospace;

  --fs-body: 2rem;
  --fs-body-m: 1.6rem;
  --fs-body-s: 1.4rem;
  --fs-mono: 1.3rem;
  --fs-h1: calc(3.2rem + 2.7vw);
  --fs-h3: calc(2rem + 1vw);
  --fs-h4: calc(1.8rem + 0.3vw);
  --fs-super: calc(5.5rem + 2vw);
  --fs-number: calc(5.5rem + 8vw);
  --fs-marquee: calc(5.5rem + 9vw);

  --sp-xs: 1rem;
  --sp-sm: 2rem;
  --sp-md: 4rem;
  --sp-lg: 8rem;
  --sp-xl: 15rem;
  --header-h: 6rem;
  --section-pad: 17rem 0 15rem;
  --sp-xxs: 0.5rem;
  --radius-pill: 100px;
  --radius-md: 1rem;
  --radius-sm: 0.4rem;

  --t-fast: 0.2s ease-in-out;
  --t-med: 0.7s ease-in-out;
  --t-reveal: 1.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-body);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h3); line-height: 0.95; }
h4 { font-size: var(--fs-h4); line-height: 1.1; }
h5 { font-size: 1.4rem; font-weight: 600; letter-spacing: 0.4px; line-height: 1.5; }

h1 em, h1 i, h2 em, h2 i, h3 em, h3 i { font-style: normal; color: var(--c-accent); }

.superh1 { font-size: var(--fs-super); line-height: 0.75; font-weight: 700; text-transform: uppercase; }
.text-mono { font-family: var(--ff-mono); font-size: var(--fs-mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
.text-large { font-size: var(--fs-body); line-height: 1.4; font-weight: 300; }
.text-regular { font-size: var(--fs-body-m); line-height: 1.5; font-weight: 300; }
.text-small { font-size: var(--fs-body-s); line-height: 1.6; font-weight: 300; }

/* ---------- CONTAINER ---------- */
.container { max-width: 100%; padding: 0 var(--sp-sm); }
@media (min-width: 1024px) { .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--sp-md); } }

.constraint-sm { max-width: 500px; }
.constraint-md { max-width: 620px; }
.constraint-lg { max-width: 820px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  text-transform: uppercase;
  padding: 3rem 6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-primary);
  background: var(--c-primary);
  color: #fff;
  cursor: pointer;
  transition: all var(--t-fast);
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); }
.btn--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); }
.btn--accent:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-accent); }
.btn--outline { background: transparent; border-color: var(--c-primary); color: var(--c-primary); }
.btn--outline:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); }
.btn--white { background: #fff; border-color: #fff; color: var(--c-primary); }
.btn--white:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn--sm { padding: 1.5rem 3rem; }
.btn--lg { padding: 3.5rem 7rem; font-size: 1.5rem; }
.btn .arrow { display: inline-block; transition: transform var(--t-fast); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- SECTION BASE ---------- */
.section { position: relative; padding: var(--section-pad); }
.section--dark { background: var(--c-primary); color: #fff; }
.section--dark h1 em, .section--dark h2 em, .section--dark h3 em { color: var(--c-accent); }
.section--light { background: var(--c-bg); }
.section--white { background: #fff; }
.section--card-bg { background: var(--c-lightgray); }

.section--dark .btn { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); }
.section--dark .btn:hover { background: #fff; border-color: #fff; color: var(--c-primary); }
.section--dark .btn--outline { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
.section--dark .btn--outline:hover { background: var(--c-accent); color: var(--c-primary); }

/* ---------- HEADER ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 600;
  height: var(--header-h);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  border-bottom: 1px solid var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-sm);
}
.header--dark { background: rgba(19,0,70,0.6); backdrop-filter: blur(7.5px); border-bottom-color: var(--c-accent); }
.header--dark .header-nav a { color: var(--c-accent); }
.header--dark .header-nav a:hover { color: #fff; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  height: 100%;
}
.header-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}
.header-logo svg { height: 5rem; width: auto; display: block; }
.header-logo svg path:nth-child(2) { fill: var(--c-accent); }

.header-nav { display: none; }
.header-nav a {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  color: var(--c-primary);
  transition: color var(--t-fast);
  padding: 0.4rem 0;
}
.header-nav a:hover { color: var(--c-accent); }

@media (min-width: 1024px) {
  .header-nav { display: flex; align-items: center; gap: 2.5rem; margin-left: auto; }
  .header-burger { display: none; }
}

.header-nav .btn { padding: 1rem 2.5rem; font-size: 1.1rem; }

/* Burger */
.header-burger {
  width: 4rem; height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 700;
  position: relative;
}
.header-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--c-primary);
  transition: transform var(--t-fast), opacity var(--t-fast);
  transform-origin: center;
}
.header--dark .header-burger span { background: var(--c-accent); }
.header-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-burger.active span:nth-child(2) { opacity: 0; }
.header-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- MOBILE MENU ---------- */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--c-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-panel.active { transform: translateX(0); }
.menu-panel a {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  color: var(--c-accent);
  letter-spacing: 2px;
}
.menu-panel a:hover { color: #fff; }

/* ---------- HERO ---------- */
.hero {
  height: calc(100vh - var(--header-h));
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  width: 100%;
  padding: 0 var(--sp-sm);
}
.hero-text { flex: 1; }
.hero-text .text-mono { color: var(--c-accent); margin-bottom: var(--sp-sm); }
.hero-text h1 { max-width: 14ch; }
.hero-text h1 em { color: var(--c-accent); }

.hero-device {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-md);
}

.hero-buttons {
  display: flex;
  gap: var(--sp-xs);
  margin-top: var(--sp-lg);
  flex-wrap: wrap;
}

.hero-device-card {
  aspect-ratio: 1;
  max-width: 400px;
  width: 100%;
  padding: var(--sp-lg);
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.28);
}

.hero-device-years {
  font-size: 3rem;
  margin-bottom: var(--sp-xs);
}

.hero-device-tagline {
  font-size: 1.6rem;
  margin-top: auto;
}

.section-footer-btn {
  text-align: center;
  margin-top: var(--sp-md);
}

@media (min-width: 1024px) {
  .hero-inner { flex-direction: row; align-items: center; max-width: 1400px; margin: 0 auto; }
  .hero-text { flex: 0 0 50%; }
  .hero-device { flex: 0 0 50%; justify-content: center; margin-top: 0; }
}

/* Hero marquee */
.hero-marquee {
  border-top: 1px solid var(--c-accent);
  overflow: hidden;
  padding: var(--sp-sm) 0;
  position: absolute;
  bottom: 0; left: 0; right: 0;
}
.hero-marquee-track {
  display: flex;
  gap: var(--sp-md);
  width: max-content;
  animation: scrollMarquee 25s linear infinite;
  font-size: var(--fs-marquee);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.67;
  color: #fff;
}
.hero-marquee-track em { font-style: normal; color: var(--c-accent); }
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- SECTION HEADER ---------- */
.section-header { margin-bottom: var(--sp-lg); }
.section-header .text-mono { color: var(--c-accent); margin-bottom: var(--sp-sm); }
.section-header h2 { max-width: 14ch; }
.section--dark .section-header .text-mono { color: var(--c-accent); }

/* Animated title line */
.title-line {
  display: block;
  position: relative;
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.title-line::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  border-bottom: 1px solid var(--c-primary);
  transition: width 1.2s ease-in-out;
}
.title-line.visible::after { width: 100%; }
.section--dark .title-line::after { border-color: var(--c-accent); }

/* ---------- SERVICES GRID ---------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--sp-xs) / 2);
}
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .services-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-md);
  aspect-ratio: 40/27;
  border-radius: var(--radius-md);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background var(--t-fast), box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(19, 0, 70, 0.12);
}
.service-card h3 { font-size: calc(1.8rem + 0.5vw); line-height: 0.95; margin-bottom: var(--sp-xs); }
.service-card p { font-size: var(--fs-body-m); font-weight: 300; margin-top: auto; margin-bottom: var(--sp-xs); }

.service-card--purple { background: var(--c-primary); color: var(--c-accent); }
.service-card--purple h3 { color: #fff; }
.service-card--purple h3 em { color: var(--c-accent); }
.service-card--pink { background: var(--c-accent); color: var(--c-primary); }
.service-card--muted { background: var(--c-purple-muted); color: #fff; }
.service-card--light { background: var(--c-lightgray); color: var(--c-primary); }

/* --- CARD BUTTONS --- */
.btn-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-family: var(--ff-mono);
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  align-self: flex-start;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-card .arrow {
  display: inline-block;
  transition: transform var(--t-fast);
}
.service-card:hover .btn-card .arrow {
  transform: translateX(5px);
}

.service-card--purple:hover .btn-card {
  background: var(--c-accent);
  color: var(--c-primary);
  border-color: var(--c-accent);
}
.service-card--pink:hover .btn-card {
  background: var(--c-primary);
  color: var(--c-accent);
  border-color: var(--c-primary);
}
.service-card--muted:hover .btn-card {
  background: var(--c-white);
  color: var(--c-purple-muted);
  border-color: var(--c-white);
}
.service-card--light:hover .btn-card {
  background: var(--c-primary);
  color: var(--c-white);
  border-color: var(--c-primary);
}

/* --- SERVICES QUICK NAV --- */
.services-nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: var(--sp-md);
  margin-bottom: var(--sp-sm);
  justify-content: center;
}
.services-nav .btn--outline {
  padding: 1.2rem 2.4rem;
  font-size: 1.1rem;
}

/* ---------- CASES / PROJECTS GRID ---------- */
.cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
}
@media (min-width: 640px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cases-grid { grid-template-columns: repeat(3, 1fr); } }

.case-card {
  background: var(--c-lightgray);
  aspect-ratio: 41/25;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.case-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  opacity: 0;
  border: 1px solid transparent;
  transition: opacity var(--t-med), border-color var(--t-med);
  padding: var(--sp-sm);
  text-align: center;
}
.case-card:hover .case-card-overlay { opacity: 1; border-color: var(--c-primary); }
.case-card-overlay .text-mono { color: var(--c-accent); }
.case-card-overlay h4 { font-size: 1.6rem; }

/* ---------- FEATURES GRID ---------- */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}
@media (min-width: 768px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }

.feature-item { display: flex; flex-direction: column; gap: var(--sp-xs); }
.feature-item h3 { font-size: calc(1.6rem + 0.5vw); }
.feature-item p { font-size: var(--fs-body-m); font-weight: 300; max-width: 45rem; }

/* ---------- TEAM GRID ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-card { text-align: center; padding: var(--sp-sm); }
.team-avatar {
  width: 10rem; height: 10rem;
  border-radius: 50%;
  background: var(--c-lightgray);
  margin: 0 auto var(--sp-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.team-avatar svg { width: 4rem; height: 4rem; }
.section--dark .team-avatar { background: rgba(255,255,255,0.1); }
.team-card h4 { font-size: 1.8rem; line-height: 1.2; margin-bottom: 0.4rem; }
.team-card .text-mono { color: var(--c-accent); margin-bottom: 0.4rem; }
.team-card p { font-size: var(--fs-body-m); font-weight: 300; }

/* ---------- STATS ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-item { text-align: center; }
.stat-number { font-size: var(--fs-number); font-weight: 700; line-height: 0.75; text-transform: uppercase; }
.stat-label { font-size: var(--fs-body-m); font-weight: 300; margin-top: 0.4rem; }

/* ---------- LOGO STRIP ---------- */
.logo-strip {
  overflow: hidden;
  padding: var(--sp-md) 0;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.logo-strip-track {
  display: flex;
  gap: var(--sp-lg);
  width: max-content;
  animation: scrollLogos 30s linear infinite;
}
@keyframes scrollLogos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logo-item {
  flex-shrink: 0;
  width: 14rem; height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  transition: opacity var(--t-med);
}
.logo-item:hover { opacity: 0.6; }
.logo-item svg { width: 100%; height: 100%; }

/* ---------- CTA ---------- */
.cta-section { text-align: center; }
.cta-section .text-mono { margin-bottom: var(--sp-sm); color: var(--c-accent); }
.cta-section h2 { margin-bottom: var(--sp-sm); }
.cta-section p { max-width: 55rem; margin: 0 auto var(--sp-md); font-size: var(--fs-body-m); font-weight: 300; }

/* ---------- PAGE HEADER ---------- */
.page-header {
  padding: calc(var(--header-h) + var(--sp-xl)) var(--sp-sm) var(--sp-lg);
  background: var(--c-primary);
  color: #fff;
}
.page-header .text-mono { color: var(--c-accent); margin-bottom: var(--sp-sm); }
.page-header h1 { max-width: 16ch; }
.page-header h1 em { color: var(--c-accent); }
.page-header p { font-size: var(--fs-body); font-weight: 300; margin-top: var(--sp-sm); max-width: 55rem; }

/* ---------- FORMS ---------- */
.form-card {
  background: #fff;
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
@media (min-width: 768px) { .form-card { padding: var(--sp-lg); } }

.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-family: var(--ff-mono); font-size: var(--fs-mono); text-transform: uppercase; }
.form-group input,
.form-group textarea,
.form-group select {
  background: var(--c-lightgray);
  border: 0;
  border-bottom: 1px solid var(--c-primary);
  font-size: 1.8rem;
  padding: 3rem 2.5rem;
  width: 100%;
  transition: border-color var(--t-fast);
}
.form-group input:focus,
.form-group textarea:focus { outline: none; border-bottom-color: var(--c-accent); }
.form-group textarea { min-height: 15rem; resize: vertical; border-bottom: 0; }
.form-group .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: var(--fs-body-s);
  cursor: pointer;
}
.form-group .checkbox-label input { width: 1.8rem; height: 1.8rem; accent-color: var(--c-accent); margin-top: 0.2rem; padding: 0; border: none; background: transparent; }
.form-submit { align-self: flex-start; }
.section--dark .form-card { background: var(--c-primary); }
.section--dark .form-group input { background: rgba(255,255,255,0.1); border-bottom-color: var(--c-accent); color: #fff; }

/* ---------- CONTACT INFO ---------- */
.contact-info { display: flex; flex-direction: column; gap: var(--sp-sm); }
.contact-item { display: flex; align-items: flex-start; gap: var(--sp-xs); }
.contact-item svg { width: 2.4rem; height: 2.4rem; stroke: var(--c-accent); flex-shrink: 0; margin-top: 0.2rem; }
.contact-item div { display: flex; flex-direction: column; }
.contact-item strong { font-weight: 600; }
.contact-item span { font-size: var(--fs-body-m); font-weight: 300; }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--c-primary);
  color: #fff;
  padding: var(--sp-xl) 0 0;
}
.footer-brand-text {
  font-size: 14vw;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.85;
  color: rgba(255,255,255,0.1);
  margin-bottom: var(--sp-md);
  pointer-events: none;
  overflow: hidden;
}
@media (min-width: 1024px) { .footer-brand-text { font-size: 14rem; } }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  padding-bottom: var(--sp-lg);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-col { display: flex; flex-direction: column; gap: var(--sp-sm); }
.footer-col h3 { color: var(--c-accent); font-size: 1.6rem; }
.footer-col p { font-size: var(--fs-body-m); font-weight: 300; max-width: 35rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.8rem; }
.footer-col a { font-size: var(--fs-body-m); font-weight: 300; color: #fff; transition: color var(--t-fast); }
.footer-col a:hover { color: var(--c-accent); }

.social-links {
  display: flex;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}
.social-links a {
  width: 4rem; height: 4rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.social-links a:hover { border-color: var(--c-accent); background: rgba(255,255,255,0.1); }
.social-links svg { width: 1.8rem; height: 1.8rem; fill: #fff; }

/* Footer legal bar */
.footer-legal {
  background: #fff;
  color: var(--c-primary);
  padding: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  font-size: var(--fs-body-s);
  font-weight: 300;
}
@media (min-width: 768px) { .footer-legal { flex-direction: row; justify-content: space-between; } }
.footer-legal a { color: var(--c-primary); }
.footer-legal a:hover { color: var(--c-accent); }
.footer-legal-links { display: flex; gap: var(--sp-sm); }

/* ---------- FAQ ---------- */
.faq-item {
  border-top: 1px solid var(--c-faq-border);
  padding: var(--sp-sm) 0;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: var(--fs-body-m);
  font-weight: 300;
  width: 100%;
  text-align: left;
}
.faq-question svg {
  width: 2rem; height: 2rem;
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
.faq-item.active .faq-question svg { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding var(--t-med);
  font-size: var(--fs-body-m);
  font-weight: 300;
  line-height: 1.5;
}
.faq-item.active .faq-answer {
  max-height: 50rem;
  padding-top: var(--sp-sm);
}

/* ---------- ANIMATIONS ---------- */
.reveal {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity var(--t-med), transform var(--t-med);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity var(--t-med), transform var(--t-med);
}
.reveal-stagger > *.visible { opacity: 1; transform: translateY(0); }

/* Text reveal animation */
.hanim { overflow: hidden; }
.hanim > div { display: block; }
.hanim > div > div {
  display: block;
  transform: perspective(1000px) rotateX(30deg) translateY(100%);
  transform-origin: top;
  opacity: 0;
  transition: all var(--t-reveal);
}
.hanim.visible > div > div {
  transform: perspective(1000px) rotateX(0deg) translateY(1%);
  opacity: 1;
}
.hanim.visible > div:nth-child(1) > div { transition-delay: 0.4s; }
.hanim.visible > div:nth-child(2) > div { transition-delay: 0.5s; }
.hanim.visible > div:nth-child(3) > div { transition-delay: 0.6s; }
.hanim.visible > div:nth-child(4) > div { transition-delay: 0.7s; }
.hanim.visible > div:nth-child(5) > div { transition-delay: 0.8s; }
.hanim.visible > div:nth-child(6) > div { transition-delay: 0.9s; }

/* ---------- CHECKLIST ---------- */
.checklist { display: flex; flex-direction: column; gap: var(--sp-xs); }
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  font-size: var(--fs-body-m);
  font-weight: 300;
}
.checklist-item svg { width: 2rem; height: 2rem; stroke: var(--c-accent); flex-shrink: 0; }

/* ---------- LEGAL TEXT ---------- */
.legal-text { font-size: var(--fs-body-m); font-weight: 300; line-height: 1.8; }
.legal-text h2 { font-size: calc(2rem + 1vw); color: var(--c-primary); margin-top: var(--sp-md); margin-bottom: var(--sp-xs); }
.legal-text h3 { font-size: 1.8rem; color: var(--c-primary); margin-top: var(--sp-sm); margin-bottom: var(--sp-xs); }
.legal-text p { margin-bottom: var(--sp-xs); }
.legal-text ul { list-style: disc; padding-left: 2rem; margin-bottom: var(--sp-xs); }
.legal-text a { color: var(--c-accent); text-decoration: underline; }

/* ---------- CUSTOM CURSOR ---------- */
.cursor-outline, .cursor-dot { display: none; }
@media (hover: hover) {
  .cursor-outline {
    position: fixed; z-index: 999; pointer-events: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--c-primary);
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
  }
  .cursor-dot {
    position: fixed; z-index: 999; pointer-events: none;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
    transform: translate(-50%, -50%);
    transition: background-color 0.2s, transform 0.2s;
  }
  .cursor-outline.hover {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 96, 140, 0.1);
    border-color: var(--c-accent);
  }
  .cursor-dot.hover {
    background-color: var(--c-accent);
    transform: translate(-50%, -50%) scale(1.5);
  }
  .cursor-outline, .cursor-dot { display: block; }
}

/* ---------- SCROLLBAR ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--c-primary) var(--c-lightgray); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-lightgray); }
::-webkit-scrollbar-thumb { height: 56px; background: var(--c-primary); border-radius: var(--radius-sm); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  :root {
    --section-pad: 5rem 0 5rem;
    --sp-sm: 1.5rem;
    --sp-md: 2.5rem;
    --sp-lg: 4rem;
    --sp-xl: 4rem;
    --fs-h1: calc(2.4rem + 2vw);
    --fs-h3: calc(1.6rem + 1vw);
    --fs-number: calc(3rem + 6vw);
  }
  body { font-size: 1.6rem; }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h1); }
  .page-header {
    padding-top: calc(var(--header-h) + var(--sp-md));
    padding-bottom: var(--sp-md);
  }
  .page-header h1 { font-size: calc(2rem + 2vw); }
  .page-header p { font-size: var(--fs-body-m); }
  .service-card {
    padding: var(--sp-sm);
    aspect-ratio: auto;
    min-height: 18rem;
  }
  .service-card h3 { font-size: 1.6rem; }
  .service-card p { font-size: 1.4rem; }
  .btn { padding: 1.6rem 3rem; font-size: 1.1rem; }
  .btn--lg { padding: 2rem 4rem; font-size: 1.3rem; }
  .hero { height: auto; min-height: calc(100vh - var(--header-h)); padding: var(--sp-md) 0; }
  .hero-inner { gap: var(--sp-md); }
  .hero-buttons { margin-top: var(--sp-md); }
  .hero-device { margin-top: var(--sp-md); }
  .hero-device-card { padding: var(--sp-md); max-width: 100%; }
  .hero-device-years { font-size: 2.4rem; }
  .hero-marquee-track { font-size: calc(3rem + 5vw); }
  .section-header { margin-bottom: var(--sp-md); }
  .section-header h2 { font-size: var(--fs-h1); }
  .features-grid { gap: var(--sp-md); }
  .feature-item h3 { font-size: 1.6rem; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-xs); }
  .team-card { padding: var(--sp-sm); }
  .team-avatar { width: 7rem; height: 7rem; }
  .team-avatar svg { width: 3rem; height: 3rem; }
  .team-card h4 { font-size: 1.4rem; }
  .stats-grid { gap: var(--sp-sm); }
  .stat-number { font-size: var(--fs-number); }
  .form-card { padding: var(--sp-md); }
  .form-group input,
  .form-group textarea,
  .form-group select { padding: 2rem 1.5rem; font-size: 1.6rem; }
  .form-submit { width: 100%; justify-content: center; }
  .footer { padding-top: var(--sp-lg); }
  .footer-grid { gap: var(--sp-md); }
  .footer-brand-text { font-size: 12vw; margin-bottom: var(--sp-sm); }
  .cta-section h2 { font-size: var(--fs-h1); }
  .container--narrow { padding: 0 var(--sp-sm); }
  .services-nav { gap: 0.6rem; }
  .services-nav .btn--outline { padding: 0.8rem 1.6rem; font-size: 1rem; }
  .contact-item svg { width: 2rem; height: 2rem; }
  .legal-text { font-size: 1.4rem; }
  .legal-text h2 { font-size: 1.8rem; }
}

@media (min-width: 641px) and (max-width: 1023px) {
  :root {
    --section-pad: 8rem 0 8rem;
    --sp-xl: 6rem;
  }
  .page-header { padding-top: calc(var(--header-h) + var(--sp-lg)); }
  .service-card { aspect-ratio: auto; min-height: 22rem; }
  .team-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* ---------- UTILITIES ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--sp-xs); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.text-center { text-align: center; }
.text-accent { color: var(--c-accent); }
.text-white { color: #fff; }