/* DPOM homepage preview, 12 Oct 2026. Page-specific styles, all scoped to #hp.
   Brand: DPOM navy space, DPOM red, Montserrat + Raleway. Flat fills only: no gradient buttons, text or borders. */
/* metric-matched fallbacks, so text does not reflow when the web fonts arrive */
@font-face{font-family:"Montserrat Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");ascent-override:85.8%;descent-override:22.3%;line-gap-override:0%;size-adjust:113.4%}
@font-face{font-family:"Raleway Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");ascent-override:92%;descent-override:23%;line-gap-override:0%;size-adjust:104.5%}
body{background-color:#0E1226 !important}
#hp{
  --bg:#0E1226; --bg2:#0A0D1D; --bg3:#121731; --panel:#161B33; --panel2:#1C2242;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --red:#C22232; --red2:#E0313F; --redglow:rgba(194,34,50,.45);
  --ink:#F4F1EA; --body:rgba(244,241,234,.76); --mute:rgba(244,241,234,.54);
  --blue:#7FB3FF; --green:#3DDC97; --feefo:#FFCE00; --gold:#C9A84C;
  --fh:'Montserrat','Montserrat Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fb:'Raleway','Raleway Fallback',-apple-system,sans-serif;
  --wrap:1240px;
  font-family:var(--fb); color:var(--body); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow:hidden; overflow:clip; position:relative;
}
#hp *,#hp *::before,#hp *::after{box-sizing:border-box}
#hp h1,#hp h2,#hp h3,#hp h4{font-family:var(--fh);color:var(--ink);margin:0;text-transform:none;letter-spacing:-.02em;line-height:1.08;font-weight:800}
#hp p{margin:0;color:var(--body);font-family:var(--fb);font-size:17px;line-height:1.65}
#hp a{color:inherit;text-decoration:none}
#hp ul,#hp ol{list-style:none;margin:0;padding:0}
#hp img{max-width:100%;height:auto;display:block}
#hp button{font-family:var(--fh)}
#hp .hp-ic{width:1.1em;height:1.1em;flex:none;display:inline-block;vertical-align:-.15em}
#hp .hp-wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;position:relative;z-index:2}
#hp .hp-center{text-align:center}
#hp .hp-sec{position:relative;padding:112px 0}

/* type */
#hp .hp-kicker{font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--red2);margin-bottom:16px;display:flex;align-items:center;gap:10px}
#hp .hp-kicker::before{content:"";width:14px;height:14px;background:var(--red2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.5 5.6 4.9 10 10.5 10.5-5.6.5-10 4.9-10.5 10.5C11.5 16.9 7.1 12.5 1.5 12 7.1 11.5 11.5 7.1 12 1.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.5 5.6 4.9 10 10.5 10.5-5.6.5-10 4.9-10.5 10.5C11.5 16.9 7.1 12.5 1.5 12 7.1 11.5 11.5 7.1 12 1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
#hp h2{font-size:clamp(32px,3.6vw,52px);font-weight:800;max-width:17ch}
#hp h2 span{color:var(--mute);display:block}
#hp .hp-lead{font-size:19px;line-height:1.6;max-width:60ch;margin-top:20px}
#hp .hp-lead a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
#hp .hp-head{margin-bottom:56px}
#hp .hp-head--split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
#hp .hp-head--split .hp-lead{margin-top:0}
#hp .hp-more-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:700;font-size:15px;color:var(--ink);padding:6px 0;border-bottom:2px solid var(--red);margin-right:28px;transition:gap .2s,color .2s}
#hp .hp-more-link:hover{gap:12px;color:#fff}
#hp .hp-ex{font-style:normal;font-family:var(--fh);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line2);border-radius:999px;padding:3px 8px;white-space:nowrap}

/* buttons */
#hp .hp-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--fh);font-weight:800;font-size:16px;line-height:1;border-radius:14px;padding:0 22px;height:60px;transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s;cursor:pointer;border:0}
#hp .hp-btn .hp-ic{width:20px;height:20px}
#hp .hp-btn--call{background:var(--red);color:#fff;height:72px;padding:0 22px 0 18px;box-shadow:0 14px 40px -12px var(--redglow)}
#hp .hp-btn--call small{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;opacity:.85;margin-bottom:6px}
#hp .hp-btn--call b{display:block;font-size:22px;font-weight:900;letter-spacing:.01em}
#hp .hp-btn--call:hover{background:var(--red2);transform:translateY(-2px)}
#hp .hp-btn--ghost{background:rgba(255,255,255,.05);color:var(--ink);border:1px solid var(--line2);backdrop-filter:blur(6px)}
#hp .hp-btn--ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09)}
#hp .hp-btn--red{background:var(--red);color:#fff;width:100%;justify-content:center;font-size:17px;text-transform:none;letter-spacing:0}
#hp .hp-btn--red:hover{background:var(--red2)}

/* ================= HERO (v3, minimal): where are you losing customers? ================= */
#hp .hp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#hp .hp-preview-strip{margin:0;height:28px;line-height:28px;text-align:center;background:#FFCE00;color:#0A0D1D !important;font-family:var(--fh);font-weight:800;font-size:13px !important;letter-spacing:.14em;text-transform:uppercase}
#hp .hp-hero{position:relative;min-height:calc(100vh - 190px);display:flex;align-items:center;padding:40px 0 48px;background:var(--bg2);isolation:isolate}
.hp-js #hp .hp-hero{max-height:860px}
#hp .hp-hero__sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#hp .hp-hero__neb{position:absolute;left:34%;right:-6%;top:-10%;bottom:-10%;width:72%;height:120%;opacity:0;transform:translate3d(0,var(--py,0px),0);transition:opacity 1.2s ease}
#hp .hp-hero__neb.on{opacity:.8}
#hp .hp-hero__sky::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0A0D1D 0%,#0A0D1D 30%,rgba(10,13,29,.72) 52%,rgba(10,13,29,.35) 100%),linear-gradient(0deg,#0E1226 0%,rgba(14,18,38,0) 22%)}
#hp .hp-wrap--hero{max-width:1320px}
#hp .hp-hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:center;width:100%}
#hp .hp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:26px}
#hp .hp-eyebrow .hp-ic{color:var(--red2);width:14px;height:14px}
#hp h1{font-size:clamp(42px,3.9vw,60px);font-weight:900;letter-spacing:-.035em;line-height:1.03;max-width:15ch}
#hp .hp-hero__sub{font-size:19px;line-height:1.55;max-width:40ch;margin-top:24px;color:var(--body)}
#hp .hp-hero__actions{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:34px;align-items:center}
#hp .hp-btn--call{background:var(--red);color:#fff;height:72px;padding:0 26px 0 22px;box-shadow:0 14px 40px -12px var(--redglow)}
#hp .hp-btn--call small{display:block;font-size:13px;font-weight:700;letter-spacing:.03em;opacity:.88;margin-bottom:5px}
#hp .hp-btn--call b{display:block;font-size:24px;font-weight:900;letter-spacing:.01em}
#hp .hp-btn--call:hover{background:var(--red2);transform:translateY(-2px)}
#hp .hp-hero__prices{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:700;font-size:16px;color:var(--ink);padding:6px 0;border-bottom:2px solid var(--red);transition:gap .2s}
#hp .hp-hero__prices:hover{gap:12px}
#hp .hp-hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:34px !important;font-family:var(--fh);font-weight:600;font-size:14px !important;color:var(--mute) !important}
#hp .hp-hero__trust a{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
#hp .hp-hero__trust b{font-weight:900;color:var(--ink)}
#hp .hp-stars{display:inline-flex;gap:2px;color:var(--feefo)}
#hp .hp-stars svg{width:14px;height:14px}

