/* HAMOU MATH — Unified Premium Design System v45
   Visual-only layer: preserves existing IDs, classes, routes and JavaScript contracts. */
:root{
  --hm45-bg:#f7f9fd;
  --hm45-surface:#ffffff;
  --hm45-surface-2:#f0f4fb;
  --hm45-text:#0f172a;
  --hm45-muted:#64748b;
  --hm45-line:rgba(15,23,42,.09);
  --hm45-blue:#2563eb;
  --hm45-cyan:#06b6d4;
  --hm45-violet:#7c3aed;
  --hm45-green:#059669;
  --hm45-radius:20px;
  --hm45-shadow:0 18px 55px rgba(15,23,42,.09);
  --hm45-shadow-soft:0 8px 30px rgba(15,23,42,.07);
}
html.dark{
  --hm45-bg:#070b14;
  --hm45-surface:#0d1422;
  --hm45-surface-2:#121c2d;
  --hm45-text:#f8fafc;
  --hm45-muted:#a7b3c7;
  --hm45-line:rgba(148,163,184,.15);
  --hm45-shadow:0 24px 75px rgba(0,0,0,.34);
  --hm45-shadow-soft:0 12px 35px rgba(0,0,0,.24);
}
html,body{background:var(--hm45-bg);color:var(--hm45-text)}
body{
  font-family:Inter,Tajawal,"Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif!important;
  background-image:
    radial-gradient(700px 420px at 0 -5%,rgba(37,99,235,.11),transparent 70%),
    radial-gradient(650px 420px at 100% 0,rgba(124,58,237,.09),transparent 68%)!important;
}
body:before{opacity:.45!important;background-size:36px 36px!important}

/* Header */
.topbar,.hm-top,header.top,.top{
  background:color-mix(in srgb,var(--hm45-surface) 84%,transparent)!important;
  border-color:var(--hm45-line)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  box-shadow:0 8px 34px rgba(15,23,42,.06)!important;
}
.navbar,.nav,#hamou-navbar .hm-wrap{min-height:68px}
.brand,.hm-logo{font-weight:950!important;letter-spacing:-.02em!important}
.brand-badge,.math-badge,.hm-logo-mark{
  background:linear-gradient(135deg,var(--hm45-blue),var(--hm45-violet) 58%,var(--hm45-cyan))!important;
  box-shadow:0 10px 28px rgba(37,99,235,.23)!important;
}
.nav-link,.nav-btn,.icon-btn,.nav a,.theme{
  color:var(--hm45-text)!important;
  border-color:var(--hm45-line)!important;
  border-radius:13px!important;
}
.nav-link:hover,.nav-btn:hover,.icon-btn:hover,.nav a:hover,.theme:hover{background:var(--hm45-surface-2)!important;color:var(--hm45-blue)!important}
.nav-menu,.dropdown,.menu,.mobile-menu,.mobile-submenu{
  background:var(--hm45-surface)!important;
  border:1px solid var(--hm45-line)!important;
  box-shadow:var(--hm45-shadow)!important;
  border-radius:18px!important;
}

/* Global surfaces */
.card,.panel,.section,.resource-card,.hero-card,.banner,.function-card,.dashboard-card,.tool-card,.feature-card,.auth-box,.growth-card,.growth-hero,.hm-card,.hm-stat,.preview-page{
  background:color-mix(in srgb,var(--hm45-surface) 94%,transparent)!important;
  color:var(--hm45-text)!important;
  border:1px solid var(--hm45-line)!important;
  border-radius:var(--hm45-radius)!important;
  box-shadow:var(--hm45-shadow-soft)!important;
  backdrop-filter:blur(14px)!important;
}
.card:hover,.function-card:hover,.resource-card:hover,.feature-card:hover{border-color:rgba(37,99,235,.24)!important}

/* Typography */
h1,h2,h3,h4{color:var(--hm45-text)!important;font-weight:900;letter-spacing:-.035em}
p,.muted,.small,.meta,.help-text{color:var(--hm45-muted)}
.hero h1,.hm-hero h1{font-size:clamp(34px,5.2vw,62px)!important;line-height:1.08!important}
.hero p,.hm-hero p{font-size:clamp(16px,1.5vw,19px)!important;line-height:1.9!important}
.eyebrow,.hm-eyebrow{border:1px solid rgba(37,99,235,.14)!important;border-radius:999px!important;padding:7px 12px!important;background:rgba(37,99,235,.07)!important;color:var(--hm45-blue)!important;font-weight:900!important}

/* Hero */
.hero{padding:70px 0 50px!important}
.hero-grid{gap:28px!important;align-items:stretch!important}
.hero-card,.hm-hero{overflow:hidden;position:relative}
.hero-card:after,.hm-hero:after{content:"∑";position:absolute;left:-24px;bottom:-70px;font-size:210px;font-weight:950;opacity:.045;line-height:1;pointer-events:none}
.hero-card{background:linear-gradient(145deg,var(--hm45-surface),color-mix(in srgb,var(--hm45-blue) 7%,var(--hm45-surface)))!important}
.hero-actions{gap:12px!important;margin-top:22px!important}

