/*
Theme Name: Uniquefield
Theme URI: https://uniquefield.hu
Author: Uniquefield
Author URI: https://uniquefield.hu
Description: Custom theme for Uniquefield - AI first Online marketing agency
Version: 2.0.0
License: Private
Text Domain: uniquefield
*/

/* fonts self-hosted via @font-face in header.php */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #0A0A0A;
  --white: #F5F5F0;
  --accent: #FF6200;
  --mid: #888884;
  --light: #E8E8E3;
  --border: rgba(10,10,10,.1);
  --border2: rgba(10,10,10,.18);
  --D: 'Syne', sans-serif;
  --B: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  font-family: var(--B);
  background: var(--white);
  color: var(--black);
  line-height: 1.7;
  font-size: 16px;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* Visited links should keep the link's color, not the browser default purple. */
a:visited { color: inherit; }

/* NAV — bare `nav {}` rule removed; the active nav is `.uf-nav` in header.php (and the React nav inside #hp-root on the homepage). */

.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--black); }

.nav-wordmark {
  font-family: var(--D);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--black);
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 0; list-style: none; align-items: center; }

.nav-links a {
  color: var(--mid);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px;
  transition: color .15s;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.nav-links a:hover, .nav-links a.active { color: var(--black); }
.nav-services-link { color: var(--black) !important; position: relative; }

.nav-services-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 16px; right: 16px;
  height: 1.5px;
  background: var(--accent);
}

.nav-dropdown { position: relative; }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: -8px;
  background: var(--black);
  padding: 8px;
  min-width: 280px;
  z-index: 200;
  box-shadow: 0 24px 48px rgba(0,0,0,.18);
}

.nav-dropdown:hover .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
  display: block;
  padding: 12px 16px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: color .12s;
  border-left: 2px solid transparent;
}

.nav-dropdown-menu a:hover { color: var(--white); border-left-color: var(--accent); }

.nav-dropdown-menu a span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.3);
  margin-top: 2px;
}

.nav-cta {
  background: var(--accent);
  color: var(--black);
  padding: 9px 22px;
  font-family: var(--D);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .2s;
}

.nav-cta:hover { opacity: .85; }

/* BUTTONS */
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 14px 28px;
  font-family: var(--D);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .2s;
}

.btn-primary { background: var(--accent); color: var(--black); }
.btn-primary:hover { opacity: .88; }
.btn-outline { border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.75); background: transparent; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline-dark { border: 1px solid var(--border2); color: var(--black); background: transparent; }
.btn-outline-dark:hover { border-color: var(--black); }

/* SECTIONS */
section { padding: 96px 48px; }
.section-inner { max-width: 1100px; margin: 0 auto; }

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--D);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 20px;
}

.section-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--accent); flex-shrink: 0; }
.section-label.on-dark { color: rgba(255,255,255,.3); }

.section-title {
  font-family: var(--D);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--black);
  margin-bottom: 20px;
}

.section-title.on-dark { color: var(--white); }
.section-sub { font-size: 16px; color: var(--mid); max-width: 500px; line-height: 1.75; }
.section-sub.on-dark { color: rgba(255,255,255,.45); }
.section-grey { background: var(--light); }
.section-black { background: var(--black); }

/* PAGE HERO */
.page-hero { padding: 136px 48px 80px; background: var(--black); }
.page-hero-inner { max-width: 1100px; margin: 0 auto; }

.page-hero-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--D);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 24px;
}

.page-hero-tag::before { content: ''; display: block; width: 20px; height: 2px; background: var(--accent); flex-shrink: 0; }

.page-hero h1 {
  font-family: var(--D);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 24px;
}

.page-hero p { font-size: 16px; color: rgba(255,255,255,.5); max-width: 540px; line-height: 1.8; }

/* CARDS */
.card { background: var(--white); border: 1px solid var(--border); padding: 32px; }
.card-grey { background: var(--light); border: none; }

/* TAGS */
.tag { display: inline-block; font-family: var(--D); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; }
.tag-orange { background: var(--accent); color: var(--black); }
.tag-black { background: var(--black); color: var(--white); }
.tag-grey { background: var(--light); color: var(--mid); border: 1px solid var(--border); }
.tag-outline { border: 1px solid var(--border2); color: var(--mid); }

