/* ============ Tokens — Dark Navy + Sky Blue + White Palette ============ */
:root{
  --bg:#0B1930;            /* Dark Navy */
  --surface:#122544;
  --surface2:#1A3358;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.18);
  --text:#F1F5F9;          /* Light Grey / White */
  --muted:#94A7C4;
  --accent:#38BDF8;        /* Sky Blue — CTAs, primary actions */
  --accent-soft:rgba(56,189,248,.16);
  --on-accent:#0B1930;     /* dark navy text on top of the sky-blue accent */
  --accent2:#7DD3FC;       /* lighter sky — status/live accents, secondary links */
  --accent2-soft:rgba(125,211,252,.14);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --maxw:1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Fraunces',serif; font-optical-sizing:auto;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* background dot-grid texture — reinforces the "control panel" world */
body{
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:26px 26px;
}

::selection{background:var(--accent); color:var(--on-accent);}


[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important;}
  .btn-primary::after, .grid .card, .dash-collage::before, .wa-float, .status-dot, .chip{animation:none !important;}
}

/* ============ Nav ============ */
#navbar{
  position:fixed; inset-inline:0; top:0; z-index:60;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
#navbar.scrolled{background:rgba(13,15,20,.85); backdrop-filter:blur(16px); border-color:var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-logo{height:38px; width:auto; display:block; transition:transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease;}
.brand:hover .brand-logo{transform:scale(1.04); filter:drop-shadow(0 0 12px rgba(56,189,248,.55));}
.footer-about .brand-logo{height:34px;}

.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{position:relative; font-size:14px; font-weight:500; color:var(--muted); transition:color .2s ease; padding-bottom:2px;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--accent); transition:width .25s ease;}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  position:relative; font-size:14px; font-weight:600; color:var(--accent); padding-bottom:2px;
}
.nav-cta::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--accent); transition:width .25s ease;}
.nav-cta:hover::after{width:100%;}

.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--text); border-radius:2px;}

.mobile-panel{
  position:fixed; inset:72px 0 0 0; background:var(--bg); z-index:55;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  padding:28px 24px; display:none; flex-direction:column; gap:4px;
}
.mobile-panel.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.mobile-panel a{padding:14px 4px; border-bottom:1px solid var(--border); font-size:16px; font-weight:500;}

@media (max-width:880px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .mobile-panel{display:flex;}
}

/* ============ Hero ============ */
.hero{position:relative; padding:150px 0 90px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:100px;
  border:1px solid var(--border-strong); font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--accent2); margin-bottom:22px;
}
.status-dot{width:7px; height:7px; border-radius:50%; background:var(--accent2); box-shadow:0 0 0 0 rgba(125,211,252,.6); animation:pulse 2.2s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(125,211,252,.55);}
  70%{box-shadow:0 0 0 8px rgba(125,211,252,0);}
  100%{box-shadow:0 0 0 0 rgba(125,211,252,0);}
}

