/* ══════════════════════════════════════════
   LIAdy — Shared Stylesheet
   ══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #080d1a;
  --bg2:    #0f1629;
  --bg3:    #1a2640;
  --blue:   #2563eb;
  --purple: #7c3aed;
  --light:  #60a5fa;
  --grad:   linear-gradient(135deg, #2563eb, #7c3aed);
  --text:   #f1f5f9;
  --muted:  #94a3b8;
  --subtle: #475569;
  --bord:   rgba(255,255,255,0.07);
  --bord2:  rgba(99,130,235,0.3);
  --radius: 16px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
}

/* ── TYPOGRAPHY ── */
h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; }
h2 { font-size: clamp(26px, 3.5vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }
h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.3; }
p  { line-height: 1.75; }

.grad-text {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── NAV ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 0 48px;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(8,13,26,.82);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--bord);
  transition: background .3s;
}
#nav.scrolled { background: rgba(8,13,26,.97); }

.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo svg { display: block; }

.nav-links {
  display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.nav-links a {
  color: var(--muted); text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 6px 14px; border-radius: 6px;
  transition: all .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,.06); }

.nav-demo {
  background: var(--grad) !important; color: #fff !important;
  padding: 9px 20px !important; border-radius: 8px !important;
  font-weight: 700 !important; font-size: 14px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(37,99,235,.3);
  transition: all .2s !important;
}
.nav-demo:hover { box-shadow: 0 8px 28px rgba(37,99,235,.45) !important; transform: translateY(-1px); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 10px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  border: none; cursor: pointer; transition: all .22s;
}
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 8px 28px rgba(37,99,235,.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(37,99,235,.45); }

.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--bord2);
}
.btn-ghost:hover { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.5); transform: translateY(-2px); }

.btn-sm { padding: 10px 20px; font-size: 14px; }

/* ── LAYOUT ── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 48px; }
.section    { padding: 80px 48px; max-width: 1120px; margin: 0 auto; }
.section-sm { padding: 56px 48px; max-width: 1120px; margin: 0 auto; }

/* ── SECTION LABELS ── */
.s-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--light); margin-bottom: 18px;
}
.s-title { color: #fff; margin-bottom: 18px; }
.s-sub   { font-size: 17px; color: var(--muted); max-width: 580px; line-height: 1.8; }

/* ── CARDS ── */
.card {
  background: var(--bg2); border: 1px solid var(--bord);
  border-radius: var(--radius); padding: 32px;
  transition: all .3s;
}
.card:hover {
  border-color: var(--bord2);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(37,99,235,.1);
}

/* ── BADGE ── */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(37,99,235,.1); border: 1px solid rgba(37,99,235,.28);
  border-radius: 100px; padding: 6px 18px;
  font-size: 13px; font-weight: 500; color: var(--light);
  margin-bottom: 32px;
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--light);
  animation: pdot 2s infinite;
}
@keyframes pdot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.7); }
}

/* ── FADE IN ── */
.fi { opacity:0; transform:translateY(26px); transition: opacity .75s ease, transform .75s ease; }
.fi.on { opacity:1; transform:translateY(0); }
.fi.d1 { transition-delay: .1s; }
.fi.d2 { transition-delay: .2s; }
.fi.d3 { transition-delay: .3s; }
.fi.d4 { transition-delay: .4s; }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--bord);
  padding: 72px 48px 40px;
  max-width: 1120px; margin: 80px auto 0;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
}
.foot-tagline { font-size: 14px; color: var(--muted); margin-top: 18px; line-height: 1.75; max-width: 260px; }
.foot-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text); margin-bottom: 20px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot-col ul a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color .2s; }
.foot-col ul a:hover { color: var(--text); }
.foot-bottom {
  border-top: 1px solid var(--bord); padding: 22px 48px;
  max-width: 1120px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--subtle);
}

/* ── FLOATING WIDGET ── */
#liady-float {
  position: fixed; bottom: 0; right: 0;
  width: 400px; height: 100vh;
  z-index: 900; pointer-events: none;
}
#liady-float iframe {
  width: 100%; height: 100%; border: none;
  pointer-events: auto;
}

/* ── ACCENT COLORS ── */
:root {
  --rose:    #f43f5e;
  --amber:   #f59e0b;
  --emerald: #10b981;
  --cyan:    #06b6d4;
  --violet:  #a78bfa;
}

/* ── WATERMARK ── */
.wm {
  position:absolute; font-weight:900; color:#4080d0;
  opacity:.055; pointer-events:none; user-select:none;
  white-space:nowrap; line-height:1; z-index:0;
  font-family:'Inter',sans-serif; letter-spacing:-.04em;
}

