/* ═══════════════════════════════════════════════
   WEEKORA - WHITE / LIGHT THEME
   ═══════════════════════════════════════════════ */

:root{
  --bg:#f9f6fb;
  --bg-2:#f1eaf6;
  --surface:rgba(113,75,103,0.04);
  --surface-2:rgba(113,75,103,0.07);
  --text:#1a0e22;
  --muted:rgba(26,14,34,0.50);
  --border:rgba(113,75,103,0.13);
  --border-strong:rgba(113,75,103,0.24);

  /* Brand palette */
  --color-accent:#714b67;
  --color-accent-hover:#5a3c52;
  --primary:linear-gradient(135deg, #714b67 0%, #8b5e82 100%);
  --primary-hover:linear-gradient(135deg, #5a3c52 0%, #714b67 100%);
  --primary-solid:#714b67;
  --primary-light:rgba(113,75,103,0.08);
  --primary-color:#714b67;
  --primary-rgb:113,75,103;

  /* Legacy tokens */
  --plum:var(--color-accent);
  --plum-2:#8b5e82;
  --plum-3:var(--color-accent);
  --pink:#8b5e82;
  --cyan:#9a6e94;
  --gold:#6b3d61;

  --grad-1:var(--primary);
  --grad-2:var(--primary-hover);
  --grad-text:linear-gradient(90deg, #2d1235 0%, #714b67 40%, #a07098 65%, #2d1235 100%);

  --shadow-glow:0 30px 80px -20px rgba(113,75,103,0.28);
  --shadow-card:0 20px 60px rgba(113,75,103,0.14);

  --radius:20px;
  --radius-lg:28px;
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background:var(--bg)}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Animated background — light version */
.bg-grid{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 15% -10%, rgba(var(--primary-rgb),0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 10%, rgba(139,94,130,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(215,179,207,0.10), transparent 60%),
    var(--bg);
}
.bg-grid::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(113,75,103,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113,75,103,0.07) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
}
.bg-noise{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.25; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .44  0 0 0 0 .29  0 0 0 0 .40  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Cursor spotlight */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,94,130,0.12), rgba(var(--primary-rgb),0.06) 40%, transparent 70%);
  transform:translate(-50%,-50%); pointer-events:none; z-index:-1;
  transition:opacity .3s ease;
  mix-blend-mode:multiply;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
@media (max-width:640px){
  .container{width:min(var(--max), calc(100% - 28px))}
}

/* Skip link */
.skip{position:absolute;left:-999px;top:10px;background:#1a0e22;color:#fff;padding:10px 12px;border-radius:10px;z-index:9999}
.skip:focus{left:12px}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  width:100%;
  padding:14px 0 0;
  margin:0;
  transition:padding .28s ease;
}
.nav__inner{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:16px 20px;
  padding:11px 16px 11px 20px;
  background:rgba(249,246,251,0.78);
  border:1px solid var(--border);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-radius:999px;
  box-shadow:0 6px 28px rgba(113,75,103,0.11), 0 1px 0 rgba(255,255,255,0.92) inset;
  transition:transform .28s ease, border-radius .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease;
  will-change:transform;
}
.nav--stuck{padding:6px 0 0}
.nav--stuck .nav__inner{
  transform:translateY(-6px);
  border-radius:18px;
  background:rgba(249,246,251,0.92);
  border-color:rgba(113,75,103,0.20);
  box-shadow:0 14px 50px rgba(113,75,103,0.18), 0 1px 0 rgba(255,255,255,0.95) inset;
}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;font-size:18px;color:var(--text);justify-self:start}
.brand__logo{height:30px;width:auto;display:block}
.brand-mark{
  width:28px;height:28px;border-radius:9px;
  background:var(--grad-1);
  display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(var(--primary-rgb),0.38), inset 0 0 0 1px rgba(255,255,255,0.25);
  position:relative; overflow:hidden;
}
.brand-mark::before{
  content:""; position:absolute; inset:0;
  background:conic-gradient(from 0deg, transparent, rgba(255,255,255,0.6), transparent 30%);
  animation:spin 4s linear infinite;
}
.brand-mark span,
.brand-mark img{
  position:relative; z-index:1; color:#fff; font-weight:900; font-size:13px;
}
.brand-mark img{
  width:18px; height:18px; display:block; object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,0.25));
}

