/* Website Builder — theme packs + layout variants */

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

.web-scope,
[data-theme-pack] {
  --web-primary: #0ea5e9;
  --web-accent: #6366f1;
  --web-bg: #f0f9ff;
  --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
  --web-primary-soft: color-mix(in srgb, var(--web-primary) 16%, transparent);
}

body.web-scope[data-theme-pack],
.web-scope[data-theme-pack] {
  font-family: var(--web-font);
}

/* Public site canvas uses pack background when applied on body */
body.web-scope[data-theme-pack] {
  background: var(--web-bg);
}

body.web-scope[data-theme-pack] .web-section-alt {
  background: color-mix(in srgb, var(--web-bg) 70%, var(--web-surface));
}

body.web-scope[data-theme-pack] .web-card,
body.web-scope[data-theme-pack] .web-client-pill,
body.web-scope[data-theme-pack] .web-contact-item,
body.web-scope[data-theme-pack] .web-news-item,
body.web-scope[data-theme-pack] .web-footer,
body.web-scope[data-theme-pack] .web-nav {
  background: color-mix(in srgb, var(--web-surface) 92%, transparent);
}

/* ========== Layout variants ========== */

/* hero-left (default-ish) */
[data-web-layout="hero-left"] .web-hero-inner {
  text-align: start;
  margin-inline-end: auto;
  max-width: 640px;
}
[data-web-layout="hero-left"] .web-hero-bg {
  background:
    radial-gradient(900px 420px at 8% 10%, var(--web-primary-soft), transparent 55%),
    linear-gradient(120deg, var(--web-bg), var(--web-surface));
}

/* hero-center */
[data-web-layout="hero-center"] .web-hero-inner {
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}
[data-web-layout="hero-center"] .web-hero-lead { margin-inline: auto; }
[data-web-layout="hero-center"] .web-hero-cta { justify-content: center; }
[data-web-layout="hero-center"] .web-kicker { justify-content: center; }
[data-web-layout="hero-center"] .web-hero {
  min-height: min(85vh, 700px);
}
[data-web-layout="hero-center"] .web-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -.03em;
}
[data-web-layout="hero-center"] .web-section-head { text-align: center; margin-inline: auto; }

/* hero-split */
[data-web-layout="hero-split"] .web-hero {
  min-height: min(72vh, 560px);
}
[data-web-layout="hero-split"] .web-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  max-width: 1100px;
  align-items: center;
}
[data-web-layout="hero-split"] .web-hero-inner > * {
  grid-column: 1;
}
[data-web-layout="hero-split"] .web-hero-inner::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  min-height: 220px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, var(--web-primary), color-mix(in srgb, var(--web-accent) 70%, var(--web-primary))),
    var(--web-primary);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--web-primary) 28%, transparent);
}
[data-web-layout="hero-split"] .web-cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* minimal */
[data-web-layout="minimal"] .web-kicker { display: none; }
[data-web-layout="minimal"] .web-hero {
  min-height: auto;
  border-bottom: 1px solid color-mix(in srgb, var(--web-primary) 14%, transparent);
}
[data-web-layout="minimal"] .web-hero-bg {
  background: var(--web-bg);
}
[data-web-layout="minimal"] .web-hero-bg::before,
[data-web-layout="minimal"] .web-hero-bg::after { opacity: .12; animation: none; }
[data-web-layout="minimal"] .web-hero-inner { padding: 3rem 0 2.2rem; max-width: 560px; }
[data-web-layout="minimal"] .web-hero h1 {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: -.01em;
}
[data-web-layout="minimal"] .web-card {
  border-radius: 8px;
  box-shadow: none;
}
[data-web-layout="minimal"] .web-section { padding: 2.6rem 0; }

