/* UGCly — shared styles extracted from design system */

*, *::before, *::after { box-sizing: border-box; }

body.ugcly-body {
  margin: 0;
  background: #fff;
  font-family: 'Inter', sans-serif;
  color: #241C1F;
}

.ugcly-logo-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 160px;
}

.ugcly-logo-img--footer {
  height: 32px;
}

/* Nav */
[data-unav] { font-family: 'Inter', sans-serif; }

.ugcly-nav-links [data-unav-link],
.ugcly-nav-contact {
  white-space: nowrap;
}

[data-unav-burger],
.ugcly-nav-burger { display: none; }

@media (max-width: 1080px) {
  [data-unav-links],
  .ugcly-nav-links { display: none !important; }
  .ugcly-nav-contact { display: none !important; }
  [data-unav-burger],
  .ugcly-nav-burger { display: flex !important; }
  .ugcly-nav { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 480px) {
  [data-unav-cta] { padding: 10px 16px !important; font-size: 14px !important; }
}

[data-unav-link]:hover { color: #FB7185 !important; }
[data-unav-cta]:hover { background: #E11D48 !important; transform: translateY(-1px); }
[data-feat-post]:hover { transform: translateY(-4px); }

.ugcly-nav-mobile {
  display: none;
  padding: 8px 20px 22px;
  background: rgba(255, 248, 245, 0.97);
  border-top: 1px solid #F4E3DD;
  flex-direction: column;
  gap: 2px;
}

.ugcly-nav-mobile[hidden] { display: none !important; }

.ugcly-nav-mobile--open {
  display: flex !important;
}

.ugcly-nav-mobile a {
  text-decoration: none;
  color: #241C1F;
  font-size: 17px;
  font-weight: 600;
  padding: 12px 8px;
  border-radius: 12px;
}

.ugcly-nav-mobile a:hover { background: rgba(251, 113, 133, 0.08); color: #FB7185; }

body.admin-bar [data-unav] { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar [data-unav] { top: 46px !important; }
}

/* Footer */
.ugcly-foot a:hover { color: #FB7185 !important; }

@media (max-width: 860px) {
  .ugcly-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

@media (max-width: 520px) {
  .ugcly-foot-grid { grid-template-columns: 1fr !important; }
}

/* Animations */
@keyframes ugFloatA {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes ugFloatB {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

@keyframes ugKen {
  0% { transform: scale(1); }
  100% { transform: scale(1.09); }
}

@keyframes ugSpin {
  to { transform: rotate(360deg); }
}

@keyframes ugBlob {
  0%, 100% { border-radius: 42% 58% 60% 40% / 50% 44% 56% 50%; transform: translate(0, 0) scale(1); }
  50% { border-radius: 58% 42% 40% 60% / 44% 56% 44% 56%; transform: translate(10px, -12px) scale(1.05); }
}

@keyframes ugMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes ugMarqueeR {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

[data-mq],
[data-mq-slow],
[data-mq-slowr] {
  will-change: transform;
}

.ugcly-marquee-viewport {
  overflow: hidden;
  width: 100%;
}

.ugcly-marquee-track {
  display: flex;
  width: max-content;
}

@media (prefers-reduced-motion: reduce) {
  [data-mq],
  [data-mq-slow],
  [data-mq-slowr] {
    animation: none !important;
    transform: none !important;
  }
}

[data-mq] { animation: ugMarquee 38s linear infinite; }
[data-mq]:hover { animation-play-state: paused; }
[data-mq-slow] { animation: ugMarquee 60s linear infinite; }
[data-mq-slowr] { animation: ugMarqueeR 60s linear infinite; }
[data-mq-row]:hover [data-mq-slow],
[data-mq-row]:hover [data-mq-slowr] { animation-play-state: paused; }

.ugcly-marquee-track[data-mq],
.ugcly-marquee-track[data-mq-slow],
.ugcly-marquee-track[data-mq-slowr] {
  animation: none !important;
}

[data-rcard] {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

[data-rcard]:hover {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 26px 50px rgba(251, 113, 133, 0.3) !important;
}

[data-lift] {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

[data-lift]:hover { transform: translateY(-6px); }

[data-btn-primary]:hover {
  background: #E11D48 !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(225, 29, 72, 0.4) !important;
}

[data-btn-ghost]:hover {
  background: #FFF1EE !important;
  border-color: #FB7185 !important;
}

[data-chip]:hover {
  background: #FB7185 !important;
  color: #fff !important;
}

[data-field] {
  transition: border-color 0.2s, box-shadow 0.2s;
}

[data-field]:focus {
  outline: none;
  border-color: #FB7185 !important;
  box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.14) !important;
}

/* FAQ */
details[data-faq] summary { list-style: none; cursor: pointer; }
details[data-faq] summary::-webkit-details-marker { display: none; }
details[data-faq] [data-chev] { transition: transform 0.28s ease; }
details[data-faq][open] [data-chev] { transform: rotate(45deg); }
details[data-faq] { transition: border-color 0.2s, box-shadow 0.2s; }
details[data-faq][open] {
  border-color: #FBC4CC !important;
  box-shadow: 0 14px 34px rgba(251, 113, 133, 0.1) !important;
}
details[data-faq]:hover { border-color: #FBC4CC !important; }

/* Blog article */
[data-art] p { font-size: 18px; line-height: 1.78; color: #3F3539; margin: 0 0 22px; }
[data-art] h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.02em;
  color: #241C1F;
  margin: 38px 0 14px;
}
[data-art] strong { color: #241C1F; font-weight: 600; }

/* Contact Form 7 */
.ugcly-cf7-wrap .wpcf7-form-control-wrap { display: block; width: 100%; }
.ugcly-cf7-wrap input[type="text"],
.ugcly-cf7-wrap input[type="email"],
.ugcly-cf7-wrap input[type="tel"],
.ugcly-cf7-wrap textarea {
  width: 100%;
  border: 1px solid #EEDAD4;
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  color: #241C1F;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ugcly-cf7-wrap input:focus,
.ugcly-cf7-wrap textarea:focus {
  outline: none;
  border-color: #FB7185 !important;
  box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.14) !important;
}
.ugcly-cf7-wrap textarea { resize: vertical; min-height: 130px; }
.ugcly-cf7-wrap label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #3F3539;
  margin-bottom: 7px;
}
.ugcly-cf7-wrap .wpcf7-form p { margin: 0 0 16px; }
.ugcly-cf7-wrap .wpcf7-form p:last-of-type { margin-bottom: 0; }
.ugcly-cf7-wrap .ugcly-cf7-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.ugcly-cf7-wrap .ugcly-cf7-row p { margin: 0; }
.ugcly-cf7-wrap input[type="submit"],
.ugcly-cf7-wrap .wpcf7-submit {
  width: 100%;
  background: #FB7185;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 15px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(251, 113, 133, 0.4);
  transition: all 0.25s;
  font-family: 'Inter', sans-serif;
}
.ugcly-cf7-wrap input[type="submit"]:hover,
.ugcly-cf7-wrap .wpcf7-submit:hover {
  background: #E11D48;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(225, 29, 72, 0.4);
}
.ugcly-cf7-wrap .wpcf7-response-output {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #6F6469;
  border-radius: 12px;
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid #F0DCD6;
}
.ugcly-cf7-wrap .wpcf7-not-valid-tip { font-size: 13px; color: #E11D48; margin-top: 6px; }
.ugcly-cf7-wrap .wpcf7-spinner { margin: 0 auto; }
@media (max-width: 600px) {
  .ugcly-cf7-wrap .ugcly-cf7-row { grid-template-columns: 1fr; }
}

/* Responsive — home */
@media (max-width: 920px) {
  [data-hero-grid] { grid-template-columns: 1fr !important; gap: 8px !important; }
  [data-hero-right] { margin-top: 24px !important; }
}

@media (max-width: 800px) { [data-steps-grid] { grid-template-columns: 1fr !important; } }
@media (max-width: 820px) { [data-anywhere-grid] { grid-template-columns: 1fr !important; } }
@media (max-width: 820px) { [data-realism-grid] { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 520px) { [data-realism-grid] { grid-template-columns: 1fr !important; } }
@media (max-width: 760px) { [data-lang-split] { grid-template-columns: 1fr !important; } }

/* Responsive — inner pages */
@media (max-width: 860px) {
  [data-hiw-row],
  [data-feat-row],
  [data-uc-row],
  [data-about-split],
  [data-contact-split] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [data-hiw-img],
  [data-feat-img],
  [data-uc-img] { order: -1; }
}

@media (max-width: 780px) { [data-price-grid] { grid-template-columns: 1fr !important; max-width: 440px !important; } }
@media (max-width: 680px) { [data-incl-grid] { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 620px) { [data-hiw-avgrid] { grid-template-columns: repeat(3, 1fr) !important; } }

@media (max-width: 900px) {
  [data-blog-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-feat] { grid-template-columns: 1fr !important; }
  [data-feat-cover] { min-height: 240px !important; }
}

@media (max-width: 620px) { [data-blog-grid] { grid-template-columns: 1fr !important; } }

@media (max-width: 780px) {
  [data-stat-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-approach-grid] { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) { [data-uc-cards] { grid-template-columns: 1fr !important; } }