/* Propzo v6 — Glassmorphism + Bento Grid design system
   Palette/type inherited from v5 "product tour" self-generated direction. */
:root{
  --bg-0:#07060d; --bg-1:#0c0a18; --bg-2:#14102b;
  --purple:#7c3aed; --purple-2:#6d4aff; --gold:#f0b429;
  --glass:rgba(255,255,255,.055); --glass-brd:rgba(255,255,255,.12);
  --glass-tint:linear-gradient(165deg, rgba(124,58,237,.14), rgba(255,255,255,.035) 45%, rgba(240,180,41,.05));
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.04);
  --text-0:#f7f5ff; --text-1:rgba(247,245,255,.68); --text-2:rgba(247,245,255,.42);
  --green:#34d399; --teal:#2dd4bf; --coral:#fb7185; --blue:#38bdf8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--bg-0);color:var(--text-0);font-family:'Inter',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:'Sora',sans-serif;}
a{color:inherit;text-decoration:none;} button{font-family:inherit;}
img{display:block;max-width:100%;}
::selection{background:var(--purple);color:#fff;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}}

.bg-gradient{position:fixed;inset:0;z-index:-4;
  background:linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);}
canvas#particles{position:fixed;inset:0;z-index:-3;}
.bg-glow{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(650px circle at var(--gx,20%) var(--gy,10%), rgba(124,58,237,.30), transparent 55%),
    radial-gradient(520px circle at 85% 78%, rgba(109,74,255,.16), transparent 55%),
    radial-gradient(420px circle at 10% 85%, rgba(240,180,41,.07), transparent 55%);
  transition:background .15s ease;}
.grain{position:fixed;inset:0;z-index:-1;opacity:.03;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);backdrop-filter:blur(10px);background:rgba(7,6,13,.55);border-bottom:1px solid rgba(255,255,255,.06);}
.logo{font-family:'Sora',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;}
.logo img{height:36px;width:auto;}
.logo .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--gold));box-shadow:0 0 14px var(--purple);}
.nav-links{display:flex;gap:34px;font-size:14.5px;color:var(--text-1);}
.nav-links a{transition:color .25s;position:relative;} .nav-links a:hover{color:var(--text-0);}
.nav-links a.active{color:#a78bfa;font-weight:700;}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--purple),#a78bfa);box-shadow:0 0 12px rgba(124,58,237,.75);}
.mobile-menu a.active{color:#a78bfa;font-weight:800;}
.nav-cta{padding:11px 22px;border-radius:100px;font-size:14px;font-weight:600;background:linear-gradient(135deg,var(--purple),var(--purple-2));box-shadow:0 4px 24px rgba(124,58,237,.4);transition:all .25s;white-space:nowrap;}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(124,58,237,.55);}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:110;} .burger span{width:22px;height:2px;background:#fff;border-radius:2px;}
.mobile-menu{position:fixed;inset:0;z-index:105;display:flex;flex-direction:column;
  padding:16px 18px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;
  background:radial-gradient(120% 80% at 80% -10%, rgba(124,58,237,.28), transparent 60%), rgba(7,6,13,.98);
  backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .25s ease;}
.mobile-menu.open{opacity:1;pointer-events:all;}
.mm-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;}
.mm-top .logo img{height:34px;}
.mm-close{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);color:var(--text-0);cursor:pointer;transition:background .2s;}
.mm-close:active{background:rgba(255,255,255,.14);}
.mm-links{display:flex;flex-direction:column;margin-top:22px;}
.mobile-menu a{font-family:'Sora',sans-serif;}
.mm-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:20px;font-weight:700;color:var(--text-0);padding:17px 4px;letter-spacing:-.01em;
  border-bottom:1px solid rgba(255,255,255,.07);opacity:0;transform:translateX(-10px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), color .2s;}
.mm-links a svg{color:var(--text-2);flex:none;transition:transform .2s;}
.mm-links a:active{color:#a78bfa;}
.mobile-menu.open .mm-links a{opacity:1;transform:none;}
.mobile-menu.open .mm-links a:nth-child(1){transition-delay:.06s;}
.mobile-menu.open .mm-links a:nth-child(2){transition-delay:.12s;}
.mobile-menu.open .mm-links a:nth-child(3){transition-delay:.18s;}
.mobile-menu.open .mm-links a:nth-child(4){transition-delay:.24s;}
.mm-links a.active{color:#a78bfa;}
.mm-links a.active svg{color:#a78bfa;transform:translateX(2px);}
.mm-links a.active::before{content:'';position:absolute;left:-18px;width:3px;height:26px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--purple),#a78bfa);box-shadow:0 0 12px rgba(124,58,237,.8);}
.mm-links a{position:relative;}
.mm-cta{margin-top:28px;padding:16px;border-radius:100px;text-align:center;font-size:15.5px;font-weight:700;
  background:linear-gradient(135deg,var(--purple),var(--purple-2));box-shadow:0 8px 30px rgba(124,58,237,.45);}
.mm-foot{margin-top:auto;padding-top:26px;text-align:center;font-size:13px;color:var(--text-2);font-family:'Inter',sans-serif !important;}
body.menu-open{overflow:hidden;}

section{padding:68px clamp(20px,5vw,64px);position:relative;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);}

.sec-head{max-width:700px;margin-bottom:38px;}
.sec-head.center{margin:0 auto 38px;text-align:center;}
.sec-head h2{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.sec-head p{margin-top:16px;color:var(--text-1);font-size:16.5px;line-height:1.65;}

.btn-primary{padding:16px 32px;border-radius:100px;font-weight:700;font-size:15px;background:linear-gradient(135deg,var(--purple),var(--purple-2));box-shadow:0 8px 34px rgba(124,58,237,.45);transition:all .3s cubic-bezier(.2,.8,.2,1);border:none;cursor:pointer;color:#fff;display:inline-flex;align-items:center;gap:8px;}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 40px rgba(124,58,237,.6);}
.btn-ghost{padding:16px 32px;border-radius:100px;font-weight:600;font-size:15px;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(8px);transition:all .3s;display:inline-flex;align-items:center;gap:8px;}
.btn-ghost:hover{background:rgba(255,255,255,.1);}

/* Glass "device" frame for real product screenshots */
.shot{border-radius:16px;overflow:hidden;border:1px solid var(--glass-brd);background:var(--bg-1);box-shadow:0 30px 70px rgba(0,0,0,.5);position:relative;}
.shot .chrome{display:flex;align-items:center;gap:6px;padding:11px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06);}
.shot .chrome span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);}
.shot .chrome span:nth-child(1){background:#ff5f57;} .shot .chrome span:nth-child(2){background:#febc2e;} .shot .chrome span:nth-child(3){background:#28c840;}
.shot img{width:100%;height:auto;display:block;}
.shot.phone{max-width:308px;margin:0 auto;border-radius:26px;}
.shot.phone .chrome{display:none;}
.shot.phone img{border-radius:26px;}
@media(max-width:860px){.shot.phone{max-width:270px;}}
.shot-tag{position:absolute;top:14px;right:14px;background:rgba(7,6,13,.75);backdrop-filter:blur(6px);border:1px solid var(--glass-brd);padding:5px 11px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--gold);z-index:2;}

/* Cinematic hero photography (transparent-cutout product shot floating over the page bg) */
.cinematic-hero{position:relative;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));}
.cinematic-hero img{width:100%;height:auto;display:block;}
.cinematic-hero::before{content:'';position:absolute;inset:-16%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,58,237,.32), rgba(124,58,237,.1) 55%, transparent 78%);
  filter:blur(34px);}
