:root{
  --red:#E8341C;
  --orange:#F47A20;
  --amber:#F5B300;
  --cyan:#17B4E9;
  --blue:#1E4FE0;
  --green:#39C13C;
  --ink:#0E0E0E;
  --ink-soft:#54565C;
  --ink-faint:#8A8B8F;
  --bg:#FFFFFF;
  --bg-soft:#F6F7F9;
  --border:rgba(14,14,14,0.10);
  --logic:var(--blue);
  --logic-tint:#EAF0FE;
  --sales:var(--orange);
  --sales-tint:#FEF1E6;
  --font-display:'Bricolage Grotesque', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
::selection{background:var(--amber); color:var(--ink);}
.mono{font-family:var(--font-mono); letter-spacing:0.04em;}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}

.ribbon{height:4px; width:100%; display:flex;}
.ribbon span{flex:1;}

.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:8px 16px; border-radius:100px;
}
.chip .dot{width:6px; height:6px; border-radius:2px; background:var(--amber);}

/* ---------- SKIP LINK ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
  font-family:var(--font-mono); font-size:13px;
}
.skip-link:focus{left:0;}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.navlinks{display:flex; align-items:center; gap:34px;}
.navlinks a{
  font-family:var(--font-body);
  font-weight:500;
  font-size:14.5px;
  color:var(--ink-soft);
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.navlinks a:hover, .navlinks a[aria-current="page"]{color:var(--ink); border-color:var(--blue);}
.nav-cta{
  font-family:var(--font-body); font-weight:600; font-size:14px;
  background:var(--ink); padding:11px 20px; border-radius:100px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(14,14,14,0.18); border-color:transparent;}
/* Higher-specificity override — .navlinks a and .navlinks a[aria-current] were
   winning the cascade over .nav-cta's white text, leaving the button low-contrast. */
.navlinks a.nav-cta,
.navlinks a.nav-cta:hover,
.navlinks a.nav-cta[aria-current="page"]{
  color:#FFFFFF;
  border-bottom:none;
}
.brand-mark{display:flex; align-items:center; gap:6px;}
.brand-mark img{height:32px; display:block;}
.brand-mark .brand-text{
  font-family:var(--font-display); font-weight:700; font-size:16px;
  letter-spacing:-0.01em; color:var(--ink); white-space:nowrap;
}

.nav-toggle{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  background:#fff; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}
.mobile-menu{
  display:none; flex-direction:column; gap:2px;
  border-bottom:1px solid var(--border); background:#fff;
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.mobile-menu.open{max-height:400px;}
.mobile-menu a{
  padding:16px 40px; font-family:var(--font-body); font-weight:500; font-size:15px;
  color:var(--ink-soft); border-bottom:1px solid var(--border);
}
.mobile-menu a[aria-current="page"]{color:var(--blue);}
.mobile-menu a.nav-cta-mobile{color:var(--blue); font-weight:600;}

/* ---------- HOME HERO ---------- */
.hero{padding:96px 0 0; position:relative; overflow:hidden;}
.glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:0.32; z-index:0;}
.glow.g1{width:420px; height:420px; background:var(--blue); top:-160px; right:-100px;}
.glow.g2{width:340px; height:340px; background:var(--orange); top:120px; left:-140px;}
.glow.g3{width:260px; height:260px; background:var(--cyan); top:260px; right:220px; opacity:0.22;}
.hero-inner{position:relative; z-index:1;}

.hero-sq{position:absolute; border-radius:6px; opacity:0.95; z-index:1;}
.hero-inner .hero-sq.s1{width:14px; height:14px; background:var(--green); top:2px; right:100px;}
.hero-inner .hero-sq.s2{width:10px; height:10px; background:var(--green); top:80px; right:20px;}
.hero-inner .hero-sq.s3{width:12px; height:12px; background:var(--cyan); top:34px; left:-4px;}

h1.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(40px, 6vw, 68px);
  line-height:1.04;
  letter-spacing:-0.02em;
  max-width:820px;
  margin-top:26px;
}
h1.hero-title .hl{
  background:linear-gradient(92deg, var(--blue), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1.hero-title .hl2{
  background:linear-gradient(92deg, var(--orange), var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{max-width:560px; margin-top:24px; font-size:19px; color:var(--ink-soft);}
.hero-actions{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.btn-primary{
  font-family:var(--font-body); font-weight:600; font-size:15px;
  background:var(--ink); color:#fff; padding:14px 26px; border-radius:100px;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(14,14,14,0.22);}
.btn-secondary{
  font-family:var(--font-body); font-weight:600; font-size:15px;
  color:var(--ink); padding:14px 22px; border-radius:100px; border:1.5px solid var(--border);
  transition:border-color .18s ease, background .18s ease;
}
.btn-secondary:hover{border-color:var(--ink); background:var(--bg-soft);}

.hero-diagram{margin-top:64px; position:relative; z-index:1;}
.hero-diagram svg{display:block; width:100%; height:auto;}

.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-top:44px; position:relative; z-index:1;
}
.stat-cell{padding:24px 26px; border-right:1px solid var(--border);}
.stat-cell:last-child{border-right:none;}
.stat-cell .sq{width:8px; height:8px; border-radius:2px; margin-bottom:12px;}
.stat-cell .label{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:0.04em;}
.stat-cell .val{font-family:var(--font-display); font-weight:700; font-size:20px; margin-top:5px;}

/* ---------- INTERIOR PAGE HERO ---------- */
.page-hero{padding:64px 0 60px; position:relative; overflow:hidden; border-bottom:1px solid var(--border);}
.page-hero .glow{opacity:0.22;}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(32px, 4.4vw, 48px); margin-top:18px; max-width:700px;
}
.page-hero p{max-width:560px; margin-top:16px; font-size:17px; color:var(--ink-soft);}
.crumbs{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); letter-spacing:0.04em;}
.crumbs a{color:var(--ink-faint);}
.crumbs a:hover{color:var(--blue);}

/* ---------- SECTION SHELL ---------- */
section{padding:110px 0;}
.section-head{display:flex; align-items:center; gap:16px; margin-bottom:52px;}
.badge{
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; font-weight:500; color:#fff;
  flex-shrink:0;
}
.section-head h2{font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:-0.015em;}
.section-lead{max-width:640px; color:var(--ink-soft); font-size:17px; margin:-30px 0 48px;}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start;}
.about-grid p, .prose p{font-size:17.5px; color:var(--ink-soft); margin-bottom:19px; max-width:58ch;}
.about-grid p strong, .prose p strong{color:var(--ink); font-weight:600;}
.fact-box{border:1px solid var(--border); border-radius:16px; overflow:hidden;}
.fact-row{display:flex; justify-content:space-between; align-items:center; padding:19px 26px; border-bottom:1px solid var(--border);}
.fact-row:last-child{border-bottom:none;}
.fact-row .label{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); letter-spacing:0.03em;}
.fact-row .val{font-family:var(--font-display); font-weight:600; font-size:18px;}

.principle-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px;}
.principle{border:1px solid var(--border); border-radius:16px; padding:28px;}
.principle .num{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-bottom:14px; display:block;}
.principle h4{font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:8px;}
.principle p{color:var(--ink-soft); font-size:15px;}

