/* =============================================
   PXFOX — Complete Stylesheet
   Mobile-first · Responsive · Elegant
   ============================================= */

/* Fonts load from each page’s <link>; avoids duplicate requests vs @import */

/* ─── VARIABLES ─────────────────────────────── */
:root {
  --fox:       #E8520A;
  --fox-dark:  #C94208;
  --navy:      #1A1F2E;
  --cream:     #FAF7F2;
  --light:     #F5F0E8;
  --gold:      #C9A84C;
  --muted:     #8B8880;
  --border:    rgba(26,31,46,0.08);
  --border-md: rgba(26,31,46,0.14);
  --shadow-sm: 0 2px 12px rgba(26,31,46,0.06);
  --shadow-md: 0 8px 32px rgba(26,31,46,0.10);
  --shadow-lg: 0 20px 64px rgba(26,31,46,0.12);
  --r-sm:  8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-full: 999px;
  --sans:  'DM Sans', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --ease:  cubic-bezier(0.25,0.46,0.45,0.94);
  --t:     0.22s;
  --t-slow:0.44s;
  --text-base: clamp(24px, 0.375vw + 22.5px, 27px);
  --leading-body: 1.72;
  --leading-tight: 1.35;
}

/* ─── RESET ─────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans);
  font-size:var(--text-base);
  font-weight:400;
  background:var(--cream);
  color:var(--navy);
  overflow-x:hidden;
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:var(--sans); }
ul   { list-style:none; }

/* ─── LANG BAR (compact — original header scale) ───────────────── */
.lang-bar {
  background:var(--navy);
  padding:0 5%;
  display:flex; align-items:center;
  justify-content:flex-end; flex-wrap:wrap;
  gap:2px; min-height:38px;
  position:sticky; top:0; z-index:300;
}
.lang-btn {
  background:none; border:none;
  font-size:11px; font-weight:400;
  color:rgba(255,255,255,0.38);
  padding:4px 7px; border-radius:5px;
  transition:all var(--t) var(--ease);
  letter-spacing:0.03em; white-space:nowrap; line-height:1.2;
}
.lang-btn:hover  { color:rgba(255,255,255,0.8); background:rgba(255,255,255,0.07); }
.lang-btn.active { color:#fff; background:rgba(255,255,255,0.12); font-weight:500; }
.lang-sep { color:rgba(255,255,255,0.14); font-size:10px; user-select:none; }

/* ─── NAVIGATION ─────────────────────────────── */
.nav {
  position:sticky; top:38px; z-index:200;
  padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
  background:rgba(250,247,242,0.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--t) var(--ease);
}
.nav.scrolled { box-shadow:var(--shadow-sm); }

.nav-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-logo img { width:34px; height:34px; border-radius:var(--r-sm); }
.nav-logo-text { font-family:var(--serif); font-size: 33px; font-weight:600; color:var(--navy); letter-spacing:0.02em; }

.nav-links { display:flex; gap:28px; }
.nav-links a {
  font-size: clamp(18.75px, 0.3vw + 18px, 21px); font-weight:500; color:var(--muted);
  letter-spacing:0.04em; text-transform:uppercase;
  transition:color var(--t); cursor:pointer;
  padding:6px 0; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1px; background:var(--fox);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav-links a:hover { color:var(--navy); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta { display:flex; gap:10px; align-items:center; }

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:6px; border-radius:var(--r-sm);
  transition:background var(--t);
}
.nav-hamburger:hover { background:rgba(26,31,46,0.06); }
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--navy); border-radius:2px;
  transition:all var(--t) var(--ease);
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.nav-mobile {
  display:none; position:fixed; inset:0; z-index:400;
  flex-direction:column;
  background:var(--cream); padding:0 5% 40px; overflow-y:auto;
}
.nav-mobile.open {
  display:flex;
  animation:slideDown var(--t-slow) var(--ease) both;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:translateY(0); }
}
.nav-mobile-top {
  display:flex; align-items:center; justify-content:space-between;
  height:68px; border-bottom:1px solid var(--border); margin-bottom:32px;
  flex-shrink:0;
}
.nav-mobile-close {
  background:none; border:none; font-size: 42px; line-height:1;
  color:var(--navy); padding:6px; border-radius:var(--r-sm);
  transition:background var(--t);
}
.nav-mobile-close:hover { background:rgba(26,31,46,0.06); }
.nav-mobile-links { display:flex; flex-direction:column; margin-bottom:36px; }
.nav-mobile-links a {
  display:block; font-family:var(--serif); font-size: 42px; font-weight:300;
  color:var(--navy); padding:14px 0; border-bottom:1px solid var(--border);
  transition:color var(--t) var(--ease); cursor:pointer;
}
.nav-mobile-links a:hover { color:var(--fox); }
.nav-mobile-cta { display:flex; flex-direction:column; gap:12px; }