.cinematic-tag{display:inline-flex;margin-top:14px;background:rgba(255,255,255,.04);backdrop-filter:blur(6px);border:1px solid var(--glass-brd);padding:6px 13px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--gold);}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:150px;padding-bottom:60px;}
.hero:has(.hero-strip){min-height:96vh;padding-bottom:0;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;max-width:1240px;width:100%;margin:0 auto;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(34px,5.2vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1.08;}
.hero .accent{background:linear-gradient(120deg,var(--gold),var(--purple-2) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{margin-top:22px;font-size:17px;color:var(--text-1);max-width:520px;line-height:1.65;}
.hero-ctas{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}
.microcopy{margin-top:18px;font-size:13px;color:var(--text-2);}
.hero-strip{display:flex;gap:clamp(24px,5vw,64px);margin-top:80px;flex-wrap:wrap;max-width:1240px;margin-left:auto;margin-right:auto;}
.stat{text-align:center;} .stat .num{font-family:'Sora',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:800;background:linear-gradient(135deg,#fff 20%,#b9a2ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .label{font-size:12px;color:var(--text-2);margin-top:6px;}

/* Fork cards */
.fork-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1180px;margin:0 auto;}
@media(max-width:860px){.fork-grid{grid-template-columns:1fr;}}
.fork-card{display:flex;flex-direction:column;border-radius:26px;padding:44px 40px;background:var(--glass-tint),var(--glass);border:1px solid var(--glass-brd);box-shadow:var(--glass-hi), 0 24px 60px rgba(0,0,0,.35);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);transition:transform .15s ease-out,border-color .3s;position:relative;overflow:hidden;transform-style:preserve-3d;contain:layout paint;}
.fork-card::before{content:'';position:absolute;inset:0;border-radius:26px;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(124,58,237,.28),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none;}
.fork-card:hover::before{opacity:1;}
.fork-card:hover{border-color:rgba(240,180,41,.35);}
.fork-tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-2);margin-bottom:14px;}
.fork-card h3{font-size:27px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px;}
.fork-card p{color:var(--text-1);font-size:15px;line-height:1.65;margin-bottom:0;}
/* ul (and the CTA link after it) are pushed to the bottom of the flex column, so both
   cards' bullet lists and "Explore" links land on the same baseline no matter how tall
   the product shot above them is — no forced/cropped image box needed. */
.fork-card ul{list-style:none;margin:auto 0 22px;padding-top:22px;}
.fork-card ul li{font-size:13.5px;color:var(--text-1);padding:6px 0;display:flex;gap:9px;align-items:flex-start;}
.fork-card ul li svg{color:var(--gold);flex-shrink:0;margin-top:2px;}
.fork-card .go{font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;color:#fff;}
/* Both cards use one identical product tile: a finished gradient stage with the device
   sitting on it, spanning the full card width. Same aspect on both sides = same height,
   fully filled, nothing floating. */
.fork-card .product-shot{margin:26px 0 0;}
.fork-card .product-shot img{display:block;width:100%;height:auto;}

/* Pricing framing strip */
.pricing-strip{max-width:980px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.pricing-pill{display:flex;align-items:center;gap:10px;padding:16px 26px;border-radius:100px;background:var(--glass-tint),var(--glass);border:1px solid var(--glass-brd);box-shadow:var(--glass-hi);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);font-size:14px;font-weight:600;color:var(--text-0);transition:border-color .3s,transform .2s;}
.pricing-pill:hover{border-color:rgba(240,180,41,.4);transform:translateY(-2px);}
.pricing-pill svg{color:var(--gold);flex-shrink:0;}

/* Problem/solution comparison (Without Propzo vs With Propzo) */
.compare-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;max-width:1180px;margin:0 auto;align-items:stretch;}
@media(max-width:860px){.compare-grid{grid-template-columns:1fr;gap:18px;}}
.compare-card{border-radius:26px;padding:38px 36px;position:relative;overflow:hidden;transition:transform .2s ease-out;}
.compare-card.bad{background:linear-gradient(165deg, rgba(255,80,80,.09), rgba(20,16,30,.4) 55%);border:1px solid rgba(255,90,90,.22);}
.compare-card.good{background:linear-gradient(165deg, rgba(124,58,237,.24), rgba(240,180,41,.06) 120%);border:1px solid rgba(167,139,250,.4);box-shadow:0 30px 70px rgba(76,29,149,.35), 0 0 0 1px rgba(167,139,250,.08) inset;transform:scale(1.035);z-index:1;}
@media(max-width:860px){.compare-card.good{transform:none;}}
.compare-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:7px 16px 7px 12px;border-radius:100px;margin-bottom:22px;}
.compare-card.bad .compare-badge{color:#ff9d9d;background:rgba(255,80,80,.12);border:1px solid rgba(255,90,90,.25);}
.compare-card.good .compare-badge{color:var(--gold);background:rgba(240,180,41,.12);border:1px solid rgba(240,180,41,.3);}
.compare-list{list-style:none;display:flex;flex-direction:column;gap:15px;}
.compare-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;}
.compare-card.bad .compare-list li{color:var(--text-1);}
.compare-card.bad .compare-list svg{color:#ff6b6b;flex-shrink:0;margin-top:2px;opacity:.85;}
.compare-card.good .compare-list li{color:var(--text-0);font-weight:500;}
.compare-card.good .compare-list svg{color:var(--gold);flex-shrink:0;margin-top:2px;background:rgba(240,180,41,.15);border-radius:50%;padding:2px;box-sizing:content-box;}
.compare-arrow{display:flex;align-items:center;justify-content:center;color:var(--gold);opacity:.65;padding:0 14px;}
@media(max-width:860px){.compare-arrow{transform:rotate(90deg);padding:4px 0;opacity:.5;}}

/* True bento grid (varied cell sizes) with real screenshots */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);gap:18px;max-width:1240px;margin:0 auto;}
.bento-card,.fork-card,.compare-card,.hero-grid>*,.feature-row>*,.contact-wrap>*{min-width:0;}
@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.bento{grid-template-columns:1fr;}.bento-card.w2,.bento-card.h2{grid-column:span 1 !important;grid-row:span 1 !important;}}
.bento-card{--accent:124,58,237;border-radius:20px;border:1px solid var(--glass-brd);background:linear-gradient(165deg, rgba(var(--accent),.16), rgba(255,255,255,.035) 50%),var(--glass);box-shadow:var(--glass-hi), 0 18px 44px rgba(0,0,0,.3);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);padding:26px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;transition:transform .15s ease-out,border-color .3s;transform-style:preserve-3d;contain:layout paint;}
.bento-card::after{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent),.6),transparent);}
.bento-card::before{content:'';position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent),.28),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none;}
.bento-card:hover::before{opacity:1;}
.bento-card:hover{border-color:rgba(var(--accent),.45);}
.bento-card.w2{grid-column:span 2;}
.bento-card.h2{grid-row:span 2;}
.bento-card:nth-of-type(1){--accent:124,58,237;}
.bento-card:nth-of-type(2){--accent:56,189,248;}
.bento-card:nth-of-type(3){--accent:240,180,41;}
.bento-card:nth-of-type(4){--accent:45,212,191;}
.bento-card:nth-of-type(5){--accent:251,113,133;}
.bento-card:nth-of-type(6){--accent:56,189,248;}
.bento-icon-3d{width:52px;height:52px;object-fit:contain;margin-bottom:16px;filter:drop-shadow(0 8px 18px rgba(var(--accent),.4));}
.bento-card .num{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:color-mix(in srgb, rgb(var(--accent)) 70%, white 30%);letter-spacing:.08em;margin-bottom:10px;}
.bento-card h4{font-size:16.5px;font-weight:700;margin-bottom:6px;letter-spacing:-.005em;}
.bento-card p{font-size:13px;color:var(--text-1);line-height:1.55;}
.bento-card .shot{margin-top:14px;flex-shrink:1;}
.bento-card .shot img{max-height:230px;object-fit:cover;object-position:top;}
.bento-card.h2 .shot img{max-height:400px;}
.bento-icon{width:40px;height:40px;border-radius:11px;background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.25);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:14px;}

