/* Color Identifier homepage redesign
   Shared by every localized homepage through the generator. */

.site-redesign {
  --studio-ink: #11131a;
  --studio-paper: #f5f2ea;
  --studio-white: #fffdf8;
  --studio-muted: #777873;
  --studio-line: rgba(17, 19, 26, .14);
  --studio-blue: #5578ff;
  --studio-coral: #ff725e;
  background: var(--studio-paper);
  color: var(--studio-ink);
}

.site-redesign .color-stream-top {
  display: none;
}

.site-redesign .header {
  top: 0;
  background: rgba(245, 242, 234, .88);
  border-bottom: 1px solid var(--studio-line);
  backdrop-filter: blur(18px);
}

.site-redesign .header.scrolled {
  top: 0;
  background: rgba(245, 242, 234, .96);
}

.site-redesign .nav-container {
  height: 76px;
}

.site-redesign .logo img {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 11px;
  box-shadow: 0 5px 14px rgba(17, 19, 26, .14);
}

.site-redesign .logo-text {
  color: var(--studio-ink);
  font-size: .86rem;
  letter-spacing: .13em;
}

.site-redesign .nav-menu {
  gap: 2rem;
}

.site-redesign .nav-menu a {
  color: var(--studio-muted);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .91rem;
  letter-spacing: .01em;
  text-transform: none;
}

.site-redesign .nav-menu a::after {
  background: var(--studio-blue);
  height: 1px;
}

.site-redesign .header .btn-primary,
.site-redesign .hero .btn-primary {
  background: var(--studio-ink);
  color: var(--studio-white);
  border: 1px solid var(--studio-ink);
  border-radius: 999px;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .98rem;
  padding: .74rem 1.25rem;
}

.site-redesign .header .btn-primary:hover,
.site-redesign .hero .btn-primary:hover {
  background: var(--studio-blue);
  border-color: var(--studio-blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(85, 120, 255, .25);
}

.site-redesign .hero {
  min-height: min(820px, 100svh);
  padding: 9.5rem 0 7rem;
  background: var(--studio-ink);
  color: var(--studio-white);
  overflow: visible;
  isolation: isolate;
}

.site-redesign .hero::before,
.site-redesign .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.site-redesign .hero::before {
  width: 42vw;
  height: 42vw;
  right: -12vw;
  top: 10%;
  background: radial-gradient(circle at 35% 35%, rgba(85, 120, 255, .82), rgba(85, 120, 255, 0) 67%);
  opacity: .85;
}

.site-redesign .hero::after {
  width: 26vw;
  height: 26vw;
  right: 24%;
  bottom: -20%;
  background: radial-gradient(circle, rgba(255, 114, 94, .65), rgba(255, 114, 94, 0) 68%);
}

.site-redesign .hero .geo-grid-bg {
  opacity: .18;
  background-image: radial-gradient(circle, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 28px 28px;
}

.site-redesign .hero-container {
  grid-template-columns: minmax(0, .93fr) minmax(360px, 1.07fr);
  gap: clamp(2rem, 6vw, 7rem);
}

.site-redesign .hero-content {
  max-width: 610px;
  animation: studio-rise .8s cubic-bezier(.22,1,.36,1) both;
}

.site-redesign .section-label {
  color: #9eb0ff;
  font-size: .7rem;
  letter-spacing: .18em;
}

.site-redesign .hero-content h1 {
  color: var(--studio-white);
  font-size: clamp(3.5rem, 7vw, 7.4rem);
  letter-spacing: -.075em;
  line-height: .91;
  max-width: 730px;
  margin-bottom: 1.7rem;
}

.site-redesign .hero-content h1 span.highlight {
  color: #a9b7ff;
}

.site-redesign .hero-subtitle {
  max-width: 510px;
  color: rgba(255,255,255,.72);
  font-size: 1.15rem;
  line-height: 1.48;
}

.site-redesign .hero-features {
  border-left: 1px solid rgba(255,255,255,.36);
  padding-left: 1.2rem;
  margin-bottom: 2.1rem;
}

.site-redesign .hero-features li {
  color: rgba(255,255,255,.74);
  font-size: .94rem;
  margin-bottom: .55rem;
}

.site-redesign .hero-features i {
  color: #ffad9f;
}

.site-redesign .hero-cta {
  margin-bottom: 1.5rem;
}

.site-redesign .hero .btn-primary {
  background: var(--studio-white);
  color: var(--studio-ink);
  border-color: var(--studio-white);
  padding: .9rem 1.35rem;
}

.site-redesign .hero .btn-secondary {
  color: var(--studio-white);
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .98rem;
  letter-spacing: 0;
  text-transform: none;
  padding: .9rem 1.35rem;
}

.site-redesign .hero .btn-secondary:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.8);
  box-shadow: none;
  transform: translateY(-2px);
}

