/*
Theme Name: Translayo Landing
Theme URI: https://translayo.com
Author: Translayo
Description: A dark SaaS landing page theme for Translayo WooCommerce translation service.
Version: 0.3.12
License: GPLv2 or later
Text Domain: translayo
Update URI: https://ib-systems.io/themes/translayo-theme
*/

:root {
  --bg: #030b0f;
  --bg-2: #07141a;
  --card: rgba(255,255,255,0.055);
  --card-border: rgba(255,255,255,0.12);
  --text: #f5f7f5;
  --muted: #b9c2bd;
  --green: #54b948;
  --green-2: #8cc63f;
  --deep-green: #0e8f52;
  --line: rgba(255,255,255,0.12);
  --shadow: 0 24px 80px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 62% 38%, rgba(53, 130, 56, 0.25), transparent 31%),
              radial-gradient(circle at 22% 58%, rgba(84, 185, 72, 0.13), transparent 30%),
              linear-gradient(135deg, #02080c 0%, #061116 45%, #02070a 100%);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.site-shell {
  width: min(1560px, calc(100% - 48px));
  margin: 0 auto;
}

.site-header {
  padding: 30px 0 18px;
  position: relative;
  z-index: 5;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  font-weight: 800;
  font-size: 31px;
  letter-spacing: 0;
  min-width: 0;
}
.brand-logo {
  display: block;
  width: 188px;
  height: auto;
  max-height: 76px;
}
.brand-logo-light { display: none; }
body.theme-light .brand-logo-dark { display: none; }
body.theme-light .brand-logo-light { display: block; }
.brand-logo-custom {
  width: 188px;
  height: auto;
  max-height: 76px;
  max-width: 188px;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  color: rgba(255,255,255,0.87);
  font-size: 16px;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
}
.main-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav-list li { margin: 0; }
.main-nav-list a {
  display: inline-flex;
  align-items: center;
}
.header-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 22px;
  font-weight: 600;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 10px;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.22);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%);
  color: white;
  border-color: rgba(142, 198, 63, 0.72);
  box-shadow: 0 16px 40px rgba(84,185,72,0.26);
}
.btn-outline { background: rgba(255,255,255,0.02); }
.btn-small { min-height: 50px; padding: 0 28px; }

.translayo-page {
  color: var(--text);
}
.translayo-section {
  width: min(1360px, calc(100% - 48px));
  margin: 0 auto;
  padding: 36px 0;
}
.translayo-hero {
  padding-top: 28px;
  padding-bottom: 0;
}
.translayo-hero + .translayo-section {
  padding-top: 0;
}
.translayo-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 22px;
  padding: 8px 14px;
  border: 1px solid rgba(142,198,63,0.35);
  border-radius: 999px;
  color: #c9f084;
  background: rgba(84,185,72,0.06);
  font-weight: 800;
}
.translayo-section h1,
.translayo-section h2,
.translayo-section h3 {
  margin-top: 0;
}
.translayo-section h1 {
  max-width: 1120px;
  margin-bottom: 20px;
}
.translayo-section h2 {
  font-size: 38px;
  line-height: 1.12;
  margin-bottom: 22px;
}
.translayo-section h3 {
  font-size: 22px;
  margin-bottom: 14px;
}
.translayo-section p,
.translayo-section li {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}
.translayo-section p {
  margin: 0 0 18px;
}
.translayo-section p:last-child {
  margin-bottom: 0;
}
.translayo-hero p {
  max-width: 860px;
}
.translayo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.translayo-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
}
.translayo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 8px 12px 8px 0;
  padding: 0 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%);
  color: #fff;
  font-weight: 800;
  border: 1px solid rgba(142,198,63,0.72);
}
.translayo-button-secondary {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.22);
}
.translayo-note {
  color: rgba(255,255,255,0.72);
  font-size: 16px;
}
.translayo-faq h2 {
  margin-top: 28px;
  font-size: 26px;
}
.translayo-faq h2:first-child {
  margin-top: 0;
}
.translayo-faq p + h2 {
  margin-top: 30px;
}
.translayo-content {
  max-width: 860px;
}

.hero {
  padding: 44px 0 28px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(680px, 1fr);
  gap: 74px;
  align-items: center;
}
.hero-content {
  max-width: 660px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(142,198,63,0.35);
  border-radius: 999px;
  padding: 8px 18px 8px 10px;
  color: #c9f084;
  background: rgba(84,185,72,0.05);
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 34px;
}
.woo-badge {
  --woo-purple: #7f54b3;
  --woo-purple-dark: #674399;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--woo-purple), var(--woo-purple-dark));
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(127,84,179,.28);
}
.woo-badge:after {
  content: "";
  position: absolute;
  left: 11px;
  bottom: -6px;
  width: 11px;
  height: 11px;
  background: var(--woo-purple-dark);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
h1 {
  margin: 0;
  font-size: 82px;
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: 900;
}
.accent { color: var(--green); }
.hero-copy {
  max-width: 640px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
  margin: 30px 0 34px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 28px;
}
.microtrust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  color: rgba(255,255,255,0.72);
}
.microtrust span { display: inline-flex; align-items: center; gap: 9px; }
.check { color: var(--green-2); font-weight: 900; }

