/* =========================================================================
   KHAMITOV LEGAL — style.css
   Asl loyihadagi src/styles.css (Tailwind CSS v4 + design tokens) dan
   oddiy CSS3 ga 1:1 ko'chirilgan versiya. Rang qiymatlari (oklch) originalda
   qanday bo'lsa, xuddi shunday saqlangan — oklch() barcha zamonaviy
   brauzerlarda qo'llab-quvvatlanadigan standart CSS rang formati.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Barlow:wght@300;400;500;600&display=swap");

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS (asl :root / .dark bloklari)
   ------------------------------------------------------------------------- */
:root {
  --radius: 0.25rem;

  --navy: oklch(0.28 0.062 264);
  --navy-deep: oklch(0.2 0.052 264);
  --gold: oklch(0.74 0.098 85);
  --gold-soft: oklch(0.86 0.055 88);
  --charcoal: oklch(0.32 0.008 260);

  --background: oklch(0.995 0.003 90);
  --foreground: oklch(0.24 0.012 262);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.28 0.062 264);
  --primary-foreground: oklch(0.985 0.005 250);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Barlow", system-ui, sans-serif;

  /* Tailwind spacing scale (1 unit = 0.25rem) — o'zgarmas, referens sifatida */
  --container-max: 80rem; /* max-w-7xl */
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

ul,
ol,
dl,
dd,
h1,
h2,
h3,
p,
blockquote,
figure {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  font-weight: 500;
}

input,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* -------------------------------------------------------------------------
   3. UTILITIES (asl @utility bloklari + umumiy yordamchilar)
   ------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem; /* px-5 */
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .container {
    padding-left: 2rem; /* sm:px-8 */
    padding-right: 2rem;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   4. HEADER (SiteHeader.tsx)
   ========================================================================= */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background-color: transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.site-header.is-solid {
  background-color: color-mix(in oklab, var(--navy-deep) 95%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in oklab, var(--gold) 20%, transparent);
}

.site-header__bar {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem; /* py-4 px-5 */
}
@media (min-width: 640px) {
  .site-header__bar {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px) {
  .site-header__bar {
    padding-top: 1.25rem; /* lg:py-5 */
    padding-bottom: 1.25rem;
  }
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.site-header__brand-name {
  font-family: var(--font-display);
  font-size: 1.125rem; /* text-lg */
  letter-spacing: 0.18em;
  color: var(--primary-foreground);
}
@media (min-width: 640px) {
  .site-header__brand-name {
    font-size: 1.25rem; /* sm:text-xl */
  }
}
.site-header__brand-name .gold {
  color: var(--gold);
}
.site-header__brand-sub {
  margin-top: 0.25rem;
  font-size: 0.625rem; /* text-[10px] */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--primary-foreground) 60%, transparent);
}

.site-header__nav {
  display: none;
  align-items: center;
  gap: 1.75rem; /* gap-7 */
}
@media (min-width: 1024px) {
  .site-header__nav {
    display: flex;
  }
}
.site-header__nav a {
  font-size: 0.8125rem; /* text-[13px] */
  color: color-mix(in oklab, var(--primary-foreground) 75%, transparent);
  transition: color 0.2s;
}
.site-header__nav a:hover {
  color: var(--gold);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-header__phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--gold) 50%, transparent);
  padding: 0.625rem 1rem; /* py-2.5 px-4 */
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--gold);
  transition: background-color 0.2s, color 0.2s;
}
.site-header__phone:hover {
  background-color: var(--gold);
  color: var(--navy-deep);
}
@media (min-width: 768px) {
  .site-header__phone {
    display: inline-flex;
  }
}
.site-header__phone svg {
  width: 0.875rem;
  height: 0.875rem;
}

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in oklab, var(--primary-foreground) 25%, transparent);
  background: transparent;
  color: var(--primary-foreground);
}
@media (min-width: 1024px) {
  .site-header__toggle {
    display: none;
  }
}
.site-header__toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.site-header__mobile-nav {
  display: none;
  border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 10%, transparent);
  background-color: var(--navy-deep);
}
.site-header__mobile-nav.is-open {
  display: block;
}
@media (min-width: 1024px) {
  .site-header__mobile-nav {
    display: none !important;
  }
}
.site-header__mobile-nav nav {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.25rem;
}
@media (min-width: 640px) {
  .site-header__mobile-nav nav {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.site-header__mobile-nav a {
  border-bottom: 1px solid color-mix(in oklab, var(--primary-foreground) 10%, transparent);
  padding: 1rem 0;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
}
.site-header__mobile-nav a:last-of-type {
  border-bottom: 0;
}
.site-header__mobile-cta {
  margin: 1rem 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--gold);
  padding: 0.875rem 1.25rem; /* py-3.5 px-5 */
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy-deep);
}
.site-header__mobile-cta svg {
  width: 1rem;
  height: 1rem;
}

