@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=DM+Sans:ital,opsz,wght@0,9..40,300..900;1,9..40,300..900&display=swap&font-display=swap');

/* ═══════════════════════════════════
   TOKENS
═══════════════════════════════════ */
:root{
  --bg:       #030c10;
  --bg2:      #061318;
  --navy:     #082333;
  --ocean:    #0a3d54;
  --teal:     #0dcfe8;
  --teal-dim: #0a8fa0;
  --gold:     #c8953e;
  --gold-lt:  #e4b86a;
  --cream:    #f0ebe0;
  --off:      #f7f4ee;
  --ink:      #0a1a22;
  --tx:       rgba(255,255,255,.88);
  --tx2:      rgba(255,255,255,.52);
  --tx3:      rgba(255,255,255,.28);
  --line:     rgba(13,207,232,.12);
  --line-lt:  rgba(10,61,84,.14);

  --f-d:'Fraunces',Georgia,serif;
  --f-b:'DM Sans',system-ui,sans-serif;

  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-b:   cubic-bezier(.175,.885,.32,1.275);
  --ease-in:  cubic-bezier(.55,0,1,.45);

  --r:  clamp(12px,1.5vw,18px);
  --rl: clamp(18px,2.5vw,28px);
  --rx: clamp(24px,3.2vw,40px);

  --cont:1240px;
}

/* ═══════════════════════════════════
   RESET + BASE
═══════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{
  font-family:var(--f-b);
  background:var(--bg);
  color:var(--tx);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
img,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit;cursor:none}
button{font:inherit;cursor:none;border:none;background:none}

/* View Transitions API */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .3s var(--ease-in) both}
::view-transition-new(root){animation:vt-in  .38s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px) scale(.98)}}
@keyframes vt-in {from{opacity:0;transform:translateY(14px) scale(.98)}}