/* Feature deep-dive rows (alternating image/copy) */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1180px;margin:0 auto 90px;}
.feature-row:last-child{margin-bottom:0;}
.feature-row.reverse{direction:rtl;} .feature-row.reverse>*{direction:ltr;}
@media(max-width:860px){.feature-row,.feature-row.reverse{grid-template-columns:1fr;direction:ltr;}
  /* rows authored text-first still lead with the screenshot once stacked */
  .feature-row.shot-first .shot{order:-1;}}
.feature-num{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-2);margin-bottom:14px;}
.feature-row h3{font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-.01em;margin-bottom:14px;line-height:1.2;}
.feature-row p{color:var(--text-1);font-size:15.5px;line-height:1.7;margin-bottom:18px;}
.checklist{list-style:none;}
.checklist li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--text-1);margin-bottom:9px;}
.checklist svg{color:var(--gold);flex-shrink:0;margin-top:2px;}

.founder-strip{max-width:920px;margin:0 auto;text-align:center;padding:52px 56px;border-radius:100px;position:relative;overflow:hidden;
  background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(109,74,255,.14) 45%, rgba(240,180,41,.09));
  border:1px solid rgba(167,139,250,.28);box-shadow:0 30px 70px rgba(76,29,149,.28), inset 0 1px 0 rgba(255,255,255,.06);}
.founder-strip::before{content:'';position:absolute;inset:0;border-radius:100px;pointer-events:none;
  background:radial-gradient(480px circle at 15% 0%, rgba(255,255,255,.10), transparent 55%);}
.founder-strip p{position:relative;font-size:clamp(17px,2vw,22px);font-family:'Sora',sans-serif;font-weight:600;line-height:1.45;letter-spacing:-.01em;}
.founder-strip .who{position:relative;margin-top:18px;font-size:13.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--gold);}
@media(max-width:700px){.founder-strip{border-radius:32px;padding:40px 28px;}}

.price-card{max-width:820px;margin:0 auto;border-radius:28px;padding:52px;text-align:center;background:linear-gradient(160deg, rgba(124,58,237,.2), rgba(255,255,255,.03));border:1px solid rgba(124,58,237,.35);backdrop-filter:blur(12px);}
.price-card h3{font-size:clamp(22px,2.8vw,30px);font-weight:800;margin-bottom:16px;}
.price-card p{color:var(--text-1);font-size:15.5px;line-height:1.7;max-width:560px;margin:0 auto 30px;}
.price-pills{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;}
.pill{padding:10px 18px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);font-size:13px;font-weight:600;}

.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{border-radius:16px;padding:24px 26px;background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(10px);}
.faq-item h4{font-size:15.5px;font-weight:700;margin-bottom:8px;}
.faq-item p{font-size:14px;color:var(--text-1);line-height:1.6;}

.contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;max-width:1180px;margin:0 auto;}
@media(max-width:860px){.contact-wrap{grid-template-columns:1fr;}}
.contact-info h2{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.02em;margin-bottom:18px;}
.contact-info p{color:var(--text-1);font-size:15.5px;line-height:1.7;margin-bottom:30px;}
.contact-detail{display:flex;align-items:center;gap:14px;margin-bottom:17px;font-size:14.5px;}
.contact-detail .ic{width:38px;height:38px;border-radius:10px;background:var(--glass);border:1px solid var(--glass-brd);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-card{border-radius:18px;padding:22px 24px;background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(10px);margin-top:28px;}
.contact-card h4{font-size:14px;font-weight:700;margin-bottom:6px;}
.contact-card p{font-size:13px;color:var(--text-1);margin:0;}
.contact-form{border-radius:26px;padding:40px;background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(12px);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.field label{font-size:12.5px;color:var(--text-1);font-weight:600;}
.field input,.field select,.field textarea{background:rgba(255,255,255,.05);border:1px solid var(--glass-brd);border-radius:12px;padding:13px 15px;color:#fff;font-family:'Inter';font-size:14.5px;outline:none;transition:border-color .25s,background .25s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple-2);background:rgba(255,255,255,.08);}
.field textarea{resize:vertical;min-height:110px;} .field select{color-scheme:dark;}
.submit-btn{width:100%;padding:16px;border-radius:14px;font-weight:700;font-size:15px;margin-top:8px;background:linear-gradient(135deg,var(--purple),var(--purple-2));box-shadow:0 10px 30px rgba(124,58,237,.4);cursor:pointer;border:none;color:#fff;font-family:'Inter';transition:transform .25s;}
.submit-btn:hover{transform:translateY(-2px);}
/* Plan picker (agency vs independent) */
.plan-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;}
@media(max-width:520px){.plan-pick{grid-template-columns:1fr;}}
.plan-opt{display:block;cursor:pointer;position:relative;}
.plan-opt input{position:absolute;opacity:0;width:0;height:0;}
.plan-opt .box{display:block;padding:16px 16px 15px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-brd);transition:border-color .25s,background .25s,transform .2s,box-shadow .25s;}
.plan-opt:hover .box{border-color:rgba(167,139,250,.4);transform:translateY(-2px);}
.plan-opt .tick{position:absolute;top:13px;right:13px;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--glass-brd);display:flex;align-items:center;justify-content:center;color:transparent;transition:all .25s;}
.plan-opt b{display:block;font-size:14.5px;font-weight:700;color:var(--text-0);margin-bottom:4px;padding-right:24px;}
.plan-opt em{font-style:normal;display:block;font-size:12.3px;color:var(--text-2);line-height:1.45;}
.plan-opt input:checked ~ .box{border-color:rgba(167,139,250,.62);
  background:linear-gradient(160deg, rgba(124,58,237,.26), rgba(255,255,255,.035) 70%);
  box-shadow:0 14px 34px rgba(76,29,149,.38), inset 0 1px 0 rgba(255,255,255,.1);}
.plan-opt input:checked ~ .tick{background:var(--purple);border-color:var(--purple);color:#fff;}
.plan-opt input:focus-visible ~ .box{outline:2px solid var(--purple-2);outline-offset:2px;}
.req{color:#ff9d9d;}
.field-hint{font-size:11.5px;color:var(--text-2);margin-top:6px;}
.field-error{display:none;align-items:center;gap:6px;font-size:11.8px;font-weight:500;color:#ff9d9d;margin-top:7px;line-height:1.4;}
.field-error.show{display:flex;}
.field-error svg{flex-shrink:0;}
.field input.bad,.field select.bad,.field textarea.bad{border-color:rgba(255,90,90,.65);background:rgba(255,80,80,.05);}
.form-note{font-size:12px;color:var(--text-2);margin-top:14px;text-align:center;}
.form-err{display:none;margin-top:14px;padding:11px 14px;border-radius:12px;font-size:13px;
  background:rgba(255,80,80,.1);border:1px solid rgba(255,90,90,.3);color:#ffb3b3;}
.form-err.show{display:block;}
/* honeypot — off-screen for people, still a real focusable input for bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.submit-btn:disabled{opacity:.65;cursor:progress;transform:none;}

.form-success{display:none;text-align:center;padding:40px 0;} .form-success.show{display:block;}
.form-success .check{width:60px;height:60px;border-radius:50%;background:rgba(124,58,237,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}

.section-alt{background:linear-gradient(180deg, transparent, rgba(124,58,237,.05), transparent);}

/* Laptop hero showcase — gradient stage + float + glare sweep */
.hero-solo{max-width:900px;margin:0 auto;text-align:center;}
.hero-solo .eyebrow{justify-content:center;}
.hero-solo p.lead{margin-left:auto;margin-right:auto;}
.hero-solo .hero-ctas{justify-content:center;}

.laptop-stage{position:relative;max-width:1120px;margin:54px auto 0;perspective:1600px;}
.hero-grid .laptop-stage{margin:0;max-width:none;}
.laptop-glow{position:absolute;inset:-26% -16%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(139,92,246,.85), rgba(124,58,237,.46) 40%, rgba(109,74,255,.2) 58%, rgba(240,180,41,.08) 72%, transparent 84%);
  filter:blur(60px);animation:stageBloom 9s ease-in-out infinite;}
.laptop-stage::after{content:'';position:absolute;left:50%;bottom:-6%;translate:-50% 0;width:62%;height:26px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(167,139,250,.5), transparent 72%);filter:blur(18px);}
@keyframes stageBloom{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}

.laptop{position:relative;animation:laptopFloat 8s ease-in-out infinite;will-change:transform;}
.laptop img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 42px 70px rgba(0,0,0,.62)) drop-shadow(0 0 78px rgba(139,92,246,.5)) drop-shadow(0 0 22px rgba(167,139,250,.28));}
@keyframes laptopFloat{0%,100%{transform:translateY(0) rotateX(0deg);}50%{transform:translateY(-10px) rotateX(.8deg);}}

/* light sweep clipped to the screen area of the mockup */
.laptop .glare{position:absolute;left:8.9%;top:6.85%;width:82.2%;height:81.8%;overflow:hidden;border-radius:5px;pointer-events:none;}
.laptop .glare::before{content:'';position:absolute;top:-60%;left:-40%;width:34%;height:220%;transform:rotate(18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), rgba(255,255,255,.05), transparent);
  animation:glareSweep 7.5s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes glareSweep{0%{left:-45%;}55%,100%{left:125%;}}

/* entrance: tilt up into place */
.laptop-stage.reveal-el{opacity:0;transform:translateY(46px) rotateX(12deg) scale(.97);
  transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1);}