/* CTA STRIP */
.cta-strip { background: var(--black); padding: 64px 56px; text-align: center; margin-top: 56px; }

.cta-strip h2 {
  font-family: var(--D);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--white);
  margin-bottom: 14px;
}

.cta-strip p { font-size: 15px; color: rgba(255,255,255,.45); max-width: 420px; margin: 0 auto 32px; }
.cta-strip .btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* FOOTER — bare `footer {}` rule removed; the active footer is in footer.php with inline tokens. */

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); }
.footer-wordmark { font-family: var(--D); font-size: 12px; font-weight: 800; color: var(--white); letter-spacing: .04em; text-transform: uppercase; }
.footer-links { display: flex; gap: 28px; list-style: none; }
.footer-links a { font-size: 11px; color: rgba(255,255,255,.35); text-decoration: none; transition: color .15s; letter-spacing: .04em; text-transform: uppercase; }
.footer-links a:hover { color: var(--white); }
.footer-copy { font-size: 11px; color: rgba(255,255,255,.2); }

/* HOMEPAGE HERO */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--black); overflow: hidden; padding-top: 64px; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 48px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--D);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 40px;
}

.hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }

.hero h1 {
  font-family: var(--D);
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.0;
  color: var(--white);
  margin-bottom: 32px;
  max-width: 820px;
}

.hero h1 .word-swap { color: var(--accent); display: inline-block; min-width: 4px; }
.hero-sub { font-size: 17px; color: rgba(255,255,255,.45); line-height: 1.8; max-width: 540px; margin-bottom: 48px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* STATS BAR */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); background: var(--white); }
.stat-item { padding: 40px 48px; border-right: 1px solid var(--border); }
.stat-item:last-child { border-right: none; }

.stat-number {
  font-family: var(--D);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--black);
  margin-bottom: 8px;
}

.stat-number sup { font-size: .55em; color: var(--accent); vertical-align: super; }
.stat-desc { font-size: 13px; color: var(--mid); line-height: 1.5; max-width: 160px; }

/* TICKER */
.ticker { background: var(--black); height: 36px; overflow: hidden; display: flex; align-items: center; }
.ticker-inner { display: flex; white-space: nowrap; animation: tick 28s linear infinite; }

.ticker-item {
  font-family: var(--D);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

@keyframes tick { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ICP */
.icp { background: var(--light); }
.icp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); margin-top: 56px; border: 1px solid var(--border); }
.icp-card { background: var(--light); padding: 28px 24px; transition: background .15s; }
.icp-card:hover { background: var(--white); }
.icp-icon { font-size: 22px; margin-bottom: 14px; }
.icp-card h4 { font-family: var(--D); font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--black); margin-bottom: 8px; }
.icp-card p { font-size: 13px; color: var(--mid); line-height: 1.6; }

/* SERVICES GRID */
.services-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border); margin-top: 56px; border: 1px solid var(--border); }
.svc-card { background: var(--white); padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; text-decoration: none; transition: background .15s; }
.svc-card:hover { background: var(--light); }
.svc-card h3 { font-family: var(--D); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--black); }
.svc-card p { font-size: 14px; color: var(--mid); line-height: 1.65; flex: 1; }
.svc-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 16px; }
.svc-price { font-family: var(--D); font-size: 13px; font-weight: 700; color: var(--black); }
.svc-arrow { font-size: 18px; color: rgba(10,10,10,.15); transition: color .15s; }
.svc-card:hover .svc-arrow { color: var(--accent); }
.svc-card.featured { border-top: 2px solid var(--accent); }

/* PROCESS */
.process { background: var(--black); }
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.06); margin-top: 56px; }
.p-step { background: var(--black); padding: 36px 28px; }
.p-num { font-family: var(--D); font-size: 9px; font-weight: 700; color: var(--accent); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 20px; }
.p-step h4 { font-family: var(--D); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--white); margin-bottom: 10px; }
.p-step p { font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.6; }

/* RESPONSIVE */
@media (max-width: 900px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  section, .page-hero { padding-left: 20px; padding-right: 20px; }
  footer { padding: 32px 20px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}

@media (max-width: 1100px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-top: 1px solid var(--border); }
  .stat-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
  .icp-grid { grid-template-columns: repeat(2,1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
  .hero-content { padding: 60px 20px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-item { padding: 28px 24px; }
  .icp-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
}