/* Tabler icons */
.ti svg{display:block}
.ico-lg .ti svg{width:22px;height:22px}
.float-tag .ico .ti svg{width:14px;height:14px}
.nav__links{
  display:flex; gap:4px; justify-self:center;
  padding:0 6px;
}
.nav__links a{
  padding:8px 16px; border-radius:999px; font-size:14px; font-weight:500;
  color:rgba(26,14,34,0.58); letter-spacing:.01em;
  transition:.25s ease; position:relative;
}
.nav__links a:hover{color:var(--text); background:rgba(113,75,103,0.09)}
.nav__cta{display:flex; gap:8px; align-items:center; justify-self:end}
@media (min-width: 781px) {
  .nav__toggle {
    display: none;
  }
}
.nav__toggle{
  display:none;
  align-items:center; justify-content:center; gap:0;
  width:44px; height:44px; padding:0;
  border:1px solid var(--border-strong);
  border-radius:12px;
  background:rgba(255,255,255,0.85);
  color:var(--text);
  cursor:pointer;
  justify-self:center;
  transition:background .2s ease, border-color .2s ease;
}
.nav__toggle:hover{background:rgba(255,255,255,0.98); border-color:rgba(113,75,103,0.28)}
.nav__toggle:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px}
.nav__toggleLabel{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.nav__toggleBars{
  display:grid; gap:5px; width:18px;
}
.nav__toggleBars span{
  display:block; height:2px; border-radius:2px;
  background:var(--text);
  transition:transform .25s ease, opacity .25s ease, width .25s ease;
}
.nav--menu-open .nav__toggleBars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav--menu-open .nav__toggleBars span:nth-child(2){opacity:0; width:0}
.nav--menu-open .nav__toggleBars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__backdrop{
  position:fixed; inset:0; z-index:45;
  background:rgba(26,14,34,0.35);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; font-weight:600; font-size:14px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn--tiny{padding:8px 14px; font-size:13px}
.btn--primary{
  color:#fff; background:var(--grad-1); background-size:200% 200%;
  box-shadow:0 10px 30px rgba(var(--primary-rgb),0.32), inset 0 0 0 1px rgba(255,255,255,0.22);
  animation:gradShift 6s ease infinite;
}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 18px 50px rgba(var(--primary-rgb),0.45)}
.btn--ghost{
  color:var(--text); background:rgba(255,255,255,0.7); border-color:var(--border-strong);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(113,75,103,0.08);
}
.btn--ghost:hover{background:rgba(255,255,255,0.95); transform:translateY(-2px); box-shadow:0 6px 20px rgba(113,75,103,0.14)}
.btn .arrow{display:inline-block; transition:transform .3s ease}
.btn:hover .arrow{transform:translateX(4px)}

/* HERO */
.hero{position:relative; padding:72px 0 56px; overflow:hidden}
@media (min-width:981px){.hero{padding:88px 0 64px}}
.orbs{position:absolute; inset:0; pointer-events:none; z-index:0}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; mix-blend-mode:multiply}
.orb--a{width:520px;height:520px; background:#c9a0be; top:-120px; left:-120px; animation:float1 14s ease-in-out infinite}
.orb--b{width:480px;height:480px; background:#b8849c; top:80px; right:-140px; animation:float2 18s ease-in-out infinite}
.orb--c{width:380px;height:380px; background:#e0c8da; bottom:-160px; left:30%; animation:float3 16s ease-in-out infinite; opacity:.28}

.hero__inner{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center}
.hero__inner:has(.hero-anim){grid-template-columns:minmax(320px, 0.92fr) minmax(380px, 1.18fr); gap:52px; align-items:center}
.hero__copy{min-width:0}
@media (max-width:980px){.hero__inner{grid-template-columns:1fr; gap:40px}}
@media (max-width:1100px) and (min-width:981px){
  .hero__inner:has(.hero-anim){grid-template-columns:minmax(280px, 0.96fr) minmax(340px, 1.12fr); gap:40px}
}

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px 7px 8px; border-radius:999px;
  background:rgba(255,255,255,0.7); border:1px solid var(--border);
  font-size:12.5px; color:var(--muted); letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(113,75,103,0.08);
}
.chip .pulse-dot{
  width:8px;height:8px;border-radius:50%; background:var(--plum-2); position:relative;
  box-shadow:0 0 0 0 rgba(139,94,130,.55); animation:pulse 2s infinite;
}

h1,h2,h3{font-family:'Space Grotesk',Inter,sans-serif; letter-spacing:-0.025em; margin:0; color:var(--text)}
h1{
  font-size:clamp(40px, 5.4vw, 72px); line-height:1.04; font-weight:700; margin:20px 0 20px;
  text-wrap:balance;
}
.hero__copy h1{max-width:12.5em}
.hero__line{display:block}
.hero__line + .hero__line{margin-top:0.06em}
h1 .grad{
  background:var(--grad-text); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:textShine 6s linear infinite;
}
.hero__copy p.lead{color:var(--muted); font-size:clamp(16px, 1.6vw, 18px); max-width:34em; line-height:1.6}
.hero__actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.hero__meta{display:flex; gap:24px; flex-wrap:wrap; margin-top:34px; color:var(--muted); font-size:13px}
.hero__meta span{display:inline-flex; align-items:center; gap:8px}
.hero__meta span::before{content:""; width:6px;height:6px;border-radius:50%; background:var(--grad-1)}

/* Hero mockup */
.mockup{position:relative; perspective:1400px;}
.mockup__inner{
  transform:rotateX(6deg) rotateY(-10deg) rotateZ(1deg);
  transform-style:preserve-3d;
  transition:transform .6s ease;
}
.hero-anim .mockup__inner{
  position:relative;
  z-index:1;
  transition:none;
}

/* Hero animation embed */
.hero-anim{
  transform-style:preserve-3d;
  margin-bottom:20px;
  align-self:center;
  width:100%;
  max-width:640px;
  justify-self:end;
}
.hero-anim__halo{
  position:absolute;
  inset:-18px -14px -22px -14px;
  border-radius:30px;
  background:
    radial-gradient(ellipse 70% 55% at 38% 22%, rgba(139,94,130,0.22), transparent 62%),
    radial-gradient(ellipse 60% 50% at 78% 88%, rgba(30,144,255,0.14), transparent 58%);
  pointer-events:none;
  z-index:0;
  opacity:0.9;
  transform:rotateX(6deg) rotateY(-10deg) rotateZ(1deg);
  transform-origin:center center;
}
.hero-anim__shadow{
  position:absolute;
  inset:0;
  border-radius:24px;
  background:radial-gradient(ellipse 88% 72% at 52% 68%, rgba(3, 10, 20, 0.78) 0%, rgba(113,75,103,0.22) 48%, transparent 78%);
  filter:blur(22px);
  pointer-events:none;
  z-index:0;
  opacity:0.92;
  transform:rotateX(6deg) rotateY(-10deg) rotateZ(1deg) translate3d(10px, 22px, -48px) scale(0.94, 0.9);
  transform-origin:center center;
}
.hero-anim__frame{
  position:relative;
  z-index:1;
  aspect-ratio:16/11;
  min-height:440px;
  border-radius:24px;
  overflow:hidden;
  background:#030a14;
  border:1px solid rgba(113,75,103,0.28);
  box-shadow:
    0 32px 80px -28px rgba(3,10,20,0.65),
    0 0 0 1px rgba(58,160,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.hero-anim__frame::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:2;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
  background:linear-gradient(145deg, rgba(255,255,255,0.04) 0%, transparent 42%, transparent 68%, rgba(113,75,103,0.06) 100%);
}
.hero-anim__frame iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
@media (min-width:1200px){
  .hero-anim__frame{min-height:500px}
  .hero-anim{max-width:680px}
}
@media (max-width:980px){
  .hero-anim{max-width:none; justify-self:stretch; margin-bottom:8px}
  .hero-anim__frame{min-height:320px; aspect-ratio:4/3}
  .hero-anim__halo{display:none}
  .hero__inner:has(.hero-anim){grid-template-columns:1fr}
  .hero__copy{order:1}
  .hero-anim{order:2}
}
.hero__marquee{margin-top:60px}
@media (max-width:640px){.hero__marquee{margin-top:40px}}
.shot{
  background:rgba(255,255,255,0.82);
  border:1px solid var(--border-strong);
  border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow-glow), var(--shadow-card);
  backdrop-filter:blur(20px);
}
.shot__chrome{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:rgba(249,246,251,0.9);
}
.dots{display:flex; gap:6px}
.dot{width:11px;height:11px;border-radius:50%}
.dot:nth-child(1){background:#ff5f57}
.dot:nth-child(2){background:#febc2e}
.dot:nth-child(3){background:#28c840}
.shot__addr{font-size:12px; color:var(--muted); margin-left:6px}

.shot__body{padding:18px; display:grid; grid-template-columns:140px 1fr; gap:14px; min-height:340px}
.side{display:flex; flex-direction:column; gap:8px}
.side .item{
  font-size:12px; padding:9px 11px; border-radius:10px; color:var(--muted);
  border:1px solid var(--border); background:rgba(255,255,255,0.7);
}
.side .item.active{
  color:var(--text); background:linear-gradient(135deg, rgba(var(--primary-rgb),0.14), rgba(139,94,130,0.08));
  border-color:rgba(113,75,103,0.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
}
.cal{display:grid; grid-template-rows:auto 1fr; gap:10px}
.cal__head{display:grid; grid-template-columns:60px repeat(5,1fr); gap:6px; font-size:11px; color:var(--muted)}
.cal__head div{padding:6px 8px; border-radius:8px; background:rgba(113,75,103,0.05); text-align:center}
.cal__body{display:grid; grid-template-columns:60px repeat(5,1fr); gap:6px}
.cal__time{font-size:10px; color:var(--muted); padding:6px}
.cal__cell{
  position:relative; min-height:36px; border-radius:8px;
  background:rgba(113,75,103,0.03); border:1px dashed var(--border);
}
.shift{
  position:absolute; left:4px; right:4px; padding:6px 8px;
  border-radius:8px; font-size:10.5px; font-weight:600;
  box-shadow:0 4px 14px rgba(113,75,103,0.22);
  animation:popIn .6s cubic-bezier(.2,1,.3,1) backwards;
  text-align:center;
}
.shift.s1{top:4px; height:28px; background:linear-gradient(135deg,#714b67,#8b5e82); color:#fff; animation-delay:.1s}
.shift.s2{top:4px; height:28px; background:linear-gradient(135deg,#c9a0be,#714b67); color:#fff; animation-delay:.2s}
.shift.s3{top:4px; height:28px; background:linear-gradient(135deg,#eddde8,#9a6e94); color:#1a0e22; animation-delay:.3s}
.shift.s4{top:4px; height:28px; background:rgba(113,75,103,0.08); color:var(--text); border:1px dashed rgba(113,75,103,0.30); animation-delay:.4s}

.cal__cell--swap{
  z-index:1;
  animation:calCellSwap .48s cubic-bezier(.2,1,.3,1);
}
@keyframes calCellSwap{
  0%{transform:scale(1); filter:brightness(1)}
  40%{transform:scale(1.06); filter:brightness(1.08)}
  100%{transform:scale(1); filter:brightness(1)}
}

/* Floating tags */
.float-tag{
  position:absolute; padding:10px 14px; border-radius:14px;
  background:rgba(255,255,255,0.88); border:1px solid var(--border-strong);
  backdrop-filter:blur(14px); font-size:12.5px; font-weight:600; color:var(--text);
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 10px 32px rgba(113,75,103,0.18);
}
.float-tag .ico{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--grad-1); color:#fff; font-weight:900; font-size:12px;
}
.float-tag.t1{top:-18px; left:-26px; animation:bob 5s ease-in-out infinite}
.float-tag.t2{bottom:30px; left:-40px; animation:bob 6s ease-in-out infinite reverse}
.float-tag.t3{top:60px; right:-30px; animation:bob 7s ease-in-out infinite}
@media (max-width:980px){.float-tag.t1,.float-tag.t2,.float-tag.t3{display:none}}

/* Section common */
.section{padding:90px 0; position:relative}
.kicker{
  display:inline-block; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--plum-2); font-weight:700;
  padding:6px 12px; border-radius:999px;
  background:rgba(var(--primary-rgb),0.09); border:1px solid rgba(var(--primary-rgb),0.22);
}
.h2{font-size:clamp(30px, 4vw, 48px); line-height:1.08; margin:14px 0 14px; max-width:880px; color:var(--text)}
.h2__grad{
  background:var(--grad-1);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{color:var(--muted); font-size:17px; max-width:680px}

/* Marquee */
.marquee{
  margin-top:20px; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:22px 0; background:rgba(255,255,255,0.5);
}
.marquee__track{display:flex; gap:48px; width:max-content; animation:scrollX 28s linear infinite}
.logoPill{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; color:var(--muted); letter-spacing:.02em;
  padding:8px 18px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,0.7);
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(113,75,103,0.06);
}
.logoPill::before{content:""; width:8px;height:8px;border-radius:50%; background:var(--grad-1)}

/* Stats */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px;
}
@media (max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.stats{grid-template-columns:repeat(1,1fr)}}
.stat{
  padding:22px; border-radius:18px; border:1px solid var(--border);
  background:rgba(255,255,255,0.7);
  box-shadow:0 4px 20px rgba(113,75,103,0.07);
  position:relative; overflow:hidden;
  backdrop-filter:blur(8px);
}
.stat::before{
  content:""; position:absolute; inset:-1px;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),0.30), transparent 50%);
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; border-radius:inherit; pointer-events:none; opacity:0; transition:.3s;
}
.stat:hover::before{opacity:1}
.stat__num{font-family:'Space Grotesk'; font-size:42px; font-weight:700; line-height:1; background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat__label{margin-top:8px; color:var(--muted); font-size:14px}

/* Features section */
.section--features{padding:100px 0 96px; position:relative}
.section--features::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(ellipse 55% 45% at 85% 0%, rgba(139,94,130,0.09), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(var(--primary-rgb),0.06), transparent 55%);
}
.features__head{text-align:center; max-width:760px; margin:0 auto}
.features__head .kicker{margin-bottom:6px}
.features__head .h2{margin-left:auto; margin-right:auto}
.features__head .lead{margin-left:auto; margin-right:auto}

/* Bento feature grid */
.bento{
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:36px;
}
.bento--features{margin-top:48px}
.b-card{
  position:relative; padding:28px; border-radius:24px;
  background:rgba(255,255,255,0.72);
  border:1px solid var(--border); overflow:hidden;
  transition:transform .4s ease, border-color .3s ease, box-shadow .3s ease;
  min-height:240px;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 20px rgba(113,75,103,0.06);
}
.b-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(var(--primary-rgb),0.10), transparent 40%);
  opacity:0; transition:opacity .3s ease;
}
.b-card:hover{transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 12px 40px rgba(113,75,103,0.12)}
.b-card:hover::after{opacity:1}
.b-card .ico-lg{
  width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center; font-weight:900; color:#fff;
  background:var(--grad-1); margin-bottom:16px;
  box-shadow:0 10px 28px rgba(var(--primary-rgb),0.35), inset 0 0 0 1px rgba(255,255,255,0.3);
}
.b-card h3{font-size:20px; margin-bottom:8px; color:var(--text)}
.b-card p{color:var(--muted); font-size:14.5px; margin:0}

.b-card--feature::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--grad-1); opacity:.85;
  transform:scaleX(.12); transform-origin:left center;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.b-card--feature:hover::before{transform:scaleX(1)}
.b-card--feature .ico-lg{margin-bottom:0}

.b-card__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  margin-bottom:16px;
}
.b-card__label{
  flex-shrink:0;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--plum-2);
  padding:6px 10px; border-radius:999px;
  background:rgba(var(--primary-rgb),0.08);
  border:1px solid rgba(var(--primary-rgb),0.18);
}

.b-card--workspace{
  min-height:0;
  padding:30px 28px;
  background:linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(var(--primary-rgb),0.04) 100%);
  border-color:rgba(113,75,103,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 10px 40px rgba(113,75,103,0.10);
}
.b-card--workspace::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, #714b67, #8b5e82, #c9a0be);
  opacity:1; transform:none;
}
.b-card--workspace:hover{transform:translateY(-5px); box-shadow:0 18px 50px rgba(113,75,103,0.14)}
.b-card--workspace .ico-lg{margin-bottom:0}