/* bold-banner */
[data-web-layout="bold-banner"] .web-hero {
  min-height: min(58vh, 480px);
  color: #fff;
}
[data-web-layout="bold-banner"] .web-hero-bg {
  background: linear-gradient(135deg, var(--web-primary), color-mix(in srgb, var(--web-accent) 55%, var(--web-primary)));
}
[data-web-layout="bold-banner"] .web-hero-bg::before { opacity: .18; }
[data-web-layout="bold-banner"] .web-hero-bg::after { display: none; }
[data-web-layout="bold-banner"] .web-kicker,
[data-web-layout="bold-banner"] .web-hero-lead { color: color-mix(in srgb, #fff 82%, transparent); }
[data-web-layout="bold-banner"] .web-hero h1 { color: #fff; }
[data-web-layout="bold-banner"] .web-hero-cta .btn-ghost {
  color: #fff;
  border-color: color-mix(in srgb, #fff 45%, transparent);
}
[data-web-layout="bold-banner"] .web-hero-inner {
  max-width: 900px;
  padding-block: 3.2rem;
}
[data-web-layout="bold-banner"] .web-section-head h2 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

/* magazine */
[data-web-layout="magazine"] .web-hero-inner { max-width: 820px; }
[data-web-layout="magazine"] .web-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.05;
  font-weight: 800;
}
[data-web-layout="magazine"] .web-section-head {
  display: grid;
  grid-template-columns: .4fr 1fr;
  gap: 1.2rem;
  max-width: none;
  align-items: end;
  border-bottom: 2px solid var(--web-primary);
  padding-bottom: .8rem;
}
[data-web-layout="magazine"] .web-section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0;
}
[data-web-layout="magazine"] .web-cards {
  grid-template-columns: 1.2fr .8fr .8fr;
}
[data-web-layout="magazine"] .web-card:first-child {
  grid-row: span 1;
  min-height: 160px;
  background: linear-gradient(160deg, var(--web-primary-soft), var(--web-surface));
}
[data-web-layout="magazine"] .web-news-item {
  border-inline-start-width: 6px;
  border-radius: 0;
}

/* sidebar-nav */
@media (min-width: 960px) {
  [data-web-layout="sidebar-nav"] .web-nav {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 220px;
    border-bottom: 0;
    border-inline-end: 1px solid var(--border);
    background: var(--web-surface);
  }
  [data-web-layout="sidebar-nav"] .web-nav-inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 100%;
    padding: 1.2rem .9rem;
    width: auto;
  }
  [data-web-layout="sidebar-nav"] .web-nav-links {
    flex-direction: column;
    margin: 1.2rem 0;
    gap: .35rem;
  }
  [data-web-layout="sidebar-nav"] .web-nav-actions { margin-top: auto; flex-wrap: wrap; }
  [data-web-layout="sidebar-nav"] main,
  [data-web-layout="sidebar-nav"] .web-footer {
    margin-inline-start: 220px;
  }
  [data-web-layout="sidebar-nav"] .web-hero { min-height: min(70vh, 560px); }
}
[data-web-layout="sidebar-nav"] .web-section { padding: 3.2rem 0; }
[data-web-layout="sidebar-nav"] .web-card {
  border-radius: 10px;
  border-inline-start: 3px solid var(--web-primary);
}

/* card-grid */
[data-web-layout="card-grid"] .web-hero { min-height: min(62vh, 520px); }
[data-web-layout="card-grid"] .web-cards {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
[data-web-layout="card-grid"] .web-card {
  border-radius: 20px;
  padding: 1.4rem 1.2rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--web-primary) 8%, var(--web-surface)), var(--web-surface));
}
[data-web-layout="card-grid"] .web-clients { gap: .8rem; }
[data-web-layout="card-grid"] .web-client-pill {
  border-radius: 16px;
  min-width: 140px;
  text-align: center;
}
[data-web-layout="card-grid"] .web-section-alt {
  background: color-mix(in srgb, var(--web-primary) 6%, var(--web-bg));
}

