/* ==========================================================================
   V5 Digital — Design tokens
   ========================================================================== */
:root{
  --bg: #05070B;
  --bg-2: #0A0F17;
  --white: #F4F7FA;
  --silver: #BFC9D8;
  --blue: #126BFF;
  --cyan: #35C8FF;
  --border: rgba(255,255,255,0.08);
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --container: 1200px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul,ol{margin:0; padding:0; list-style:none;}
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}

h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.02em;}
.section-title{font-size:clamp(1.8rem,3.2vw,2.6rem); max-width:640px;}
.section-sub{color:var(--silver); max-width:520px; margin-top:12px;}
.accent{color:var(--cyan);}

.skip-link{position:absolute; left:-999px; top:0; background:var(--bg-2); color:var(--white); padding:10px 16px; z-index:999;}
.skip-link:focus{left:16px; top:16px;}

/* Subtle background grid */
.grain{position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 0%, black, transparent 75%);
}

/* Custom cursor (desktop only) */
.cursor-dot{position:fixed; width:8px; height:8px; border-radius:50%; background:var(--cyan);
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s,background .2s;
  display:none;}
body.has-fine-pointer .cursor-dot{display:block;}
.cursor-dot.is-active{width:28px; height:28px; background:rgba(53,200,255,0.25); box-shadow:0 0 0 1px var(--cyan);}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:8px; font-weight:600; font-size:0.95rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;}
.btn--primary{background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#05070B;}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(18,107,255,0.35);}
.btn--ghost{border:1px solid var(--border); color:var(--white);}
.btn--ghost:hover{border-color:var(--cyan); transform:translateY(-2px);}
.btn--lg{padding:16px 32px; font-size:1.05rem;}
.arrow{transition:transform .25s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}

/* ==========================================================================
   Header
   ========================================================================== */
.header{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;}
.header__row{display:flex; align-items:center; justify-content:space-between; height:80px;}
.header.is-scrolled{background:rgba(5,7,11,0.75); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}

.logo{display:flex; align-items:center; gap:10px;}
.logo__mark{width:26px; height:26px;}
.logo__text{font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:-0.01em;}
.logo__text em{font-style:normal; color:var(--silver); font-weight:500;}

.nav{display:flex; gap:36px;}
.nav a{font-size:0.92rem; color:var(--silver); position:relative; padding:4px 0;}
.nav a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--cyan); transition:width .3s var(--ease);}
.nav a:hover{color:var(--white);}
.nav a:hover::after{width:100%;}

.header__actions{display:flex; align-items:center; gap:18px;}
.header__cta{padding:10px 20px; font-size:0.88rem;}

.hamburger{display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer;}
.hamburger span{width:100%; height:2px; background:var(--white); border-radius:2px; transition:transform .3s var(--ease), opacity .3s;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{position:fixed; inset:0; background:var(--bg-2); z-index:99; display:flex; align-items:center; justify-content:center;
  transform:translateY(-100%); transition:transform .4s var(--ease); opacity:0;}
.mobile-menu.is-open{transform:translateY(0); opacity:1;}
.mobile-menu nav{display:flex; flex-direction:column; gap:28px; text-align:center;}
.mobile-menu a{font-family:var(--font-display); font-size:1.6rem;}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative; padding:170px 0 90px; overflow:hidden;}
.hero__grid{position:absolute; inset:0; z-index:0;}
.hero__row{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; position:relative; z-index:1;}

.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--border); border-radius:100px; font-size:0.82rem; color:var(--silver); margin-bottom:24px;}
.badge__dot{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan);}

.hero__title{font-size:clamp(2.4rem,5vw,3.8rem); line-height:1.1;}
.hero__subtitle{color:var(--silver); max-width:520px; margin:22px 0 32px; font-size:1.05rem;}
.hero__actions{display:flex; flex-wrap:wrap; gap:16px;}
.hero__micro{margin-top:26px; font-size:0.85rem; color:var(--silver); opacity:0.8;}
.hero__micro span{color:var(--cyan); margin:0 4px;}

.trust-list{display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:18px; padding:0;}
.trust-list li{display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--silver);}
.trust-list__icon{color:var(--cyan); font-size:0.8rem;}
.trust-list--cta{flex-direction:column; gap:10px; margin-top:28px;}

.hero__visual{display:flex; align-items:center; justify-content:center;}
.v5-symbol{width:100%; max-width:420px;}
.orbit{fill:none; stroke:var(--border); stroke-width:1;}
.orbit--2{stroke-dasharray:2 6;}
.v5-mark{transform-origin:210px 210px;}
.node{fill:var(--cyan); filter:drop-shadow(0 0 6px var(--cyan));}

