/* ============================================
   TU AGENTE.GO — VERSION 2: MODERNA / EXPERIMENTAL
   Tokens
   ============================================ */
:root{
  --bg: #0a0e18;
  --bg-soft: #101526;
  --ink: #f3f2ee;
  --muted: #939bb0;
  --coral: #2e7de1;
  --mint: #7fd1ff;
  --line: rgba(243,242,238,.12);

  --display: 'Objektiv Mk1', sans-serif;
  --body: 'Objektiv Mk1', sans-serif;

  --gutter: clamp(20px, 5vw, 70px);
  --ease: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-weight:300; line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--display); font-weight:700; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--mint); outline-offset:3px; }
section{ padding: clamp(70px,10vw,150px) var(--gutter); position:relative; }

/* cursor dot (desktop only, decorative) */
.cursor-dot{ position: fixed; width:10px; height:10px; border-radius:50%; background: var(--coral); pointer-events:none; z-index:200; transform: translate(-50%,-50%); transition: transform .15s var(--ease), opacity .3s ease, width .25s ease, height .25s ease; opacity:0; mix-blend-mode: difference; }
@media (hover:hover) and (pointer:fine){ .cursor-dot{ opacity:1; } }
.cursor-dot.grow{ width:34px; height:34px; background: var(--mint); }

/* reveal fx */
[data-fx]{ opacity:0; transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-fx="up"]{ transform: translateY(34px); }
[data-fx="scale"]{ transform: scale(.92); }
[data-fx].is-visible{ opacity:1; transform:none; }

/* ---- Header ---- */
.site-header{ position:fixed; top:0; left:0; width:100%; z-index:90; padding: 22px var(--gutter); transition: background .4s var(--ease), padding .4s var(--ease); }
.site-header.scrolled{ background: rgba(13,14,19,.75); backdrop-filter: blur(12px); padding:14px var(--gutter); border-bottom:1px solid var(--line); }
.header-inner{ max-width:1500px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family: var(--display); font-weight:700; font-size:1.3rem; text-transform:lowercase; display:inline-flex; align-items:center; }
.logo-img{ height: 24px; width: auto; display:block; }
.logo .dot{ color: var(--coral); }
.main-nav{ display:flex; gap: clamp(14px,2.4vw,34px); }
.main-nav a{ font-size:.85rem; display:flex; align-items:center; gap:6px; color: var(--muted); transition: color .3s ease; }
.main-nav a span{ font-size:.65rem; color: var(--coral); font-family: var(--display); }
.main-nav a:hover{ color: var(--ink); }
.menu-toggle{ display:none; flex-direction:column; gap:6px; background:none; border:none; padding:6px; }
.menu-toggle span{ width:24px; height:2px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* ---- Hero ---- */
.hero{ min-height: 100vh; display:flex; flex-direction:column; justify-content:center; padding-top: 110px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:120%; object-fit:cover; opacity:.38; filter: saturate(.8) contrast(1.05); }
.hero-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,14,19,.4), var(--bg) 92%); }
.hero-noise{ position:absolute; inset:0; z-index:1; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 3px 3px; pointer-events:none; }