/* ─── BUTTONS ────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-full); font-family:var(--sans); font-weight:500;
  transition:all var(--t) var(--ease); border:1px solid transparent;
  white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.btn-sm   { font-size: 21px; padding:9px 22px; }
.btn-md   { font-size: 22.5px; padding:13px 30px; }
.btn-lg   { font-size: 24px; padding:15px 38px; }
.btn-full { width:100%; justify-content:center; }

.btn-ghost {
  font-size: 21px; padding:9px 22px;
  color:var(--navy); background:none; border-color:var(--border-md);
}
.btn-ghost:hover { border-color:var(--navy); background:var(--navy); color:var(--cream); transform:translateY(-1px); }

.btn-primary {
  font-size: 21px; padding:10px 24px;
  color:#fff; background:var(--fox); border-color:var(--fox);
}
.btn-primary:hover { background:var(--fox-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(232,82,10,0.28); }

.btn-dark   { color:var(--cream); background:var(--navy); border-color:var(--navy); }
.btn-dark:hover { background:#0d1017; transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,31,46,0.22); }

.btn-outline { color:var(--navy); background:transparent; border-color:rgba(26,31,46,0.2); }
.btn-outline:hover { border-color:var(--navy); background:var(--navy); color:var(--cream); transform:translateY(-2px); }

/* ─── SECTION PRIMITIVES ────────────────────── */
.section { padding:96px 5%; }
.section-label {
  display:block; font-size: clamp(18px, 0.3vw + 16.5px, 19.5px); letter-spacing:0.11em;
  text-transform:uppercase; color:var(--fox); font-weight:500; margin-bottom:16px;
}
.section-title {
  font-family:var(--serif); font-size: clamp(48px,6.9vw,93px);
  font-weight:300; color:var(--navy); margin-bottom:16px; line-height:1.12;
}
.section-sub { font-size: clamp(24px, 0.525vw + 22.5px, 27px); color:var(--muted); font-weight:300; line-height:1.85; max-width:520px; }

/* ─── HERO ───────────────────────────────────── */
.hero {
  min-height:90vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:72px 5% 60px; overflow:hidden;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(232,82,10,0.07); border:1px solid rgba(232,82,10,0.18);
  border-radius:var(--r-full); padding:8px 18px;
  font-size: clamp(18px, 0.375vw + 17.25px, 21px); font-weight:500; color:var(--fox);
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:28px;
  animation:fadeUp 0.55s var(--ease) both;
}
.hero-badge::before {
  content:''; width:6px; height:6px; border-radius:50%; background:var(--fox);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:0.4; transform:scale(0.65); }
}
.hero h1 {
  font-family:var(--serif); font-size: clamp(63px,10.5vw,132px);
  font-weight:300; color:var(--navy); letter-spacing:-0.02em; margin-bottom:22px;
  animation:fadeUp 0.55s 0.08s var(--ease) both;
}
.hero h1 em { font-style:italic; color:var(--fox); }
.hero-sub {
  font-size: clamp(25.5px,2.25vw,30px); font-weight:300; color:var(--muted);
  max-width:560px; line-height:1.88; margin-bottom:44px;
  animation:fadeUp 0.55s 0.16s var(--ease) both;
}
.hero-actions {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  animation:fadeUp 0.55s 0.22s var(--ease) both;
}
.hero-note {
  margin-top:16px; font-size: clamp(19.5px, 0.3vw + 18px, 22.5px); color:var(--muted);
  animation:fadeUp 0.55s 0.28s var(--ease) both;
}