/* dark-luxury */
[data-web-layout="dark-luxury"] {
  color-scheme: dark;
}
body.web-scope[data-web-layout="dark-luxury"],
.web-live-preview[data-web-layout="dark-luxury"] {
  color: #f5f5f4;
  background: var(--web-bg);
}
[data-web-layout="dark-luxury"] .web-nav {
  background: color-mix(in srgb, var(--web-surface) 90%, transparent);
  border-bottom-color: color-mix(in srgb, var(--web-accent) 25%, transparent);
}
[data-web-layout="dark-luxury"] .web-hero {
  min-height: min(82vh, 680px);
}
[data-web-layout="dark-luxury"] .web-hero-bg {
  background:
    radial-gradient(700px 360px at 20% 20%, color-mix(in srgb, var(--web-accent) 22%, transparent), transparent 60%),
    linear-gradient(160deg, var(--web-bg), var(--web-surface));
}
[data-web-layout="dark-luxury"] .web-hero h1 {
  font-weight: 500;
  letter-spacing: .01em;
}
[data-web-layout="dark-luxury"] .web-hero-lead,
[data-web-layout="dark-luxury"] .web-muted,
[data-web-layout="dark-luxury"] .web-section-head p,
[data-web-layout="dark-luxury"] .web-nav-links a {
  color: color-mix(in srgb, #f5f5f4 70%, transparent);
}
[data-web-layout="dark-luxury"] .web-card,
[data-web-layout="dark-luxury"] .web-news-item,
[data-web-layout="dark-luxury"] .web-contact-item,
[data-web-layout="dark-luxury"] .web-client-pill,
[data-web-layout="dark-luxury"] .web-footer {
  background: var(--web-surface);
  border-color: color-mix(in srgb, var(--web-accent) 28%, transparent);
  color: #f5f5f4;
}
[data-web-layout="dark-luxury"] .web-hero-cta .btn-primary {
  background: linear-gradient(135deg, var(--web-accent), color-mix(in srgb, var(--web-primary) 40%, var(--web-accent)));
  color: #111;
  border: 0;
}
[data-web-layout="dark-luxury"] .web-section { padding: 4.5rem 0; }

/* soft-pastel */
[data-web-layout="soft-pastel"] .web-hero-bg {
  background:
    radial-gradient(600px 320px at 15% 20%, color-mix(in srgb, var(--web-primary) 18%, transparent), transparent 60%),
    radial-gradient(520px 280px at 90% 70%, color-mix(in srgb, var(--web-accent) 16%, transparent), transparent 55%),
    var(--web-bg);
}
[data-web-layout="soft-pastel"] .web-hero h1 { font-weight: 700; }
[data-web-layout="soft-pastel"] .web-card,
[data-web-layout="soft-pastel"] .web-contact-item,
[data-web-layout="soft-pastel"] .web-client-pill {
  border-radius: 22px;
  border: 0;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--web-primary) 10%, transparent);
  background: color-mix(in srgb, var(--web-surface) 88%, #fff);
}
[data-web-layout="soft-pastel"] .web-section { padding: 3.6rem 0; }
[data-web-layout="soft-pastel"] .web-card-ico {
  border-radius: 999px;
}