.laptop-stage.reveal-el.in{opacity:1;transform:translateY(0) rotateX(0) scale(1);}

/* Mobile-app companion band */
.appband{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;max-width:1180px;margin:0 auto;}
@media(max-width:900px){.appband{grid-template-columns:1fr;gap:34px;}}
.appband-art{position:relative;display:flex;justify-content:center;padding:28px 0;}
.appband-art::before{content:'';position:absolute;inset:-16% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(139,92,246,.6), rgba(109,74,255,.24) 52%, rgba(240,180,41,.07) 72%, transparent 84%);
  filter:blur(56px);animation:stageBloom 9s ease-in-out infinite;}

/* CSS phone frame — vector-crisp, holds the real app screenshot */
.ph{position:relative;width:min(292px,78%);animation:phFloat 7s ease-in-out infinite;will-change:transform;
  filter:drop-shadow(0 36px 58px rgba(0,0,0,.62)) drop-shadow(0 0 62px rgba(139,92,246,.45));}
.ph-body{position:relative;padding:11px;border-radius:46px;
  background:linear-gradient(158deg,#3d3d49 0%,#25252e 42%,#14141b 100%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(0,0,0,.55);}
.ph-screen{position:relative;border-radius:36px;overflow:hidden;background:#07060d;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8);}
.ph-screen img{width:100%;height:auto;display:block;}
.ph-btn{position:absolute;width:3px;border-radius:3px;background:linear-gradient(180deg,#4a4a58,#26262f);}
.ph-btn.v1{left:-3px;top:20%;height:7%;} .ph-btn.v2{left:-3px;top:29.5%;height:7%;}
.ph-btn.pw{right:-3px;top:26%;height:11%;}
.ph-shine{position:absolute;inset:0;border-radius:36px;pointer-events:none;
  background:linear-gradient(128deg, rgba(255,255,255,.13) 0%, transparent 34%, transparent 76%, rgba(255,255,255,.05) 100%);}
@keyframes phFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-16px) rotate(-.7deg);}}
@media(max-width:900px){.ph{width:min(258px,66%);}}
@media(max-width:760px){
  .ph{animation:none;filter:drop-shadow(0 20px 34px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(139,92,246,.4));}
}
@media (prefers-reduced-motion: reduce){.ph,.appband-art::before{animation:none;}}
.store-pills{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px;}
.store-pill{display:inline-flex;align-items:center;gap:9px;padding:12px 19px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(10px);
  font-size:13.5px;font-weight:600;color:var(--text-0);transition:border-color .3s,transform .2s;}
.store-pill:hover{border-color:rgba(167,139,250,.45);transform:translateY(-2px);}
.store-pill svg{color:var(--purple-2);flex-shrink:0;}
.store-pill span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:1px;}

/* Hero video inside a CSS laptop — vector-crisp at any size, video plays in the screen */
.video-stage{perspective:none;}
.lp{position:relative;animation:laptopFloat 8s ease-in-out infinite;will-change:transform;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.62)) drop-shadow(0 0 72px rgba(139,92,246,.42));}
.lp-lid{position:relative;padding:14px 14px 22px;border-radius:18px 18px 8px 8px;
  background:linear-gradient(180deg,#33333e 0%,#23232c 45%,#15151c 100%);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(0,0,0,.5);}
.lp-cam{display:block;width:6px;height:6px;border-radius:50%;margin:0 auto 8px;
  background:radial-gradient(circle at 35% 30%, #4b4b59, #1a1a22);box-shadow:0 0 0 2px rgba(0,0,0,.45);}
.lp-screen{position:relative;border-radius:7px;overflow:hidden;background:#07060d;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85), 0 0 22px rgba(139,92,246,.22);}
.lp-screen video{display:block;width:100%;height:auto;
  filter:saturate(1.06) contrast(1.04) hue-rotate(-6deg);}
/* brand tint + edge vignette so the clip reads as part of the page's palette */
.vscrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(150deg, rgba(124,58,237,.15), transparent 44%, rgba(240,180,41,.05)),
    radial-gradient(130% 105% at 50% 0%, transparent 60%, rgba(7,6,13,.4) 100%);}
/* glass glare sweeping across the screen */
.lp-glare{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.lp-glare::before{content:'';position:absolute;top:-60%;left:-45%;width:32%;height:220%;transform:rotate(18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.13), rgba(255,255,255,.04), transparent);
  animation:glareSweep 8s cubic-bezier(.5,0,.5,1) infinite;}
.lp-base{position:relative;width:112%;margin-left:-6%;height:15px;border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,#43434f 0%,#2a2a33 40%,#16161d 100%);
  box-shadow:0 12px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22);}
.lp-notch{position:absolute;left:50%;translate:-50% 0;top:0;width:15%;height:6px;
  border-radius:0 0 7px 7px;background:#121218;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);}
@media(max-width:760px){
  .lp{animation:none;filter:drop-shadow(0 20px 36px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(139,92,246,.35));}
  .lp-lid{padding:9px 9px 15px;border-radius:14px 14px 6px 6px;}
  .lp-base{height:11px;}
}
@media (prefers-reduced-motion: reduce){.lp{animation:none;} .lp-glare::before{animation:none;opacity:0;}}

/* Floating stat cards — real DOM elements, so text stays pixel-sharp at any scale */
.pop{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:16px;white-space:nowrap;
  background:linear-gradient(158deg, rgba(34,25,66,.94), rgba(15,11,30,.94));
  border:1px solid rgba(167,139,250,.32);
  box-shadow:0 20px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset, inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  animation:popFloat 6.5s ease-in-out infinite;will-change:transform;}
.pop .pic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pop .lbl{display:block;font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2);margin-bottom:3px;}
.pop .val{display:block;font-family:'Sora',sans-serif;font-size:17px;font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.015em;}
.pop .val .trend{font-style:normal;font-size:13px;color:#4ade80;}
.pop .val .of{font-style:normal;font-size:11.5px;font-weight:600;color:var(--text-2);}
.pop .sub{display:block;font-size:10.5px;color:var(--text-2);margin-top:3px;}
@keyframes popFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}

.pop-1{top:4%;left:-9%;rotate:-2deg;animation-delay:-.4s;}
.pop-2{bottom:20%;right:-8%;rotate:1.6deg;animation-delay:-2.6s;}
.pop-3{bottom:-3%;left:2%;rotate:-1deg;animation-delay:-4.6s;}

/* staggered entrance, after the laptop tilts in */
.laptop-stage .pop{opacity:0;translate:0 16px;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1);}
.laptop-stage.in .pop{opacity:1;translate:0 0;}
.laptop-stage.in .pop-1{transition-delay:.45s;}
.laptop-stage.in .pop-2{transition-delay:.62s;}
.laptop-stage.in .pop-3{transition-delay:.79s;}

@media(max-width:1150px){
  .pop{padding:10px 13px;gap:9px;border-radius:14px;}
  .pop .pic{width:30px;height:30px;border-radius:9px;}
  .pop .val{font-size:15px;}
  .pop-1{left:-5%;} .pop-2{right:-4%;}
}
@media(max-width:900px){
  .pop-1{top:2%;left:0;} .pop-2{bottom:22%;right:0;} .pop-3{display:none;}
}
@media(max-width:520px){
  .pop{padding:8px 11px;gap:8px;}
  .pop .val{font-size:13.5px;} .pop .sub{display:none;}
  .pop .pic{width:26px;height:26px;}
}

.laptop-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px;}
.lbadge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;font-size:12.5px;font-weight:600;
  background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(10px);color:var(--text-1);}