.featWorkspace{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:36px;
  align-items:center;
}
@media (max-width:900px){
  .featWorkspace{grid-template-columns:1fr; gap:28px}
}
.featWorkspace__copy .b-card__head{margin-bottom:14px}
.featWorkspace__copy h3{font-size:22px; margin-bottom:10px}
.featWorkspace__copy p{font-size:15px; line-height:1.55}

.featWorkspace__bullets{
  list-style:none; padding:0; margin:20px 0 0;
  display:flex; flex-direction:column; gap:8px;
}
.featWorkspace__bullets li{
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500; color:var(--text);
}
.featWorkspace__tick{
  width:20px; height:20px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center;
  background:var(--grad-1); color:#fff;
  box-shadow:0 3px 8px rgba(var(--primary-rgb),0.22), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.featWorkspace__tick .ti svg{width:11px; height:11px; stroke-width:3}

.featWorkspace__integrations{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.featIntTile{
  aspect-ratio:1;
  border-radius:16px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  padding:12px 8px;
  background:rgba(255,255,255,0.65);
  border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(113,75,103,0.05);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.featIntTile:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:0 8px 22px rgba(113,75,103,0.10);
}
.featIntTile--accent{
  background:linear-gradient(145deg, #714b67 0%, #8b5e82 100%);
  border-color:rgba(113,75,103,0.35);
  color:#fff;
  box-shadow:0 8px 24px rgba(var(--primary-rgb),0.28), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.featIntTile--accentAlt{background:linear-gradient(145deg, #c9a0be 0%, #714b67 100%)}
.featIntTile--accent .featIntTile__abbr{color:#fff}
.featIntTile--accent .featIntTile__hint{color:rgba(255,255,255,0.78)}
.featIntTile__abbr{
  font-size:13px; font-weight:800; letter-spacing:.04em;
  color:var(--text);
}
.featIntTile__hint{
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}

.b-card.span-3{grid-column:span 3}
.b-card.span-2{grid-column:span 2}
.b-card.span-4{grid-column:span 4}
.b-card.span-6{grid-column:span 6}
@media (max-width:880px){
  .b-card.span-3,.b-card.span-2,.b-card.span-4{grid-column:span 6}
}

.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px}
@media (max-width:880px){.pricing{grid-template-columns:1fr}}
.priceCard{
  position:relative; padding:30px; border-radius:24px;
  background:rgba(255,255,255,0.75);
  border:1px solid var(--border); overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 20px rgba(113,75,103,0.07);
  display:flex;
  flex-direction:column;
}
.priceCard:hover{transform:translateY(-6px); box-shadow:0 16px 48px rgba(113,75,103,0.14)}
.priceCard--pro{
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(var(--primary-rgb),0.06));
  border:1px solid rgba(113,75,103,0.28);
  box-shadow:0 20px 60px -10px rgba(var(--primary-rgb),0.22);
}
.priceCard--pro::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,#8b5e82,#714b67,#c9a0be);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.priceCard--elite{
  background:linear-gradient(160deg, rgba(var(--primary-rgb),0.08) 0%, rgba(255,255,255,0.95) 100%);
  border:1px solid rgba(113,75,103,0.32);
  box-shadow:0 24px 72px -12px rgba(var(--primary-rgb),0.28);
  transform:scale(1.025);
}
.priceCard--elite:hover{transform:scale(1.025) translateY(-6px); box-shadow:0 32px 80px -10px rgba(var(--primary-rgb),0.32)}
.tier{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.tier h3{font-size:22px; color:var(--text)}
.badge{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; color:#fff;
  background:var(--grad-1);
}
.badge--elite{
  background:linear-gradient(135deg,#714b67,#8b5e82);
  box-shadow:0 4px 14px rgba(113,75,103,0.30);
}
.price{font-family:'Space Grotesk'; font-size:46px; font-weight:700; margin:0; color:var(--text)}
.price small{font-size:14px; color:var(--muted); font-weight:500}
.priceNote{color:var(--muted); margin:6px 0 18px}
.featuresList{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px}
.featuresList li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--text)}
.check{
  width:20px;height:20px;border-radius:50%; flex:0 0 20px;
  display:grid;place-items:center; font-size:11px; font-weight:900;
  background:var(--grad-1); color:#fff;
}
.priceCard .btn{width:100%}

/* ───────────────────────────────────────
   HOW IT WORKS — professional redesign
   ─────────────────────────────────────── */
.section--how{padding:110px 0; position:relative}
.section--how::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(var(--primary-rgb),0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(139,94,130,0.07), transparent 60%);
}
.how__head{text-align:center; max-width:760px; margin:0 auto}
.how__head .kicker{margin-bottom:6px}
.how__head .h2{margin-left:auto; margin-right:auto}
.how__head .lead{margin-left:auto; margin-right:auto}

.howFlow__wrap{position:relative; margin-top:56px}
.howFlow{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  position:relative; z-index:1;
}
@media (max-width:980px){.howFlow{grid-template-columns:1fr; gap:28px}}

.howFlow__line{
  position:absolute; top:48px; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg,
    rgba(var(--primary-rgb),0) 0%,
    rgba(var(--primary-rgb),0.45) 20%,
    rgba(139,94,130,0.7) 50%,
    rgba(var(--primary-rgb),0.45) 80%,
    rgba(var(--primary-rgb),0) 100%);
  z-index:0; pointer-events:none; border-radius:2px;
}
.howFlow__line::after{
  content:""; position:absolute; inset:-4px 0; border-radius:6px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--primary-rgb),0.18) 50%,
    transparent 100%);
  filter:blur(10px);
}
@media (max-width:980px){.howFlow__line{display:none}}