/* ═══════════════════════════════════
   PRELOADER
═══════════════════════════════════ */
#preloader{
  position:fixed;inset:0;z-index:10000;
  background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(28px,5vw,48px);
  transition:transform .55s var(--ease);
  will-change:transform;
}
#preloader.out{transform:translateY(-105%);pointer-events:none}
/* Header hidden while preloader is active; JS adds .pre-done to body after exit */
body.pre-active .site-header{
  opacity:0 !important;pointer-events:none;
}
body.pre-done .site-header{
  transition:opacity .4s .05s var(--ease);
}
.pre-logo{
  width:clamp(80px,12vw,140px);
  opacity:0;transform:translateY(12px) scale(.92);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.pre-logo.show{opacity:1;transform:translateY(0) scale(1)}
.pre-bar-wrap{
  width:clamp(120px,18vw,200px);height:1px;
  background:rgba(13,207,232,.15);border-radius:1px;overflow:hidden;
}
.pre-bar{
  height:100%;background:var(--teal);
  width:0;transition:width 1.15s var(--ease);
  box-shadow:0 0 8px var(--teal);
}
.pre-bar.go{width:100%}

/* ═══════════════════════════════════
   CURSOR
═══════════════════════════════════ */
.cursor{
  position:fixed;top:0;left:0;
  pointer-events:none;z-index:9999;
}
.cur-dot{
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:var(--teal);
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px var(--teal);
  transition:width .18s var(--ease),height .18s var(--ease),background .2s;
}
.cur-ring{
  position:absolute;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(13,207,232,.45);
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .2s;
}
body.ch .cur-dot{width:12px;height:12px;background:#fff;box-shadow:none}
body.ch .cur-ring{width:54px;height:54px;border-color:rgba(255,255,255,.25)}
body.ch-light .cur-dot{background:var(--ink);box-shadow:none}
body.ch-light .cur-ring{border-color:rgba(10,25,34,.3)}

/* ═══════════════════════════════════
   LAYOUT
═══════════════════════════════════ */
.wrap{width:min(92%,var(--cont));margin-inline:auto}

/* ═══════════════════════════════════
   HEADER
═══════════════════════════════════ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:clamp(60px,7vw,76px);
  display:flex;align-items:center;
  padding-inline:clamp(20px,5vw,64px);
  transition:background .4s var(--ease),backdrop-filter .4s;
}
.site-header.solid{
  background:rgba(3,12,16,.9);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(13,207,232,.08);
}
.header-inner{
  width:100%;display:flex;
  align-items:center;justify-content:space-between;gap:20px;
}
.header-logo img{
  height:clamp(34px,4.5vw,46px);width:auto;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.5));
}

/* Nav */
.main-nav{display:flex;align-items:center;gap:clamp(6px,2vw,8px)}
.main-nav a{
  font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx2);padding:8px 14px;
  border-radius:999px;
  transition:color .2s,background .2s;
}
.main-nav a:hover{color:var(--tx);background:rgba(255,255,255,.07)}
.main-nav a.active{
  color:var(--bg);background:var(--tx);
}
.nav-cta{
  padding:10px 22px!important;border-radius:999px!important;
  border:1px solid rgba(13,207,232,.4)!important;
  color:var(--teal)!important;background:transparent!important;
  transition:background .2s,border-color .2s,color .2s!important;
}
.nav-cta:hover{background:rgba(13,207,232,.1)!important;border-color:var(--teal)!important;color:#fff!important}
.nav-cta.active{background:transparent!important;color:var(--teal)!important}

/* Burger */
.burger{
  display:none;flex-direction:column;
  justify-content:center;gap:5px;
  width:40px;height:40px;padding:9px;
  border-radius:var(--r);transition:background .2s;
}
.burger:hover{background:rgba(255,255,255,.08)}
.burger-bar{
  display:block;width:22px;height:1.5px;
  background:#fff;border-radius:2px;
  transition:transform .36s var(--ease),opacity .2s;
}
.burger.open .burger-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open .burger-bar:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open .burger-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile overlay */
.mob-nav{
  position:fixed;inset:0;z-index:490;
  background:rgba(3,12,16,.98);
  backdrop-filter:blur(24px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(20px,5vh,40px);
  opacity:0;pointer-events:none;
  transition:opacity .36s var(--ease);
}
.mob-nav.open{opacity:1;pointer-events:auto}
.mob-nav a{
  font-family:var(--f-d);font-style:italic;
  font-size:clamp(2.2rem,8vw,4rem);font-weight:300;
  color:var(--tx2);transition:color .2s;
}
.mob-nav a:hover,.mob-nav a.active{color:#fff}

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.hero{
  position:relative;
  height:100svh;min-height:640px;max-height:1120px;
  overflow:hidden;
  display:flex;align-items:center;
}
.hero-bg{
  position:absolute;inset:0;
  width:100%;height:115%;
  object-fit:cover;object-position:center 35%;
  will-change:transform;
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    160deg,
    rgba(3,12,16,.88) 0%,
    rgba(8,35,51,.72) 38%,
    rgba(10,61,84,.45) 72%,
    rgba(10,61,84,.22) 100%
  );
}
.hero-noise{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  opacity:.7;mix-blend-mode:overlay;
}
/* Bottom fade — blends hero into the dark section below */
.hero::after{
  content:"";position:absolute;
  bottom:0;left:0;right:0;
  height:clamp(80px,14vw,180px);
  background:linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
  z-index:2;pointer-events:none;
}
/* Subtle grid overlay */
.hero-grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(rgba(13,207,232,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,207,232,.07) 1px,transparent 1px);
  background-size:clamp(48px,6vw,80px) clamp(48px,6vw,80px);
  background-color:rgba(3,12,16,.28);
}
.hero-content{
  position:relative;z-index:3;
  width:min(92%,var(--cont));margin-inline:auto;
  padding-top:clamp(20px,6vw,60px);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 16px;border-radius:999px;
  background:rgba(13,207,232,.1);
  border:1px solid rgba(13,207,232,.22);
  color:var(--teal);
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:clamp(18px,3vw,28px);
}
.hero-pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(13,207,232,.6);
  animation:p-glow 2.4s ease-in-out infinite;
}
@keyframes p-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(13,207,232,.6)}
  50%{box-shadow:0 0 0 8px rgba(13,207,232,0)}
}
.hero h1{
  font-family:var(--f-d);
  font-size:clamp(44px,7.5vw,110px);
  font-weight:700;line-height:.96;
  letter-spacing:-.03em;color:#fff;
  margin-bottom:clamp(16px,2.2vw,24px);
}
.hero h1 em{
  display:block;font-style:italic;font-weight:300;
  font-variation-settings:"opsz" 96,"wght" 260;
  color:rgba(255,255,255,.6);
  padding-left:.08em;
}
.hero-row{
  display:flex;align-items:flex-start;
  justify-content:space-between;
  gap:clamp(20px,4vw,48px);flex-wrap:wrap;
  margin-top:clamp(14px,2.5vw,28px);
}
.hero-desc{
  font-size:clamp(14px,1.5vw,17px);line-height:1.72;
  color:var(--tx2);max-width:480px;
}
.hero-actions{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;flex-shrink:0;
}
.btn-primary{
  display:inline-flex;align-items:center;gap:9px;
  height:clamp(48px,5.5vw,58px);
  padding:0 clamp(22px,3vw,34px);
  border-radius:999px;
  background:var(--teal);color:var(--bg);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  position:relative;overflow:hidden;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s;
  box-shadow:0 0 0 0 rgba(13,207,232,.4);
}
.btn-primary::before{
  content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.15);
  transform:translateX(-105%);
  transition:transform .42s var(--ease);
}
.btn-primary:hover{background:#fff;transform:translateY(-3px);box-shadow:0 0 28px rgba(13,207,232,.45)}
.btn-primary:hover::before{transform:translateX(0)}
.btn-secondary{
  display:inline-flex;align-items:center;gap:9px;
  height:clamp(48px,5.5vw,58px);
  padding:0 clamp(22px,3vw,34px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,border-color .2s,transform .25s var(--ease);
}
.btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);transform:translateY(-3px)}
.ico{width:14px;height:14px;flex-shrink:0;transition:transform .2s var(--ease)}
.btn-primary:hover .ico,.btn-secondary:hover .ico{transform:translateX(4px)}
/* Scroll line */
.hero-scroll{
  position:absolute;bottom:36px;right:min(8%,64px);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--tx3);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.s-line{width:1px;height:48px;background:rgba(255,255,255,.15);overflow:hidden;position:relative}