.floaters{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.floater{ position:absolute; font-family: var(--display); font-size:.82rem; letter-spacing:.04em; padding: 10px 16px; border:1px solid var(--line); border-radius:999px; background: rgba(20,21,29,.6); backdrop-filter: blur(6px); }
.f1{ top: 20%; right: 8%; color: var(--mint); }
.f2{ bottom: 26%; left: 6%; color: var(--ink); }
.f3{ top: 46%; right: 20%; color: var(--coral); }

.hero-content{ position:relative; z-index:3; max-width:1500px; margin:0 auto; width:100%; }
.eyebrow{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color: var(--coral); margin-bottom:20px; }
.hero-title{ font-size: clamp(2.8rem, 8vw, 6.4rem); line-height:.96; }
.hero-title .line{ display:block; }
.hero-title .accent{ color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.hero-sub{ margin-top: 26px; max-width: 460px; color: var(--muted); font-size:1.05rem; }
.hero-actions{ display:flex; gap:16px; margin-top: 38px; flex-wrap:wrap; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:16px 32px; font-family: var(--display); font-size:.85rem; letter-spacing:.03em; border-radius:999px; transition: transform .3s var(--ease), background .3s ease, color .3s ease; border:1px solid transparent; }
.btn-primary{ background: var(--coral); color:#f3f2ee; }
.btn-primary:hover{ transform: translateY(-3px); }
.btn-outline{ border-color: var(--line); color: var(--ink); }
.btn-outline:hover{ border-color: var(--mint); color: var(--mint); transform: translateY(-3px); }

.scroll-cue{ position:absolute; bottom: 30px; left:50%; transform: translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); z-index:3; }
.scroll-cue span{ width:1px; height:34px; background: linear-gradient(var(--coral), transparent); animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ transform: scaleY(0); transform-origin: top;} 50%{ transform: scaleY(1); transform-origin: top;} 51%{ transform-origin: bottom;} 100%{ transform: scaleY(0); transform-origin: bottom;} }

/* ---- Section head ---- */
.section-head{ max-width: 720px; margin: 0 auto clamp(50px,7vw,90px); }
.section-tag{ display:block; font-family: var(--display); color: var(--mint); font-size:.85rem; letter-spacing:.06em; margin-bottom:16px; }
.section-head h2{ font-size: clamp(2.1rem,4.4vw,3.4rem); line-height:1.05; }

/* ---- Services ---- */
.services{ max-width:1500px; margin:0 auto; }
.service-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card{ background: var(--bg-soft); border:1px solid var(--line); border-radius: 20px; overflow:hidden; transition: transform .45s var(--ease), border-color .4s ease; position:relative; }
.service-card:hover{ transform: translateY(-10px); border-color: rgba(255,90,60,.4); }
.service-card.featured{ transform: translateY(-16px); }
.service-card.featured:hover{ transform: translateY(-24px); }
.service-card-media{ height: 260px; overflow:hidden; }
.service-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.service-card:hover .service-card-media img{ transform: scale(1.08) rotate(-1deg); }
.service-card-body{ padding: 26px; }
.service-card-eyebrow{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--coral); }
.service-card-body h3{ font-size:1.5rem; margin: 10px 0 12px; }
.service-card-body p{ color: var(--muted); font-size:.92rem; }
.card-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-family: var(--display); font-size:.85rem; color: var(--mint); }
.card-cta i{ font-style:normal; transition: transform .3s var(--ease); }
.service-card:hover .card-cta i{ transform: translateX(5px); }

/* ---- Experience Card ---- */
.experience{ background: var(--bg-soft); }
.experience-inner{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); align-items:center; }
.experience-copy h2{ font-size: clamp(2.1rem,4.2vw,3.2rem); margin: 6px 0 20px; }
.experience-copy p{ color: var(--muted); max-width: 420px; margin-bottom: 30px; font-size:1.02rem; }
.card-stage{ display:flex; flex-direction:column; align-items:center; gap:18px; perspective: 1300px; }
.tilt-card{
  width: min(430px, 92vw); aspect-ratio: 1.586/1; border-radius:24px; position:relative;
  background: linear-gradient(135deg, #10162a 0%, #172038 45%, #2e7de133 100%);
  border: 1px solid var(--line);
  box-shadow: 0 40px 70px -25px rgba(0,0,0,.6);
  transform-style: preserve-3d; transition: transform .2s var(--ease); will-change: transform;
}
.tilt-card-glow{ position:absolute; inset:-2px; border-radius:26px; background: linear-gradient(135deg, var(--coral), var(--mint)); opacity:.18; filter: blur(20px); z-index:-1; }
.tilt-card-shine{ position:absolute; inset:0; border-radius:24px; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.4), transparent 45%); mix-blend-mode: overlay; opacity:0; transition: opacity .3s ease; pointer-events:none; }
.tilt-card:hover .tilt-card-shine, .tilt-card.touched .tilt-card-shine{ opacity:1; }
.tilt-card-inner{ position:absolute; inset:0; padding: clamp(22px,4vw,36px); display:flex; flex-direction:column; justify-content:space-between; color: var(--ink); transform: translateZ(50px); }
.tilt-card-top{ display:flex; justify-content:space-between; align-items:center; font-family: var(--display); font-weight:700; letter-spacing:.05em; font-size: clamp(.7rem,2vw,.9rem); }
.tilt-card-chip{ font-size:.68rem; border:1px solid var(--line); padding:4px 10px; border-radius:999px; color: var(--mint); }
.tilt-card-label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.tilt-card-amount{ font-family: var(--display); font-size: clamp(2.3rem,5vw,3.1rem); margin-top:6px; color: var(--coral); }
.tilt-card-bottom{ display:flex; justify-content:space-between; font-size:.78rem; color: var(--muted); }
.tilt-hint{ font-size:.8rem; color: var(--muted); }