.hero h1{font-size:clamp(34px,4.4vw,54px); line-height:1.08; font-weight:600; letter-spacing:-.02em; margin:0 0 20px;}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero p.lead{color:var(--muted); font-size:17px; line-height:1.6; max-width:520px; margin:0 0 32px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0;
  border-radius:100px; padding:13px 24px; font-weight:600; font-size:14.5px; font-family:inherit;
  transition:transform .15s ease, opacity .2s ease, background-color .2s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent); color:var(--on-accent); position:relative; overflow:hidden;}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary::after{
  content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); animation:btnShimmer 3.4s ease-in-out infinite;
}
@keyframes btnShimmer{
  0%{left:-60%;}
  35%{left:130%;}
  100%{left:130%;}
}
.btn-outline{background:transparent; color:var(--text); border:1px solid var(--border-strong);}
.btn-outline:hover{border-color:var(--accent2); color:var(--accent2);}
.btn-whatsapp{background:#1FAA5C; color:#fff;}
.btn-whatsapp:hover{transform:translateY(-2px);}

/* --- Signature element: assembling dashboard collage --- */
.dash-collage{position:relative; height:420px;}
.chip{
  position:absolute; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:16px 18px; box-shadow:0 24px 48px -20px rgba(0,0,0,.55);
  opacity:0; transform:translateY(28px) scale(.96);
  animation:chipIn .7s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes chipIn{to{opacity:1; transform:translateY(0) scale(1);}}

.chip-revenue{top:0; left:6%; width:230px; animation-delay:.15s;}
.chip-order{top:16%; right:0; width:210px; animation-delay:.4s;}
.chip-customer{bottom:14%; left:0; width:250px; animation-delay:.65s;}
.chip-status{bottom:0; right:8%; width:190px; animation-delay:.9s;}

.chip-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px;}
.chip-value{font-family:'Fraunces',serif; font-size:24px; font-weight:600;}
.chip-value.up{color:var(--accent2);}
.chip-sub{font-size:12px; color:var(--muted); margin-top:2px;}

.bars{display:flex; align-items:flex-end; gap:5px; height:36px; margin-top:10px;}
.bars i{flex:1; background:var(--accent); border-radius:3px 3px 0 0; opacity:.85; animation:growBar 1s cubic-bezier(.16,1,.3,1) forwards; transform-origin:bottom; transform:scaleY(0);}
.bars i:nth-child(1){height:40%; animation-delay:.4s;}
.bars i:nth-child(2){height:65%; animation-delay:.48s;}
.bars i:nth-child(3){height:50%; animation-delay:.56s;}
.bars i:nth-child(4){height:85%; animation-delay:.64s;}
.bars i:nth-child(5){height:100%; background:var(--accent2); animation-delay:.72s;}
@keyframes growBar{to{transform:scaleY(1);}}

.ticket-row{display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:7px 0; border-bottom:1px solid var(--border);}
.ticket-row:last-child{border-bottom:0; padding-bottom:0;}
.ticket-tag{font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:2px 7px; border-radius:5px; background:var(--accent2-soft); color:var(--accent2);}

.avatar-stack{display:flex; margin-bottom:10px;}
.avatar-stack span{width:26px; height:26px; border-radius:50%; border:2px solid var(--surface); margin-left:-8px; background:linear-gradient(135deg,var(--accent),var(--accent2));}
.avatar-stack span:first-child{margin-left:0;}

.chip-status .dot-row{display:flex; align-items:center; gap:8px;}
.dash-collage::before{
  content:''; position:absolute; inset:0; margin:auto; width:70%; height:70%;
  background:radial-gradient(circle, rgba(56,189,248,.22), transparent 70%); filter:blur(30px); z-index:-1;
  animation:blobFloat 8s ease-in-out infinite;
}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(18px,-14px) scale(1.08);}
}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; text-align:left;}
  .dash-collage{height:340px; margin-top:20px;}
  .chip-revenue{width:190px;} .chip-order{width:180px;} .chip-customer{width:210px;} .chip-status{width:170px;}
}
@media (max-width:520px){
  .dash-collage{height:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; position:static;}
  .chip{position:static; width:auto !important; animation-delay:0s !important;}
}

/* ============ Section shared ============ */
.section{padding:90px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; display:block;}
.section h2{font-size:clamp(26px,3vw,36px); font-weight:600; letter-spacing:-.01em; margin:0 0 14px;}
.section p.section-desc{color:var(--muted); font-size:15.5px; line-height:1.65; margin:0;}

/* ============ Filters ============ */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-pill{
  padding:9px 18px; border-radius:100px; border:1px solid var(--border-strong); background:transparent;
  color:var(--muted); font-size:13.5px; font-weight:500; cursor:pointer; font-family:inherit;
  transition:all .2s ease;
}
.filter-pill:hover{color:var(--text); border-color:var(--accent2); transform:translateY(-2px);}

.stat-item{padding:8px; border-radius:12px; transition:transform .25s ease, background .25s ease;}
.stat-item:hover{transform:translateY(-4px); background:var(--surface);}
.stat-item:hover .stat-num{color:var(--accent2);}
.stat-num{transition:color .25s ease;}
.filter-pill.active{background:var(--text); color:var(--bg); border-color:var(--text);}

