/* ============================================================
   VERCYC SpA — Production website stylesheet
   Shared by /en/ and /es/. Self-contained (tokens + components).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --navy:#0A1628; --navy-800:#0F1F38; --navy-700:#16294A;
  --emerald:#00A86B; --emerald-700:#007A4D; --emerald-50:#E6F7F0;
  --steel:#6B7280; --steel-400:#9CA3AF; --steel-300:#D1D5DB;
  --bg:#FFFFFF; --surface:#F8F9FA; --surface-2:#F1F3F5;
  --ink:#111827; --ink-2:#374151; --border:#E5E7EB;
  --on-dark:#FFFFFF; --on-dark-2:#AEB8C6;
  --success:#00A86B; --warning:#B45309; --danger:#B42318; --info:#2563EB;

  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --shadow-xs:0 1px 2px rgba(10,22,40,0.05);
  --shadow-sm:0 3px 8px rgba(10,22,40,0.06);
  --shadow-md:0 12px 24px rgba(10,22,40,0.07);
  --shadow-lg:0 32px 48px rgba(10,22,40,0.10);

  --r-btn:4px; --r-card:8px; --r-pill:999px;
  --container:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(0,168,107,.18);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
.container{max-width:var(--container); margin:0 auto; padding:0 32px;}

/* ---- type ---- */
h1,h2,h3{font-family:var(--font-display); color:var(--ink); margin:0; letter-spacing:-0.02em; line-height:1.08;}
.mono{font-family:var(--font-mono);}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--emerald);
  display:inline-block; margin-bottom:18px;
}
.section{padding:96px 0;}
.section-head{max-width:760px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section h2{font-size:36px; font-weight:700;}
.lead{font-size:18px; color:var(--ink-2); line-height:1.6;}
.on-navy{background:var(--navy);} .on-navy h2,.on-navy h3{color:#fff;}
.on-surface{background:var(--surface);}

/* arrows in mono context */
.arr{font-family:var(--font-mono);}

/* ============================================================ NAVBAR */
.nav{
  position:sticky; top:0; z-index:100; background:#fff;
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s var(--ease);
  animation:navDown .5s var(--ease);
}
.nav.scrolled{box-shadow:var(--shadow-xs);}
@keyframes navDown{from{transform:translateY(-100%);}to{transform:translateY(0);}}
.nav-inner{max-width:var(--container); margin:0 auto; padding:0 32px; height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:11px;}
.brand svg{display:block;}
.brand-text{display:flex; flex-direction:column; line-height:1;}
.wordmark{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-0.02em; color:var(--navy);}
.wordmark .c{color:var(--emerald);}
.brand-tag{font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.15em; color:var(--steel-400); margin-top:3px;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{font-size:15px; font-weight:500; color:var(--ink-2); transition:color .15s;}
.nav-links a:hover{color:var(--navy);}
.nav-right{display:flex; align-items:center; gap:18px;}
.lang{display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14px; font-weight:600;}
.lang .ic{width:16px; height:16px; color:var(--steel);}
.lang a{color:var(--steel); padding-bottom:2px;}
.lang a.active{color:var(--navy); border-bottom:2px solid var(--emerald);}
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  padding:11px 20px; border-radius:var(--r-btn); border:1px solid transparent;
  transition:all .18s var(--ease); white-space:nowrap;
}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-800);}
.btn-emerald{background:var(--emerald); color:#fff;}
.btn-emerald:hover{background:var(--emerald-700);}
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.35);}
.btn-ghost-light:hover{background:rgba(255,255,255,.08); border-color:#fff;}
.btn-outline{background:#fff; color:var(--navy); border-color:var(--steel-300);}
.btn-outline:hover{background:var(--surface); border-color:var(--navy);}
.btn-block{width:100%; justify-content:center;}
.hamburger{display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--navy);}

/* mobile overlay */
.mobile-nav{position:fixed; inset:0; z-index:200; background:var(--navy); display:none; flex-direction:column; padding:28px 32px;}
.mobile-nav.open{display:flex;}
.mobile-nav .mtop{display:flex; justify-content:space-between; align-items:center; margin-bottom:40px;}
.mobile-nav a{color:#fff; font-family:var(--font-display); font-size:28px; font-weight:600; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.mobile-nav .mlang{margin-top:auto; display:flex; gap:16px; font-size:18px;}
.mobile-nav .mclose{background:none; border:none; color:#fff; cursor:pointer;}

/* ============================================================ HERO */
.hero{position:relative; background:var(--navy); min-height:100vh; display:flex; align-items:center; overflow:hidden;}
.hero-pattern{position:absolute; inset:0; opacity:.04; background-image:repeating-linear-gradient(135deg,#fff 0,#fff 2px,transparent 2px,transparent 26px); pointer-events:none;}
.hero-glow{position:absolute; top:-20%; right:-10%; width:60%; height:80%; background:radial-gradient(circle,rgba(0,168,107,.14) 0%,transparent 60%); pointer-events:none;}
.hero-inner{position:relative; max-width:var(--container); margin:0 auto; padding:140px 32px 120px; width:100%;}
.hero-label{font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--emerald); margin-bottom:26px;}
.hero h1{font-size:60px; font-weight:800; color:#fff; max-width:880px; line-height:1.05;}
.hero h1 .w{display:inline-block; opacity:0; transform:translateY(14px); animation:wordUp .6s var(--ease) forwards;}
@keyframes wordUp{to{opacity:1; transform:translateY(0);}}
.hero-sub{font-size:18px; color:var(--on-dark-2); max-width:580px; margin:26px 0 0; line-height:1.65;}
.hero-cta{display:flex; gap:14px; margin-top:38px; flex-wrap:wrap;}
.hero-ticker{position:absolute; bottom:32px; left:0; right:0; }
.hero-ticker .container{font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em; color:var(--steel); display:flex; align-items:center; gap:14px;}
.hero-ticker .dot{color:var(--emerald);}

/* ============================================================ STATS */
.stats{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fff;}
.stats-row{display:flex; max-width:var(--container); margin:0 auto;}
.stat{flex:1; padding:38px 28px; border-left:1px solid var(--border); min-width:160px;}
.stat:first-child{border-left:none;}
.stat-num{font-family:var(--font-mono); font-weight:700; font-size:30px; color:var(--navy); letter-spacing:-0.02em;}
.stat-label{font-size:13.5px; color:var(--steel); margin-top:8px; line-height:1.45;}

/* ============================================================ CARDS / PRODUCT */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-sm); padding:28px; transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);}
.card.hoverable:hover{transform:translateY(-3px) scale(1.01); box-shadow:var(--shadow-md); border-color:var(--steel-300);}
.card-label{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--emerald);}
.card h3{font-size:21px; font-weight:600; margin:10px 0 12px;}
.card p{font-size:14.5px; color:var(--ink-2); margin:0; line-height:1.6;}
.spec-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
.spec-tag{font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--emerald-700); background:var(--emerald-50); padding:4px 9px; border-radius:var(--r-btn);}
.card-dashed{border:1px dashed var(--steel-300); background:var(--surface); box-shadow:none; display:flex; align-items:center; gap:16px;}
.card-dashed .ic{color:var(--steel); flex:none;}
.card-dashed p{color:var(--steel); font-size:14px;}

