@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#05040a;--panel:#0b0912;--line:#1d1926;--text:#f7f5fa;--muted:#96909f;--purple:#8b5cf6;--violet:#a78bfa;--max:1180px}
*{box-sizing:border-box} img,svg,video,iframe{max-width:100%} .hero,.dashboard,main>section,footer,.nav{width:100%;min-width:0} h1,h2,h3,p,blockquote,small,strong,span,a{overflow-wrap:break-word}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 80% 0%,rgba(124,58,237,.08),transparent 30%),var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.55;overflow-x:hidden}
a{color:inherit}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");z-index:20}
.orb{position:fixed;width:600px;height:600px;border-radius:50%;filter:blur(150px);opacity:.10;pointer-events:none;z-index:-1}.orb1{background:#7c3aed;right:-220px;top:-250px}.orb2{background:#4f46e5;left:-300px;bottom:-300px}
.nav{min-height:78px;max-width:var(--max);margin:auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #15121d;position:relative;z-index:30;gap:24px}.logo{font-weight:800;letter-spacing:.08em;color:#fff;text-decoration:none;white-space:nowrap}.logo span{color:var(--violet)}nav{display:flex;gap:26px;align-items:center}nav a{color:#817a89;text-decoration:none;font-size:12px;transition:.2s}nav a:hover{color:#fff}.navbtn{color:#fff;text-decoration:none;border:1px solid #302a3a;border-radius:999px;padding:10px 15px;font-size:12px;white-space:nowrap}
.hero{max-width:var(--max);margin:auto;text-align:center;padding:118px 28px 70px}.eyebrow{color:var(--violet);font-size:10px;font-weight:800;letter-spacing:.22em;line-height:1.4}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#a78bfa;box-shadow:0 0 15px #8b5cf6;margin-right:7px}
h1,h2{font-weight:800}.hero h1,h2{font-size:clamp(42px,5.2vw,70px);line-height:1.04;letter-spacing:-.055em;margin:22px 0 28px}.hero h1 span,h2 span{background:linear-gradient(90deg,#eeeaff,#8b5cf6 70%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero>p{max-width:720px;margin:0 auto;color:#a09aa8;font-size:17px;line-height:1.7}.actions{margin:32px 0 16px}.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#9b6cff,#7441e8);color:#fff;text-decoration:none;border-radius:11px;padding:15px 21px;font-size:13px;font-weight:700;box-shadow:0 0 35px rgba(139,92,246,.18);margin:5px;min-height:48px}.btn:hover{transform:translateY(-2px)}.btn.ghost{background:transparent;border:1px solid #2b2634;box-shadow:none}.hero label{display:block;color:#686270;font-size:11px}
.dashboard{max-width:950px;margin:70px auto 35px;text-align:left;border:1px solid #292333;border-radius:20px;background:linear-gradient(145deg,rgba(20,16,28,.95),rgba(8,7,12,.96));box-shadow:0 30px 100px rgba(0,0,0,.45);overflow:hidden}.dash-top{padding:15px 20px;border-bottom:1px solid #211c29;color:#756e7c;font-size:9px;letter-spacing:.18em}.live{float:right;color:#a78bfa}.dash-body{display:grid;grid-template-columns:1.15fr 1.15fr .7fr;gap:12px;padding:16px}.lead-card,.ai-card,.status-card{border:1px solid #211c2a;background:#0c0a11;border-radius:14px;padding:19px;min-height:145px}.mini-label{font-size:9px;letter-spacing:.16em;color:#716a78}.lead-card h3{margin:18px 0 4px;font-size:17px}.lead-card p{margin:0;color:#7f7886;font-size:11px}.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:18px}.tags b{font-size:8px;color:#b8a9d8;background:#191328;padding:6px 8px;border-radius:5px}.score{margin-top:18px;color:#bca7ff;font-weight:800;font-size:19px}.bars{display:flex;gap:4px;margin:10px 0}.bars i{height:3px;flex:1;background:#8b5cf6;border-radius:2px}.ai-card small{color:#6f6877;font-size:9px;line-height:1.5}.status-card{position:relative}.status-card span{display:block;font-size:9px;color:#716a78}.status-card strong{display:block;margin-top:25px;font-size:16px;word-break:break-word}.status-card em{position:absolute;right:18px;bottom:19px;color:#a78bfa;font-style:normal}.activity{padding:12px 20px;border-top:1px solid #19151f;font-size:10px;color:#77717e;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.activity .check{color:#a78bfa}.activity b{color:#9f8bc8;font-size:8px}.activity>span:last-child{margin-left:auto}.booking b{color:#bca7ff}.scroll{text-align:center;color:#4f4956;font-size:9px;letter-spacing:.2em}.scroll span{color:#a78bfa;font-size:15px}
main>section:not(.hero){max-width:var(--max);margin:auto;padding:105px 28px}.problem h2,.system h2,.example h2,.features h2,.audience h2,.implementation h2,.faq h2,.cta h2{font-size:clamp(38px,4.4vw,58px);line-height:1.06}.cards,.feature-grid,.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:45px}.cards article,.feature-grid article,.steps article{border:1px solid #1b1722;background:rgba(10,9,15,.78);border-radius:18px;padding:27px;transition:.3s;min-width:0}.cards article:hover,.feature-grid article:hover,.steps article:hover{transform:translateY(-5px);border-color:#392c52}.num,.feature-grid article>span,.steps article>b{color:#a78bfa;font-size:10px;letter-spacing:.15em}.cards h3,.feature-grid h3,.steps h3{font-size:18px;line-height:1.3;margin:20px 0 8px}.cards p,.feature-grid p,.steps p,.sub,.wide,.cta p{color:#8e8896;font-size:13px;line-height:1.7}
.system{border-top:1px solid #15121c;border-bottom:1px solid #15121c}.sub{max-width:680px}.pipeline{display:grid;grid-template-columns:minmax(130px,1fr) 34px minmax(100px,.7fr) 34px minmax(130px,1fr) 34px minmax(100px,.7fr) 34px minmax(140px,1fr);align-items:center;margin-top:48px;gap:0}.node{min-width:0;border:1px solid #292332;border-radius:13px;background:#0b0910;padding:18px;transition:.4s}.node.active{border-color:#8b5cf6;box-shadow:0 0 28px rgba(139,92,246,.14);transform:translateY(-3px)}.node span{color:#665e70;font-size:9px}.node strong{display:block;margin-top:20px;font-size:12px;line-height:1.3}.node small{display:block;color:#716a78;margin-top:5px;font-size:9px;line-height:1.4}.line{height:1px;width:100%;background:linear-gradient(90deg,#30283d,#8b5cf6,#30283d)}
.flow-console{margin:45px auto 0;max-width:900px;border:1px solid #25202f;border-radius:17px;background:#08070c;overflow:hidden}.console-head{padding:14px 18px;border-bottom:1px solid #1b1721;color:#6e6875;font-size:9px;letter-spacing:.12em;display:flex;justify-content:space-between;gap:15px}.console-row{display:grid;grid-template-columns:8px 78px minmax(0,1fr) 75px;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #14111a;font-size:10px;color:#817a89}.console-row:last-child{border:0}.console-row b{color:#b5a9c5}.console-row strong{color:#a78bfa}.dot{width:5px;height:5px;background:#8b5cf6;border-radius:50%;box-shadow:0 0 8px #8b5cf6}.console-row time{color:#514b58;text-align:right;white-space:nowrap}
.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:45px}.quote,.qualification{border:1px solid #211c2a;background:#0b0910;border-radius:18px;padding:28px;min-width:0}.quote blockquote{font-size:18px;line-height:1.55;margin:25px 0;color:#ddd9e2}.quote small{color:#625b6b}.high{font-size:28px;font-weight:800;color:#a78bfa;margin:20px 0}.qualification p{font-size:12px;color:#85808d;line-height:1.7}.qualification hr{border:0;border-top:1px solid #1e1926;margin:22px 0}.kv{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #18151e;padding:10px 0;font-size:10px}.kv span{color:#625b6b}.kv b{text-align:right;color:#c0bac7}.journey{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:35px;flex-wrap:wrap}.journey>div{border:1px solid #211c2a;background:#0b0910;padding:14px 20px;border-radius:12px;text-align:center;min-width:120px}.journey span{display:block;color:#a78bfa;font-size:9px}.journey b{display:block;font-size:11px;margin-top:5px}.journey small{display:block;color:#66606d;font-size:8px;margin-top:2px}.journey i{color:#514a59;font-style:normal}.journey .final{border-color:#6e4ab2}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-grid article{min-height:185px}.audience{border-top:1px solid #15121c}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.chips span{border:1px solid #25202f;border-radius:999px;padding:8px 13px;color:#aaa3b1;font-size:9px;letter-spacing:.1em}.integration{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:55px;padding:25px;border:1px solid #1b1722;background:#09080d;border-radius:15px;color:#8d8596;font-size:10px}.integration span{white-space:nowrap}.integration b{color:#4c4555}.implementation{border-top:1px solid #15121c}.steps{grid-template-columns:repeat(4,minmax(0,1fr))}.faq{border-top:1px solid #15121c}.faq details{max-width:850px;margin:10px auto;border:1px solid #1d1925;border-radius:12px;padding:18px 20px;background:#09080e}.faq summary{cursor:pointer;font-size:13px;font-weight:600;line-height:1.5}.faq details p{font-size:12px;line-height:1.7;margin:12px 0 0;color:#8e8896}.cta{text-align:center;border-top:1px solid #15121c;padding-bottom:130px!important}.cta p{max-width:600px;margin:0 auto 25px}.big{padding:17px 26px;font-size:14px}footer{max-width:var(--max);margin:auto;padding:28px;border-top:1px solid #15121c;color:#625c69;font-size:10px;display:flex;justify-content:space-between;align-items:center;gap:20px}footer p{margin:0;text-align:center}footer small{color:#4e4854;white-space:nowrap}
@media(max-width:1150px){
  :root{--max:1060px}
  .nav{padding-left:22px;padding-right:22px}
  .hero{padding-left:22px;padding-right:22px}
  main>section:not(.hero){padding-left:22px;padding-right:22px}
  .pipeline{grid-template-columns:minmax(105px,1fr) 22px minmax(90px,.8fr) 22px minmax(105px,1fr) 22px minmax(90px,.8fr) 22px minmax(115px,1fr)}
  .node{padding:15px}.node strong{font-size:11px}.node small{font-size:8px}
  .console-row{grid-template-columns:7px 70px minmax(0,1fr) 70px}
}
@media(max-width:900px){
  nav{display:none}.nav{padding:17px 20px}.hero{padding-top:90px}
  .dash-body{grid-template-columns:1fr 1fr}.status-card{grid-column:1/-1;min-height:100px}
  .pipeline{grid-template-columns:1fr;gap:10px}.line{height:26px;width:1px;margin:auto}.node{width:100%;text-align:left}.node strong{margin-top:8px}
  .cards,.feature-grid,.steps{grid-template-columns:1fr 1fr}.example-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .nav{min-height:68px;padding:15px 16px}.navbtn{font-size:10px;padding:9px 12px}.hero{padding:78px 18px 55px}
  .hero h1{font-size:clamp(39px,11vw,50px);letter-spacing:-.06em}.hero>p{font-size:14px}.btn{width:100%;margin:5px 0}
  .dashboard{margin-top:50px;border-radius:16px}.dash-body{grid-template-columns:1fr;padding:12px}.status-card{grid-column:auto;min-height:100px}.activity{font-size:9px}.activity>span:last-child{margin-left:0;width:100%;padding-left:21px}.dash-top{font-size:8px}.live{float:none;margin-left:10px}.scroll{margin-top:10px}
  main>section:not(.hero){padding:72px 18px}.problem h2,.system h2,.example h2,.features h2,.audience h2,.implementation h2,.faq h2,.cta h2{font-size:clamp(35px,10vw,48px)}
  .cards,.feature-grid,.steps{grid-template-columns:1fr;gap:12px}.cards article,.feature-grid article,.steps article{padding:23px}.flow-console{margin-top:35px}.console-head{font-size:8px}
  .console-row{grid-template-columns:7px 60px minmax(0,1fr);gap:8px;padding:12px 13px;font-size:9px}.console-row time{display:none}.example-grid{gap:12px}.quote,.qualification{padding:22px}.quote blockquote{font-size:16px}.kv{align-items:flex-start}.kv b{max-width:60%}
  .journey{display:grid;grid-template-columns:1fr;gap:8px}.journey>div{width:100%}.journey i{display:none}.integration{margin-top:35px;padding:20px 14px;gap:10px}.integration b{display:none}
  footer{display:block;padding:25px 18px;text-align:center}footer p{margin:12px 0}footer small{display:block}.logo{font-size:12px}
}

/* 2.3 desktop stability patch */
.hero h1{max-width:980px;margin-left:auto;margin-right:auto;font-size:clamp(46px,4.7vw,64px);text-wrap:balance}
.hero>p{max-width:760px}
.dashboard{width:min(950px,100%);margin-left:auto;margin-right:auto}
.status-card{display:flex;flex-direction:column;justify-content:flex-start;gap:0}
.status-card span{margin:0 0 10px}
.status-card strong{margin:0;line-height:1.2}
.status-card em{right:18px;top:18px;bottom:auto}
.activity{column-gap:9px;row-gap:5px}
.activity .check{flex:0 0 auto}
.activity b{display:inline-block;margin-left:2px}
.activity>span:not(.check):last-child{margin-left:auto;flex:0 0 auto}
.pipeline{width:100%;max-width:1120px;margin-left:auto;margin-right:auto}
.node strong,.node small{overflow-wrap:anywhere}
.integration span{white-space:normal;text-align:center}

@media (min-width:901px){
  .hero{padding-top:105px}
  .hero h1{font-size:clamp(48px,4.3vw,62px)}
  .dashboard{margin-top:58px}
}

@media (min-width:901px) and (max-width:1100px){
  .hero h1{font-size:52px;max-width:900px}
  .hero>p{font-size:16px;max-width:700px}
  .dash-body{grid-template-columns:1fr 1fr .8fr}
}

@media (max-width:900px){
  .hero h1{max-width:680px}
}

/* ==============================
   2.5 — ONE VISUAL SYSTEM
   Desktop and mobile use the same animated UI.
   ============================== */

/* Prevent the desktop browser from creating the oversized/overlapping typography seen before. */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{min-height:100vh}
.hero,.dashboard,main>section,footer,.nav{min-width:0}
.hero h1{max-width:900px;margin-left:auto;margin-right:auto;text-wrap:balance}
.hero>p{max-width:720px}

/* The hero dashboard is intentionally stacked on BOTH desktop and mobile. */
.dashboard{
  width:min(760px,calc(100vw - 36px));
  max-width:760px;
  margin:58px auto 34px;
  border-radius:22px;
  transform:translateY(18px);
  opacity:0;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1),box-shadow .8s ease;
}
.dashboard.is-visible{opacity:1;transform:translateY(0);box-shadow:0 35px 120px rgba(104,62,190,.18)}
.dash-body{display:grid;grid-template-columns:1fr;gap:14px;padding:16px}
.lead-card,.ai-card,.status-card{min-height:0;padding:28px;border-radius:18px;overflow:hidden}
.lead-card{animation:cardFloat 5s ease-in-out infinite}
.ai-card{animation:cardFloat 5s ease-in-out infinite 1s}
.status-card{animation:cardFloat 5s ease-in-out infinite 2s}
.lead-card h3{font-size:25px;line-height:1.2;margin:20px 0 5px}
.lead-card p{font-size:16px;line-height:1.45}
.tags{gap:8px;margin-top:22px}
.tags b{font-size:12px;padding:9px 13px}
.ai-card .score{font-size:28px;line-height:1.15;margin-top:24px;animation:scoreGlow 2.2s ease-in-out infinite}
.ai-card .bars{gap:8px;margin:18px 0 14px}
.ai-card .bars i{height:4px;transform-origin:left;animation:barPulse 1.8s ease-in-out infinite}
.ai-card .bars i:nth-child(2){animation-delay:.2s}.ai-card .bars i:nth-child(3){animation-delay:.4s}
.ai-card small{font-size:13px;line-height:1.5}
.status-card{min-height:150px}
.status-card span{font-size:12px;margin-bottom:22px}
.status-card strong{font-size:28px;line-height:1.15}
.status-card em{right:28px;top:50%;bottom:auto;transform:translateY(-50%);font-size:18px;animation:livePulse 1.4s ease-in-out infinite}
.status-pop{animation:statusPop .45s ease}
.activity{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:18px 24px;font-size:14px;line-height:1.45}
.activity .check{font-size:15px;animation:checkPulse 2.5s ease-in-out infinite}
.activity b{font-size:11px;margin-left:8px}
.activity-1{animation:activityIn .8s ease .3s both}.activity-2{animation:activityIn .8s ease .7s both}.activity-3{animation:activityIn .8s ease 1.1s both}
.activity>span:last-child{margin-left:0;white-space:nowrap;font-size:13px}
.scroll{margin-top:34px;font-size:11px;animation:scrollHint 2s ease-in-out infinite}
.scroll span{font-size:18px}

/* Scroll reveal is the same on desktop and mobile. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-card{opacity:1;transform:none}
.dashboard.reveal{opacity:0}
.dashboard.reveal.is-visible{opacity:1;transform:translateY(0)}

/* System pipeline: desktop keeps the same animated cards, just in one row. */
.pipeline{max-width:1100px;grid-template-columns:minmax(130px,1fr) 34px minmax(110px,.8fr) 34px minmax(130px,1fr) 34px minmax(110px,.8fr) 34px minmax(140px,1fr);margin-left:auto;margin-right:auto}
.pipeline .node{transition:transform .45s ease,border-color .45s ease,box-shadow .45s ease,background .45s ease}
.pipeline .node.active{transform:translateY(-6px) scale(1.025);box-shadow:0 0 38px rgba(139,92,246,.2),inset 0 0 25px rgba(139,92,246,.04)}
.pipeline .line{position:relative;overflow:hidden}
.pipeline .line:after{content:"";position:absolute;top:50%;left:-35%;width:35%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,#a78bfa,transparent);filter:blur(.2px);animation:travel 1.8s linear infinite}

.flow-console{max-width:900px}
.console-row{transition:background .3s ease,transform .3s ease}
.console-row:hover{background:rgba(139,92,246,.045);transform:translateX(3px)}
.dot{animation:dotPulse 1.7s ease-in-out infinite}
.console-row:nth-child(3) .dot{animation-delay:.2s}.console-row:nth-child(4) .dot{animation-delay:.4s}.console-row:nth-child(5) .dot{animation-delay:.6s}.console-row:nth-child(6) .dot{animation-delay:.8s}

/* Example journey — final BOOKED state gets the same animated emphasis. */
.journey .final{animation:finalGlow 2.4s ease-in-out infinite}

@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes scoreGlow{0%,100%{text-shadow:0 0 0 rgba(167,139,250,0)}50%{text-shadow:0 0 24px rgba(167,139,250,.28)}}
@keyframes barPulse{0%,100%{transform:scaleX(.82);opacity:.55}50%{transform:scaleX(1);opacity:1}}
@keyframes livePulse{0%,100%{opacity:.5;box-shadow:0 0 0 rgba(167,139,250,0)}50%{opacity:1;text-shadow:0 0 18px rgba(167,139,250,.8)}}
@keyframes statusPop{0%{opacity:.3;transform:translateY(5px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes checkPulse{0%,100%{opacity:.55}50%{opacity:1;text-shadow:0 0 12px rgba(167,139,250,.8)}}
@keyframes activityIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollHint{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}
@keyframes travel{0%{left:-35%}100%{left:100%}}
@keyframes dotPulse{0%,100%{opacity:.45;box-shadow:0 0 0 rgba(139,92,246,0)}50%{opacity:1;box-shadow:0 0 12px rgba(139,92,246,.8)}}
@keyframes finalGlow{0%,100%{box-shadow:0 0 0 rgba(139,92,246,0)}50%{box-shadow:0 0 30px rgba(139,92,246,.16)}}

@media(max-width:900px){
  .pipeline{max-width:100%;grid-template-columns:1fr;gap:10px}
  .pipeline .line{height:22px;width:1px;margin:auto}
  .pipeline .line:after{top:-35%;left:50%;width:2px;height:35%;transform:translateX(-50%);animation:travelVertical 1.8s linear infinite}
  .pipeline .node{width:100%}
}
@keyframes travelVertical{0%{top:-35%}100%{top:100%}}

@media(max-width:650px){
  .dashboard{width:calc(100vw - 36px);margin-top:50px;border-radius:18px}
  .lead-card,.ai-card,.status-card{padding:25px 22px}
  .lead-card h3{font-size:24px}.lead-card p{font-size:15px}
  .ai-card .score{font-size:27px}.status-card{min-height:150px}
  .activity{grid-template-columns:18px minmax(0,1fr) auto;padding:17px 18px;font-size:13px}
  .activity b{font-size:10px}.activity>span:last-child{font-size:12px}
}

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

/* =====================================================
   3.0 — SAME LIVE UI ON EVERY SCREEN
   The mobile LeadFlow dashboard is the reference design.
   Desktop does NOT switch to a different presentation.
   ===================================================== */

/* Never disable the live motion because of desktop accessibility preferences.
   The page itself keeps all motion subtle and informational. */

/* Same centered, stacked dashboard at every viewport width. */
.dashboard{
  width:min(760px,calc(100vw - 36px)) !important;
  max-width:760px !important;
  margin:58px auto 34px !important;
}
.dash-body{
  grid-template-columns:1fr !important;
  gap:14px !important;
  padding:16px !important;
}
.lead-card,.ai-card,.status-card{
  min-height:150px !important;
  padding:28px !important;
  border-radius:18px !important;
}
.lead-card h3{font-size:25px !important;line-height:1.2 !important}
.lead-card p{font-size:16px !important}
.ai-card .score{font-size:28px !important}
.status-card strong{font-size:28px !important}
.activity{
  display:grid !important;
  grid-template-columns:20px minmax(0,1fr) auto !important;
  padding:18px 24px !important;
  font-size:14px !important;
}
.activity>span:last-child{width:auto !important;padding-left:0 !important}

/* Same animated horizontal pipeline everywhere — no desktop-only row. */
.pipeline{
  display:flex !important;
  width:100% !important;
  max-width:900px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:8px 4px 18px !important;
  scrollbar-width:none !important;
  scroll-snap-type:x mandatory;
}
.pipeline::-webkit-scrollbar{display:none}
.pipeline .node{
  flex:0 0 210px !important;
  width:210px !important;
  min-height:150px !important;
  scroll-snap-align:center;
}
.pipeline .line{
  flex:0 0 42px !important;
  width:42px !important;
  height:auto !important;
  align-self:center !important;
  margin:0 !important;
}
.pipeline .line:after{
  top:50% !important;
  left:-35% !important;
  width:35% !important;
  height:2px !important;
  transform:translateY(-50%) !important;
  animation:travel 1.8s linear infinite !important;
}

/* Same 3 + 1 journey layout everywhere. */
.journey{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.journey>div{
  min-width:0 !important;
  width:100% !important;
  padding:18px 12px !important;
}
.journey>i{display:none !important}
.journey .final{grid-column:2}

/* Keep the rest of the page fluid, but use the same card proportions. */
.example-grid{grid-template-columns:1fr !important;max-width:760px;margin-left:auto;margin-right:auto}
.cards,.feature-grid,.steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important}

/* Make the desktop hero match the phone's breathing room. */
.hero{padding-top:92px !important;padding-bottom:62px !important}
.hero h1{font-size:clamp(42px,5.5vw,62px) !important;max-width:850px !important}
.hero>p{max-width:720px !important}

/* Stronger, visible motion on the live dashboard. */
.dashboard{will-change:transform,box-shadow}
.lead-card,.ai-card,.status-card{will-change:transform}
.dashboard .bars i,.dashboard .pulse,.dashboard .status-card em,.dashboard .check,.dashboard .dot,.journey .final,.pipeline .node.active{will-change:transform,opacity,box-shadow,text-shadow}

/* Remove the old reduced-motion kill switch so desktop and mobile behave identically. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:initial !important;
    animation-iteration-count:initial !important;
    scroll-behavior:smooth !important;
    transition-duration:initial !important;
  }
}

@media(max-width:650px){
  .dashboard{width:calc(100vw - 36px) !important;margin-top:50px !important}
  .lead-card,.ai-card,.status-card{padding:25px 22px !important}
  .activity{grid-template-columns:18px minmax(0,1fr) auto !important;padding:17px 18px !important;font-size:13px !important}
  .pipeline .node{flex-basis:210px !important;width:210px !important}
  .pipeline .line{flex-basis:30px !important;width:30px !important}
  .cards,.feature-grid,.steps{grid-template-columns:1fr !important}
}

/* 3.1 — pricing / commercial offer */
.pricing{border-top:1px solid #15121c}.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:45px}.price-card{border:1px solid #1b1722;background:rgba(10,9,15,.82);border-radius:18px;padding:30px}.price-card.featured{border-color:#392c52;box-shadow:0 0 35px rgba(124,58,237,.10)}.price{font-size:46px;font-weight:800;letter-spacing:-.04em;margin:14px 0 8px}.price small{font-size:14px;color:#8e8896;font-weight:500;letter-spacing:0}.price-card p{color:#8e8896;font-size:13px;line-height:1.7;max-width:560px}.price-card ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}.price-card li{font-size:12px;color:#b6b0bc}.price-card li:before{content:'✓';color:#a78bfa;margin-right:9px}.price-note{margin-top:24px;padding-top:18px;border-top:1px solid #1b1722;color:#77717f;font-size:11px;line-height:1.6}.external-costs{margin-top:15px;border:1px solid #1b1722;border-radius:14px;padding:18px 20px;background:#09080d;display:flex;gap:18px;align-items:flex-start}.external-costs b{font-size:11px;white-space:nowrap}.external-costs span{font-size:11px;color:#77717f;line-height:1.6}
@media(max-width:760px){.pricing-grid{grid-template-columns:1fr}.external-costs{display:block}.external-costs span{display:block;margin-top:7px}.price{font-size:40px}}

/* 4.0 sales polish */
.hero-audience{margin:18px auto 0;max-width:760px;text-align:center;font-size:14px;line-height:1.7;color:rgba(245,243,255,.58);letter-spacing:.01em}
.benefits{padding:120px 36px 110px;max-width:1180px;margin:0 auto}
.benefits h2{margin:0 0 44px;font-size:clamp(42px,5vw,68px);line-height:.98;letter-spacing:-.045em}
.benefits h2 span{background:linear-gradient(90deg,#fff,#b78cff 55%,#7d42ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.benefit-grid article{min-height:190px;padding:28px;border:1px solid rgba(180,150,255,.16);border-radius:18px;background:rgba(255,255,255,.015);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.benefit-grid article>b{font-size:11px;letter-spacing:.16em;color:#a77bff}
.benefit-grid h3{margin:38px 0 10px;font-size:19px}
.benefit-grid p{margin:0;color:rgba(235,231,245,.56);font-size:14px;line-height:1.7}
.integration-note{max-width:760px;margin:18px auto 0;text-align:center;color:rgba(235,231,245,.48);font-size:13px;line-height:1.7}
.pricing{scroll-margin-top:90px}
@media(max-width:800px){
  .benefits{padding:88px 20px 80px}
  .benefit-grid{grid-template-columns:1fr}
  .benefit-grid article{min-height:auto}
  .hero-audience{padding:0 10px}
  .integration-note{padding:0 12px}
}


/* 4.3 — contact section */
.contact{max-width:1160px;margin:0 auto;padding:140px 36px 120px;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.contact h2{max-width:850px;margin:14px auto 18px;font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.045em}
.contact p{max-width:720px;margin:0 auto 32px;color:var(--muted,#9b97a8);font-size:18px;line-height:1.6}
.contact-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
@media(max-width:700px){.contact{padding:100px 20px 80px}.contact p{font-size:16px}.contact-actions{flex-direction:column;align-items:stretch}.contact-actions .btn{text-align:center}}

.footer-links{margin:10px 0}.footer-links a{color:rgba(255,255,255,.62);text-decoration:none}.footer-links a:hover{color:#fff}