.lbadge svg{color:var(--gold);flex-shrink:0;}

@media(max-width:760px){
  .laptop-stage{margin-top:36px;}
  .laptop{animation:none;}
  .laptop img{filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));}
  .laptop-glow{filter:blur(38px);}
}
@media (prefers-reduced-motion: reduce){
  .laptop,.laptop-glow{animation:none !important;}
  .laptop .glare::before{animation:none;opacity:0;}
}

/* "Same lead, two endings" — two-lane outcome story */
.duo{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.lane{--c:255,90,90;position:relative;border-radius:26px;padding:26px 28px 30px;overflow:hidden;
  background:linear-gradient(120deg, rgba(var(--c),.14), rgba(16,11,24,.72) 62%);
  border:1px solid rgba(var(--c),.27);box-shadow:0 20px 50px rgba(0,0,0,.34);}
.lane.win{--c:167,139,250;
  background:linear-gradient(120deg, rgba(124,58,237,.3), rgba(240,180,41,.06) 132%);
  border-color:rgba(167,139,250,.48);box-shadow:0 28px 62px rgba(76,29,149,.34), inset 0 1px 0 rgba(255,255,255,.07);}
.lane::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px circle at 6% 0%, rgba(var(--c),.16), transparent 62%);}

.lane-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.lane-tag{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--c));}
.lane-out{display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:100px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;color:rgb(var(--c));
  background:rgba(var(--c),.15);border:1px solid rgba(var(--c),.45);
  opacity:0;transform:scale(.9);transition:opacity .45s ease .75s, transform .45s cubic-bezier(.2,1.4,.4,1) .75s;}
.lane.in .lane-out{opacity:1;transform:scale(1);}
.lane.win .lane-out{color:#ffe4a8;background:rgba(240,180,41,.16);border-color:rgba(240,180,41,.5);
  box-shadow:0 0 26px rgba(240,180,41,.28);}

.duo-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);}
.duo-step{position:relative;padding-right:26px;opacity:0;transform:translateY(12px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);}
.lane.in .duo-step{opacity:1;transform:none;}
.lane.in .duo-step:nth-child(1){transition-delay:.05s;}
.lane.in .duo-step:nth-child(2){transition-delay:.22s;}
.lane.in .duo-step:nth-child(3){transition-delay:.39s;}
.lane.in .duo-step:nth-child(4){transition-delay:.56s;}
/* dashed connector draws itself between the dots */
.duo-step:not(:last-child)::after{content:'';position:absolute;top:20px;left:52px;right:14px;height:2px;
  background:repeating-linear-gradient(90deg, rgba(var(--c),.55) 0 6px, transparent 6px 12px);
  transform:scaleX(0);transform-origin:left;transition:transform .5s ease;}
.lane.in .duo-step:nth-child(1)::after{transition-delay:.16s;}
.lane.in .duo-step:nth-child(2)::after{transition-delay:.33s;}
.lane.in .duo-step:nth-child(3)::after{transition-delay:.5s;}
.lane.in .duo-step:not(:last-child)::after{transform:scaleX(1);}

.duo-dot{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  margin-bottom:15px;position:relative;z-index:1;color:rgb(var(--c));
  background:rgba(var(--c),.17);border:1px solid rgba(var(--c),.42);transition:transform .3s, box-shadow .3s;}
.lane.win .duo-dot{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);}
.duo-step:hover .duo-dot{transform:translateY(-3px);box-shadow:0 10px 24px rgba(var(--c),.4);}
.duo-step.last .duo-dot{box-shadow:0 0 0 0 rgba(var(--c),.55);animation:duoPulse 2.6s ease-out infinite 1s;}
@keyframes duoPulse{0%{box-shadow:0 0 0 0 rgba(var(--c),.5);}70%{box-shadow:0 0 0 14px rgba(var(--c),0);}100%{box-shadow:0 0 0 0 rgba(var(--c),0);}}
.duo-step b{display:block;font-size:14px;font-weight:700;color:var(--text-0);margin-bottom:5px;letter-spacing:-.005em;}
.duo-step span:not(.duo-dot){display:block;font-size:12px;color:var(--text-2);line-height:1.5;padding-right:14px;}

.duo-mid{text-align:center;font-family:'Sora',sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.16em;color:var(--text-2);padding:2px 0;}