.hero-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.app-card {
  position: relative;
  width: min(720px, 100%);
  min-height: 540px;
  border: 1px solid rgba(142,198,63,0.28);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
  box-shadow: var(--shadow), 0 0 60px rgba(84,185,72,0.18);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1.5deg);
  transform-origin: center right;
  overflow: hidden;
}
.app-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 25%, rgba(142,198,63,0.17), transparent 36%);
  pointer-events: none;
}
.app-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 22px 30px;
  border-bottom: 1px solid var(--line);
  color: #fff;
  font-weight: 800;
}
.app-logo {
  display: block;
  width: 154px;
  height: auto;
  max-height: 62px;
}
.app-body { display: grid; grid-template-columns: 184px 1fr; min-height: 462px; }
.app-sidebar {
  padding: 28px 18px;
  border-right: 1px solid var(--line);
  color: rgba(255,255,255,0.65);
}
.side-item {
  padding: 14px 14px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.side-item.active { background: rgba(84,185,72,0.16); color: #d7ffd0; }
.app-main { padding: 28px; min-width: 0; }
.stat-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,0,0,0.18);
  margin-bottom: 18px;
}
.stat-number { font-size: 48px; font-weight: 900; margin: 0 0 4px; line-height: 1; }
.stat-label { color: var(--muted); margin: 0; }
.line-chart {
  height: 84px;
  margin-top: 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, transparent 15%, rgba(142,198,63,0.24) 16%, transparent 17%),
              linear-gradient(20deg, transparent 25%, rgba(142,198,63,0.34) 27%, transparent 29%),
              linear-gradient(160deg, rgba(255,255,255,0.08), transparent);
}
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mini-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 86px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  min-width: 0;
}
.mini-card strong { display: block; font-size: 22px; margin-top: 6px; }
.activity {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.activity-row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75);
}
.activity-row span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-row:last-child { border-bottom: 0; }
.pill { color: #bdf68b; font-size: 13px; }
.map-dots {
  position: absolute;
  right: 18px;
  top: 154px;
  width: 260px;
  height: 260px;
  opacity: .42;
  background-image: radial-gradient(rgba(142,198,63,.45) 1px, transparent 1.5px);
  background-size: 12px 12px;
  border-radius: 50%;
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
}
.lang-tag {
  position: absolute;
  right: -16px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
}
.tag-fr { top: 176px; }
.tag-es { top: 300px; right: -28px; }
.tag-it { top: 392px; right: 54px; }

.trustpilot {
  width: min(1120px, 100%);
  margin: 26px auto 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  padding: 22px 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 30px;
  color: rgba(255,255,255,0.88);
}
.tp-brand { font-size: 24px; font-weight: 800; }
.tp-star { color: var(--green); }
.stars { display: flex; gap: 4px; }
.stars span {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--green);
  color: #fff;
  font-size: 18px;
}

.steps {
  border-top: 1px solid var(--line);
  padding: 42px 0 58px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 0 26px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 0 70px;
  color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-inner a {
  color: rgba(255,255,255,.72);
}
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; padding-right: 0; }
.step-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--green-2);
  border: 1px solid rgba(142,198,63,.34);
  font-size: 21px;
  font-weight: 800;
}
.step h3 { margin: 0 0 10px; font-size: 18px; }
.step p { margin: 0; color: var(--muted); line-height: 1.55; }

