:root {
  --ink: #162033;
  --muted: #64748b;
  --line: #dce6f3;
  --soft: #f5f8fc;
  --paper: #ffffff;
  --blue: #1463ff;
  --teal: #079c8e;
  --gold: #f4b23b;
  --rose: #ef476f;
  --violet: #7c3aed;
  --cyan: #06b6d4;
  --green: #22c55e;
  --orange: #fb6d3a;
  --shadow: 0 22px 60px rgba(15, 23, 42, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, Arial, Helvetica, sans-serif;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 45%, #fff8ed 100%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(220,230,243,.75);
}
.site-header.is-scrolled, .site-header.menu-open { box-shadow: 0 12px 32px rgba(15,23,42,.08); }
.nav-shell { min-height: 76px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; }
.brand img {width: 170px;height: 50px;border-radius: 12px;object-fit: contain;background: #fff;}
.brand span { display: grid; line-height: 1.05; }
.brand small { color: var(--muted); font-size: 11px; font-weight: 700; margin-top: 4px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; color: #334155; font-weight: 800; font-size: 14px; }
.site-nav a { position:relative; padding:8px 0; }
.site-nav a:after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:99px; background:linear-gradient(90deg,var(--blue),var(--teal)); transform:scaleX(0); transform-origin:left; transition:transform .24s ease; }
.site-nav a:hover { color: var(--blue); }
.site-nav a:hover:after { transform:scaleX(1); }
.mobile-nav-actions { display:none; }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 18px;
  font-weight: 900;
  border: 1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet) 48%, var(--teal)); box-shadow: 0 14px 28px rgba(20,99,255,.20); }