@media(max-width:900px){
  .duo-steps{grid-template-columns:repeat(2,1fr);gap:26px 0;}
  .duo-step:nth-child(2)::after{display:none;}
}
@media(max-width:560px){
  .lane{padding:22px 20px 24px;border-radius:22px;}
  .duo-steps{grid-template-columns:1fr;gap:0;}
  .duo-step{display:grid;grid-template-columns:40px 1fr;column-gap:15px;row-gap:3px;padding:0 0 22px;}
  .duo-dot{grid-column:1;grid-row:1 / span 2;margin-bottom:0;}
  .duo-step b{grid-column:2;grid-row:1;align-self:end;}
  .duo-step span:not(.duo-dot){grid-column:2;grid-row:2;padding-right:0;}
  .duo-step:last-child{padding-bottom:0;}
  .duo-step:nth-child(2)::after{display:block;}
  .duo-step:not(:last-child)::after{top:46px;left:19px;right:auto;width:2px;height:auto;bottom:-6px;
    background:repeating-linear-gradient(180deg, rgba(var(--c),.55) 0 5px, transparent 5px 10px);
    transform-origin:top;transform:scaleY(0);}
  .lane.in .duo-step:not(:last-child)::after{transform:scaleY(1);}
}
@media (prefers-reduced-motion: reduce){
  .duo-step,.lane-out{opacity:1 !important;transform:none !important;}
  .duo-step:not(:last-child)::after{transform:scaleX(1) !important;}
  .duo-step.last .duo-dot{animation:none;}
}

/* Numbered step flow */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1180px;margin:0 auto;}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding:26px 24px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);box-shadow:var(--glass-hi);}
.step-n{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple-2));margin-bottom:15px;box-shadow:0 6px 18px rgba(124,58,237,.5);}
.step h4{font-size:15.5px;font-weight:700;margin-bottom:6px;letter-spacing:-.005em;}
.step p{font-size:12.8px;color:var(--text-1);line-height:1.5;}
.step::after{content:'';position:absolute;top:40px;right:-12px;width:9px;height:9px;border-top:2px solid rgba(167,139,250,.55);border-right:2px solid rgba(167,139,250,.55);transform:rotate(45deg);z-index:2;}
.step:last-child::after{display:none;}
@media(max-width:900px){.step::after{display:none;}}

/* Pictorial user journey — icon nodes joined by curved arrows */
.journey{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1180px;margin:0 auto;}
.jstop{--accent:124,58,237;position:relative;text-align:center;padding:0 6px;z-index:1;}
.jdisc{position:relative;width:84px;height:84px;margin:0 auto 20px;border-radius:26px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(155deg, rgba(var(--accent),.5), rgba(var(--accent),.14) 75%), rgba(255,255,255,.04);
  border:1px solid rgba(var(--accent),.55);
  box-shadow:0 16px 38px rgba(0,0,0,.42), 0 0 34px rgba(var(--accent),.35), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(10px);transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;}
.jstop:hover .jdisc{transform:translateY(-5px);box-shadow:0 22px 46px rgba(0,0,0,.5), 0 0 48px rgba(var(--accent),.5), inset 0 1px 0 rgba(255,255,255,.2);}
.jdisc::after{content:'';position:absolute;inset:-9px;border-radius:32px;border:1px dashed rgba(var(--accent),.3);}
.jnum{position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-size:12px;font-weight:800;
  background:linear-gradient(140deg,#fff,rgba(236,230,255,.82));color:#160a2e;
  box-shadow:0 5px 14px rgba(0,0,0,.45);}
.jstop h4{font-size:16.5px;font-weight:700;margin-bottom:7px;letter-spacing:-.01em;}
.jstop p{font-size:13px;color:var(--text-1);line-height:1.55;max-width:232px;margin:0 auto;}

/* curved dashed connectors drawn between the discs */
.jarrow{position:absolute;top:0;width:154px;height:84px;transform:translateX(-50%);pointer-events:none;z-index:0;}
.jarrow.a1{left:25%;} .jarrow.a2{left:50%;} .jarrow.a3{left:75%;}
.jarrow path{stroke:rgba(167,139,250,.6);stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:7 7;
  animation:jdash 2.6s linear infinite;}
.jarrow .head{fill:rgba(167,139,250,.9);stroke:none;}
@keyframes jdash{to{stroke-dashoffset:-28;}}

@media(max-width:900px){
  .journey{grid-template-columns:repeat(2,1fr);gap:38px 20px;}
  .jarrow{display:none;}
}
@media(max-width:520px){
  .journey{grid-template-columns:1fr;gap:34px;}
  .jstop{display:grid;grid-template-columns:76px 1fr;column-gap:18px;row-gap:5px;
    text-align:left;align-items:center;padding:0;}
  .jdisc{grid-column:1;grid-row:1 / span 2;align-self:center;width:76px;height:76px;margin:0;border-radius:23px;}
  .jstop h4{grid-column:2;grid-row:1;align-self:end;margin-bottom:0;}
  .jstop p{grid-column:2;grid-row:2;align-self:start;margin:0;max-width:none;}
  .jstop:not(:last-child)::after{content:'';position:absolute;left:37px;top:calc(100% + 4px);width:2px;height:26px;
    background:repeating-linear-gradient(180deg, rgba(167,139,250,.55) 0 5px, transparent 5px 10px);}
}
@media (prefers-reduced-motion: reduce){.jarrow path{animation:none;}}

/* Capability columns — editorial list per category (Option C) */
.capcols{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;max-width:1200px;margin:0 auto;}
.capcol{--accent:124,58,237;min-width:0;}
.caphead{position:relative;display:flex;flex-direction:column;gap:14px;padding-bottom:16px;margin-bottom:4px;}
.caphead::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg, rgba(var(--accent),.95), rgba(var(--accent),.06));}
.caphead img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 9px 18px rgba(var(--accent),.5));}
.caphead h4{font-family:'Sora',sans-serif;font-size:16.5px;font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--text-0);}
.capitem{display:flex;gap:12px;align-items:flex-start;padding:16px 8px 16px 0;
  border-bottom:1px solid rgba(255,255,255,.07);border-radius:10px;transition:background .25s,padding .25s;}
.capitem:last-child{border-bottom:0;}
.capitem:hover{background:linear-gradient(90deg, rgba(var(--accent),.09), transparent 70%);padding-left:8px;}
.capitem .cic{width:27px;height:27px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-top:1px;
  background:rgba(var(--accent),.16);border:1px solid rgba(var(--accent),.24);color:rgb(var(--accent));transition:background .25s;}
.capitem:hover .cic{background:rgba(var(--accent),.28);}
.capitem b{display:block;font-size:13.8px;font-weight:700;color:var(--text-0);margin-bottom:3px;letter-spacing:-.005em;line-height:1.3;}
.capitem span{display:block;font-size:11.9px;color:var(--text-2);line-height:1.45;}

