/**
 * File Description: Front-end styling for the XimmiX site pages created by XimmiX Site Builder.
 * By: ChatGPT / OpenAI
 * Version: 1.0.0
 */

:root {
  --xmx-bg: #050611;
  --xmx-panel: #0a0d1d;
  --xmx-panel-2: #0d1024;
  --xmx-line: rgba(126, 92, 255, .28);
  --xmx-text: #f7f7fb;
  --xmx-muted: #a7adbd;
  --xmx-purple: #8a3ffc;
  --xmx-blue: #2f7df4;
}

body.xmx-site-page { background: var(--xmx-bg) !important; color: var(--xmx-text); }
body.xmx-site-page #main, body.xmx-site-page .main_color { background: var(--xmx-bg) !important; }
body.xmx-site-page .container_wrap { border-top-color: rgba(255,255,255,.06); }
body.xmx-site-page #header_main { background: rgba(5,6,17,.94); border-bottom: 1px solid rgba(255,255,255,.06); }
body.xmx-site-page #header a, body.xmx-site-page #header .avia-menu-text { color: #fff !important; }
body.xmx-site-page .current-menu-item > a .avia-menu-text, body.xmx-site-page #header a:hover .avia-menu-text { color: #9b64ff !important; }

.xmx-wrap { max-width: 1500px; margin: 0 auto; padding: 0 34px 70px; font-family: Arial, Helvetica, sans-serif; color: var(--xmx-text); }
.xmx-section { padding: 76px 0; }
.xmx-hero { min-height: 640px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 44px; align-items: center; }
.xmx-hero-copy { padding-left: 10px; }
.xmx-kicker, .xmx-section-heading span { color: #a776ff; font-size: 13px; font-weight: 700; letter-spacing: 1.8px; }
.xmx-hero h1, .xmx-inner-hero h1, .xmx-page-title h1 { font-size: clamp(42px, 5vw, 76px); line-height: 1.02; margin: 18px 0 22px; color: white; letter-spacing: -2.2px; }
.xmx-hero h1 span { color: #8c49ff; }
.xmx-lead { font-size: 20px; line-height: 1.6; color: #c0c5d0; max-width: 790px; }
.xmx-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.xmx-btn { display: inline-flex; padding: 15px 24px; border-radius: 8px; text-decoration: none !important; font-weight: 700; color: #fff !important; border: 1px solid rgba(143,92,255,.45); }
.xmx-btn-primary { background: linear-gradient(90deg, #6c24f4, #2f7df4); box-shadow: 0 10px 30px rgba(76,67,255,.23); }
.xmx-btn-secondary { background: rgba(8,10,24,.62); }
.xmx-mini-trust { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 35px; color: #b9bfd0; font-size: 14px; }
.xmx-hero-visual img, .xmx-inner-hero img { width: 100%; display: block; filter: drop-shadow(0 24px 50px rgba(20,30,120,.28)); }

.xmx-section-heading { text-align: center; margin-bottom: 35px; }
.xmx-section-heading.xmx-left { text-align: left; }
.xmx-section-heading h2, .xmx-cta h2, .xmx-case-copy h2 { font-size: 36px; color: white; margin: 10px 0; }
.xmx-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.xmx-grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; }
.xmx-card, .xmx-project { display: block; border: 1px solid rgba(137,111,255,.23); border-radius: 15px; background: linear-gradient(180deg, rgba(14,17,36,.96), rgba(7,9,20,.96)); padding: 28px; color: white !important; text-decoration: none !important; transition: transform .2s ease, border-color .2s ease; }
.xmx-card:hover, .xmx-project:hover { transform: translateY(-4px); border-color: rgba(139,76,255,.65); }
.xmx-card h3, .xmx-project h3 { color: white; font-size: 22px; margin: 10px 0; }
.xmx-card p, .xmx-project p, .xmx-grid-5 p { color: var(--xmx-muted); line-height: 1.55; }
.xmx-card b { color: #9e6bff; }
.xmx-icon { width: 54px; height: 54px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 24px; font-weight: 700; background: radial-gradient(circle at 30% 30%, #9f4dff, #233893); border: 1px solid #6f4bff; }

.xmx-showcase { padding-top: 44px; }
.xmx-project { padding: 0; overflow: hidden; }
.xmx-project img { width: 100%; height: 245px; object-fit: cover; display: block; background: #070917; }
.xmx-project > div { padding: 22px; }
.xmx-project small { display: inline-block; margin-top: 6px; padding: 5px 9px; border-radius: 999px; background: #171638; color: #a889ff; }
.xmx-why { padding-bottom: 48px; }
.xmx-grid-5 > div { padding: 12px; text-align: left; }
.xmx-grid-5 strong { color: white; display: block; margin-bottom: 8px; }
.xmx-cta { display:flex; justify-content:space-between; gap: 30px; align-items:center; margin: 45px 0 10px; padding: 38px 48px; border-radius: 18px; border:1px solid rgba(141,88,255,.28); background: radial-gradient(circle at 95% 20%, rgba(110,35,241,.34), transparent 35%), linear-gradient(90deg,#0b1025,#16092b); }
.xmx-cta p { color: #c5cada; max-width: 640px; }

.xmx-inner-hero { min-height: 520px; display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.xmx-page-title { max-width: 980px; padding-top: 110px; }
.xmx-feature-list { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; list-style:none; margin: 25px 0 0; padding: 0; }
.xmx-feature-list li { background: var(--xmx-panel); border:1px solid rgba(137,111,255,.2); padding: 20px 22px; border-radius: 12px; color: #d8dbea; }
.xmx-case-copy { max-width: 1100px; margin: 0 auto; }
.xmx-case-copy > p { font-size: 19px; color:#bdc3d1; line-height:1.7; }
.xmx-contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 1100px) {
  .xmx-hero, .xmx-inner-hero { grid-template-columns: 1fr; }
  .xmx-grid-5 { grid-template-columns: repeat(2,1fr); }
  .xmx-hero-visual { order: -1; max-width: 800px; margin: 0 auto; }
}

@media (max-width: 800px) {
  .xmx-wrap { padding-left: 18px; padding-right: 18px; }
  .xmx-section { padding: 46px 0; }
  .xmx-grid-3, .xmx-feature-list, .xmx-contact-grid { grid-template-columns: 1fr; }
  .xmx-grid-5 { grid-template-columns: 1fr; }
  .xmx-hero { min-height: auto; }
  .xmx-hero h1, .xmx-inner-hero h1, .xmx-page-title h1 { font-size: 44px; letter-spacing: -1.3px; }
  .xmx-lead { font-size: 18px; }
  .xmx-cta { flex-direction: column; align-items:flex-start; padding: 30px; }
}