/* ============ Product grid — "app window" cards ============ */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px;}
.grid .card{animation:cardFadeIn .6s cubic-bezier(.16,1,.3,1) backwards;}
.grid .card:nth-child(1){animation-delay:.04s;}
.grid .card:nth-child(2){animation-delay:.09s;}
.grid .card:nth-child(3){animation-delay:.14s;}
.grid .card:nth-child(4){animation-delay:.19s;}
.grid .card:nth-child(5){animation-delay:.24s;}
.grid .card:nth-child(6){animation-delay:.29s;}
.grid .card:nth-child(n+7){animation-delay:.34s;}
@keyframes cardFadeIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; cursor:pointer; transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .35s ease;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-6px); border-color:var(--accent); box-shadow:0 28px 56px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(56,189,248,.35);}
.win-bar{display:flex; align-items:center; justify-content:space-between; padding:11px 14px; background:var(--surface2); border-bottom:1px solid var(--border);}
.win-dots{display:flex; gap:6px;}
.win-dots i{width:9px; height:9px; border-radius:50%; display:block;}
.win-dots i:nth-child(1){background:#FF5F57;}
.win-dots i:nth-child(2){background:#FEBC2E;}
.win-dots i:nth-child(3){background:#28C840;}
.win-cat{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}

.card-cover{aspect-ratio:16/10; background:var(--surface2); position:relative; overflow:hidden;}
.card-cover img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.card:hover .card-cover img{transform:scale(1.06);}
.cover-placeholder{width:100%; height:100%; display:grid; place-items:center; font-family:'Fraunces',serif; font-size:15px; color:var(--muted); background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, rgba(255,255,255,.06) 12px 24px);}

.card-body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card-body h3{font-size:17.5px; font-weight:600; margin:0;}
.card-tag{color:var(--muted); font-size:13.5px; line-height:1.5; margin:0 0 6px; flex:1;}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
.card-price{font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--accent2);}
.card-link{font-size:13px; font-weight:600; display:flex; align-items:center; gap:5px; color:var(--text);}
.card-link i{transition:transform .2s ease;}
.card:hover .card-link i{transform:translateX(3px);}

.grid-empty{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted);}

