/* ==========================================================
   Voice.ge — 8pt grid system
   ყველა ზომა (spacing, line-height, ღილაკები, აიქონები) = 8-ის ჯერადი.
   გამონაკლისი: 4px — მხოლოდ მცირე შიდა ნახევარ-ნაბიჯად (half-step).
   ========================================================== */
:root {
  /* spacing scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px; --s20: 160px;

  /* colors */
  --ink: #0a0a0a;
  --ink-2: #4a4a4a;
  --ink-3: #8a8a8a;
  --line: #e8e8e8;
  --paper: #ffffff;
  --accent: #f70f68;
  --night: #05070d;
  --sun: #ffdb6b;
  --blush: #fff0f3;
  --mint: #dcf5b8;

  /* type scale: size / line-height (ორივე 8-ზე) */
  --f-display: 800 64px/72px var(--sans);
  --f-h1: 700 48px/56px var(--sans);
  --f-h2: 700 40px/48px var(--sans);
  --f-h3: 700 24px/32px var(--sans);
  --f-h4: 600 20px/24px var(--sans);
  --f-lead: 400 18px/32px var(--sans);
  --f-body: 400 16px/24px var(--sans);
  --f-small: 400 14px/24px var(--sans);
  --f-micro: 500 12px/16px var(--sans);
  --f-quote: 400 80px/88px var(--serif);

  --sans: "Inter", "Noto Sans Georgian", system-ui, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;

  --radius: 8px;
  --container: 1280px;
  --gutter: var(--s8);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { font: var(--f-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased }
img { display: block; max-width: 100%; height: auto }
a { color: inherit; text-decoration: none }
.accent { color: var(--accent) }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) }

/* ---------- buttons: height 40 (md) / 48 (lg), padding 16 / 24 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  height: 40px; padding: 0 var(--s2); border-radius: var(--radius);
  font: 500 14px/24px var(--sans); white-space: nowrap;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.btn-lg { height: 48px; padding: 0 var(--s3); font-size: 16px }
.btn-dark { background: var(--ink); color: #fff }
.btn-dark:hover { background: #2a2a2a }
.btn-ghost { background: var(--paper); border-color: var(--line); color: var(--ink) }
.btn-ghost:hover { border-color: var(--ink) }
.btn:focus-visible, .nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2) }

/* icons: 16 / 24 */
.icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.icon-sm { width: 16px; height: 16px }

/* ---------- header: height 72 → 8×9 ---------- */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(16px) }
.site-header .container { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3) }
.logo { display: inline-flex; align-items: center }
.logo img { height: 32px; width: auto }
.nav { display: flex; align-items: center; gap: var(--s4) }
.nav a:not(.btn) { font: var(--f-small); color: var(--ink-2) }
.nav a:not(.btn):hover, .nav a[aria-current] { color: var(--ink) }
.lang { display: inline-flex; align-items: center; gap: 4px; font: var(--f-micro); color: var(--ink-2) }

/* ---------- hero ---------- */
.hero { padding: var(--s16) 0 var(--s12); text-align: center }
.hero h1 { font: var(--f-display); letter-spacing: -.03em }
.hero p { font: var(--f-body); color: var(--ink-2); margin: var(--s3) auto 0; max-width: 640px }
.hero .btn-row { justify-content: center; margin-top: var(--s4) }

/* ---------- clients ---------- */
.clients { padding-bottom: var(--s12) }
.clients-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2) }
.clients-head span { font: var(--f-micro); color: var(--ink-2) }
.clients-head a { display: inline-flex; align-items: center; gap: 4px; font: var(--f-micro) }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 var(--s8), #000 calc(100% - var(--s8)), transparent) }
.marquee-track { display: flex; gap: var(--s1); width: max-content; animation: scroll 48s linear infinite }
.marquee:hover .marquee-track { animation-play-state: paused }
.tile { width: 240px; height: 240px; flex: none; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); display: grid; place-items: center; padding: var(--s3) }
.tile img { width: 100%; height: 100%; object-fit: contain }
@keyframes scroll { to { transform: translateX(calc(-50% - var(--s1) / 2)) } }