/* the journey: the stages are the controls */
#hp .hp-leak{position:relative;padding:34px 36px 30px;border-radius:26px;background:rgba(12,15,33,.62);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 50px 110px -50px rgba(0,0,0,.9)}
#hp .hp-leak__q{font-size:24px !important;font-weight:800;letter-spacing:-.02em;max-width:none}
#hp .hp-leak__q span{display:block;margin-top:6px;font-size:15px;font-weight:600;letter-spacing:0;color:var(--mute)}
@media (min-width:1101px) and (max-width:1440px){#hp .hp-wrap--hero{padding:0 64px}}
#hp .hp-line{position:relative;margin:34px 0 26px}
#hp .hp-line__track{position:absolute;left:30px;right:30px;top:30px;height:2px;background:rgba(255,255,255,.16);border-radius:2px}
#hp .hp-line__flow{position:absolute;top:-1px;left:var(--from,0%);right:0;height:4px;border-radius:4px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7),0 0 18px rgba(224,49,63,.85);transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.55,0,.25,1)}
#hp .hp-leak.is-flow .hp-line__flow{transform:scaleX(1)}
#hp .hp-line__nodes{position:relative;display:flex;justify-content:space-between;margin:0;padding:0;list-style:none}
#hp .hp-node{position:relative;width:60px;display:flex;justify-content:center}
#hp .hp-node__btn{display:flex;flex-direction:column;align-items:center;gap:12px;background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--ink);font:inherit}
#hp .hp-node__dot{position:relative;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#121731;border:1.5px solid rgba(255,255,255,.22);color:rgba(244,241,234,.85);transition:border-color .35s,box-shadow .45s,background-color .35s,transform .35s}
#hp .hp-node__glyph{width:24px;height:24px;transition:opacity .3s,transform .3s}
#hp .hp-node__fix{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;transform:scale(1.6);transition:opacity .35s,transform .5s cubic-bezier(.2,1.3,.4,1)}
#hp .hp-node__label{font-family:var(--fh);font-weight:700;font-size:14px;color:var(--body);white-space:nowrap;transition:color .3s}
/* the stages are named as problems (13 Oct 2026) and are wider than the gap between dots: every other label sits one
   line lower, so each stays on one line and never touches its neighbour */
#hp .hp-line__nodes .hp-node:nth-child(even) .hp-node__label{margin-top:24px}
#hp .hp-line__nodes .hp-node--goal{justify-content:flex-start}   /* Customer's dot and label sit at the top like the others: label on the upper row, clear of Missed calls */
#hp .hp-node__btn:hover .hp-node__dot{border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
#hp .hp-node__btn:hover .hp-node__label{color:var(--ink)}
#hp .hp-node__btn:focus-visible{outline:none}
#hp .hp-node__btn:focus-visible .hp-node__dot{outline:2px solid var(--blue);outline-offset:4px}
#hp .hp-node--goal .hp-node__dot{border-color:rgba(224,49,63,.55);color:var(--red2)}
#hp .hp-node--goal .hp-node__dot svg{width:20px;height:20px}
#hp .hp-node--goal{flex-direction:column;align-items:center;gap:12px}
/* leak: the stage glows red */
#hp .hp-node.is-leak .hp-node__dot{border-color:var(--red2);background:#2A0E18;box-shadow:0 0 0 7px rgba(224,49,63,.16),0 0 30px rgba(224,49,63,.75);color:#FF8A94}
#hp .hp-node.is-leak .hp-node__label,#hp .hp-node.is-fixed .hp-node__label{color:var(--ink)}
/* fixed: the DPOM fix settles onto the node */
#hp .hp-node.is-fixed .hp-node__dot{border-color:#fff;background:#171C3A;box-shadow:0 0 0 7px rgba(255,255,255,.06),0 0 26px rgba(224,49,63,.45)}
#hp .hp-node.is-fixed .hp-node__glyph{opacity:0;transform:scale(.6)}
#hp .hp-node.is-fixed .hp-node__fix{opacity:1;transform:none}
#hp .hp-node--goal.is-reached .hp-node__dot{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 0 8px rgba(224,49,63,.15),0 0 36px rgba(224,49,63,.85)}

/* one result row */
#hp .hp-results{position:relative;min-height:var(--resH,128px);border-top:1px solid rgba(255,255,255,.09);padding-top:20px}
#hp .hp-res{display:flex;align-items:center;justify-content:space-between;gap:12px 22px;flex-wrap:wrap;font-size:15.5px !important;line-height:1.45 !important;color:var(--body) !important}
#hp .hp-res+.hp-res{margin-top:12px}
#hp .hp-res__text{flex:1 1 300px}
#hp .hp-res__text b{color:var(--ink);font-weight:700;font-family:var(--fh)}
#hp .hp-res__go{display:flex;align-items:center;gap:18px;flex:none}
#hp .hp-res__price{font-family:var(--fh);font-weight:800;font-size:16px;color:var(--ink);white-space:nowrap}
#hp .hp-res__quote{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:11px;background:var(--red);color:#fff !important;font-family:var(--fh);font-weight:800;font-size:14.5px;white-space:nowrap;transition:background-color .2s}
#hp .hp-res__quote:hover{background:var(--red2)}
#hp .hp-res--idle{color:var(--mute) !important}
.hp-js #hp .hp-res{display:none}
.hp-js #hp .hp-res.is-on{display:flex;animation:hpResIn .45s cubic-bezier(.2,.7,.2,1) both}
.hp-js #hp .hp-res+.hp-res{margin-top:0}
@keyframes hpResIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  #hp .hp-hero__copy>*{animation:hpUp .8s cubic-bezier(.2,.7,.2,1) both}
  #hp .hp-hero__copy>*:nth-child(2){animation-delay:.06s}
  #hp .hp-hero__copy>*:nth-child(3){animation-delay:.12s}
  #hp .hp-hero__copy>*:nth-child(n+4){animation-delay:.18s}
  #hp .hp-leak{animation:hpUp 1s .2s cubic-bezier(.2,.7,.2,1) both}
}
@media (prefers-reduced-motion:reduce){
  #hp .hp-line__flow,#hp .hp-node__dot,#hp .hp-node__fix,#hp .hp-node__glyph{transition:none}
  .hp-js #hp .hp-res.is-on{animation:none}
}
@keyframes hpUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hpFade{from{opacity:0}to{opacity:1}}

