/* XL Messenger — style.css
   Clean, responsive landing — hero & features + dark mode
*/

/* Basic reset */
*:where(:not(html, iframe, canvas, img, svg, video, audio)) { box-sizing: border-box; }
html,body { height:100%; margin:0; }
body {
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:#0b2540;
  background: linear-gradient(180deg, #f7fbff 0%, #eef6fb 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Layout helpers */
.wrap { max-width:1200px; margin:0 auto; padding:28px; }
.wrap-section { padding:48px 0; }

/* Header */
.site-header { background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4)); position:sticky; top:0; z-index:60; backdrop-filter: blur(6px); border-bottom:1px solid rgba(15,36,64,0.03); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo img { height:36px; display:block; }
.main-nav { display:flex; gap:18px; align-items:center; }
.main-nav a { color:#0b2540; text-decoration:none; font-weight:600; }
.btn-cta { display:inline-block; padding:10px 14px; border-radius:10px; background:#0ea5ff; color:#fff; box-shadow:0 6px 18px rgba(14,165,255,0.18); text-decoration:none; }

/* menu toggle (mobile) */
.menu-toggle { display:none; background:transparent; border:0; font-size:20px; cursor:pointer; padding:6px; }

/* HERO */
.hero { padding:48px 0 60px; overflow:visible; }
.hero-grid { display:grid; grid-template-columns: 1fr 480px; gap:40px; align-items:center; position:relative; }
.eyebrow { color:#0EA5FF; font-weight:700; margin-bottom:12px; display:inline-block; }
.hero-title { font-size:40px; line-height:1.02; margin:0 0 16px; color:#082033; font-weight:800; letter-spacing:-0.4px; }
.lede { color:#335; opacity:0.85; margin-bottom:20px; max-width:640px; }

/* actions */
.hero-actions { display:flex; gap:12px; margin-bottom:26px; }
.btn-primary { background:#0EA5FF; color:#fff; border:none; padding:12px 20px; border-radius:10px; box-shadow:0 8px 24px rgba(14,165,255,0.18); text-decoration:none; display:inline-block; }
.btn-outline { background:rgba(15,36,64,0.04); color:#0b2540; border-radius:10px; padding:10px 16px; text-decoration:none; display:inline-block; }

/* small card */
.feature-cards .card { display:flex; gap:12px; align-items:center; background:#fff; border-radius:12px; padding:12px; box-shadow:0 6px 18px rgba(12,34,58,0.06); border:1px solid rgba(12,34,58,0.03); max-width:420px; margin-top:12px; }
.card-icon { width:44px; height:44px; object-fit:contain; }
.card-body .muted { color:#5b6b7a; font-size:14px; margin-top:6px; }

/* HERO RIGHT */
.hero-right { position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; }
.hero-glow { position:absolute; width:520px; height:520px; border-radius:20px; background: linear-gradient(180deg, rgba(14,165,255,0.12), rgba(226,246,255,0.06)); filter: blur(30px); right: -24px; top: 0; z-index:0; }
.phone-frame { width:380px; height:640px; border-radius:28px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#ffffff 0%, #e6f6ff 100%); box-shadow: 0 30px 80px rgba(6,40,61,0.10); transform-origin:center; transition:transform .22s ease; overflow:hidden; position:relative; z-index:2; padding:18px; }
.hero-image { width:100%; height:100%; object-fit:cover; border-radius:18px; display:block; }

/* bubbles */
.bubble { position:absolute; background:#fff; padding:10px 18px; border-radius:26px; box-shadow: 0 10px 30px rgba(6,40,61,0.08); border:1px solid rgba(6,40,61,0.04); font-weight:600; color:#234; z-index:3; white-space:nowrap; }
.bubble-1 { right:24px; bottom:20px; transform:translateY(0); }
.bubble-2 { right:-6px; top:40%; transform:translateY(0); }

/* FEATURES GRID section */
.features { background:transparent; padding-top:28px; }
.section-title { font-size:22px; margin:0 0 18px; color:#0b2540; font-weight:700; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature { background:#fff; padding:20px; border-radius:14px; box-shadow:0 10px 30px rgba(12,34,58,0.04); border:1px solid rgba(12,34,58,0.03); }

/* Icon circle for feature cards */
.icon-circle { width:56px; height:56px; border-radius:50%; background:#e9f6ff; display:flex; align-items:center; justify-content:center; margin-bottom:14px; box-shadow: 0 4px 14px rgba(0, 90, 160, 0.08); border:1px solid rgba(0,90,160,0.04); }
.icon-circle img { width:28px; height:28px; object-fit:contain; }

/* HOW IT WORKS */
.how-steps { display:flex; gap:18px; margin-top:14px; }
.step { background:#fff; padding:18px; border-radius:12px; box-shadow:0 10px 30px rgba(12,34,58,0.04); border:1px solid rgba(12,34,58,0.03); display:flex; gap:12px; align-items:flex-start; }
.step-num { width:44px; height:44px; border-radius:10px; background:#dff4ff; display:flex; align-items:center; justify-content:center; font-weight:700; color:#007acc; margin-right:10px; }

/* CTA banner */
.cta-banner { margin-top:36px; background:linear-gradient(90deg,#eaffff, #f5fbff); padding:28px 0; border-radius:12px; text-align:center; box-shadow:0 10px 30px rgba(6,40,61,0.03); }

/* FOOTER */
.site-footer { margin-top:50px; padding:40px 0 60px; background:transparent; color:#334; }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:18px; align-items:start; }
.footer-logo { height:36px; margin-bottom:8px; }
.footer-bottom { margin-top:22px; border-top:1px solid rgba(12,34,58,0.03); padding-top:18px; }

/* small animation sheen on hero image */
.phone-frame .hero-image { transition: transform 300ms cubic-bezier(.22,.9,.3,1); }
.phone-frame:hover .hero-image { transform: scale(1.01); }

/* subtle floating (CSS fallback) */
@keyframes floaty { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px);} 100% { transform: translateY(0px);} }
.phone-frame { animation: floaty 5s ease-in-out infinite; }

/* accessibility focus */
a:focus, button:focus { outline:3px solid rgba(14,165,255,0.14); outline-offset:2px; border-radius:6px; }

/* Responsive */
@media (max-width:1100px) {
  .hero-grid { grid-template-columns: 1fr 420px; gap:28px; }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .how-steps { flex-direction:column; }
  .footer-grid { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .site-header { position:relative; }
  .main-nav a, .btn-cta { display:none; }
  .menu-toggle { display:inline-block; }
  .hero-grid { grid-template-columns:1fr; padding-bottom:8px; }
  .phone-frame { margin:20px auto 0; width:320px; height:520px; }
  .grid-3 { grid-template-columns:1fr; }
  .features .section-title { text-align:center; }
  .wrap { padding:16px; }
}
@media (max-width:420px) {
  .hero-title { font-size:24px; }
  .btn-primary { padding:10px 12px; font-size:14px; }
  .phone-frame { width:260px; height:420px; padding:12px; border-radius:18px; }
}

/* Dark mode toggle via prefers-color-scheme (simple) */
@media (prefers-color-scheme: dark) {
  body { background: linear-gradient(180deg,#061320,#071829); color:#dbeafe; }
  .site-header { background: rgba(10,20,30,0.6); border-bottom:1px solid rgba(255,255,255,0.05); }
  .btn-cta { background:#0ea5ff; color:#00283a; box-shadow:none; }
  .card, .feature, .step, .phone-frame, .cta-banner { background: linear-gradient(180deg,#071827,#071827); border:1px solid rgba(255,255,255,0.03); color:#dbeafe; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
  .icon-circle { background: rgba(10,20,30,0.35); border:1px solid rgba(255,255,255,0.03); }
  .hero-glow { background: radial-gradient(circle, rgba(15,115,255,0.12), rgba(0,0,0,0)); }
}