/* ---------- VERTICALS ---------- */
.verticals{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.vcard{
  background:#fff; border:1px solid var(--border); border-radius:20px;
  padding:42px 42px 38px; position:relative;
  transition:transform .22s ease, box-shadow .22s ease;
}
.vcard:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(14,14,14,0.08);}
.vcard.logic{border-top:4px solid var(--logic);}
.vcard.sales{border-top:4px solid var(--sales);}
.vcard .veyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;}
.vcard.logic .veyebrow{color:var(--logic);}
.vcard.sales .veyebrow{color:var(--sales);}
.vcard h3{font-family:var(--font-display); font-weight:700; font-size:28px; margin:14px 0 16px; letter-spacing:-0.01em;}
.vcard p{color:var(--ink-soft); font-size:16px; margin-bottom:14px;}
.vcard .tags{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 28px;}
.vcard .tag{font-family:var(--font-mono); font-size:11px; letter-spacing:0.02em; padding:6px 12px; border-radius:100px;}
.vcard.logic .tag{background:var(--logic-tint); color:#12328F;}
.vcard.sales .tag{background:var(--sales-tint); color:#9C4A0F;}
.go{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding-bottom:2px; border-bottom:2px solid currentColor;
}
.vcard.logic .go{color:var(--logic);}
.vcard.sales .go{color:var(--sales);}
.go svg{width:13px; height:13px; flex-shrink:0;}
.vcard .servicelist{margin:18px 0 0; list-style:none;}
.vcard .servicelist li{
  font-size:15px; color:var(--ink-soft); padding:10px 0; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.vcard .servicelist li::before{content:''; width:6px; height:6px; border-radius:2px; flex-shrink:0;}
.vcard.logic .servicelist li::before{background:var(--logic);}
.vcard.sales .servicelist li::before{background:var(--sales);}

/* ---------- LEDGER / ACCOMPLISHMENTS ---------- */
table.ledger{width:100%; border-collapse:collapse;}
table.ledger th{
  text-align:left; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint);
  padding:12px 16px; border-bottom:1px solid var(--border);
}
table.ledger td{padding:19px 16px; border-bottom:1px solid var(--border); font-size:16px;}
table.ledger tbody tr{transition:background .15s ease;}
table.ledger tbody tr:hover{background:var(--bg-soft);}
table.ledger tr:last-child td{border-bottom:none;}
.vtag{font-family:var(--font-mono); font-size:11px; padding:5px 11px; display:inline-block; letter-spacing:0.02em; border-radius:100px;}
.vtag.logic{background:var(--logic-tint); color:#12328F;}
.vtag.sales{background:var(--sales-tint); color:#9C4A0F;}
.ledger-note{margin-top:22px; font-size:14px; color:var(--ink-faint); font-family:var(--font-mono);}

.milestone-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:64px;}
.milestone{border:1px solid var(--border); border-radius:16px; padding:26px;}
.milestone .sq{width:10px; height:10px; border-radius:3px; margin-bottom:16px;}
.milestone .big{font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-0.01em;}
.milestone .cap{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-top:6px; letter-spacing:0.02em;}

/* ---------- TEAM ---------- */
.team-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.tcard{
  border:1px solid var(--border); border-radius:20px; padding:34px; background:#fff;
  transition:transform .22s ease, box-shadow .22s ease;
}
.tcard:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(14,14,14,0.08);}
.tcard .initial{
  width:50px; height:50px; border-radius:13px; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:16px; margin-bottom:20px;
}
.tcard h4{font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:6px; letter-spacing:-0.01em;}
.tcard .role{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); letter-spacing:0.02em; line-height:1.8;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;}
.contact-card{border:1px solid var(--border); border-radius:20px; padding:36px; background:var(--bg-soft);}
.contact-card h4{font-family:var(--font-display); font-weight:700; font-size:19px; margin-bottom:18px;}
.contact-row{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--border);}
.contact-row:first-of-type{border-top:none;}
.contact-row .sq{width:9px; height:9px; border-radius:3px; margin-top:6px; flex-shrink:0;}
.contact-row .k{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:0.03em; margin-bottom:3px;}
.contact-row .v{font-size:15.5px; color:var(--ink);}
.contact-row a.v:hover{color:var(--blue);}
.map-wrap{margin-top:24px; border-radius:16px; overflow:hidden; border:1px solid var(--border); height:220px;}
.map-wrap iframe{width:100%; height:100%; border:0; display:block;}

