/* PureIP — mobile-IP product site additions (2026-10). */
:root {
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Header state */
.site-header { transition: box-shadow 220ms ease, background-color 220ms ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(15, 23, 42, .09); background: rgba(255, 255, 255, .94); }

/* Hero bits */
.hero { isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: -1; width: 460px; height: 460px;
  right: -120px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .14), transparent 68%);
  animation: hero-glow 12s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; z-index: -1; width: 380px; height: 380px;
  left: -140px; bottom: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 88, 12, .1), transparent 68%);
  animation: hero-glow 15s ease-in-out infinite alternate-reverse;
}
@keyframes hero-glow { from { transform: scale(1) translateY(0); } to { transform: scale(1.12) translateY(18px); } }

.price-pill {
  display: inline-flex; align-items: baseline; gap: 7px;
  margin-top: 24px; padding: 10px 16px;
  border: 1px solid rgba(37, 99, 235, .18); border-radius: 14px;
  background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
}
.price-pill span { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted-foreground); }
.price-pill strong { font-size: 1.55rem; line-height: 1; letter-spacing: -.03em; color: var(--color-foreground); }
.price-pill small { font-size: .85rem; font-weight: 700; color: var(--color-muted-foreground); }

.hero__stats { grid-template-columns: repeat(4, 1fr); }
.hero__visual { position: relative; min-height: 380px; }
.orbit-card {
  width: min(100%, 420px); border-radius: 24px; padding: 18px;
  color: #e2e8f0; background: #0b1220;
  background-image: radial-gradient(circle at 88% 4%, rgba(37, 99, 235, .55), transparent 42%), linear-gradient(145deg, #0b1220, #111c33);
  box-shadow: 0 28px 70px rgba(2, 6, 23, .28);
  animation: card-float 8s ease-in-out infinite;
  position: relative; z-index: 2;
}
.orbit-card__head { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #cbd5e1; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .15); animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .12); } 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, .03); } }
.orbit-bars { display: inline-flex; align-items: flex-end; gap: 2px; margin-left: auto; height: 12px; }
.orbit-bars i { display: block; width: 3px; border-radius: 2px; background: #5eead4; opacity: .8; animation: bar-breathe 1.6s ease-in-out infinite; }
.orbit-bars i:nth-child(1) { height: 4px; }
.orbit-bars i:nth-child(2) { height: 7px; animation-delay: .15s; }
.orbit-bars i:nth-child(3) { height: 10px; animation-delay: .3s; }
.orbit-bars i:nth-child(4) { height: 6px; animation-delay: .45s; }
@keyframes bar-breathe { 0%, 100% { opacity: .35; transform: scaleY(.7); } 50% { opacity: 1; transform: scaleY(1); } }
.orbit-card__body { padding: 10px 0 4px; }
.orbit-card__body svg { width: 100%; height: auto; }
.orbit-card__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 13px; }
.orbit-card__meta span { font-size: .7rem; line-height: 1.35; color: #94a3b8; }
.orbit-card__meta b { display: block; color: #e2e8f0; font-size: .76rem; }
.float-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: baseline; gap: 3px;
  border: 1px solid rgba(37, 99, 235, .16); border-radius: 999px;
  background: rgba(255, 255, 255, .95); box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
  backdrop-filter: blur(8px); padding: 10px 14px; font-weight: 800; color: var(--color-foreground);
}
.float-chip--price { top: 14px; right: -8px; animation: chip-float 6s ease-in-out infinite; }
.float-chip--price span { font-size: 1.1rem; letter-spacing: -.03em; }
.float-chip--price small { font-size: .7rem; color: var(--color-muted-foreground); }
.float-chip--protocol { bottom: -14px; left: 22px; font-size: .74rem; color: var(--color-primary); animation: chip-float 7.5s ease-in-out .4s infinite; }
@keyframes card-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(-.2deg); } }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Trust strip */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding: 22px var(--space-5); max-width: var(--container); margin: 0 auto;
}
.trust-strip span {
  border: 1px solid var(--color-border); border-radius: 999px; background: #fff;
  padding: 8px 13px; font-size: .8rem; font-weight: 600; color: var(--color-muted-foreground);
}