.howCard{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:14px;
  padding:26px 24px 24px; border-radius:24px;
  background:rgba(255,255,255,0.78);
  border:1px solid var(--border);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 8px 28px rgba(113,75,103,0.08),
    0 1px 2px rgba(113,75,103,0.04);
  transition:transform .35s ease, border-color .3s ease, box-shadow .35s ease;
  overflow:hidden;
}
.howCard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--grad-1); opacity:.85;
  transform:scaleX(.18); transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.howCard:hover{
  transform:translateY(-6px);
  border-color:var(--border-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 22px 60px rgba(113,75,103,0.18),
    0 4px 8px rgba(113,75,103,0.06);
}
.howCard:hover::before{transform:scaleX(1)}
.howCard--featured{
  background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(var(--primary-rgb),0.05) 100%);
  border-color:rgba(113,75,103,0.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 16px 48px -4px rgba(var(--primary-rgb),0.22),
    0 2px 4px rgba(113,75,103,0.05);
}

.howCard__top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.howCard__num{
  font-family:'Space Grotesk', Inter, sans-serif;
  font-size:46px; font-weight:700; line-height:1; letter-spacing:-.04em;
  background:var(--grad-1);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.howCard__num::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:8px;
  background:radial-gradient(ellipse at center, rgba(var(--primary-rgb),0.18), transparent 70%);
  filter:blur(4px); pointer-events:none;
}
.howCard__phase{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--plum-2);
  padding:6px 10px; border-radius:999px;
  background:rgba(var(--primary-rgb),0.08);
  border:1px solid rgba(var(--primary-rgb),0.18);
}
.howCard__phaseDot{
  width:6px; height:6px; border-radius:50%;
  background:var(--grad-1);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.12);
}

