/* ============================================================
   VEONA — Shared site chrome (nav, mega-menu, footer, buttons)
   Used by every page except the landing (which is self-contained).
   Load AFTER tokens.css. Pair with chrome.js.
   ============================================================ */

.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-6); }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.86); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line-soft); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .wm { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 0; }
.nav-links > a { font-size: var(--t-sm); font-weight: 500; color: var(--ink-700); padding: 8px 11px; border-radius: var(--r-sm); }
.nav-links > a:hover { background: var(--cloud); color: var(--teal); }
.nav-cta { display: flex; align-items: center; gap: var(--s-3); }
.menu-btn { display: none; background: none; border: none; cursor: pointer; }

/* ---------- MEGA NAV ---------- */
.nav-item { position: static; }
.nav-trigger { font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; color: var(--ink-700); background: none; border: none; cursor: pointer; padding: 8px 11px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 5px; }
.nav-trigger:hover, .nav-item.active .nav-trigger { background: var(--cloud); color: var(--teal); }
.nav-trigger .chev { transition: transform .18s var(--ease); opacity: .7; }
.nav-item.active .nav-trigger .chev { transform: rotate(180deg); }
.mega-host { position: absolute; left: 0; right: 0; top: 100%; display: none; z-index: 60; }
.mega-host.open { display: block; }
.mega { display: none; background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); box-shadow: var(--sh-3); }
.mega.show { display: block; animation: megaIn .18s var(--ease); }
@keyframes megaIn { from { transform: translateY(-6px); } to { transform: none; } }
.mega-inner { max-width: 1180px; margin: 0 auto; padding: var(--s-8) var(--s-6); }
.mega-cols { display: grid; gap: var(--s-6) var(--s-8); }
.mega-cols.c4 { grid-template-columns: repeat(4, 1fr); }
.mega-cols.c3 { grid-template-columns: repeat(3, 1fr); }
.mega-col h6 { font-family: var(--font-body); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; }
.mega-col h6 .gd { width: 9px; height: 9px; border-radius: 3px; }
.mega-col a { display: flex; align-items: center; gap: 9px; font-size: var(--t-sm); color: var(--ink-700); padding: 6px 0; line-height: 1.3; }
.mega-col a:hover { color: var(--teal); }
.mega-col a .dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.mega-feature { background: var(--cloud); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s-5); }
.mega-feature .eyebrow { display: block; margin-bottom: 6px; }
.mega-feature h4 { font-family: var(--font-display); font-size: var(--t-body); color: var(--ink); }
.mega-feature p { font-size: var(--t-sm); color: var(--slate); margin-top: 4px; }
.mega-feature .btn { margin-top: var(--s-4); }
.intg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.intg-tile { display: flex; align-items: center; gap: 10px; background: var(--cloud); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 10px 12px; }
.intg-tile .ii { width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.intg-tile b { font-size: var(--t-sm); color: var(--ink); font-weight: 600; display: block; }
.intg-tile span { font-family: var(--font-mono); font-size: 10px; color: var(--slate-400); }

/* ---------- FANCY DEMO BUTTON ---------- */
.btn-demo {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-sm); color: #fff;
  padding: 11px 20px; border-radius: var(--r-pill); border: none; cursor: pointer; overflow: hidden;
  background: linear-gradient(135deg, #FF8166 0%, #FF6B5C 45%, #F0503F 100%);
  box-shadow: 0 6px 18px rgba(255,107,92,0.35), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); white-space: nowrap;
}
.btn-demo::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-18deg); transition: left .55s var(--ease); }
.btn-demo:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(255,107,92,0.45), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-demo:hover::after { left: 130%; }
.btn-demo .arr { transition: transform .2s var(--ease); }
.btn-demo:hover .arr { transform: translateX(3px); }
.btn-demo.btn-lg { padding: 15px 28px; font-size: var(--t-body); }