/* Live preview layout cues */
.web-live-preview[data-web-layout="hero-center"] .web-live-hero { text-align: center; }
.web-live-preview[data-web-layout="hero-center"] .web-live-cta { justify-content: center; }
.web-live-preview[data-web-layout="bold-banner"] .web-live-hero {
  background: linear-gradient(135deg, var(--web-primary), var(--web-accent));
  color: #fff;
}
.web-live-preview[data-web-layout="bold-banner"] .web-live-hero strong { color: #fff; }
.web-live-preview[data-web-layout="bold-banner"] .web-live-hero em { color: rgba(255,255,255,.85); }
.web-live-preview[data-web-layout="dark-luxury"] {
  color: #f5f5f4;
}
.web-live-preview[data-web-layout="dark-luxury"] .web-live-hero strong { color: #fafaf9; }
.web-live-preview[data-web-layout="dark-luxury"] .web-live-hero em { color: #a8a29e; }
.web-live-preview[data-web-layout="minimal"] .web-live-nav { background: transparent; }
.web-live-preview[data-web-layout="magazine"] .web-live-cards { grid-template-columns: 1.3fr .7fr .7fr; }
.web-live-preview[data-web-layout="card-grid"] .web-live-cards i { border-radius: 14px; height: 56px; }
.web-live-preview[data-web-layout="soft-pastel"] .web-live-cards i { border-radius: 16px; border: 0; box-shadow: 0 6px 16px color-mix(in srgb, var(--web-primary) 16%, transparent); }
.web-live-preview[data-web-layout="hero-split"] .web-live-hero {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: .6rem;
}
.web-live-preview[data-web-layout="hero-split"] .web-live-hero::after {
  content: "";
  border-radius: 12px;
  background: linear-gradient(145deg, var(--web-primary), var(--web-accent));
  min-height: 70px;
  grid-row: 1 / span 3;
  grid-column: 2;
}
.web-live-preview[data-web-layout="sidebar-nav"] {
  display: grid;
  grid-template-columns: 54px 1fr;
}
.web-live-preview[data-web-layout="sidebar-nav"] .web-live-nav {
  grid-row: 1 / span 3;
  flex-direction: column;
  padding: 10px 8px;
  gap: 8px;
}
.web-live-preview[data-web-layout="sidebar-nav"] .web-live-nav span { width: 100% !important; margin: 0 !important; }

/* Thumb layout hints */
.web-theme-thumb[data-web-layout="hero-center"] .web-theme-thumb-hero { justify-items: center; }
.web-theme-thumb[data-web-layout="hero-center"] .web-theme-thumb-hero i { margin-inline: auto; }
.web-theme-thumb[data-web-layout="bold-banner"] .web-theme-thumb-hero {
  background: linear-gradient(135deg, var(--web-primary), var(--web-accent));
  padding-block: 10px;
}
.web-theme-thumb[data-web-layout="bold-banner"] .web-theme-thumb-hero i { background: #fff; }
.web-theme-thumb[data-web-layout="dark-luxury"] { color: #fff; }
.web-theme-thumb[data-web-layout="minimal"] .web-theme-thumb-nav { height: 6px; opacity: .5; }
.web-theme-thumb[data-web-layout="magazine"] .web-theme-thumb-rows i:first-child { flex: 1.5; }
.web-theme-thumb[data-web-layout="soft-pastel"] .web-theme-thumb-rows i { border-radius: 10px; border: 0; }
.web-theme-thumb[data-web-layout="card-grid"] .web-theme-thumb-rows i { border-radius: 8px; height: 22px; }
.web-theme-thumb[data-web-layout="sidebar-nav"] {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto 1fr;
}
.web-theme-thumb[data-web-layout="sidebar-nav"] .web-theme-thumb-nav {
  grid-row: 1 / span 2;
  height: 100%;
  width: 18px;
  border: 0;
  border-inline-end: 1px solid color-mix(in srgb, var(--web-primary) 25%, transparent);
}
.web-theme-thumb[data-web-layout="hero-split"] .web-theme-thumb-hero {
  grid-template-columns: 1fr .6fr;
  align-items: center;
}
.web-theme-thumb[data-web-layout="hero-split"] .web-theme-thumb-hero::after {
  content: "";
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--web-primary), var(--web-accent));
}

/* ========== Demo site header (Mr. Tech–inspired) ========== */
.web-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.web-site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--web-primary), var(--web-accent));
  opacity: .85;
}
.web-header-top {
  background: color-mix(in srgb, var(--web-primary) 8%, var(--web-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--web-primary) 12%, transparent);
  font-size: .78rem;
}
.web-header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 36px;
  padding-block: .35rem;
}
.web-header-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 1.1rem;
}
.web-header-contact {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.web-header-contact:hover { color: var(--web-primary); }
.web-header-top-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.web-header-hours { color: var(--muted); font-weight: 600; }
.web-header-social {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--web-primary);
  background: var(--web-primary-soft);
  text-decoration: none;
}
.web-site-header .web-nav {
  position: relative;
  background: color-mix(in srgb, var(--web-surface) 92%, transparent);
  border-bottom: 0;
}
.web-site-header .web-nav-inner {
  min-height: 76px;
  gap: 1.2rem;
}
.web-brand-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  line-height: 1.15;
}
.web-brand-text strong { font-size: 1.02rem; }
.web-brand-text small {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
}
.web-brand-mark--logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--web-primary), var(--web-accent));
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--web-primary) 28%, transparent);
}
.web-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--web-primary), var(--web-accent));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--web-primary) 24%, transparent);
  white-space: nowrap;
}
.web-nav-cta:hover { filter: brightness(1.06); color: #fff; }
@media (max-width: 900px) {
  .web-header-top { display: none; }
  .web-site-header .web-nav-inner { flex-wrap: nowrap; min-height: 64px; }
}

/* ========== Per-theme token packs ========== */
[data-theme-pack="tech_corp"], .theme-tech_corp {
  --web-primary: #0ea5e9; --web-accent: #6366f1; --web-bg: #f0f9ff; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="restaurant_warm"], .theme-restaurant_warm {
  --web-primary: #b45309; --web-accent: #dc2626; --web-bg: #fff7ed; --web-surface: #fffbeb;
  --web-font: "Libre Baskerville", "Noto Naskh Arabic", Georgia, serif;
}
[data-theme-pack="clinic_care"], .theme-clinic_care {
  --web-primary: #0891b2; --web-accent: #14b8a6; --web-bg: #f0fdfa; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="build_solid"], .theme-build_solid {
  --web-primary: #ea580c; --web-accent: #1e293b; --web-bg: #f8fafc; --web-surface: #ffffff;
  --web-font: "Space Grotesk", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="designer_folio"], .theme-designer_folio {
  --web-primary: #7c3aed; --web-accent: #f43f5e; --web-bg: #faf5ff; --web-surface: #ffffff;
  --web-font: "Space Grotesk", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="fashion_runway"], .theme-fashion_runway {
  --web-primary: #be123c; --web-accent: #0f172a; --web-bg: #fff1f2; --web-surface: #ffffff;
  --web-font: "Libre Baskerville", "Noto Naskh Arabic", Georgia, serif;
}
[data-theme-pack="law_chamber"], .theme-law_chamber {
  --web-primary: #1e3a5f; --web-accent: #b45309; --web-bg: #f8fafc; --web-surface: #ffffff;
  --web-font: "Libre Baskerville", "Noto Naskh Arabic", Georgia, serif;
}
[data-theme-pack="academy_learn"], .theme-academy_learn {
  --web-primary: #2563eb; --web-accent: #f59e0b; --web-bg: #eff6ff; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="hotel_stay"], .theme-hotel_stay {
  --web-primary: #92400e; --web-accent: #d4a373; --web-bg: #1c1917; --web-surface: #292524;
  --web-font: "Libre Baskerville", "Noto Naskh Arabic", Georgia, serif;
}
[data-theme-pack="logistics_flow"], .theme-logistics_flow {
  --web-primary: #0369a1; --web-accent: #f97316; --web-bg: #f0f9ff; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="oil_gas"], .theme-oil_gas {
  --web-primary: #0f766e; --web-accent: #ca8a04; --web-bg: #0c1222; --web-surface: #152033;
  --web-font: "Space Grotesk", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="association_hub"], .theme-association_hub {
  --web-primary: #4f46e5; --web-accent: #059669; --web-bg: #eef2ff; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="photo_studio"], .theme-photo_studio {
  --web-primary: #18181b; --web-accent: #e11d48; --web-bg: #fafafa; --web-surface: #ffffff;
  --web-font: "Space Grotesk", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="real_estate"], .theme-real_estate {
  --web-primary: #0d9488; --web-accent: #854d0e; --web-bg: #f0fdfa; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="beauty_salon"], .theme-beauty_salon {
  --web-primary: #db2777; --web-accent: #a78bfa; --web-bg: #fdf2f8; --web-surface: #ffffff;
  --web-font: "Libre Baskerville", "Noto Naskh Arabic", Georgia, serif;
}
[data-theme-pack="auto_garage"], .theme-auto_garage {
  --web-primary: #dc2626; --web-accent: #facc15; --web-bg: #18181b; --web-surface: #27272a;
  --web-font: "Space Grotesk", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="accounting_firm"], .theme-accounting_firm {
  --web-primary: #1d4ed8; --web-accent: #64748b; --web-bg: #f8fafc; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="startup_spark"], .theme-startup_spark {
  --web-primary: #7c3aed; --web-accent: #06b6d4; --web-bg: #f5f3ff; --web-surface: #ffffff;
  --web-font: "Space Grotesk", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="charity_heart"], .theme-charity_heart {
  --web-primary: #e11d48; --web-accent: #0d9488; --web-bg: #fff1f2; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="personal_profile"], .theme-personal_profile {
  --web-primary: #334155; --web-accent: #0ea5e9; --web-bg: #f8fafc; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}
[data-theme-pack="cafe_corner"], .theme-cafe_corner {
  --web-primary: #78350f; --web-accent: #a3e635; --web-bg: #fef3c7; --web-surface: #fffbeb;
  --web-font: "Libre Baskerville", "Noto Naskh Arabic", Georgia, serif;
}
[data-theme-pack="pharmacy_trust"], .theme-pharmacy_trust {
  --web-primary: #059669; --web-accent: #2563eb; --web-bg: #ecfdf5; --web-surface: #ffffff;
  --web-font: "DM Sans", "Cairo", system-ui, sans-serif;
}

/* Dark packs: force readable text on public runtime */
body.web-scope[data-theme-pack="hotel_stay"],
body.web-scope[data-theme-pack="oil_gas"],
body.web-scope[data-theme-pack="auto_garage"] {
  color: #f5f5f4;
}
body.web-scope[data-theme-pack="hotel_stay"] .web-hero-lead,
body.web-scope[data-theme-pack="oil_gas"] .web-hero-lead,
body.web-scope[data-theme-pack="auto_garage"] .web-hero-lead {
  color: color-mix(in srgb, #f5f5f4 75%, transparent);
}

/* Extra per-pack shape accents (beyond hue) */
[data-theme-pack="restaurant_warm"] .web-card { border-radius: 6px 22px 6px 22px; }
[data-theme-pack="fashion_runway"] .web-hero h1 { text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1.8rem, 4vw, 2.8rem); }
[data-theme-pack="law_chamber"] .web-section-head h2 { border-inline-start: 4px solid var(--web-accent); padding-inline-start: .6rem; }
[data-theme-pack="photo_studio"] .web-gallery img { border-radius: 2px; filter: grayscale(.15); }
[data-theme-pack="startup_spark"] .web-hero-cta .btn-primary {
  border-radius: 999px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--web-primary) 35%, transparent);
}
[data-theme-pack="build_solid"] .web-card { border-top: 4px solid var(--web-primary); border-radius: 8px; }
[data-theme-pack="cafe_corner"] .web-news-item { background: color-mix(in srgb, var(--web-accent) 12%, var(--web-surface)); }