/* Signal card */
.signal-card {
  position: relative; overflow: hidden; border-radius: 22px; padding: 26px;
  background: #0b1220; color: #e2e8f0; box-shadow: 0 22px 55px rgba(2, 6, 23, .18);
}
.signal-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.signal-card__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .05em; color: #cbd5e1; text-transform: uppercase; }
.signal-rows { position: relative; z-index: 1; display: grid; gap: 2px; margin-top: 20px; }
.signal-rows div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.signal-rows div:last-child { border-bottom: 0; }
.signal-rows span { font-size: .78rem; color: #94a3b8; }
.signal-rows b { font-size: .84rem; font-weight: 700; color: #e2e8f0; text-align: right; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.step {
  position: relative; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm);
}
.step__num { display: block; font-size: 2rem; line-height: 1; font-weight: 800; letter-spacing: -.05em; color: rgba(37, 99, 235, .2); margin-bottom: 18px; }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; font-size: .92rem; }

/* Pricing */
.pricing-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 8px;
  border: 1px solid var(--color-border); border-radius: 999px; background: #fff;
}
.pricing-toggle button {
  border: 0; border-radius: 999px; background: transparent; color: var(--color-muted-foreground);
  padding: 9px 15px; font: 700 .82rem/1 var(--font-sans); cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.pricing-toggle button.is-active { background: var(--color-primary); color: #fff; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: 22px; }
.price-card {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
  transition: opacity 220ms ease, transform 220ms var(--motion-ease), border-color 220ms ease, box-shadow 220ms ease;
}
.price-card--featured { border-color: rgba(37, 99, 235, .45); box-shadow: 0 18px 44px rgba(37, 99, 235, .12); }
.price-card__tag {
  align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--color-primary); background: rgba(37, 99, 235, .08);
  border-radius: 999px; padding: 5px 9px; margin-bottom: 14px;
}
.price-card__price { display: flex; align-items: baseline; gap: 3px; margin: 2px 0 14px; color: var(--color-foreground); }
.price-card__price span { font-size: 1.3rem; font-weight: 800; }
.price-card__price b { font-size: 2.65rem; line-height: 1; letter-spacing: -.055em; }
.price-card__price small { font-size: .85rem; font-weight: 700; color: var(--color-muted-foreground); }
.price-card p { font-size: .94rem; }
.price-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.price-list li { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--color-foreground); }
.price-list svg { flex: none; margin-top: 3px; color: var(--color-primary); }
.price-card .btn { margin-top: auto; }
.pricing-note { max-width: 760px; margin: 20px 0 0; font-size: .84rem; color: var(--color-muted-foreground); }
.price-card.is-active { border-color: rgba(37, 99, 235, .42); box-shadow: 0 18px 44px rgba(37, 99, 235, .1); }

/* What we do not sell */
.not-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.not-item {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff;
  font-weight: 700; font-size: .9rem;
}
.not-item svg { flex: none; color: var(--color-destructive); }

/* Code samples */
.code-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.code-card { background: #0b1220; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 16px 40px rgba(2, 6, 23, .2); }
.code-card--wide { grid-column: 1 / -1; }
.code-card__head { padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .09); color: #94a3b8; font: 700 .74rem/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.code-card pre { margin: 0; padding: 18px; overflow-x: auto; }
.code-card code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: .82rem; line-height: 1.65; color: #dbeafe; white-space: pre; }

/* Contact form */
.consent-label { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; font-size: .86rem; color: var(--color-muted-foreground); }
.consent-label input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-primary); flex: none; }
.form-status { min-height: 20px; margin: 12px 0 0; font-size: .88rem; color: var(--color-muted-foreground); }
.form-status.is-ok { color: #047857; }
.form-status.is-error { color: var(--color-destructive); }
.form-status.is-pending { color: var(--color-muted-foreground); }
.sk-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Scroll reveal (added by motion.js; no-JS keeps content visible). */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--motion-ease), transform .75s var(--motion-ease); transition-delay: calc(var(--i, 0) * 60ms); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

@media (max-width: 960px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .steps, .not-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { padding: var(--space-5); }
  .hero__visual { min-height: 320px; margin-top: var(--space-6); }
  .float-chip--price { right: 0; }
  .float-chip--protocol { left: 0; }
  .code-grid { grid-template-columns: 1fr; }
  .code-card--wide { grid-column: auto; }
}

@media (max-width: 640px) {
  .steps, .not-grid { grid-template-columns: 1fr; }
  .hero__visual { min-height: 280px; }
  .orbit-card { padding: 14px; }
  .orbit-card__meta { grid-template-columns: 1fr 1fr; }
  .orbit-card__meta span:last-child { display: none; }
  .float-chip { padding: 8px 11px; }
  .float-chip--protocol { display: none; }
  .trust-strip { justify-content: flex-start; padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-card, .float-chip, .live-dot, .orbit-bars i, .hero::before, .hero::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}