/* reveal on scroll */
#hp .rv{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
#hp.js .rv:not(.in){opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){#hp.js .rv:not(.in){opacity:1;transform:none}#hp .rv{transition:none}}

/* ================= PILLARS ================= */
#hp .hp-more{background:var(--bg)}
#hp .hp-pillars{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:22px}
#hp .hp-pillar{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:32px 30px 30px;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start;transition:border-color .25s}
#hp .hp-pillar:hover{border-color:var(--line2)}
#hp .hp-pillar::before{content:"";position:absolute;left:30px;right:30px;top:-1px;height:2px;background:var(--red)}
#hp .hp-pillar__no{font-family:var(--fh);font-weight:900;font-size:13px;letter-spacing:.14em;color:var(--red2)}
#hp .hp-pillar__no{display:block;line-height:16px}
#hp .hp-pillar h3{font-size:25px;margin:14px 0 14px;align-self:start}
#hp .hp-pillar>p{font-size:16px;margin-bottom:24px}
#hp .hp-pillar__vis{display:flex;flex-direction:column;margin-bottom:26px}
#hp .hp-pillar .hp-more-link{align-self:end;justify-self:start}
#hp .hp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
#hp .hp-chips li{font-family:var(--fh);font-weight:700;font-size:13px;color:var(--ink);padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
#hp .hp-admock{background:#F7F8FA;border-radius:14px;padding:14px 16px 16px;margin-bottom:0;display:flex;flex-direction:column;gap:3px;font-family:Arial,sans-serif}
#hp .hp-admock__sp{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:#202124}
#hp .hp-admock__sp .hp-ex{color:#5f6368;border-color:#dadce0}
#hp .hp-admock__url{font-size:12.5px;color:#4d5156}
#hp .hp-admock b{font-size:17px;line-height:1.3;color:#1a0dab;font-weight:400;margin:2px 0}
#hp .hp-admock__d{font-size:13px;line-height:1.45;color:#4d5156}
#hp .hp-admock .hp-chips{margin:12px 0 0;gap:6px}
#hp .hp-admock .hp-chips li{background:#fff;border-color:#dadce0;color:#202124;font-size:12px;padding:6px 10px}
#hp .hp-pillar__note{font-size:14px !important;color:var(--mute) !important;line-height:1.5 !important}
#hp .hp-switch{display:inline-flex;padding:4px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);margin-bottom:16px;align-self:flex-start}
#hp .hp-switch button{border:0;background:transparent;color:var(--mute);font-weight:800;font-size:14px;padding:10px 16px;border-radius:9px;cursor:pointer;transition:background-color .2s,color .2s}
#hp .hp-switch button.is-on{background:var(--red);color:#fff}
#hp .hp-switch__out{min-height:92px;margin-bottom:14px}
#hp .hp-ticks{display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid var(--line)}
#hp .hp-ticks li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--body);line-height:1.4}
#hp .hp-ticks .hp-ic{color:var(--green);width:15px;height:15px;margin-top:2px}
#hp .hp-switch__out p{display:flex;flex-direction:column;gap:4px}
#hp [hidden]{display:none !important}
#hp .hp-switch__out b{font-family:var(--fh);font-weight:900;font-size:38px;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
#hp .hp-switch__out span{font-size:14px;line-height:1.5;color:var(--mute)}

/* ================= PRICES ================= */
#hp .hp-prices{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#hp .hp-board{border-top:1px solid var(--line2);counter-reset:b}
#hp .hp-board li{display:grid;grid-template-columns:minmax(0,1fr) 210px 264px;gap:32px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);transition:background-color .2s}
#hp .hp-board li{position:relative}
#hp .hp-board li>*{position:relative;z-index:1}
#hp .hp-board li::before{content:"";position:absolute;inset:-1px -24px;border-radius:16px;background:rgba(255,255,255,.05);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:0}
#hp .hp-board li:hover::before,#hp .hp-board li:focus-within::before{opacity:1}
#hp .hp-board h3{font-size:24px;margin-bottom:6px}
#hp .hp-board__svc p{font-size:15.5px;max-width:58ch}
#hp .hp-board__price{display:flex;align-items:baseline;gap:6px;font-family:var(--fh);color:var(--ink);justify-content:flex-end}
#hp .hp-board__price b{font-size:52px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
#hp .hp-board__price small{font-size:14px;font-weight:700;color:var(--mute)}
#hp .hp-board__go{justify-self:end;width:264px;justify-content:space-between;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:800;font-size:14.5px;color:var(--ink);padding:14px 18px;border-radius:12px;border:1px solid var(--line2);transition:background-color .2s,border-color .2s,gap .2s}
#hp .hp-board__go:hover{background:var(--red);border-color:var(--red)}
#hp .hp-prices__foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}
#hp .hp-prices__foot p{font-size:15px;color:var(--mute)}
#hp .hp-prices__foot p a{color:var(--gold);font-weight:700}
#hp .hp-inline-call{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:800;font-size:16px;color:var(--ink)}
#hp .hp-inline-call .hp-ic{color:var(--red2)}