.s-line::after{
  content:"";position:absolute;top:-100%;left:0;
  width:100%;height:40%;background:var(--teal);
  animation:s-run 2s ease-in-out infinite;
}
@keyframes s-run{0%{top:-40%}70%{top:140%}100%{top:140%}}



to{transform:translateX(-50%)}}



/* ═══════════════════════════════════
   SECTION VARIANTS
═══════════════════════════════════ */
/* Dark */
.sec-dark{
  background:var(--bg);
  padding:clamp(72px,10vw,140px) 0 clamp(80px,11vw,160px);
  position:relative;
  overflow:hidden;
}
/* Subtle grid on dark sections */
.sec-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(13,207,232,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,207,232,.018) 1px,transparent 1px);
  background-size:72px 72px;
}
/* Dark 2 — slightly lighter */
.sec-dark2{
  background:var(--bg2);
  padding:clamp(72px,10vw,140px) 0 clamp(80px,11vw,160px);
  position:relative;
  overflow:hidden;
}
/* Diagonal cut top */
.diag-top::after{
  content:"";position:absolute;
  top:-2px;left:0;right:0;height:clamp(50px,6vw,90px);
  clip-path:polygon(0 0,100% 0,100% 0,0 100%);
  z-index:1;
}
.sec-dark.diag-top::after{background:var(--bg)}
.sec-dark2.diag-top::after{background:var(--bg2)}
.sec-cream.diag-top::after{background:var(--cream)}
.sec-white.diag-top::after{background:#fff}
/* Diagonal cut bottom */
.diag-bot{overflow:hidden}
.diag-bot::before{
  content:"";position:absolute;
  bottom:-2px;left:0;right:0;height:clamp(50px,6vw,90px);
  z-index:1;pointer-events:none;
}
.sec-dark.diag-bot::before{background:var(--bg)}

/* Cream */
.sec-cream{
  position:relative;z-index:2;
  background:var(--cream);
  padding:clamp(72px,10vw,140px) 0;
  position:relative;
}
/* White */
.sec-white{
  position:relative;z-index:2;
  background:#fff;
  padding:clamp(72px,10vw,140px) 0;
  position:relative;
}
/* Section negative margin for diagonal overlap */
.diag-overlap{margin-top:clamp(-48px,-6vw,-72px);padding-top:clamp(112px,16vw,168px)}

/* ═══════════════════════════════════
   EYEBROW + HEADINGS
═══════════════════════════════════ */
.ew{
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px;display:block;
}
.ew-dark{color:var(--ocean)}
.h2{
  font-family:var(--f-d);
  font-size:clamp(38px,6.5vw,88px);
  font-weight:700;line-height:.95;letter-spacing:-.035em;
  color:#fff;
}
.h2-dark{color:var(--ink)}
.h2 em,.h2-dark em{
  font-style:italic;font-weight:300;
  font-variation-settings:"opsz" 72,"wght" 270;
}
.h2 em{color:rgba(255,255,255,.45)}
.h2-dark em{color:var(--teal-dim)}
.h2-gap{margin-bottom:clamp(40px,6vw,80px)}
.sec-p{
  font-size:clamp(14px,1.5vw,18px);line-height:1.75;
  color:var(--tx2);max-width:600px;
}
.sec-p-dark{color:var(--ink);opacity:.68}

/* ═══════════════════════════════════
   BENTO GRID
═══════════════════════════════════ */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:10px;
}
.bc{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(13,207,232,.1);
  border-radius:var(--rx);
  padding:clamp(22px,3vw,42px);
  transition:background .32s,border-color .32s,transform .38s var(--ease),box-shadow .38s;
  position:relative;overflow:hidden;
}
.bc::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--teal),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.bc:hover{
  background:rgba(13,207,232,.06);
  border-color:rgba(13,207,232,.22);
  transform:translateY(-5px);
  box-shadow:0 24px 48px rgba(0,0,0,.4),0 0 0 1px rgba(13,207,232,.1);
}
.bc:hover::before{transform:scaleX(1)}
.bc-1{grid-column:span 3}
.bc-2{grid-column:span 3}
.bc-3{grid-column:span 3}
.bc-4{grid-column:span 3}
.bc-5{grid-column:span 5}
.bc-6{grid-column:span 7}
.bc-gold{border-color:rgba(200,149,62,.2)!important}
.bc-gold::before{background:linear-gradient(90deg,var(--gold),transparent)!important}
.bc-gold:hover{border-color:rgba(200,149,62,.45)!important;background:rgba(200,149,62,.05)!important}

