/* ============================================================================
   WeinBus, Marketing landing + demo cockpit
   ========================================================================== */

/* ---- Top nav ---------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(255,251,243,.82);
  backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(233,235,241,.7); }
.nav__in { max-width: var(--maxw); margin-inline: auto; height: var(--nav-h); padding-inline: clamp(16px,4vw,40px);
  display: flex; align-items: center; gap: 20px; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: var(--fw-x); font-size: var(--fs-lg); }
.nav__logo-img { height: clamp(38px, 4.4vw, 46px); width: auto; display: block; }
.nav__links { display: flex; gap: 6px; margin-inline-start: auto; }
.nav__links a { padding: 9px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); transition: all var(--t-fast); }
.nav__links a:hover { background: var(--surface); color: var(--ink); }
@media (max-width: 900px){ .nav__links { display: none; } }
.nav__cta { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
@media (min-width: 901px){ .nav__cta { margin-inline-start: 0; } }

/* ---- Page sections ---------------------------------------------------- */
.section { padding: clamp(56px, 8vw, 110px) 0; position: relative; }
.section--warm { background: var(--bg-warm); }
.section--sky { background: linear-gradient(180deg,#EAF6FF 0%, #FFFBF3 100%); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--brand-primary-soft); color: var(--brand-primary-deep); font-weight: 800; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .06em; }
.h-sec { font-size: var(--fs-3xl); margin: 16px 0 12px; max-width: 18ch; }
.sub-sec { font-size: var(--fs-lg); color: var(--ink-2); max-width: 56ch; }
.center .h-sec, .center .sub-sec { margin-inline: auto; }
.center { text-align: center; }

/* ---- Hero ------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--brand-sky); }
.hero__in { max-width: var(--maxw); margin-inline: auto; padding: clamp(30px,5vw,60px) clamp(16px,4vw,40px) clamp(50px,7vw,90px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,4vw,60px); align-items: center; }
@media (max-width: 880px){ .hero__in { grid-template-columns: 1fr; text-align: center; } }
.hero h1 { font-size: var(--fs-4xl); line-height: 1.04; }
.hero h1 .hl { color: var(--brand-primary-deep); }
.hero__sub { font-size: var(--fs-xl); color: var(--ink-2); margin: 20px 0 12px; max-width: 32ch; }
@media (max-width: 880px){ .hero__sub { margin-inline: auto; } }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 880px){ .hero__cta { justify-content: center; } }
.hero__art { position: relative; }
.hero__art img.main { width: 100%; border-radius: var(--r-2xl); box-shadow: var(--sh-xl); border: 6px solid #fff; }
.hero__float { position: absolute; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.float-1 { inset-block-start: 8%; inset-inline-start: -22px; animation: float 4s ease-in-out infinite; }
.float-2 { inset-block-end: 10%; inset-inline-end: -16px; animation: float 5s ease-in-out infinite .4s; }
.hero__mascot { position: absolute; inset-block-end: -14px; inset-inline-start: 40%; width: 74px; height: auto; animation: bobble 4.5s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(32,48,74,.2)); }
.cloud { position: absolute; opacity: .9; }

/* ---- Stat strip ------------------------------------------------------- */
.statstrip { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 760px){ .statstrip { grid-template-columns: repeat(2,1fr); } }
.statstrip .stat__num { font-size: var(--fs-3xl); color: var(--brand-primary-deep); }

/* ---- Feature / role cards -------------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width: 920px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }
.feature { padding: 26px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--sh-sm);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med); }
.feature:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.feature__ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 16px; }
.feature h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.feature p { font-size: var(--fs-sm); }
.step { position: relative; padding: 28px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-md); }
.step__n { position: absolute; inset-block-start: -18px; inset-inline-start: 24px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-gradient); color: var(--brand-on-primary); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; box-shadow: var(--sh-pop); }

/* ---- App showcase cards ---------------------------------------------- */
.appshow { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 920px){ .appshow { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.appshow__card { border-radius: var(--r-xl); padding: 26px; color: #fff; position: relative; overflow: hidden; min-height: 230px;
  display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--sh-lg); }
.appshow__card .em { font-size: 42px; position: absolute; inset-block-start: 22px; inset-inline-start: 24px; }

/* ---- Pricing ---------------------------------------------------------- */
.price { padding: 30px; border-radius: var(--r-xl); background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--sh-sm); display: flex; flex-direction: column; }
.price--hot { border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--brand-primary-soft), var(--sh-lg); transform: scale(1.02); }
.price__amt { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3xl); }
.price li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* ---- CTA banner ------------------------------------------------------- */
.cta-band { background: var(--brand-gradient); color: var(--brand-on-primary); border-radius: var(--r-2xl); padding: clamp(34px,5vw,64px);
  text-align: center; position: relative; overflow: hidden; box-shadow: var(--sh-xl); }
.cta-band h2 { color: var(--brand-on-primary); font-size: var(--fs-3xl); }

/* ---- Footer ----------------------------------------------------------- */
.footer { background: #182238; color: #cbd5e8; padding: 56px 0 30px; }
.footer a { color: #cbd5e8; opacity: .85; } .footer a:hover { opacity: 1; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px){ .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---- Demo cockpit ----------------------------------------------------- */
.democ-bar { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(255,251,243,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.democ-in { max-width: 1340px; margin-inline: auto; padding: 11px clamp(14px,3vw,26px); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cockpit { max-width: 1340px; margin-inline: auto; padding: 22px clamp(12px,3vw,26px) 70px; }
.cockpit-row { display: flex; gap: 26px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.cockpit-row + .cockpit-row { margin-top: 30px; }
.device { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.device-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); }
.device-label .em { font-size: 20px; }
.phone--demo { width: 336px; height: 812px; }
.browser--demo { width: min(1080px, 100%); }
.browser--demo .browser__body iframe { height: 580px; }
.demo-hint { text-align: center; max-width: 60ch; margin: 0 auto 6px; color: var(--ink-2); }
.pulse-btn { animation: ctaPulse 2.4s var(--ease) infinite; }
@keyframes ctaPulse { 0%,100% { box-shadow: var(--sh-pop); } 50% { box-shadow: 0 14px 40px rgba(245,166,35,.55); } }