/* ==========================================================
   MIGO Azure Core (V13) — Fused CSS
   - Tokens + layout (Fluent-like)
   - Nav links (hover/active/focus)
   - Tooltips multi‑cloud
   ========================================================== */
:root{ --brand:#0078D4; --accent:#00B7C3; --bg:#ffffff; --bg2:#F5F7FA; --panel:#FFFFFF; --fg:#1B1B1B; --muted:#616161; --line:#E5E7EB; --shadow:0 8px 24px rgba(0,0,0,.08); --container:max(280px,min(1200px,92%)); --badge-h:48px; --trust-h:32px }
html[data-theme="dark"]{ --bg:#0b0f14; --bg2:#0f1620; --panel:#0F1A24; --fg:#F3F4F6; --muted:#B3B8BF; --line:#1f2a36; --shadow:0 8px 24px rgba(0,0,0,.45) }
html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; color:var(--fg); background:var(--bg)}
a{color:var(--brand)} a:hover{text-decoration:underline}
.container{ width:var(--container); margin:0 auto }
.section{ padding:3.2rem 0 } .section.alt{ background:var(--bg2) }

/* Hero */
.hero{ padding:4.2rem 0 2.6rem; background:radial-gradient(1000px 420px at 10% 10%, rgba(0,120,212,.08), transparent 60%), radial-gradient(700px 300px at 80% 0%, rgba(0,183,195,.06), transparent 60%) }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center }
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr } }
.display{ font-size:clamp(2rem,4.5vw,3rem); margin:.2rem 0 .5rem }
.lead{ color:var(--muted); max-width:70ch }
.btn-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem }
.store-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem }
.store-badge{ height:var(--badge-h); width:auto }

/* Nav */
.nav{ position:sticky; top:0; z-index:50; background:var(--panel) }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0 }
.brand{ color:var(--fg); text-decoration:none }
.logo{ height:28px } .logo-sm{ height:22px }
.nav__toggle{ background:#fff; border:1px solid var(--line); border-radius:.4rem; padding:.35rem .55rem; display:none }
.nav__toggle-bar{ width:18px; height:2px; background:var(--fg); display:block; position:relative }
.nav__toggle-bar::before,.nav__toggle-bar::after{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--fg) }
.nav__toggle-bar::before{ top:-6px } .nav__toggle-bar::after{ top:6px }
.nav__links{ display:flex; align-items:center; gap:1rem }
.nav__actions{ display:flex; gap:.6rem; align-items:center }
@media (max-width:980px){ .nav__toggle{ display:block } .nav__links{ position:absolute; right:4%; top:64px; background:var(--panel); border:1px solid var(--line); padding:.6rem; border-radius:.6rem; display:none; flex-direction:column } .nav__links.open{ display:flex } }

/* --- NAV LINK ENHANCEMENTS (V11 fused) --- */
.nav__links a{ color:var(--fg); font-weight:600; padding:.4rem .6rem; border-radius:.5rem; text-decoration:none; transition:color .18s ease, background .18s ease, box-shadow .18s ease }
.nav__links a:hover{ color:#fff; background:var(--brand); text-decoration:none }
.nav__links a:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }
.nav__links a.active{ color:#fff; background:var(--brand) }
html[data-theme="dark"] .nav__links a{ color:var(--fg) }
html[data-theme="dark"] .nav__links a:hover, html[data-theme="dark"] .nav__links a.active{ background:var(--brand); color:#fff }

/* Footer */
.footer{ background:var(--panel) }
.footer__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.2rem }
.brand-row{ display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem }
.link-col{ list-style:none; margin:0; padding:0 } .link-col li{ margin:.25rem 0 }

/* Cards / Table */
.card{ border:1px solid var(--line) }
.card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); transition:.2s }
.muted{ color:var(--muted) }
.table thead th{ background:var(--panel) }

/* Logos Trust */
.logo-row{ list-style:none; display:flex; flex-wrap:wrap; gap:1.2rem; margin:0; padding:0; align-items:center; justify-content:center }
.logo-row img{ height:var(--trust-h) }

/* FAQ */
.faq{ border:1px solid var(--line); border-radius:.6rem; padding:.7rem .9rem; background:var(--panel); margin:.6rem 0 }
.faq[open]{ box-shadow:var(--shadow) }

/* Reveal */
[data-animate]{ opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease }
[data-animate].in{ opacity:1; transform:none }

/* ==========================================================
   Tooltips (V12 fused)
   ========================================================== */
.tt{ position:relative; cursor:help; font-weight:600; color:var(--brand); text-decoration:underline dotted }
.tt:focus{ outline:none }
.tt:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }
.tt::after{ content: attr(data-tt); position:absolute; left:0; top:calc(100% + 8px); min-width:280px; max-width:520px; padding:.75rem .85rem; border-radius:.6rem; background:var(--panel); color:var(--fg); border:1px solid var(--line); box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; z-index:9999; white-space:normal }
.tt:hover::after, .tt:focus::after{ opacity:1; transform:translateY(0) }
/* Multi‑cloud text lines using \A */
.tt[data-tt-mc]::after{ content: attr(data-tt-title) '\A' attr(data-tt-mc); white-space:pre-line; font-weight:500 }