/* ============================================================
   AguTéc — Core site styles (redesign)
   Load order: tokens.css → agutec.css → [blog.css]
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin:0; font-family:var(--font-sans); color:var(--fg); background:var(--surface);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
::selection { background: color-mix(in srgb, var(--agutec-blue) 22%, transparent); }
:focus-visible { outline:none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

/* ---------- layout ---------- */
.wrap { max-width: var(--container); margin:0 auto; padding:0 32px; }
.narrow { max-width: 880px; margin:0 auto; padding:0 32px; }
.section { padding: 104px 0; position:relative; }
.section.tight { padding: 72px 0; }
.section.alt { background: var(--ink-50); }
.section.navy { background: var(--ink-900); color:#fff; }
.divider { height:1px; background:var(--border); border:0; margin:0; }

/* ---------- type helpers ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:10px;
  font:700 12px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--agutec-blue); }
.eyebrow::before { content:""; width:18px; height:1.5px; background:currentColor; opacity:.7; }
.eyebrow .idx { font-weight:700; opacity:.55; }
.navy .eyebrow, .on-dark .eyebrow { color:var(--electric-blue); }

.kicker { font:700 12px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); }

h1,h2,h3,h4 { margin:0; letter-spacing:var(--tracking-tight); color:var(--fg); }
.display { font:var(--w-black) clamp(2.6rem,1.7rem+3vw,4.1rem)/1.03 var(--font-sans); letter-spacing:-.03em; }
.h1 { font:var(--w-black) clamp(2.1rem,1.5rem+2vw,3.2rem)/1.07 var(--font-sans); letter-spacing:-.028em; }
.h2 { font:var(--w-black) clamp(1.9rem,1.4rem+1.5vw,2.7rem)/1.12 var(--font-sans); letter-spacing:-.024em; }
.h3 { font:var(--w-bold) clamp(1.3rem,1.1rem+.6vw,1.6rem)/1.22 var(--font-sans); letter-spacing:-.018em; }
.lead { font:var(--text-body-lg); color:var(--fg-2); }
.navy .lead, .on-dark .lead { color:var(--ink-300); }

.sec-head { max-width: 660px; }
.sec-head.center { margin-inline:auto; text-align:center; }
.sec-head h2 { margin-top:18px; }
.sec-head p { margin:16px 0 0; font:var(--text-body-lg); color:var(--fg-2); }
.navy .sec-head p { color:var(--ink-300); }

/* accent bar (blue→sky) */
.accent-bar { height:3px; width:100%; background:linear-gradient(90deg,var(--agutec-blue),var(--circuit-sky)); border-radius:3px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:700 15px/1 var(--font-sans); border:none; border-radius:var(--radius-sm);
  padding:14px 22px; cursor:pointer; white-space:nowrap;
  transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base), transform var(--dur-fast), color var(--dur-base); }
