/* SiteHub Promo — supplied design from Claude + scoped integration. */
@property --shp-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.shp-promo {
  --o: var(--sh-orange, #FF8A00); --r: var(--sh-red, #FF3B30); --p: var(--sh-pink, #FF2D55);
  --bg: var(--sh-bg, #0B0B0B); --line: var(--sh-border, #1F1F1F);
  --t1: var(--sh-text, #F5F5F5); --t2: var(--sh-text-2, #B3B3B3); --t3: var(--sh-text-3, #8A8A8A);
  position: relative; width: 100%; max-width: 660px; border-radius: 28px; padding: 1px; isolation: isolate;
  font-family: var(--sh-font, 'Manrope', system-ui, sans-serif); color: var(--t1);
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.shp-promo.is-in { opacity: 1; transform: none; }

/* бегущий свет по рамке */
.shp-promo::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--shp-angle), rgba(255,255,255,.06) 0deg, rgba(255,255,255,.06) 250deg,
              var(--o) 290deg, var(--r) 320deg, var(--p) 345deg, rgba(255,255,255,.06) 360deg);
  animation: shp-spin 6s linear infinite;
}
@keyframes shp-spin { to { --shp-angle: 360deg; } }

.shp-promo__inner {
  position: relative; overflow: hidden; border-radius: 27px;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(255,74,30,.16), transparent 70%),
    linear-gradient(180deg, #121212, #0D0D0D);
}

/* шапка и низ карточки */
.shp-promo__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 28px; border-bottom: 1px solid var(--line); }
.shp-promo__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.shp-promo__brand img { width: 22px; height: auto; display: block; }
.shp-badge { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--o);
  background: rgba(255,138,0,.1); border: 1px solid rgba(255,138,0,.28); }
.shp-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--o); box-shadow: 0 0 0 0 rgba(255,138,0,.6);
  animation: shp-ping 1.8s ease-out infinite; }
@keyframes shp-ping { 70% { box-shadow: 0 0 0 8px rgba(255,138,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,138,0,0); } }