/* Mock window */
.hero-visual {
  margin-top:60px; width:100%; max-width:880px;
  animation:fadeUp 0.75s 0.36s var(--ease) both;
}
.mock-window {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
}
.mock-bar {
  background:var(--light); border-bottom:1px solid var(--border);
  padding:11px 18px; display:flex; align-items:center; gap:7px;
}
.mock-dot { width:10px; height:10px; border-radius:50%; }
.mock-bar-title { margin:0 auto; font-size: 19.5px; color:var(--muted); letter-spacing:0.03em; }
.mock-body { padding:26px; display:grid; grid-template-columns:185px 1fr; gap:20px; }
.mock-sidebar { display:flex; flex-direction:column; gap:5px; }
.mock-sidebar-label {
  font-size: 16.5px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--muted); padding:0 11px; margin-bottom:4px; margin-top:6px;
}
.mock-menu-item {
  padding:8px 12px; border-radius:var(--r-sm); font-size: 19.5px; color:var(--muted);
  display:flex; align-items:center; gap:7px;
  transition:background var(--t) var(--ease); cursor:pointer;
}
.mock-menu-item:hover { background:rgba(26,31,46,0.04); }
.mock-menu-item.active { background:rgba(232,82,10,0.08); color:var(--fox); font-weight:500; }
.mock-menu-dot { width:4px; height:4px; border-radius:50%; background:currentColor; flex-shrink:0; }
.mock-divider  { height:1px; background:var(--border); margin:6px 0; }
.mock-content  { display:flex; flex-direction:column; gap:13px; }
.mock-top-row  { display:flex; gap:9px; }
.mock-style-card {
  flex:1; background:var(--light); border:1.5px solid var(--border);
  border-radius:9px; padding:11px; cursor:pointer;
  transition:all var(--t) var(--ease);
}
.mock-style-card:hover { border-color:rgba(232,82,10,0.25); }
.mock-style-card.sel { background:var(--navy); border-color:var(--navy); }
.mock-style-card.sel .sc-label { color:#fff; }
.mock-style-card.sel .sc-sub   { color:rgba(255,255,255,0.45); }
.sc-swatch { height:34px; border-radius:5px; margin-bottom:7px; }
.sc-label  { font-size: 18.75px; font-weight:500; color:var(--navy); }
.sc-sub    { font-size: 17.25px; color:var(--muted); margin-top:3px; line-height:1.4; }
.mock-prompt-row {
  background:var(--light); border:1px solid var(--border);
  border-radius:9px; padding:11px 13px; display:flex; align-items:center; gap:10px;
}
.mock-prompt-input { flex:1; font-size: 19.5px; color:var(--muted); line-height:1.5; }
.mock-gen-btn {
  background:var(--fox); color:#fff; border:none;
  border-radius:5px; padding:6px 14px; font-size: 18.75px; font-weight:500;
  transition:background var(--t);
}
.mock-gen-btn:hover { background:var(--fox-dark); }
.mock-output-label { font-size: 16.5px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.mock-result-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mock-img-card {
  background:var(--light); border:1px solid var(--border);
  border-radius:var(--r-sm); aspect-ratio:1; overflow:hidden; position:relative;
}
.mock-img-gradient { width:100%; height:100%; }
.mock-img-label {
  position:absolute; bottom:6px; left:6px;
  font-size: 13.5px; font-weight:500; color:#fff;
  background:rgba(26,31,46,0.52); padding:2px 6px; border-radius:3px;
  backdrop-filter:blur(4px);
}

/* ─── STATS ──────────────────────────────────── */
.stats {
  padding:68px 5%; display:flex; justify-content:center;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stat-item {
  flex:1; max-width:220px; text-align:center;
  padding:0 28px; border-right:1px solid var(--border);
}
.stat-item:last-child { border-right:none; }
.stat-num { font-family:var(--serif); font-size: 69px; font-weight:300; color:var(--navy); line-height:1; }
.stat-num span { color:var(--fox); }
.stat-label { font-size: 22.5px; color:var(--muted); margin-top:10px; font-weight:300; line-height:1.55; }

/* ─── HOW IT WORKS ───────────────────────────── */
.steps-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; margin-top:50px;
}
.steps-grid.steps-grid--5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.step-card { background:var(--cream); padding:32px 26px; transition:background var(--t) var(--ease); }
.step-card:hover { background:var(--light); }
.step-num {
  font-family:var(--serif); font-size: 75px; font-weight:300;
  color:rgba(26,31,46,0.07); line-height:1; margin-bottom:14px;
}
.step-icon {
  width:40px; height:40px; border-radius:10px; background:rgba(232,82,10,0.07);
  display:flex; align-items:center; justify-content:center; margin-bottom:13px;
}
.step-icon svg { width:20px; height:20px; stroke:var(--fox); fill:none; stroke-width:1.5; }
.step-title { font-size: 25.5px; font-weight:500; color:var(--navy); margin-bottom:8px; line-height:var(--leading-tight); }
.step-desc  { font-size: 22.5px; color:var(--muted); line-height:1.75; font-weight:300; }

/* ─── IMAGE TYPES ────────────────────────────── */
.types-section { background:var(--navy); padding:96px 5%; }
.types-section .section-label { color:#ff8c5a; }
.types-section .section-title { color:#fff; }
.types-section .section-sub   { color:rgba(255,255,255,0.38); }
.types-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px; margin-top:44px;
}
.type-pill {
  background:rgba(255,255,255,0.39); border:1px solid rgba(255,255,255,0.09);
  border-radius:var(--r-md); padding:18px 12px;
  text-align:center; cursor:pointer; transition:all var(--t) var(--ease);
}
.type-pill:hover { background:rgba(232,82,10,0.15); border-color:rgba(232,82,10,0.3); transform:translateY(-3px); }
.type-icon { font-size: 33px; margin-bottom:7px; }
.type-name { font-size: 19.5px; color:rgba(255,255,255,0.55); line-height:1.5; }

/* Before / after sliders (examples) */
.ba-gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px; margin-top:48px; max-width:1240px; margin-left:auto; margin-right:auto;
}
.ba-slider { margin:0; }
.ba-stage {
  --ba-p:50%;
  position:relative; width:100%; aspect-ratio:16/10;
  border-radius:var(--r-lg); overflow:hidden;
  background:#0f172a; box-shadow:0 20px 50px rgba(0,0,0,0.35);
  user-select:none; touch-action:none;
}
.ba-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
}
.ba-base { z-index:0; }
.ba-top {
  position:absolute; inset:0; z-index:1;
  clip-path:polygon(0 0, var(--ba-p) 0, var(--ba-p) 100%, 0 100%);
  pointer-events:none;
}
.ba-top .ba-img { position:absolute; inset:0; }
.ba-divider {
  position:absolute; top:0; bottom:0; left:var(--ba-p); z-index:2;
  width:3px; margin-left:-1.5px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 14px rgba(0,0,0,0.35);
  pointer-events:none;
}
.ba-range {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; z-index:3; margin:0;
  -webkit-appearance:none; appearance:none;
}
.ba-tag {
  position:absolute; bottom:12px; z-index:2;
  font-size:13px; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase; padding:5px 10px; border-radius:6px;
  pointer-events:none;
}
.ba-tag-before { left:12px; background:rgba(15,23,42,0.72); color:#f8fafc; }
.ba-tag-after { right:12px; background:rgba(232,82,10,0.92); color:#fff; }
.ba-caption {
  margin-top:14px; font-size:18px; color:rgba(255,255,255,0.55);
  font-weight:500; text-align:center; line-height:1.45;
}
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.feat-card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-lg); padding:30px; transition:all var(--t) var(--ease);
}
.feat-card:hover { border-color:rgba(232,82,10,0.2); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feat-card.featured { background:var(--navy); border-color:var(--navy); }
.feat-card.featured:hover { box-shadow:0 16px 48px rgba(26,31,46,0.16); }
.feat-tag {
  display:inline-block; font-size: 17.25px; font-weight:500; letter-spacing:0.07em;
  text-transform:uppercase; padding:4px 10px; border-radius:var(--r-full);
  background:rgba(232,82,10,0.08); color:var(--fox); margin-bottom:18px;
}
.feat-card.featured .feat-tag { background:rgba(232,82,10,0.2); color:#ff8c5a; }
.feat-icon {
  width:44px; height:44px; border-radius:12px; background:var(--light);
  display:flex; align-items:center; justify-content:center; margin-bottom:17px;
}
.feat-card.featured .feat-icon { background:rgba(255,255,255,0.08); }
.feat-icon svg { width:22px; height:22px; stroke:var(--fox); fill:none; stroke-width:1.5; }
.feat-title { font-size: 28.5px; font-weight:500; color:var(--navy); margin-bottom:10px; line-height:1.35; }
.feat-card.featured .feat-title { color:#fff; }
.feat-desc { font-size: 22.5px; color:var(--muted); line-height:1.78; font-weight:300; }
.feat-card.featured .feat-desc { color:rgba(255,255,255,0.45); }
.feat-list { margin-top:16px; display:flex; flex-direction:column; gap:7px; }
.feat-item { font-size: 21px; color:var(--muted); display:flex; gap:8px; align-items:center; line-height:1.55; }
.feat-card.featured .feat-item { color:rgba(255,255,255,0.45); }
.feat-check {
  width:16px; height:16px; border-radius:50%; background:rgba(232,82,10,0.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.feat-check svg { width:10px; height:10px; stroke:var(--fox); fill:none; stroke-width:2; }

/* ─── PRICING ────────────────────────────────── */
.pricing-wrap { background:var(--light); padding:96px 5%; }
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px; margin-top:50px; max-width:860px;
  margin-left:auto; margin-right:auto;
}
.pricing-grid.pricing-grid--four {
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  max-width:1240px;
}
.pricing-grid--four .price-card { padding:22px 16px; }
.pricing-grid--four .price-amount { font-size:clamp(36px, 3.8vw, 54px); }
.pricing-grid--four .price-amount sup { font-size:0.42em; margin-top:0.4em; }
.pricing-grid--four .price-tier {
  text-transform:none;
  letter-spacing:0.02em;
  line-height:1.25;
  margin-bottom:6px;
}
.pricing-grid--four .price-period { margin-bottom:16px; }
.price-card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-xl); padding:34px 30px;
  position:relative; transition:all var(--t) var(--ease);
}
.price-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.price-card.popular { background:var(--navy); border-color:var(--navy); }
.price-card.popular:hover { box-shadow:0 16px 48px rgba(26,31,46,0.18); }
.popular-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--fox); color:#fff; font-size: 17.25px; font-weight:500;
  letter-spacing:0.07em; text-transform:uppercase;
  padding:5px 15px; border-radius:var(--r-full);
  white-space:nowrap; box-shadow:0 4px 12px rgba(232,82,10,0.3);
}
.price-tier { font-size: 19.5px; font-weight:500; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.price-card.popular .price-tier { color:rgba(255,255,255,0.38); }
.price-amount { font-family:var(--serif); font-size: 75px; font-weight:300; color:var(--navy); line-height:1; margin-bottom:4px; }
.price-card.popular .price-amount { color:#fff; }
.price-amount sup { font-family:var(--sans); font-size: 25.5px; font-weight:400; vertical-align:top; margin-top:11px; display:inline-block; }
.price-period { font-size: 21px; color:var(--muted); margin-bottom:24px; font-weight:300; line-height:1.55; }
.price-card.popular .price-period { color:rgba(255,255,255,0.38); }
.price-divider { height:1px; background:var(--border); margin-bottom:22px; }
.price-card.popular .price-divider { background:rgba(255,255,255,0.1); }
.price-features { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.price-feat { font-size: 22.5px; color:var(--muted); display:flex; gap:9px; align-items:flex-start; line-height:1.62; }
.price-card.popular .price-feat { color:rgba(255,255,255,0.55); }
.pf-check { flex-shrink:0; margin-top:2px; color:var(--fox); }
.pf-x     { flex-shrink:0; margin-top:2px; color:var(--muted); opacity:0.4; }
.btn-price {
  width:100%; padding:14px; border-radius:var(--r-full);
  font-size: 22.5px; font-weight:500; font-family:var(--sans);
  transition:all var(--t) var(--ease); cursor:pointer; border:1px solid var(--border);
}
.btn-price-outline { background:transparent; color:var(--navy); }
.btn-price-outline:hover { background:var(--navy); color:var(--cream); border-color:var(--navy); transform:translateY(-1px); }
.btn-price-fox { background:var(--fox); color:#fff; border-color:var(--fox); }
.btn-price-fox:hover { background:var(--fox-dark); transform:translateY(-1px); box-shadow:0 6px 18px rgba(232,82,10,0.3); }

/* ─── TESTIMONIALS ───────────────────────────── */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.testi-card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-lg); padding:30px; transition:all var(--t) var(--ease);
}
.testi-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.testi-stars { display:flex; gap:3px; margin-bottom:13px; color:var(--gold); font-size: 19.5px; }
.testi-text {
  font-family:var(--serif); font-size: clamp(27px, 0.75vw + 25.5px, 31.5px); font-weight:300;
  font-style:italic; color:var(--navy); line-height:1.75; margin-bottom:20px;
}
.testi-author { display:flex; align-items:center; gap:11px; }
.testi-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 18px; font-weight:500; color:#fff; flex-shrink:0;
}
.testi-name { font-size: 22.5px; font-weight:500; color:var(--navy); }
.testi-role { font-size: 19.5px; color:var(--muted); margin-top:3px; line-height:1.45; }

/* ─── CTA ────────────────────────────────────── */
.cta-section { padding:120px 5%; text-align:center; }
.cta-inner { max-width:580px; margin:0 auto; }
.cta-title {
  font-family:var(--serif); font-weight:300; color:var(--navy);
  font-size: clamp(54px,9vw,102px); margin-bottom:18px; line-height:1.08;
}
.cta-title em { font-style:italic; color:var(--fox); }
.cta-sub { font-size: clamp(25.5px, 0.6vw + 24px, 28.5px); color:var(--muted); line-height:1.82; margin-bottom:38px; font-weight:300; }
.cta-btns { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ─── FOOTER ─────────────────────────────────── */
footer { background:var(--navy); padding:60px 5% 36px; }
.footer-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:40px; margin-bottom:44px; padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand-wrap { flex-shrink:0; }
.footer-brand { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.footer-brand img { width:30px; height:30px; border-radius:7px; }
.footer-brand span { font-family:var(--serif); font-size: 30px; font-weight:600; color:#fff; }
.footer-tagline { font-size: 22.5px; color:rgba(255,255,255,0.32); max-width:240px; line-height:1.7; }
.footer-links { display:flex; gap:52px; flex-wrap:wrap; }
.footer-col h4 {
  font-size: 18.75px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); margin-bottom:14px;
}
.footer-col a { display:block; font-size: 22.5px; color:rgba(255,255,255,0.32); margin-bottom:10px; transition:color var(--t); line-height:1.5; }
.footer-col a:hover { color:#fff; }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  font-size: 21px; color:rgba(255,255,255,0.28); line-height:1.55;
}

/* ─── ANIMATIONS ─────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible   { opacity:1; transform:translateY(0); }
.reveal-delay-1   { transition-delay:0.10s; }
.reveal-delay-2   { transition-delay:0.20s; }
.reveal-delay-3   { transition-delay:0.30s; }
.reveal-delay-4   { transition-delay:0.40s; }

/* ─── RTL ────────────────────────────────────── */
[dir="rtl"] .nav-logo       { flex-direction:row-reverse; }
[dir="rtl"] .nav-links      { flex-direction:row-reverse; }
[dir="rtl"] .nav-links a::after { transform-origin:right; }
[dir="rtl"] .hero-badge     { flex-direction:row-reverse; }
[dir="rtl"] .stat-item      { border-right:none; border-left:1px solid var(--border); }
[dir="rtl"] .stat-item:last-child { border-left:none; }
[dir="rtl"] .mock-body      { direction:rtl; }
[dir="rtl"] .mock-img-label { left:auto; right:6px; }
[dir="rtl"] .feat-item      { flex-direction:row-reverse; }
[dir="rtl"] .price-feat     { flex-direction:row-reverse; }
[dir="rtl"] .testi-author   { flex-direction:row-reverse; }
[dir="rtl"] .footer-top     { flex-direction:row-reverse; }
[dir="rtl"] .footer-links   { flex-direction:row-reverse; }
[dir="rtl"] .footer-bottom  { flex-direction:row-reverse; }

/* ═══════════════════════════════════════════════
   TABLET  ≤1024px
═══════════════════════════════════════════════ */
@media (max-width:1200px) {
  .pricing-grid.pricing-grid--four { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:1024px) {
  .nav-links { gap:18px; }
  .nav-links a { font-size: 19.5px; }
  .types-grid  { grid-template-columns:repeat(4,1fr); }
  .steps-grid  { grid-template-columns:repeat(2,1fr); }
  .steps-grid.steps-grid--5 { grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ max-width:100%; }
}

/* ═══════════════════════════════════════════════
   MOBILE  ≤768px
═══════════════════════════════════════════════ */
@media (max-width:768px) {
  /* Lang bar — horizontal scroll */
  .lang-bar {
    justify-content:flex-start; padding:4px 4%;
    gap:1px; min-height:34px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; flex-wrap:nowrap;
  }
  .lang-bar::-webkit-scrollbar { display:none; }
  .lang-sep { display:none; }
  .lang-btn { font-size:10px; padding:3px 5px; }

  /* Nav */
  .nav { height:60px; top:34px; padding:0 4%; }
  .nav-links { display:none; }
  .nav-cta   { display:none; }
  .nav-hamburger { display:flex; }

  /* Hero */
  .hero { min-height:auto; padding:52px 4% 44px; }
  .hero h1 { font-size: clamp(54px,15vw,81px); }
  .hero-sub { font-size: 21px; }
  .hero-actions { flex-direction:column; align-items:center; width:100%; }
  .hero-actions .btn { width:100%; max-width:320px; }
  .hero-visual { display:none; }

  /* Stats 2×2 */
  .stats {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:1px; background:var(--border);
    border:1px solid var(--border); border-radius:var(--r-lg);
    overflow:hidden; padding:0; margin:0 4%;
  }
  .stat-item {
    max-width:none; padding:22px 16px;
    background:var(--cream); border-right:none;
  }
  .stat-item:nth-child(odd)  { border-right:1px solid var(--border); }
  .stat-item:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .stat-num { font-size: 54px; }

  /* Sections */
  .section { padding:60px 4%; }

  /* Steps — 1 col */
  .steps-grid { grid-template-columns:1fr; }
  .steps-grid.steps-grid--5 { grid-template-columns:1fr; }
  .step-card  { padding:26px 22px; }

  /* Types — 3 col */
  .types-section  { padding:64px 4%; }
  .types-grid     { grid-template-columns:repeat(3,1fr); gap:8px; margin-top:36px; }
  .type-pill      { padding:14px 8px; }
  .type-icon      { font-size: 27px; }
  .type-name      { font-size: 18px; }

  /* Features — 1 col */
  .features-grid  { grid-template-columns:1fr; gap:16px; }

  /* Pricing — 1 col */
  .pricing-wrap   { padding:64px 4%; }
  .pricing-grid   { grid-template-columns:1fr; max-width:420px; gap:24px; margin-top:40px; }
  .pricing-grid.pricing-grid--four { grid-template-columns:1fr; max-width:480px; }
  .price-card     { padding:28px 24px; }

  /* Testimonials — 1 col */
  .testi-grid     { grid-template-columns:1fr; gap:16px; margin-top:36px; }

  /* CTA */
  .cta-section { padding:80px 4%; }
  .cta-btns { flex-direction:column; align-items:center; }
  .cta-btns .btn { width:100%; max-width:320px; }

  /* Footer */
  .footer-top    { flex-direction:column; gap:28px; }
  .footer-links  { gap:24px; }
  .footer-bottom { flex-direction:column; gap:8px; text-align:center; }

  /* Softer reveal on mobile */
  .reveal { transform:translateY(16px); }
}

/* ═══════════════════════════════════════════════
   SMALL MOBILE  ≤480px
═══════════════════════════════════════════════ */
@media (max-width:480px) {
  .section       { padding:52px 4%; }
  .section-title { font-size: clamp(39px,12vw,54px); }
  .hero          { padding:44px 4% 36px; }
  .hero h1       { font-size: clamp(48px,14.25vw,69px); }
  .types-section { padding:52px 4%; }
  .types-grid    { grid-template-columns:repeat(3,1fr); gap:7px; }
  .pricing-grid  { max-width:100%; }
  .price-amount  { font-size: 63px; }
  .footer-links  { flex-direction:column; gap:20px; }
  .nav-logo-text { font-size: 28.5px; }
  .nav-mobile-links a { font-size: 36px; }
}

/* ═══════════════════════════════════════════════
   SUBPAGES · Contact · Legal
═══════════════════════════════════════════════ */
.page-sub .nav-cta { display:none; }
.nav-link--current { color:var(--fox); font-weight:500; }

.subpage-main {
  padding:100px 5% 72px;
  max-width:720px;
  margin:0 auto;
}
.subpage-main--legal { max-width:820px; }
.subpage-header { margin-bottom:36px; }
.subpage-title {
  font-family:var(--serif);
  font-size: clamp(36px,5vw,52px);
  font-weight:300;
  color:var(--navy);
  margin-bottom:12px;
  line-height:1.12;
}
.subpage-lead { font-size: clamp(17px,0.4vw + 16px, 20px); color:var(--muted); line-height:1.75; font-weight:300; }

.contact-form { display:flex; flex-direction:column; gap:18px; }
.contact-label { display:flex; flex-direction:column; gap:8px; font-size: 15px; font-weight:500; color:var(--navy); }
.contact-label input,
.contact-label textarea {
  font-family:var(--sans);
  font-size: 16px;
  padding:12px 14px;
  border-radius:var(--r-md);
  border:1px solid var(--border-md);
  background:#fff;
  color:var(--navy);
  transition:border-color var(--t);
}
.contact-label input:focus,
.contact-label textarea:focus {
  outline:none;
  border-color:var(--fox);
}
.contact-submit { align-self:flex-start; margin-top:8px; }
.contact-footnote { font-size: 14px; color:var(--muted); line-height:1.6; margin-top:8px; max-width:520px; }

.legal-article { padding-bottom:48px; }
.legal-h1 {
  font-family:var(--serif);
  font-size: clamp(32px,4vw,46px);
  font-weight:300;
  margin-bottom:10px;
  color:var(--navy);
}
.legal-updated { font-size: 14px; color:var(--muted); margin-bottom:32px; }
.legal-h2 {
  font-size: clamp(17px,0.3vw + 16px, 20px);
  font-weight:600;
  color:var(--navy);
  margin:28px 0 10px;
}
.legal-p { font-size: 16px; color:var(--muted); line-height:1.75; margin-bottom:12px; font-weight:300; }

.subpage-footer { background:var(--navy); padding:48px 5% 28px; margin-top:64px; }
.subpage-footer .footer-top { margin-bottom:0; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.08); }
.subpage-footer .footer-brand span { color:#fff; }
.subpage-footer .footer-bottom { color:rgba(255,255,255,0.28); font-size: 14px; margin-top:20px; }

@media (max-width:768px) {
  .subpage-main { padding:88px 4% 56px; }
}

/* ═══════════════════════════════════════════════
   PREFERS REDUCED MOTION
═══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .reveal,.hero-badge,.hero h1,.hero-sub,.hero-actions,.hero-note,.hero-visual {
    animation:none; opacity:1; transform:none; transition:none;
  }
}