form.contact-form{display:grid; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.contact-form label{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:0.04em; display:block; margin-bottom:8px; text-transform:uppercase;}
.contact-form input, .contact-form textarea{
  width:100%; border:1px solid var(--border); border-radius:12px; padding:13px 16px;
  font-family:var(--font-body); font-size:15px; color:var(--ink); background:#fff;
  transition:border-color .18s ease;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--blue);}
.contact-form textarea{resize:vertical; min-height:120px;}
.contact-form button{
  justify-self:start; border:none; cursor:pointer; margin-top:6px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  background:var(--ink); color:#fff; padding:14px 28px; border-radius:100px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.contact-form button:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(14,14,14,0.22);}
.form-note{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-top:4px;}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:var(--ink); color:#fff; border-radius:24px;
  padding:56px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h3{font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-0.01em; max-width:420px;}
.cta-band .btn-primary{background:#fff; color:var(--ink);}
.cta-band .btn-primary:hover{box-shadow:0 10px 26px rgba(0,0,0,0.35);}

/* ---------- FOOTER ---------- */
footer{background:var(--bg-soft); border-top:1px solid var(--border);}
footer .wrap{padding:76px 40px 0;}
.foot-top{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid var(--border);}
footer img.fmark{height:32px; margin-bottom:16px;}
footer .faddr{font-family:var(--font-body); font-size:14.5px; color:var(--ink-soft); line-height:1.9;}
footer h5{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px;}
footer .flink{display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14.5px; color:var(--ink-soft); margin-bottom:12px; transition:color .15s ease;}
footer .flink:hover{color:var(--blue);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding:22px 0 28px; font-family:var(--font-body); font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; gap:10px;}
.foot-bottom a{color:var(--ink-faint); transition:color .15s ease;}
.foot-bottom a:hover{color:var(--blue);}
.icon-row{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.icon-row .flink{margin-bottom:0;}
.icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; flex-shrink:0;
  border:1px solid var(--border); color:var(--ink-soft);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.icon-link svg{width:14px; height:14px;}
.icon-link:hover{border-color:var(--blue); color:var(--blue);}
.icon-link.whatsapp{color:#25D366; border-color:rgba(37,211,102,0.35);}
.icon-link.whatsapp:hover{background:rgba(37,211,102,0.1); border-color:#25D366;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (max-width:900px){
  .principle-grid{grid-template-columns:1fr 1fr;}
  .milestone-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .about-grid, .verticals, .team-grid, .foot-top, .stat-strip, .contact-grid, .form-row{grid-template-columns:1fr;}
  .stat-cell{border-right:none; border-bottom:1px solid var(--border);}
  .wrap{padding:0 20px;}
  .navlinks{display:none;}
  .nav-toggle{display:flex;}
  .mobile-menu{display:flex;}
  .glow{display:none;}
  .cta-band{padding:36px;}
  section{padding:76px 0;}
}
@media (max-width:600px){
  .principle-grid, .milestone-grid{grid-template-columns:1fr;}
}