/* =====================================================================
   W3TecHub Meet AI — Design System
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --mai-primary:      #6C5CE7;
  --mai-primary-dark: #5A47D8;
  --mai-primary-light:#EFEBFF;
  --mai-ink:           #14112B;
  --mai-sidebar:       #1A1633;
  --mai-sidebar-hover: #2A2450;
  --mai-bg:            #F6F5FC;
  --mai-card:          #FFFFFF;
  --mai-border:        #EBE8F7;
  --mai-text:          #1F1B3A;
  --mai-text-muted:    #6E6A8A;
  --mai-success:       #16C784;
  --mai-success-bg:    #E6FAF3;
  --mai-danger:        #F0506E;
  --mai-danger-bg:     #FDEBEF;
  --mai-warning:       #F5A623;
  --mai-radius:        14px;
  --mai-radius-sm:     10px;
  --mai-shadow:        0 8px 24px rgba(20,17,43,.06);
  --mai-shadow-lg:     0 20px 48px rgba(20,17,43,.14);
}

*{ box-sizing:border-box; }
body{
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--mai-bg);
  color:var(--mai-text);
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; }
h1,h2,h3,h4,h5,h6{ font-weight:700; color:var(--mai-ink); margin:0; }
.text-muted{ color:var(--mai-text-muted) !important; }
.small{ font-size:.85rem; }

/* Buttons */
.btn{ border-radius:10px; font-weight:600; padding:.6rem 1.25rem; border:none; }
.btn-primary{ background:var(--mai-primary); border-color:var(--mai-primary); }
.btn-primary:hover,.btn-primary:focus{ background:var(--mai-primary-dark); border-color:var(--mai-primary-dark); }
.btn-outline-primary{ color:var(--mai-primary); border:1.5px solid var(--mai-primary); background:transparent; }
.btn-outline-primary:hover{ background:var(--mai-primary); color:#fff; }
.btn-light-pill{ background:#fff; border:1px solid var(--mai-border); border-radius:999px; padding:.5rem 1.1rem; font-weight:600; color:var(--mai-text); }
.btn-danger-soft{ background:var(--mai-danger); color:#fff; border-radius:10px; }

/* Top marketing nav */
.mai-topnav{ background:#fff; border-bottom:1px solid var(--mai-border); }
.mai-brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.25rem; color:var(--mai-ink); }
.mai-brand .mark{ width:42px; height:42px; border-radius:12px; background:var(--mai-primary); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; }
.mai-brand .tagline{ font-size:.72rem; color:var(--mai-text-muted); font-weight:500; }
.mai-topnav .nav-pill-group{ background:var(--mai-bg); border-radius:999px; padding:.3rem; display:inline-flex; gap:.2rem; }
.mai-topnav .nav-pill-group a{ padding:.45rem 1rem; border-radius:999px; font-weight:600; font-size:.88rem; color:var(--mai-text-muted); }
.mai-topnav .nav-pill-group a.active{ background:#fff; color:var(--mai-ink); box-shadow:var(--mai-shadow); }

/* Hero */
.mai-hero-eyebrow{ font-size:.8rem; font-weight:700; color:var(--mai-primary); letter-spacing:.02em; }
.mai-hero h1{ font-size:2.6rem; line-height:1.15; }
.mai-hero h1 .accent{ color:var(--mai-primary); }

/* Feature grid (top strip of icon cards) */
.mai-feature-card{ background:#fff; border:1px solid var(--mai-border); border-radius:var(--mai-radius); padding:1.1rem .9rem; text-align:center; height:100%; transition:.2s; }
.mai-feature-card:hover{ box-shadow:var(--mai-shadow); transform:translateY(-2px); }
.mai-feature-icon{ width:44px; height:44px; border-radius:12px; background:var(--mai-primary-light); color:var(--mai-primary); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin:0 auto .7rem; }
.mai-feature-card h6{ font-size:.88rem; margin-bottom:.2rem; }
.mai-feature-card p{ font-size:.76rem; color:var(--mai-text-muted); margin:0; }

/* AI Assistant dark card */
.mai-ai-card{ background:var(--mai-ink); border-radius:var(--mai-radius); padding:1.5rem; color:#fff; }
.mai-ai-card h5{ color:#fff; }
.mai-ai-bot{ width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--mai-primary),#9b8cff); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.mai-ai-item{ display:flex; align-items:flex-start; gap:.75rem; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mai-ai-item:last-child{ border-bottom:none; }
.mai-ai-item .ico{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.9rem; }
.mai-ai-item .ico.blue{ background:#1E3A5F; color:#5EA1E8; }
.mai-ai-item .ico.gold{ background:#3D3320; color:#F5C451; }
.mai-ai-item .ico.pink{ background:#3B2140; color:#E894F0; }
.mai-ai-item h6{ color:#fff; font-size:.85rem; margin-bottom:.1rem; }
.mai-ai-item p{ color:rgba(255,255,255,.55); font-size:.76rem; margin:0; }

/* Secure / Trusted list card */
.mai-trust-card{ background:var(--mai-primary-light); border-radius:var(--mai-radius); padding:1.5rem; }
.mai-trust-item{ display:flex; align-items:center; gap:.65rem; padding:.55rem 0; }
.mai-trust-item .ico{ width:30px; height:30px; border-radius:8px; background:#fff; color:var(--mai-primary); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }

/* Generic section card */
.mai-card{ background:#fff; border:1px solid var(--mai-border); border-radius:var(--mai-radius); padding:1.5rem; }
.mai-card-title{ font-size:1rem; font-weight:700; margin-bottom:1rem; }

/* Stat cards (dashboard) */
.mai-stat-card{ background:#fff; border:1px solid var(--mai-border); border-radius:var(--mai-radius); padding:1.1rem 1.25rem; }
.mai-stat-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:.6rem; }
.mai-stat-card h3{ font-size:1.6rem; margin-bottom:0; }
.mai-stat-card .label{ font-size:.78rem; color:var(--mai-text-muted); font-weight:600; }

/* Sidebar (app shell) */
.mai-shell{ display:flex; min-height:100vh; }
.mai-sidebar{ width:250px; background:var(--mai-sidebar); color:#fff; flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.mai-sidebar .mai-brand{ color:#fff; padding:1.25rem 1.25rem .5rem; }
.mai-sidebar .mai-brand .tagline{ color:rgba(255,255,255,.45); }
.mai-sidebar-nav{ padding:.5rem .9rem; flex-grow:1; }
.mai-sidebar-nav a{ display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem; border-radius:10px; color:rgba(255,255,255,.72); font-weight:600; font-size:.9rem; margin-bottom:.15rem; }
.mai-sidebar-nav a i{ width:18px; text-align:center; font-size:.95rem; }
.mai-sidebar-nav a:hover{ background:var(--mai-sidebar-hover); color:#fff; }
.mai-sidebar-nav a.active{ background:var(--mai-primary); color:#fff; }
.mai-sidebar-foot{ padding:1rem 1.25rem; border-top:1px solid rgba(255,255,255,.08); }
.mai-sidebar-foot .role-badge{ font-size:.7rem; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); padding:.2rem .6rem; border-radius:999px; }

.mai-main{ flex-grow:1; min-width:0; }
.mai-topbar{ background:#fff; border-bottom:1px solid var(--mai-border); padding:1rem 1.75rem; display:flex; align-items:center; justify-content:space-between; }
.mai-content{ padding:1.75rem; }

.mai-avatar{ width:38px; height:38px; border-radius:50%; background:var(--mai-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }

/* Meeting list rows */
.mai-meeting-row{ display:flex; align-items:center; gap:.9rem; padding:.7rem 0; border-bottom:1px solid var(--mai-border); }
.mai-meeting-row:last-child{ border-bottom:none; }
.mai-meeting-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mai-meeting-row h6{ font-size:.88rem; margin-bottom:.1rem; }
.mai-meeting-row .meta{ font-size:.76rem; color:var(--mai-text-muted); }

/* Status badges */
.mai-badge{ font-size:.72rem; font-weight:700; padding:.28rem .65rem; border-radius:999px; display:inline-block; }
.mai-badge.live{ background:var(--mai-danger-bg); color:var(--mai-danger); }
.mai-badge.scheduled{ background:var(--mai-primary-light); color:var(--mai-primary); }
.mai-badge.completed{ background:var(--mai-success-bg); color:var(--mai-success); }
.mai-badge.cancelled{ background:#F1F0F5; color:var(--mai-text-muted); }

/* Collaboration tools grid */
.mai-tool-tile{ background:#fff; border:1px solid var(--mai-border); border-radius:var(--mai-radius-sm); padding:1rem .75rem; text-align:center; }
.mai-tool-tile .ico{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 auto .5rem; font-size:1rem; }
.mai-tool-tile span{ font-size:.8rem; font-weight:600; }

/* Pricing cards */
.mai-price-card{ background:#fff; border:1px solid var(--mai-border); border-radius:var(--mai-radius); padding:1.5rem; height:100%; }
.mai-price-card.featured{ border:2px solid var(--mai-primary); box-shadow:var(--mai-shadow-lg); position:relative; }
.mai-price-card .price{ font-size:2.1rem; font-weight:800; color:var(--mai-ink); }
.mai-price-card .price small{ font-size:.9rem; font-weight:500; color:var(--mai-text-muted); }
.mai-price-card ul{ list-style:none; padding:0; margin:1rem 0; }
.mai-price-card ul li{ font-size:.85rem; padding:.35rem 0; color:var(--mai-text); }
.mai-price-card ul li i{ color:var(--mai-success); margin-right:.5rem; }

/* Integration tiles */
.mai-integration{ display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--mai-border); border-radius:var(--mai-radius-sm); padding:.8rem 1rem; }
.mai-integration .ico{ width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Meeting room */
.mai-room{ background:var(--mai-ink); min-height:100vh; }
.mai-room-frame{ width:100%; height:calc(100vh - 70px); border:none; }
.mai-room-topbar{ background:#100D22; color:#fff; padding:.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }

/* Forms */
.form-label{ font-weight:600; font-size:.86rem; }
.form-control,.form-select{ border-radius:10px; border:1px solid var(--mai-border); padding:.6rem .9rem; }
.form-control:focus,.form-select:focus{ border-color:var(--mai-primary); box-shadow:0 0 0 .2rem rgba(108,92,231,.12); }

@media (max-width: 991px){
  .mai-sidebar{ position:fixed; left:-260px; z-index:1050; transition:.25s; }
  .mai-sidebar.open{ left:0; }
  .mai-hero h1{ font-size:2rem; }
}