.site-redesign .rating-badge {
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(255,255,255,.56);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .92rem;
}

.site-redesign .stars { color: #ffd166; }

.site-redesign .hero-image {
  min-height: 540px;
  animation: studio-float 7s ease-in-out infinite;
}

.site-redesign .phone-mockup {
  max-width: 335px;
  border: 8px solid #090a0e;
  border-radius: 42px;
  filter: drop-shadow(20px 24px 28px rgba(0,0,0,.34));
  transform: rotate(7deg) translateY(-4px);
}

.site-redesign .phone-mockup:hover {
  transform: rotate(2deg) scale(1.025) translateY(-8px);
}

.site-redesign .hero-geo-circle {
  width: 470px;
  height: 470px;
  border: 1px solid rgba(255,255,255,.22);
  opacity: 1;
}

.site-redesign .hero-geo-square {
  width: 380px;
  height: 380px;
  border: 1px solid rgba(255,255,255,.18);
  opacity: 1;
}

.site-redesign .spectrum-bar,
.site-redesign .spectrum-bar-thick {
  height: 5px;
}

.site-redesign .stats-bar {
  padding: 1.6rem 0;
  background: var(--studio-white);
  border: 0;
}

.site-redesign .stats-grid { grid-template-columns: repeat(4, 1fr); }
.site-redesign .stat-item {
  text-align: left;
  padding: .35rem 1.5rem;
  border-right: 1px solid var(--studio-line);
}
.site-redesign .stat-item:first-child { padding-left: 0; }
.site-redesign .stat-number {
  font-size: 2.1rem;
  letter-spacing: -.06em;
}
.site-redesign .stat-label { color: var(--studio-muted); letter-spacing: .1em; }

.site-redesign .features,
.site-redesign .screenshots,
.site-redesign .how-it-works {
  background: var(--studio-paper);
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.site-redesign .features { background: var(--studio-white); }

.site-redesign .section-header {
  max-width: 760px;
  margin: 0 0 3.6rem;
  text-align: left;
}

.site-redesign .section-header h2,
.site-redesign .cta h2 {
  font-size: clamp(2.4rem, 4vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.065em;
  margin-bottom: 1.15rem;
}

.site-redesign .section-header p { color: var(--studio-muted); max-width: 520px; }

.site-redesign .features-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--studio-line);
}

.site-redesign .feature-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--studio-line);
  border-right: 1px solid var(--studio-line);
  padding: 2.2rem 2rem 2.5rem 0;
  margin-right: 2rem;
  min-height: 240px;
  box-shadow: none;
}

.site-redesign .feature-card:nth-child(3n) { border-right: 0; margin-right: 0; }
.site-redesign .feature-card::before { display: none; }
.site-redesign .feature-card:hover { transform: translateY(-5px); box-shadow: none; }
.site-redesign .feature-icon {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: var(--studio-blue);
  justify-content: flex-start;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}
.site-redesign .feature-card h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.site-redesign .feature-card p { color: var(--studio-muted); max-width: 290px; }

.site-redesign .steps-grid {
  margin-top: 0;
  border: 0;
  border-top: 1px solid var(--studio-line);
  grid-template-columns: repeat(3, 1fr);
}

.site-redesign .step {
  padding: 2.5rem 2.5rem 2.5rem 0;
  border-right: 1px solid var(--studio-line);
  border-bottom: 1px solid var(--studio-line);
}
.site-redesign .step + .step { padding-left: 2.5rem; }
.site-redesign .step:last-child { border-right: 0; }
.site-redesign .step-number { color: var(--studio-blue); opacity: 1; font-size: .78rem; letter-spacing: .14em; }
.site-redesign .step h3 { font-size: 1.3rem; }
.site-redesign .step p { color: var(--studio-muted); max-width: 280px; }