/* ---------- dark band ---------- */
.band { background: var(--night); color: #fff; text-align: center; padding: var(--s8) 0 }
.band h2 { font: var(--f-h2); letter-spacing: -.02em; max-width: 720px; margin: 0 auto }
.band p { font: var(--f-body); color: #b8b8c0; margin: var(--s2) auto 0; max-width: 400px }

/* ---------- quote ---------- */
.quote { background: var(--sun); text-align: center; padding: var(--s20) 0 }
.quote blockquote { font: var(--f-quote); letter-spacing: -.01em; max-width: 800px; margin: 0 auto }
.quote .btn { margin-top: var(--s6) }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch }
.split-text { padding: var(--s12) var(--s8); display: flex; flex-direction: column; justify-content: center; max-width: 640px; margin-left: auto; width: 100% }
.split-text h2 { font: var(--f-h2); letter-spacing: -.02em }
.split-text p { color: var(--ink-2); margin: var(--s3) 0 var(--s4); max-width: 400px }
.studio { min-height: 400px; background:
    radial-gradient(circle at 70% 30%, rgba(247,15,104,.35), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(80,140,255,.3), transparent 48%), var(--night);
  display: grid; place-items: center; color: rgba(255,255,255,.88) }
.studio .icon { width: 128px; height: 128px; stroke-width: .75 }

/* ---------- footer ---------- */
.site-footer { padding: var(--s12) 0 var(--s8) }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--s4); box-shadow: inset 0 1px var(--line); padding-top: var(--s8) }
.footer-brand .logo, .footer-brand .brand { display: flex; width: max-content }
.footer-brand p { font: var(--f-small); color: var(--ink-2); margin: var(--s1) 0 var(--s3); max-width: 320px }
.social { display: flex; gap: var(--s2) }
.social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--ink-2) }
.social a:hover { background: var(--blush); color: var(--ink) }
.footer-col h4 { font: 600 14px/24px var(--sans); margin-bottom: var(--s2) }
.footer-col ul { list-style: none; display: grid; gap: var(--s1) }
.footer-col a { display: block; font: var(--f-small); color: var(--ink-2) }
.footer-col a:hover { color: var(--ink) }
.copyright { font: var(--f-micro); color: var(--ink-3); margin-top: var(--s8) }