/* ================= TOOLS ================= */
#hp .hp-tools{background:var(--bg)}
#hp .hp-tools::before{content:"";position:absolute;width:900px;height:900px;left:-420px;top:120px;border-radius:50%;border:1px solid var(--line);pointer-events:none}
#hp .hp-journey{display:grid;grid-template-columns:1fr;gap:14px}
#hp .hp-journey__tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:relative;counter-reset:hpstep}
#hp .hp-journey__tabs::before{content:none}
#hp .hp-journey__stage{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:30px 30px 22px;overflow:hidden}
#hp .hp-step{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:34px;align-items:start;min-height:520px}
#hp .hp-step__copy{padding-top:8px}
#hp .hp-step__copy>img{width:48px;height:48px;margin-bottom:16px}
#hp .hp-step__copy h3{font-size:26px;margin-bottom:14px}
#hp .hp-step__copy h3 small{display:block;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--mute);margin-top:8px}
#hp .hp-step__copy p{font-size:16px;margin-bottom:22px}
#hp .hp-frame{margin:0;position:relative;border-radius:16px;background:#0B0E1E;border:1px solid var(--line2);overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.3)}
#hp .hp-frame__img{overflow:hidden}
#hp .hp-frame__img img{width:100%;height:auto;display:block}
#hp .hp-frame__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#0A0C19;border-bottom:1px solid var(--line)}
#hp .hp-frame__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
#hp .hp-frame__bar span{margin-left:12px;font-family:var(--fh);font-weight:600;font-size:12px;color:var(--mute);background:rgba(255,255,255,.05);padding:4px 14px;border-radius:7px}
#hp .hp-step .hp-frame .hp-frame__img{aspect-ratio:4/3}
#hp .hp-step .hp-frame .hp-frame__img img,#hp .hp-step .hp-frame .hp-frame__img picture{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
#hp .hp-journey__note{font-size:13px !important;color:var(--mute) !important;margin-top:18px !important;padding-top:14px;border-top:1px solid var(--line)}