.btn svg { width:17px; height:17px; }
.btn .arr { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn-primary { background:var(--agutec-blue); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--deep-blue); box-shadow:var(--shadow-md); }
.btn-primary:active { transform:translateY(1px); }
.btn-outline { background:transparent; color:var(--agutec-blue); box-shadow:inset 0 0 0 1.5px var(--ink-200); }
.btn-outline:hover { box-shadow:inset 0 0 0 1.5px var(--agutec-blue); background:var(--info-bg); }
.btn-ghost { background:transparent; color:var(--agutec-blue); padding:14px 8px; }
.btn-ghost:hover { color:var(--deep-blue); }
.btn-lg { padding:16px 28px; font-size:16px; }
/* on dark */
.on-hero .btn-outline, .navy .btn-outline, .on-dark .btn-outline { color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28); }
.on-hero .btn-outline:hover, .navy .btn-outline:hover, .on-dark .btn-outline:hover { background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); }
.btn-light { background:#fff; color:var(--ink-900); box-shadow:var(--shadow-sm); }
.btn-light:hover { background:var(--ink-100); }

/* ---------- corner-tick frame (technical/institute motif) ---------- */
.ticked { position:relative; }
.ticked::before, .ticked::after { content:""; position:absolute; width:9px; height:9px; pointer-events:none; }
.ticked::before { top:-1px; left:-1px; border-top:1.5px solid var(--agutec-blue); border-left:1.5px solid var(--agutec-blue); }
.ticked::after { bottom:-1px; right:-1px; border-bottom:1.5px solid var(--agutec-blue); border-right:1.5px solid var(--agutec-blue); }

/* ============================================================
   NAV
   ============================================================ */
.nav { position:fixed; top:0; left:0; right:0; z-index:60;
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base), box-shadow var(--dur-base); }
.nav-inner { display:flex; align-items:center; gap:30px; height:72px; max-width:var(--container); margin:0 auto; padding:0 32px; }
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height:30px; width:auto; }
.nav-logo .light-mark { display:none; }
.nav-links { display:flex; gap:4px; margin-left:6px; }
.nav-links a { font:700 14.5px/1 var(--font-sans); color:var(--ink-700); padding:9px 12px; border-radius:var(--radius-sm); position:relative; transition: color var(--dur-fast), background var(--dur-fast); }
.nav-links a:hover { color:var(--agutec-blue); background:var(--info-bg); }
.nav-links a.active { color:var(--agutec-blue); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.lang { display:inline-flex; align-items:center; border:1px solid var(--border-strong); border-radius:var(--radius-pill); overflow:hidden; font:700 12px/1 var(--font-mono); }
.lang a { border:none; background:transparent; color:var(--fg-3); padding:7px 11px; cursor:pointer; letter-spacing:.04em; text-decoration:none; transition: background var(--dur-fast), color var(--dur-fast); }
.lang a.on { background:var(--agutec-blue); color:#fff; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; color:var(--ink-800); padding:6px; }
.nav-toggle svg { width:26px; height:26px; }

/* solid (default for light-hero pages, and dark-hero pages after scroll) */
.nav.solid { background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--border); }
/* transparent over dark hero */
.nav.on-hero { background:transparent; border-bottom:1px solid transparent; }
.nav.on-hero .nav-logo .color-mark { display:none; }
.nav.on-hero .nav-logo .light-mark { display:block; }
.nav.on-hero .nav-links a { color:rgba(255,255,255,.82); }
.nav.on-hero .nav-links a:hover { color:#fff; background:rgba(255,255,255,.10); }
.nav.on-hero .nav-links a.active { color:#fff; }
.nav.on-hero .lang { border-color:rgba(255,255,255,.24); }
.nav.on-hero .lang a { color:rgba(255,255,255,.7); }
.nav.on-hero .lang a.on { background:rgba(255,255,255,.16); color:#fff; }
.nav.on-hero .nav-toggle { color:#fff; }

.mobile-menu { display:none; position:fixed; top:72px; left:0; right:0; z-index:59; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg); }
.mobile-menu.open { display:block; }
.mobile-menu a { display:block; padding:15px 32px; font:700 15.5px/1 var(--font-sans); color:var(--ink-800); border-top:1px solid var(--border); }
.mobile-menu a:first-child { border-top:none; }
.mobile-menu .mobile-lang { display:inline-flex; margin:16px 32px 0; }
.mobile-menu .mobile-lang a { display:block; padding:7px 11px; font:700 12px/1 var(--font-mono); color:var(--fg-3); border-top:none; }
.mobile-menu .mobile-lang a.on { color:#fff; }
.mobile-cta { padding:18px 32px; }
.mobile-cta .btn { width:100%; }

/* spacer so light-hero content clears fixed nav */
.nav-spacer { height:72px; }

/* ============================================================
   HERO (shared dark)
   ============================================================ */
.hero { position:relative; background:var(--ink-900); color:#fff; overflow:hidden; isolation:isolate; }
.hero .hero-field { position:absolute; inset:0; z-index:0; }
.hero .hero-field canvas, .hero .hero-field svg { width:100%; height:100%; display:block; }
.hero::after { /* vignette for text legibility */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(120% 90% at 18% 30%, rgba(24,33,46,.10) 0%, rgba(24,33,46,.62) 55%, rgba(24,33,46,.92) 100%); }
.hero-inner { position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:172px 32px 116px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; font:700 12.5px/1 var(--font-mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--electric-blue); }
.hero-eyebrow::before { content:""; width:22px; height:1.5px; background:var(--electric-blue); }
.hero h1 { margin:24px 0 0; font:var(--w-black) clamp(2.6rem,1.6rem+3.2vw,4.4rem)/1.02 var(--font-sans); letter-spacing:-.035em; color:#fff; max-width:17ch; }
.hero h1 .hl { color:var(--electric-blue); }
.hero .hero-sub { margin:26px 0 0; font:var(--text-body-lg); color:var(--ink-300); max-width:52ch; }
.hero-actions { display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.hero-stats { display:flex; flex-wrap:wrap; gap:40px; margin-top:64px; padding-top:30px; border-top:1px solid rgba(255,255,255,.12); }
.hero-stat .n { font:var(--w-black) 2rem/1 var(--font-sans); letter-spacing:-.02em; color:#fff; }
.hero-stat .n span { color:var(--electric-blue); }
.hero-stat .l { margin-top:8px; font:400 13px/1.4 var(--font-mono); color:var(--ink-400); letter-spacing:.02em; }

/* hero direction switcher (homepage tool) */
.hero-switch { position:fixed; right:18px; bottom:18px; z-index:80; display:flex; align-items:center; gap:8px;
  background:rgba(24,33,46,.92); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-pill); padding:7px 8px 7px 14px; box-shadow:var(--shadow-lg); }
.hero-switch .lbl { font:700 10.5px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-300); }
.hero-switch button { border:none; cursor:pointer; width:30px; height:30px; border-radius:var(--radius-pill);
  background:transparent; color:var(--ink-300); font:700 13px/1 var(--font-sans); transition: background var(--dur-fast), color var(--dur-fast); }
.hero-switch button.on { background:var(--agutec-blue); color:#fff; }
.hero-switch button:hover:not(.on) { color:#fff; background:rgba(255,255,255,.1); }

/* console panel (hero direction C) */
.console { background:#0E151E; border:1px solid rgba(255,255,255,.10); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl); overflow:hidden; }
.console .c-bar { display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.console .c-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.console .c-title { margin-left:8px; font:500 12px/1 var(--font-mono); color:var(--ink-400); }
.console pre { margin:0; padding:20px 22px; font:var(--text-code); color:#cdd6e0; overflow-x:auto; }
.console .kw{color:#68BFFF;} .console .fn{color:#5EC8F2;} .console .str{color:#FFC72C;}
.console .cm{color:#7C8DA0;} .console .nm{color:#fff;} .console .ok{color:#5fd6a0;}

/* product panel (hero direction B) */
.glasspanel { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl); overflow:hidden; backdrop-filter:blur(6px); }
.glasspanel .gp-bar { display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.09); }
.gp-bar .gp-q { flex:1; background:rgba(255,255,255,.07); border-radius:var(--radius-pill); padding:8px 14px; font:500 12.5px/1 var(--font-mono); color:var(--ink-300); }
.glasspanel .gp-body { padding:14px; display:grid; gap:10px; }
.gp-row { display:flex; align-items:center; gap:13px; padding:13px 15px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); }
.gp-row .gp-ic { width:34px; height:34px; border-radius:8px; background:rgba(94,200,242,.16); display:flex; align-items:center; justify-content:center; flex:none; }
.gp-row .gp-ic svg { width:18px; height:18px; color:var(--electric-blue); }
.gp-row .t1 { font:700 13.5px/1.2 var(--font-sans); color:#fff; }
.gp-row .t2 { margin-top:4px; font:400 11.5px/1.2 var(--font-mono); color:var(--ink-400); }
.gp-row .score { margin-left:auto; font:700 12px/1 var(--font-mono); color:var(--electric-blue); }

/* ============================================================
   TRUST STRIP (tech stack)
   ============================================================ */
.trust { padding:36px 0; border-bottom:1px solid var(--border); background:var(--surface); }
.trust .t-lead { font:700 12px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); text-align:center; }
.stack-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 30px; margin-top:24px; }
.stack-chip { display:inline-flex; align-items:center; gap:9px; font:700 15px/1 var(--font-sans); color:var(--ink-500); letter-spacing:-.01em; transition: color var(--dur-fast); }
.stack-chip:hover { color:var(--ink-800); }
.stack-chip .d { width:7px; height:7px; border-radius:2px; background:var(--circuit-sky); }

/* ============================================================
   CAPABILITY GRID
   ============================================================ */
.cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:54px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.cap { background:var(--surface); padding:34px 30px 36px; position:relative; transition: background var(--dur-base); }
.cap:hover { background:var(--surface-2); }
.cap .cap-num { font:700 12px/1 var(--font-mono); letter-spacing:.1em; color:var(--ink-300); }
.cap .cap-ic { width:48px; height:48px; border-radius:var(--radius-md); background:var(--info-bg); display:flex; align-items:center; justify-content:center; margin:18px 0 20px; transition: background var(--dur-base); }
.cap .cap-ic svg { width:25px; height:25px; color:var(--agutec-blue); stroke-width:1.9; }
.cap:hover .cap-ic { background:var(--agutec-blue); }
.cap:hover .cap-ic svg { color:#fff; }
.cap h3 { font:700 19px/1.25 var(--font-sans); letter-spacing:-.012em; }
.cap p { margin:10px 0 0; font:400 14.5px/1.6 var(--font-sans); color:var(--fg-2); }
.cap .cap-tags { margin-top:16px; display:flex; flex-wrap:wrap; gap:6px; }
.cap .cap-tags span { font:500 11px/1 var(--font-mono); color:var(--fg-3); background:var(--surface-sunken); border-radius:var(--radius-xs); padding:5px 8px; }

/* generic card grid */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ============================================================
   CASE STUDY CARDS
   ============================================================ */
.case-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-xs);
  transition: box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base); }
.case-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--ink-200); }
.case-visual { position:relative; aspect-ratio:16/9; background:var(--ink-900); overflow:hidden; }
.case-visual .label { position:absolute; left:18px; top:16px; z-index:2; font:700 11px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--electric-blue); }
.case-visual .net { position:absolute; inset:0; }
.case-body { padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.case-cat { font:700 11px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--agutec-blue); }
.case-body h3 { margin:11px 0 0; font:700 20px/1.25 var(--font-sans); letter-spacing:-.014em; }
.case-body p { margin:10px 0 0; font:400 14.5px/1.6 var(--font-sans); color:var(--fg-2); }
.case-metrics { display:flex; gap:26px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.case-metrics .m .n { font:var(--w-black) 1.5rem/1 var(--font-sans); letter-spacing:-.02em; color:var(--ink-900); }
.case-metrics .m .l { margin-top:5px; font:400 11.5px/1.3 var(--font-mono); color:var(--fg-3); }
.case-more { margin-top:20px; font:700 13.5px/1 var(--font-sans); color:var(--agutec-blue); display:inline-flex; gap:7px; align-items:center; }

/* ============================================================
   PANAMA / EDITORIAL DARK SECTION
   ============================================================ */
.panama { background:var(--ink-900); color:#fff; position:relative; overflow:hidden; }
.panama .banner-bg { position:absolute; inset:0; opacity:.10; background:url("../assets/agutec-banner.svg") right center/cover no-repeat; z-index:0; }
.panama .wrap { position:relative; z-index:1; }
.panama-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.panama h2 { color:#fff; }
.panama .lead { color:var(--ink-300); }
.panama-points { margin:30px 0 0; display:grid; gap:18px; }
.panama-point { display:flex; gap:14px; align-items:flex-start; }
.panama-point .pp-ic { width:38px; height:38px; border-radius:var(--radius-md); background:rgba(94,200,242,.14); display:flex; align-items:center; justify-content:center; flex:none; }
.panama-point .pp-ic svg { width:19px; height:19px; color:var(--electric-blue); }
.panama-point h4 { font:700 16px/1.3 var(--font-sans); color:#fff; }
.panama-point p { margin:5px 0 0; font:400 14px/1.55 var(--font-sans); color:var(--ink-300); }
.bigstat { display:grid; gap:24px; }
.bigstat .bs { border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:26px 28px; background:rgba(255,255,255,.03); }
.bigstat .bs .n { font:var(--w-black) clamp(2.4rem,1.8rem+2vw,3.4rem)/1 var(--font-sans); letter-spacing:-.03em; color:var(--electric-blue); }
.bigstat .bs .l { margin-top:10px; font:400 14.5px/1.5 var(--font-sans); color:var(--ink-300); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { padding:96px 0; background:var(--ink-50); }
.cta-card { position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:72px 56px; text-align:center;
  background:linear-gradient(125deg,var(--ink-900),#0E2438 60%,var(--deep-blue)); box-shadow:var(--shadow-lg); }
.cta-card .banner-bg { position:absolute; inset:0; opacity:.12; background:url("../assets/agutec-banner.svg") center/cover no-repeat; }
.cta-card > * { position:relative; z-index:1; }
.cta-card h2 { color:#fff; }
.cta-card p { margin:16px auto 0; max-width:52ch; font:var(--text-body-lg); color:rgba(255,255,255,.82); }
.cta-actions { margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--ink-900); color:var(--ink-300); padding:72px 0 36px; }
.footer-top { display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:40px; }
.footer-brand img { height:30px; }
.footer-blurb { margin:20px 0 0; font:400 14px/1.65 var(--font-sans); color:var(--ink-400); max-width:30ch; }
.footer-badge { margin-top:20px; display:inline-flex; align-items:center; gap:8px; font:500 12px/1.3 var(--font-mono); color:var(--ink-300); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-pill); padding:8px 14px; }
.footer-badge .d { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(30,158,106,.2); }
.footer h4 { font:700 12px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-300); margin:0 0 18px; }
.footer ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer ul a { font:400 14px/1.3 var(--font-sans); color:var(--ink-400); transition:color var(--dur-fast); }
.footer ul a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); font:400 13px/1.5 var(--font-sans); color:var(--ink-500); }
.footer-bottom .soc { display:flex; gap:16px; }
.footer-bottom .soc a { color:var(--ink-400); transition:color var(--dur-fast); }
.footer-bottom .soc a:hover { color:#fff; }
.footer-bottom .soc svg { width:18px; height:18px; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity:0; transform:translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .panama-grid { grid-template-columns:1fr; gap:44px; }
  .cap-grid, .grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px) {
  .nav-links, .nav-right .lang, .nav-right .btn { display:none; }
  .nav-toggle { display:block; }
  .section { padding:72px 0; }
  .hero-inner { padding:140px 32px 84px; }
  .grid-2, .grid-3, .cap-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand { grid-column:1/-1; }
  .cta-card { padding:48px 28px; }
}
@media (max-width: 560px) {
  .wrap, .narrow { padding:0 20px; }
  .hero-inner { padding:128px 20px 72px; }
  .hero-stats { gap:24px; }
  .footer-top { grid-template-columns:1fr; }
}