/* ---------- about ---------- */
.about-hero { background: var(--blush); padding: var(--s8) 0 var(--s12) }
.about-hero h1 { font: var(--f-h1); letter-spacing: -.02em; margin-bottom: var(--s6) }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center }
.portrait { height: 376px; background: var(--mint); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden }
.portrait .icon { width: 160px; height: 160px; stroke-width: .75 }
.intro-text { max-width: 400px }
.intro-text h3 { font: var(--f-h3); margin-bottom: var(--s2) }
.intro-text p { font: var(--f-small); color: var(--ink-2) }
.interests { padding: var(--s12) 0 }
.interests h3 { font: var(--f-h3); margin-bottom: var(--s2) }
.interests > .container > p { color: var(--ink-2); max-width: 720px }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s6) }
.gallery div { aspect-ratio: 1 / 1; border-radius: var(--radius) }
.g1 { background: linear-gradient(135deg, #ffd3dc, #c6e46a) }
.g2 { background: radial-gradient(circle at 40% 60%, #e9e3a0 0 16%, transparent 40%), #c9c8f0 }
.g3 { background: radial-gradient(circle at 60% 40%, #f2f7c8, transparent 64%), #d6eda8 }
.timeline { list-style: none; margin-top: var(--s10) }
.timeline li { display: flex; justify-content: space-between; align-items: center; height: 64px; border-bottom: 1px solid var(--line) }
.timeline strong { font: var(--f-h4) }
.timeline span { font: var(--f-micro); color: var(--ink-3) }

/* ==========================================================
   tablet ≤ 1024
   ========================================================== */
@media (max-width: 1024px) {
  :root { --gutter: var(--s4); --f-display: 800 56px/64px var(--sans); --f-quote: 400 64px/72px var(--serif) }
  .footer-grid { grid-template-columns: repeat(3, 1fr) }
  .footer-brand { grid-column: 1 / -1 }
  .tile { width: 200px; height: 200px }
}

/* ==========================================================
   mobile ≤ 640 — gutter 16, section rhythm 64
   ========================================================== */
@media (max-width: 640px) {
  :root {
    --gutter: var(--s2);
    --f-display: 800 40px/48px var(--sans);
    --f-h1: 700 32px/40px var(--sans);
    --f-h2: 700 32px/40px var(--sans);
    --f-h3: 700 20px/32px var(--sans);
    --f-quote: 400 40px/48px var(--serif);
  }
  .nav a:not(.btn):not(.lang) { display: none }
  .nav { gap: var(--s2) }
  .logo img { height: 24px }
  .hero { padding: var(--s8) 0 var(--s6) }
  .hero p { font: var(--f-small) }
  .btn-row { justify-content: center }
  .clients { padding-bottom: 0 }
  .tile { width: 96px; height: 96px; padding: var(--s1) }
  .band { padding: var(--s6) 0 }
  .band h2 { font: 700 20px/24px var(--sans) }
  .band p { font: var(--f-micro) }
  .quote { padding: var(--s12) 0 }
  .quote .btn { margin-top: var(--s4) }
  .split { grid-template-columns: 1fr }
  .studio { min-height: 240px; order: -1 }
  .studio .icon { width: 96px; height: 96px }
  .split-text { padding: var(--s4) var(--s2) var(--s6) }
  .split-text .btn-row { justify-content: flex-start }
  .site-footer { padding: 0 0 var(--s6) }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s4); padding-top: var(--s4) }
  .about-hero { padding: var(--s4) 0 var(--s6) }
  .about-hero h1 { margin-bottom: var(--s3) }
  .intro { grid-template-columns: 1fr; gap: var(--s3) }
  .portrait { height: 240px }
  .interests { padding: var(--s6) 0 }
  .gallery { gap: var(--s1); margin-top: var(--s4) }
  .timeline { margin-top: var(--s6) }
  .timeline li { height: 56px }
}

@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none } }

/* ==========================================================
   voicegroup.ge — metro hub
   ========================================================== */
.brand { display: inline-flex; align-items: center; gap: var(--s1); font: 700 20px/32px var(--sans); letter-spacing: -.02em }
.brand img { width: 40px; height: 32px }
.group-hero { padding: var(--s12) 0 var(--s8) }
.group-hero h1 { font: var(--f-display); letter-spacing: -.03em; max-width: 880px }
.group-hero p { font: var(--f-lead); color: var(--ink-2); margin-top: var(--s3); max-width: 560px }
.metro { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 232px; gap: var(--s2); padding-bottom: var(--s12) }
.m { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s3);
     border-radius: var(--radius); overflow: hidden; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s }
.m:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(0,0,0,.32) }
.m:active { transform: scale(.98) }
.m:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px }
.m .icon { width: 40px; height: 40px; stroke-width: 1.25 }
.m-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2) }
.m-url { font: var(--f-micro); opacity: .64 }
.m h2 { font: var(--f-h3); letter-spacing: -.01em }
.m p { font: var(--f-small); opacity: .8; margin-top: 4px }
.m-go { display: inline-flex; align-items: center; gap: var(--s1); font: 500 14px/24px var(--sans); margin-top: var(--s2) }
.m-go .icon { width: 16px; height: 16px; stroke-width: 1.5; transition: transform .2s }
.m:hover .m-go .icon { transform: translateX(4px) }
.m-xl { grid-column: span 2; grid-row: span 2; padding: var(--s5) }
.m-xl .icon { width: 64px; height: 64px; stroke-width: 1 }
.m-xl h2 { font: var(--f-h1); letter-spacing: -.02em }
.m-xl p { font: var(--f-body) }
.m-wide { grid-column: span 2 }
.m-full { grid-column: span 4 }
.m-voice { background: var(--night); color: #fff }
.m-voice .accent-bg { position: absolute; inset: auto -64px -64px auto; width: 320px; height: 320px; border-radius: 50%;
     background: radial-gradient(circle, rgba(247,15,104,.56), transparent 64%); pointer-events: none }
.m-shop { background: var(--accent); color: #fff }
.m-rent { background: var(--sun); color: var(--ink) }
.m-show { background: var(--mint); color: var(--ink) }
.m-blog { background: var(--blush); color: var(--ink); flex-direction: row; align-items: center; gap: var(--s3) }
.m-blog .m-body { flex: 1 }
.contact-band { background: var(--night); color: #fff; padding: var(--s8) 0 }
.contact-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) }
.contact-band h2 { font: var(--f-h2); letter-spacing: -.02em }
.btn-accent { background: var(--accent); color: #fff }
.btn-accent:hover { background: #d90b5a }
.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.24) }
.btn-light:hover { border-color: #fff }

@media (max-width: 1024px) {
  .metro { grid-auto-rows: 200px }
}
@media (max-width: 640px) {
  .brand { font: 700 16px/24px var(--sans) }
  .brand img { width: 32px; height: 24px }
  .group-hero { padding: var(--s6) 0 var(--s4) }
  .group-hero p { font: var(--f-body) }
  .metro { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: var(--s1); padding-bottom: var(--s6) }
  .m { padding: var(--s2) }
  .m-xl { padding: var(--s3); grid-row: span 2 }
  .m-xl h2 { font: var(--f-h2) }
  .m-xl .icon { width: 48px; height: 48px }
  .m-wide, .m-full { grid-column: span 2 }
  .m h2 { font: 700 16px/24px var(--sans) }
  .m p { font: var(--f-micro) }
  .m-url, .m-go { display: none }
  .m-xl .m-url, .m-xl .m-go { display: inline-flex }
  .m-blog .m-go { display: none }
  .contact-band { padding: var(--s6) 0 }
}
.m .m-go .icon { width: 16px; height: 16px; stroke-width: 1.5 }