/* ---- pillar 02: each tool on its own glass tile, linking to its page ---- */
#hp .hp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
#hp .hp-tiles a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;min-height:86px;padding:12px 8px 11px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);text-align:center;transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s,border-color .25s,box-shadow .25s}
#hp .hp-tiles a:hover,#hp .hp-tiles a:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px -14px rgba(0,0,0,.8),0 0 22px -6px rgba(224,49,63,.35)}
#hp .hp-tiles a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#hp .hp-tiles img{width:32px;height:32px}
#hp .hp-tiles span{font-family:var(--fh);font-weight:700;font-size:13px;line-height:1.2;color:var(--ink);white-space:nowrap}
@media (min-width:600px) and (max-width:1100px){#hp .hp-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ---- pillar 01: the four services, each a link with its outcome and starting price ---- */
#hp .hp-svcs{display:flex;flex-direction:column;gap:8px;margin:0}
#hp .hp-svcs a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:66px;padding:10px 14px 10px 12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s,border-color .25s,box-shadow .25s}
#hp .hp-svcs a:hover,#hp .hp-svcs a:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px -14px rgba(0,0,0,.8),0 0 22px -6px rgba(224,49,63,.35)}
#hp .hp-svcs a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#hp .hp-svc__ic{width:34px;height:34px;padding:7px;border-radius:10px;background:rgba(224,49,63,.14);color:#FF8A94}
#hp .hp-svc__t{display:flex;flex-direction:column;gap:2px;min-width:0}
#hp .hp-svc__t b{font-family:var(--fh);font-weight:800;font-size:14.5px;color:var(--ink);line-height:1.2}
#hp .hp-svc__t small{font-size:13px;color:var(--mute);line-height:1.35}
#hp .hp-svc__p{font-family:var(--fh);font-weight:700;font-size:13px;color:var(--mute);white-space:nowrap;text-align:right}
#hp .hp-svc__p small{display:block;font-size:12px;font-weight:700;color:var(--mute);line-height:1.2}
#hp .hp-svc__p b{font-size:18px;font-weight:900;color:var(--ink);line-height:1.1}
#hp .hp-svc__p i{font-style:normal;font-size:13px;color:var(--mute)}


/* ---- pillar 01: the people you deal with, James, and everything we run ---- */
#hp .hp-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
#hp .hp-people li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;transition:opacity .25s ease,transform .25s ease}
#hp .hp-people li.is-swap{opacity:0;transform:scale(.92)}
#hp .hp-people img{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.18);margin-bottom:6px;background:var(--panel)}
#hp .hp-people li.is-ai img{border-color:#7C5CFF;box-shadow:0 0 18px -4px rgba(124,92,255,.7)}
#hp .hp-people i{position:absolute;top:40px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--fh);font-weight:800;font-size:10.5px;letter-spacing:.04em;color:#fff;background:#6D4BFF;padding:2px 7px;border-radius:999px;white-space:nowrap}
#hp .hp-people b{font-family:var(--fh);font-weight:800;font-size:13.5px;color:var(--ink)}
#hp .hp-people span{font-size:12px;color:var(--mute);line-height:1.25;min-height:2.5em;max-width:92px}
#hp .hp-james{margin-top:14px !important;padding:11px 14px;border-radius:12px;background:rgba(109,75,255,.12);border:1px solid rgba(124,92,255,.3);font-size:14px !important;line-height:1.45 !important;color:var(--body) !important}
#hp .hp-james b{color:var(--ink)}
#hp .hp-runs__h{margin-top:18px !important;font-family:var(--fh);font-weight:800;font-size:12px !important;letter-spacing:.14em;text-transform:uppercase;color:var(--mute) !important}
#hp .hp-runs{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin:8px 0 0}
#hp .hp-runs a{display:flex;align-items:center;gap:8px;padding:3px 0;font-family:var(--fh);font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;border-bottom:1px solid transparent}
#hp .hp-runs a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--red2)}
#hp .hp-runs a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}

/* ---- tools tour: real tabs ---- */
#hp .hp-journey__tabs button{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:11px;align-items:center;text-align:left;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 10px;cursor:pointer;color:var(--mute);font-family:var(--fh);transition:background-color .2s,border-color .2s,color .2s,transform .2s}
#hp .hp-journey__tabs button{counter-increment:hpstep}
#hp .hp-journey__tabs button::before{content:counter(hpstep);grid-row:1/3;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;background:var(--bg);border:1px solid var(--line2);color:var(--ink);transition:background-color .2s,border-color .2s}
#hp .hp-journey__tabs button b{font-size:15.5px;font-weight:800;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hp .hp-journey__tabs button::after{content:attr(data-tool);font-size:13px;font-weight:600;font-family:var(--fb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:2}
#hp .hp-journey__tabs button:hover{color:var(--ink);border-color:var(--line2);transform:translateY(-1px)}
#hp .hp-journey__tabs button[aria-selected=true]{background:var(--panel);border-color:rgba(224,49,63,.55);color:var(--ink)}
#hp .hp-journey__tabs button[aria-selected=true]::before{background:var(--red);border-color:var(--red);color:#fff}
#hp .hp-journey__tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* the six panels share one grid cell: the tallest sets the height, so switching never jumps; the change is a crossfade */
#hp .hp-journey__panels{display:grid}
#hp .hp-journey__panels>.hp-step{grid-area:1/1;transition:opacity .35s ease,visibility 0s linear 0s}
#hp .hp-journey__panels>.hp-step[hidden]{display:grid !important;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}
@media (prefers-reduced-motion:reduce){#hp .hp-journey__panels>.hp-step,#hp .hp-journey__panels>.hp-step[hidden]{transition:none}}

/* ---- hero quote step (a native dialog: focus stays inside, Esc closes) ---- */
#hp .hp-q{width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:0;border:1px solid var(--line2);border-radius:24px;background:#12172F;color:var(--body);box-shadow:0 60px 140px -40px rgba(0,0,0,.95);overflow:auto}
#hp .hp-q::backdrop{background:rgba(6,8,18,.72);backdrop-filter:blur(4px)}
#hp .hp-q[open]{animation:hpQIn .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes hpQIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#hp .hp-q[open]{animation:none}}
#hp .hp-q__form{position:relative;padding:30px 32px 26px;display:flex;flex-direction:column;gap:16px}
#hp .hp-q__close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
#hp .hp-q__close:hover{background:rgba(255,255,255,.09)}
#hp .hp-q__close .hp-ic{width:16px;height:16px}
#hp .hp-q__close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#hp .hp-q__kicker{font-family:var(--fh);font-weight:800;font-size:12px !important;letter-spacing:.16em;text-transform:uppercase;color:var(--red2) !important;margin:0 !important}
#hp .hp-q__title span{display:inline;color:inherit}
#hp .hp-q__title{font-size:28px !important;font-weight:800;letter-spacing:-.02em;max-width:none;margin:-6px 48px 0 0 !important}
#hp .hp-q__sub{font-size:15px !important;color:var(--mute) !important;margin-top:-8px !important}
#hp .hp-q__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
#hp .hp-q .hp-field{display:flex;flex-direction:column;gap:7px;margin:0}
#hp .hp-q .hp-field--wide{grid-column:1/-1}
#hp .hp-q legend{border:0 !important;text-decoration:none !important;box-shadow:none !important;float:none}
#hp .hp-q label,#hp .hp-q legend{display:block;font-family:var(--fh);font-weight:700;font-size:13px;line-height:16px;color:var(--ink);margin:0;padding:0}
#hp .hp-q label small{font-weight:500;color:var(--mute)}
#hp .hp-q input[type=text],#hp .hp-q input[type=tel],#hp .hp-q input[type=email],#hp .hp-q select{display:block;width:100%;height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);padding:0 14px;font-family:var(--fb);font-size:16px;margin:0;box-shadow:none;-webkit-appearance:none;appearance:none}
#hp .hp-q select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23F4F1EA' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
#hp .hp-q select option{background:#12172F;color:#F4F1EA}
#hp .hp-q input::placeholder{color:rgba(244,241,234,.38)}
#hp .hp-q input:focus,#hp .hp-q select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
#hp .hp-q [aria-invalid=true]{border-color:#FF7A85 !important}
#hp .hp-q__err{font-size:13px !important;line-height:1.3 !important;color:#FF9AA2 !important;margin:0 !important}
#hp .hp-q__err:empty{display:none}
#hp .hp-seg{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
#hp .hp-seg legend{width:100%;margin-bottom:7px}
#hp .hp-seg label{position:relative;flex:1 1 0;min-width:0;cursor:pointer}
#hp .hp-seg input{position:absolute;opacity:0;pointer-events:none}
#hp .hp-seg span{display:flex;align-items:center;justify-content:center;height:48px;padding:0 6px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);font-family:var(--fh);font-weight:700;font-size:13px;color:var(--body);text-align:center;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
#hp .hp-seg label:hover span{border-color:rgba(255,255,255,.35)}
#hp .hp-seg input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
#hp .hp-seg input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
#hp .hp-seg[aria-invalid=true] label span{border-color:#FF7A85}
#hp .hp-seg .hp-q__err{width:100%;margin-top:2px !important}
#hp .hp-seg--wide{margin-bottom:14px}
#hp .hp-q__svc{display:none}
#hp .hp-q[data-svc=ads] .hp-q__svc[data-q-for=ads],#hp .hp-q[data-svc=seo] .hp-q__svc[data-q-for=seo]{display:block}
#hp .hp-q__go{height:56px;margin-top:4px;justify-content:center;font-size:16.5px;text-transform:none;letter-spacing:0}
#hp .hp-q__go .hp-ic{width:18px;height:18px}
#hp .hp-q__msg{font-size:14.5px !important;line-height:1.5 !important;padding:12px 14px;border-radius:10px;background:rgba(127,179,255,.12);color:var(--ink) !important;border:1px solid rgba(127,179,255,.35)}
#hp .hp-q__msg.is-good{background:rgba(108,176,78,.15);border-color:rgba(108,176,78,.45)}
#hp .hp-q__go:disabled,#hp .hp-form button:disabled{opacity:.7;cursor:progress}
#hp .hp-q__fine{font-size:13px !important;color:var(--mute) !important;text-align:center;margin-top:-4px !important}
#hp .hp-q__fine a{color:var(--ink);text-decoration:underline}
@media (max-width:600px){
  #hp .hp-q{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  #hp .hp-q__form{padding:22px 16px 24px;gap:14px}
  #hp .hp-q__grid{grid-template-columns:1fr}
  #hp .hp-q__title{font-size:24px !important}
  #hp .hp-q__close{top:12px;right:12px}
}


/* ---- one quiet line under the tools tour (Brett, 13 Oct 2026: the package box was too much for the homepage) ---- */
#hp .hp-tools__inc{margin:24px 0 0 !important;font-size:14.5px !important;line-height:1.6;color:var(--mute) !important;max-width:none}


/* ---- proof: the case study and review rotators (Brett, 13 Oct 2026). One at a time, a crossfade every 7 s, paused on
   hover, focus, touch or the pause button, never moving with reduced motion. Every slide is in the HTML and they share
   one grid cell, so the box is as tall as the tallest slide from the first paint and never jumps. ---- */
#hp .hp-rot{position:relative;margin-top:48px}
#hp .hp-rot--case{padding:44px 48px 30px;border-radius:24px;background:var(--panel);border:1px solid var(--line);overflow:hidden;isolation:isolate}
#hp .hp-rot--case::before{content:"";position:absolute;left:28%;top:46%;width:900px;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(224,49,63,.16),rgba(224,49,63,0) 72%);pointer-events:none;z-index:-1}
.hp-js #hp .hp-rot__stage{display:grid}
.hp-js #hp .hp-rot__slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.hp-js #hp .hp-rot__slide.is-on{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
html:not(.hp-js) #hp .hp-rot__nav{display:none}
html:not(.hp-js) #hp .hp-rot__slide+.hp-rot__slide{margin-top:40px}
#hp .hp-cs{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
#hp .hp-cs__kick{font-family:var(--fh);font-weight:800;font-size:12px !important;letter-spacing:.16em;text-transform:uppercase;color:var(--red2) !important;margin:0 0 14px !important}
#hp .hp-cs__h{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 24px !important;font-size:inherit !important}
#hp .hp-cs__h span{display:block}
#hp .hp-cs__who{font-family:var(--fh);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--body);font-weight:700}
#hp .hp-cs__fig{font-family:var(--fh);font-size:clamp(76px,10vw,136px);font-weight:900;line-height:.92;letter-spacing:-.045em;color:var(--ink);background:linear-gradient(180deg,#FFFFFF 30%,#F07A84 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:4px}
#hp .hp-cs__rest{font-family:var(--fh);font-size:clamp(20px,2vw,27px);line-height:1.25;color:var(--ink);font-weight:700;max-width:30ch;letter-spacing:-.01em}
#hp .hp-cs__go{font-family:var(--fh);font-weight:700;font-size:15px;line-height:1.7;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:6px}
#hp .hp-cs__go .hp-ic{width:16px;height:16px;vertical-align:-3px;margin-left:4px;transition:transform .25s}
#hp .hp-cs__go::after{content:"";position:absolute;inset:0;border-radius:18px}
#hp .hp-cs:hover .hp-cs__go .hp-ic{transform:translateX(3px)}
#hp .hp-cs__go:focus-visible{outline:none}
#hp .hp-cs__go:focus-visible::after{outline:2px solid var(--blue);outline-offset:4px}
#hp .hp-cs__img{display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
#hp .hp-cs__img img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
#hp .hp-rot__nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px}
#hp .hp-rot__btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;padding:0;transition:background-color .2s,border-color .2s}
#hp .hp-rot__btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
#hp .hp-rot__btn:focus-visible,#hp .hp-rot__dot:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#hp .hp-rot__btn .hp-ic{width:16px;height:16px}
#hp .hp-ic--back{transform:rotate(180deg)}
#hp .hp-rot__dots{display:flex;gap:2px;margin:0 6px}
#hp .hp-rot__dot{width:26px;height:40px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer;display:inline-grid;place-items:center}
#hp .hp-rot__dot::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.28);transition:width .3s,background-color .3s}
#hp .hp-rot__dot:hover::before{background:rgba(255,255,255,.55)}
#hp .hp-rot__dot[aria-current="true"]::before{width:22px;background:var(--red2)}
#hp .hp-rot__pz{display:block;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
#hp .hp-rot__pause[aria-pressed="true"] .hp-rot__pz{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;margin-left:3px}
#hp .hp-rot__all{text-align:center;margin:20px 0 0 !important}
#hp .hp-rot--rev{max-width:940px;margin:64px auto 0;text-align:center}
#hp .hp-rv__rating{display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px !important;color:var(--body) !important;margin:0 0 26px !important}
#hp .hp-rv__rating b{color:var(--ink);font-family:var(--fh)}
#hp .hp-rv{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#hp .hp-rv .hp-stars{margin-bottom:18px}
#hp .hp-rv blockquote{margin:0;padding:0;border:0;background:none;font-style:normal}
#hp .hp-rv blockquote::before,#hp .hp-rv blockquote::after{content:none}
#hp .hp-rv blockquote p{font-family:var(--fh);font-weight:800;font-size:clamp(22px,2.6vw,34px) !important;line-height:1.25 !important;letter-spacing:-.01em;color:var(--ink) !important;margin:0;text-wrap:balance;font-style:normal}
#hp .hp-rv blockquote p::before{content:"\201C";color:var(--red2)}
#hp .hp-rv blockquote p::after{content:"\201D";color:var(--red2)}
#hp .hp-rv figcaption{margin-top:20px;font-family:var(--fh);font-weight:700;font-size:15px;color:var(--body)}
@media (max-width:900px){
  #hp .hp-cs{grid-template-columns:1fr;gap:22px}
  #hp .hp-cs__img{order:-1}
  #hp .hp-rot--case{padding:22px 18px 18px}
  #hp .hp-rot--rev{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){ .hp-js #hp .hp-rot__slide{transition:none} }


/* The 2026 header (header-2026.css, 13 Oct 2026) is transparent over the old homepage hero through
   "#site-header:has(+ .gam-hero)". This page's hero is #hp, so the same two rules, scoped to this page only. */
html body #site-header#site-header:has(+ #hp){background:transparent !important;box-shadow:none !important}
html body #site-header#site-header:has(+ #hp)::before,html body #site-header#site-header:has(+ #hp)::after{opacity:0 !important}

/* ================= MISSION CONTROL ================= */
#hp .hp-mc{background:var(--bg2);border-top:1px solid var(--line);overflow:hidden}
#hp .hp-mc::before{content:"";position:absolute;left:50%;top:46%;width:1100px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(194,34,50,.22),rgba(194,34,50,0));pointer-events:none}
#hp .hp-mc__stage{position:relative;padding:0 0 70px;max-width:1080px}
#hp .hp-mc__main{transform:perspective(2200px) rotateX(5deg);transform-origin:50% 100%;box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.04),0 0 90px -20px rgba(194,34,50,.35)}
#hp .hp-mc__inset{position:absolute;right:-150px;bottom:0;width:46%;box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
#hp .hp-mc__points{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line2)}
#hp .hp-mc__points b{display:block;font-family:var(--fh);font-weight:800;font-size:17px;color:var(--ink);margin-bottom:6px}
#hp .hp-mc__points span{font-size:15px;color:var(--mute);line-height:1.5}
#hp .hp-mc__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:34px !important}
#hp .hp-mc__foot span{font-size:13px;color:var(--mute)}
@media (prefers-reduced-motion:no-preference){
  #hp .hp-mc__main.rv,#hp .hp-mc__stage.rv{transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
}

/* ================= PROOF ================= */
#hp .hp-proof{background:var(--bg2);border-top:1px solid var(--line)}
#hp .hp-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);margin-bottom:56px}
#hp .hp-stats li{padding:30px 26px 30px 0;display:flex;flex-direction:column;gap:8px}
#hp .hp-stats li+li{padding-left:26px;border-left:1px solid var(--line)}
#hp .hp-stats b{font-family:var(--fh);font-weight:900;font-size:clamp(36px,3.6vw,54px);letter-spacing:-.03em;color:var(--ink);line-height:1}
#hp .hp-stats span{font-size:15px;color:var(--mute);line-height:1.45}
#hp .hp-proof .hp-center .hp-more-link{margin:0 14px}

/* ================= TEAM ================= */
#hp .hp-team{background:var(--bg)}
#hp .hp-team__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
#hp .hp-team__copy .hp-more-link{margin-top:26px}
#hp .hp-faces{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 18px}
#hp .hp-faces li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
#hp .hp-faces img{width:88px;height:88px;border-radius:50%;border:2px solid var(--line2);margin-bottom:10px;background:var(--panel)}
#hp .hp-faces li.is-ai img{border-color:#7C5CFF}
#hp .hp-faces b{font-family:var(--fh);font-weight:800;font-size:15px;color:var(--ink)}
#hp .hp-faces span{font-size:13px;color:var(--mute);line-height:1.35}
#hp .hp-premium{margin-top:72px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:26px 30px;border-radius:20px;background:#17150F;border:1px solid rgba(201,168,76,.45);transition:border-color .25s}
#hp .hp-premium:hover{border-color:var(--gold)}
#hp .hp-premium__tag{font-family:var(--fh);font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,168,76,.5);padding:9px 14px;border-radius:8px}
#hp .hp-premium__txt{font-size:16px;color:rgba(244,241,234,.8);line-height:1.55}
#hp .hp-premium__txt b{color:var(--ink)}
#hp .hp-premium__go{font-family:var(--fh);font-weight:800;font-size:15px;color:var(--gold);display:flex;align-items:center;gap:8px;white-space:nowrap}

/* ================= QUESTIONS ================= */
#hp .hp-ask{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#hp .hp-qs{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:1px solid var(--line2)}
#hp .hp-qs li{padding:24px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
#hp .hp-qs .q{font-family:var(--fh);font-weight:800;font-size:19px;color:var(--ink);line-height:1.35}
#hp .hp-qs .a{font-size:15.5px;display:flex;gap:14px;align-items:baseline}
#hp .hp-qs .a a{color:var(--ink);font-weight:700}
#hp .hp-qs .a>span{flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-weight:900;font-size:13px;padding:5px 11px;border-radius:999px;width:68px;justify-content:center}
#hp .hp-qs .yes{background:rgba(61,220,151,.13);color:var(--green)}
#hp .hp-qs .no{background:rgba(127,179,255,.13);color:var(--blue)}
#hp .hp-qs .a .hp-ic{width:13px;height:13px}

/* ================= FAQ ================= */
#hp .hp-faq{background:var(--bg)}
#hp .hp-faq__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:start}
#hp .hp-faq__grid h2{margin-bottom:26px}
#hp .hp-faq__list details{border-bottom:1px solid var(--line)}
#hp .hp-faq__list details:first-child{border-top:1px solid var(--line)}
#hp .hp-faq__list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--fh);font-weight:800;font-size:18px;color:var(--ink)}
#hp .hp-faq__list summary::-webkit-details-marker{display:none}
#hp .hp-faq__list summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--red2);border-bottom:2px solid var(--red2);transform:rotate(45deg) translateY(-4px);transition:transform .25s}
#hp .hp-faq__list details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
#hp .hp-faq__list details p{padding:0 40px 24px 0;font-size:16px}

/* ================= FINAL ================= */
#hp .hp-final{background:var(--bg2);overflow:hidden;border-top:1px solid var(--line)}
#hp .hp-final__sky{position:absolute;inset:0;background:url(/wp-content/uploads/2025/11/BG-large-2-1-scaled.webp) 70% 40%/cover no-repeat;opacity:.55;transform:scaleX(-1)}
#hp .hp-final__sky::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#0A0D1D 0%,rgba(10,13,29,.88) 45%,rgba(10,13,29,.35) 100%)}
#hp .hp-final__grid{display:grid;grid-template-columns:1fr minmax(0,520px);gap:64px;align-items:center}
#hp .hp-final h2{font-size:clamp(44px,5vw,72px);font-weight:900;letter-spacing:-.035em}
#hp .hp-bigcall{display:inline-flex;align-items:center;gap:16px;margin-top:34px;padding:20px 30px 20px 24px;border-radius:18px;background:var(--red);color:#fff;box-shadow:0 18px 50px -14px var(--redglow);transition:background-color .2s,transform .2s}
#hp .hp-bigcall:hover{background:var(--red2);transform:translateY(-2px)}
#hp .hp-bigcall .hp-ic{width:30px;height:30px}
#hp .hp-bigcall small{display:block;font-family:var(--fh);font-weight:700;font-size:13px;opacity:.85;margin-bottom:6px}
#hp .hp-bigcall b{display:block;font-family:var(--fh);font-weight:900;font-size:34px;letter-spacing:.01em;line-height:1}
#hp .hp-final__alt{margin-top:28px;display:flex;flex-direction:column;gap:12px}
#hp .hp-final__alt a{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:700;font-size:16px;color:var(--ink)}
#hp .hp-final__alt .hp-ic{color:var(--red2)}
#hp .hp-final__alt a:hover{text-decoration:underline;text-decoration-color:var(--red)}
#hp .hp-form{background:var(--panel);border:1px solid var(--line2);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
#hp .hp-form__head h3{font-size:26px;margin:0 0 6px}
#hp .hp-form__head p{font-size:15px;color:var(--mute)}
#hp .hp-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
#hp .hp-field{display:flex;flex-direction:column;gap:8px;margin:0}
#hp .hp-field label,#hp .hp-field__label{display:block;font-family:var(--fh);font-weight:700;font-size:13px;line-height:16px;height:16px;color:var(--ink);margin:0;padding:0;border:0;text-decoration:none}
#hp .hp-form input[type=text],#hp .hp-form input[type=tel],#hp .hp-form input[type=email],#hp .hp-form select{display:block;width:100%;height:50px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);padding:0 14px;font-family:var(--fb);font-size:16px;line-height:48px;margin:0;box-shadow:none;-webkit-appearance:none;appearance:none}
#hp .hp-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23F4F1EA' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
#hp .hp-form input::placeholder{color:rgba(244,241,234,.38)}
#hp .hp-form input:focus,#hp .hp-form select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
#hp .hp-form .is-bad{border-color:#FF7A85 !important}
#hp .hp-needs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#hp .hp-needs label{position:relative;display:block;height:auto;cursor:pointer;margin:0}
#hp .hp-needs input{position:absolute;opacity:0;pointer-events:none}
#hp .hp-needs span{display:flex;align-items:center;justify-content:center;height:42px;padding:0 8px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);font-family:var(--fh);font-weight:700;font-size:13px;color:var(--body);text-align:center;transition:background-color .2s,border-color .2s,color .2s}
#hp .hp-needs label:hover span{border-color:rgba(255,255,255,.35)}
#hp .hp-needs input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
#hp .hp-needs input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
#hp .hp-form .hp-btn--red{height:58px;margin-top:4px}
#hp .hp-form__msg{font-size:14.5px !important;padding:12px 14px;border-radius:10px;background:rgba(127,179,255,.12);color:var(--ink) !important;border:1px solid rgba(127,179,255,.35)}
#hp .hp-form__fine{font-size:13px !important;color:var(--mute) !important;text-align:center;margin-top:-4px !important}


/* focus */
#hp a:focus-visible,#hp button:focus-visible,#hp summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ================= RESPONSIVE ================= */
@media (max-width:1280px){
}
@media (max-width:1100px){
  #hp .hp-sec{padding:88px 0}
  #hp .hp-hero,.hp-js #hp .hp-hero{min-height:0;max-height:none;padding:40px 0 56px}
  #hp .hp-hero__grid{grid-template-columns:1fr;gap:44px}
  #hp .hp-leak{max-width:680px}
  #hp h1{max-width:16ch}
  #hp .hp-pillars{grid-template-columns:1fr;grid-template-rows:none;row-gap:22px}
  #hp .hp-pillar{grid-row:auto;display:flex;flex-direction:column}
  #hp .hp-pillar .hp-more-link{align-self:flex-start}
  #hp .hp-pillar>p{margin-bottom:18px}
  #hp .hp-mc__inset{right:-20px;width:52%}
  #hp .hp-mc__points{grid-template-columns:1fr 1fr}
  #hp .hp-step{min-height:0}
  #hp .hp-board li{grid-template-columns:minmax(0,1fr) 170px;gap:12px 24px}
  #hp .hp-board__go{grid-column:1/-1;justify-self:start}
  #hp .hp-journey{grid-template-columns:1fr}
  #hp .hp-journey__tabs{display:flex;flex-direction:row;overflow-x:auto;gap:8px;padding:2px 2px 8px;scrollbar-width:none;scroll-snap-type:x proximity}
  #hp .hp-journey__tabs::-webkit-scrollbar{display:none}
  #hp .hp-journey__tabs button{flex:none;scroll-snap-align:start;grid-template-columns:30px auto;padding:10px 14px 10px 10px}
  #hp .hp-journey__tabs button::before{width:30px;height:30px;font-size:13px}
  #hp .hp-journey__tabs::before{display:none}
  #hp .hp-step{grid-template-columns:1fr}
  #hp .hp-stats{grid-template-columns:1fr 1fr}
  #hp .hp-stats li:nth-child(3){padding-left:0;border-left:0}
  #hp .hp-stats li:nth-child(n+3){border-top:1px solid var(--line)}
  #hp .hp-team__grid{grid-template-columns:1fr;gap:44px}
  #hp .hp-qs{grid-template-columns:1fr}
  #hp .hp-faq__grid{grid-template-columns:1fr;gap:20px}
  #hp .hp-final__grid{grid-template-columns:1fr;gap:48px}
  #hp .hp-head--split{grid-template-columns:1fr;gap:0}
  #hp .hp-head--split .hp-lead{margin-top:20px}
  #hp .hp-premium{grid-template-columns:1fr;gap:14px}
}
@media (max-width:700px){
  #hp .hp-wrap{padding:0 16px}
  #hp .hp-hero{padding:26px 0 40px}
  #hp .hp-xs-hide{display:none}
  #hp .hp-leak__q span{display:block;margin:6px 0 0}
  #hp .hp-eyebrow{font-size:13px;letter-spacing:.06em;margin-bottom:16px}
  #hp h1{font-size:40px}
  #hp .hp-hero__sub{font-size:17px;margin-top:16px}
  #hp .hp-hero__actions{flex-direction:column;align-items:stretch;gap:14px;margin-top:24px}
  #hp .hp-btn--call{justify-content:center;height:66px}
  #hp .hp-hero__prices{align-self:center}
  #hp .hp-hero__trust{margin-top:20px !important;font-size:13px !important;justify-content:center}
  #hp .hp-hero__grid{gap:28px}
  #hp .hp-leak{padding:22px 14px 18px;border-radius:20px}
  #hp .hp-leak__q{font-size:20px !important;text-align:center}
  #hp .hp-line{margin:24px 0 18px}
  #hp .hp-line__track{left:24px;right:24px;top:24px}
  #hp .hp-node{width:48px}
  #hp .hp-node__dot{width:48px;height:48px}
  #hp .hp-node__glyph{width:20px;height:20px}
  #hp .hp-node__fix{width:26px;height:26px;margin:-13px 0 0 -13px}
  #hp .hp-node__label{font-size:12.5px}
  #hp .hp-line__nodes .hp-node:nth-child(even) .hp-node__label{margin-top:21px}
  #hp .hp-node__btn,#hp .hp-node--goal{gap:9px}
  #hp .hp-results{min-height:var(--resHm,150px);padding-top:16px}
  #hp .hp-res{flex-direction:column;align-items:stretch;gap:12px}
  #hp .hp-res__text{flex:none}
  #hp .hp-res__go{justify-content:space-between}
  #hp .hp-sec{padding:68px 0}
  #hp h2{font-size:31px}
  #hp .hp-lead{font-size:17px}
  #hp .hp-head{margin-bottom:38px}
  #hp .hp-pillar{padding:28px 22px 24px}
  #hp .hp-board li{grid-template-columns:1fr;gap:10px}
  #hp .hp-board li::before{inset:-4px -10px}
  #hp .hp-board__price{justify-content:flex-start}
  #hp .hp-board__price b{font-size:40px}
  #hp .hp-board__go{width:100%}
  #hp .hp-journey__stage{padding:22px;min-height:0}
  #hp .hp-stats li,#hp .hp-stats li+li{padding:22px 12px 22px 0}
  #hp .hp-stats li:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
  #hp .hp-faces{grid-template-columns:repeat(4,1fr);gap:20px 8px}
  #hp .hp-faces img{width:64px;height:64px}
  #hp .hp-faces span{font-size:11.5px}
  #hp .hp-qs .a{flex-direction:column;gap:8px}
  #hp .hp-form{padding:24px 18px}
  #hp .hp-form__grid{grid-template-columns:1fr}
  #hp .hp-needs{grid-template-columns:1fr 1fr}
  #hp .hp-mc__stage{padding-bottom:0}
  #hp .hp-mc__main{transform:none}
  #hp .hp-mc__inset{display:none}
  #hp .hp-mc__points{grid-template-columns:1fr;gap:18px}
  #hp .hp-mc__foot span{width:100%}
  #hp .hp-bigcall b{font-size:28px}
  #hp .hp-preview-flag{bottom:auto;top:44px;font-size:10px;padding:6px 11px}
}