/* ============ Product modal ============ */
.pmodal-overlay{position:fixed; inset:0; background:rgba(5,6,9,.75); backdrop-filter:blur(6px); z-index:100; display:none; align-items:flex-start; justify-content:center; padding:60px 20px; overflow-y:auto;}
.pmodal-overlay.open{display:flex;}
.pmodal-overlay.open .pmodal{animation:modalPopIn .35s cubic-bezier(.16,1,.3,1);}
@keyframes modalPopIn{from{opacity:0; transform:translateY(24px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}
.pmodal{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); max-width:760px; width:100%; margin-bottom:60px; overflow:hidden;}
.pmodal-close{position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center; z-index:2; transition:transform .2s ease, background .2s ease;}
.pmodal-close:hover{transform:scale(1.1) rotate(90deg); background:rgba(56,189,248,.4);}
.pmodal-cover{aspect-ratio:16/9; background:var(--surface2); position:relative;}
.pmodal-cover img{width:100%; height:100%; object-fit:cover;}
.pmodal-body{padding:32px;}
.pmodal-cat{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--accent2); text-transform:uppercase; letter-spacing:.06em;}
.pmodal-body h2{margin:8px 0 6px; font-size:24px;}
.pmodal-tagline{color:var(--muted); font-size:15px; margin-bottom:20px;}
.pmodal-desc{font-size:14.5px; line-height:1.7; color:#C7CBD1; margin-bottom:22px;}
.pmodal-features{list-style:none; padding:0; margin:0 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pmodal-features li{display:flex; gap:8px; font-size:13.5px; align-items:flex-start;}
.pmodal-features li::before{content:'✓'; color:var(--accent2); font-weight:700; flex-shrink:0;}
.pmodal-stack{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.stack-chip{font-family:'IBM Plex Mono',monospace; font-size:11.5px; padding:5px 10px; border-radius:6px; background:var(--surface2); border:1px solid var(--border); color:var(--muted); transition:border-color .2s ease, color .2s ease;}
.stack-chip:hover{border-color:var(--accent2); color:var(--accent2);}

.pmodal-plan-toggle{display:none; gap:8px; margin-bottom:18px;}
.pmodal-plan-toggle.show{display:flex;}
.plan-pill{
  flex:1; padding:11px 14px; border-radius:10px; border:1.5px solid var(--border-strong); background:var(--surface);
  color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; text-align:center;
  transition:all .2s ease;
}
.plan-pill:hover{border-color:var(--accent);}
.plan-pill.active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}

.pmodal-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.pmodal-price{font-family:'IBM Plex Mono',monospace; font-size:21px; font-weight:700; letter-spacing:-.01em; color:var(--accent2); margin-right:auto;}

@media (max-width:600px){
  .pmodal-features{grid-template-columns:1fr;}
  .pmodal-body{padding:24px 20px;}
}

/* ============ Trust / stats strip ============ */
.stats-strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:36px 0;}
.stats-inner{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; text-align:center;}
.stat-num{font-family:'Fraunces',serif; font-size:30px; font-weight:600; color:var(--text);}
.stat-label{font-size:12.5px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.05em;}

/* ============ CTA band ============ */
.cta-band{
  margin:0 auto; max-width:var(--maxw); border-radius:28px; padding:64px 44px;
  background:linear-gradient(135deg, var(--surface), var(--surface2));
  border:1px solid var(--border); text-align:center;
}
.cta-band h2{margin:0 0 12px;}
.cta-band p{color:var(--muted); max-width:480px; margin:0 auto 28px;}

/* ============ Contact / Email section ============ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.contact-info h2{margin:10px 0 14px;}
.contact-detail{display:flex; flex-direction:column; gap:2px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border);}
.contact-detail-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.contact-detail .mono{font-size:15px; color:var(--accent2);}

.contact-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; transition:border-color .3s ease;}
.contact-form:focus-within{border-color:var(--accent);}
.contact-form label{display:block; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:22px 0 9px;}
.contact-form label:first-of-type{margin-top:0;}
.contact-form input, .contact-form textarea{
  width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:10px;
  color:var(--text); padding:13px 15px; font-size:14.5px; font-family:inherit; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.contact-form textarea{resize:vertical; min-height:130px; line-height:1.6;}
.contact-form .field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.contact-form .btn-block{width:100%; margin-top:26px;}
.form-status{font-size:13.5px; margin-top:16px; display:none; padding:12px 14px; border-radius:9px; line-height:1.5;}
.form-status.show{display:block; animation:formStatusIn .3s ease;}
.form-status.success{background:var(--accent2-soft); color:var(--accent2);}
.form-status.error{background:rgba(255,107,107,.12); color:#FF9B9B;}
@keyframes formStatusIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}

@media (max-width:820px){
  .contact-grid{grid-template-columns:1fr; gap:32px;}
  .contact-form{padding:26px;}
  .contact-form .field-row{grid-template-columns:1fr; gap:0;}
}

/* ============ Footer ============ */
footer{border-top:1px solid var(--border); padding:56px 0 28px; margin-top:60px;}
.footer-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:36px;}
.footer-about p{color:var(--muted); font-size:13.5px; max-width:280px; line-height:1.6; margin-top:12px;}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 14px; font-weight:600;}
.footer-col a{display:block; font-size:14px; color:#C7CBD1; margin-bottom:10px; transition:color .2s ease, transform .2s ease, padding-left .2s ease;}
.footer-col a:hover{color:var(--accent2); padding-left:4px;}
.footer-col a:hover{color:var(--accent2);}
.social-row{display:flex; gap:10px; margin-top:16px;}
.social-row a{width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; font-size:13px; transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;}
.social-row a:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft); transform:translateY(-3px) scale(1.06);}
.footer-bottom{border-top:1px solid var(--border); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--muted);}

/* WhatsApp floating button */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:70; width:56px; height:56px; border-radius:50%;
  background:#1FAA5C; display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(31,170,92,.6);
  animation:floatY 3s ease-in-out infinite;
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{transform:scale(1.12); box-shadow:0 18px 38px -8px rgba(31,170,92,.8); animation-play-state:paused;}
@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}