.site-redesign .screenshots { background: var(--studio-white); }
.site-redesign .screenshots-container { gap: 1.2rem; padding: 0 0 1.2rem; }
.site-redesign .screenshot {
  width: 190px;
  border: 0;
  border-radius: 20px;
  background: #101117;
  box-shadow: 0 14px 26px rgba(17,19,26,.12);
}
.site-redesign .screenshot:nth-child(even) { transform: translateY(2.5rem); }
.site-redesign .screenshot:hover { transform: translateY(-.4rem) rotate(-1deg); box-shadow: 0 20px 32px rgba(17,19,26,.2); }
.site-redesign .screenshot:nth-child(even):hover { transform: translateY(2rem) rotate(1deg); }
.site-redesign .screenshot img { border-radius: 20px; }

.site-redesign .testimonials { background: var(--studio-ink); padding: clamp(5rem, 10vw, 8rem) 0; }
.site-redesign .testimonials-grid { gap: 0; margin-top: 0; border-top: 1px solid rgba(255,255,255,.16); }
.site-redesign .testimonial { background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); padding: 2rem 2rem 2rem 0; border-radius: 0; }
.site-redesign .testimonial + .testimonial { padding-left: 2rem; }
.site-redesign .testimonial:last-child { border-right: 0; }
.site-redesign .testimonial:hover { background: transparent; border-color: rgba(255,255,255,.16); }

.site-redesign .cta {
  padding: clamp(5rem, 10vw, 8rem) 0;
  text-align: left;
  background: var(--studio-blue);
  overflow: visible;
}
.site-redesign .cta > .container { max-width: 1200px; }
.site-redesign .cta h2 { max-width: 650px; }
.site-redesign .cta p { margin-left: 0; max-width: 520px; }
.site-redesign .cta .btn-primary { border-radius: 999px; font-family: 'Source Sans 3', sans-serif; text-transform: none; letter-spacing: 0; }

.site-redesign .footer { background: #090a0e; border-top: 0; padding-top: 4rem; }

/* QR popups remain desktop hover interactions. The explicit solid backing
   prevents section copy from showing through while the card is open. */
.site-redesign .btn-download { z-index: 20; isolation: isolate; }
.site-redesign .qr-popup,
.site-redesign .qr-popup-top {
  background: var(--studio-white);
  border: 1px solid rgba(17,19,26,.18);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  opacity: 0;
  mix-blend-mode: normal;
}
.site-redesign .qr-popup img,
.site-redesign .qr-popup-top img { display: block; background: #fff; border-radius: 4px; }
.site-redesign .qr-popup p,
.site-redesign .qr-popup-top p { color: var(--studio-ink); }

@keyframes studio-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes studio-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 1024px) {
  .site-redesign .hero-container { gap: 2rem; }
  .site-redesign .hero-content h1 { font-size: clamp(3.2rem, 7vw, 5.4rem); }
}

@media (max-width: 768px) {
  .site-redesign .header { position: absolute; }
  .site-redesign .header-cta { display: none; }
  .site-redesign .hero { min-height: auto; padding: 8rem 0 5rem; }
  .site-redesign .hero-container { grid-template-columns: 1fr; gap: 2.8rem; }
  .site-redesign .hero-image { order: -1; min-height: 330px; }
  .site-redesign .phone-mockup { max-width: 225px; border-width: 6px; border-radius: 28px; }
  .site-redesign .hero-content h1 { font-size: clamp(3rem, 14vw, 5rem); }
  .site-redesign .hero-subtitle { font-size: 1.05rem; }
  .site-redesign .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .site-redesign .stat-item,
  .site-redesign .stat-item:first-child { padding: 1rem 0; border-right: 0; border-bottom: 1px solid var(--studio-line); }
  .site-redesign .stat-item:nth-child(3),
  .site-redesign .stat-item:nth-child(4) { border-bottom: 0; }
  .site-redesign .features-grid,
  .site-redesign .steps-grid { grid-template-columns: 1fr; }
  .site-redesign .feature-card,
  .site-redesign .feature-card:nth-child(3n),
  .site-redesign .step,
  .site-redesign .step + .step { border-right: 0; margin-right: 0; padding: 1.8rem 0; }
  .site-redesign .step:last-child { border-bottom: 1px solid var(--studio-line); }
  .site-redesign .testimonial,
  .site-redesign .testimonial + .testimonial { border-right: 0; padding: 1.8rem 0; }
  .site-redesign .cta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .site-redesign .hero-content,
  .site-redesign .hero-image { animation: none; }
}