@media (prefers-reduced-motion:no-preference){
  .orbit--1{animation:spin 40s linear infinite;}
  .orbit--2{animation:spin 60s linear infinite reverse;}
  .node--1{animation:pulse 3s ease-in-out infinite;}
  .node--2{animation:pulse 3s ease-in-out infinite .6s;}
  .node--3{animation:pulse 3s ease-in-out infinite 1.2s;}
  .node--4{animation:pulse 3s ease-in-out infinite 1.8s;}
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{opacity:.4;} 50%{opacity:1;}}

/* ==========================================================================
   Impact bar
   ========================================================================== */
.impact{border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:22px 0; background:var(--bg-2);}
.impact__row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;}
.impact__item{display:flex; align-items:center; gap:10px; font-size:0.88rem; color:var(--silver);}
.impact__bar{width:26px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--cyan));}

/* ==========================================================================
   Services
   ========================================================================== */
.services{padding:120px 0;}
.services__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-top:48px;}
.card{background:var(--bg); padding:34px 26px; transition:transform .3s var(--ease), background .3s;}
.card:hover{transform:translateY(-6px); background:var(--bg-2); box-shadow:inset 0 0 0 1px rgba(53,200,255,0.35);}
.card__num{font-family:var(--font-display); color:var(--silver); font-size:0.85rem;}
.card h3{margin:16px 0 10px; font-size:1.15rem;}
.card p{color:var(--silver); font-size:0.92rem; margin:0;}

/* ==========================================================================
   Diferencial
   ========================================================================== */
