/* The new hero: live phone + 'try it now' box. Used by the homepage and every 'website for...' page. */

/* ================= Nov 2026: new homepage top (hero builder, work strip, price punch, steps, trust) ================= */
.hx-hero{padding-block:0;position:relative;overflow:hidden;overflow:clip;color:#fff;background:linear-gradient(180deg,#0A2A5E 0%,#071f48 100%)}
.hx-bg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hx-glow{position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(247,147,30,.32),rgba(247,147,30,0) 65%);top:-230px;inset-inline-end:-190px;pointer-events:none}
.hx-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"copy stage" "builder stage";column-gap:40px;row-gap:22px;align-items:center;padding-block:36px 56px}
.hx-copy{grid-area:copy;align-self:end;min-width:0}
.hx-builder-wrap{grid-area:builder;align-self:start;min-width:0}
.hx-stage{grid-area:stage;min-width:0;display:grid;justify-items:center;gap:14px}
@media (max-width:900px){.hx-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "builder" "stage";row-gap:18px;padding-block:28px 40px}.hx-cta{display:none}.hx-builder{max-width:none}}
.hx-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:6px 12px;border-radius:999px;font-size:13.5px;color:#FFCF7A}
.hx-badge i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18);flex:none}
.hx-h1{font-size:clamp(34px,5vw,62px);font-weight:700;line-height:1.18;margin:16px 0 14px;letter-spacing:-.01em;color:#fff}
.hx-rot{display:inline-block;position:relative;color:var(--pin);white-space:nowrap}
.hx-rot>span{display:inline-block}
.hx-rot.swap>span{animation:hxWord .5s cubic-bezier(.2,.8,.2,1)}
.hx-rot::after{content:"";position:absolute;inset-inline:0;bottom:.04em;height:.1em;background:var(--pin);border-radius:4px;opacity:.4}
@keyframes hxWord{from{transform:translateY(.4em);opacity:0}to{transform:none;opacity:1}}
.hx-lead{font-size:clamp(17px,1.6vw,20px);color:#D7DDEF;max-width:34em;margin:0}
.hx-lead b{color:#fff}
.hx-builder{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:18px;max-width:540px}
.hx-builder label{display:block;font-size:14px;color:#B7C4DD;margin-bottom:6px;font-weight:600}
.hx-builder input{width:100%;font:500 17px var(--font-body);color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:12px 14px;min-height:48px}
.hx-builder input::placeholder{color:#8F9DBE}
.hx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.hx-chip{border:1px solid rgba(255,255,255,.24);background:transparent;color:#E6EAF6;border-radius:999px;padding:8px 14px;min-height:42px;font:500 14.5px var(--font-body);cursor:pointer;transition:background .2s,border-color .2s}
.hx-chip[aria-pressed="true"]{background:var(--pin);color:var(--pin-ink);border-color:var(--pin);font-weight:700}
.hx-chip:hover{border-color:var(--pin)}
.hx-cta-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.hx-cta{display:inline-flex;align-items:center;gap:10px;background:var(--pin);color:var(--pin-ink);font:700 17px var(--font-display);border-radius:14px;padding:15px 22px;text-decoration:none;box-shadow:0 10px 30px -8px rgba(247,147,30,.6);transition:transform .2s;min-height:52px}
.hx-cta:hover{transform:translateY(-2px)}
.hx-cta svg{width:22px;height:22px;flex:none}
.hx-fine{font-size:13.5px;color:#A9B6D2}
.hx-where{margin-top:12px;font-size:13px;color:#8F9DBE}

/* phone */
.hx-phone{position:relative;width:300px;height:610px;border-radius:46px;background:#05070f;padding:12px;box-shadow:0 60px 80px -30px rgba(0,0,0,.65),0 0 0 2px #2a3352 inset;transition:transform .25s ease-out;flex:none}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.hx-phone{animation:hxFloat 6s ease-in-out infinite;transform:perspective(1200px) rotateY(-12deg) rotateX(5deg)}}
@keyframes hxFloat{50%{translate:0 -10px}}
@media (max-width:900px){.hx-phone{zoom:.86}}
@media (max-width:380px){.hx-phone{zoom:.78}}
.hx-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:var(--s-bg,#fff);color:var(--s-ink,#222);transition:background .5s,color .5s;--s-bg:#FBF5F2;--s-ink:#2B1A26;--s-acc:#5A2347;--s-card:#F2D7D2;--s-mut:#735F6C;--s-hero:linear-gradient(140deg,#5A2347,#B5688F)}
.hx-notch{position:absolute;top:8px;left:50%;translate:-50% 0;width:96px;height:26px;border-radius:20px;background:#05070f;z-index:3}
.hx-sh{height:250px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;background:var(--s-hero);overflow:hidden;transition:background .5s}
.hx-sh .hx-pat{position:absolute;inset:0;opacity:.16;background-image:radial-gradient(#fff 1.2px,transparent 1.2px);background-size:14px 14px}
.hx-sh .hx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-sh .hx-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,12,.78) 0%,rgba(8,8,12,.28) 55%,rgba(8,8,12,.05) 100%)}
.hx-art{position:absolute;top:36px;inset-inline-end:12px;width:124px;height:124px;color:#fff;opacity:.95}
.hx-art svg{width:100%;height:100%;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.hx-tag{position:relative;align-self:flex-start;font-size:11px;background:rgba(255,255,255,.24);padding:3px 9px;border-radius:999px;margin-bottom:8px;backdrop-filter:blur(4px)}
.hx-sh h3{position:relative;font-family:var(--font-display);font-weight:700;font-size:25px;line-height:1.2;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hx-sh p{position:relative;margin:4px 0 0;font-size:12.5px;opacity:.92}
.hx-ex{position:absolute;top:40px;inset-inline-start:12px;z-index:2;font-size:10.5px;font-weight:700;background:#fff;color:#0A2A5E;border-radius:999px;padding:1px 9px}
.hx-sb{padding:14px 14px 10px}
.hx-btns{display:flex;gap:8px;margin:-18px 0 12px;position:relative}
.hx-b{flex:1;position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 6px;border:0;border-radius:12px;font:700 12.5px/1 var(--font-body);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  background:var(--s-card);background:color-mix(in srgb,var(--s-acc) 13%,#fff);color:var(--s-acc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-acc) 24%,transparent);transition:transform .12s}
.hx-b:active{transform:scale(.96)}
.hx-b svg{width:15px;height:15px;flex:none}
.hx-b>span{display:inline-flex;align-items:center}
.hx-b.wa{background:#1E8E4F;color:#fff;box-shadow:0 6px 14px -8px rgba(0,0,0,.45)}
/* speech-bubble tip above a tapped button: the wrapper is exactly the button's width, so the arrow sits on the button's centre and the bubble can spread to either side */
.hx-tipw{position:absolute;inset-inline:0;bottom:calc(100% + 9px);display:flex;flex-direction:column;align-items:center;z-index:12;pointer-events:none;font-weight:600}
.hx-b:first-child .hx-tipw{align-items:flex-start}
.hx-b:last-child .hx-tipw{align-items:flex-end}
.hx-tip{width:max-content;max-width:min(208px,62vw);padding:8px 11px;border-radius:12px;background:#111A2E;color:#fff;font-size:11.5px;line-height:1.45;text-align:center;white-space:normal;box-shadow:0 10px 24px -8px rgba(0,0,0,.55);animation:hxTipIn .18s ease-out}
.hx-tipw::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#111A2E;border-bottom:0}
@keyframes hxTipIn{from{opacity:0;transform:translateY(4px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.hx-tip{animation:none}}
.hx-sl{font-family:var(--font-display);font-weight:700;font-size:14px;margin:2px 0 8px;color:var(--s-acc)}
.hx-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--s-card);margin-bottom:8px;transition:background .5s}
.hx-th{width:46px;height:46px;border-radius:12px;background:var(--s-hero);flex:none;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.hx-th svg{width:28px;height:28px}
.hx-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-it>span:nth-child(2){min-width:0}
.hx-it b{display:block;font-size:13px;line-height:1.35;font-weight:600}
.hx-it small{font-size:11px;color:var(--s-mut)}
.hx-pr{margin-inline-start:auto;font-weight:700;font-size:13px;color:var(--s-acc);white-space:nowrap;text-align:end;line-height:1.2}
.hx-pr small{display:block;font-size:10px;font-weight:500;color:var(--s-mut)}
.hx-sf{margin:8px 0 0;font-size:11px;color:var(--s-mut);text-align:center}
.hx-stickers{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:360px}
.hx-sticker{background:#fff;color:#0A2A5E;border-radius:16px;padding:9px 14px;font-size:13px;font-weight:700;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);display:flex;gap:8px;align-items:center}
.hx-sticker em{font-style:normal;background:#E8F8EE;color:#16803D;border-radius:8px;padding:2px 7px;font-size:12px}
.hx-sticker.amber{background:var(--pin);font-family:var(--font-display)}
.hx-sticker.amber small{display:block;font:600 11px var(--font-body)}
@media (prefers-reduced-motion:no-preference){.hx-sticker{animation:hxPop 6s ease-in-out infinite}.hx-sticker.amber{animation-delay:3s}@keyframes hxPop{50%{translate:0 -6px}}}
.hx-open{color:#FFCF7A;font-weight:600;font-size:15px;text-decoration:none}
.hx-open:hover{text-decoration:underline}

/* phone-only sticky WhatsApp bar */
.hx-mbar{display:none}
@media (max-width:900px){
  .hx-mbar{display:flex;position:fixed;inset:auto 0 0;z-index:25;gap:10px;align-items:center;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(5,18,48,.95);backdrop-filter:blur(8px)}
  .hx-mbar a{flex:1;justify-content:center;min-height:48px}
  .hx-mbar small{color:#C9D1EA;font-size:12px;line-height:1.3;max-width:120px}
  .fab{display:none}
  footer{padding-bottom:84px}
}
.hx-sample-note{font-size:13px;color:var(--muted);margin-top:10px}

/* ---- phones: compact live preview above the name box, and the type chips as one swipe row ---- */

/* ---- on a trade page the hero is pinned to one trade ---- */
.hx-hero .crumbs{color:#B7C4DD;font-size:14px;margin:0 0 14px}
.hx-hero .crumbs a{color:#fff}
.hx-h1 .hx-seo{display:block;font-family:var(--font-body);font-size:clamp(15px,1.7vw,19px);font-weight:600;line-height:1.5;color:#FFCF7A;letter-spacing:0;margin-bottom:10px}
.hx-hero .hx-badge i{display:none}
.hx-hero.has-dot .hx-badge i{display:block}
.hx-mini{display:none}
@media (max-width:900px){
  .hx-mini{display:block;position:sticky;top:calc(var(--hdr,78px) + 8px);z-index:6;margin-bottom:12px;background:#05070f;padding:6px 6px 0;border-radius:26px 26px 0 0;box-shadow:0 -2px 0 2px #2a3352 inset,0 18px 34px -14px rgba(0,0,0,.65)}
  .hx-mini-screen{position:relative;border-radius:21px 21px 0 0;overflow:hidden;background:var(--s-bg,#FBF5F2);color:var(--s-ink,#2B1A26);--s-bg:#FBF5F2;--s-ink:#2B1A26;--s-acc:#5A2347;--s-card:#F2D7D2;--s-mut:#735F6C;--s-hero:linear-gradient(140deg,#5A2347,#B5688F);transition:background .4s}
  .hx-mini .hx-notch{width:64px;height:16px;top:5px}
  .hx-mini .hx-sh{height:98px;padding:9px 12px;transition:background .4s}
  .hx-mini .hx-sh h3{font-size:18px}
  .hx-mini .hx-tag{font-size:10.5px;margin-bottom:3px;padding:2px 8px}
  .hx-mini .hx-art{width:64px;height:64px;top:24px}
  .hx-mini .hx-sb{padding:0 10px 8px}
  .hx-mini .hx-btns{margin:7px 0 6px}
  .hx-mini .hx-b{height:28px;font-size:12px;border-radius:10px;gap:5px}
  .hx-mini .hx-b svg{width:13px;height:13px}
  .hx-mini .hx-tipw{bottom:calc(100% + 8px)}
  .hx-mini .hx-tip{font-size:11px;padding:7px 10px}
  .hx-mini .hx-it{margin:0;padding:6px 8px;gap:8px}
  .hx-mini .hx-th{width:38px;height:38px;border-radius:10px}
  .hx-mini .hx-th svg{width:22px;height:22px}
  .hx-mini .hx-it b{font-size:12.5px}
  .hx-mini .hx-it small{font-size:10.5px}
  .hx-mini .hx-pr{font-size:12.5px}
  /* the type chips: one row, swipe sideways */
  .hx-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:12px -18px 14px;padding:2px 18px;
    -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent)}
  [dir="ltr"] .hx-chips{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
  .hx-chips.at-end{-webkit-mask-image:none;mask-image:none}
  .hx-chips::-webkit-scrollbar{display:none}
  .hx-chip{flex:none;scroll-snap-align:start;white-space:nowrap}
  .hx-builder{padding:14px}
  .hx-builder label{margin-bottom:5px}
  .hx-where{display:none}
  /* when the box is scrolled into view, leave room for the header and the pinned preview above it */
  #hxBiz{scroll-margin-top:calc(var(--hdr,78px) + var(--minih,150px) + 26px);scroll-margin-bottom:16px}
  /* keyboard open: free the room the green bar and the first item would take */
  .hx-typing .hx-mbar{display:none}
}
@media (max-width:900px) and (max-height:700px){.hx-mini .hx-it{display:none}.hx-mini .hx-sh{height:90px}}