:root{
  --bg:#0b1220; --bg2:#0a1020; --card:#0e172a; --ink:#e5f2ff; --muted:#a8c2da;
  --brand:#0ea5e9; --brand-2:#22d3ee; --accent:#38bdf8;
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --whats:#25D366;
  --shadow: 0 10px 35px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg2) 40%,var(--bg));color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
img{max-width:100%;display:block;height:auto}
a{color:var(--accent);text-decoration:none}
.container{width:min(1120px,92vw);margin:0 auto}
.row{display:flex;gap:16px;align-items:center}
.between{justify-content:space-between}.start{align-items:flex-start}.center{align-items:center}
.gap{gap:12px}
.hidden{display:none}
.center{text-align:center}
.big{padding:14px 20px;font-size:1.02rem;border-radius:14px}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.12);color:var(--ink);background:transparent;transition:.2s;box-shadow:none}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));border:none;box-shadow:var(--shadow);color:#06121a}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.2)}
.btn.small{padding:8px 12px;font-size:.9rem}
.btn.whats{background:var(--whats);border:none;color:#04160a;box-shadow:var(--shadow)}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(10px);background:rgba(8,12,24,.5);border-bottom:1px solid rgba(255,255,255,.06);z-index:50}
.brand{display:flex;gap:10px;align-items:center;font-weight:800}
.brand span{letter-spacing:.3px}
.nav a{padding:18px 10px;color:var(--muted)} .nav .cta{margin-left:8px}

/* Hero */
.hero{padding:64px 0 28px}
.hero-content{display:flex;flex-wrap:wrap;align-items:center;gap:3rem}
.hero h1{font-size: clamp(30px, 5vw, 56px);line-height:1.1;margin:0 0 8px}
.hero .muted{color:#dbe8f6}
.hero .lead{max-width:720px;color:var(--muted);margin:6px 0 16px}
.type-row{height:28px;margin:6px 0 8px}
.typewriter{font-weight:800;color:#b9e9ff}
.cta-row{display:flex;gap:12px;margin:14px 0 6px}
.trust{display:flex;gap:12px;flex-wrap:wrap;color:#b9d1e6;margin:14px 0 0;padding:0;list-style:none}

/* Keep the hero image crisp and never distorted */
.hero-img-wrap{flex:1 1 520px;min-width:280px;text-align:right}
.hero-img{
  width:100%;
  height:auto;               /* critical: never set a fixed height */
  max-width: min(1040px, 94%);
  border-radius:20px;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.06);
  image-rendering:auto;      /* best browser default */
}

/* On small screens, make sure the hero art never dominates the viewport */
@media (max-width: 640px){
  .hero-img{
    max-height: 55vh;        /* clamp height to avoid overwhelming the screen */
    object-fit: contain;     /* show entire image within the box */
  }
}

/* Bar */
.bar{position:sticky;top:0;z-index:60;text-align:center;padding:10px 12px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#06121c;font-weight:800;border-bottom:1px solid rgba(0,0,0,.2)}
.bar-btn{margin-left:10px;border:none;background:#06121c;color:#e6fbff;border-radius:999px;padding:6px 10px;cursor:pointer}

/* Highlight / Live */
.highlight{
  padding:36px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.badges .badge{
  display:inline-block;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  margin-right:8px;
  color:#d8e9f9;
}

.tiktok-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  text-decoration:none;
  color:inherit;
  max-width:560px;
}

.tiktok-preview{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  background:#0b1426;
}
.tiktok-preview img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

/* Small overlay button centered on the preview */
.tiktok-preview .overlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  color:#eaf6ff;
  font-weight:700;
  backdrop-filter: blur(6px);
}
.tiktok-icon{width:18px;height:18px;display:block;color:#b6e6fb}

/* Live status card */
.live-card{background:var(--card);padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow);min-width:260px;color:#cfe3f6}
.live-dot{width:10px;height:10px;border-radius:20px;background:var(--err);display:inline-block;margin-right:8px;vertical-align:middle}

#live .container{gap:24px;align-items:flex-start;flex-wrap:wrap}
#live .live-left{width:min(520px, 100%)}

/* Work */
.work{padding:56px 0}
h2{font-size:28px;margin:0 0 16px}
.grid{display:grid; gap:16px}
.work .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.card img{aspect-ratio: 4/3; object-fit: cover}
.card figcaption{padding:12px 14px;color:var(--muted)}

/* Social proof */
.social-proof{padding:48px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.quotes blockquote{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px 18px;color:#d7e8f8}
.quotes blockquote span{display:block;color:#9eb8d0;margin-top:6px;font-size:.95rem}

/* Pricing */
.pricing{padding:56px 0}
.price-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.price-card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px 18px 20px;position:relative;display:flex;flex-direction:column}
.price-card .price{font-size:32px;margin:10px 0;color:#eaf6ff}
.price-card .flag{position:absolute;top:10px;right:10px;background:linear-gradient(90deg,var(--brand),var(--brand-2));padding:6px 10px;border-radius:10px;color:#081019;font-weight:800}
.price-card.featured{transform:scale(1.02);box-shadow:var(--shadow)}
.price-list{margin:0 0 1.25rem;padding:0 0 0 1.1rem;list-style:disc;color:#c9d6e0;line-height:1.5}
.price-card .btn{align-self:flex-start;margin-top:auto}
.fine{color:#9fb5cb;font-size:.95rem}
.fine.center{text-align:center;margin-top:12px}

/* How */
.how{padding:56px 0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:0;list-style:decimal inside;color:#c7daec}
.steps li{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px}

/* CTA form */
.cta{padding:56px 0}
#leadForm{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
#leadForm .row{display:flex;gap:12px;margin:8px 0;flex-wrap:wrap}
#leadForm input,#leadForm select{flex:1;min-width:220px;padding:12px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#0b1426;color:var(--ink)}
#leadForm button{min-width:170px}

/* FAQ / Footer */
.faq{padding:56px 0;border-top:1px solid rgba(255,255,255,.06)}
details{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 14px;margin:12px 0}
details summary{cursor:pointer;color:#dbeeff}
.site-footer{padding:18px 0;color:#bcd1e6}
.site-footer .row a{color:#bcd1e6}
.noscript{padding:14px;background:#fff;color:#111}

/* Mobile */
@media (max-width:720px){
  .nav{display:none}
}

/* Pricing Grid & Cards (alt block at bottom if needed by older pages) */
.pricing { padding: 4rem 0 3rem; }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 24px; align-items: stretch; }
.price-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.price-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,0.28); border-color: rgba(61,185,245,0.45); }
.price-card .flag { position: absolute; top: -12px; right: 16px; background: #3db9f5; color: #0b1722; font-weight: 700; font-size: .8rem; padding: 6px 10px; border-radius: 999px; box-shadow: 0 6px 18px rgba(61,185,245,.35); }
.price-card h3 { margin: 0 0 .25rem; font-size: 1.25rem; color: #e6f6ff; }
.price-card .price { margin: .25rem 0 1rem; font-size: 2rem; font-weight: 800; letter-spacing: .3px; color: #b6e6fb; }
.price-card .fine { margin-top: .75rem; color: #99a8b5; font-size: .9rem; }
@media (max-width: 1080px) { .price-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
@media (max-width: 720px)  { .price-grid { grid-template-columns: 1fr; } .price-card .price { font-size: 1.8rem; } }