.howCard__title{
  font-size:21px; font-weight:700; line-height:1.25; margin:2px 0 0;
  color:var(--text); letter-spacing:-.015em;
}
.howCard__desc{
  margin:0; color:var(--muted); font-size:14.5px; line-height:1.55;
}

/* Preview frame inside each card */
.howCard__preview{
  position:relative;
  margin-top:6px; padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(249,246,251,0.7), rgba(255,255,255,0.5));
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
  display:flex; flex-direction:column; gap:12px;
}
.howPreview__head{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:600; color:var(--text);
  padding-bottom:10px; border-bottom:1px dashed var(--border);
}
.howPreview__icon{
  width:24px; height:24px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--grad-1); color:#fff;
  box-shadow:0 4px 10px rgba(var(--primary-rgb),0.30), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.howPreview__icon .ti svg{width:13px; height:13px}
.howPreview__title{flex:1; min-width:0}
.howPreview__count{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px;
  color:var(--plum-2);
  background:rgba(var(--primary-rgb),0.10);
  border:1px solid rgba(var(--primary-rgb),0.18);
}
.howPreview__count--draft{color:#7c5a16; background:rgba(214,168,46,0.12); border-color:rgba(214,168,46,0.30)}
.howPreview__count--alert{color:#a13a3a; background:rgba(193,60,60,0.10); border-color:rgba(193,60,60,0.24)}

/* Step 1 — locations & roles */
.howPreview__list{display:flex; flex-direction:column; gap:7px}
.howRow{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:11px;
  background:rgba(255,255,255,0.75);
  border:1px solid var(--border);
  font-size:12.5px; color:var(--text);
}
.howRow__dot{
  width:8px; height:8px; border-radius:50%;
  box-shadow:0 0 0 3px rgba(113,75,103,0.06);
}
.howRow__dot--a{background:linear-gradient(135deg,#714b67,#8b5e82)}
.howRow__dot--b{background:linear-gradient(135deg,#c9a0be,#8b5e82)}
.howRow__dot--c{background:linear-gradient(135deg,#e0c8da,#9a6e94)}
.howRow__label{flex:1; min-width:0; font-weight:600}
.howRow__meta{font-size:11.5px; color:var(--muted); font-weight:500}
.howChips{display:flex; flex-wrap:wrap; gap:6px; padding-top:4px}
.howChip{
  font-size:11.5px; font-weight:600; color:var(--text);
  padding:5px 10px; border-radius:999px;
  background:rgba(var(--primary-rgb),0.07);
  border:1px solid rgba(var(--primary-rgb),0.16);
}
.howChip--more{
  color:var(--plum-2);
  background:rgba(255,255,255,0.6);
  border-style:dashed;
}

/* Step 2 — mini schedule */
.howMini{display:flex; flex-direction:column; gap:6px}
.howMini__row{
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--muted);
}
.howMini__day{
  width:30px; flex-shrink:0; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.howMini__bar{
  height:14px; border-radius:5px; flex:0 0 auto;
  width:var(--w, 30%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25);
  animation:howBarIn .7s cubic-bezier(.2,1,.3,1) backwards;
}
.howMini__row:nth-child(1) .howMini__bar{animation-delay:.05s}
.howMini__row:nth-child(2) .howMini__bar{animation-delay:.12s}
.howMini__row:nth-child(3) .howMini__bar{animation-delay:.19s}
.howMini__row:nth-child(4) .howMini__bar{animation-delay:.26s}
.howMini__bar--a{background:linear-gradient(135deg,#714b67,#8b5e82)}
.howMini__bar--b{background:linear-gradient(135deg,#c9a0be,#714b67)}
.howMini__bar--c{background:linear-gradient(135deg,#e0c8da,#9a6e94)}
.howMini__bar--gap{
  background:repeating-linear-gradient(135deg, rgba(113,75,103,0.18) 0 4px, transparent 4px 8px);
  border:1px dashed rgba(113,75,103,0.35);
}
.howPublish{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:4px; padding:9px 10px 9px 12px;
  border-radius:11px;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),0.06), rgba(var(--primary-rgb),0.02));
  border:1px solid rgba(var(--primary-rgb),0.16);
}
.howPublish__status{
  font-size:11.5px; font-weight:600; color:var(--text);
  display:inline-flex; align-items:center; gap:7px;
}
.howPublish__dot{
  width:7px; height:7px; border-radius:50%; background:#3ea264;
  box-shadow:0 0 0 3px rgba(62,162,100,0.18);
  animation:pulse 2s infinite;
}
.howPublish__btn{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:700; color:#fff;
  padding:6px 12px; border-radius:999px;
  background:var(--grad-1);
  box-shadow:0 6px 16px rgba(var(--primary-rgb),0.28), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.howPublish__btn .arrow{display:inline-block; transition:transform .25s ease}
.howCard:hover .howPublish__btn .arrow{transform:translateX(3px)}

/* Step 3 — approval queue */
.howApprovals{display:flex; flex-direction:column; gap:6px}
.howApprove{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:11px;
  background:rgba(255,255,255,0.75);
  border:1px solid var(--border);
  font-size:12.5px;
}
.howApprove--done{
  background:linear-gradient(135deg, rgba(62,162,100,0.07), rgba(62,162,100,0.02));
  border-color:rgba(62,162,100,0.22);
}
.howApprove__icon{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:#3ea264; color:#fff;
}
.howApprove__icon .ti svg{width:12px; height:12px}
.howApprove__icon--pending{
  background:transparent;
  border:1.5px dashed rgba(113,75,103,0.45);
}
.howApprove__text{flex:1; min-width:0; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.howApprove__tag{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  color:var(--plum-2);
  background:rgba(var(--primary-rgb),0.08);
  border:1px solid rgba(var(--primary-rgb),0.16);
}
.howApprove__tag--done{
  color:#1f6b3e;
  background:rgba(62,162,100,0.10);
  border-color:rgba(62,162,100,0.25);
}
.howExport{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:4px; padding:9px 10px 9px 12px;
  border-radius:11px;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),0.05), rgba(255,255,255,0.5));
  border:1px solid var(--border);
}
.howExport__file{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; color:var(--text);
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.howExport__file .ti svg{width:13px; height:13px; color:var(--plum-2)}
.howExport__btn{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; color:var(--text);
  padding:6px 11px; border-radius:999px;
  background:rgba(255,255,255,0.85);
  border:1px solid var(--border-strong);
  box-shadow:0 1px 3px rgba(113,75,103,0.08);
}
.howExport__btn .ti svg{width:12px; height:12px}

/* Checklist beneath preview */
.howCard__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:7px;
}
.howCard__list li{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--text); font-weight:500;
}
.howCheck{
  width:18px; height:18px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center;
  background:var(--grad-1); color:#fff;
  box-shadow:0 3px 8px rgba(var(--primary-rgb),0.22), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.howCheck .ti svg{width:11px; height:11px; stroke-width:3}

@keyframes howBarIn{
  from{transform:scaleX(0); opacity:0; transform-origin:left center}
  to{transform:scaleX(1); opacity:1}
}

/* Testimonials */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px}
@media (max-width:880px){.quotes{grid-template-columns:1fr}}
.quote{
  padding:28px; border-radius:22px; border:1px solid var(--border);
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(113,75,103,0.06);
  transition:.3s;
}
.quote:hover{transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 12px 36px rgba(113,75,103,0.11)}
.quote .quote-mark{font-size:42px; line-height:.5; background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent; font-family:Georgia, serif}
.quote p{color:var(--text); font-size:15.5px; margin:14px 0 18px; opacity:.85}
.who{display:flex; align-items:center; gap:12px}
.avatar{width:42px;height:42px;border-radius:50%; background:var(--grad-1); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3)}
.who strong{display:block; font-size:14px; color:var(--text)}
.who span{display:block; font-size:12px; color:var(--muted)}

/* CTA band */
.ctaBand{padding:80px 0 100px}
.ctaBox{
  position:relative; overflow:hidden;
  padding:54px; border-radius:32px;
  background:
    radial-gradient(ellipse at top left, rgba(var(--primary-rgb),0.14), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(139,94,130,0.12), transparent 60%),
    rgba(255,255,255,0.78);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(16px);
  box-shadow:0 16px 60px rgba(113,75,103,0.12), 0 1px 0 rgba(255,255,255,0.9) inset;
  display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center;
}
@media (max-width:880px){.ctaBox{grid-template-columns:1fr; padding:36px}}
.ctaBox h2{font-size:clamp(28px,3.5vw,42px); color:var(--text)}
.ctaBox p{color:var(--muted); margin-top:8px}
.fineprint{margin-top:14px; font-size:12px; color:var(--muted)}
.form{display:flex; gap:8px; flex-wrap:wrap}
.input{
  flex:1; min-width:200px; padding:14px 16px; border-radius:999px;
  background:rgba(255,255,255,0.9); border:1px solid var(--border-strong); color:var(--text);
  font-family:inherit; font-size:14px; outline:none;
  box-shadow:0 2px 8px rgba(113,75,103,0.07);
}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--color-accent); box-shadow:0 0 0 4px rgba(var(--primary-rgb),0.12)}

/* Footer */
footer{padding:50px 0 40px; border-top:1px solid var(--border); margin-top:30px}
.foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center}
.foot small{display:block; color:var(--muted); margin-top:6px; font-size:12.5px}
footer nav{display:flex; gap:18px; flex-wrap:wrap}
footer nav a{color:var(--muted); font-size:14px; transition:.2s}
footer nav a:hover{color:var(--text)}

/* Reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.isVisible{opacity:1; transform:none}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes textShine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(139,94,130,.50)}
  70%{box-shadow:0 0 0 10px rgba(139,94,130,0)}
  100%{box-shadow:0 0 0 0 rgba(139,94,130,0)}
}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.08)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.1)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-30px) scale(1.05)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes flowLine{
  0%,100%{opacity:.75}
  50%{opacity:1}
}
@keyframes popIn{from{opacity:0; transform:translateY(8px) scale(.96)}to{opacity:1; transform:none}}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

@media (max-width:780px){
  .nav{padding:10px 0 0; padding-top:max(10px, env(safe-area-inset-top))}
  .nav__inner{
    grid-template-columns:1fr auto auto;
    gap:10px 12px;
    padding:10px 12px 10px 16px;
  }
  .nav__toggle{display:inline-flex; justify-self:end}
  .nav__links{
    display:flex;
    position:fixed;
    left:max(14px, env(safe-area-inset-left));
    right:max(14px, env(safe-area-inset-right));
    top:calc(68px + env(safe-area-inset-top));
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:10px;
    border-radius:18px;
    background:rgba(249,246,251,0.96);
    border:1px solid var(--border-strong);
    box-shadow:0 20px 60px rgba(113,75,103,0.22);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    z-index:55;
    justify-self:auto;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(0.98);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav__links a{
    padding:14px 16px;
    font-size:15px;
    text-align:left;
  }
  .nav--menu-open .nav__links{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .nav__cta .btn--tiny{padding:10px 16px; min-height:44px}
  .brand__logo{height:26px}
}

/* Touch / small screens */
@media (hover:none), (pointer:coarse){
  .hero-anim .mockup__inner,
  .hero-anim__shadow{transform:none !important}
  .hero-anim__halo{display:none}
}
@media (max-width:640px){
  .cursor-glow{display:none}
  .hero{padding:56px 0 44px}
  h1{font-size:clamp(34px, 9.5vw, 48px); margin:16px 0}
  .hero__copy h1{max-width:none}
  .chip{font-size:11.5px; max-width:100%}
  .hero__meta{flex-direction:column; gap:10px; margin-top:24px}
  .hero__actions .btn{width:100%; min-height:48px}
  .hero-anim__frame{
    min-height:0;
    aspect-ratio:16/10;
    border-radius:18px;
  }
  .hero-anim__shadow{border-radius:18px}
  .section{padding:64px 0}
  .section--features{padding:72px 0}
  .section--how{padding:72px 0}
  .bento{grid-template-columns:1fr; gap:14px}
  .b-card.span-3,.b-card.span-2,.b-card.span-4,.b-card.span-6{grid-column:span 1}
  .b-card{padding:22px; min-height:0}
  .featWorkspace__integrations{grid-template-columns:repeat(2, 1fr)}
  .stat__num{font-size:34px}
  .stats{gap:12px}
  .howCard{padding:22px 18px}
  .howCard__num{font-size:38px}
  .howPublish{flex-direction:column; align-items:stretch; gap:8px}
  .howPublish__btn{align-self:flex-start}
  .priceCard--elite{transform:none}
  .priceCard--elite:hover{transform:translateY(-6px)}
  footer{padding:40px 0 calc(32px + env(safe-area-inset-bottom))}
  .foot{flex-direction:column; align-items:flex-start; gap:20px}
  footer nav{flex-direction:column; gap:12px}
  .marquee{padding:18px 0}
  .logoPill{font-size:13px; padding:7px 14px}
  .quoteFormWrap{padding:24px 20px}
  .pricingIntro .h2{font-size:clamp(26px, 7vw, 36px)}
}
@media (max-width:380px){
  .nav__cta .btn--tiny{font-size:12px; padding:10px 12px}
  .nav__inner{grid-template-columns:1fr auto auto}
}