/* ========== Deep pack personality: hero patterns + SVG-like illustrations ========== */
.web-hero-art {
  position: absolute;
  inset-inline-end: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(340px, 38vw);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  animation: webFadeUp 1s .2s ease both;
}
.web-hero-art svg { width: 100%; height: 100%; display: block; }
@media (max-width: 820px) {
  .web-hero-art { display: none; }
}

[data-theme-pack="tech_corp"] .web-hero-bg {
  background:
    radial-gradient(800px 380px at 12% 0%, color-mix(in srgb, var(--web-primary) 28%, transparent), transparent 55%),
    linear-gradient(160deg, #e0f2fe, #f8fafc 55%, #fff);
}
[data-theme-pack="tech_corp"] .web-hero-bg::after {
  background-image:
    linear-gradient(color-mix(in srgb, var(--web-primary) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--web-primary) 12%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .45;
  animation: none;
}
[data-theme-pack="restaurant_warm"] .web-hero-bg {
  background:
    radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--web-accent) 22%, transparent), transparent 50%),
    linear-gradient(150deg, #fff7ed, #ffedd5 40%, #fffbeb);
}
[data-theme-pack="restaurant_warm"] .web-card-ico { border-radius: 50%; background: #ffedd5; color: #b45309; }
[data-theme-pack="clinic_care"] .web-hero-bg {
  background:
    radial-gradient(circle at 15% 80%, color-mix(in srgb, var(--web-accent) 20%, transparent), transparent 45%),
    linear-gradient(180deg, #ecfeff, #f0fdfa 50%, #fff);
}
[data-theme-pack="clinic_care"] .web-media-card {
  background: linear-gradient(145deg, #0891b2, #14b8a6);
}
[data-theme-pack="build_solid"] .web-hero-bg {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--web-primary) 18%, #f8fafc), #fff),
    repeating-linear-gradient(90deg, transparent, transparent 40px, color-mix(in srgb, var(--web-accent) 6%, transparent) 40px, color-mix(in srgb, var(--web-accent) 6%, transparent) 41px);
}
[data-theme-pack="designer_folio"] .web-hero-bg {
  background:
    conic-gradient(from 210deg at 80% 20%, color-mix(in srgb, var(--web-accent) 30%, transparent), transparent 40%),
    linear-gradient(160deg, #faf5ff, #fff);
}
[data-theme-pack="designer_folio"] .web-card { border-radius: 4px 24px; }
[data-theme-pack="fashion_runway"] .web-hero-bg {
  background: linear-gradient(180deg, #fff1f2 0%, #fff 45%, #fdf2f8);
}
[data-theme-pack="fashion_runway"] .web-media-card { border-radius: 0; }
[data-theme-pack="law_chamber"] .web-hero-bg {
  background:
    linear-gradient(180deg, #f1f5f9, #fff),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--web-accent) 16%, transparent), transparent 40%);
}
[data-theme-pack="academy_learn"] .web-hero-bg {
  background:
    radial-gradient(600px 280px at 0% 100%, color-mix(in srgb, var(--web-accent) 22%, transparent), transparent 55%),
    linear-gradient(135deg, #dbeafe, #eff6ff 40%, #fff);
}
[data-theme-pack="hotel_stay"] .web-hero-bg {
  background:
    radial-gradient(700px 360px at 50% 0%, color-mix(in srgb, var(--web-accent) 28%, transparent), transparent 55%),
    linear-gradient(160deg, #1c1917, #292524);
}
[data-theme-pack="logistics_flow"] .web-hero-bg {
  background:
    linear-gradient(115deg, #e0f2fe 0%, #f0f9ff 45%, #fff 100%);
}
[data-theme-pack="logistics_flow"] .web-hero-bg::after {
  background:
    repeating-linear-gradient(-25deg, transparent, transparent 18px, color-mix(in srgb, var(--web-accent) 10%, transparent) 18px, color-mix(in srgb, var(--web-accent) 10%, transparent) 20px);
  opacity: .7;
}
[data-theme-pack="oil_gas"] .web-hero-bg {
  background:
    radial-gradient(500px 300px at 20% 30%, color-mix(in srgb, var(--web-primary) 35%, transparent), transparent 55%),
    linear-gradient(160deg, #0c1222, #152033);
}
[data-theme-pack="association_hub"] .web-card-ico { border-radius: 8px; background: #e0e7ff; }
[data-theme-pack="photo_studio"] .web-hero-bg {
  background: linear-gradient(135deg, #fafafa, #fff),
    radial-gradient(circle at 70% 40%, color-mix(in srgb, var(--web-accent) 14%, transparent), transparent 40%);
}
[data-theme-pack="real_estate"] .web-media-card {
  background: linear-gradient(145deg, #0d9488, #854d0e);
}
[data-theme-pack="beauty_salon"] .web-card {
  border-radius: 28px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--web-primary) 12%, transparent);
}
[data-theme-pack="auto_garage"] .web-hero-bg {
  background:
    linear-gradient(160deg, #18181b, #27272a),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(250,204,21,.04) 3px, rgba(250,204,21,.04) 4px);
}
[data-theme-pack="accounting_firm"] .web-client-pill { border-radius: 8px; border-top: 3px solid var(--web-primary); }
[data-theme-pack="startup_spark"] .web-hero-bg {
  background:
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--web-primary) 25%, transparent), transparent 40%),
    radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--web-accent) 22%, transparent), transparent 40%),
    linear-gradient(160deg, #f5f3ff, #fff);
}
[data-theme-pack="charity_heart"] .web-card-ico { border-radius: 999px; color: #e11d48; background: #ffe4e6; }
[data-theme-pack="personal_profile"] .web-hero-inner { max-width: 560px; }
[data-theme-pack="cafe_corner"] .web-hero-bg {
  background:
    radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--web-accent) 35%, transparent), transparent 50%),
    linear-gradient(160deg, #fef3c7, #fffbeb);
}
[data-theme-pack="pharmacy_trust"] .web-media-card {
  background: linear-gradient(145deg, #059669, #2563eb);
}

@media (max-width: 900px) {
  .web-theme-layout { grid-template-columns: 1fr; }
  .web-theme-live { position: static; }
  [data-web-layout="hero-split"] .web-hero-inner { grid-template-columns: 1fr; }
  [data-web-layout="hero-split"] .web-hero-inner::after { min-height: 140px; }
  [data-web-layout="magazine"] .web-section-head { grid-template-columns: 1fr; }
  [data-web-layout="magazine"] .web-cards { grid-template-columns: 1fr; }
}