/* ---- Contact ---- */
.contact-form{ max-width: 800px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap: 22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field-full{ grid-column: 1/-1; }
label{ font-size:.78rem; letter-spacing:.05em; color: var(--muted); }
input, textarea{
  font-family: var(--body); font-size:1rem; padding: 15px 18px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 12px; color: var(--ink); transition: border-color .3s ease, transform .3s ease;
  resize: vertical;
}
input::placeholder, textarea::placeholder{ color: #5c5d68; }
input:focus, textarea:focus{ border-color: var(--mint); transform: translateY(-2px); }
.contact-form .btn{ margin-top:6px; width:fit-content; justify-self:start; }

/* ---- Location ---- */
.location-inner{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap: clamp(32px,6vw,90px); align-items:center; }
.location-info h2{ font-size: clamp(2.1rem,4.2vw,3.2rem); margin: 6px 0 22px; }
.location-line{ margin: 10px 0; color: var(--muted); }
.location-line strong{ color: var(--ink); }
.location-info .btn{ margin-top: 26px; }
.map-placeholder{ border-radius:20px; overflow:hidden; height: clamp(280px,32vw,420px); background: var(--bg-soft); border:1px solid var(--line); }
.map-fallback{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:
  radial-gradient(circle at 30% 30%, rgba(255,90,60,.12), transparent 55%), radial-gradient(circle at 75% 70%, rgba(110,231,183,.1), transparent 55%); }
.map-fallback span{ font-family: var(--display); font-size:1.4rem; letter-spacing:.1em; color: var(--mint); }
.map-fallback small{ color: var(--muted); }

/* ---- Footer ---- */
.site-footer{ padding: 60px var(--gutter) 30px; border-top:1px solid var(--line); }
.footer-top{ max-width:1500px; margin:0 auto; display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:center; padding-bottom:32px; }
.footer-nav{ display:flex; gap:20px; flex-wrap:wrap; font-size:.85rem; color: var(--muted); }
.footer-social{ display:flex; gap:18px; font-size:.85rem; color: var(--muted); }
.footer-bottom{ max-width:1500px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; border-top:1px solid var(--line); font-size:.76rem; color: var(--muted); }

/* ---- Responsive ---- */
@media (max-width: 980px){
  .service-grid{ grid-template-columns: 1fr; }
  .service-card.featured{ transform:none; }
  .experience-inner, .location-inner{ grid-template-columns:1fr; }
  .main-nav{ position:fixed; top:0; right:0; height:100vh; width:min(320px,82vw); background: var(--bg-soft); border-left:1px solid var(--line); flex-direction:column; justify-content:center; align-items:flex-start; gap:24px; padding:40px; transform: translateX(100%); transition: transform .45s var(--ease); }
  .main-nav.open{ transform: translateX(0); }
  .menu-toggle{ display:flex; }
  .menu-toggle.open span:nth-child(1){ transform: translateY(4px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2){ transform: translateY(-4px) rotate(-45deg); }
  .floater{ display:none; }
}
@media (max-width:640px){
  .contact-form{ grid-template-columns:1fr; }
  .cursor-dot{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}