@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
/* Self-hosted Proxima Nova */
@font-face{font-family:"Proxima Nova";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/ProximaNovaRegular.woff") format("woff"),url("../fonts/ProximaNovaRegular.ttf") format("truetype")}
@font-face{font-family:"Proxima Nova";font-weight:600 700;font-style:normal;font-display:swap;
  src:url("../fonts/ProximaNovaBold.woff") format("woff"),url("../fonts/ProximaNovaBold.ttf") format("truetype")}
@font-face{font-family:"Proxima Nova";font-weight:800 900;font-style:normal;font-display:swap;
  src:url("../fonts/ProximaNovaBlack.woff") format("woff"),url("../fonts/ProximaNovaBlack.ttf") format("truetype")}
/* ============================================================
   PaidDesk — premium fintech marketing site (LIGHT theme)
   Soft cool-white canvas · luminous teal · editorial serif
   ============================================================ */

:root{
  --nav-font:"Outfit",system-ui,sans-serif;
  --bg:#f4f8f9;
  --bg-2:#eef4f6;
  --surface:#ffffff;
  --ink:#0e2436;         /* logo navy */
  --ink-2:#33505d;
  --muted:#5f7a85;
  --muted-2:#8aa2aa;
  --teal:#12a3aa;
  --teal-br:#17bec7;
  --teal-dp:#0c7e86;
  --navy:#0e2436;
  --line:#e2ecee;
  --line-2:#d3e2e5;
  --tint:#eff7f8;
  --grad-teal:linear-gradient(135deg,#1fc4cb 0%,#12a3aa 55%,#0c7e86 100%);
  --grad-text:linear-gradient(100deg,#0c7e86 0%,#12a3aa 45%,#1fc4cb 100%);
  --grad-deep:linear-gradient(140deg,#12888f 0%,#0d6f78 45%,#0e2436 120%);
  --sh-sm:0 2px 8px rgba(14,36,54,.05);
  --sh:0 18px 40px -22px rgba(14,36,54,.28);
  --sh-lg:0 40px 90px -46px rgba(14,36,54,.4);
  --sh-teal:0 22px 50px -20px rgba(18,163,170,.45);
  --r:20px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Outfit",system-ui,sans-serif;
  --maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--sans);background:var(--bg);color:var(--ink);
  line-height:1.62;font-size:17px;letter-spacing:-.01em;overflow-x:hidden;position:relative;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 40% at 82% 4%, rgba(23,190,199,.14), transparent 60%),
    radial-gradient(42% 34% at 6% 14%, rgba(18,163,170,.10), transparent 60%),
    radial-gradient(60% 50% at 50% 112%, rgba(23,190,199,.09), transparent 60%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(23,190,199,.22);color:var(--ink)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:#c4d8dc;border-radius:20px;border:3px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{background:var(--teal)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;color:var(--teal-dp);
  padding:10px 20px 10px 17px;border-radius:100px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(233,247,248,.7));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -12px rgba(18,163,170,.42),0 1px 2px rgba(14,36,54,.05),inset 0 1px 0 rgba(255,255,255,.8);
}
/* gradient hairline border */
.eyebrow::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:1;
  background:linear-gradient(120deg,#2fe0e6,rgba(18,163,170,.25) 45%,#1fc4cb);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* slow luxury sheen */
.eyebrow::after{
  content:"";position:absolute;top:-20%;left:-70%;width:48%;height:140%;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg);animation:sheen 5.5s ease-in-out infinite;
}
@keyframes sheen{0%,60%{left:-70%}86%,100%{left:145%}}
.eyebrow>*{position:relative;z-index:3}
.eyebrow .dot{position:relative;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4be9ee,#12a3aa);box-shadow:0 0 10px rgba(31,196,203,.9)}
.eyebrow .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid rgba(31,196,203,.55);animation:ping 2.6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.9}75%,100%{transform:scale(2);opacity:0}}

h1,h2,h3{font-family:var(--serif);font-weight:560;letter-spacing:-.02em;line-height:1.03;color:var(--ink);font-optical-sizing:auto}
.h-xl{font-size:55px;line-height:1.08}
.h-lg{font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.1}
.h-md{font-size:clamp(1.6rem,3vw,2.3rem)}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.12em;margin-bottom:-.12em}
.serif-i{font-style:italic;font-weight:400}
.lead{font-size:clamp(1.05rem,1.5vw,1.24rem);color:var(--muted);max-width:60ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:750;font-size:15.5px;
  letter-spacing:-.01em;padding:15px 26px;border-radius:14px;cursor:pointer;border:0;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,border-color .25s;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad-teal);color:#fff;box-shadow:var(--sh-teal)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 28px 60px -18px rgba(18,163,170,.6)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--sh-sm)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--teal);color:var(--teal-dp)}
.btn-lg{padding:18px 34px;font-size:16.5px;border-radius:16px}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid var(--line);transition:background .3s,box-shadow .3s,border-color .3s}
.nav.scrolled{background:rgba(244,248,249,.9);backdrop-filter:blur(16px) saturate(1.6);border-bottom-color:var(--line-2);box-shadow:0 6px 24px -18px rgba(14,36,54,.35)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center}
.brand img{height:42px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{font-family:var(--nav-font);font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:9px 15px;border-radius:100px;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--tint)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{font-family:var(--nav-font);font-weight:600;padding:11px 20px;font-size:14.5px}
/* Premium hamburger button */
.burger{display:none;position:relative;width:48px;height:48px;border-radius:16px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;color:var(--ink);isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(234,248,248,.88));
  border:1px solid rgba(23,190,199,.2);
  box-shadow:0 14px 28px -14px rgba(14,36,54,.4),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s,border-color .32s}
.burger::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1.2px;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,rgba(23,190,199,.75),rgba(120,117,255,.4) 48%,rgba(23,190,199,0) 82%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.burger::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:0;
  background:radial-gradient(72% 56% at 28% 16%,rgba(255,255,255,.75),transparent 62%)}
.burger:hover{transform:translateY(-2px);border-color:rgba(23,190,199,.42);box-shadow:0 20px 36px -14px rgba(18,163,170,.5)}
.burger .bmenu{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;width:21px;height:19px;
  align-items:flex-start;justify-content:center;transition:transform .42s cubic-bezier(.3,.85,.25,1)}
.burger .bmenu .br{display:flex;align-items:center;gap:5px;width:100%;
  transition:opacity .3s,transform .42s cubic-bezier(.3,.85,.25,1)}
.burger .bmenu .br i{width:4px;height:4px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(150deg,#17bec7,#0c7e86);transition:transform .42s cubic-bezier(.3,.85,.25,1),opacity .3s}
.burger .bmenu .br b{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ink),var(--teal-dp));
  transition:width .42s cubic-bezier(.3,.85,.25,1)}
.burger .bmenu .br:nth-child(1) b{width:13px}
.burger .bmenu .br:nth-child(2) b{width:10px}
.burger .bmenu .br:nth-child(3) b{width:7px}
.burger:hover .bmenu .br:nth-child(2) b{width:13px}
.burger:hover .bmenu .br:nth-child(3) b{width:13px}
/* Open → line-items dissolve, X grows in */
.burger .bmenu::before,.burger .bmenu::after{content:"";position:absolute;left:50%;top:50%;width:21px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--ink),var(--teal-dp));
  transform:translate(-50%,-50%) scaleX(0);opacity:0;transition:transform .42s cubic-bezier(.3,.85,.25,1),opacity .3s}
.burger.is-open .bmenu .br{opacity:0;transform:translateX(-5px)}
.burger.is-open .bmenu::before{transform:translate(-50%,-50%) rotate(45deg) scaleX(1);opacity:1}
.burger.is-open .bmenu::after{transform:translate(-50%,-50%) rotate(-45deg) scaleX(1);opacity:1}

/* Slide-in mobile drawer (built by main.js) */
.pd-scrim{position:fixed;inset:0;z-index:70;background:rgba(9,26,40,.34);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.pd-scrim.open{opacity:1;visibility:visible}
.pd-drawer{position:fixed;top:0;right:0;z-index:71;height:100%;width:min(86vw,330px);display:flex;flex-direction:column;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom));gap:6px;
  background:linear-gradient(180deg,#ffffff 0%,#f3fbfb 100%);
  border-left:1px solid rgba(23,190,199,.16);box-shadow:-40px 0 80px -40px rgba(9,26,40,.5);
  transform:translateX(105%);transition:transform .5s cubic-bezier(.5,.02,.12,1);overscroll-behavior:contain;overflow-y:auto}
.pd-drawer.open{transform:translateX(0)}
.pd-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pd-drawer-head img{height:38px;width:auto;display:block}
.pd-close{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;transition:.2s}
.pd-close:hover{color:var(--teal-dp);border-color:var(--teal);transform:rotate(90deg)}
.pd-close svg{width:20px;height:20px}
.pd-drawer-links{display:flex;flex-direction:column;gap:2px;margin:6px 0 auto}
.pd-drawer-links a{font-family:var(--nav-font);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--ink);
  text-decoration:none;padding:14px 12px;border-radius:14px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(14,36,54,.05);transition:.2s;opacity:0;transform:translateX(14px)}