.bn{
  font-family:var(--f-d);
  font-size:clamp(36px,4.8vw,72px);
  font-weight:700;line-height:.95;letter-spacing:-.04em;
  color:#fff;display:block;margin-bottom:12px;
  font-variation-settings:"opsz" 72;
  overflow:hidden;
}
.bn-teal{color:var(--teal);text-shadow:0 0 32px rgba(13,207,232,.3)}
.bn-gold{color:var(--gold-lt)}
.bl{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx3);
}
.bw-h{
  font-family:var(--f-d);
  font-size:clamp(18px,2.4vw,30px);font-weight:700;
  letter-spacing:-.02em;color:#fff;
  line-height:1.12;margin-bottom:10px;
}
.bw-p{font-size:13px;line-height:1.72;color:var(--tx2);max-width:360px}
.bw-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;
  border:1px solid rgba(13,207,232,.25);color:var(--teal);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s;
  align-self:flex-start;margin-top:8px;
}
.bw-tag:hover{background:rgba(13,207,232,.12);border-color:var(--teal);color:#fff}

/* ═══════════════════════════════════
   PILLARS
═══════════════════════════════════ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pillar{
  background:#fff;border:1px solid rgba(10,61,84,.12);
  border-radius:var(--rx);
  padding:clamp(26px,3.5vw,46px) clamp(22px,3vw,38px);
  position:relative;overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s;
}
.pillar::after{
  content:"";position:absolute;
  bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--teal-dim));
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease);
}
.pillar:hover{transform:translateY(-9px);box-shadow:0 32px 64px rgba(10,61,84,.14)}
.pillar:hover::after{transform:scaleX(1)}
.p-num{
  position:absolute;top:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);
  font-family:var(--f-d);font-size:clamp(52px,7vw,92px);
  font-weight:700;letter-spacing:-.04em;line-height:1;
  color:rgba(10,61,84,.06);pointer-events:none;
  font-variation-settings:"opsz" 72;
}
.p-icon{
  width:52px;height:52px;border-radius:14px;
  background:rgba(12,80,104,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:20px;
  transition:background .28s,transform .38s var(--ease-b);
}
.pillar:hover .p-icon{background:rgba(13,207,232,.12);transform:scale(1.1) rotate(-6deg)}
.pillar h3{
  font-family:var(--f-d);
  font-size:clamp(18px,2.2vw,26px);font-weight:700;
  letter-spacing:-.02em;color:var(--ink);
  margin-bottom:10px;line-height:1.18;
}
.pillar p{font-size:13px;line-height:1.75;color:var(--ocean);opacity:.8}

/* ═══════════════════════════════════
   TRUST / CERTIFICATIONS
═══════════════════════════════════ */
.trust-row{
  display:flex;align-items:center;
  gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  padding:clamp(20px,3vw,32px) 0;
  border-top:1px solid var(--line-lt);
  border-bottom:1px solid var(--line-lt);
  margin-top:clamp(32px,5vw,64px);
}
.trust-label{
  font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ocean);opacity:.7;flex-shrink:0;
}
.trust-item{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:rgba(10,61,84,.07);
  border:1px solid rgba(10,61,84,.12);
  font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--ocean);
}
.trust-item span{font-size:14px}