/* ── ANIMATED GRID ── */
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(37,99,235,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.07) 1px, transparent 1px);
  background-size:56px 56px;
  animation:gdrift 22s linear infinite;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, black 0%, transparent 100%);
}
@keyframes gdrift { from{transform:translate(0,0)} to{transform:translate(56px,56px)} }

/* ── PAGE GLOW ── */
.page-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(37,99,235,.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 80% 90%, rgba(124,58,237,.12) 0%, transparent 60%);
}

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  position:relative; overflow:hidden;
  background:linear-gradient(175deg, #08173a 0%, #060e22 60%, #0a1635 100%);
  padding:120px 0 80px;
}
.page-hero-inner {
  max-width:1120px; margin:0 auto; padding:0 48px;
  position:relative; z-index:2;
}
.page-hero h1 { margin-bottom:18px; }
.page-hero .s-sub { max-width:640px; margin-bottom:32px; }

/* ── SECTION TAGS (cyan vibrant) ── */
.s-tag {
  display:inline-block; padding:5px 16px; border-radius:100px;
  background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.3);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:16px;
}

/* ── IMPACT BAND ── */
.impact-band {
  display:flex; align-items:center; gap:48px;
  background:var(--bg2); border:1px solid var(--bord); border-left:4px solid var(--rose);
  border-radius:20px; padding:44px 52px;
  margin:56px 48px; position:relative; overflow:hidden;
}
.impact-num {
  font-size:80px; font-weight:900; line-height:1;
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  flex-shrink:0;
}
.impact-num.rose { background:linear-gradient(135deg,#ff7b92,#f43f5e); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.impact-num.amber { background:linear-gradient(135deg,#fcd34d,#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.impact-num.emerald { background:linear-gradient(135deg,#6ee7b7,#10b981); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.impact-num.cyan { background:linear-gradient(135deg,#67e8f9,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.impact-label { font-size:22px; font-weight:800; color:#fff; margin-bottom:10px; }
.impact-sub { font-size:15px; color:var(--muted); line-height:1.8; }

/* ── STATS ROW ── */
.stats-row {
  display:flex; gap:48px; flex-wrap:wrap; margin:40px 0;
}
.stat-item { display:flex; flex-direction:column; gap:4px; }
.stat-val {
  font-size:40px; font-weight:900; line-height:1;
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-val.rose { background:linear-gradient(135deg,#ff7b92,#f43f5e); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-val.amber { background:linear-gradient(135deg,#fcd34d,#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-val.emerald { background:linear-gradient(135deg,#6ee7b7,#10b981); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-val.cyan { background:linear-gradient(135deg,#67e8f9,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-lbl { font-size:13px; color:var(--muted); }

/* ── CARD ACCENTS ── */
.card.accent-cyan    { border-left:3px solid var(--cyan); }
.card.accent-rose    { border-left:3px solid var(--rose); }
.card.accent-amber   { border-left:3px solid var(--amber); }
.card.accent-emerald { border-left:3px solid var(--emerald); }
.card.accent-violet  { border-left:3px solid var(--violet); }

/* ── ROI HIGHLIGHT BOX ── */
.roi-box {
  background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(6,182,212,.08));
  border:1px solid rgba(16,185,129,.25); border-radius:18px;
  padding:36px 44px; margin:40px 48px;
  display:flex; align-items:center; gap:32px;
}
.roi-icon { font-size:40px; flex-shrink:0; }
.roi-title { font-size:17px; font-weight:700; color:#fff; margin-bottom:6px; }
.roi-text { font-size:14px; color:var(--muted); line-height:1.8; }
.roi-num { font-size:52px; font-weight:900; background:linear-gradient(135deg,#6ee7b7,#10b981); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; flex-shrink:0; }

@media (max-width:900px) {
  .page-hero { padding:100px 0 60px; }
  .page-hero-inner { padding:0 20px; }
  .impact-band { flex-direction:column; padding:28px 20px; gap:20px; margin:40px 20px; }
  .stats-row { gap:28px; }
  .roi-box { flex-direction:column; margin:40px 20px; padding:28px 20px; }
}

/* ── DIVIDER ── */
hr.divider { border: none; border-top: 1px solid var(--bord); margin: 0 48px; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  #nav { padding: 0 20px; }
  .nav-links { display: none; }
  .container, .section, .section-sm, .page-hero { padding-left: 20px; padding-right: 20px; }
  footer { grid-template-columns: 1fr 1fr; gap: 36px; padding: 48px 20px 36px; }
  .foot-bottom { flex-direction: column; gap: 8px; text-align: center; padding: 20px; }
  #liady-float { width: 340px; }
}
@media (max-width: 600px) {
  footer { grid-template-columns: 1fr; }
  #liady-float { width: 100%; }
}