@media(max-width:1000px){.capcols{grid-template-columns:repeat(2,1fr);gap:30px 32px;}}
@media(max-width:560px){
  .capcols{grid-template-columns:1fr;gap:26px;}
  .caphead{flex-direction:row;align-items:center;gap:14px;padding-bottom:13px;}
  .caphead img{width:40px;height:40px;}
  .capitem{padding:14px 4px 14px 0;}
}

/* AI Contact Intelligence preview card (coded UI, not a screenshot) */
.ai-card{border-radius:22px;padding:34px 34px 30px;background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 30px 70px rgba(76,29,149,.32), var(--glass-hi);position:relative;overflow:hidden;}
.ai-card::before{content:'';position:absolute;inset:0;background:radial-gradient(380px circle at 88% -10%, rgba(124,58,237,.35), transparent 60%);pointer-events:none;}
.ai-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:6px;position:relative;}
.ai-tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--purple-2);display:flex;align-items:center;gap:7px;padding-top:4px;}
.ai-heat{font-family:'Sora',sans-serif;font-weight:800;font-size:28px;color:#fff;text-align:right;white-space:nowrap;}
.ai-heat small{font-size:14px;font-weight:600;color:var(--text-1);}
.ai-heat .tier{display:block;font-family:'Inter';font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--gold);background:rgba(240,180,41,.15);padding:4px 11px;border-radius:100px;margin-top:6px;}
.ai-trend{font-size:12.5px;color:#4ade80;font-weight:600;margin-bottom:22px;position:relative;}
.ai-insights{list-style:none;display:flex;flex-direction:column;gap:15px;position:relative;}
.ai-insights li{font-size:14px;line-height:1.6;color:var(--text-1);padding-left:17px;position:relative;}
.ai-insights li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--purple-2);box-shadow:0 0 8px rgba(124,58,237,.7);}
.ai-insights li b{color:var(--text-0);font-weight:700;}
.ai-card-foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--glass-brd);display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-2);position:relative;}

footer{padding:60px clamp(20px,5vw,64px) 40px;border-top:1px solid rgba(255,255,255,.06);text-align:center;}
footer .logo{justify-content:center;margin-bottom:16px;} footer p{color:var(--text-2);font-size:13.5px;}
footer .flinks{display:flex;gap:24px;justify-content:center;margin-top:18px;font-size:13.5px;color:var(--text-1);flex-wrap:wrap;}

.reveal-el{opacity:0;transform:translateY(16px) scale(.985);transition:opacity .5s cubic-bezier(.16,.8,.28,1),transform .5s cubic-bezier(.16,.8,.28,1);will-change:opacity,transform;}
.reveal-el.in{opacity:1;transform:translateY(0) scale(1);}

/* Lazy/async images fade in once actually loaded, instead of popping in abruptly */
img[loading="lazy"],img[decoding="async"]{opacity:0;transition:opacity .45s ease;}
img[loading="lazy"].img-loaded,img[decoding="async"].img-loaded{opacity:1;}

.marquee-wrap{overflow:hidden;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);padding:20px 0;background:rgba(255,255,255,.02);}
.marquee-track{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite;font-family:'Sora',sans-serif;font-weight:700;font-size:14px;letter-spacing:.08em;color:var(--text-2);}
.marquee-track span::after{content:'✦';margin-left:56px;color:var(--gold);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@media(max-width:760px){
  .nav-links{display:none;} .burger{display:flex;}
  /* keep decorative glows/bases from forcing a horizontal scroll */
  .laptop-glow{inset:-18% -4%;}
  .lp-base{width:104%;margin-left:-2%;}
  section{padding:56px 18px;}
  .hero{padding-top:120px;padding-bottom:44px;}
  .hero-strip{margin-top:48px;gap:22px 32px;}
  .hero-ctas{gap:12px;}
  .hero-ctas a{width:100%;justify-content:center;}
  .fork-card{padding:30px 22px;border-radius:22px;}
  .fork-card .product-shot{margin:18px 0 0;}

  .fork-card h3{font-size:23px;}
  .bento{gap:14px;}
  .bento-card{padding:22px;}
  .compare-card{padding:28px 24px;}
  .pricing-strip{gap:10px;}
  .pricing-pill{padding:13px 20px;font-size:13px;width:100%;justify-content:center;}
  .founder-strip p{font-size:17px;}
  .sec-head{margin-bottom:28px;}
  .contact-form{padding:26px;}
}
/* ---- Mobile tuning pass ---- */
@media(max-width:760px){
  nav{padding:13px 16px;}
  .logo img{height:31px;}
  .nav-cta{padding:12px 18px;font-size:13.5px;}
  .burger{padding:9px 3px;}
  /* comfortable tap targets */
  .go{padding:8px 0;}
  footer .flinks a{padding:7px 0;}

  section{padding:52px 18px;}
  .sec-head{margin-bottom:26px;}
  .sec-head h2{font-size:clamp(25px,6.6vw,32px);line-height:1.16;text-wrap:balance;}
  .sec-head p{font-size:15.5px;line-height:1.6;}
  .eyebrow{font-size:11.5px;margin-bottom:14px;}

  .hero{padding-top:112px;}
  .hero h1{font-size:clamp(30px,8.4vw,40px);line-height:1.12;text-wrap:balance;}
  .hero p.lead{font-size:15.5px;margin-top:18px;}
  .hero-grid{gap:34px;}
  .btn-primary,.btn-ghost,.submit-btn{min-height:52px;}

  /* hero stats: even 2-up grid, left aligned with the copy above it */
  .hero-strip{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;margin-top:44px;}
  .stat{text-align:left;}
  .stat .num{font-size:clamp(20px,5.6vw,26px);line-height:1.15;}
  .stat .label{font-size:11.5px;margin-top:4px;line-height:1.4;}

  /* forms: 16px keeps iOS from zooming the page on focus */
  .contact-form{padding:24px 20px;border-radius:22px;}
  .field input,.field select,.field textarea{font-size:16px;padding:14px 15px;}
  .field label{font-size:13px;}
  .plan-opt .box{padding:15px;}

  footer{padding:48px 18px 34px;}
  footer .flinks{gap:14px 20px;}
}
@media(max-width:400px){
  .hero h1{font-size:29px;}
  .sec-head h2{font-size:24px;}
  .nav-cta{padding:9px 14px;font-size:12.5px;}
  .logo img{height:28px;}
  .mm-links a{font-size:18.5px;padding:15px 4px;}
}