/* ═══════════════════════════════════
   TIMELINE
═══════════════════════════════════ */
.timeline{display:grid;gap:10px}
.tl{
  background:#fff;border:1px solid rgba(10,61,84,.1);
  border-left:3px solid var(--teal);
  border-radius:var(--rl);
  padding:clamp(18px,2.8vw,30px) clamp(20px,3vw,36px);
  display:grid;grid-template-columns:clamp(64px,9vw,106px) 1fr;
  gap:clamp(14px,2.5vw,26px);align-items:start;
  transition:transform .3s var(--ease),box-shadow .3s,border-left-color .25s;
}
.tl:hover{transform:translateX(7px);box-shadow:0 10px 32px rgba(10,61,84,.1);border-left-color:var(--gold)}
.tl-era{
  font-family:var(--f-d);font-style:italic;
  font-size:clamp(14px,1.6vw,18px);font-weight:600;
  color:var(--teal-dim);line-height:1.2;padding-top:2px;
  transition:color .25s;
}
.tl:hover .tl-era{color:var(--gold)}
.tl h3{font-size:clamp(14px,1.5vw,17px);font-weight:700;color:var(--ink);margin-bottom:6px}
.tl p{font-size:13px;line-height:1.72;color:var(--ocean);opacity:.78}

/* ═══════════════════════════════════
   PRODUCT TABLES
═══════════════════════════════════ */
.table-wrap{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(13,207,232,.1);
  border-radius:var(--rl);
  padding:6px;overflow-x:auto;
}
.table-wrap-lt{
  background:#fff;border:1px solid rgba(10,61,84,.1);
  border-radius:var(--rl);padding:6px;overflow-x:auto;
}
.ptable{width:100%;border-collapse:collapse;min-width:360px}
.ptable th,.ptable td{
  padding:clamp(10px,1.4vw,15px) clamp(14px,2vw,24px);
  border-bottom:1px solid rgba(13,207,232,.07);
  text-align:left;font-size:clamp(12px,1.3vw,15px);
}
.ptable thead th{
  background:rgba(13,207,232,.06);
  color:var(--teal);
  font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:.18em;
}
.ptable tbody tr{
  transition:background .15s,transform .2s;
  cursor:default;
}
.ptable tbody tr:last-child td{border-bottom:none}
.ptable tbody tr:hover{background:rgba(13,207,232,.06)}
.ptable td:first-child{
  font-weight:800;color:var(--teal);
  font-family:var(--f-d);font-size:clamp(13px,1.4vw,17px);
  font-variation-settings:"opsz" 20;
}
/* Light table */
.ptable-lt th,.ptable-lt td{border-color:rgba(10,61,84,.08);color:var(--ink)}
.ptable-lt thead th{background:rgba(10,61,84,.05);color:var(--ocean)}
.ptable-lt tbody tr:hover{background:rgba(10,61,84,.04)}
.ptable-lt td:first-child{color:var(--ocean)}