/* spec reference table */
.spec-table{margin-top:40px; background:#fff; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden;}
.spec-table .row{display:grid; grid-template-columns:1fr 1.4fr; gap:16px; padding:14px 22px; border-bottom:1px solid var(--border);}
.spec-table .row:last-child{border-bottom:none;}
.spec-table .k{font-size:14px; color:var(--steel); font-weight:500;}
.spec-table .v{font-family:var(--font-mono); font-size:13.5px; color:var(--ink); font-weight:500;}

/* ============================================================ PROCESS TIMELINE */
.process-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; position:relative;}
.pstep{position:relative;}
.pstep .pnum{font-family:var(--font-mono); font-size:12px; color:var(--emerald); margin-bottom:14px; display:block;}
.pstep .picon{width:52px; height:52px; border-radius:var(--r-pill); border:1.5px solid var(--emerald); display:flex; align-items:center; justify-content:center; color:var(--emerald); background:rgba(0,168,107,.07); margin-bottom:18px; position:relative; z-index:2;}
.pstep h3{font-size:17px; font-weight:600; color:#fff; margin-bottom:9px;}
.pstep p{font-size:13.5px; color:var(--on-dark-2); margin:0; line-height:1.55;}
.process-steps::before{content:''; position:absolute; top:80px; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,rgba(0,168,107,.4),transparent); z-index:1;}