/* ---------- SECTION PRIMITIVES ---------- */
section.band { padding: var(--s-20) 0; }
section.band.alt { background: var(--cloud); }
section.band.ink { background: var(--ink); color: #cfe0e0; }
.sec-head { max-width: 60ch; margin-bottom: var(--s-12); }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2 { font-size: var(--t-h1); }
.sec-head.ink h2 { color: #fff; }
.sec-head p { color: var(--slate); font-size: var(--t-lead); margin-top: var(--s-4); }
.sec-head.ink p { color: #9fbabb; }

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero { position: relative; padding: var(--s-16) 0 var(--s-12); overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(800px 380px at 80% -10%, var(--teal-050), transparent 60%), radial-gradient(620px 340px at 6% 6%, var(--indigo-050), transparent 55%); }
.page-hero .eyebrow { display:block; margin-bottom: var(--s-3); }
.page-hero h1 { font-size: var(--t-h1); letter-spacing: -0.03em; max-width: 20ch; }
.page-hero p { font-size: var(--t-lead); color: var(--ink-500); margin-top: var(--s-4); max-width: 56ch; }
.page-hero .hero-cta { display:flex; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; }

/* ---------- CTA BAND ---------- */
.cta-band { background: linear-gradient(120deg, var(--ink), var(--indigo-600)); border-radius: var(--r-xl); padding: var(--s-16) var(--s-12); text-align:center; color:#fff; }
.cta-band h2 { color:#fff; font-size: var(--t-h1); }
.cta-band p { color:#c5cdf0; font-size: var(--t-lead); margin: var(--s-4) auto var(--s-8); max-width: 52ch; }
.cta-band .cta-row { display:flex; gap: var(--s-3); justify-content:center; flex-wrap:wrap; }

/* ---------- FOOTER ---------- */
footer.site { background: var(--ink); color: #9fbabb; padding: var(--s-16) 0 var(--s-8); }
.foot-top { display:grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-12); padding-bottom: var(--s-10); border-bottom: 1px solid rgba(255,255,255,0.1); align-items:start; }
.foot-top p { font-size: var(--t-sm); color:#9fbabb; max-width: 38ch; margin-top: var(--s-4); }
.foot-news h5 { color:#fff; font-family: var(--font-display); font-size: var(--t-h3); margin-bottom: 6px; }
.foot-news .sub { font-size: var(--t-sm); color:#9fbabb; }
.news-form { display:flex; gap: 8px; margin-top: var(--s-4); max-width: 420px; }
.news-form input { flex:1; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); border-radius: var(--r-md); padding: 11px 14px; color:#fff; font-family: var(--font-body); font-size: var(--t-sm); }
.news-form input::placeholder { color:#5d7e80; }
.news-form input:focus { outline:none; border-color: var(--teal-300); }
.foot-social { display:flex; gap:10px; margin-top: var(--s-6); }
.foot-social a { width:38px; height:38px; border-radius:10px; background: rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; padding:0; transition: background .15s; }
.foot-social a:hover { background: var(--teal); }
.foot-grid { display:grid; grid-template-columns: repeat(6,1fr); gap: var(--s-6); padding: var(--s-12) 0; }
footer.site h5 { color:#fff; font-family: var(--font-display); font-size: var(--t-sm); margin-bottom: var(--s-4); letter-spacing: 0; }
footer.site .foot-grid a { display:block; color:#9fbabb; font-size: var(--t-sm); padding: 5px 0; }
footer.site a:hover { color:#fff; }
.foot-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top: var(--s-6); display:flex; justify-content:space-between; gap: var(--s-4) var(--s-8); flex-wrap:wrap; font-size: var(--t-xs); color:#5d7e80; align-items:center; }
.foot-legal { display:flex; gap: var(--s-5); flex-wrap:wrap; }
.foot-legal a { color:#5d7e80; }
.foot-legal a:hover { color:#fff; }

@media (max-width: 940px){
  .nav-links, .nav-cta .btn-secondary { display: none; }
  .menu-btn { display: block; }
  .foot-top { grid-template-columns: 1fr; gap: var(--s-8); }
  .foot-grid { grid-template-columns: repeat(2,1fr); gap: var(--s-6) var(--s-4); }
}

/* ---------- MOBILE MENU ---------- */
.mnav { display:none; position: fixed; top:68px; left:0; right:0; bottom:0; background:#fff; z-index:70; overflow-y:auto; padding: var(--s-2) 0 var(--s-16); }
.mnav.open { display:block; animation: mnavIn .2s var(--ease); }
@keyframes mnavIn { from { opacity:0; } to { opacity:1; } }
.macc { border-bottom:1px solid var(--line-soft); }
.macc-h { width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; font-family: var(--font-display); font-weight:700; font-size: var(--t-body); color: var(--ink); padding: 16px var(--s-6); cursor:pointer; }
.macc-h svg { transition: transform .2s var(--ease); opacity:.55; }
.macc.open .macc-h svg { transform: rotate(180deg); }
.macc-b { display:none; flex-direction:column; padding: 0 var(--s-6) var(--s-4); }
.macc.open .macc-b { display:flex; }
.macc-b a { padding: 9px 0; color: var(--ink-700); font-size: var(--t-sm); }
.macc-b a:hover { color: var(--teal); }
.mnav-cta { padding: var(--s-6); }
@media (min-width: 941px){ .mnav { display:none !important; } }