/* =========================================================================
   5. BUTTONS / LINKS (shared)
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem; /* py-4 px-8 */
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  border: none;
}
.btn svg {
  width: 1rem;
  height: 1rem;
}
.btn--gold {
  background-color: var(--gold);
  color: var(--navy-deep);
}
.btn--gold:hover {
  background-color: var(--gold-soft);
}
.btn--outline {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--primary-foreground) 25%, transparent);
  color: var(--primary-foreground);
}
.btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn--navy {
  background-color: var(--navy);
  color: var(--primary-foreground);
  width: 100%;
}
.btn--navy:hover {
  background-color: var(--navy-deep);
}
@media (min-width: 640px) {
  .btn--navy {
    width: auto;
  }
}

/* =========================================================================
   6. SECTION HEAD (SectionHead component)
   ========================================================================= */
.section-head {
  max-width: 42rem; /* max-w-2xl */
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head__title {
  margin-top: 1rem;
  font-size: 1.875rem; /* text-3xl */
  line-height: 1.2;
  color: var(--foreground);
}
.section-head__title--light {
  color: var(--primary-foreground);
}
@media (min-width: 640px) {
  .section-head__title {
    font-size: 2.25rem; /* sm:text-4xl */
  }
}
@media (min-width: 1024px) {
  .section-head__title {
    font-size: 2.75rem; /* lg:text-[2.75rem] */
  }
}
.section-head__rule {
  margin-top: 1.5rem;
  height: 1px;
  width: 3rem;
  background-color: var(--gold);
}
.section-head--center .section-head__rule {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
   7. HERO
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-deep);
  padding-top: 7rem; /* pt-28 */
  padding-bottom: 0;
}
@media (min-width: 1024px) {
  .hero {
    padding-top: 8rem; /* lg:pt-32 */
  }
}
.hero__pattern {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 78px,
    var(--gold) 79px
  );
}
.hero__grid {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  align-items: end;
  gap: 3rem; /* gap-12 */
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .hero__grid {
    padding: 0 2rem;
  }
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.5rem; /* lg:gap-10 */
  }
}
.hero__copy {
  padding-bottom: 3.5rem; /* pb-14 */
}
@media (min-width: 1024px) {
  .hero__copy {
    padding-bottom: 6rem; /* lg:pb-24 */
  }
}
.hero__title {
  margin-top: 1.5rem;
  font-size: 2.25rem; /* text-4xl */
  line-height: 1.12;
  color: var(--primary-foreground);
}
@media (min-width: 640px) {
  .hero__title {
    font-size: 3rem; /* sm:text-5xl */
  }
}
@media (min-width: 1024px) {
  .hero__title {
    font-size: 3.5rem; /* lg:text-[3.5rem] */
  }
}
.hero__text {
  margin-top: 1.75rem;
  max-width: 36rem; /* max-w-xl */
  font-size: 1rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
}
.hero__brandline {
  margin-top: 2.25rem;
  border-left: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  padding-left: 1.25rem;
}
.hero__brandline-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--primary-foreground);
}
.hero__brandline-full {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--primary-foreground) 60%, transparent);
}
.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
  }
}
.hero__stats {
  margin-top: 3rem;
  display: grid;
  max-width: 32rem; /* max-w-lg */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 10%, transparent);
  padding-top: 2rem;
}
.hero__stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
}
.hero__stat-label {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--primary-foreground) 55%, transparent);
}
.hero__portrait-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
@media (min-width: 1024px) {
  .hero__portrait-wrap {
    justify-content: flex-end;
  }
}
.hero__portrait-frame {
  position: absolute;
  bottom: 0;
  height: 85%;
  width: 100%;
  max-width: 28rem; /* max-w-md */
  border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent);
}
@media (min-width: 1024px) {
  .hero__portrait-frame {
    right: 1rem;
  }
}
.hero__portrait {
  position: relative;
  width: 100%;
  max-width: 28rem;
  object-fit: contain;
  object-position: bottom;
}