.diff{padding:100px 0; background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.diff__row{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px;}
.diff__text p{color:var(--silver); margin-top:18px; max-width:420px;}
.diff__list{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.diff__item h3{font-size:1.05rem; margin-bottom:8px;}
.diff__item p{color:var(--silver); font-size:0.9rem; margin:0;}

/* ==========================================================================
   Process
   ========================================================================== */
.process{padding:120px 0;}
.timeline{margin-top:56px; position:relative; padding-left:36px; border-left:1px solid var(--border);}
.timeline__item{position:relative; padding-bottom:42px;}
.timeline__item:last-child{padding-bottom:0;}
.timeline__num{position:absolute; left:-46px; top:0; width:20px; height:20px; border-radius:50%; background:var(--bg-2); border:1px solid var(--cyan); color:var(--cyan); font-size:0.65rem; display:flex; align-items:center; justify-content:center; font-family:var(--font-display);}
.timeline__item h3{font-size:1.1rem; margin-bottom:6px;}
.timeline__item p{color:var(--silver); margin:0; max-width:480px; font-size:0.92rem;}

/* ==========================================================================
   Projects
   ========================================================================== */
.projects{padding:120px 0; background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.projects__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; max-width:840px;}
.project{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--bg); transition:transform .3s var(--ease), border-color .3s;}
.project:hover{transform:translateY(-6px); border-color:rgba(53,200,255,0.4);}
.project__mock{height:180px; display:flex; align-items:flex-start; gap:6px; padding:16px; background:linear-gradient(160deg,#0d1420,#070a10);}
.project__mock--finance{background:linear-gradient(160deg,#0d1a2c,#070a10);}
.project__mock--vertex{background:linear-gradient(160deg,#101418,#070a10);}
.project__mock--pulse{background:linear-gradient(160deg,#0c1a22,#070a10);}
.project__mock--image{padding:0;}
.project__image{display:block; width:100%; height:100%; object-fit:cover;}
.mock__dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.15);}
.project__tag{display:block; padding:20px 20px 0; font-size:0.78rem; color:var(--cyan);}
.project h3{padding:8px 20px 22px; font-size:1.1rem;}
.projects__note{margin-top:28px; font-size:0.8rem; color:var(--silver); opacity:0.7;}

/* ==========================================================================
   Tech
   ========================================================================== */
.tech{padding:120px 0;}
.tech__row{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.tech__text p{color:var(--silver); margin:16px 0 26px; max-width:420px;}
.tech__list{display:flex; flex-wrap:wrap; gap:10px;}
.tech__list li{padding:8px 14px; border:1px solid var(--border); border-radius:100px; font-size:0.82rem; color:var(--silver);}
.terminal{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg-2);}
.terminal__bar{display:flex; gap:6px; padding:12px 16px; border-bottom:1px solid var(--border);}
.terminal__bar span{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.15);}
.terminal__body{margin:0; padding:22px; font-family:monospace; font-size:0.85rem; color:var(--silver); line-height:1.8;}
.terminal__body code{color:var(--cyan);}

/* ==========================================================================
   Performance
   ========================================================================== */
.perf{padding:120px 0; background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center;}
.perf .section-title{margin:0 auto;}
.perf__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:52px 0 24px;}
.perf__item p{color:var(--silver); font-size:0.85rem; margin-top:14px;}
.perf__ring{width:100px; height:100px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--cyan) 0deg, var(--border) 0deg); font-family:var(--font-display); font-size:1.3rem;}
.perf__ring span{width:78px; height:78px; border-radius:50%; background:var(--bg-2); display:flex; align-items:center; justify-content:center;}
.perf__note{font-size:0.8rem; color:var(--silver); opacity:0.7; max-width:520px; margin:0 auto;}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{position:relative; padding:140px 0; text-align:center; overflow:hidden;}
.cta__glow{position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:600px; height:400px;
  background:radial-gradient(closest-side, rgba(18,107,255,0.18), transparent); z-index:0;}
.cta__row{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; text-align:left;}
.cta h2{font-size:clamp(1.9rem,3.6vw,2.8rem); max-width:480px;}
.cta p{color:var(--silver); max-width:440px; margin:20px 0 0;}

.cta__form{display:flex; flex-direction:column; gap:18px; padding:32px; border:1px solid var(--border); border-radius:14px; background:var(--bg-2);}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:0.82rem; color:var(--silver);}
.field input,.field textarea{background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:12px 14px; color:var(--white); font-family:var(--font-body); font-size:0.95rem; resize:vertical; transition:border-color .25s;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--cyan);}
.honeypot{position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none;}
.honeypot{display:none !important; visibility:hidden; position:absolute; left:-9999px; width:0; height:0; opacity:0; pointer-events:none;}
.cta__submit{width:100%; justify-content:center;}
.cta__form-note{font-size:0.85rem; color:var(--cyan); min-height:1.2em; margin:0;}

@media (max-width:1024px){
  .cta__row{grid-template-columns:1fr; text-align:center;}
  .cta h2,.cta p{margin-left:auto; margin-right:auto;}
  .trust-list--cta{align-items:center;}
}

/* ==========================================================================
   Floating CTA
   ========================================================================== */
.floating-cta{position:fixed; right:24px; bottom:24px; z-index:90; display:flex; align-items:center; gap:8px;
  padding:14px 22px; border-radius:100px; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#05070B;
  font-weight:600; font-size:0.9rem; box-shadow:0 12px 30px rgba(18,107,255,0.3);
  transform:translateY(120%); opacity:0; transition:transform .4s var(--ease), opacity .4s, box-shadow .25s;}
.floating-cta.is-visible{transform:translateY(0); opacity:1;}
.floating-cta:hover{box-shadow:0 14px 34px rgba(18,107,255,0.45);}
@media (max-width:768px){ .floating-cta{right:16px; bottom:16px; padding:12px 18px; font-size:0.85rem;} }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{border-top:1px solid var(--border); padding:60px 0 0;}
.footer__row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:40px;}
.footer__brand p{color:var(--silver); font-size:0.85rem; margin-top:14px; max-width:260px;}
.footer__links{display:flex; flex-direction:column; gap:10px; font-size:0.88rem; color:var(--silver);}
.footer__links a:hover{color:var(--cyan);}
.footer__social{display:flex; flex-direction:column; gap:10px; font-size:0.88rem; color:var(--silver);}
.footer__social a:hover{color:var(--cyan);}
.footer__bottom{border-top:1px solid var(--border); padding:20px 0; font-size:0.78rem; color:var(--silver); opacity:0.6;}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  .reveal{opacity:1; transform:none;}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .hero__row{grid-template-columns:1fr; text-align:left;}
  .hero__visual{order:-1; max-width:320px; margin:0 auto 20px;}
  .services__grid{grid-template-columns:repeat(2,1fr);}
  .diff__row{grid-template-columns:1fr;}
  .tech__row{grid-template-columns:1fr;}
  .projects__grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
  .nav, .header__cta{display:none;}
  .hamburger{display:flex;}
  .hero{padding:150px 0 70px;}
  .services__grid{grid-template-columns:1fr;}
  .diff__list{grid-template-columns:1fr;}
  .projects__grid{grid-template-columns:1fr;}
  .perf__grid{grid-template-columns:repeat(2,1fr);}
  .footer__row{flex-direction:column; gap:28px;}
}

@media (max-width:430px){
  .container{padding:0 18px;}
  .hero__title{font-size:2.1rem;}
  .btn{padding:13px 20px; font-size:0.9rem;}
  .perf__grid{grid-template-columns:repeat(2,1fr); gap:16px;}
}

@media (min-width:1920px){
  :root{--container:1440px;}
}