/* Buttons */
button,.btn,.primary-btn,.secondary-btn,.success-btn,.danger-btn,a.btn,.hm-btn{
  border-radius:14px!important;
  font-weight:800!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.primary-btn,.btn-primary,.hm-btn-primary,.success-btn{
  background:linear-gradient(135deg,var(--hm45-blue),var(--hm45-violet))!important;
  color:#fff!important;border:0!important;
  box-shadow:0 12px 28px rgba(37,99,235,.20)!important;
}
.secondary-btn{background:linear-gradient(135deg,#0891b2,var(--hm45-blue))!important;color:#fff!important;border:0!important}
button:hover,.btn:hover,.primary-btn:hover,.secondary-btn:hover,.success-btn:hover,.danger-btn:hover,a.btn:hover,.hm-btn:hover{transform:translateY(-2px)!important;filter:saturate(1.08)!important}

/* Inputs */
input,textarea,select,.input,.select{
  color:var(--hm45-text)!important;background:var(--hm45-surface)!important;
  border:1px solid var(--hm45-line)!important;border-radius:14px!important;
}
input::placeholder,textarea::placeholder{color:var(--hm45-muted)!important;opacity:.8}
input:focus,textarea:focus,select:focus,.input:focus,.select:focus{border-color:rgba(37,99,235,.55)!important;box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;outline:none!important}

/* Grids and feature cards */
.function-grid{gap:16px!important}
.function-card{min-height:165px!important;padding:21px!important}
.function-card span:first-child{font-size:32px!important}
.grid,.hm-grid{gap:18px!important}
.stats-card,.hm-stat{min-height:105px}
.stat-number,.hm-stat b{font-weight:950!important;color:var(--hm45-text)!important}

/* AI workspace accents */
.ai-card,.ai-panel,.assistant-card,.chat-card,.solution-card{border-radius:22px!important;border:1px solid var(--hm45-line)!important;box-shadow:var(--hm45-shadow)!important;background:linear-gradient(145deg,var(--hm45-surface),color-mix(in srgb,var(--hm45-blue) 5%,var(--hm45-surface)))!important}
.ai-badge{border-radius:999px!important;background:linear-gradient(135deg,var(--hm45-blue),var(--hm45-violet))!important;color:#fff!important}

/* Tables */
table{border-collapse:separate!important;border-spacing:0!important;overflow:hidden!important;border:1px solid var(--hm45-line)!important;border-radius:16px!important;background:var(--hm45-surface)!important}
th{background:var(--hm45-surface-2)!important;color:var(--hm45-text)!important;font-weight:900!important}
td{border-top:1px solid var(--hm45-line)!important;color:var(--hm45-text)!important}

/* Modals / notices */
.modal,.dialog,.modal-content,.dropdown{background:var(--hm45-surface)!important;color:var(--hm45-text)!important;border-color:var(--hm45-line)!important;border-radius:20px!important;box-shadow:var(--hm45-shadow)!important}
.toast,.alert,.notice{border-radius:15px!important;border:1px solid var(--hm45-line)!important;box-shadow:var(--hm45-shadow)!important}

/* Footer */
footer,.footer{background:transparent!important;color:var(--hm45-muted)!important;border-color:var(--hm45-line)!important}

/* Floating utilities */
#hamou-floating-menu,.floating-menu,.floating-actions{filter:drop-shadow(0 12px 28px rgba(15,23,42,.15))}

/* Mobile */
@media(max-width:1050px){
  .desktop-nav{display:none!important}
  .mobile-toggle{display:grid!important}
  .function-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .container{width:calc(100% - 22px)!important}
  .hero{padding:42px 0 32px!important}
  .hero-grid,.builder,.growth-grid{grid-template-columns:1fr!important}
  .hero h1,.hm-hero h1{font-size:clamp(31px,10vw,47px)!important}
  .hero-actions,.hero-buttons{display:grid!important;grid-template-columns:1fr!important}
  .function-grid,.grid-4,.grid-3,.grid-2,.hm-grid-3,.hm-grid-4{grid-template-columns:1fr!important}
  .card,.panel,.section,.hero-card,.function-card{padding:18px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* HAMOU MATH 45.4.35 — premium/futuristic refinement layer */
:root{
  --hm45-radius-xl:28px;
  --hm45-glass:rgba(255,255,255,.72);
}
body{
  background:
    radial-gradient(900px 420px at 5% -10%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(780px 420px at 100% 0%, rgba(124,58,237,.10), transparent 62%),
    var(--hm45-bg, var(--hm-bg,#f7f9fc));
}
.card,.panel,.section,.hero-card,.function-card,.hm-card,.workspace-card{
  border:1px solid color-mix(in srgb,var(--hm45-line,#e5e7eb) 82%, transparent)!important;
  border-radius:var(--hm45-radius-xl)!important;
  box-shadow:0 18px 55px rgba(15,23,42,.075)!important;
  backdrop-filter:blur(12px);
}
.card:hover,.function-card:hover,.workspace-card:hover{
  box-shadow:0 24px 70px rgba(15,23,42,.11)!important;
  transform:translateY(-2px);
}
header,.navbar,.topbar,.site-header{
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
@media(max-width:760px){
  .card,.panel,.section,.hero-card,.function-card,.hm-card,.workspace-card{border-radius:20px!important}
  button,.btn,.primary-btn,.secondary-btn,.success-btn,.danger-btn,a.btn,.hm-btn{min-height:44px}
  input,textarea,select,.input,.select{min-height:44px}
}