/* =========================================================================
   8. ABOUT
   ========================================================================= */
.about {
  padding: 5rem 0; /* py-20 */
}
@media (min-width: 640px) {
  .about {
    padding: 7rem 0; /* sm:py-28 */
  }
}
.about__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  gap: 3.5rem; /* gap-14 */
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .about__grid {
    padding: 0 2rem;
  }
}
@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 5rem; /* lg:gap-20 */
  }
}
.about__portrait-wrap {
  position: relative;
}
.about__portrait-corner {
  display: none;
  position: absolute;
  left: -1rem;
  top: -1rem;
  height: 8rem;
  width: 8rem;
  border-left: 1px solid color-mix(in oklab, var(--gold) 50%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--gold) 50%, transparent);
}
@media (min-width: 1024px) {
  .about__portrait-corner {
    display: block;
  }
}
.about__portrait {
  position: relative;
  width: 100%;
  object-fit: cover;
}
.about__lead {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
}
.about__body {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.about__facts {
  margin-top: 2.5rem;
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  background-color: var(--border);
}
@media (min-width: 640px) {
  .about__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.about__fact {
  background-color: var(--card);
  padding: 1.5rem;
}
.about__fact dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.about__fact dd {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
}

/* =========================================================================
   9. SERVICES
   ========================================================================= */
.services {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--secondary) 40%, transparent);
  padding: 5rem 0;
}
@media (min-width: 640px) {
  .services {
    padding: 7rem 0;
  }
}
.services__grid {
  margin-top: 3.5rem; /* mt-14 */
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  background-color: var(--border);
}
@media (min-width: 640px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.services__item {
  background-color: var(--card);
  padding: 2.25rem 1.75rem; /* py-9 px-7 */
  transition: background-color 0.2s;
}
.services__item:hover {
  background-color: var(--navy-deep);
}
.services__item svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gold);
}
.services__item h3 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  color: var(--foreground);
  transition: color 0.2s;
}
.services__item:hover h3 {
  color: var(--primary-foreground);
}
.services__item p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  transition: color 0.2s;
}
.services__item:hover p {
  color: color-mix(in oklab, var(--primary-foreground) 65%, transparent);
}

/* =========================================================================
   10. REPRESENTATION
   ========================================================================= */
.representation {
  position: relative;
  background-color: var(--navy);
  padding: 5rem 0;
}
@media (min-width: 640px) {
  .representation {
    padding: 7rem 0;
  }
}
.representation__quote {
  margin-top: 3rem;
  border-left: 2px solid var(--gold);
  background-color: color-mix(in oklab, var(--navy-deep) 60%, transparent);
  padding: 2rem 1.75rem;
}
@media (min-width: 640px) {
  .representation__quote {
    padding: 2.5rem;
  }
}
.representation__quote p {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--primary-foreground);
}
@media (min-width: 640px) {
  .representation__quote p {
    font-size: 1.875rem;
  }
}
.representation__grid {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 640px) {
  .representation__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .representation__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.representation__item {
  border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 15%, transparent);
  padding-top: 1.5rem;
}
.representation__item span {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--gold);
}
.representation__item h3 {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  color: var(--primary-foreground);
}
.representation__item p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--primary-foreground) 60%, transparent);
}

/* =========================================================================
   11. TIMELINE
   ========================================================================= */