.btn-ghost { color: var(--ink); background: #fff; border-color: var(--line); }
.btn-dark { color:#fff; background:#162033; }
.btn:hover { transform: translateY(-2px); box-shadow:0 18px 36px rgba(15,23,42,.16); }
.nav-toggle { display:none; width:46px; height:46px; border:1px solid rgba(20,99,255,.16); border-radius:15px; background:linear-gradient(145deg,#fff,#eef6ff); box-shadow:0 12px 26px rgba(15,23,42,.08); }
.nav-toggle span { display:block; width:20px; height:2px; background:var(--ink); margin:4px auto; border-radius:99px; transition:transform .24s ease, opacity .24s ease, background .24s ease; }
.nav-toggle.is-open { background:linear-gradient(135deg,var(--blue),var(--violet),var(--teal)); border-color:transparent; }
.nav-toggle.is-open span { background:#fff; }
.nav-toggle.is-open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity:0; }
.nav-toggle.is-open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 15%, rgba(20,99,255,.13), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(7,156,142,.16), transparent 30%),
    radial-gradient(circle at 52% 78%, rgba(244,178,59,.20), transparent 28%),
    linear-gradient(135deg, #f8fbff, #eaf3ff 45%, #fff0f5 72%, #fff8ec);
}
.hero:after {
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-78px;
  height:150px;
  background:#fff;
  transform:rotate(-2deg);
  transform-origin:center;
  z-index:0;
}
.hero-pattern { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.hero-pattern span { position:absolute; display:block; border:1px solid rgba(20,99,255,.15); background:rgba(255,255,255,.34); box-shadow:0 18px 44px rgba(15,23,42,.08); }
.hero-pattern span:nth-child(1) { width:170px; height:86px; left:4%; top:18%; border-radius:22px; transform:rotate(-10deg); animation:floatPanel 7s ease-in-out infinite; }
.hero-pattern span:nth-child(2) { width:120px; height:120px; right:7%; top:14%; border-radius:28px; transform:rotate(14deg); animation:floatPanel 8s ease-in-out infinite reverse; }
.hero-pattern span:nth-child(3) { width:210px; height:70px; right:17%; bottom:18%; border-radius:999px; transform:rotate(-8deg); animation:floatPanel 9s ease-in-out infinite; }
.hero-grid { min-height: 660px; display:grid; grid-template-columns: 1.02fr .98fr; align-items:center; gap:46px; padding:72px 0 92px; }
.hero-grid, .section .site-shell { position:relative; z-index:1; }
.eyebrow { display:inline-flex; min-height:30px; align-items:center; border-radius:999px; padding:0 12px; background:linear-gradient(90deg,#eaf3ff,#f5eaff,#fff1df); color:#1457d9; font-weight:900; font-size:13px; border:1px solid rgba(124,58,237,.12); }
.hero h1 { margin:18px 0 16px; font-size:72px; line-height:.98; letter-spacing:0; }
.hero p { margin:0; color:#475569; font-size:19px; line-height:1.65; max-width:650px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:34px; max-width:620px; }
.stat { border:1px solid rgba(220,230,243,.9); background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(239,246,255,.78)); border-radius:16px; padding:16px; transition:transform .22s ease, box-shadow .22s ease; }
.stat:nth-child(2) { background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(236,253,245,.82)); }
.stat:nth-child(3) { background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,247,237,.86)); }
.stat:hover { transform:translateY(-4px); box-shadow:0 18px 42px rgba(15,23,42,.10); }
.stat strong { display:block; font-size:24px; }
.stat span { color:var(--muted); font-size:13px; font-weight:700; }
.phone-stage { position:relative; min-height:560px; display:grid; place-items:center; }
.floating-chip {
  position:absolute;
  z-index:3;
  min-height:38px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(220,230,243,.9);
  box-shadow:0 18px 40px rgba(15,23,42,.13);
  font-size:12px;
  font-weight:900;
  color:#1457d9;
  animation:chipFloat 5.5s ease-in-out infinite;
}
.chip-one { left:3%; top:18%; }
.chip-two { right:1%; bottom:24%; animation-delay:1s; color:#057c72; }
.phone-card {
  width:min(360px, 88vw);
  border-radius:34px;
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.9);
  position:relative;
  animation:phoneFloat 6s ease-in-out infinite;
}
.phone-card:after { content:""; position:absolute; top:-40%; left:-70%; width:54%; height:180%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform:rotate(22deg); animation:shine 4.6s ease-in-out infinite; }
.phone-cover { height:154px; background:linear-gradient(135deg,#1463ff,#7c3aed,#ef476f,#079c8e); background-size:220% 220%; animation:gradientShift 7s ease-in-out infinite; }
.phone-logo { width:104px; height:104px; border-radius:28px; margin:-52px auto 12px; background:#fff; padding:10px; box-shadow:0 16px 34px rgba(15,23,42,.18); }
.phone-logo img { width:100%; height:100%; object-fit:contain; }
.phone-body { text-align:center; padding:0 24px 24px; }
.phone-body h2 { margin:0; font-size:26px; }
.phone-body p { font-size:14px; color:var(--muted); margin:7px 0 18px; }
.mini-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mini-actions span { min-height:42px; border-radius:12px; background:#eef5ff; color:#1457d9; display:grid; place-items:center; font-weight:900; font-size:12px; }
.mini-actions span:nth-child(2) { background:#ecfdf5; color:#059669; }
.mini-actions span:nth-child(3) { background:#fff1f2; color:#e11d48; }
.contact-lines { margin-top:18px; display:grid; gap:10px; }
.contact-lines span { height:38px; border-radius:999px; background:linear-gradient(90deg,#f4f7fb,#eaf3ff); }
.contact-lines span:nth-child(2) { background:linear-gradient(90deg,#f4f7fb,#ecfdf5); }
.contact-lines span:nth-child(3) { background:linear-gradient(90deg,#f4f7fb,#fff7ed); }
.section { padding:82px 0; }
.section-soft {
  background:
    radial-gradient(circle at 12% 18%, rgba(124,58,237,.10), transparent 26%),
    radial-gradient(circle at 88% 70%, rgba(251,109,58,.12), transparent 28%),
    linear-gradient(135deg,#f5f8fc,#eef9ff 52%,#fff7ed);
}
.section-head { max-width:760px; margin:0 auto 34px; text-align:center; }
.section-head h2 { margin:0 0 12px; font-size:46px; line-height:1.08; }
.section-head p { margin:0; color:var(--muted); line-height:1.65; font-size:17px; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature-card, .step-card, .price-card, .audience-card {
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfdff);
  border-radius:18px;
  padding:24px;
  box-shadow:0 12px 34px rgba(15,23,42,.06);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.feature-card:hover, .step-card:hover, .audience-card:hover { transform:translateY(-7px); box-shadow:0 24px 50px rgba(15,23,42,.12); border-color:rgba(20,99,255,.20); }
.feature-card i, .step-card i { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue),var(--teal)); font-style:normal; font-weight:900; }
.feature-card:nth-child(2) i, .step-card:nth-child(2) i { background:linear-gradient(135deg,var(--violet),var(--rose)); }
.feature-card:nth-child(3) i, .step-card:nth-child(3) i { background:linear-gradient(135deg,var(--orange),var(--gold)); }
.feature-card:nth-child(4) i { background:linear-gradient(135deg,var(--green),var(--cyan)); }
.feature-card h3, .step-card h3, .audience-card h3 { margin:18px 0 8px; font-size:19px; }
.feature-card p, .step-card p, .audience-card p { margin:0; color:var(--muted); line-height:1.55; }
.design-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.design-tile { min-height:250px; border-radius:20px; background:#fff; padding:18px; box-shadow:var(--shadow); border:1px solid rgba(220,230,243,.8); transition:transform .24s ease, box-shadow .24s ease; }
.design-tile:hover { transform:translateY(-7px) rotate(-1deg); box-shadow:0 26px 58px rgba(15,23,42,.16); }
.design-preview { height:150px; border-radius:18px; background:linear-gradient(135deg,#1463ff,#079c8e); background-size:170% 170%; margin-bottom:14px; position:relative; overflow:hidden; animation:gradientShift 8s ease-in-out infinite; }
.design-preview:before { content:""; position:absolute; left:18px; right:18px; bottom:22px; height:42px; border-radius:14px; background:rgba(255,255,255,.78); box-shadow:0 12px 30px rgba(15,23,42,.12); }
.design-preview:after { content:""; position:absolute; left:50%; bottom:-28px; width:86px; height:86px; border-radius:50%; transform:translateX(-50%); background:#fff; box-shadow:0 0 0 8px rgba(255,255,255,.35); }
.design-tile:nth-child(2) .design-preview { background:linear-gradient(135deg,#141821,#ef476f); }
.design-tile:nth-child(3) .design-preview { background:linear-gradient(135deg,#7c3aed,#06b6d4); }
.design-tile:nth-child(4) .design-preview { background:linear-gradient(135deg,#f4b23b,#0f766e); }
.design-tile:nth-child(5) .design-preview { background:linear-gradient(135deg,#111827,#0ea5e9); }
.design-tile strong { font-size:16px; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pricing-wrap { display:grid; grid-template-columns:.85fr 1.15fr; gap:24px; align-items:start; }
.price-card { padding:32px; border:2px solid rgba(20,99,255,.16); position:relative; overflow:hidden; background:linear-gradient(145deg,#ffffff,#f4fbff 58%,#fff7ed); }
.price-card:before { content:""; position:absolute; inset:0 0 auto; height:7px; background:linear-gradient(90deg,var(--blue),var(--teal),var(--gold),var(--rose)); }
.price-card:hover { transform:translateY(-7px); box-shadow:0 26px 58px rgba(15,23,42,.15); }
.price { font-size:46px; font-weight:900; margin:10px 0; }
.price small { font-size:16px; color:var(--muted); }
.check-list { padding:0; margin:24px 0; list-style:none; display:grid; gap:12px; }
.check-list li { display:flex; gap:10px; color:#334155; font-weight:700; }
.check-list li:before { content:"\2713"; color:#0f9f6e; font-weight:900; }
.audience-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.audience-card:nth-child(1) { background:linear-gradient(145deg,#fff,#eff6ff); }
.audience-card:nth-child(2) { background:linear-gradient(145deg,#fff,#f5f3ff); }
.audience-card:nth-child(3) { background:linear-gradient(145deg,#fff,#ecfdf5); }
.audience-card:nth-child(4) { background:linear-gradient(145deg,#fff,#fff7ed); }
.cta-band { border-radius:28px; padding:42px; background:linear-gradient(135deg,#162033,#123f79 58%,#079c8e); background-size:160% 160%; color:#fff; display:flex; justify-content:space-between; gap:22px; align-items:center; animation:gradientShift 8s ease-in-out infinite; }
.cta-band h2 { margin:0 0 8px; font-size:34px; }
.cta-band p { margin:0; color:#dbeafe; }
.page-hero {
  position:relative;
  overflow:hidden;
  padding:94px 0 78px;
  background:
    radial-gradient(circle at 12% 22%, rgba(20,99,255,.16), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(124,58,237,.14), transparent 28%),
    radial-gradient(circle at 52% 86%, rgba(251,109,58,.15), transparent 30%),
    linear-gradient(135deg,#f8fbff,#eff6ff 48%,#fff7ed);
}
.page-hero:after {
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-72px;
  height:130px;
  background:#fff;
  transform:rotate(-2deg);
}
.page-hero-inner { position:relative; z-index:1; max-width:780px; text-align:center; }
.page-hero h1 { margin:18px 0 14px; font-size:58px; line-height:1; letter-spacing:0; }
.page-hero p { margin:0 auto; color:#475569; font-size:18px; line-height:1.7; max-width:720px; }
.terms-section { background:linear-gradient(180deg,#fff,#f8fbff); }
.terms-layout { display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start; }
.terms-summary {
  position:sticky;
  top:96px;
  border:1px solid rgba(220,230,243,.9);
  border-radius:24px;
  padding:28px;
  background:linear-gradient(145deg,#162033,#123f79 58%,#079c8e);
  color:#fff;
  box-shadow:var(--shadow);
}
.terms-summary h2 { margin:0 0 12px; font-size:28px; }
.terms-summary p { margin:0 0 22px; color:#dbeafe; line-height:1.7; }
.terms-summary .btn { background:#fff; color:#1457d9; box-shadow:none; }
.terms-content { display:grid; gap:16px; }
.terms-card {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(220,230,243,.9);
  border-radius:22px;
  padding:26px 28px 26px 96px;
  background:linear-gradient(145deg,#ffffff,#f8fbff);
  box-shadow:0 14px 36px rgba(15,23,42,.06);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.terms-card:hover { transform:translateY(-5px); box-shadow:0 24px 50px rgba(15,23,42,.12); border-color:rgba(20,99,255,.22); }
.terms-card:before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:linear-gradient(180deg,var(--blue),var(--violet),var(--teal));
}
.terms-card i {
  position:absolute;
  left:28px;
  top:26px;
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-style:normal;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--teal));
}
.terms-card:nth-child(2n) i { background:linear-gradient(135deg,var(--violet),var(--rose)); }
.terms-card:nth-child(3n) i { background:linear-gradient(135deg,var(--orange),var(--gold)); }
.terms-card h2 { margin:0 0 8px; font-size:22px; }
.terms-card p { margin:0; color:#52627a; line-height:1.7; }
.terms-contact-section { padding-top:0; }
.site-footer { background:#111827; color:#e5e7eb; padding-top:56px; }
.footer-grid { display:grid; grid-template-columns:1.3fr .7fr .9fr; gap:36px; }
.site-footer p, .site-footer a { color:#b9c3d1; line-height:1.7; }
.site-footer a { display:block; margin:8px 0; }
.site-footer h3 { color:#fff; margin:0 0 14px; }
.footer-brand img { background:#fff; }
.footer-bottom { margin-top:36px; border-top:1px solid rgba(255,255,255,.1); padding:18px 16px; text-align:center; color:#94a3b8; }
.reveal-on-scroll { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal-on-scroll.is-visible { opacity:1; transform:translateY(0); }
.feature-grid .reveal-on-scroll:nth-child(2), .design-strip .reveal-on-scroll:nth-child(2), .steps-grid .reveal-on-scroll:nth-child(2), .audience-grid .reveal-on-scroll:nth-child(2) { transition-delay:.08s; }
.feature-grid .reveal-on-scroll:nth-child(3), .design-strip .reveal-on-scroll:nth-child(3), .steps-grid .reveal-on-scroll:nth-child(3), .audience-grid .reveal-on-scroll:nth-child(3) { transition-delay:.16s; }
.feature-grid .reveal-on-scroll:nth-child(4), .design-strip .reveal-on-scroll:nth-child(4), .audience-grid .reveal-on-scroll:nth-child(4) { transition-delay:.24s; }
.design-strip .reveal-on-scroll:nth-child(5) { transition-delay:.32s; }
@keyframes phoneFloat {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-14px); }
}
@keyframes chipFloat {
  0%, 100% { transform:translateY(0) rotate(0); }
  50% { transform:translateY(-12px) rotate(-2deg); }
}
@keyframes floatPanel {
  0%, 100% { translate:0 0; }
  50% { translate:0 -18px; }
}
@keyframes shine {
  0%, 36% { left:-75%; }
  58%, 100% { left:120%; }
}
@keyframes gradientShift {
  0%, 100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  .reveal-on-scroll { opacity:1; transform:none; }
}
@media (max-width: 980px) {
  .site-nav, .nav-actions { display:none; }
  .nav-toggle { display:block; margin-left:auto; }
  .site-nav.is-open {
    position:absolute;
    left:16px;
    right:16px;
    top:86px;
    display:grid;
    gap:10px;
    padding:18px;
    border:1px solid rgba(220,230,243,.86);
    border-radius:24px;
    background:
      radial-gradient(circle at 12% 12%, rgba(20,99,255,.13), transparent 34%),
      radial-gradient(circle at 88% 22%, rgba(124,58,237,.12), transparent 32%),
      linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,250,255,.96));
    box-shadow:0 26px 70px rgba(15,23,42,.18);
    animation:mobileMenuIn .22s ease both;
    backdrop-filter:blur(16px);
  }
  .site-nav.is-open:before {
    content:"Menu";
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0;
    padding:0 4px 4px;
  }
  .site-nav.is-open a {
    min-height:48px;
    display:flex;
    align-items:center;
    padding:0 14px;
    border:1px solid rgba(220,230,243,.78);
    border-radius:14px;
    background:rgba(255,255,255,.78);
    color:#162033;
    box-shadow:0 10px 22px rgba(15,23,42,.05);
  }
  .site-nav.is-open a:hover { background:#eef6ff; color:#1457d9; transform:translateX(3px); }
  .site-nav.is-open a:after { display:none; }
  .mobile-nav-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
  .mobile-nav-actions .btn { width:100%; padding:0 12px; }
  .hero-grid, .pricing-wrap { grid-template-columns:1fr; }
  .hero-grid { padding-top:48px; }
  .hero h1 { font-size:54px; }
  .section-head h2 { font-size:38px; }
  .page-hero h1 { font-size:44px; }
  .terms-layout { grid-template-columns:1fr; }
  .terms-summary { position:relative; top:auto; }
  .feature-grid, .design-strip { grid-template-columns:repeat(2,1fr); }
  .floating-chip { display:none; }
}
@keyframes mobileMenuIn {
  from { opacity:0; transform:translateY(-10px) scale(.98); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@media (max-width: 680px) {
  .hero h1 { font-size:40px; }
  .section-head h2 { font-size:30px; }
  .page-hero { padding:64px 0 54px; }
  .page-hero h1 { font-size:36px; }
  .terms-card { padding:84px 20px 22px; }
  .terms-card i { left:20px; top:22px; }
  .hero-stats, .feature-grid, .steps-grid, .design-strip, .audience-grid, .footer-grid { grid-template-columns:1fr; }
  .hero-actions .btn, .cta-band .btn { width:100%; }
  .cta-band { display:block; padding:28px; }
  .cta-band .btn { margin-top:20px; }
  .phone-stage { min-height:460px; }
  .section { padding:58px 0; }
  .mobile-nav-actions { grid-template-columns:1fr; }
}