.shp-promo__body { padding: 30px 28px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.shp-promo__brand { text-decoration: none; }
.shp-promo__brand img { width: auto; height: 40px; }

/* «Такие акции — только у нас» */
.shp-excl { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--t2); opacity: 0; transform: translateY(8px); }
.shp-excl b { background: linear-gradient(90deg, var(--o), var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shp-excl__star { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--o);
  background: rgba(255,138,0,.12); border: 1px solid rgba(255,138,0,.3); }
.shp-excl__star svg { width: 12px; height: 12px; animation: shp-twinkle 2.4s ease-in-out infinite; }
@keyframes shp-twinkle { 50% { transform: rotate(45deg) scale(.8); } }
.is-in .shp-excl { animation: shp-pop .6s cubic-bezier(.2,.8,.2,1) .2s forwards; }

/* печать «DOAR LA NOI» у кольца */
.shp-stamp { position: absolute; right: -78px; top: -14px; width: 96px; height: 96px;
  opacity: 0; transform: scale(.4) rotate(-40deg); }
.shp-stamp.show { animation: shp-stamp .8s cubic-bezier(.2,.9,.3,1.4) forwards; }
@keyframes shp-stamp { to { opacity: 1; transform: none; } }
.shp-stamp__text { position: absolute; inset: 0; width: 100%; height: 100%; animation: shp-rotate 16s linear infinite;
  filter: drop-shadow(0 6px 18px rgba(255,59,48,.25)); }
.shp-stamp__text text { font: 800 8.4px var(--sh-font, 'Manrope', sans-serif); letter-spacing: .5px; fill: var(--o); }
@keyframes shp-rotate { to { transform: rotate(360deg); } }
.shp-stamp__icon { position: absolute; left: 50%; top: 50%; width: 30px; height: auto; transform: translate(-50%, -50%); }

/* формула: Site + Calculator = Hosting */
.shp-eq { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.shp-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px;
  background: #171717; border: 1px solid #2A2A2A; font-size: 14px; font-weight: 700; color: var(--t1);
  opacity: 0; transform: translateY(10px) scale(.96); }
.shp-chip svg { width: 18px; height: 18px; color: var(--o); }
.shp-chip--gift { background: linear-gradient(90deg, var(--o), var(--r) 60%, var(--p)); border-color: transparent; color: #fff;
  box-shadow: 0 10px 26px rgba(255,59,48,.35); }
.shp-chip--gift svg { color: #fff; }
.shp-op { color: var(--t3); font-weight: 700; font-size: 18px; opacity: 0; }
.is-in .shp-chip, .is-in .shp-op { animation: shp-pop .55s cubic-bezier(.2,.9,.3,1.3) forwards; }
.shp-grp { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.is-in .shp-eq > :nth-child(1) { animation-delay: .35s; }
.is-in .shp-eq > :nth-child(2) { animation-delay: .5s; }
.is-in .shp-eq > :nth-child(3) { animation-delay: .62s; }
.is-in .shp-grp > .shp-op { animation-delay: .78s; }
.is-in .shp-grp > .shp-chip { animation-delay: .9s; }
@keyframes shp-pop { to { opacity: 1; transform: none; } }

/* кольцо 60 дней */
.shp-ring { position: relative; width: 236px; height: 236px; margin: 26px 0 8px; }
.shp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shp-ring .tick { stroke: #262626; stroke-width: 3; stroke-linecap: round; transition: stroke .25s, filter .25s; }
.shp-ring .tick.on { filter: drop-shadow(0 0 3px rgba(255,74,30,.55)); }
.shp-ring__glow { position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,74,30,.35), transparent 70%); filter: blur(10px);
  animation: shp-breathe 3.2s ease-in-out infinite; }
@keyframes shp-breathe { 50% { transform: scale(1.12); opacity: .7; } }
.shp-ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.shp-num { font-size: 86px; line-height: .9; font-weight: 800; letter-spacing: -4px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 10%, #FFD9B8 55%, var(--o)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shp-unit { margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--t2); }

/* GRATUIT */
.shp-free { position: relative; display: inline-block; margin-top: 6px; font-size: 40px; font-weight: 800; letter-spacing: -1px;
  background: linear-gradient(90deg, var(--o), var(--r) 55%, var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: scale(.85); filter: blur(6px); }
.shp-free.show { animation: shp-free .7s cubic-bezier(.2,.9,.3,1.35) forwards; }
@keyframes shp-free { to { opacity: 1; transform: none; filter: blur(0); } }
.shp-free::after { content: attr(data-text); position: absolute; inset: 0; color: transparent;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; }
.shp-free.show::after { animation: shp-shine 4.5s ease-in-out 1s infinite; }
@keyframes shp-shine { 0%, 60% { background-position: -200% 0; } 85%, 100% { background-position: 200% 0; } }

.shp-sub { max-width: 400px; margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--t2); opacity: 0; transform: translateY(8px); }
.shp-sub b { color: var(--t1); font-weight: 700; }

.shp-cta { display: inline-flex; align-items: center; gap: 10px; height: 50px; margin-top: 22px; padding: 0 24px; border-radius: 12px;
  background: linear-gradient(90deg, var(--o), var(--r) 55%, var(--p)); color: #fff; text-decoration: none;
  font: 700 15px/1 inherit; font-family: inherit; box-shadow: 0 12px 30px rgba(255,59,48,.32);
  opacity: 0; transform: translateY(8px); transition: transform .2s, box-shadow .2s; }
.shp-cta svg { width: 18px; height: 18px; transition: transform .2s; }
.shp-cta:hover { box-shadow: 0 16px 38px rgba(255,59,48,.45); }
.shp-cta:hover svg { transform: translateX(3px); }
.shp-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,138,0,.5); }
.shp-sub.show, .shp-cta.show { animation: shp-pop .6s cubic-bezier(.2,.8,.2,1) forwards; }
.shp-cta.show { animation-delay: .12s; }

.shp-promo__foot { display: flex; justify-content: space-between; gap: 16px; padding: 16px 28px; border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }

@media (max-width: 520px) {
  .shp-promo__bar, .shp-promo__foot { padding-left: 18px; padding-right: 18px; }
  .shp-promo__body { padding: 24px 18px; }
  .shp-chip { height: 36px; font-size: 13px; padding: 0 11px; }
  .shp-ring { width: 200px; height: 200px; }
  .shp-stamp { width: 74px; height: 74px; right: -44px; top: -18px; }
  .shp-stamp__icon { width: 24px; }
  .shp-promo__brand img { height: 32px; }
  .shp-num { font-size: 72px; }
  .shp-free { font-size: 34px; }
  .shp-promo__foot { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .shp-promo, .shp-chip, .shp-op, .shp-free, .shp-sub, .shp-cta, .shp-excl, .shp-stamp { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .shp-promo::before, .shp-ring__glow, .shp-badge i, .shp-free::after, .shp-stamp__text, .shp-excl__star svg { animation: none !important; }
}

/* SITEHUB v1.7 integration: layout only, no changes to promo motion artwork. */
.sh-hero > .shp-promo {min-width:0; max-width:660px; justify-self:center; align-self:center; box-sizing:border-box;}
.sh-hero > .shp-promo, .sh-hero > .shp-promo * {box-sizing:border-box;}
.sh-hero > .shp-promo .shp-promo__inner {width:100%;}
.sh-hero > .shp-promo .shp-cta {font-size:15px; font-weight:700;line-height:1;}
.sh-hero > .shp-promo .shp-chip, .sh-hero > .shp-promo .shp-promo__foot {min-width:0;}
@media(max-width:1050px){.sh-hero>.shp-promo {width:100%;max-width:660px;margin-inline:auto;}}
@media(max-width:520px){.sh-hero>.shp-promo {max-width:100%;} .sh-hero>.shp-promo .shp-promo__bar {min-width:0;}}
@media(max-width:390px){html[lang="ru"] .sh-hero>.shp-promo .shp-free{font-size:30px;}}