.timeline {
  padding: 5rem 0;
}
@media (min-width: 640px) {
  .timeline {
    padding: 7rem 0;
  }
}
.timeline__list {
  margin-top: 3.5rem;
  border-left: 1px solid var(--border);
  list-style: none;
}
.timeline__item {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 3rem;
}
.timeline__item:last-child {
  padding-bottom: 0;
}
@media (min-width: 640px) {
  .timeline__item {
    padding-left: 3rem;
  }
}
.timeline__dot {
  position: absolute;
  left: -5px;
  top: 0.5rem;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background-color: var(--gold);
}
.timeline__period {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
}
.timeline__item h3 {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  color: var(--foreground);
}
.timeline__item p {
  margin-top: 0.5rem;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* =========================================================================
   12. WHY
   ========================================================================= */
.why {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--secondary) 40%, transparent);
  padding: 5rem 0;
}
@media (min-width: 640px) {
  .why {
    padding: 7rem 0;
  }
}
.why__grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 640px) {
  .why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .why__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.why__item {
  border-top: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  padding-top: 1.5rem;
}
.why__item h3 {
  font-size: 1.125rem;
  color: var(--foreground);
}
.why__item p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* =========================================================================
   13. DOCUMENTS
   ========================================================================= */
.documents {
  padding: 5rem 0;
}
@media (min-width: 640px) {
  .documents {
    padding: 7rem 0;
  }
}
.documents__note {
  margin-top: 1.5rem;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.documents__grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .documents__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .documents__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.documents__item {
  display: flex;
  aspect-ratio: 3 / 4;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  background-color: var(--card);
  padding: 0 1.5rem;
  text-align: center;
}
.documents__item svg {
  width: 1.75rem;
  height: 1.75rem;
  color: color-mix(in oklab, var(--gold) 70%, transparent);
}
.documents__item h3 {
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--foreground);
}
.documents__item p {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}

/* =========================================================================
   14. FAQ (Accordion)
   ========================================================================= */
.faq {
  border-top: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--secondary) 40%, transparent);
  padding: 5rem 0;
}
@media (min-width: 640px) {
  .faq {
    padding: 7rem 0;
  }
}
.faq__wrap {
  max-width: 48rem; /* max-w-3xl */
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .faq__wrap {
    padding: 0 2rem;
  }
}
.accordion {
  margin-top: 3rem;
}
.accordion__item {
  border-bottom: 1px solid var(--border);
}
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border: none;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--foreground);
}
.accordion__trigger svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
  transition: transform 0.2s;
}
.accordion__item.is-open .accordion__trigger svg {
  transform: rotate(180deg);
}
.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.accordion__item.is-open .accordion__panel {
  /* max-height set inline via JS to element's scrollHeight */
}
.accordion__panel-inner {
  padding-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* =========================================================================
   15. CONTACT / FORM
   ========================================================================= */
.contact {
  padding: 5rem 0;
}
@media (min-width: 640px) {
  .contact {
    padding: 7rem 0;
  }
}
.contact__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  gap: 3.5rem;
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .contact__grid {
    padding: 0 2rem;
  }
}
@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
  }
}
.contact__text {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.contact__list {
  margin-top: 2.5rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact__list li {
  display: flex;
  gap: 1rem;
}
.contact__list svg {
  margin-top: 0.25rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--gold);
}
.contact__list a,
.contact__list span {
  font-size: 1rem;
  color: var(--foreground);
}
.contact__list a:hover {
  color: var(--gold);
}
.contact__card {
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .contact__card {
    padding: 2.5rem;
  }
}

.form-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.form-field {
  grid-column: span 1 / span 1;
}
.form-field--full {
  grid-column: 1 / -1;
}
.form-field label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}
.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted-foreground);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--gold);
}
.form-actions {
  grid-column: 1 / -1;
}

/* =========================================================================
   16. FOOTER
   ========================================================================= */
.site-footer {
  background-color: var(--navy-deep);
  padding: 4rem 0; /* py-16 */
}
.site-footer__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .site-footer__container {
    padding: 0 2rem;
  }
}
.site-footer__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.site-footer__brand {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.18em;
  color: var(--primary-foreground);
}
.site-footer__brand .gold {
  color: var(--gold);
}
.site-footer p {
  color: color-mix(in oklab, var(--primary-foreground) 60%, transparent);
}
.site-footer__col p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.site-footer__links a:hover {
  color: var(--gold);
}
.site-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.site-footer__rights {
  margin-top: 3rem;
  border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 10%, transparent);
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--primary-foreground) 45%, transparent);
}

/* =========================================================================
   17. TOAST (sonner o'rniga vanilla JS toast)
   ========================================================================= */
.toast-viewport {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 22rem;
}
.toast {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  line-height: 1.4;
  animation: toast-in 0.2s ease;
}
.toast--success {
  border-left: 3px solid var(--gold);
}
.toast--error {
  border-left: 3px solid var(--destructive);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   18. RESPONSIVE — kichik qo'shimcha aniqliklar
   (asosiy responsive qoidalar yuqorida har bir bo'lim ichida joylashgan,
   original loyihada ham breakpointlar componentlarga biriktirilgan edi)
   ========================================================================= */
@media (max-width: 639px) {
  .hero__stats {
    gap: 1rem;
  }
}