.pd-drawer-links a::after{content:"→";color:var(--teal-dp);opacity:0;transform:translateX(-6px);transition:.25s;font-weight:800}
.pd-drawer-links a:hover{background:var(--tint);color:var(--teal-dp);padding-left:16px}
.pd-drawer-links a:hover::after{opacity:1;transform:translateX(0)}
.pd-drawer.open .pd-drawer-links a{opacity:1;transform:translateX(0);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.pd-drawer.open .pd-drawer-links a:nth-child(1){transition-delay:.09s}
.pd-drawer.open .pd-drawer-links a:nth-child(2){transition-delay:.14s}
.pd-drawer.open .pd-drawer-links a:nth-child(3){transition-delay:.19s}
.pd-drawer.open .pd-drawer-links a:nth-child(4){transition-delay:.24s}
.pd-drawer.open .pd-drawer-links a:nth-child(5){transition-delay:.29s}
.pd-drawer.open .pd-drawer-links a:nth-child(6){transition-delay:.34s}
.pd-drawer-cta{margin-top:18px;width:100%;justify-content:center;text-align:center}
.pd-drawer-foot{margin-top:14px;font-size:12px;color:var(--muted-2);text-align:center;font-weight:600}
body.pd-lock{overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;padding:84px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;width:100%}
.hero-grid>*,.efeat>*{min-width:0}
.hero h1{margin:8px 0 10px}
.hero .lead{margin-bottom:11px;font-size:clamp(.98rem,1.2vw,1.05rem)}
.hero .btn-lg{padding:14px 26px;font-size:15.5px}
.hero-note{margin-top:11px;font-size:12.5px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:16px;display:flex;align-items:center;gap:10px;color:var(--muted-2);font-size:13px;font-weight:600}
.hero-note .chk{color:var(--teal)}

/* Product mockup */
.mock{
  position:relative;border-radius:20px;border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--sh-lg);overflow:hidden;transform:perspective(1600px) rotateY(-9deg) rotateX(4deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.mock:hover{transform:perspective(1600px) rotateY(-3deg) rotateX(1deg)}
.mock-bar{display:flex;align-items:center;gap:7px;padding:14px 16px;border-bottom:1px solid var(--line);background:#fbfdfd}
.mock-bar i{width:11px;height:11px;border-radius:50%;background:#dbe7ea}
.mock-bar i:nth-child(1){background:#c7dade}
.mock-bar span{margin-left:auto;font-size:11px;color:var(--muted-2);font-weight:700}
.mock-body{padding:20px}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{border:1px solid var(--line);border-radius:13px;padding:13px 14px;background:#fafcfc}
.kpi .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);font-weight:800}
.kpi .v{font-family:var(--serif);font-size:23px;margin-top:6px;letter-spacing:-.02em}
.kpi .v.tl{color:var(--teal-dp)}
.mock-chart{border:1px solid var(--line);border-radius:13px;padding:16px;background:#fafcfc;margin-bottom:14px}
.mock-chart .ct{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:800;margin-bottom:14px}
.bars{display:flex;align-items:flex-end;gap:9px;height:82px}
.bars b{flex:1;border-radius:6px 6px 3px 3px;background:var(--grad-teal);animation:grow 1s cubic-bezier(.2,.7,.2,1) both}
.bars b.mut{background:#dbe7ea}
@keyframes grow{from{height:6px;opacity:0}}
.mock-ai{display:flex;gap:11px;align-items:center;border:1px solid var(--line-2);border-radius:13px;padding:13px 15px;background:var(--tint)}
.mock-ai .av{width:34px;height:34px;border-radius:9px;background:var(--grad-teal);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.mock-ai .av svg{width:18px;height:18px}
.mock-ai .tx{font-size:12.5px;color:var(--muted)}
.mock-ai .tx b{color:var(--ink);font-weight:800}
.mock-tag{position:absolute;font-size:12px;font-weight:800;padding:9px 13px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);color:var(--ink)}
.mock-tag .pip{color:#1fc4cb}
.mock-tag.t1{top:-14px;right:-16px;animation:float1 6s ease-in-out infinite}
.mock-tag.t2{bottom:26px;left:-28px;animation:float1 7s ease-in-out infinite .6s}
@keyframes float1{50%{transform:translateY(-12px)}}

/* ---------- Trust strip ---------- */
.trust{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:64px}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.trust .lbl{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);font-weight:800}
.trust .stats{display:flex;gap:52px;flex-wrap:wrap}
.trust .st b{font-family:var(--serif);font-size:32px;display:block;letter-spacing:-.02em}
.trust .st span{font-size:12.5px;color:var(--muted);font-weight:650}

/* ---------- Section shell ---------- */
.sec{padding:108px 0;position:relative}
.sec-head{max-width:720px;margin-bottom:54px}
.sec-head.center{margin:0 auto 56px;text-align:center}
.sec-head h2{margin:18px 0 16px}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.card{
  position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:30px;overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--line-2)}
.card .ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--tint);border:1px solid var(--line-2);color:var(--teal-dp);margin-bottom:20px}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:1.35rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px}
.card.wide{grid-column:span 3}
.card.mid{grid-column:span 2}
.card.tall{grid-column:span 2;grid-row:span 2}
.card.full{grid-column:span 6}
.card-glow{background:linear-gradient(165deg,#f2fbfb,#ffffff);border-color:var(--line-2)}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font-size:12.5px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:6px 13px;background:#fbfdfd}

/* AI chat preview */
.ai-chat{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.msg{border-radius:13px;padding:11px 14px;font-size:13.5px;max-width:88%}
.msg.u{align-self:flex-end;background:var(--grad-teal);color:#fff;font-weight:650}
.msg.b{align-self:flex-start;background:#f3f8f9;border:1px solid var(--line);color:var(--muted)}
.msg.b b{color:var(--ink)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;background:var(--surface);box-shadow:var(--sh-sm)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-size:52px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px;letter-spacing:-.03em}
.step h3{font-size:1.3rem;margin-bottom:9px}
.step p{color:var(--muted);font-size:15px}

/* ---------- Security band ---------- */
.secure{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;border:1px solid var(--line-2);border-radius:28px;padding:52px;background:linear-gradient(150deg,#f0f9fa,#ffffff);position:relative;overflow:hidden;box-shadow:var(--sh-sm)}
.secure::before{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;background:radial-gradient(closest-side,rgba(23,190,199,.14),transparent);pointer-events:none}
.secure ul{list-style:none;display:grid;gap:16px;margin-top:24px}
.secure li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--muted)}
.secure li b{color:var(--ink);font-weight:750}
.secure li .tick{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:var(--tint);color:var(--teal-dp);display:flex;align-items:center;justify-content:center}
.secure li .tick svg{width:15px;height:15px}
.shield-vis{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.shield-vis .ring{width:min(300px,80%);aspect-ratio:1;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle,rgba(23,190,199,.1),transparent 65%)}
.shield-vis .ring::before,.shield-vis .ring::after{content:"";position:absolute;border-radius:50%;border:1px solid var(--line)}
.shield-vis .ring::before{inset:16%}.shield-vis .ring::after{inset:32%}
.shield-vis .core{width:88px;height:88px;border-radius:24px;background:var(--grad-teal);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--sh-teal)}
.shield-vis .core svg{width:44px;height:44px}

/* ---------- CTA band (deep teal) ---------- */
.cta{position:relative;border-radius:32px;padding:62px 40px 66px;text-align:center;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,#0f8a91 0%,#0c5f66 42%,#0e2436 100%);box-shadow:0 60px 110px -50px rgba(12,126,134,.7)}
.cta::before{content:"";position:absolute;inset:0;border-radius:32px;padding:1.5px;pointer-events:none;z-index:3;
  background:linear-gradient(150deg,rgba(150,240,245,.6),rgba(255,255,255,0) 45%,rgba(23,190,199,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cta-glow{position:absolute;z-index:0;pointer-events:none;width:58%;height:80%;border-radius:50%;filter:blur(62px);top:-42%;left:6%;background:radial-gradient(circle,rgba(23,190,199,.5),transparent 66%)}
.cta-glow.g2{top:auto;bottom:-46%;left:auto;right:4%;background:radial-gradient(circle,rgba(120,117,255,.3),transparent 66%)}
.cta>*{position:relative;z-index:1}
.cta-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:22px}
.cta-chips span{font-family:var(--sans);font-size:12px;font-weight:700;color:#dffafc;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:100px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cta h2{color:#fff}
.cta .lead{color:#cfeef0;margin:14px auto 22px;opacity:.95}
.cta .grad,.cta .grad-w{background:linear-gradient(100deg,#fff,#9ff0f4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cta-price{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:30px;font-family:var(--sans);font-size:14px;font-weight:700;color:#bfe9ec;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:10px 20px;border-radius:100px}
.cta-price b{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:#fff;letter-spacing:-.02em}
.cta-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.cta .hero-cta{justify-content:center;position:relative}
.cta-buy{position:relative;overflow:hidden}
.cta-buy::after{content:"";position:absolute;top:0;left:-45%;width:32%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg)}
.cta .btn-ghost,.btn-ghost-d{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff}
.cta .btn-ghost:hover,.btn-ghost-d:hover{background:rgba(255,255,255,.18)}
.cta .eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#eafcfd}
.cta .eyebrow .dot{background:#bff3f5}
@media(prefers-reduced-motion:no-preference){.cta-buy::after{animation:plan-shine 6.5s ease-in-out infinite;animation-delay:.4s}}
.cta .btn-ghost:hover{background:rgba(255,255,255,.24);color:#fff;border-color:#fff}
.cta .btn-primary{background:#fff;color:var(--teal-dp);box-shadow:0 20px 44px -18px rgba(0,0,0,.35)}

/* ---------- Pricing ---------- */
.toggle{display:inline-flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line-2);border-radius:100px;background:var(--surface);box-shadow:var(--sh-sm)}
.toggle button{border:0;background:none;color:var(--muted);font-family:var(--sans);font-weight:750;font-size:14px;padding:9px 20px;border-radius:100px;cursor:pointer;transition:.25s}
.toggle button.on{background:var(--grad-teal);color:#fff}
.toggle .save{font-size:11px;color:var(--teal-dp);font-weight:800}
.toggle button.on .save{color:#eafcfd}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.price{position:relative;border:1px solid var(--line);border-radius:24px;padding:36px 32px;background:var(--surface);box-shadow:var(--sh-sm);transition:transform .35s,box-shadow .35s}
.price:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.price.feat{border-color:var(--teal);box-shadow:var(--sh);background:linear-gradient(170deg,#f2fbfb,#ffffff)}
.price .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-teal);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:6px 15px;border-radius:100px;box-shadow:var(--sh-teal)}
.price .pname{font-family:var(--serif);font-size:1.5rem;margin-bottom:6px}
.price .pdesc{color:var(--muted-2);font-size:14px;margin-bottom:22px;min-height:40px}
.price .amt{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.price .amt .cur{font-size:24px;color:var(--muted);font-weight:800}
.price .amt .num{font-family:var(--serif);font-size:56px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.price .amt .per{color:var(--muted-2);font-size:14px;font-weight:700}
.price .pnote{font-size:12.5px;color:var(--muted-2);margin-bottom:24px}
.price .btn{width:100%;justify-content:center;margin-bottom:26px}
.price ul{list-style:none;display:grid;gap:13px}
.price li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.price li .tick{flex-shrink:0;color:var(--teal);margin-top:2px}
.price li .tick svg{width:16px;height:16px}
.price li.off{opacity:.45}.price li.off .tick{color:var(--muted-2)}

/* ---------- About ---------- */
.about-hero{padding:116px 0 40px;text-align:center}
.about-hero .lead{margin:22px auto 0}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value{position:relative;border-radius:22px;padding:32px 28px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 90% -10%,rgba(23,190,199,.08),transparent 46%),linear-gradient(180deg,#fff,#f7fdfd);
  box-shadow:0 2px 4px rgba(14,36,54,.03),0 28px 52px -34px rgba(12,126,134,.42);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s}
.value>*{position:relative;z-index:1}
.value::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(150deg,rgba(23,190,199,.5),rgba(23,190,199,0) 42%,rgba(14,36,54,.06));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.value:hover{transform:translateY(-8px);box-shadow:0 46px 76px -34px rgba(12,126,134,.55)}
.value .ic{position:relative;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:20px;overflow:hidden;
  background:linear-gradient(150deg,#22c8d0,#0b6f75);box-shadow:0 14px 24px -10px rgba(12,126,134,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.value:nth-child(2) .ic{background:linear-gradient(150deg,#2f5673,#0e2436);box-shadow:0 14px 24px -10px rgba(14,36,54,.5),inset 0 1px 0 rgba(255,255,255,.22)}
.value .ic::after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent)}
.value .ic svg{width:24px;height:24px;position:relative}
.value h3{font-family:var(--sans);font-weight:800;font-size:1.14rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:9px}
.value p{color:var(--muted);font-size:14.5px;line-height:1.55}
.story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.story p{color:var(--muted);margin-bottom:16px}
.story .big{position:relative;font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--ink);line-height:1.28;font-style:italic;font-weight:500;padding-left:26px}
.story .big::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:4px;background:var(--grad-teal)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
.c-info .eyebrow{margin-bottom:22px}
.c-info h1,.c-info h2{margin:0 0 20px;line-height:1.12}
.c-info .lead{margin-bottom:40px;line-height:1.66}
.c-methods{display:grid;gap:14px}
.c-method{display:flex;gap:15px;align-items:center;border:1px solid var(--line);border-radius:15px;padding:18px;background:var(--surface);box-shadow:var(--sh-sm)}
.c-method .ic{width:44px;height:44px;border-radius:12px;background:var(--tint);border:1px solid var(--line-2);color:var(--teal-dp);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-method .ic svg{width:21px;height:21px}
.c-method .l{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2);font-weight:800}
.c-method .v{font-weight:750;font-size:15.5px}
.form{border:1px solid var(--line-2);border-radius:24px;padding:38px;background:var(--surface);box-shadow:var(--sh)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:800;color:var(--ink-2);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;background:#fbfdfd;border:1px solid var(--line-2);border-radius:13px;padding:14px 16px;
  color:var(--ink);font-family:var(--sans);font-size:15px;transition:.2s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(23,190,199,.15);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:12.5px;color:var(--muted-2);text-align:center;margin-top:14px}
.form-ok{display:none;text-align:center;padding:30px 10px}
.form-ok .ic{width:64px;height:64px;border-radius:20px;background:var(--grad-teal);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:var(--sh-teal)}
.form-ok .ic svg{width:32px;height:32px}
.form-ok h3{font-size:1.5rem;margin-bottom:8px}
.form-ok p{color:var(--muted)}

/* ---------- Contact — premium polish ---------- */
.contact-grid{position:relative}
.contact-grid::before{content:"";position:absolute;top:-90px;right:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(23,190,199,.18),transparent 66%);filter:blur(18px);z-index:0;pointer-events:none}
.contact-grid::after{content:"";position:absolute;bottom:-120px;left:-120px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(10,31,68,.06),transparent 68%);filter:blur(18px);z-index:0;pointer-events:none}
.contact-grid > *{position:relative;z-index:1}
.c-method{transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .2s}
.c-method:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--teal) 42%,var(--line));box-shadow:0 16px 34px -18px rgba(10,31,68,.30)}
.c-method .ic{background:var(--grad-teal);border-color:transparent;color:#fff;box-shadow:0 8px 18px -8px rgba(23,190,199,.55)}
.form{position:relative;box-shadow:0 30px 70px -32px rgba(10,31,68,.28)}
.form .btn{box-shadow:0 12px 26px -12px rgba(23,190,199,.6)}

/* ---------- FAQ ---------- */
/* ── premium FAQ (two-column) ── */
.faq-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
.faq-intro{position:sticky;top:100px}
.faq-ask{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;max-width:390px;
  background:linear-gradient(160deg,#fff,#f2fbfb);border:1px solid var(--line);box-shadow:0 20px 40px -30px rgba(12,126,134,.4);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.faq-ask:hover{transform:translateY(-4px);box-shadow:0 32px 52px -30px rgba(12,126,134,.5)}
.faq-ask-ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;color:#fff;background:var(--grad-teal);box-shadow:0 12px 20px -8px rgba(18,163,170,.6)}
.faq-ask-ic svg{width:20px;height:20px}
.faq-ask-tx{flex:1;display:flex;flex-direction:column;line-height:1.3}
.faq-ask-tx b{color:var(--ink);font-size:14.5px}
.faq-ask-tx span{color:var(--muted);font-size:12.5px}
.faq-ask-arw{width:18px;height:18px;color:var(--teal-dp);flex-shrink:0;transition:transform .3s}
.faq-ask:hover .faq-ask-arw{transform:translateX(4px)}
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 14px 30px -26px rgba(14,36,54,.35);transition:box-shadow .3s,border-color .3s}
.faq details[open]{border-color:rgba(23,190,199,.42);box-shadow:0 26px 46px -28px rgba(12,126,134,.45)}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;font-family:var(--sans);font-weight:700;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{color:var(--teal-dp)}
.faq summary .pl{width:28px;height:28px;border-radius:50%;background:rgba(18,163,170,.1);color:var(--teal-dp);display:grid;place-items:center;font-size:18px;line-height:1;flex-shrink:0;transition:transform .4s cubic-bezier(.34,1.5,.5,1),background .3s,color .3s}
.faq details[open] summary .pl{transform:rotate(135deg);background:var(--grad-teal);color:#fff}
.faq details p{padding:0 22px 22px;color:var(--muted);font-size:14.5px;line-height:1.62;margin:0}
.faq details[open] p{animation:faq-open .4s ease}
@keyframes faq-open{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:820px){.faq-wrap{grid-template-columns:1fr;gap:30px}.faq-intro{position:static}.faq-ask{max-width:none}}
.faq p{padding:0 24px 22px;color:var(--muted);font-size:15px}

/* ---------- Footer ---------- */
/* ── luxury footer ── */
.footer{position:relative;overflow:hidden;margin-top:84px;padding:74px 0 30px;color:#c2d0d8;
  background:linear-gradient(180deg,#0e2436,#091624)}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(23,190,199,.75),transparent)}
.foot-glow{position:absolute;top:-36%;left:50%;transform:translateX(-50%);width:72%;height:62%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(23,190,199,.2),transparent 66%);filter:blur(56px)}
.foot-top{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 2fr;gap:54px;padding-bottom:42px}
.foot-brand img{height:46px;width:auto;margin-bottom:22px}
.foot-brand p{color:#8ba3af;font-size:15px;max-width:34ch;line-height:1.62}
.foot-badges{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.foot-badges span{font-size:12px;font-weight:700;color:#bfeef0;background:rgba(23,190,199,.1);border:1px solid rgba(23,190,199,.26);padding:7px 14px;border-radius:100px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.foot-col h4{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#6f8b98;margin-bottom:16px;font-family:var(--sans);font-weight:800}
.foot-col a{display:block;color:#aebdc6;font-size:14.5px;padding:7px 0;transition:color .2s,transform .2s;width:fit-content}
.foot-col a:hover{color:#fff;transform:translateX(4px)}
.foot-word{position:relative;z-index:0;text-align:center;font-family:var(--serif);font-weight:500;line-height:.86;
  font-size:clamp(3.6rem,18vw,15.5rem);letter-spacing:-.04em;margin:4px 0 -1.2vw;user-select:none;pointer-events:none;white-space:nowrap;
  background:linear-gradient(180deg,rgba(23,190,199,.2),rgba(23,190,199,0) 82%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.foot-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);color:#6f8b98;font-size:13.5px;font-weight:600}
.foot-powered{color:#9fb3bd;font-weight:700;text-decoration:none;transition:color .2s}
.foot-powered:hover{color:var(--teal)}
.foot-bottom .socials{display:flex;gap:11px}
.foot-bottom .socials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.12);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#aebdc6;background:rgba(255,255,255,.03);transition:.25s}
.foot-bottom .socials a:hover{color:#fff;border-color:rgba(23,190,199,.5);background:rgba(23,190,199,.14);transform:translateY(-3px)}
.foot-bottom .socials svg{width:18px;height:18px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}[data-d="5"]{transition-delay:.4s}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero-grid,.secure,.story,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:auto;display:block;padding:100px 0 40px}
  .h-xl{font-size:clamp(2.2rem,8vw,44px)}
  .mock{transform:none;margin-top:20px}.mock:hover{transform:none}
  .mock-tag.t2{left:auto;right:16px;bottom:16px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .card.wide,.card.mid,.card.tall,.card.full{grid-column:span 2;grid-row:auto}
  .steps,.prices,.values{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:38px}
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
  .secure,.cta{padding:40px 26px}
}
@media(max-width:560px){
  body{font-size:16px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .trust .stats{gap:28px}
  .form{padding:26px}
  /* Eyebrow pill stays on one line */
  .hero .eyebrow{white-space:nowrap;font-size:10.5px;letter-spacing:.09em;padding:9px 16px}

  /* CTA — tidy the price pill (was wrapping with a dangling dot) */
  .cta{padding:38px 22px 42px;border-radius:26px}
  .cta h2{font-size:clamp(1.7rem,7.5vw,2.1rem);line-height:1.12}
  .cta .lead{margin:12px auto 20px}
  .cta-price{flex-direction:column;gap:4px;padding:13px 22px;border-radius:20px;font-size:13px;margin-bottom:26px}
  .cta-price b{font-size:1.35rem}
  .cta-dot{display:none}
  .cta .hero-cta{flex-direction:column;width:100%}
  .cta .hero-cta .btn{width:100%;justify-content:center}
}

/* ============================================================
   PaidDesk marketing components (v2 — Buy Once. Own Forever.)
   ============================================================ */
.priceline{display:inline-flex;flex-wrap:wrap;gap:6px 20px;align-items:center;margin:10px 0 14px}
.priceline .pl-item{display:flex;align-items:baseline;gap:8px}
.priceline .pl-item b{font-family:var(--serif);font-size:1.3rem;letter-spacing:-.02em;color:var(--ink)}
.priceline .pl-item span{font-size:13px;color:var(--muted);font-weight:600}
.priceline .sep{width:1px;height:26px;background:var(--line-2)}

/* USP grid */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fig{font-family:var(--serif);font-size:2rem;letter-spacing:-.02em;color:var(--teal-dp);margin:0 0 6px}

/* ── Premium USP cards ─────────────────────────────────────── */
.usp-grid{gap:22px}
.usp-card{
  position:relative;border-radius:22px;padding:30px 26px 28px;isolation:isolate;overflow:hidden;
  background:#e9f0fb;                                   /* light blue (odd cards) */
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
}
.usp-card:nth-child(even){background:#e3f4f4;}          /* light teal (even cards) */
.usp-card:hover{transform:translateY(-8px);box-shadow:0 30px 52px -30px rgba(14,36,54,.4);}

/* big faint corner number */
.usp-num{position:absolute;top:16px;right:22px;z-index:0;font-family:var(--sans);font-weight:800;
  font-size:2.9rem;line-height:1;letter-spacing:-.03em;color:#0e2436;opacity:.09;pointer-events:none;}
.usp-card:nth-child(even) .usp-num{color:#0c7e86;opacity:.13;}

/* solid dark chip + white icon (alternates navy / teal like the reference) */
.usp-ic-frame{position:relative;width:58px;height:58px;margin-bottom:20px}
.usp-ic{position:absolute;inset:0;z-index:1;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#264663,#0e2436);
  box-shadow:0 12px 22px -10px rgba(14,36,54,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .5s cubic-bezier(.2,.9,.3,1.3),box-shadow .5s;}
.usp-card:nth-child(even) .usp-ic{background:linear-gradient(150deg,#13a7ae,#0b6f75);
  box-shadow:0 12px 22px -10px rgba(12,126,134,.55),inset 0 1px 0 rgba(255,255,255,.26);}
/* glossy top highlight */
.usp-sheen{position:absolute;top:0;left:0;right:0;height:50%;z-index:2;border-radius:16px 16px 44% 44%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));}
.usp-card:hover .usp-ic{transform:translateY(-3px) scale(1.05)}

/* ── PaidDesk AI console ─────────────────────────────────── */
.aiwin{position:relative;border-radius:22px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);isolation:isolate;
  box-shadow:0 34px 64px -32px rgba(12,126,134,.5),0 2px 8px rgba(14,36,54,.05)}
.aiwin::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(150deg,rgba(23,190,199,.7),rgba(23,190,199,0) 45%,rgba(14,36,54,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.aiwin-glow{position:absolute;inset:-18% -10% 32% -10%;z-index:-1;border-radius:40px;
  background:radial-gradient(56% 60% at 72% 18%,rgba(23,190,199,.3),transparent 70%);filter:blur(22px)}
.aiwin-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid rgba(14,36,54,.07)}
.aiwin-dots{display:flex;gap:5px}
.aiwin-dots i{width:9px;height:9px;border-radius:50%}
.aiwin-dots i:nth-child(1){background:#ff5f57}.aiwin-dots i:nth-child(2){background:#febc2e}.aiwin-dots i:nth-child(3){background:#28c840}
.aiwin-name{display:flex;align-items:center;gap:6px;margin-left:6px;font-family:var(--sans);font-weight:800;font-size:13px;color:var(--ink)}
.aiwin-name .spark{color:var(--teal-dp)}
.aiwin-logo{height:32px;width:auto;display:block}
.aiwin-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#0c7e86;letter-spacing:.02em}
.aiwin-live i{width:7px;height:7px;border-radius:50%;background:#28c840;box-shadow:0 0 0 3px rgba(40,200,64,.16);animation:ai-blink 2s ease-in-out infinite}
@keyframes ai-blink{0%,100%{opacity:1}50%{opacity:.35}}
.aiwin-chat{padding:18px 16px 8px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:9px;max-width:100%}
.msg.user{justify-content:flex-end}
.msg.user .bub{background:var(--grad-teal);color:#fff;border-radius:15px 15px 4px 15px;padding:10px 15px;font-weight:600;font-size:13.5px;box-shadow:0 10px 20px -10px rgba(18,163,170,.6)}
.msg.ai{align-items:flex-start}
.msg.ai .av{flex-shrink:0;width:29px;height:29px;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#264663,#0e2436);box-shadow:0 8px 16px -10px rgba(14,36,54,.6)}
.msg.ai .av svg{width:16px;height:16px}
.aispark .spk-sm{transform-box:fill-box;transform-origin:center;animation:spk-twinkle 2.2s ease-in-out infinite}
@keyframes spk-twinkle{0%,100%{opacity:.45;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.msg.ai .bub{background:#fff;border:1px solid rgba(14,36,54,.07);border-radius:15px 15px 15px 4px;padding:12px 14px;font-size:13px;color:var(--muted);line-height:1.5;box-shadow:0 10px 22px -16px rgba(14,36,54,.4)}
.msg.ai .bub b{color:var(--ink);font-weight:800}
.msg.ai .bub p{margin:0 0 10px}
.rescard{border:1px solid rgba(14,36,54,.08);border-radius:11px;overflow:hidden;margin-bottom:11px;background:#fbfdfd}
.rescard .rrow{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;font-size:12px;gap:8px}
.rescard .rrow+.rrow{border-top:1px solid rgba(14,36,54,.05)}
.rescard .nm{display:flex;align-items:center;gap:7px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rescard .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rescard .d1{background:#f0616d}.rescard .d2{background:#f0a04b}.rescard .d3{background:#28c840}
.rescard .amt{font-weight:800;color:var(--ink);font-size:11.5px;white-space:nowrap;flex-shrink:0}
.rescard .amt.over{color:#d0455b}.rescard .amt.due{color:#c07a2a}
/* Mobile: keep the AI assistant mock's chat + breakdown inside the window
   (placed AFTER the .aiwin rules so these overrides win the cascade) */
@media(max-width:560px){
  .aiwin-glow{left:0;right:0}
  .aiwin-chat{padding:16px 12px 6px;gap:12px}
  .aiwin-chat .msg{min-width:0}
  .aiwin-chat .msg .bub{min-width:0;max-width:100%}
  .aiwin-chat .msg.ai .bub{padding:11px 12px}
  .rescard .rrow{padding:8px 10px;gap:6px}
  .rescard .nm{min-width:0}
  .rescard .amt{font-size:11px}
  .aiwin-input{margin-left:12px;margin-right:12px}
  .aiwin-sugs{padding-left:12px;padding-right:12px}
  .ityped{font-size:12.5px}
}
.resact{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(145deg,#eaf7f8,#fff);border:1px solid rgba(18,163,170,.3);color:var(--teal-dp);font-family:var(--sans);font-weight:700;font-size:12px;padding:8px 13px;border-radius:10px;cursor:pointer;transition:.25s}
.resact:hover{background:var(--grad-teal);color:#fff;border-color:transparent;box-shadow:0 10px 20px -10px rgba(18,163,170,.6)}
.resact .spark{font-size:11px}
.aiwin-input{display:flex;align-items:center;gap:9px;margin:8px 14px 12px;padding:11px 13px;border-radius:13px;background:#fff;border:1px solid rgba(14,36,54,.1);box-shadow:inset 0 1px 2px rgba(14,36,54,.03);overflow:hidden}
.aiwin-input .isp{color:var(--teal-dp);display:grid;place-items:center;flex-shrink:0}.aiwin-input .isp svg{width:16px;height:16px}
.ityped{flex:1;min-width:0;font-size:13.5px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden}
.icaret{width:2px;height:16px;background:var(--teal);flex-shrink:0;animation:ai-caret 1.05s steps(1) infinite}
@keyframes ai-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.isend{margin-left:auto;flex-shrink:0;width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--grad-teal);box-shadow:0 10px 18px -8px rgba(18,163,170,.7)}
.isend svg{width:15px;height:15px}
.aiwin-sugs{display:flex;flex-wrap:wrap;gap:7px;padding:0 15px 16px}
.aiwin-sugs span{font-size:11.5px;font-weight:700;color:var(--teal-dp);background:rgba(18,163,170,.09);border:1px solid rgba(18,163,170,.16);padding:5px 11px;border-radius:100px;cursor:default;transition:.2s}
.aiwin-sugs span:hover{background:rgba(18,163,170,.16);transform:translateY(-1px)}

.usp-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:40px}
@media(max-width:520px){.usp-cta{flex-direction:column}.usp-cta .btn{width:100%;justify-content:center}}

/* ═══════════ FEATURE AREA — editorial ═══════════ */
/* 3 benefit pillars */
/* pillars share the exact USP-card language: tinted bg + solid dark chip + white icon */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pillar{position:relative;border-radius:22px;padding:30px 26px 26px;overflow:hidden;background:#e9f0fb;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.pillar:nth-child(even){background:#e3f4f4}
.pillar:hover{transform:translateY(-8px);box-shadow:0 30px 52px -30px rgba(14,36,54,.4)}
.pill-ic{position:relative;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:18px;
  background:linear-gradient(150deg,#264663,#0e2436);
  box-shadow:0 12px 22px -10px rgba(14,36,54,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.pillar:nth-child(even) .pill-ic{background:linear-gradient(150deg,#13a7ae,#0b6f75);box-shadow:0 12px 22px -10px rgba(12,126,134,.55),inset 0 1px 0 rgba(255,255,255,.26)}
.pill-ic::after{content:"";position:absolute;top:0;left:0;right:0;height:50%;border-radius:16px 16px 44% 44%;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);pointer-events:none}
.pill-ic svg{width:27px;height:27px}
.pillar .pk{display:block;font-family:var(--sans);font-weight:800;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pillar h3{font-family:var(--sans);font-size:1.14rem;margin:4px 0 9px;color:var(--ink);font-weight:800;letter-spacing:-.01em;line-height:1.25}
.pillar p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 16px}
.pillar ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.pillar li{font-size:12px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);padding:5px 11px;border-radius:100px}

/* editorial alternating feature block */
.efeat{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center}
.efeat.rev>.efeat-copy{order:2}
.efeat-copy h2{margin:16px 0 12px}
.efeat-copy .lead{margin-bottom:20px}
.efeat-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 24px;padding:0}
.efeat-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink);font-weight:500;line-height:1.45}
.efeat-list .tk{flex-shrink:0;width:21px;height:21px;border-radius:6px;display:grid;place-items:center;margin-top:1px;background:rgba(18,163,170,.12);color:var(--teal-dp)}
.efeat-list .tk svg{width:12px;height:12px}
@media(max-width:960px){.efeat{grid-template-columns:1fr;gap:28px}.efeat.rev>.efeat-copy{order:0}}

/* Automatic payment chasing — premium animated "live chase" panel */
.chase-panel{position:relative;isolation:isolate;border-radius:24px;padding:20px 22px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,250,250,.72));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 44px 84px -44px rgba(12,126,134,.55),0 2px 6px rgba(14,36,54,.05)}
.chase-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(23,190,199,.6),transparent 42%,rgba(14,36,54,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.chase-panel::after{content:"";position:absolute;z-index:-1;top:-14%;right:-12%;width:62%;height:62%;pointer-events:none;
  background:radial-gradient(circle,rgba(23,190,199,.3),transparent 70%);filter:blur(32px)}
.chase-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 18px}
.chase-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:800;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-dp)}
.chase-live i{width:8px;height:8px;border-radius:50%;background:#37c98a}
.chase-amt{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:1.05rem}
@keyframes chase-live{0%{box-shadow:0 0 0 0 rgba(55,201,138,.55)}70%{box-shadow:0 0 0 7px rgba(55,201,138,0)}100%{box-shadow:0 0 0 0 rgba(55,201,138,0)}}

.chase-flow{position:relative;display:flex;flex-direction:column}
.cstep{display:flex;gap:15px;align-items:flex-start;position:relative;padding-bottom:15px}
.cstep:last-child{padding-bottom:0}
.cstep::before{content:"";position:absolute;left:18px;top:40px;bottom:-1px;width:2px;border-radius:2px;background:linear-gradient(rgba(18,163,170,.42),rgba(18,163,170,.12))}
.cstep:last-child::before{display:none}
.cnode{position:relative;z-index:1;flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;
  box-shadow:0 12px 20px -10px rgba(14,36,54,.4),0 0 0 4px rgba(255,255,255,.7)}
.cnode svg{width:18px;height:18px;position:relative}
.cnode::before{content:"";position:absolute;top:0;left:0;right:0;height:52%;border-radius:12px 12px 42% 42%;background:linear-gradient(180deg,rgba(255,255,255,.32),transparent);pointer-events:none}
.cnode::after{content:"";position:absolute;inset:-3px;border-radius:15px;border:2px solid rgba(255,255,255,.75);opacity:0;pointer-events:none}
.cn-due{background:linear-gradient(145deg,#2f5673,#0e2436)}
.cn-rem{background:var(--grad-teal)}
.cn-over{background:linear-gradient(145deg,#f4ad57,#e08a2e)}
.cn-fu{background:linear-gradient(145deg,#ef7a86,#e0455b)}
.cn-paid{background:linear-gradient(145deg,#37c98a,#1f9e66)}
.cbody{flex:1;min-width:0;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.9);border-radius:13px;padding:12px 15px;
  box-shadow:0 18px 36px -26px rgba(14,36,54,.42);display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.cstep:hover .cbody{transform:translateX(5px);box-shadow:0 26px 46px -24px rgba(14,36,54,.5)}
.cbody .ctxt{min-width:0}
.cbody .ctxt .ct{font-weight:800;color:var(--ink);font-size:14px}
.cbody .ctxt .cs{font-size:12.5px;color:var(--muted);margin-top:2px}
.cpill{font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:100px;white-space:nowrap;flex-shrink:0}
.cpill.auto{color:var(--teal-dp);background:rgba(18,163,170,.14)}
.cpill.warn{color:#c07a2a;background:rgba(240,160,75,.18)}
.cpill.done{color:#1f9e66;background:rgba(55,201,138,.18)}
@media(prefers-reduced-motion:no-preference){
  .chase-live i{animation:chase-live 2s ease-out infinite}
  .cstep .cnode::after{animation:node-ping 6.4s ease-out infinite}
  .cstep:nth-child(2) .cnode::after{animation-delay:.85s}
  .cstep:nth-child(3) .cnode::after{animation-delay:1.7s}
  .cstep:nth-child(4) .cnode::after{animation-delay:2.55s}
  .cstep:nth-child(5) .cnode::after{animation-delay:3.4s}
  .cstep:last-child .cnode{animation:paid-glow 6.4s ease-out infinite;animation-delay:3.4s}
  /* each step lights up in turn as the chase reaches it */
  .chase-flow .cstep .cbody{animation:step-active 6.4s ease-in-out infinite}
  .chase-flow .cstep:nth-child(2) .cbody{animation-delay:.85s}
  .chase-flow .cstep:nth-child(3) .cbody{animation-delay:1.7s}
  .chase-flow .cstep:nth-child(4) .cbody{animation-delay:2.55s}
  .chase-flow .cstep:nth-child(5) .cbody{animation-delay:3.4s}
  .chase-flow .cstep .cnode{animation:node-lift 6.4s ease-in-out infinite}
  .chase-flow .cstep:nth-child(2) .cnode{animation-delay:.85s}
  .chase-flow .cstep:nth-child(3) .cnode{animation-delay:1.7s}
  .chase-flow .cstep:nth-child(4) .cnode{animation-delay:2.55s}
  .chase-flow .cstep:nth-child(5) .cnode{animation:node-lift 6.4s ease-in-out infinite,paid-glow 6.4s ease-out infinite;animation-delay:3.4s}
  /* semantic icon micro-motions, fired when each step becomes active */
  .tl-bell{transform-box:fill-box;transform-origin:top center;animation:tl-bell 6.4s ease infinite;animation-delay:.85s}
  .tl-clock{transform-box:view-box;transform-origin:12px 12px;animation:tl-clock 6.4s cubic-bezier(.5,0,.2,1) infinite;animation-delay:1.7s}
  .tl-plane{transform-box:fill-box;transform-origin:center;animation:tl-plane 6.4s ease infinite;animation-delay:2.55s}
  .tl-check{stroke-dasharray:100;animation:tl-check 6.4s ease infinite;animation-delay:3.4s}
}
@keyframes tl-bell{0%,2%{transform:rotate(0)}5%{transform:rotate(-17deg)}9%{transform:rotate(13deg)}13%{transform:rotate(-8deg)}17%{transform:rotate(4deg)}21%,100%{transform:rotate(0)}}
@keyframes tl-clock{0%,2%{transform:rotate(0)}13%{transform:rotate(40deg)}24%,100%{transform:rotate(0)}}
@keyframes tl-plane{0%,2%{transform:translate(0,0)}8%{transform:translate(3.5px,-3.5px)}18%,100%{transform:translate(0,0)}}
@keyframes tl-check{0%,3%{stroke-dashoffset:100}11%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes node-ping{0%{opacity:.75;transform:scale(.82)}14%{opacity:0;transform:scale(1.4)}100%{opacity:0}}
@keyframes node-lift{0%,2%{transform:scale(1)}6%{transform:scale(1.12)}16%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes step-active{0%,2%{transform:translateX(0);box-shadow:0 18px 36px -26px rgba(14,36,54,.42);border-color:rgba(255,255,255,.9)}
  6%{transform:translateX(7px);box-shadow:0 22px 42px -22px rgba(18,163,170,.55);border-color:rgba(23,190,199,.6)}
  14%{transform:translateX(4px);border-color:rgba(23,190,199,.4)}
  22%{transform:translateX(0);box-shadow:0 18px 36px -26px rgba(14,36,54,.42);border-color:rgba(255,255,255,.9)}
  100%{transform:translateX(0)}}
@keyframes paid-glow{0%{box-shadow:0 12px 20px -10px rgba(14,36,54,.4),0 0 0 4px rgba(255,255,255,.7)}7%{box-shadow:0 14px 26px -8px rgba(55,201,138,.75),0 0 0 4px rgba(255,255,255,.7),0 0 0 11px rgba(55,201,138,.28)}18%,100%{box-shadow:0 12px 20px -10px rgba(14,36,54,.4),0 0 0 4px rgba(255,255,255,.7)}}

/* Recurring invoices visual */
.recur-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 30px 60px -34px rgba(12,126,134,.45)}
.recur-head{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.recur-badge{display:inline-flex;align-items:center;gap:7px;background:var(--grad-teal);color:#fff;font-weight:800;font-size:12px;padding:7px 13px;border-radius:100px;box-shadow:0 10px 20px -10px rgba(18,163,170,.6)}
.recur-badge svg{width:14px;height:14px}
.recur-cyc{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
.recur-row{display:flex;align-items:center;gap:12px;padding:11px 0}
.recur-row+.recur-row{border-top:1px solid #f2f7f7}
.recur-av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;flex-shrink:0}
.recur-nm{flex:1;min-width:0}
.recur-nm b{display:block;font-size:13.5px;color:var(--ink);font-weight:700}
.recur-nm span{font-size:11.5px;color:var(--muted)}
.recur-amt{font-weight:800;color:var(--ink);font-size:13.5px;white-space:nowrap}
.recur-next{font-size:11px;font-weight:700;color:var(--teal-dp);background:rgba(18,163,170,.1);padding:4px 9px;border-radius:100px;white-space:nowrap}

/* premium bento for remaining features */
.fbento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:46px}
.fcell{position:relative;border-radius:22px;padding:28px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 92% -10%,rgba(23,190,199,.08),transparent 46%),linear-gradient(180deg,#fff,#f7fdfd);
  box-shadow:0 2px 4px rgba(14,36,54,.03),0 28px 52px -34px rgba(12,126,134,.42);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s}
.fcell>*{position:relative;z-index:1}
.fcell::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(150deg,rgba(23,190,199,.55),rgba(23,190,199,0) 42%,rgba(14,36,54,.07));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fcell::after{content:"";position:absolute;top:-32%;right:-22%;width:66%;height:78%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(23,190,199,.28),transparent 70%);filter:blur(28px);opacity:0;transition:opacity .55s}
.fcell:hover{transform:translateY(-9px);box-shadow:0 4px 8px rgba(14,36,54,.05),0 48px 78px -34px rgba(12,126,134,.55)}
.fcell:hover::after{opacity:1}
.fcell.c-wide{grid-column:span 4}.fcell.c-mid{grid-column:span 3}.fcell.c-third{grid-column:span 2}
.fcell .fk{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.fcell .fki{position:relative;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;overflow:hidden;
  background:linear-gradient(145deg,#22c8d0,#0b6f75);box-shadow:0 10px 18px -8px rgba(12,126,134,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.fcell:nth-child(even) .fki{background:linear-gradient(145deg,#2f5673,#0e2436);box-shadow:0 10px 18px -8px rgba(14,36,54,.5),inset 0 1px 0 rgba(255,255,255,.22)}
.fcell .fki::after{content:"";position:absolute;top:0;left:0;right:0;height:52%;background:linear-gradient(180deg,rgba(255,255,255,.32),transparent)}
.fcell .fki svg{width:15px;height:15px;position:relative}
.fcell h3{font-size:1.2rem;margin:0 0 8px;color:var(--ink);font-weight:800;letter-spacing:-.012em}
.fcell>p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0}
@media(max-width:900px){.fbento{grid-template-columns:1fr 1fr}.fcell.c-wide,.fcell.c-mid,.fcell.c-third{grid-column:span 1}}
@media(max-width:560px){.pillars{grid-template-columns:1fr}.fbento{grid-template-columns:1fr}}

/* mini mockups inside cells */
.mini-inv{margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#fff,#fbfdfd);box-shadow:0 16px 32px -26px rgba(14,36,54,.4)}
.mini-inv .mi-top{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);background:#fff}
.mini-inv .mi-top b{font-size:13px;color:var(--ink)}
.mini-inv .mi-row{display:flex;justify-content:space-between;padding:8px 14px;font-size:12px;color:var(--muted)}
.mini-inv .mi-row span:last-child{color:var(--ink);font-weight:700}
.mini-inv .mi-tot{display:flex;justify-content:space-between;padding:11px 14px;border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(18,163,170,.08),transparent);font-weight:800;color:var(--ink);font-size:13.5px}
.mini-inv .mi-tot span:last-child{color:var(--teal-dp)}
.flow-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.flow-chips .fc{font-size:12px;font-weight:800;padding:7px 13px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 6px 14px -12px rgba(14,36,54,.4)}
.flow-chips .fc.on{background:var(--grad-teal);color:#fff;border-color:transparent;box-shadow:0 12px 22px -10px rgba(18,163,170,.6)}
.flow-chips .far{color:var(--teal-dp);font-weight:800;font-size:13px}
.paylogos{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.paylogos span{font-size:12px;font-weight:800;color:var(--ink);background:#fff;border:1px solid var(--line);padding:8px 13px;border-radius:10px;box-shadow:0 8px 18px -14px rgba(14,36,54,.3)}
.stat-mini{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.stat-mini .sm{position:relative;flex:1;min-width:92px;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:linear-gradient(180deg,#fff,#fbfdfd);box-shadow:0 12px 24px -22px rgba(14,36,54,.4)}
.stat-mini .sm .l{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.stat-mini .sm .v{font-size:17px;font-weight:800;color:var(--ink);margin-top:4px}
.stat-mini .sm .v.tl{background:var(--grad-teal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* customer avatars */
.crm-faces{display:flex;align-items:center;margin-top:20px}
.crm-faces .cf{width:36px;height:36px;border-radius:50%;border:2.5px solid #fff;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;margin-left:-10px;box-shadow:0 8px 16px -8px rgba(14,36,54,.45)}
.crm-faces .cf:first-child{margin-left:0}
.crm-faces .more{margin-left:12px;font-size:12.5px;font-weight:700;color:var(--muted)}
/* portal mini window */
.portal-mini{margin-top:18px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 16px 32px -26px rgba(14,36,54,.4)}
.portal-mini .pm-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;border-bottom:1px solid var(--line);background:#fbfdfd}
.portal-mini .pm-bar i{width:6px;height:6px;border-radius:50%;background:#d4e2e6}
.portal-mini .pm-bar span{margin-left:auto;font-size:10px;font-weight:700;color:#9fb6bc}
.portal-mini .pm-row{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;font-size:12px;color:var(--muted)}
.portal-mini .pm-row+.pm-row{border-top:1px solid #f3f7f8}
.portal-mini .pm-row .pay{font-size:10px;font-weight:800;color:#fff;background:var(--grad-teal);padding:4px 10px;border-radius:100px}
/* quotes → paid vertical pipeline */
.qflow{margin-top:18px;display:flex;flex-direction:column}
.qstep{position:relative;display:flex;align-items:center;gap:12px;padding:7px 0}
.qstep::before{content:"";position:absolute;left:11px;top:30px;bottom:-4px;width:2px;border-radius:2px;background:linear-gradient(rgba(18,163,170,.5),rgba(18,163,170,.15))}
.qstep:last-child::before{display:none}
.qmark{position:relative;z-index:1;flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--grad-teal);box-shadow:0 8px 16px -8px rgba(18,163,170,.6),0 0 0 3px rgba(255,255,255,.8)}
.qmark svg{width:12px;height:12px}
.qstep.paid .qmark{background:linear-gradient(145deg,#37c98a,#1f9e66);box-shadow:0 8px 16px -8px rgba(55,201,138,.6),0 0 0 3px rgba(255,255,255,.8)}
.qstep .ql{font-size:13.5px;font-weight:700;color:var(--ink)}
.qstep.paid .ql{color:#1f9e66;font-weight:800}
.qtag{margin-left:auto;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(145deg,#37c98a,#1f9e66);padding:4px 11px;border-radius:100px;box-shadow:0 8px 16px -8px rgba(55,201,138,.6)}

/* Stripe payment orbit hub */
.pay-orbit{position:relative;width:min(330px,100%);aspect-ratio:1;margin:0 auto;display:grid;place-items:center;isolation:isolate}
.po-ring{position:absolute;inset:0;margin:auto;border-radius:50%;pointer-events:none}
.po-ring.o1{width:50%;height:50%;border:1.5px solid rgba(18,163,170,.22)}
.po-ring.o2{width:80%;height:80%;border:1.5px dashed rgba(18,163,170,.16)}
.po-pulse{position:absolute;inset:0;margin:auto;width:34%;height:34%;border-radius:50%;border:2px solid rgba(18,163,170,.4);opacity:0}
.po-core{position:relative;z-index:3;width:84px;height:84px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#fff;text-align:center;
  background:linear-gradient(150deg,#22c8d0,#0b6f75);box-shadow:0 28px 50px -16px rgba(12,126,134,.7),inset 0 2px 0 rgba(255,255,255,.4)}
.po-core::after{content:"";position:absolute;top:0;left:0;right:0;height:50%;border-radius:24px 24px 46% 46%;background:linear-gradient(180deg,rgba(255,255,255,.36),transparent)}
.po-core .po-stripe{width:21px;height:21px;position:relative}
.po-core-lbl{position:relative;font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.03em;opacity:.9;line-height:1}
.po-badge{position:absolute;z-index:2;display:inline-flex;align-items:center;white-space:nowrap;
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #fff;padding:11px 19px;border-radius:100px;
  box-shadow:0 20px 38px -14px rgba(14,36,54,.45)}
.po-badge svg{height:21px;width:auto;display:block}
.po-badge .pl-mc{height:26px}
.po-badge .pl-apple{height:22px}
.po-badge .pl-g{height:22px}
.po-badge .pay-txt{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.02em;margin-left:5px}
.po-badge .pay-txt.gpay{color:#5f6368}
.po-badge .pay-txt.apay{color:#000;font-weight:500}
/* seated on the outer orbit ring at the four poles */
.po-badge.b-top{top:10%;left:50%;transform:translate(-50%,-50%)}
.po-badge.b-bottom{top:90%;left:50%;transform:translate(-50%,-50%)}
.po-badge.b-left{top:50%;left:10%;transform:translate(-50%,-50%)}
.po-badge.b-right{top:50%;left:90%;transform:translate(-50%,-50%)}

/* payment provider integration cards (Stripe + SumUp) */
.pay-conn{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.pconn{display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;border-radius:20px;padding:22px 24px;
  background:linear-gradient(180deg,#fff,#f7fdfd);border:1px solid var(--line);
  box-shadow:0 22px 46px -34px rgba(12,126,134,.4);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.pconn:hover{transform:translateY(-6px);box-shadow:0 34px 60px -34px rgba(12,126,134,.5)}
.pconn-mark{position:relative;overflow:hidden;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;flex-shrink:0;color:#fff;
  box-shadow:0 12px 22px -10px rgba(14,36,54,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.pconn-mark::after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent)}
.pconn-mark.stripe{background:linear-gradient(150deg,#7a75ff,#635bff)}
.pconn-mark.sumup{background:linear-gradient(150deg,#1e2c6b,#0d1743)}
.pconn-mark svg{width:26px;height:26px;position:relative}
.pconn-tx{flex:1;min-width:150px}
.pconn-tx h3{font-family:var(--sans);font-weight:800;font-size:1.12rem;color:var(--ink);margin-bottom:3px;letter-spacing:-.01em}
.pconn-tx p{color:var(--muted);font-size:13.5px;line-height:1.5;margin:0}
.pconn-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:800;font-size:13px;color:var(--teal-dp);
  background:rgba(18,163,170,.1);border:1px solid rgba(18,163,170,.22);padding:9px 15px;border-radius:100px;white-space:nowrap;transition:.25s}
.pconn:hover .pconn-btn{background:var(--grad-teal);color:#fff;border-color:transparent;box-shadow:0 10px 20px -10px rgba(18,163,170,.6)}
.pconn-btn svg{width:14px;height:14px}
@media(max-width:620px){.pay-conn{grid-template-columns:1fr}}

/* ═══════════ SEO content pages ═══════════ */
.crumb{margin-top:82px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.55)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:13px 0;margin:0;font-size:13px}
.crumb li{display:flex;align-items:center;gap:9px}
.crumb li:not(:last-child)::after{content:"›";color:var(--muted-2)}
.crumb a{color:var(--muted);font-weight:600}
.crumb a:hover{color:var(--teal-dp)}
.crumb span{color:var(--ink);font-weight:700}
.seo-hero{padding-top:118px}
.quick-answer{max-width:820px;position:relative;border-radius:18px;padding:22px 26px;background:linear-gradient(150deg,rgba(18,163,170,.09),rgba(18,163,170,.02));border:1px solid rgba(18,163,170,.25);box-shadow:0 20px 40px -32px rgba(12,126,134,.4)}
.qa-tag{display:inline-block;font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-dp);margin-bottom:8px}
.quick-answer p{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}
.seo-body{max-width:820px}
.seo-body .seo-h2{font-family:var(--serif);font-weight:560;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);margin:40px 0 14px;letter-spacing:-.01em}
.seo-body .seo-h3{font-family:var(--sans);font-weight:800;font-size:1.15rem;color:var(--ink);margin:26px 0 10px}
.seo-body p{color:var(--muted);font-size:16px;line-height:1.72;margin:0 0 16px}
.seo-body ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:11px}
.seo-body ul li{position:relative;padding-left:31px;color:var(--ink);font-size:15.5px;line-height:1.55}
.seo-body ul li::before{content:"✓";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:rgba(18,163,170,.13);color:var(--teal-dp);font-size:12px;font-weight:900;display:grid;place-items:center;line-height:1}
.seo-body a{color:var(--teal-dp);font-weight:700;border-bottom:1px solid rgba(18,163,170,.3)}
.seo-body a:hover{border-color:var(--teal)}
.seo-body strong{color:var(--ink);font-weight:700}
.seo-related{margin-top:46px}
.seo-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seo-rel-card{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 32px -28px rgba(14,36,54,.4);transition:transform .3s,box-shadow .3s,border-color .3s}
.seo-rel-card b{flex:1;font-size:14.5px;color:var(--ink);border:0}
.seo-rel-card span{color:var(--muted);font-size:12.5px;display:block;font-weight:500}
.seo-rel-card svg{width:17px;height:17px;color:var(--teal-dp);flex-shrink:0}
.seo-rel-card:hover{transform:translateY(-3px);border-color:rgba(18,163,170,.4);box-shadow:0 24px 42px -26px rgba(12,126,134,.5)}
.seo-faq{margin-top:46px}
/* hub grid */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.hub-card{position:relative;display:block;border-radius:20px;padding:26px;background:radial-gradient(120% 90% at 90% -10%,rgba(23,190,199,.08),transparent 46%),linear-gradient(180deg,#fff,#f7fdfd);border:1px solid var(--line);box-shadow:0 22px 46px -34px rgba(12,126,134,.4);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.hub-card:hover{transform:translateY(-7px);box-shadow:0 40px 66px -34px rgba(12,126,134,.5)}
.hub-card .hk{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:#fff;background:linear-gradient(150deg,#22c8d0,#0b6f75);box-shadow:0 12px 22px -10px rgba(12,126,134,.6);margin-bottom:14px}
.hub-card:nth-child(even) .hk{background:linear-gradient(150deg,#2f5673,#0e2436)}
.hub-card .hk svg{width:22px;height:22px}
.hub-card h3{font-size:1.12rem;color:var(--ink);font-weight:800;margin-bottom:6px}
.hub-card p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0}
@media(max-width:900px){.hub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.seo-related-grid,.hub-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){
  .po-core{animation:po-float 5s ease-in-out infinite}
  .po-ring.o2{transform-origin:center;animation:po-spin 28s linear infinite}
  .po-pulse{animation:po-pulse 3.6s ease-out infinite}
  .po-pulse.p2{animation-delay:1.2s}.po-pulse.p3{animation-delay:2.4s}
  .qstep .qmark{animation:q-pop 4.6s ease infinite}
  .qstep:nth-child(2) .qmark{animation-delay:.42s}
  .qstep:nth-child(3) .qmark{animation-delay:.84s}
  .qstep:nth-child(4) .qmark{animation-delay:1.26s}
}
@keyframes po-pulse{0%{transform:scale(.75);opacity:.55}100%{transform:scale(2.9);opacity:0}}
@keyframes po-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes po-spin{to{transform:rotate(360deg)}}
@keyframes q-pop{0%,3%{transform:scale(1)}8%{transform:scale(1.28)}20%,100%{transform:scale(1)}}

/* ═══ bespoke animated fintech icons — the .lux system ═══
   resting state = fully-formed (below). motion lives in the media query,
   so reduced-motion users see the finished icon, still. */
.lux{width:34px;height:34px;overflow:visible;color:#fff}
/* 01 One-Time Licence */
.lux .l1card,.lux .l1ln,.lux .l1ring{stroke:#fff;fill:none}
.lux .l1card{stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:100}
.lux .l1ln{stroke-width:2.2;stroke-linecap:round}
.lux .l1ring{stroke-width:2.4;fill:#0e2436}
.lux .l1chk{stroke:#e2fbfd;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:100;filter:drop-shadow(0 0 2px rgba(226,251,253,.9))}
.lux .l1sweep{fill:url(#l1g);opacity:0}
/* 02 Annual Renewal — calendar + renewal arc + arrow tip + year flash */
.lux .r2track{stroke:#fff;stroke-opacity:.2;stroke-width:2.2;fill:none}
.lux .r2seg{stroke:#e2fbfd;stroke-width:2.6;stroke-linecap:round;fill:none;stroke-dasharray:100;filter:drop-shadow(0 0 2.5px rgba(226,251,253,.85))}
.lux .r2head{fill:#e2fbfd;offset-path:path("M24 6A18 18 0 1 1 23.99 6");offset-rotate:auto;filter:drop-shadow(0 0 2px rgba(226,251,253,.9))}
.lux .r2cal *{stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.lux .r2flash{fill:#e2fbfd;opacity:0}
/* 03 No Monthly Subscription — calendar; monthly billing dots recur, then clear to one check */
.lux .n3cal{stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.lux .n3d{fill:#fff;opacity:0}
.lux .n3chk{stroke:#e2fbfd;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:100;filter:drop-shadow(0 0 2px rgba(226,251,253,.9))}
/* 04 Your Own Stripe — card → money flows into your bank → ownership check */
.lux .n4card *,.lux .n4bank path{stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.lux .n4path{stroke:#fff;stroke-opacity:.4;stroke-width:2;fill:none;stroke-dasharray:100}
.lux .n4coin{fill:#e2fbfd;opacity:0;offset-path:path("M19 22.5C23 22.5 24 24 27 24");filter:drop-shadow(0 0 3px rgba(226,251,253,.95))}
.lux .n4chk{stroke:#e2fbfd;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:100;filter:drop-shadow(0 0 2px rgba(226,251,253,.9))}

@media(prefers-reduced-motion:no-preference){
  .lux1 .lux1w,.lux2 .r2w,.lux3 .n3w,.lux4 .n4w{animation:lux-wrap 5.2s ease-in-out infinite}
  .lux1 .lux1w{animation-duration:5.4s}.lux4 .n4w{animation-duration:4.8s}
  /* 01 */
  .lux1 .l1card{animation:l1card 5.4s cubic-bezier(.65,0,.25,1) infinite}
  .lux1 .l1ln{opacity:0;animation:l1ln 5.4s ease infinite}
  .lux1 .l1ln.b{animation-delay:.1s}
  .lux1 .l1sweep{animation:l1sweep 5.4s ease-in-out infinite}
  .lux1 .l1seal{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:l1seal 5.4s cubic-bezier(.3,1.5,.4,1) infinite}
  .lux1 .l1chk{stroke-dashoffset:100;animation:l1chk 5.4s ease infinite}
  /* 02 */
  .lux2 .r2seg{stroke-dashoffset:100;animation:r2seg 5.2s cubic-bezier(.45,.05,.25,1) infinite}
  .lux2 .r2head{animation:r2head 5.2s cubic-bezier(.45,.05,.25,1) infinite}
  .lux2 .r2flash{animation:r2flash 5.2s ease infinite}
  .lux2 .r2cal{transform-box:fill-box;transform-origin:center;animation:r2cal 5.2s ease-in-out infinite}
  /* 03 */
  .lux3 .n3d{animation:n3d 5.2s ease infinite}
  .lux3 .nd2{animation-delay:.14s}.lux3 .nd3{animation-delay:.28s}.lux3 .nd4{animation-delay:.42s}.lux3 .nd5{animation-delay:.56s}
  .lux3 .n3chk{stroke-dashoffset:100;animation:n3chk 5.2s ease infinite}
  /* 04 */
  .lux4 .n4card,.lux4 .n4bank{transform-box:fill-box;transform-origin:center;animation:n4node 4.8s ease infinite}
  .lux4 .n4bank{animation-delay:.1s}
  .lux4 .n4path{stroke-dashoffset:100;animation:n4path 4.8s ease infinite}
  .lux4 .n4coin{animation:n4coin 4.8s cubic-bezier(.45,0,.55,1) infinite}
  .lux4 .n4chk{stroke-dashoffset:100;animation:n4chk 4.8s ease infinite}
}
@keyframes lux-wrap{0%{opacity:0}5%{opacity:1}93%{opacity:1}99%{opacity:0}100%{opacity:0}}
@keyframes l1card{0%{stroke-dashoffset:100}18%,100%{stroke-dashoffset:0}}
@keyframes l1ln{0%,12%{opacity:0}24%,100%{opacity:1}}
@keyframes l1sweep{0%,26%{opacity:0;transform:translateX(0)}31%{opacity:.9}45%{transform:translateX(30px)}51%,100%{opacity:0;transform:translateX(30px)}}
@keyframes l1seal{0%,30%{transform:scale(0)}47%{transform:scale(1.12)}57%,100%{transform:scale(1)}}
@keyframes l1chk{0%,48%{stroke-dashoffset:100}64%,100%{stroke-dashoffset:0}}
@keyframes r2seg{0%{stroke-dashoffset:100}82%,100%{stroke-dashoffset:0}}
@keyframes r2head{0%{offset-distance:0%}82%,100%{offset-distance:100%}}
@keyframes r2flash{0%,80%{opacity:0}88%{opacity:.5}100%{opacity:0}}
@keyframes r2cal{0%,82%{transform:scale(1)}89%{transform:scale(1.08)}96%,100%{transform:scale(1)}}
@keyframes n3d{0%{opacity:0}12%{opacity:1}48%{opacity:1}58%,100%{opacity:0}}
@keyframes n3chk{0%,58%{stroke-dashoffset:100}76%,100%{stroke-dashoffset:0}}
@keyframes n4node{0%{transform:scale(0);opacity:0}18%{transform:scale(1.06)}26%,100%{transform:scale(1);opacity:1}}
@keyframes n4path{0%,26%{stroke-dashoffset:100}44%,100%{stroke-dashoffset:0}}
@keyframes n4coin{0%,44%{offset-distance:0%;opacity:0}48%{opacity:1}72%{offset-distance:100%;opacity:1}78%,100%{offset-distance:100%;opacity:0}}
@keyframes n4chk{0%,74%{stroke-dashoffset:100}88%,100%{stroke-dashoffset:0}}

/* ── pillar icons (same .lux system) ── */
/* Save Time — clock, hands sweeping */
.lux .p1face{stroke:#fff;stroke-width:2.2;stroke-linecap:round;fill:none}
.lux .p1min,.lux .p1hr{stroke:#e2fbfd;stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 2px rgba(226,251,253,.8))}
.lux .p1hub{fill:#e2fbfd}
/* Get Paid Faster — lightning strike */
.lux .p2bolt{stroke:#e2fbfd;fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:100;filter:drop-shadow(0 0 3px rgba(226,251,253,.85))}
/* Stay In Control — sliders adjusting */
.lux .p3trk{stroke:#fff;stroke-opacity:.42;stroke-width:2.2;stroke-linecap:round}
.lux .p3h{fill:#0e2436;stroke:#e2fbfd;stroke-width:2.4;filter:drop-shadow(0 0 2px rgba(226,251,253,.7))}
@media(prefers-reduced-motion:no-preference){
  .luxp1 .p1min{transform-box:view-box;transform-origin:24px 24px;animation:p1min 3.2s linear infinite}
  .luxp1 .p1hr{transform-box:view-box;transform-origin:24px 24px;animation:p1hr 9.6s linear infinite}
  .luxp2 .p2bolt{stroke-dashoffset:100;animation:p2bolt 2.6s cubic-bezier(.5,0,.3,1) infinite}
  .luxp3 .p3h{transform-box:fill-box;transform-origin:center}
  .luxp3 .ph1{animation:p3h1 4s ease-in-out infinite}
  .luxp3 .ph2{animation:p3h2 4s ease-in-out infinite}
  .luxp3 .ph3{animation:p3h3 4s ease-in-out infinite}
}
@keyframes p1min{to{transform:rotate(360deg)}}
@keyframes p1hr{to{transform:rotate(360deg)}}
@keyframes p2bolt{0%{stroke-dashoffset:100;opacity:.35}32%{stroke-dashoffset:0;opacity:1}58%{opacity:1}70%{opacity:.5}80%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes p3h1{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
@keyframes p3h2{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
@keyframes p3h3{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

.usp-card .fig{font-size:1.9rem;margin:0 0 4px}
.usp-card h3{font-family:var(--sans);font-size:1.02rem;font-weight:800;letter-spacing:-.005em;color:var(--ink);margin:0 0 9px;line-height:1.25}
.usp-card p{color:var(--muted);font-size:14.5px;line-height:1.55}


/* AI command console */
.cmd-list{display:grid;gap:12px}
.cmd{display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px 17px;background:var(--surface);box-shadow:var(--sh-sm);transition:.25s}
.cmd:hover{transform:translateX(4px);border-color:var(--line-2)}
.cmd .q{width:32px;height:32px;border-radius:9px;background:var(--tint);color:var(--teal-dp);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmd .q svg{width:16px;height:16px}
.cmd em{font-style:normal;color:var(--ink);font-weight:600;font-size:15px}

/* Voice AI */
.voice-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.voice-orb{position:relative;width:190px;height:190px;margin:0 auto;border-radius:50%;background:var(--grad-teal);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--sh-teal);z-index:1}
.voice-orb svg{width:58px;height:58px}
.voice-orb .r{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(23,190,199,.4);animation:vpulse 2.8s ease-out infinite}
.voice-orb .r.r2{animation-delay:1.4s}
@keyframes vpulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
.voice-chat{display:flex;flex-direction:column;gap:14px}
.vmsg{max-width:82%;padding:15px 18px;border-radius:16px;font-size:15.5px;line-height:1.5;box-shadow:var(--sh-sm)}
.vmsg .who{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:5px;opacity:.85}
.vmsg.user{align-self:flex-end;background:var(--grad-teal);color:#fff}
.vmsg.user .who{color:rgba(255,255,255,.85)}
.vmsg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.vmsg.ai .who{color:var(--teal-dp)}

/* Feature grid (8) */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm);padding:26px;transition:.35s}
.feat:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--line-2)}
.feat .ic{width:46px;height:46px;border-radius:13px;background:var(--tint);border:1px solid var(--line-2);color:var(--teal-dp);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat .ic svg{width:22px;height:22px}
.feat h3{font-size:1.2rem;margin-bottom:8px}
.feat p{color:var(--muted);font-size:14px}

/* Comparison table */
/* ── premium spotlight comparison ── */
.cmp{max-width:840px;margin:44px auto 0}
.cmp-grid{display:grid;grid-template-columns:minmax(0,1fr) 208px 208px;position:relative;isolation:isolate}
.cmp-spot{position:absolute;z-index:0;top:0;bottom:0;right:208px;width:208px;border-radius:22px;
  background:linear-gradient(180deg,rgba(18,163,170,.13),rgba(18,163,170,.035));
  box-shadow:0 46px 84px -44px rgba(12,126,134,.62)}
.cmp-spot::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;pointer-events:none;
  background:linear-gradient(180deg,#17bec7,rgba(23,190,199,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cmp-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--grad-teal);color:#fff;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 15px;border-radius:100px;box-shadow:0 14px 24px -10px rgba(18,163,170,.7)}
.ch,.cr{position:relative;z-index:1;padding:15px 22px;display:flex;align-items:center;min-width:0}
.ch{padding-top:32px;padding-bottom:20px}
.ch-pd{justify-content:center}
.ch-other{justify-content:center;text-align:center;font-family:var(--serif);font-weight:560;color:var(--ink);font-size:15px;line-height:1.25}
.cmp-logo{height:24px;width:auto;display:block}
.cr{border-top:1px solid var(--line-2)}
.cr-feat{font-weight:700;color:var(--ink);font-size:14.5px}
.cr-pd{justify-content:center;font-weight:800;color:var(--teal-dp);font-size:14.5px}
.cr-other{justify-content:center;color:var(--muted);font-weight:600;font-size:14px}
.cr .ck{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;margin-right:9px;flex-shrink:0}
.cr .ck.yes{background:linear-gradient(145deg,#37c98a,#1f9e66);color:#fff;box-shadow:0 6px 12px -6px rgba(55,201,138,.6)}
.cr .ck.no{background:#eef2f4;color:#a7b6bc}
.cr .ck svg{width:12px;height:12px}
@media(max-width:640px){.cmp-grid{grid-template-columns:minmax(0,1fr) 116px 116px}.cmp-spot{right:116px;width:116px}.ch-other{font-size:12px}.cr-feat{font-size:12.5px}.ch,.cr{padding-left:13px;padding-right:13px}.cr-pd,.cr-other{padding-left:10px;padding-right:10px}.cr .ck{margin-right:6px}}
@media(max-width:560px){.cmp-grid{grid-template-columns:minmax(0,1fr) 104px 104px}.cmp-spot{right:104px;width:104px}.cr-feat{font-size:12px;line-height:1.25}.ch,.cr{padding-left:11px;padding-right:11px}.cr-pd,.cr-other{padding-left:8px;padding-right:8px}}

/* One-time pricing plan */
/* ── premium pricing ── */
.plan{max-width:600px;margin:0 auto;position:relative;border-radius:28px;padding:48px 44px 44px;text-align:center;overflow:hidden;isolation:isolate;
  background:linear-gradient(172deg,#eefafa,#ffffff 62%);box-shadow:0 54px 100px -50px rgba(12,126,134,.6),0 2px 8px rgba(14,36,54,.05)}
.plan::before{content:"";position:absolute;inset:0;border-radius:28px;padding:1.5px;z-index:4;pointer-events:none;
  background:linear-gradient(150deg,#17bec7,rgba(23,190,199,.12) 46%,#0e2436);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.plan::after{content:"";position:absolute;z-index:-1;top:-34%;left:50%;transform:translateX(-50%);width:120%;height:80%;pointer-events:none;
  background:radial-gradient(circle,rgba(23,190,199,.24),transparent 62%);filter:blur(42px)}
.plan>*{position:relative;z-index:1}
.plan-shine{position:absolute;top:0;left:-55%;width:38%;height:100%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-16deg)}
.plan .tag{display:inline-block;background:var(--grad-teal);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:7px 16px;border-radius:100px;margin-bottom:20px;box-shadow:0 12px 22px -10px rgba(18,163,170,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.plan .pamt{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-bottom:5px}
.plan .pamt .cur{font-family:var(--serif);font-size:34px;color:var(--teal-dp);font-weight:500}
.plan .pamt .num{font-family:var(--serif);font-size:84px;line-height:1;letter-spacing:-.03em;background:linear-gradient(160deg,#0e2436,#0c7e86);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.plan .pamt .once{font-size:15px;color:var(--muted-2);font-weight:700}
.plan .psub{color:var(--muted);margin-bottom:12px}
.plan .psub b{color:var(--teal-dp)}
.plan .plan-note{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:100px;margin-bottom:24px;box-shadow:0 8px 18px -14px rgba(14,36,54,.3)}
.plan .plan-buy{position:relative;overflow:hidden;margin-bottom:8px}
.plan .plan-buy::after{content:"";position:absolute;top:0;left:-45%;width:32%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg)}
.plan .plist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;text-align:left;margin:32px 0 0;padding-top:28px;border-top:1px solid var(--line-2)}
.plan .plist li{display:flex;gap:11px;align-items:center;font-size:14px;color:var(--ink);font-weight:500}
.plan .plist li .tk{width:21px;height:21px;border-radius:50%;background:rgba(18,163,170,.12);color:var(--teal-dp);display:grid;place-items:center;flex-shrink:0}
.plan .plist li .tk svg{width:12px;height:12px}
/* rotating ownership seal */
.plan-seal{position:absolute;top:15px;right:15px;width:80px;height:80px;z-index:3}
.plan-seal::before{content:"";position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,163,170,.1),rgba(18,163,170,.02));
  border:1px solid rgba(18,163,170,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 22px -14px rgba(12,126,134,.5)}
.pseal-ring{position:absolute;inset:0}
.pseal-txt{font-family:var(--sans);font-size:9.4px;font-weight:800;letter-spacing:.12em;fill:var(--teal-dp);text-transform:uppercase}
.pseal-core{position:absolute;inset:0;margin:auto;width:36px;height:36px;border-radius:50%;background:var(--grad-teal);display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 18px -6px rgba(18,163,170,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.pseal-core svg{width:18px;height:18px}
@media(prefers-reduced-motion:no-preference){
  .plan-shine{animation:plan-shine 6.5s ease-in-out infinite}
  .plan .plan-buy::after{animation:plan-shine 6.5s ease-in-out infinite;animation-delay:.25s}
  .pseal-ring{transform-box:view-box;transform-origin:50px 50px;animation:seal-spin 24s linear infinite}
}
@keyframes plan-shine{0%,58%{left:-55%}100%{left:135%}}
@keyframes seal-spin{to{transform:rotate(360deg)}}

.renew{max-width:600px;margin:22px auto 0;position:relative;border-radius:20px;background:linear-gradient(160deg,#fff,#f7fdfd);border:1px solid var(--line);box-shadow:0 24px 46px -34px rgba(12,126,134,.4);padding:24px 28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.renew .ramt{font-family:var(--serif);font-size:2.2rem;background:linear-gradient(160deg,#0e2436,#0c7e86);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em;white-space:nowrap}
.renew .ramt span{font-size:14px;color:var(--muted);font-weight:700;font-family:var(--sans);-webkit-text-fill-color:var(--muted)}
.renew .rtx{flex:1;min-width:220px}
.renew .rtx b{color:var(--ink)}
.renew .rtx p{font-size:14px;color:var(--muted);margin-top:4px}

/* Stripe trust callout reuse .secure; add chips */
.trust-mini{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.trust-mini .tm{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:100px;padding:8px 15px;box-shadow:var(--sh-sm)}
.trust-mini .tm svg{width:15px;height:15px;color:var(--teal-dp)}

@media(max-width:960px){
  .grid-4,.feat-grid{grid-template-columns:repeat(2,1fr)}
  .voice-wrap{grid-template-columns:1fr}
  .plan .plist{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid-4,.feat-grid{grid-template-columns:1fr}
  .priceline .sep{display:none}
}

/* Compact hero mockup so the hero fits within one viewport */
@media(min-width:961px){
  .hero .mock .mock-body{padding:16px}
  .hero .mock .mock-kpis{margin-bottom:11px}
  .hero .mock .kpi{padding:11px 13px}
  .hero .mock .kpi .v{font-size:20px}
  .hero .mock .mock-chart{padding:13px;margin-bottom:11px}
  .hero .mock .bars{height:56px}
  .hero .mock .mock-ai{padding:11px 13px}
}