:root{--primary:#006fd9;--primary-2:#3aa0ff;--ink:#0b1220;--ring:#e2e8f0;--muted:#94a3b8;--lime:#00ffa5}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background-color: #0b1220 !important;background:#0b1220 !important;color:#e6edf7;overflow-x:hidden}
.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.title{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:800;margin-bottom:.75rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:none;border-radius:999px;padding:.95rem 1.25rem;font-weight:800;cursor:pointer;transition:transform .08s ease, box-shadow .25s ease, background .25s ease;background:linear-gradient(92deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 16px 42px rgba(0,111,217,.35)}
.btn:hover{transform:translateY(-1px);box-shadow:0 22px 60px rgba(0,111,217,.5)}
.btn-lg{padding:1.05rem 1.35rem;font-size:1.05rem}
.btn-revenue{background:linear-gradient(95deg,var(--primary),var(--primary-2) 45%,var(--lime));box-shadow:0 16px 42px rgba(0,255,165,.35)}
.btn-revenue:hover{box-shadow:0 22px 60px rgba(0,255,165,.45)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 16px 42px rgba(0,111,217,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 22px 60px rgba(0,111,217,.5)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.1rem 0 1.4rem}
.hero-ctas .btn{margin-top:0}
@media(max-width:768px){
  .hero-ctas{justify-content:center}
  .hero-ctas .btn{flex:1 1 100%;max-width:320px;justify-content:center}
}
.hero-ctas [data-koalendar-widget],
.demo-ctas [data-koalendar-widget]{font-weight:800!important;font-size:1.05rem!important;letter-spacing:-.01em}

/* Hero Section */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden}
.bg-anim{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
canvas#animated-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;opacity:0.5}
.hero-left{position:relative;display:flex;align-items:center;z-index:2}
.hero-right{position:relative;display:flex;align-items:center;justify-content:center;z-index:2}

.headline{font-size:2.8rem;font-weight:800;letter-spacing:-.02em;color:#e6edf7}
.headline .spark{background:linear-gradient(92deg,#8bd3ff 0%,#3aa0ff 50%,#00ffa5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{margin:.9rem 0 1.25rem;font-size:1.08rem;color:#c7d2fe}

/* ===== Desktop alignment fix: bring form and phone closer ===== */

/* Tighten grid spacing and constrain total hero width */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;        /* equal halves instead of 1.1 / 0.9 */
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 60px);          /* responsive gap, smaller on wide screens */
  max-width: 1200px;                    /* prevent excessive stretching */
  margin-inline: auto;                  /* center the grid block */
  overflow-x: clip;
}

/* Keep hero columns flexible but close */
.hero-left, .hero-right {
  min-width: 0;
  flex: 1;
}

/* Ensure inner containers stretch evenly without extra padding */
.hero-left .container,
.hero-right .container {
  width: 100%;
  max-width: none;
  padding-inline: 0 !important;
}

/* Center the phone image nicely in its side */
.hero-right .mock-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The content column stays centered vertically */
.hero-left {
  display: flex;
  align-items: center;
}

#vast_form_save {
  padding: 10px;  
}

/* --- Responsive refinement --- */
@media (max-width: 1280px) {
  .hero {
    gap: clamp(16px, 3vw, 40px);
    max-width: 1080px;
  }
}
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;          /* stack on tablets */
    max-width: 760px;
  }
}

@media (max-width: 768px) {
  .hero-content {
    padding: 1.75rem 16px;   /* keep symmetric gutters on small screens */
    text-align: center;
    align-items: center;
  }
}

.form-card{background:#0f172a;border:1px solid rgba(226,232,240,.3);border-radius:16px;box-shadow:0 10px 30px rgba(2,6,23,.35)}
#vast_form_save {
	margin-bottom: 15px !important;
}

.mock-wrap{position:relative}
.hero-image{width:420px;max-width:90%;height:auto;border-radius:16px;box-shadow:0 24px 50px rgba(0,0,0,.55);animation:bookfloat 8s ease-in-out infinite}
@keyframes bookfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Sections */
section.block{padding:4rem 0;background:#ffffff;color:#0b1220}
section.block.alt{background:#f8fafc}
h2.section{font-size:2rem;font-weight:800;margin-bottom:.85rem;color:#0b1220}
p.lead{font-size:1.05rem;color:#334155;max-width:880px;margin-bottom:1.5rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--ring);border-radius:14px;padding:1rem;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.12)}

.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;background:#eff6ff;color:#0b3b82;border:1px solid #dbeafe}
.text-center{text-align:center}
.muted{color:#64748b}
.list-clean{list-style:none;margin:0;padding:0}
.list-check li{position:relative;padding-left:1.6rem;margin:.35rem 0}
.list-check li:before{content:"✔";position:absolute;left:0;color:#16a34a;font-weight:700}

.demo{padding:3.5rem 0;text-align:center;background:#0b1220;color:#e6edf7}
.demo .lead{color:#cfe0ff;margin:0 auto 1.1rem;max-width:720px}
.demo .koa-wrap{margin-top:1rem}
.demo-ctas{display:flex;flex-direction:column;gap:.8rem;align-items:center}
.demo-ctas .btn{width:100%;max-width:360px;text-decoration:none}
.demo-ctas .btn:hover{transform:translateY(-1px)}

/* Footer */
.site-footer{background:#ffffff;color:#64748b}
.site-footer .container{display:flex;justify-content:center;align-items:center;text-align:center}

/* Responsive */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr}
  .headline{font-size:2.2rem}
  .hero-right{padding:2rem 0}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}


:root{
  --phone-w: clamp(260px, 34vw, 420px);
  --bezel: #05070b;
  --edge: #2a2f3a;
  --glass-r: 38px;             /* screen corner radius */
  --safe-pad: 0px;             /* add if you want extra inset from edges */
}

.iphone{
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  border-radius: 56px;
  background: var(--bezel);
  box-shadow: 0 28px 60px rgba(0,0,0,.55),
    inset 0 0 0 2px var(--edge);
  padding: 20px;                       /* bezel thickness */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}

.iphone__notch{
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 16px;
  background: #0b0f15;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}

.iphone__screen{
  position: relative;
  width: 100%; height: 100%;
  border-radius: var(--glass-r);
  overflow: hidden;
  padding: var(--safe-pad);            /* optional safety inset */
  background: #000;                    /* letterbox color */
}

.iphone__screen video{
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;                 /* prevents cropping at edges */
  background: #000;
}

.iphone__play{
  position: absolute;
  inset: auto auto 12px 12px;          /* default bottom-left */
  left: 50%; bottom: 50%; transform: translate(-50%, 50%); /* center */
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: 999px;
  color: white;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.iphone__play:hover{ transform: translate(-50%, 50%) scale(1.04); }
.iphone__play.is-hidden{ opacity: 0; pointer-events: none; }