/* ============================================================ COMPLIANCE */
.cards-6{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.ccard{background:#fff; border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-sm); padding:24px; display:flex; flex-direction:column;}
.ccard .ic-box{width:44px; height:44px; border-radius:var(--r-btn); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.ic-emerald{background:var(--emerald-50); color:var(--emerald);}
.ic-navy{background:#EAF0F8; color:var(--navy);}
.ccard h3{font-size:17px; font-weight:600; margin-bottom:6px;}
.ccard .issuer{font-family:var(--font-mono); font-size:11px; color:var(--steel); margin-bottom:12px; line-height:1.4;}
.ccard p{font-size:13.5px; color:var(--ink-2); margin:0 0 16px; line-height:1.55; flex:1;}
.pill{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:12px; font-weight:600; padding:4px 11px; border-radius:var(--r-pill);}
.pill-emerald{background:var(--emerald-50); color:var(--emerald-700);}
.pill-navy{background:#EAF0F8; color:var(--navy);}
.pill-steel{background:var(--surface-2); color:var(--steel);}
.compliance-note{text-align:center; font-style:italic; color:var(--steel); font-size:14px; margin-top:36px; max-width:680px; margin-left:auto; margin-right:auto;}

/* ============================================================ WHY (3 cols) */
.feat-3{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:8px;}
.feat .ic{color:var(--emerald); margin-bottom:18px;}
.feat h3{font-size:19px; font-weight:600; margin-bottom:12px;}
.feat p{font-size:15px; color:var(--ink-2); margin:0; line-height:1.6;}
.diff-banner{margin-top:52px; background:var(--navy); border-left:4px solid var(--emerald); border-radius:var(--r-card); padding:32px 36px;}
.diff-banner p{color:#fff; font-size:17px; line-height:1.6; margin:0; max-width:900px;}

/* ============================================================ MARKETS */
.markets-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.market-col h3{font-size:20px; font-weight:600; margin-bottom:22px;}
.mrow{display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--border);}
.mrow .flag{font-size:20px; width:26px; text-align:center; flex:none;}
.mrow .mname{font-weight:600; color:var(--ink); font-size:15px;}
.mrow .mports{font-family:var(--font-mono); font-size:11.5px; color:var(--steel); margin-top:2px;}
.mrow .mmid{flex:1; min-width:0;}
.world-map{margin-top:48px; background:var(--navy); border-radius:var(--r-card); padding:8px; overflow:hidden;}
.world-map svg{width:100%; height:auto; display:block;}
.arc{stroke-dasharray:5 5; animation:dash 24s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-400;}}
.map-dot-o{fill:var(--emerald);}
.map-dot-d{fill:#F2C75C;}

/* ============================================================ ROADMAP */
.roadmap{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.phase{border-top:2px solid rgba(255,255,255,.15); padding-top:22px;}
.phase.now{border-top-color:var(--emerald);}
.phase .ptag{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.12em; color:var(--steel-400); margin-bottom:12px;}
.phase.now .ptag{color:var(--emerald);}
.phase h3{font-size:19px; font-weight:600; color:#fff; margin-bottom:10px;}
.phase p{font-size:13.5px; color:var(--on-dark-2); margin:0; line-height:1.55;}
.roadmap-note{margin-top:44px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); color:var(--on-dark-2); font-size:15px; max-width:760px;}
.roadmap-note .mono{color:var(--emerald);}

/* ============================================================ ABOUT */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.about-text p{font-size:15.5px; color:var(--ink-2); margin:0 0 18px; line-height:1.7;}
.photo-slot{background:linear-gradient(135deg,#0A1628,#16294A); border:1px dashed rgba(255,255,255,.18); border-radius:var(--r-card); min-height:380px; display:flex; align-items:flex-end; padding:18px;}
.photo-slot .lbl{font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:7px;}

/* ============================================================ CONTACT */
.contact-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:48px; align-items:start;}
.form-card{background:#fff; border-radius:var(--r-card); box-shadow:var(--shadow-lg); padding:32px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.field label{font-size:13px; font-weight:600; color:var(--ink-2);}
.field input,.field select,.field textarea{font-family:var(--font-body); font-size:14.5px; color:var(--ink); padding:11px 13px; border:1px solid var(--steel-300); border-radius:var(--r-btn); background:#fff; outline:none; transition:border-color .15s,box-shadow .15s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--emerald); box-shadow:0 0 0 3px rgba(0,168,107,.12);}
.field textarea{resize:vertical;}
.contact-info{display:flex; flex-direction:column; gap:20px;}
.contact-info .ci{display:flex; align-items:center; gap:13px; color:var(--on-dark-2); font-size:15px;}
.contact-info .ci .ic{color:var(--emerald); flex:none;}
.contact-info .ci a:hover{color:#fff;}

/* ============================================================ FOOTER */
.footer{background:var(--navy); border-top:2px solid var(--emerald); color:var(--on-dark-2);}
.footer-top{display:flex; justify-content:space-between; align-items:center; padding:40px 0; gap:24px; flex-wrap:wrap;}
.footer-links{display:flex; gap:26px; font-size:14px;}
.footer-links a:hover{color:#fff;}
.footer-social{display:flex; gap:14px;}
.footer-social a{width:38px; height:38px; border:1px solid rgba(255,255,255,.15); border-radius:var(--r-btn); display:flex; align-items:center; justify-content:center; color:var(--on-dark-2); transition:all .15s;}
.footer-social a:hover{color:#fff; border-color:var(--emerald);}
.footer-mid{padding:22px 0; border-top:1px solid rgba(255,255,255,.1); font-size:13.5px; line-height:1.6;}
.footer-mid .mono{color:var(--steel-400);}
.footer-bottom{padding:18px 0; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; font-size:13px; color:var(--steel); flex-wrap:wrap; gap:8px;}

/* ============================================================ FLOATING */
.fab-wa{position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:var(--r-pill); background:var(--emerald); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); z-index:90; cursor:pointer; animation:pulse 4s var(--ease) infinite;}
.fab-wa:hover{background:var(--emerald-700);}
@keyframes pulse{0%,90%,100%{box-shadow:0 0 0 0 rgba(0,168,107,.5),var(--shadow-md);}45%{box-shadow:0 0 0 14px rgba(0,168,107,0),var(--shadow-md);}}
.fab-top{position:fixed; bottom:90px; right:30px; width:44px; height:44px; border-radius:var(--r-pill); background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:90; opacity:0; pointer-events:none; transform:translateY(8px); transition:all .25s var(--ease); border:none;}
.fab-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.fab-top:hover{background:var(--navy-800);}
.fab-tip{position:absolute; right:64px; white-space:nowrap; background:var(--navy); color:#fff; font-size:13px; padding:7px 12px; border-radius:var(--r-btn); opacity:0; pointer-events:none; transition:opacity .15s;}
.fab-wa:hover .fab-tip{opacity:1;}

/* ============================================================ SCROLL REVEAL */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease),transform .55s var(--ease);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.24s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.32s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s;}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger > *,.hero h1 .w{opacity:1!important; transform:none!important; animation:none!important;}
  .fab-wa,.arc{animation:none!important;}
}

/* ============================================================ RESPONSIVE */
@media(max-width:1024px){
  .hero h1{font-size:50px;}
  .process-steps{grid-template-columns:repeat(2,1fr); gap:32px 24px;}
  .process-steps::before{display:none;}
  .cards-3,.cards-6,.feat-3{grid-template-columns:repeat(2,1fr);}
  .roadmap{grid-template-columns:repeat(2,1fr); gap:32px 24px;}
}
@media(max-width:768px){
  .container{padding:0 22px;}
  .section{padding:64px 0;}
  .nav-links{display:none;}
  .nav-right .lang{display:none;}
  .nav-right .btn-navy{display:none;}
  .hamburger{display:block;}
  .hero-inner{padding:120px 22px 110px;}
  .hero h1{font-size:38px;}
  .hero-sub{font-size:16px;}
  .section h2{font-size:28px;}
  .stats-row{overflow-x:auto;}
  .stat{min-width:170px;}
  .cards-3,.cards-6,.feat-3,.process-steps,.roadmap,.markets-grid,.about-grid,.contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .about-grid,.contact-grid,.markets-grid{gap:36px;}
  .footer-top{flex-direction:column; align-items:flex-start;}
  .hero-ticker .container{font-size:10px; gap:8px; overflow-x:auto; white-space:nowrap;}
}