:root{
  --bg:color-mix(in srgb, #ffffff 94%, var(--accent) 6%);
  --text:#111111;
  --muted:#475569;
  --white:#ffffff;
  --emerald:#2dd4bf;
  --card:#ffffff;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.row{display:flex;gap:24px}
.header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));backdrop-filter: blur(6px);border-bottom:1px solid var(--border)}
.header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:36px;height:36px;border-radius:8px;object-fit:cover;box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text strong{font-weight:800}
.logo-text .sub{color:var(--muted);font-size:12px}
.nav{display:flex;gap:18px}
.nav a{color:var(--text);text-decoration:none;font-weight:600;opacity:.8}
.nav a:hover{opacity:1}
.hero{padding:72px 0;border-bottom:1px solid var(--border)}
.badge{display:inline-flex;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:6px 10px;margin-bottom:12px}
.hero h1{font-size:clamp(28px,4vw,46px);margin:.4em 0; letter-spacing:-0.02em}
.hero p{max-width:720px;color:var(--muted);font-size:18px}
.buttons{display:flex;gap:12px;margin-top:18px;margin-bottom:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 14px;font-weight:700;text-decoration:none;border:1px solid var(--border)}
.btn-primary{background-image: linear-gradient(90deg,var(--accent),var(--accent2),var(--accent)); background-size:200% 100%; color:#fff; border-color:transparent}
.btn-ghost{border:1px solid var(--border);color:var(--text);background:transparent}
.section{padding:72px 0;border-bottom:1px solid var(--border)}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 960px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px; transition: transform .25s ease, box-shadow .25s ease}
.card:hover{transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.25)}
.card strong{display:block;margin-bottom:6px}
.kv{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);border-radius:16px;padding:18px;border:1px solid var(--border)}
.small{font-size:13px;color:var(--muted)}
.footer{padding:32px 0;color:var(--muted)}

/* hero media with logo overlay */
.hero-media{margin-top:28px;display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 900px){.hero-media{grid-template-columns:1fr}}
.shot{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--card)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;filter:saturate(1.05)}
.badge-logo{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(11,18,32,.65);backdrop-filter:blur(6px);border:1px solid var(--border)}
.badge-logo span{font-size:12px;color:var(--text);opacity:.9}
.badge-logo svg{width:18px;height:18px}

/* lists */
.list{margin:8px 0 0 0; padding-left:18px; color:var(--muted)}
.list li{margin:4px 0}

/* Security & Governance */
.pill{display:inline-flex;align-items:center;gap:8px;margin-left:10px;padding:6px 10px;border-radius:999px;font-size:12px;color:var(--text);background:linear-gradient(90deg,rgba(139,92,246,.18),rgba(34,211,238,.18));border:1px solid var(--border)}
.pill .dot{width:8px;height:8px;border-radius:999px;background:var(--accent2);box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.sec-list{margin:8px 0 0 0;padding-left:18px;color:var(--muted)}
.sec-list li{margin:4px 0}

/* brand‑tinted background fade */
@keyframes bgFade { from { opacity: 0; transform: translateY(-8px);} to { opacity: .18; transform: none;} }
body::after{
  content:""; position:fixed; inset:-10% -10% auto -10%; height:60vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 320px at 75% -5%, var(--accent), transparent 60%),
    radial-gradient(420px 220px at 10% -10%, var(--accent2), transparent 60%);
  opacity:0; animation: bgFade 1.2s ease-out .15s forwards;
}

/* Custom cursor */
body.mati-cursor-on{ cursor:none }
.mati-cursor{ position:fixed; left:0; top:0; width:28px; height:28px; transform:translate3d(var(--x, -100px), var(--y, -100px), 0) scale(var(--cs,1)); pointer-events:none; z-index:9999; transition: transform .06s linear, opacity .2s ease; opacity:.95; filter:drop-shadow(0 2px 6px rgba(0,0,0,.2)) }
.mati-cursor svg{ width:28px; height:28px; display:block }
@media (pointer:coarse){ body.mati-cursor-on{ cursor:auto } .mati-cursor{ display:none } }