/* ═══════════════════════════════════
   CONTACT
═══════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:16px}
.card{
  background:#fff;border:1px solid rgba(10,61,84,.1);
  border-radius:var(--rx);
  padding:clamp(28px,4vw,48px) clamp(22px,3.5vw,42px);
}
.card h3{
  font-family:var(--f-d);
  font-size:clamp(20px,2.6vw,32px);font-weight:700;
  color:var(--ink);margin-bottom:16px;letter-spacing:-.02em;
}
.card p{font-size:13px;line-height:1.75;color:var(--ocean);opacity:.8}
.card a{color:var(--teal-dim);font-weight:600;transition:color .2s}
.card a:hover{color:var(--teal)}
.info-row{padding-top:18px;border-top:1px solid rgba(10,61,84,.08)}
.info-row strong{
  display:block;margin-bottom:4px;
  font-size:9px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal-dim);
}
.wa-btn{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;padding:10px 20px;border-radius:999px;
  background:#25D366;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,transform .2s var(--ease);
}
.wa-btn:hover{background:#1fba58;transform:translateY(-2px);color:#fff}

/* Floating label form */
.f-group{position:relative}
.f-group label{
  position:absolute;top:50%;left:16px;
  transform:translateY(-50%);
  font-size:12px;font-weight:600;color:rgba(10,61,84,.5);
  transition:top .22s var(--ease),font-size .22s,color .22s,font-weight .22s;
  pointer-events:none;letter-spacing:.02em;
}
.f-group.is-textarea label{top:20px;transform:none}
.f-group input:focus ~ label,
.f-group input:not(:placeholder-shown) ~ label,
.f-group textarea:focus ~ label,
.f-group textarea:not(:placeholder-shown) ~ label{
  top:10px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-dim);
}
.f-group input,.f-group textarea{
  width:100%;border:1.5px solid rgba(10,61,84,.15);
  border-radius:var(--r);
  padding:22px 16px 8px;
  font-family:var(--f-b);font-size:14px;color:var(--ink);
  background:rgba(10,61,84,.03);
  transition:border-color .2s,box-shadow .2s,background .2s;
  outline:none;
}
.f-group input::placeholder,.f-group textarea::placeholder{color:transparent}
.f-group input:focus,.f-group textarea:focus{
  border-color:var(--teal-dim);background:#fff;
  box-shadow:0 0 0 4px rgba(13,207,232,.09);
}
.f-group textarea{min-height:130px;resize:vertical;padding-top:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.btn-form{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:999px;
  background:var(--teal);color:var(--bg);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:background .22s,transform .22s var(--ease),box-shadow .22s;
  border:none;
}
.btn-form:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,207,232,.3)}
/* Form success state */
.form-success{
  display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;
  padding:40px 20px;text-align:center;
}
.form-success.show{display:flex}
.success-check{
  width:56px;height:56px;border-radius:50%;
  background:rgba(13,207,232,.12);border:2px solid var(--teal);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.form-success h4{
  font-family:var(--f-d);font-size:22px;font-weight:700;
  color:var(--ink);
}
.form-success p{font-size:13px;color:var(--ocean);opacity:.7}

/* ═══════════════════════════════════
   CTA STRIP
═══════════════════════════════════ */
.cta-strip{
  background:var(--navy);
  padding:clamp(56px,9vw,120px) 0;
  position:relative;overflow:hidden;
}
.cta-strip::before{
  content:"";position:absolute;
  right:-10%;top:50%;transform:translateY(-50%);
  width:60%;height:120%;
  background:radial-gradient(ellipse at center,rgba(13,207,232,.08) 0%,transparent 65%);
  pointer-events:none;
}
.cta-inner{
  display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;
  gap:clamp(28px,4vw,56px);position:relative;
}
.cta-text h2{
  font-family:var(--f-d);
  font-size:clamp(32px,5.5vw,76px);
  font-weight:700;line-height:.95;letter-spacing:-.035em;
  color:#fff;margin-bottom:14px;
}
.cta-text h2 em{
  font-style:italic;font-weight:300;
  font-variation-settings:"opsz" 56,"wght" 270;
  color:rgba(255,255,255,.45);
}
.cta-text p{font-size:clamp(13px,1.4vw,16px);line-height:1.72;color:var(--tx2);max-width:440px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.btn-white{
  display:inline-flex;align-items:center;gap:9px;
  height:56px;padding:0 28px;border-radius:999px;
  background:#fff;color:var(--navy);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,transform .22s var(--ease);
}
.btn-white:hover{background:var(--cream);transform:translateY(-3px)}
.btn-ghost-w{
  display:inline-flex;align-items:center;gap:9px;
  height:56px;padding:0 28px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,border-color .2s,transform .22s var(--ease);
}
.btn-ghost-w:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);transform:translateY(-3px)}

