/* =========================================================
   SKYTHINKS — PRODUCT PAGE STYLES
   Loads on top of styles.css (shared tokens + gb border system)
   ========================================================= */

/* ---------- per-product accent ---------- */
body{ --acc:var(--blue); --acc-soft:rgba(66,133,244,.12); --ring:#E4EBF5; }
body.accent-blue   { --acc:#4285F4; --acc-soft:rgba(66,133,244,.12) }
body.accent-green  { --acc:#34A853; --acc-soft:rgba(52,168,83,.12) }
body.accent-yellow { --acc:#E0A800; --acc-soft:rgba(251,188,5,.16) }
body.accent-red    { --acc:#EA4335; --acc-soft:rgba(234,67,53,.12) }
body.accent-orange { --acc:#F0821E; --acc-soft:rgba(240,130,30,.14) }

/* =========================================================
   PRODUCT NAV
   ========================================================= */
.pnav{background:rgba(255,255,255,.86); backdrop-filter:blur(18px) saturate(1.6); border-bottom:1px solid var(--line)}
.pnav .nav-in{gap:14px}
.pnav-sep{width:1px; height:22px; background:var(--line)}
.pnav-name{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.02em; color:#31405a}
.pnav .nav-cta{gap:8px}
.pnav-btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:9px 15px; font-size:14px; font-weight:600; color:#3c4a60}
.pnav-btn:hover{color:var(--text); border-color:#c9d7ea; background:#fff}
.pnav-mobile{position:fixed; top:66px; left:0; right:0; z-index:98; background:rgba(255,255,255,.98); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); padding:16px 0 20px}
.pnav-mobile .wrap{display:grid; gap:9px}
.pnav-back{font-size:14px; color:var(--muted); padding-top:6px}

/* =========================================================
   HERO
   ========================================================= */
.phero{position:relative; padding:132px 0 88px; overflow:hidden;
  background:linear-gradient(180deg,#fbfcfe,#f5f9fd 55%,#fff)}
.phero-bg{position:absolute; inset:0; pointer-events:none}
.phero-bg span{position:absolute; border-radius:50%; filter:blur(90px); opacity:.4}
.phero-bg span:nth-child(1){width:520px; height:520px; background:color-mix(in srgb, var(--acc) 55%, transparent); top:-160px; right:-60px}
.phero-bg span:nth-child(2){width:420px; height:420px; background:rgba(66,133,244,.35); bottom:-140px; left:-80px}
.phero-bg span:nth-child(3){width:360px; height:360px; background:rgba(251,188,5,.28); top:40%; left:44%}
.phero-in{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:48px; align-items:center}

.phero-title{font-size:clamp(34px,3.9vw,54px); font-weight:800; letter-spacing:-.035em; margin:20px 0 10px; text-wrap:balance}
.phero-tag{font-family:var(--display); font-weight:700; font-size:clamp(18px,1.7vw,23px); letter-spacing:-.02em}
.phero-sub{margin-top:16px; font-size:clamp(15.5px,1.15vw,17.5px); color:#43506a; line-height:1.62; max-width:54ch}
.phero-btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.phero-checks{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px}
.phero-checks li{display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:#3d4a60}
.phero-checks svg{color:var(--acc)}

/* browser mockup */
.phero-visual{position:relative}
.browser{background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg)}
.browser-bar{display:flex; align-items:center; gap:12px; padding:11px 14px; background:linear-gradient(180deg,#f7fafd,#eef4fa); border-bottom:1px solid var(--line)}
.bdots{display:flex; gap:6px}
.bdots i{width:9px; height:9px; border-radius:50%; background:#d7e0ec}
.bdots i:nth-child(1){background:#f0a9a3} .bdots i:nth-child(2){background:#f6d68a} .bdots i:nth-child(3){background:#9dd6ae}
.burl{flex:1; text-align:center; font-size:11.5px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 12px; max-width:340px; margin-inline:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.browser-body{padding:16px; background:linear-gradient(180deg,#fff,#fbfdff)}

.pfloat{position:absolute; width:210px; padding:12px 14px; border-radius:14px; font-size:11.8px; line-height:1.45;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 20px 44px -24px rgba(12,26,48,.55); animation:pfloatY 7s ease-in-out infinite}
.pfloat b{display:block; font-size:12px; margin-bottom:2px}
.pfloat span{color:var(--muted)}
.pfloat::before{content:""; position:absolute; top:13px; right:13px; width:7px; height:7px; border-radius:50%; background:var(--acc)}
.pfloat.pf1{top:-26px; left:-46px; bottom:auto; right:auto}
.pfloat.pf2{bottom:-26px; right:-46px; top:auto; left:auto; animation-delay:1.4s}
@keyframes pfloatY{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* =========================================================
   SCREEN MOCKS
   ========================================================= */
/* .scr renders inside dark sections too, so it must set its own colour
   rather than inheriting .dark-sec's near-white ink onto white cards */
.scr{display:grid; gap:12px; font-size:12.5px; color:var(--text)}
.scr-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.scr-kpis.n5,.scr-kpis.n6{grid-template-columns:repeat(3,1fr)}
.scr-kpi{padding:11px 12px; border-radius:13px; background:#fff; border:1px solid var(--line); box-shadow:0 2px 8px -6px rgba(12,26,48,.3)}
.scr-kpi span{display:block; font-size:11px; color:var(--muted)}
.scr-kpi b{display:block; font-family:var(--display); font-size:18px; letter-spacing:-.03em; margin:3px 0 2px; font-variant-numeric:tabular-nums}
.scr-kpi i{font-style:normal; font-size:11px; font-weight:600}
.t-up{color:var(--green)} .t-down{color:var(--red)} .t-warn{color:#c08800} .t-flat{color:var(--muted)}

.scr-split{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center}
.scr-chart{padding:12px 13px 10px; border-radius:14px; background:#fff; border:1px solid var(--line); min-width:0}
.scr-chart.wide{grid-column:1 / -1}
.scr-h{font-size:12px; font-weight:700; font-family:var(--display); margin-bottom:6px}
.pchart{width:100%; height:96px; display:block}
.pchart-line{stroke-dasharray:1200; stroke-dashoffset:1200; animation:pdraw 1.8s var(--ease) forwards}
@keyframes pdraw{to{stroke-dashoffset:0}}
.pchart-fill{opacity:0; animation:pfade 1.3s .4s var(--ease) forwards}
@keyframes pfade{to{opacity:1}}
.pbars{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:5px; align-items:end; height:36px; margin-top:8px}
.pbars i{display:block; height:var(--h); border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 12%,transparent));
  transform-origin:bottom; animation:pgrow .8s var(--ease) backwards; opacity:.85}
@keyframes pgrow{from{transform:scaleY(.05); opacity:0}}
.scr-donut{padding:8px; border-radius:14px; background:#fff; border:1px solid var(--line); display:grid; place-items:center}
.pdonut{width:104px; height:104px}
.pdonut-v{animation:pring 1.4s var(--ease) backwards}
@keyframes pring{from{stroke-dasharray:0 400}}
.pdonut-n{font-family:var(--display); font-size:17px; font-weight:700; fill:var(--text)}
.pdonut-l{font-size:8.5px; fill:var(--muted)}

.scr-rows{display:grid; gap:6px}
.scr-row{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:11px; background:#fff; border:1px solid var(--line)}
.scr-row i{width:7px; height:7px; border-radius:50%; background:var(--acc); flex:0 0 auto}
.scr-row span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scr-row em{font-style:normal; font-size:10.5px; font-weight:600; color:var(--acc); background:var(--acc-soft); padding:3px 8px; border-radius:999px}
.scr-row b{font-variant-numeric:tabular-nums}

.scr-funnel{padding:12px 13px 10px; border-radius:14px; background:#fff; border:1px solid var(--line)}
.scr-funnel-cols{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; height:96px; margin-top:6px}
.scr-fcol{display:grid; grid-template-rows:auto auto 1fr; gap:3px; text-align:center; align-items:end}
.scr-fcol span{font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--muted)}
.scr-fcol b{font-family:var(--display); font-size:16px; font-variant-numeric:tabular-nums}
.scr-fcol i{display:block; height:var(--h); min-height:14px; align-self:end; border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 10%,transparent)); opacity:.9;
  animation:pgrow .9s var(--ease) backwards}
.scr-fcol:nth-child(2) i{background:linear-gradient(180deg,#34A853,rgba(52,168,83,.1))}
.scr-fcol:nth-child(3) i{background:linear-gradient(180deg,#FBBC05,rgba(251,188,5,.1))}
.scr-fcol:nth-child(4) i{background:linear-gradient(180deg,#EA4335,rgba(234,67,53,.1))}

.phier{max-width:420px; margin:44px auto 0; text-align:center}
.phier-h{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8ab4f8; margin-bottom:16px}
.phier ol{display:grid; gap:10px; justify-items:center}
.phier li{position:relative; width:calc(100% - var(--d) * 18%); padding:13px 18px; border-radius:12px;
  background:linear-gradient(100deg,rgba(66,133,244,.18),rgba(52,168,83,.14));
  border:1px solid rgba(138,180,248,.3); color:#fff; font-weight:600; font-size:14px}
.phier li:not(:last-child)::after{content:"↓"; position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  font-size:12px; color:#7f97b8}

.scr-bar{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid var(--line)}
.scr-bar b{font-family:var(--display); font-size:13px}
.scr-search{flex:1; font-size:11.5px; color:var(--muted); background:var(--soft); border-radius:999px; padding:6px 12px}
.scr-btn{font-size:11.5px; font-weight:700; color:#fff; background:var(--acc); border-radius:999px; padding:6px 13px; white-space:nowrap}

.scr-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:12px}
.scr-table th{text-align:left; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:10px 12px; background:var(--soft); border-bottom:1px solid var(--line)}
.scr-table td{padding:10px 12px; border-bottom:1px solid #f0f4f9; white-space:nowrap}
.scr-table tr:last-child td{border-bottom:0}
.c-strong{font-weight:600}
.c-ok{color:#1f7a3c; font-weight:600}
.c-warn{color:#b07800; font-weight:600}

.scr-form{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.scr-field{display:grid; gap:4px; padding:10px 12px; border-radius:11px; background:#fff; border:1px solid var(--line)}
.scr-field span{font-size:10.5px; color:var(--muted)}
.scr-field i{font-style:normal; font-size:12.5px; font-weight:600}
.scr-formnote{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:11px; font-size:11.5px;
  background:var(--acc-soft); color:#37455e}
.scr-formnote svg{color:var(--acc); flex:0 0 auto}

.scr-repgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.scr-rep{padding:12px; border-radius:13px; background:#fff; border:1px solid var(--line)}
.scr-rep b{display:block; font-family:var(--display); font-size:19px; letter-spacing:-.03em}
.scr-rep span{font-size:10.5px; color:var(--muted); line-height:1.35; display:block; margin-top:3px}

.scr-ai{display:flex; gap:10px; padding:12px 14px; border-radius:13px; background:linear-gradient(100deg,var(--acc-soft),rgba(52,168,83,.08)); border:1px solid color-mix(in srgb,var(--acc) 22%,transparent)}
.scr-ai svg{color:var(--acc); flex:0 0 auto; margin-top:2px}
.scr-ai b{display:block; font-size:12px; font-family:var(--display)}
.scr-ai span{font-size:11.5px; color:#43506a; line-height:1.5}

.scr-set{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.scr-toggle{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; border-radius:11px; background:#fff; border:1px solid var(--line)}
.scr-toggle i{width:32px; height:18px; border-radius:999px; background:#dde5f0; position:relative; flex:0 0 auto}
.scr-toggle i::after{content:""; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .25s}
.scr-toggle i.on{background:var(--acc)}
.scr-toggle i.on::after{transform:translateX(14px)}

/* =========================================================
   KEY NUMBERS
   ========================================================= */
.pnumbers{padding:56px 0; background:#fff; border-bottom:1px solid var(--line)}
.pnum-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.pnum{text-align:center; padding:18px 14px}
.pnum b{display:block; font-family:var(--display); font-size:clamp(26px,2.6vw,36px); font-weight:800; letter-spacing:-.04em;
  background:var(--grad); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 9s linear infinite}
.pnum span{display:block; margin-top:6px; font-size:13.5px; color:var(--muted); line-height:1.45}

/* =========================================================
   FEATURES
   ========================================================= */
.pfeatures{padding:96px 0; background:linear-gradient(180deg,#fff,var(--soft))}
.pfeat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pfeat{padding:24px 22px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s}
.pfeat:hover{transform:translateY(-5px); box-shadow:0 18px 44px -22px color-mix(in srgb,var(--acc) 55%,transparent), var(--shadow)}
.pfeat-ic{display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:var(--acc-soft); color:var(--acc); margin-bottom:15px;
  transition:transform .35s var(--ease)}
.pfeat:hover .pfeat-ic{transform:scale(1.08)}
.pfeat h3{font-size:18px; margin-bottom:8px}
.pfeat p{font-size:14.3px; color:var(--muted); line-height:1.58; margin-bottom:16px}
.pfeat-prev{border-radius:12px; background:var(--soft); border:1px solid var(--line); padding:12px; overflow:hidden}
.pv{display:flex; align-items:center; gap:7px; height:48px}
.pv i,.pv span,.pv b{display:block; border-radius:5px; background:#dbe4f0}
.pv-profile i{width:26px; height:26px; border-radius:50%; background:var(--acc); opacity:.75}
.pv-profile span{height:8px; flex:1}
.pv-profile .w60{flex:.6}
.pv-plans{gap:8px}
.pv-plans b{flex:1; height:34px; background:#e3eaf4}
.pv-plans b.on{background:var(--acc); opacity:.8}
.pv-sched{display:grid; grid-template-columns:repeat(6,1fr); gap:5px; height:auto}
.pv-sched i{height:14px; background:#e3eaf4}
.pv-sched i:nth-child(3n){background:var(--acc); opacity:.65}
.pv-att{align-items:flex-end; gap:6px}
.pv-att i{flex:1; height:var(--h); background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 15%,transparent)); opacity:.85}
.pv-ren{flex-direction:column; align-items:stretch; gap:7px; justify-content:center}
.pv-ren i{height:8px}
.pv-ren .lead{height:12px; width:55%; background:var(--acc); opacity:.75}
.pv-ren .w40{width:40%}
.pv-pipe{flex-direction:column; align-items:stretch; gap:6px; justify-content:center}
.pv-pipe i{height:8px; width:var(--w); background:var(--acc); opacity:.72}
.pv-report{align-items:flex-end; gap:8px}
.pv-report i{flex:1; height:var(--h); background:var(--acc); opacity:.7}

/* =========================================================
   MODULES
   ========================================================= */
.pmodules{padding:96px 0; background:#fff}
.pmod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.pmod{position:relative; display:flex; align-items:center; gap:12px; padding:17px 18px; border-radius:15px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); cursor:default;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s}
.pmod b{font-size:14.5px; font-weight:600; flex:1}
.pmod-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--soft); color:var(--acc);
  transition:transform .35s var(--ease), background .3s}
.pmod-arrow{display:grid; place-items:center; color:var(--acc); opacity:0; transform:translateX(-6px); transition:all .3s var(--ease)}
.pmod:hover,.pmod:focus-visible,.pmod.on{transform:translateY(-4px); border-color:transparent;
  box-shadow:0 16px 34px -18px color-mix(in srgb,var(--acc) 60%,transparent), var(--shadow-sm)}
.pmod:hover .pmod-ic,.pmod:focus-visible .pmod-ic,.pmod.on .pmod-ic{background:var(--acc-soft); transform:scale(1.09) rotate(-4deg)}
.pmod:hover .pmod-arrow,.pmod:focus-visible .pmod-arrow,.pmod.on .pmod-arrow{opacity:1; transform:none}
.pmod::after{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.2px; opacity:0;
  background:conic-gradient(from var(--ang), var(--blue), var(--green), var(--yellow), var(--red), var(--blue));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; animation:angspin 6s linear infinite; transition:opacity .3s; pointer-events:none}
.pmod:hover::after,.pmod:focus-visible::after,.pmod.on::after{opacity:.9}

/* =========================================================
   WORKFLOW
   ========================================================= */
.pworkflow{padding:96px 0}
.pflow{display:grid; grid-template-columns:repeat(4,1fr); gap:22px 34px; max-width:1060px; margin-inline:auto}
.pflow-step{position:relative; display:flex; align-items:center; gap:11px; padding:14px 20px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid var(--line-inv); color:#dbe7f6; font-weight:600; font-size:14.5px}
.pflow-step::after{content:""; position:absolute; right:-30px; top:50%; width:26px; height:1px;
  background:linear-gradient(90deg,rgba(138,180,248,.6),rgba(138,180,248,.15))}
.pflow-step::before{content:""; position:absolute; right:-16px; top:50%; width:5px; height:5px; border-radius:50%;
  background:#8ab4f8; transform:translateY(-50%); animation:flowPulse 2.6s ease-in-out infinite}
.pflow-step:nth-child(4n)::after,.pflow-step:nth-child(4n)::before,
.pflow-step:last-child::after,.pflow-step:last-child::before{display:none}
@keyframes flowPulse{0%,100%{opacity:.25; transform:translateY(-50%) scale(.8)}50%{opacity:1; transform:translateY(-50%) scale(1.2)}}
.pflow-n{display:grid; place-items:center; width:24px; height:24px; border-radius:8px; font-size:11.5px; font-weight:700;
  background:linear-gradient(135deg,var(--blue),var(--green)); color:#fff}
.pflow-visual{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:44px}
.pflow-visual span{padding:12px 20px; border-radius:12px; font-weight:600; font-size:14px; color:#fff;
  background:linear-gradient(100deg,rgba(66,133,244,.22),rgba(52,168,83,.22)); border:1px solid rgba(138,180,248,.35)}
.pflow-visual i{font-style:normal; color:#7f97b8}

/* =========================================================
   AI PANEL
   ========================================================= */
.pai{padding:96px 0; background:linear-gradient(180deg,var(--soft),#fff)}
.pai-panel{max-width:860px; margin-inline:auto; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(160deg,#0c1628,#07111f); box-shadow:0 50px 100px -50px rgba(7,17,31,.85)}
.pai-head{display:flex; align-items:center; gap:11px; padding:18px 22px; border-bottom:1px solid var(--line-inv)}
.pai-ic{display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--green))}
.pai-head b{display:block; font-family:var(--display); font-size:14px; color:#fff}
.pai-head i{display:block; font-style:normal; font-size:11.5px; color:var(--muted-inv)}
.pai-body{padding:24px 22px; display:grid; gap:16px}
.pai-q{margin-left:auto; max-width:80%; padding:14px 17px; border-radius:16px 16px 5px 16px; font-size:14.5px; color:#fff;
  background:linear-gradient(100deg,rgba(66,133,244,.92),rgba(47,111,224,.92)); animation:bubbleIn .5s var(--ease) backwards}
.pai-a{max-width:86%; padding:15px 18px; border-radius:16px 16px 16px 5px; background:rgba(255,255,255,.06);
  border:1px solid var(--line-inv); animation:bubbleIn .5s .25s var(--ease) backwards}
.pai-a p{font-size:14.5px; line-height:1.62; color:#cfdcee}
.pai-a b{color:#fff}
.pai-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:11px}
.pai-chips i{font-style:normal; font-size:10.5px; font-weight:600; color:#8ab4f8; background:rgba(66,133,244,.14); padding:4px 10px; border-radius:999px}
.pai-foot{display:flex; align-items:center; gap:11px; padding:15px 18px; border-top:1px solid var(--line-inv); background:rgba(255,255,255,.03)}
.pai-input{flex:1; font-size:13.5px; color:#7b90ad}

/* =========================================================
   SHOWCASE
   ========================================================= */
.pshow{padding:96px 0}
.pshow-stage{display:flex; align-items:center; gap:14px; max-width:1040px; margin-inline:auto}
.pshow-window{flex:1; min-width:0; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 40px 90px -45px rgba(0,0,0,.8)}
.pshow-track{position:relative; padding:16px; background:linear-gradient(180deg,#fff,#fbfdff); min-height:392px}
.pshow-slide{display:none}
.pshow-slide.on{display:block; animation:slideIn .45s var(--ease)}
@keyframes slideIn{from{opacity:0; transform:translateX(14px)}}
.pshow-nav{width:44px; height:44px; flex:0 0 auto; border-radius:50%; font-size:22px; line-height:1; color:#dbe7f6;
  background:rgba(255,255,255,.07); border:1px solid var(--line-inv); transition:all .25s var(--ease)}
.pshow-nav:hover{background:rgba(255,255,255,.16); transform:scale(1.06)}
.pshow-dots{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px}
.pshow-dot{padding:8px 15px; border-radius:999px; font-size:12.5px; font-weight:600; color:#9fb3ce;
  background:rgba(255,255,255,.05); border:1px solid var(--line-inv); transition:all .25s var(--ease)}
.pshow-dot:hover{color:#fff; background:rgba(255,255,255,.12)}
.pshow-dot.on{color:#fff; border-color:transparent; background:linear-gradient(100deg,var(--blue),var(--green))}
.pshow-cta{text-align:center; margin-top:26px}

/* =========================================================
   BENEFITS
   ========================================================= */
.pbenefits{padding:96px 0; background:#fff}
.pben-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.pben{padding:28px 24px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s}
.pben:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.pben-ic{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; margin-bottom:16px;
  background:var(--acc-soft); color:var(--acc)}
.pben h3{font-size:19px; margin-bottom:8px}
.pben p{font-size:14.5px; color:var(--muted); line-height:1.6}

/* =========================================================
   PRICING
   ========================================================= */
.ppricing{padding:96px 0; background:linear-gradient(180deg,var(--soft),#fff)}
.pc-note{font-size:12.5px; color:var(--muted); margin-top:-12px; margin-bottom:18px}
.ppricing-actions{text-align:center; margin-top:28px}

.pcalc{margin-top:44px; padding:28px; border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-sm)}
.pcalc-head h3{font-size:21px; margin-bottom:6px}
.pcalc-head p{font-size:14.5px; color:var(--muted); margin-bottom:22px}
.pcalc-body{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start}
.pcalc-inputs{display:grid; gap:14px}
.pcalc-field{display:grid; gap:6px}
.pcalc-field span{font-size:13px; font-weight:600; color:#3d4a60}
.pcalc-field input{padding:13px 15px; border-radius:12px; border:1px solid var(--line); background:var(--soft);
  font:inherit; font-weight:600; font-variant-numeric:tabular-nums; transition:border-color .25s, background .25s}
.pcalc-field input:focus{outline:none; border-color:var(--acc); background:#fff}
.pcalc-mods{border:0; padding:0; margin:0}
.pcalc-mods legend{font-size:13px; font-weight:600; color:#3d4a60; margin-bottom:9px}
.pcalc-check{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:11px; border:1px solid var(--line);
  background:var(--soft); font-size:13.5px; margin-bottom:7px; cursor:pointer; transition:border-color .2s, background .2s}
.pcalc-check:hover{border-color:color-mix(in srgb,var(--acc) 45%,transparent); background:#fff}
.pcalc-check input{accent-color:var(--acc); width:16px; height:16px}
.pcalc-out{padding:24px; border-radius:var(--radius); background:linear-gradient(160deg,#0c1628,#07111f); color:var(--ink-inv)}
.pcalc-l{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-inv)}
.pcalc-price{display:block; font-family:var(--display); font-size:40px; font-weight:800; letter-spacing:-.04em; color:#fff; margin:8px 0 2px;
  font-variant-numeric:tabular-nums}
.pcalc-per{display:block; font-size:13px; color:var(--muted-inv); margin-bottom:18px}
.pcalc-break{display:grid; gap:7px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line-inv)}
.pcalc-break li{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted-inv)}
.pcalc-break b{color:#fff; font-variant-numeric:tabular-nums}
.pcalc-break .save-row b{color:#5fce85}
.pcalc-fine{margin-top:12px; font-size:11.5px; color:var(--muted-inv); line-height:1.5}

/* =========================================================
   MODALS
   ========================================================= */
.modal{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px}
.modal[hidden],.present-bar[hidden],.pnav-mobile[hidden]{display:none !important}
.modal-back{position:absolute; inset:0; background:rgba(7,17,31,.66); backdrop-filter:blur(6px); animation:fadeIn .25s}
.modal-panel{position:relative; width:min(100%,860px); max-height:88vh; display:flex; flex-direction:column;
  border-radius:var(--radius-lg); background:#fff; box-shadow:0 50px 100px -40px rgba(7,17,31,.7);
  animation:modalIn .35s var(--ease); overflow:hidden}
.modal-lg .modal-panel{width:min(100%,1120px)}
@keyframes modalIn{from{opacity:0; transform:translateY(18px) scale(.98)}}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line)}
.modal-head b{display:block; font-family:var(--display); font-size:16px}
.modal-head i{display:block; font-style:normal; font-size:12.5px; color:var(--muted)}
.modal-x{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--muted); background:var(--soft)}
.modal-x:hover{color:var(--text); background:#eef3f9}
.modal-body{padding:0; overflow:auto; flex:1}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--line); background:var(--soft)}

.cmp-table{width:100%; border-collapse:collapse; font-size:14px}
.cmp-table th,.cmp-table td{padding:13px 16px; text-align:center; border-bottom:1px solid var(--line)}
.cmp-table thead th{position:sticky; top:0; background:#fff; font-family:var(--display); font-size:14px; z-index:2}
.cmp-table thead th.hot{color:var(--blue)}
.cmp-table tbody th{text-align:left; font-weight:600; color:#3d4a60; font-size:13.5px}
.cmp-table .cmp-price th{font-size:15px; font-weight:800; font-family:var(--display); padding-top:0; color:var(--text)}
.cmp-table .cmp-price i{font-style:normal; font-size:11px; font-weight:500; color:var(--muted)}
.cmp-table td svg{color:var(--green); display:inline-block; vertical-align:middle}
.cmp-table .c-no{color:#c3ccd9}
.cmp-table tbody tr:hover{background:var(--soft)}

/* live demo app */
.demo-app{display:grid; grid-template-columns:200px 1fr; min-height:520px; overflow:hidden}
.demo-side{background:linear-gradient(180deg,#0c1628,#07111f); padding:18px 14px; display:flex; flex-direction:column; gap:14px}
.demo-brand{display:flex; align-items:center; gap:9px; font-family:var(--display); font-size:13.5px; font-weight:700; color:#fff}
.demo-brand svg{color:var(--acc)}
.demo-side nav{display:grid; gap:4px}
.demo-link{text-align:left; padding:10px 12px; border-radius:10px; font-size:13.5px; color:#9fb3ce; transition:all .2s}
.demo-link:hover{color:#fff; background:rgba(255,255,255,.06)}
.demo-link.on{color:#fff; background:linear-gradient(100deg,rgba(66,133,244,.28),rgba(52,168,83,.22))}
.demo-side-foot{margin-top:auto; display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted-inv)}
.demo-side-foot svg{color:var(--yellow)}
.demo-main{padding:18px; background:linear-gradient(180deg,#fff,#fbfdff); overflow:auto; max-height:70vh}

/* =========================================================
   PRODUCT COMPARISON
   ========================================================= */
.pcompare{padding:96px 0; background:linear-gradient(180deg,#fff,var(--soft))}
.pcmp-label{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.pcmp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:14px; margin-bottom:36px}
.pcmp-card{display:grid; gap:7px; padding:20px 18px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s}
.pcmp-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.pcmp-card.is-current{background:linear-gradient(150deg,#fff,var(--acc-soft))}
.pcmp-ic{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; margin-bottom:4px}
.pcmp-ic.accent-blue{background:rgba(66,133,244,.12); color:#4285F4}
.pcmp-ic.accent-green{background:rgba(52,168,83,.12); color:#34A853}
.pcmp-ic.accent-yellow{background:rgba(251,188,5,.16); color:#c08800}
.pcmp-ic.accent-red{background:rgba(234,67,53,.12); color:#EA4335}
.pcmp-ic.accent-orange{background:rgba(240,130,30,.14); color:#d9740f}
.pcmp-card b{font-family:var(--display); font-size:17px}
.pcmp-best{font-size:13px; color:var(--muted); line-height:1.45}
.pcmp-mods{font-size:12px; color:#8494ab; line-height:1.45}
.pcmp-price{font-size:13.5px; font-weight:700; margin-top:4px}
.pcmp-price i{font-style:normal; font-weight:500; color:var(--muted)}
.pcmp-cta{font-size:13px; font-weight:600; color:var(--acc)}

/* =========================================================
   FAQ + CTA
   ========================================================= */
.pfaq{padding:0 0 96px; background:var(--soft)}
.pcta{padding:104px 0; text-align:center}
.anchor-alias{position:absolute; top:0; left:0; width:1px; height:1px}
.pcta-in{position:relative; z-index:2; display:grid; justify-items:center}

/* =========================================================
   PRESENTATION MODE
   ========================================================= */
.present-bar{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:300;
  display:flex; align-items:center; gap:16px; padding:11px 16px; border-radius:999px;
  background:rgba(9,20,36,.94); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.8); color:#dbe7f6; font-size:13.5px}
.pb-brand{display:flex; align-items:center; gap:7px; font-weight:700; font-family:var(--display); color:#fff}
.pb-brand svg{color:var(--acc)}
.pb-title{color:#9fb3ce}
.pb-count{font-variant-numeric:tabular-nums; color:#7f97b8; font-size:12.5px}
.pb-ctrls{display:flex; gap:6px}
.pb-ctrls button{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:15px;
  transition:background .2s, transform .2s}
.pb-ctrls button:hover{background:rgba(255,255,255,.2); transform:scale(1.05)}
.pb-exit{width:auto !important; padding:0 14px; border-radius:999px !important; font-size:11.5px !important; font-weight:600; letter-spacing:.04em}

body.presenting .nav,
body.presenting .footer,
body.presenting .pnav-mobile,
body.presenting section:not(.present-on){display:none !important}
body.presenting{overflow-x:hidden}
body.presenting .present-on{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-top:48px; padding-bottom:96px; animation:presentIn .4s var(--ease);
}
@keyframes presentIn{from{opacity:0; transform:scale(.985)}}
body.presenting .present-on .wrap{width:min(100% - 72px, 1500px)}
body.presenting .sec-head{margin-bottom:38px}
body.presenting .sec-lead{display:none}
body.presenting .phero-sub{font-size:20px; max-width:44ch}
body.presenting .phero-in{gap:56px; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
body.presenting .pchart{height:150px}
body.presenting .scr{font-size:15px}
body.presenting .scr-kpi b{font-size:26px}
body.presenting .scr-kpi span{font-size:13px}
body.presenting .scr-kpi i{font-size:13px}
body.presenting .pdonut{width:150px; height:150px}
body.presenting .pbars{height:60px}
body.presenting .pshow-track{min-height:min(60vh,560px)}
body.presenting .pfeat p,body.presenting .pben p{font-size:15.5px}
body.presenting .pfeat-prev{display:none}
body.presenting .reveal{opacity:1 !important; transform:none !important}
body.presenting .pcalc,body.presenting .ppricing-actions,body.presenting .pcmp-mods{display:none}
body.presenting .pfaq,body.presenting .pnumbers{background:transparent}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .phero-in{grid-template-columns:1fr; gap:52px}
  .phero-copy,.phero-visual{min-width:0}
  .phero{padding:112px 0 72px}
  .pfeat-grid{grid-template-columns:1fr 1fr}
  .pmod-grid{grid-template-columns:repeat(3,1fr)}
  .pben-grid{grid-template-columns:1fr 1fr}
  .pnum-grid{grid-template-columns:1fr 1fr}
  .pcalc-body{grid-template-columns:1fr}
  .demo-app{grid-template-columns:170px 1fr}
  .pfloat.pf1{left:-16px} .pfloat.pf2{right:-10px}
}
@media (max-width:900px){
  .pnav-name,.pnav-btn,.pnav .btn-secondary{display:none}
  .pnav .nav-in{height:66px}
  .burger{display:flex}
  .pfeatures,.pmodules,.pworkflow,.pai,.pshow,.pbenefits,.ppricing,.pcompare{padding:76px 0}
  .pmod-grid{grid-template-columns:1fr 1fr}
  .scr-kpis{grid-template-columns:1fr 1fr}
  .scr-repgrid{grid-template-columns:1fr 1fr}
  .scr-split{grid-template-columns:1fr}
  .scr-donut{justify-self:center}
  .pshow-nav{display:none}
  .demo-app{grid-template-columns:1fr}
  .demo-side{flex-direction:row; align-items:center; gap:10px; overflow-x:auto; padding:12px}
  .demo-side nav{display:flex; gap:6px}
  .demo-side-foot{display:none}
  .demo-link{white-space:nowrap}
  .pflow{grid-template-columns:repeat(2,1fr); gap:20px 30px}
  .pflow-step::after{right:-26px; width:22px}
  .pflow-step::before{right:-15px}
  .pflow-step:nth-child(4n)::after,.pflow-step:nth-child(4n)::before{display:block}
  .pflow-step:nth-child(2n)::after,.pflow-step:nth-child(2n)::before{display:none}
}
@media (max-width:680px){
  .phero{padding:100px 0 60px}
  .pfeat-grid,.pben-grid,.pnum-grid{grid-template-columns:1fr}
  .pmod-grid{grid-template-columns:1fr}
  .pfloat{display:none}
  .browser-body{padding:12px}
  .scr-form,.scr-set{grid-template-columns:1fr}
  .scr-table{display:block; overflow-x:auto; white-space:nowrap}
  .modal{padding:12px}
  .modal-panel{max-height:92vh}
  .modal-body{-webkit-overflow-scrolling:touch}
  .cmp-table{font-size:12.5px}
  .cmp-table th,.cmp-table td{padding:10px 9px}
  .pcalc{padding:20px}
  .pcalc-out{padding:20px}
  .pshow-track{min-height:0}
  .present-bar{gap:10px; padding:9px 12px; font-size:12px; width:calc(100% - 24px); justify-content:space-between}
  .pb-title{display:none}
  body.presenting .present-on .wrap{width:calc(100% - 32px)}
  .pflow{grid-template-columns:1fr; gap:24px}
  .pflow-step::after{right:auto; left:50%; top:auto; bottom:-19px; width:1px; height:16px;
    background:linear-gradient(180deg,rgba(138,180,248,.6),rgba(138,180,248,.15))}
  .pflow-step::before{right:auto; left:50%; top:auto; bottom:-13px; transform:translateX(-50%)}
  .pflow-step:nth-child(2n)::after,.pflow-step:nth-child(2n)::before{display:block}
  .pflow-step:last-child::after,.pflow-step:last-child::before{display:none}
}
@media (max-width:520px){
  .phero-title{font-size:clamp(27px,8.4vw,38px)}
  .phero-tag{font-size:17px}
  .phero-sub{font-size:15.5px}
  .phero-btns{gap:10px}
  .phero-btns .btn,.pcta .btn{width:100%}
  .btn-lg{padding:15px 22px; font-size:15px}
  .phero-checks{gap:8px 16px}
  .phero-checks li{font-size:13.5px}
  .pnum b{font-size:28px}
  .pcalc-price{font-size:32px}
  .pshow-dot{font-size:11.5px; padding:7px 12px}
  .modal-foot{flex-direction:column}
  .modal-foot .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .pfloat,.pnum b,.pchart-line,.pchart-fill,.pbars i,.pdonut-v{animation:none !important}
  .pchart-line{stroke-dashoffset:0}
  .pchart-fill{opacity:1}
}