/* Chat launcher and panel */
.chat-panel{position:fixed;right:22px;bottom:90px;width:min(480px,calc(100vw - 44px));display:none;flex-direction:column;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);box-shadow:0 18px 45px rgba(0,0,0,.45);overflow:hidden;z-index:70}
.chat-input{display:flex;gap:8px;padding:10px;background:#fff;}
.chat-input input{flex:1;border:1px solid var(--border);background:#ffffff;color:var(--text);border-radius:12px;padding:12px 14px}
.chat-input button{display:inline-grid;place-items:center;min-width:44px;border:1px solid #000;border-radius:12px;padding:10px 12px;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff}
.chat-panel.open{display:flex}
.chat-launcher{ position:fixed; right:22px; bottom:22px; z-index:60; width:64px; height:64px; padding:0; display:grid; place-items:center; border-radius:50%; background:#fff; border:2px solid #000 !important; box-shadow:0 10px 30px rgba(0,0,0,.25); cursor:pointer; transition: transform .2s ease, box-shadow .2s ease }
.chat-launcher svg{ width:34px; height:34px; display:block }
.chat-launcher.launcher-dock{transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 0 6px rgba(47,109,245,.15)}
.chat-bubble{ position:absolute; right:0; bottom:64px; background:#fff; color:#111; border:2px solid #000; border-radius:14px; padding:8px 10px; font-weight:800; box-shadow:0 8px 20px rgba(0,0,0,.15); white-space:nowrap; opacity:1; transform:translateY(0); pointer-events:none }
.chat-bubble::after{ content:""; position:absolute; right:14px; bottom:-6px; width:10px; height:10px; background:#fff; border-right:2px solid #000; border-bottom:2px solid #000; transform:rotate(45deg) }
.chat-launcher:hover + .chat-panel,
.chat-launcher:focus + .chat-panel,
.chat-panel:hover,
.chat-panel:focus-within,
.chat-panel.open{ display:flex }

/* Brand chip */
.brand-chip{position:fixed;left:22px;bottom:22px;z-index:65;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--border);backdrop-filter:blur(6px);font-size:12px}
.brand-chip .swatch{width:16px;height:16px;border-radius:999px;border:1px solid var(--border);background:var(--accent)}
.brand-chip button{border:1px solid var(--border);border-radius:10px;padding:6px 10px}

/* Black outlines for boxes */
.card,.kv,.shot,.badge,.badge-logo,.btn-ghost,.chat-panel,.brand-chip,.chat-input input,.chat-input button{ border:2px solid #000 !important; }

/* === Responsive/mobile tweaks === */
@media (max-width: 1200px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 900px){
  .container{padding:0 16px}
  .header .container{padding:12px 16px}
  .brand img{width:28px;height:28px}
  .logo-text .sub{font-size:11px}
  .hero{padding:48px 0}
  .section{padding:56px 0}
  .buttons{gap:10px}
  .buttons .btn{width:100%;justify-content:center}
  /* mobile nav drawer */
  .nav-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
  .nav{position:absolute;top:58px;right:16px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:none;flex-direction:column;gap:6px;box-shadow:0 12px 28px rgba(0,0,0,.15)}
  .nav.open{display:flex}
  .nav a{padding:8px 10px}
  /* chat sizing */
  .chat-launcher{width:56px;height:56px}
  .chat-panel{right:12px;bottom:80px;width:calc(100vw - 24px)}
  .chat-bubble{display:none}
  /* brand picker hidden on small screens */
  .brand-chip{display:none}
}
@media (max-width: 700px){ .hero-media{grid-template-columns:1fr;gap:8px} }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation: none !important; transition: none !important} }

:root{ --accent:#2f6df5; --accent2:#22d3ee; }