/* ═══════════════════════════════════
   PAGE HERO
═══════════════════════════════════ */
.page-hero{
  background:var(--bg);
  padding:clamp(100px,14vw,164px) 0 clamp(56px,8vw,100px);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 55% at 75% 50%,rgba(13,207,232,.12) 0%,transparent 68%);
  pointer-events:none;
}
/* Grid on page hero */
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(13,207,232,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,207,232,.02) 1px,transparent 1px);
  background-size:80px 80px;
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .breadcrumb{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  color:var(--tx3);margin-bottom:16px;text-transform:uppercase;
}
.page-hero h1{
  font-family:var(--f-d);
  font-size:clamp(48px,9vw,130px);
  font-weight:700;line-height:.93;letter-spacing:-.035em;
  color:#fff;margin-bottom:20px;
}
.page-hero h1 em{
  display:block;font-style:italic;font-weight:300;
  font-variation-settings:"opsz" 80,"wght" 270;
  color:rgba(255,255,255,.5);padding-left:.06em;
}
.page-hero p{
  font-size:clamp(14px,1.5vw,18px);line-height:1.72;
  color:var(--tx2);max-width:580px;
}

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
.site-footer{
  background:var(--bg);
  border-top:1px solid rgba(13,207,232,.08);
  padding:clamp(24px,4vw,40px) 0;
}
.footer-inner{
  display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:14px;
}
.footer-brand{
  font-family:var(--f-d);font-style:italic;
  font-size:18px;color:var(--tx3);
}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3);transition:color .2s;
}
.footer-links a:hover{color:var(--teal)}
.footer-copy{font-size:10px;color:rgba(255,255,255,.18);letter-spacing:.08em}

