@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
  width:1200px;height:1200px;overflow:hidden;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:#FAFAF8;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Subtle background texture ── */
body::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 900px 600px at 15% 50%, rgba(108,99,255,.04), transparent),
    radial-gradient(ellipse 600px 400px at 85% 30%, rgba(255,74,0,.03), transparent),
    radial-gradient(ellipse 500px 500px at 50% 80%, rgba(108,99,255,.02), transparent);
}

/* Film grain */
body::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  background-size:128px 128px;
}

.frame{
  width:1200px;height:1200px;position:relative;z-index:2;
  display:flex;flex-direction:column;
}

/* ── LEFT PANEL — Text content ── */
.left{
  width:100%;flex-shrink:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:72px 80px 0 80px;
  position:relative;
}


.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg, rgba(108,99,255,.08), rgba(108,99,255,.04));
  border:1px solid rgba(108,99,255,.12);
  border-radius:100px;padding:8px 18px;
  font-size:12px;font-weight:600;letter-spacing:.5px;
  color:#6C63FF;
  width:fit-content;
  margin-bottom:40px;
}

.badge .dot{
  width:6px;height:6px;border-radius:50%;
  background:#6C63FF;
  animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.8)}
}

.headline{
  font-size:52px;font-weight:800;line-height:1.08;
  color:#1a1a1a;letter-spacing:-2px;
  margin-bottom:12px;
}

.headline .accent{
  background:#6C63FF;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.headline .zap-accent{
  color:#FF4A00;
  -webkit-text-fill-color:#FF4A00;
}

.subtext{
  font-size:17px;line-height:1.6;color:#666;
  max-width:600px;margin-bottom:32px;font-weight:400;
}

/* Stats row */
.stats{
  display:flex;gap:36px;margin-bottom:28px;
}

.stat{
  display:flex;flex-direction:column;
}

.stat-value{
  font-size:32px;font-weight:800;color:#1a1a1a;letter-spacing:-1px;line-height:1;
}

.stat-value.purple{color:#6C63FF}
.stat-value.orange{color:#FF4A00}

.stat-label{
  font-size:11px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:#999;margin-top:6px;
}

/* Link */
.link-row{
  display:flex;align-items:center;gap:16px;
}

.link-url{
  font-size:15px;font-weight:600;color:#6C63FF;
  letter-spacing:-.2px;
  padding:12px 24px;
  border-radius:10px;
  background:rgba(108,99,255,.06);
  border:1px solid rgba(108,99,255,.1);
  transition:all .2s;
}

/* Zapier logo */
.zapier-logo{
  margin-top:20px;
  display:flex;align-items:center;gap:10px;
  opacity:.7;
}

.zapier-logo svg{height:28px;width:auto}

/* ── BOTTOM PANEL — Screenshot collage ── */
.right{
  flex:1;position:relative;
  overflow:hidden;
}

.collage{
  position:absolute;
  inset:0;
}

.shot{
  position:absolute;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
}

.shot img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top left;
}

/* Screenshot 4 — Zoho CRM workflow (HERO — largest, front) */
.shot-4{
  width:680px;height:460px;
  bottom:24px;left:50%;transform:translateX(-50%) rotate(-1deg);
  z-index:3;
  box-shadow:
    0 4px 8px rgba(0,0,0,.03),
    0 16px 32px rgba(0,0,0,.06),
    0 48px 96px rgba(0,0,0,.1);
}

/* Screenshot 2 — Action list (top-right, behind hero) */
.shot-2{
  width:540px;height:380px;
  top:16px;right:20px;
  transform:rotate(2deg);
  z-index:2;
  box-shadow:
    0 4px 8px rgba(0,0,0,.03),
    0 12px 24px rgba(0,0,0,.05),
    0 32px 64px rgba(0,0,0,.08);
}

/* Screenshot 1 — Trigger selection (top-left, peeking) */
.shot-1{
  width:520px;height:360px;
  top:24px;left:20px;
  transform:rotate(-2deg);
  z-index:1;
  box-shadow:
    0 2px 4px rgba(0,0,0,.02),
    0 8px 16px rgba(0,0,0,.04),
    0 24px 48px rgba(0,0,0,.07);
}