@media (max-width: 1500px) {
  .site-shell { width: min(1440px, calc(100% - 48px)); }
  .brand-logo,
  .brand-logo-custom { width: 172px; max-width: 172px; }
  .main-nav { font-size: 15px; }
  .main-nav-list { gap: 22px; }
  .header-actions { gap: 16px; }
  .btn-small { padding: 0 22px; }
  .hero { padding-top: 36px; }
  .hero-grid {
    grid-template-columns: minmax(0, .92fr) minmax(560px, 1.08fr);
    gap: 44px;
  }
  .hero-content { max-width: 600px; }
  h1 { font-size: 70px; }
  .hero-copy { max-width: 580px; font-size: 19px; margin: 26px 0 32px; }
  .hero-visual { min-height: 500px; }
  .app-card { width: min(660px, 100%); min-height: 500px; transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
  .app-top { min-height: 72px; padding: 20px 28px; }
  .app-logo { width: 142px; }
  .app-body { grid-template-columns: 168px 1fr; min-height: 428px; }
  .app-sidebar { padding: 24px 16px; }
  .side-item { padding: 12px 13px; }
  .app-main { padding: 24px; }
  .stat-card { padding: 20px; }
  .stat-number { font-size: 42px; }
  .line-chart { height: 70px; }
  .mini-card { min-height: 78px; padding: 14px; }
  .activity-row { padding: 13px 15px; }
  .map-dots { right: 4px; top: 130px; width: 230px; height: 230px; }
  .tag-fr { top: 150px; right: -10px; }
  .tag-es { top: 260px; right: -18px; }
  .tag-it { top: 340px; right: 50px; }
}

@media (max-width: 1180px) {
  .site-shell { width: min(980px, calc(100% - 40px)); }
  .main-nav { display: none; }
  .translayo-section { width: min(980px, calc(100% - 40px)); }
  .translayo-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 64px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-content { max-width: 760px; }
  .hero-visual { min-height: auto; justify-content: flex-start; }
  .app-card { transform: none; }
  .steps { grid-template-columns: 1fr 1fr; gap: 30px 34px; }
  .step { border: 0; padding: 0; }
}
@media (max-width: 720px) {
  .site-shell { width: calc(100% - 32px); }
  .translayo-section { width: calc(100% - 32px); padding: 30px 0; }
  .translayo-hero { padding-top: 26px; }
  .translayo-grid { grid-template-columns: 1fr; }
  .translayo-section h2 { font-size: 30px; }
  .translayo-section p,
  .translayo-section li { font-size: 16px; }
  .footer-inner { align-items: flex-start; flex-direction: column; padding-bottom: 46px; }
  .site-header { padding: 20px 0 14px; }
  .header-inner { gap: 12px; }
  .header-actions .login { display: none; }
  .brand { font-size: 24px; }
  .brand-logo,
  .brand-logo-custom { width: 150px; height: auto; max-height: 60px; max-width: 150px; }
  .header-actions { gap: 10px; }
  h1 { font-size: 42px; line-height: 1.12; }
  .hero { padding: 44px 0 30px; }
  .kicker { max-width: 100%; padding: 8px 14px 8px 10px; }
  .hero-copy { font-size: 18px; line-height: 1.55; margin: 22px 0 28px; }
  .cta-row { gap: 12px; }
  .cta-row .btn { width: 100%; min-height: 52px; padding: 0 20px; }
  .microtrust { gap: 12px 18px; }
  .app-card { width: 100%; min-height: auto; border-radius: 20px; }
  .app-top { padding: 18px 20px; }
  .app-logo { width: 136px; }
  .app-body { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
  .app-main { padding: 18px; }
  .stat-card { padding: 18px; }
  .stat-number { font-size: 34px; }
  .card-grid, .steps { grid-template-columns: 1fr; }
  .map-dots,
  .lang-tag { display: none; }
  .trustpilot { flex-direction: column; gap: 13px; text-align: center; padding: 20px 18px; margin: 28px auto 32px; }
  .steps { gap: 24px; padding: 32px 0 46px; }
  .step { grid-template-columns: 42px 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .header-actions .btn-small { display: none; }
}
@media (max-width: 420px) {
  .brand-logo,
  .brand-logo-custom { width: 136px; max-width: 136px; }
  h1 { font-size: 38px; }
  .kicker { align-items: flex-start; border-radius: 18px; }
}

/* Theme switcher */
.theme-toggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: rgba(84,185,72,.55); }
.theme-toggle-icon { color: var(--green); font-size: 16px; }

body.theme-light {
  --bg: #f7faf7;
  --bg-2: #eef6f0;
  --card: rgba(255,255,255,0.78);
  --card-border: rgba(8, 31, 22, 0.12);
  --text: #101820;
  --muted: #53635b;
  --line: rgba(10, 39, 27, 0.12);
  --shadow: 0 24px 80px rgba(29,65,45,0.14);
  color: var(--text);
  background: radial-gradient(circle at 58% 34%, rgba(84, 185, 72, 0.16), transparent 34%),
              radial-gradient(circle at 18% 55%, rgba(14, 143, 82, 0.08), transparent 34%),
              linear-gradient(135deg, #fbfdfb 0%, #eef7f0 48%, #f9fbf8 100%);
}
body.theme-light .main-nav,
body.theme-light .header-actions,
body.theme-light .microtrust,
body.theme-light .trustpilot,
body.theme-light .activity-row { color: rgba(16,24,32,.76); }
body.theme-light .btn-outline,
body.theme-light .theme-toggle,
body.theme-light .app-card,
body.theme-light .trustpilot,
body.theme-light .stat-card,
body.theme-light .mini-card,
body.theme-light .activity,
body.theme-light .lang-tag {
  background: rgba(255,255,255,.66);
  border-color: rgba(12, 44, 31, .14);
}
body.theme-light .btn-outline { color: #152219; }
body.theme-light .kicker {
  background: rgba(84,185,72,.08);
  color: #137b48;
  border-color: rgba(14,143,82,.24);
}
body.theme-light .hero-copy,
body.theme-light .stat-label,
body.theme-light .step p { color: var(--muted); }
body.theme-light .app-top { color: #101820; }
body.theme-light .app-sidebar { color: rgba(16,24,32,.62); }
body.theme-light .side-item.active { color: #0d6f41; background: rgba(84,185,72,.13); }
body.theme-light .pill { color: #118149; }
body.theme-light .stars span { color: #fff; }

@media (max-width: 720px) {
  .theme-toggle-text { display: none; }
  .theme-toggle { padding: 0 12px; }
}