/* ═══════════════════════════════════
   STICKY MOBILE CTA
═══════════════════════════════════ */
.mob-cta{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:400;
  padding:12px 16px;
  background:rgba(3,12,16,.95);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(13,207,232,.12);
  transform:translateY(100%);
  transition:transform .4s var(--ease);
}
.mob-cta.show{transform:translateY(0)}
.mob-cta-inner{
  display:flex;gap:10px;align-items:center;justify-content:center;
}
.mob-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  background:var(--teal);color:var(--bg);
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  flex:1;justify-content:center;
}
.mob-cta-btn-wa{background:#25D366;color:#fff}

/* ═══════════════════════════════════
   REVEAL STATES
═══════════════════════════════════ */
.rv{opacity:0;transform:translateY(36px)}
.rv-l{opacity:0;transform:translateX(-32px)}
.rv-s{opacity:0;transform:scale(.93) translateY(18px)}

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media(max-width:1024px){
  .bento{grid-template-columns:1fr 1fr}
  .bc-1,.bc-2,.bc-3,.bc-4,.bc-5,.bc-6{grid-column:span 2}
  .bc-1,.bc-2{grid-column:span 1}
}
@media(max-width:860px){
  .pillars{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .main-nav a:not(.nav-cta){display:none}
  .burger{display:flex}
  body{cursor:auto}
  .cursor{display:none}
  a,button{cursor:pointer}
  .mob-cta{display:block}
  .hero-scroll{display:none}
  .diag-bot::before,.diag-top::after{height:clamp(30px,5vw,56px)}
}
@media(max-width:640px){
  .bento{grid-template-columns:1fr}
  .bc-1,.bc-2,.bc-3,.bc-4,.bc-5,.bc-6{grid-column:span 1}
  .form-grid{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr}
  .hero h1{font-size:clamp(36px,11vw,68px)}
  .hero-row{flex-direction:column;align-items:flex-start}
  .cta-inner{flex-direction:column;align-items:flex-start}
}

/* ═══════════════════════════════════
   HISTORIA — infra stats strip
═══════════════════════════════════ */
.hist-infra{
  display:flex;align-items:center;
  justify-content:center;flex-wrap:wrap;
  gap:clamp(12px,2.5vw,32px);
  padding:clamp(24px,3.5vw,40px) clamp(20px,3vw,36px);
  background:rgba(13,207,232,.05);
  border:1px solid rgba(13,207,232,.14);
  border-radius:var(--rx);
}
.hist-stat{
  display:flex;flex-direction:column;
  align-items:center;gap:6px;text-align:center;
  flex:1;min-width:100px;
}
.hist-n{
  font-family:var(--f-d);
  font-size:clamp(32px,4.5vw,58px);
  font-weight:700;line-height:.95;letter-spacing:-.035em;
  color:var(--teal);font-variation-settings:"opsz" 52;
}
.hist-l{
  font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx3);
}
.hist-div{
  width:1px;height:clamp(32px,4vw,52px);
  background:rgba(13,207,232,.18);flex-shrink:0;
}
@media(max-width:640px){
  .hist-infra{gap:clamp(10px,3vw,20px)}
  .hist-div{width:clamp(24px,6vw,36px);height:1px}
}

/* ═══════════════════════════════════
   QUICK FORM (contacto inline)
═══════════════════════════════════ */
.quick-form{ display:flex; flex-direction:column; gap:10px }
.quick-row{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.quick-form input{
  width:100%; border:1.5px solid rgba(10,61,84,.16);
  border-radius:var(--r); padding:12px 14px;
  font-family:var(--f-b); font-size:13px; color:var(--ink);
  background:rgba(10,61,84,.04);
  transition:border-color .2s, box-shadow .2s, background .2s;
  outline:none;
}
.quick-form input::placeholder{ color:var(--faint) }
.quick-form input:focus{
  border-color:var(--teal-dim); background:#fff;
  box-shadow:0 0 0 3px rgba(13,207,232,.09);
}
.quick-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px;
  background:var(--teal); color:var(--bg);
  font-family:var(--f-b); font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  border:none; cursor:pointer; align-self:flex-start;
  transition:background .2s, transform .2s var(--ease);
}
.quick-btn:hover{ background:var(--ocean); transform:translateY(-2px) }
.quick-msg{
  font-size:12px; min-height:16px;
  color:var(--teal-dim); font-weight:600;
}
@media(max-width:480px){
  .quick-row{ grid-template-columns:1fr }
}