/* =============================================================
   SOPORTE DC — landing styles
   Brand palette: #262626 · #575756 · #878787 · #94581C · #FFFFFF
   Prod typography: Gobold Extra2 (titles) + Neutra Text (body)
   Fallbacks used here: Oswald (titles) + Manrope (body)
   ============================================================= */

:root{
  --ink:        #262626;
  --ink-2:      #575756;
  --ink-3:      #878787;
  --gold:       #94581C;
  --gold-lo:    #6d3f11;
  --gold-hi:    #E5B05C;
  --gold-mid:   #B8822E;
  --paper:      #ffffff;
  --paper-2:    #f5f2ec;
  --paper-3:    #eae4d7;
  --rad-card:   12px;
  --rad-btn:    6px;
  --shadow-dark: 0 2px 0 rgba(0,0,0,.4), 0 24px 48px -24px rgba(0,0,0,.6);
  --shadow-card: 0 1px 0 rgba(0,0,0,.04), 0 20px 40px -28px rgba(38,38,38,.35);
  --gold-grad:  linear-gradient(135deg, #B8822E 0%, #E5B05C 45%, #94581C 100%);
  --gold-shimmer: linear-gradient(110deg, #94581C 0%, #B8822E 35%, #E5B05C 50%, #B8822E 65%, #94581C 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family: "Manrope", "Futura PT", "Avenir Next", system-ui, -apple-system, Segoe UI, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Type --- */
.t-display, .t-title, .t-eyebrow, .t-label{
  font-family: "Oswald", "Bebas Neue", "Gobold Extra2", Impact, sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: .95;
}
.t-display{ font-weight:600; letter-spacing:.01em }
.t-eyebrow{
  font-size: 12px; letter-spacing:.22em; font-weight:500;
  color:var(--gold); line-height:1;
}
.t-label{ font-size:13px; letter-spacing:.18em; font-weight:500; }

.gold-underline{
  display:inline-block; height:4px; width:56px;
  background: var(--gold-grad);
  border-radius:3px;
  margin-top:14px;
}
.gold-underline.lg{ width:72px; height:5px }

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 14px 22px;
  border-radius: var(--rad-btn);
  font-family:"Oswald", Impact, sans-serif;
  font-weight:500;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border:1.5px solid transparent;
  background:transparent;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, background-position .6s ease, border-color .2s ease, color .2s ease;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.btn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px }
.btn .arrow{ transition: transform .25s ease }
.btn:hover .arrow{ transform: translateX(3px) }

.btn-primary{
  color:#fff;
  background: var(--gold);
  border-color: var(--gold);
  background-image: var(--gold-shimmer);
  background-size: 220% 100%;
  background-position: 100% 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 10px 24px -12px rgba(148,88,28,.65);
}
.btn-primary:hover{
  background-position: 0 0;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 18px 32px -14px rgba(148,88,28,.7);
}
.btn-ghost{
  color: var(--gold);
  border-color: var(--gold);
}
.btn-ghost.on-dark{ color: var(--gold-hi); border-color: var(--gold-hi) }
.btn-ghost:hover{
  background: rgba(148,88,28,.08);
  transform: translateY(-1px);
}
.btn-ghost.on-dark:hover{ background: rgba(229,176,92,.1) }

.btn-whatsapp{
  background:#25d366; border-color:#25d366; color:#fff;
}
.btn-whatsapp:hover{ background:#1fb857; border-color:#1fb857; transform: translateY(-1px) }

.btn-sm{ padding:10px 16px; font-size:12px; letter-spacing:.16em }
.btn-lg{ padding:18px 28px; font-size:15px }
.btn-block{ width:100%; }

/* --- Sections --- */
.section{ padding: 120px 0; position:relative; }
.section.compact{ padding: 80px 0 }
.wrap{ max-width: 1240px; margin:0 auto; padding: 0 32px }
@media (max-width: 720px){
  .section{ padding: 72px 0 }
  .wrap{ padding: 0 20px }
  .section-head{ margin-bottom: 36px; gap: 16px }
  .section-head p{ font-size: 15.5px; margin-top: 14px }
}

/* Honeypot field — hidden from humans */
.field.hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none }

.section.dark{ background: var(--ink); color:#f2f2f0 }
.section.dark .t-eyebrow{ color: var(--gold-hi) }
.section.darker{ background:#1e1e1e; color:#f2f2f0 }
.section.paper-2{ background: var(--paper-2); color: var(--ink) }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; margin-bottom:56px;
  flex-wrap:wrap;
}
.section-head .left{ max-width: 720px }
.section-head h2{
  margin: 10px 0 0;
  font-family: "Oswald", "Bebas Neue", "Gobold Extra2", Impact, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(36px, 5vw, 64px);
  line-height:.92;
}
.section-head h2 .hl{ color: var(--gold) }
.section.dark .section-head h2 .hl{
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head p{
  margin: 18px 0 0;
  font-size: 17px; color: var(--ink-2); max-width: 640px;
}
.section.dark .section-head p{ color:#bdbcb8 }

/* --- Top nav --- */
.topnav{
  position: fixed; top:0; left:0; right:0; z-index:50;
  background: rgba(38,38,38,.0);
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.topnav.stuck{
  background: rgba(26,26,26,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 6px 24px -12px rgba(0,0,0,.6);
}
.topnav .wrap{
  display:flex; align-items:center; gap:24px;
  padding-top: 18px; padding-bottom: 18px;
}
.topnav .brand{
  display:flex; align-items:center; gap:12px;
  color:#fff; text-decoration:none;
}
.topnav .brand img{ width:40px; height:40px; object-fit:contain }
.topnav .brand .name{
  font-family:"Oswald", Impact, sans-serif;
  font-weight:600; letter-spacing:.14em; font-size:15px; text-transform:uppercase;
  line-height:1;
}
.topnav .brand .name small{
  display:block; font-family:"Manrope", sans-serif; text-transform:none;
  letter-spacing:.02em; font-size:10px; color: var(--ink-3); margin-top:4px;
  font-weight:500;
}
.topnav .links{
  display:flex; gap:28px; margin-left:auto;
}
.topnav .links a{
  color:#e7e6e1; text-decoration:none;
  font-family:"Oswald", sans-serif; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  padding:6px 2px;
  position:relative;
  transition: color .2s ease;
}
.topnav .links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background: var(--gold-grad);
  transition: right .25s ease;
}
.topnav .links a:hover{ color:#fff }
.topnav .links a:hover::after{ right:0 }
.topnav .cta-row{ display:flex; align-items:center; gap:10px }
.topnav .hamb{ display:none }

@media (max-width: 900px){
  .topnav .links{ display:none }
  .topnav .hamb{
    display:inline-flex; width:44px; height:44px; border-radius:8px;
    border:1px solid rgba(255,255,255,.18); background: transparent;
    align-items:center; justify-content:center; cursor:pointer;
  }
  .topnav .hamb span{
    width:20px; height:2px; background:#fff; position:relative; display:block; border-radius:2px;
  }
  .topnav .hamb span::before, .topnav .hamb span::after{
    content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; border-radius:2px;
    transition: transform .2s ease, top .2s ease;
  }
  .topnav .hamb span::before{ top:-6px }
  .topnav .hamb span::after{ top:6px }
  .topnav.menu-open .hamb span{ background: transparent }
  .topnav.menu-open .hamb span::before{ top:0; transform: rotate(45deg) }
  .topnav.menu-open .hamb span::after{ top:0; transform: rotate(-45deg) }
}

.mobile-menu{
  position:fixed; inset:0; z-index:49;
  background: rgba(26,26,26,.97);
  backdrop-filter: blur(10px);
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  padding: 80px 32px 32px;
  gap: 6px;
  transform: translateX(100%);
  transition: transform .3s ease;
}
.mobile-menu.open{ transform: translateX(0) }
.mobile-menu a{
  color:#fff; text-decoration:none;
  font-family:"Oswald", sans-serif; letter-spacing:.18em; text-transform:uppercase;
  font-size: 28px; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu a:last-of-type{ border-bottom:none }
.mobile-menu .btn{ margin-top: 24px }

/* --- Hero --- */
.hero{
  position:relative; background: var(--ink); color:#fff;
  padding: 180px 0 120px;
  overflow:hidden;
  isolation: isolate;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: url("assets/circuit-pattern.svg") repeat;
  opacity: .22;
  mix-blend-mode: screen;
  animation: drift 60s linear infinite;
  z-index:0;
  will-change: transform;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 80% 40%, rgba(148,88,28,.18), transparent 60%),
    radial-gradient(60% 50% at 10% 90%, rgba(148,88,28,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(26,26,26,1) 100%);
  z-index:0;
  pointer-events:none;
}
@keyframes drift{
  from{ transform: translate(0,0) }
  to{ transform: translate(-600px, -200px) }
}
.hero .wrap{ position:relative; z-index:2 }

.hero-grid{
  display:grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items:center;
}
.hero h1{
  margin:0;
  font-family:"Oswald", Impact, sans-serif; font-weight:600;
  font-size: clamp(48px, 7vw, 104px);
  line-height: .9; text-transform:uppercase;
  letter-spacing:.005em;
}
.hero h1 .hl{
  background: var(--gold-shimmer);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer{ 0%,100%{ background-position:0 0 } 50%{ background-position:200% 0 } }

.hero .sub{
  margin-top: 26px;
  font-size: 19px; max-width: 560px; color:#d7d6d2;
  line-height:1.55;
}
.hero .cta-row{
  display:flex; gap:14px; margin-top: 36px; flex-wrap:wrap;
}
.hero .trust{
  margin-top: 48px;
  display:flex; gap: 28px; flex-wrap:wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hero .trust .tr{ display:flex; align-items:center; gap:12px }
.hero .trust .n{
  font-family:"Oswald", sans-serif; font-size: 28px; font-weight:600; color:#fff;
  line-height:1;
}
.hero .trust .n .unit{ color: var(--gold-hi); margin-right:2px }
.hero .trust .l{
  font-size: 12px; color:#a9a8a3; line-height:1.3; max-width:140px;
}

/* Hero art */
.hero-art{
  position:relative; aspect-ratio: 1/1; max-width: 460px; justify-self:end; width:100%;
}
.hero-art .ring{
  position:absolute; inset:0; border-radius: 50%;
  border: 1px dashed rgba(229,176,92,.4);
  animation: spin 80s linear infinite;
}
.hero-art .ring.r2{ inset: 6%; border-color: rgba(229,176,92,.25); animation-duration: 120s; animation-direction:reverse }
.hero-art .ring.r3{ inset: 14%; border-style: solid; border-color: rgba(255,255,255,.05) }
@keyframes spin{ from{ transform: rotate(0) } to{ transform: rotate(360deg) } }
.hero-art .logo{
  position:absolute; inset: 20%;
  background: radial-gradient(circle at 30% 30%, #3a3a3a 0%, #1a1a1a 70%);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 30px 80px -30px rgba(148,88,28,.5);
  display:grid; place-items:center;
  overflow:hidden;
}
.hero-art .logo img{ width: 86%; height:86%; object-fit:contain }
.hero-art .node{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: var(--gold-hi);
  box-shadow: 0 0 14px var(--gold-hi);
}
.hero-art .node.n1{ top: 8%; left: 50%; }
.hero-art .node.n2{ top: 50%; left: 94%; }
.hero-art .node.n3{ top: 92%; left: 50%; }
.hero-art .node.n4{ top: 50%; left: 6%; }
.hero-art .node.n5{ top: 18%; left: 86%; width:6px; height:6px }
.hero-art .node.n6{ top: 82%; left: 14%; width:6px; height:6px }
.hero-art .tag{
  position:absolute; font-family:"Oswald", sans-serif; text-transform:uppercase;
  font-size: 11px; letter-spacing:.22em; color: rgba(255,255,255,.55);
  white-space:nowrap;
}
.hero-art .tag.t1{ top: 4%; left: -14px; transform: rotate(-90deg); transform-origin: left top }
.hero-art .tag.t2{ bottom: 4%; right: -14px; transform: rotate(90deg); transform-origin: right bottom }

.hero-scroll{
  position:absolute; left:50%; bottom: 28px;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#a9a8a3; font-family:"Oswald", sans-serif;
  font-size:10px; letter-spacing:.3em;
  z-index:3;
}
.hero-scroll .line{
  width:1px; height: 56px; overflow:hidden; background: rgba(255,255,255,.12); position:relative;
}
.hero-scroll .line::after{
  content:""; position:absolute; left:0; top:-56px; width:1px; height:28px;
  background: var(--gold-hi);
  animation: scrolldown 2.2s ease-in-out infinite;
}
@keyframes scrolldown{
  0%{ top:-28px; opacity:0 }
  30%{ opacity:1 }
  100%{ top:56px; opacity:0 }
}

@media (max-width: 900px){
  .hero{ padding: 130px 0 90px }
  .hero-grid{ grid-template-columns: 1fr; gap: 48px }
  .hero-art{ max-width: 320px; justify-self:center }
  .hero .cta-row .btn{ flex:1; min-width:0 }
  .hero .trust{ gap:18px }
}
@media (max-width: 560px){
  .hero{ padding: 110px 0 80px }
  .hero h1{ font-size: clamp(40px, 11vw, 56px) }
  .hero .sub{ font-size: 16.5px; margin-top: 20px }
  .hero .cta-row{ flex-direction: column; gap: 10px; margin-top: 28px }
  .hero .cta-row .btn{ width: 100%; padding: 16px 20px }
  .hero-art{ max-width: 240px }
  .hero .trust{
    margin-top: 36px; padding-top: 20px;
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  .hero .trust .tr{ flex-direction: column; align-items: flex-start; gap: 4px }
  .hero .trust .n{ font-size: 22px }
  .hero .trust .l{ font-size: 11px; max-width: none; line-height: 1.25 }
  .hero-scroll{ display: none }
}

/* --- Value props --- */
.values{ background: var(--paper-2); }
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px }
.value-card{
  background:#fff;
  border-radius: var(--rad-card);
  padding: 32px 28px;
  border: 1px solid rgba(38,38,38,.08);
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex; flex-direction:column; gap: 16px;
  position:relative;
  min-height: 260px;
}
.value-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 40px 60px -28px rgba(148,88,28,.28);
  border-color: rgba(148,88,28,.3);
}
.value-card .icn{
  width: 52px; height: 52px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(148,88,28,.14), rgba(229,176,92,.14));
  display:grid; place-items:center; color: var(--gold);
}
.value-card h3{
  margin:0;
  font-family:"Oswald", sans-serif; font-weight:600;
  font-size: 22px; text-transform:uppercase; letter-spacing:.01em;
  line-height:1.05;
}
.value-card p{
  margin:0; color: var(--ink-2); font-size: 15px; line-height:1.55;
}
.value-card .more{
  margin-top:auto;
  font-family:"Oswald", sans-serif; font-size: 12px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--gold); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  padding-top: 12px; border-top: 1px solid rgba(148,88,28,.15);
}
.value-card .more:hover{ color: var(--gold-lo) }

@media (max-width: 860px){ .value-grid{ grid-template-columns: 1fr } }

/* --- Services --- */
.services{ background: var(--ink); color:#f2f2f0; position:relative }
.services::before{
  content:""; position:absolute; inset:0;
  background: url("assets/circuit-pattern.svg") repeat;
  opacity:.08; pointer-events:none;
}
.services .wrap{ position:relative }

.seg{
  display:inline-flex;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 6px;
  gap: 4px;
  margin-bottom: 40px;
  max-width: 100%;
}
@media (max-width: 560px){
  .seg{ display: flex; width: 100%; margin-bottom: 28px }
  .seg button{ flex: 1; padding: 12px 10px; font-size: 12px; letter-spacing:.12em; justify-content: center }
  .seg button .dot{ display: none }
}
.seg button{
  font-family:"Oswald", sans-serif; font-weight:500; font-size: 13px;
  letter-spacing:.16em; text-transform:uppercase;
  white-space: nowrap;
  padding: 12px 22px;
  border: none; background: transparent; color:#d7d6d2;
  border-radius: 999px; cursor: pointer;
  transition: background .25s ease, color .25s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.seg button .dot{
  width:8px; height:8px; border-radius:50%; background: currentColor; opacity:.5;
}
.seg button:hover{ color:#fff }
.seg button.active{
  background: var(--gold-grad);
  color:#fff;
  box-shadow: 0 6px 18px -8px rgba(148,88,28,.7);
}
.seg button.active .dot{ opacity:1; background:#fff }

.services-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.service-card{
  background: #2f2f2f;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--rad-card);
  padding: 28px 26px;
  display:flex; flex-direction:column; gap: 14px;
  min-height: 240px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
  position:relative; overflow:hidden;
}
.service-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--gold-grad);
  transform: scaleX(0); transform-origin:left;
  transition: transform .35s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  border-color: rgba(229,176,92,.35);
  background:#353535;
}
.service-card:hover::before{ transform: scaleX(1) }
.service-card .icn{
  width: 44px; height: 44px; border-radius:10px;
  background: rgba(229,176,92,.08);
  display:grid; place-items:center; color: var(--gold-hi);
  border: 1px solid rgba(229,176,92,.18);
}
.service-card h3{
  margin:0;
  font-family:"Oswald", sans-serif; font-weight:600;
  font-size: 20px; text-transform:uppercase; letter-spacing:.01em; line-height:1.05;
}
.service-card p{
  margin:0; color:#bdbcb8; font-size: 14.5px; line-height: 1.55;
}
.service-card .req{
  margin-top:auto;
  font-family:"Oswald", sans-serif; font-size: 11.5px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--gold-hi); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06);
  cursor:pointer; background:none; border-left:none; border-right:none; border-bottom:none;
  text-align:left;
}
.service-card .req:hover{ color:#fff }
.service-card .req:hover .arrow{ transform: translateX(3px) }

@media (max-width: 980px){ .services-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width: 620px){
  .services-grid{ grid-template-columns: 1fr; gap: 14px }
  .service-card{ padding: 24px 22px; min-height: 0 }
  .value-card{ padding: 28px 24px; min-height: 0 }
}

/* --- Process --- */
.process{ background: var(--paper) }
.steps{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  position:relative; margin-top: 24px;
}
.steps::before{
  content:""; position:absolute; left: 8%; right: 8%; top: 34px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 10%, var(--gold) 90%, transparent);
  opacity:.4;
}
.step{
  position:relative; padding: 0 16px;
  display:flex; flex-direction:column; gap: 16px;
}
.step .num{
  width: 68px; height: 68px; border-radius: 50%;
  background:#fff;
  border: 2px solid var(--gold);
  display:grid; place-items:center;
  font-family:"Oswald", sans-serif; font-size: 26px; font-weight:600;
  color: var(--gold);
  position:relative; z-index:2;
  box-shadow: 0 0 0 6px #fff, 0 20px 30px -14px rgba(148,88,28,.35);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.step:hover .num{
  transform: scale(1.04);
  background: var(--gold-grad);
  color:#fff;
}
.step h3{
  margin: 0;
  font-family:"Oswald", sans-serif; font-weight:600;
  font-size: 20px; text-transform:uppercase; letter-spacing:.02em;
}
.step p{
  margin:0; color: var(--ink-2); font-size: 14.5px; line-height:1.55;
}
.process-cta{ text-align:center; margin-top: 72px }

@media (max-width: 900px){
  .steps{ grid-template-columns: 1fr; gap: 28px }
  .steps::before{
    left: 34px; right: auto; top: 0; bottom:0; height:auto; width: 2px;
    background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
  }
  .step{
    display:grid; grid-template-columns: 68px 1fr; align-items:start; gap: 4px 20px; padding:0;
  }
  .step .num{ grid-row: 1 / 3 }
  .step h3{ margin-top: 18px }
}

/* --- Proof --- */
.proof{ background: var(--paper-2) }
.logos{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items:center;
}
.logos .l{
  height: 76px; display:flex; align-items:center; justify-content:center;
  border-radius: 8px;
  opacity:.82;
  padding:9px 14px;
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease;
  background: #fff;
  border:1px solid rgba(38,38,38,.06);
}
.logos .l:hover{
  opacity:1;
  transform: translateY(-2px);
  border-color: rgba(148,88,28,.25);
}
.logos .l img{
  display:block;
  width:100%;
  height:52px;
  object-fit:contain;
}

@media (max-width: 860px){
  .logos{ grid-template-columns: repeat(2, 1fr); gap: 12px }
}
@media (max-width: 480px){
  .logos .l{ height:64px; padding:8px 10px }
  .logos .l img{ height:42px }
}

/* --- Final CTA --- */
.final-cta{
  background: var(--ink);
  color:#fff;
  padding: 120px 0;
  position:relative; overflow:hidden;
  text-align:center;
}
.final-cta::before{
  content:""; position:absolute; inset:0;
  background: url("assets/circuit-pattern.svg") repeat;
  opacity:.15;
  animation: drift 70s linear infinite reverse;
}
.final-cta::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 80% at 50% 50%, rgba(148,88,28,.25), transparent 65%);
  pointer-events:none;
}
.final-cta .wrap{ position:relative; z-index:2 }
.final-cta h2{
  margin:0 auto;
  font-family:"Oswald", sans-serif; font-weight:600;
  font-size: clamp(40px, 6vw, 88px); text-transform:uppercase;
  line-height:.92; letter-spacing:.005em;
  max-width: 980px;
}
.final-cta h2 .hl{
  background: var(--gold-shimmer);
  background-size:200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 4.5s ease-in-out infinite;
}
.final-cta p{
  margin: 24px auto 0; max-width: 620px; color:#bdbcb8; font-size: 18px;
}
.final-cta .cta-row{
  margin-top: 44px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}

/* --- Form --- */
.contact{ background: var(--ink); color:#f2f2f0 }
.contact-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
  align-items:start;
}
.form{
  background: #2f2f2f;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 40px;
}
.form-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px 18px;
}
.field{ display:flex; flex-direction:column; gap: 6px; position:relative }
.field.full{ grid-column: 1 / -1 }
.field label{
  font-family:"Oswald", sans-serif; font-size: 11px; letter-spacing:.2em;
  text-transform:uppercase; color:#a9a8a3;
}
.field input, .field select, .field textarea{
  background: #242424;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 14px 16px;
  color:#fff;
  font-family:"Manrope", sans-serif; font-size: 15px;
  transition: border-color .2s ease, background .2s ease;
  font-family: inherit;
}
.field textarea{ resize: vertical; min-height: 130px }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--gold-hi);
  background: #272727;
}
.field .err{
  font-size: 12px; color:#e08b6d; font-family:"Manrope", sans-serif;
  display:flex; align-items:center; gap:6px;
}
.field.is-error input, .field.is-error select, .field.is-error textarea{
  border-color:#cc6a4c;
}
.form-submit-row{
  grid-column: 1 / -1;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top: 8px;
  flex-wrap:wrap;
}
.form-submit-row .privacy{ font-size:12px; color:#a9a8a3; max-width: 340px; line-height:1.5 }
.contact-side{
  display:flex; flex-direction:column; gap: 24px;
}
.contact-card{
  background: #2f2f2f; border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; padding: 28px;
  display:flex; flex-direction:column; gap: 14px;
}
.contact-card h3{
  margin:0;
  font-family:"Oswald", sans-serif; font-weight:600; text-transform:uppercase;
  font-size: 16px; letter-spacing:.12em;
}
.contact-card .item{ display:flex; gap:14px; align-items:flex-start }
.contact-card .item .ic{
  flex-shrink:0; width: 36px; height:36px; border-radius: 8px;
  background: rgba(229,176,92,.08);
  border: 1px solid rgba(229,176,92,.18);
  display:grid; place-items:center; color: var(--gold-hi);
}
.contact-card .item .lb{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#a9a8a3; font-family:"Oswald", sans-serif; margin-bottom: 2px }
.contact-card .item a, .contact-card .item .v{ color:#fff; text-decoration:none; font-size: 15px; line-height:1.3 }
.contact-card .item a:hover{ color: var(--gold-hi) }
.contact-card .team{
  display:flex; flex-direction:column; gap: 14px; margin-top:6px;
}
.contact-card .team .p{
  display:flex; align-items:center; gap: 12px;
}
.contact-card .team .p .av{
  width:42px; height:42px; border-radius:50%;
  background: var(--gold-grad); color:#fff;
  display:grid; place-items:center;
  font-family:"Oswald", sans-serif; font-weight:600;
}
.contact-card .team .p .name{
  font-family:"Oswald", sans-serif; text-transform:uppercase; font-size: 14px; letter-spacing:.08em; font-weight:600;
}
.contact-card .team .p .role{ font-size: 12px; color:#a9a8a3 }

@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; gap: 28px }
  .form{ padding: 28px }
  .form-grid{ grid-template-columns: 1fr }
}
@media (max-width: 560px){
  .form{ padding: 22px 18px; border-radius: 12px }
  .field input, .field select, .field textarea{ padding: 14px 14px; font-size: 16px } /* 16px prevents iOS zoom-on-focus */
  .form-submit-row{ flex-direction: column; align-items: stretch; gap: 14px }
  .form-submit-row .btn{ width: 100% }
  .form-submit-row .privacy{ max-width: none; order: 2; text-align: center }
  .contact-card{ padding: 22px 20px }
  .contact-card .item .ic{ width: 34px; height: 34px }
}

/* Final CTA mobile */
@media (max-width: 560px){
  .final-cta{ padding: 80px 0 }
  .final-cta p{ font-size: 16px; margin-top: 18px }
  .final-cta .cta-row{ flex-direction: column; margin-top: 32px; gap: 10px }
  .final-cta .cta-row .btn{ width: 100% }
}

/* Footer mobile */
@media (max-width: 640px){
  .footer{ padding: 44px 0 24px }
  .footer .wrap{ flex-direction: column; align-items: flex-start; gap: 22px }
  .footer .links{ gap: 14px 20px }
  .footer .btm{ flex-direction: column; gap: 12px; text-align: left }
}

/* Steps mobile polish */
@media (max-width: 900px){
  .step .num{ width: 56px; height: 56px; font-size: 22px; box-shadow: 0 0 0 5px #fff, 0 14px 22px -12px rgba(148,88,28,.35) }
  .step h3{ font-size: 18px }
}

/* WhatsApp FAB — smaller + safe-area on mobile */
@media (max-width: 560px){
  .wa-fab{
    width: 52px; height: 52px;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .wa-fab .tip{ display: none }
}

/* Respect iOS safe areas in nav */
@supports(padding: max(0px)){
  .topnav .wrap{ padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}

/* --- Footer --- */
.footer{
  background: #1a1a1a; color:#878787; padding: 60px 0 32px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.footer .wrap{
  display:flex; flex-wrap:wrap; gap: 28px; align-items:flex-start; justify-content:space-between;
}
.footer .brand{
  display:flex; gap: 14px; align-items:center;
}
.footer .brand img{ width: 44px; height:44px }
.footer .brand .name{
  font-family:"Oswald", sans-serif; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; font-size: 16px;
  line-height:1;
}
.footer .brand small{ display:block; color:#878787; font-family:"Manrope"; text-transform:none; letter-spacing:0; font-size:12px; margin-top:6px; font-weight:500 }
.footer .links{
  display:flex; gap: 24px; flex-wrap:wrap;
}
.footer .links a{
  color:#bdbcb8; text-decoration:none;
  font-family:"Oswald", sans-serif; font-size: 12px; letter-spacing:.2em; text-transform:uppercase;
}
.footer .links a:hover{ color: var(--gold-hi) }
.footer .btm{
  max-width: 1240px; margin: 40px auto 0;
  padding: 24px 32px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; gap: 20px; flex-wrap:wrap;
  font-size: 12px; color:#878787;
}
.footer .credit{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.footer .credit a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
.footer .credit .gothy-credit{
  color:#a970ff;
  font-weight:700;
  text-decoration:none;
}
.footer .credit .gothy-credit:hover{ color:#c6a0ff }
.footer .socials{ display:flex; gap:8px }
.footer .socials a{
  width: 36px; height:36px; border-radius: 8px;
  border:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center; color:#bdbcb8;
}
.footer .socials a:hover{ color: var(--gold-hi); border-color: rgba(229,176,92,.3) }

/* --- Floating WhatsApp --- */
.wa-fab{
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color:#fff; text-decoration:none;
  display:grid; place-items:center;
  box-shadow: 0 18px 36px -14px rgba(37,211,102,.6), 0 2px 0 rgba(0,0,0,.1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-fab:hover{ transform: translateY(-3px) scale(1.04) }
.wa-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.6);
  animation: pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.55) }
  80%{ box-shadow: 0 0 0 18px rgba(37,211,102,0) }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0) }
}
.wa-fab .tip{
  position:absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%);
  background: var(--ink); color:#fff;
  font-family:"Manrope", sans-serif; font-size: 13px;
  padding: 8px 12px; border-radius: 8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition: opacity .25s ease;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6);
}
.wa-fab:hover .tip{ opacity:1 }

/* --- Reveal on scroll --- */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease }
.reveal.in{ opacity:1; transform: none }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .hero::before, .final-cta::before{ animation: none }
  .hero h1 .hl, .final-cta h2 .hl{ animation: none }
  .wa-fab::after{ animation: none }
  .hero-scroll .line::after{ animation: none }
}

/* --- small icon util --- */
.i{ width: 22px; height:22px; stroke-width: 1.75; stroke: currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round }
.i-lg{ width: 28px; height:28px }
.i-sm{ width:18px; height:18px }