/*
 * ============================================================
 * DESIGN SYSTEM v3 — Բիզնես Քարտուղար ՍՊԸ
 * ============================================================
 *
 * COLOR PALETTE
 *   --bg:           #EDF0E9  Light sage-green page background. Cool-leaning
 *                             neutral that reads as calm and institutional;
 *                             entirely different from v1's warm ivory and
 *                             v2's dark navy.
 *   --surface:      #FFFFFF  White card/form surfaces.
 *   --green-deep:   #009837  Bright green primary. Used for the hero panel,
 *                             contact info sidebar, and footer. Associates with
 *                             law, finance, and trust in institutional contexts.
 *   --green-mid:    #007D2E  Darker green for hover states and accents.
 *   --green-tint:   #D9F3E3  Very light green for the about strip background.
 *   --amber:        #009837  Green accent (same as primary). Used for CTAs,
 *                             active tab indicator, and hover states.
 *   --amber-light:  #007D2E  Darker green for hover.
 *   --text:         #0D1A10  Near-black with green undertone.
 *   --text-mid:     #2E4A38  Dark green-tinted body text on light backgrounds.
 *   --text-muted:   #5E7468  Muted secondary text.
 *   --text-light:   #A8BAAC  Placeholder / very secondary.
 *   --border:       rgba(0, 152, 55, 0.1)   Default border.
 *
 * TYPEFACE
 *   Single family: "Noto Sans Armenian", weight range 300–800.
 *   Weight does all the expressive work — display lines at 800, body at 300–400.
 *   Armenian Unicode support confirmed.
 *
 * LAYOUT CONCEPT & SIGNATURE ELEMENT
 *   The HERO is a full-viewport split panel: a deep forest-green block
 *   (~55% width) carries the headline in white; the right panel is the
 *   light sage background with the subhead, CTAs, and stat row. This
 *   hard color-block split feels contemporary and architectural, echoing
 *   a letterhead sidebar — completely different from v1's ruled-line hero
 *   and v2's full-dark with centered radial glow.
 *
 *   The SERVICES section is an interactive vertical tab panel (keyboard-
 *   accessible, ARIA-compliant): a narrow tab rail on the left carries
 *   numbered buttons, and the active panel fills the right. The teal-blue
 *   left-border on the active tab is the activation marker. This layout
 *   honestly represents the services as discrete selectable procedures
 *   rather than a browsed list, while adding genuine interactivity.
 *
 *   Green fills recur in the about strip and contact info sidebar,
 *   creating a rhythmic push-pull between green and light sections
 *   without painting every surface.
 * ============================================================ */

/* ---- CUSTOM PROPERTIES ---- */
:root {
  --bg:           #EDF0E9;
  --surface:      #FFFFFF;
  --green-deep:   #009837;
  --green-mid:    #007D2E;
  --green-tint:   #D9F3E3;
  --amber:        #009837;
  --amber-light:  #007D2E;
  --cta:          #00C244;
  --cta-hover:    #00A83B;
  --text:         #0D1A10;
  --text-mid:     #2E4A38;
  --text-muted:   #5E7468;
  --text-light:   #A0B4A4;
  --border:       rgba(0, 152, 55, 0.1);
  --border-mid:   rgba(0, 152, 55, 0.2);
  --error:        #C23B3B;

  --font: 'Noto Sans Armenian', Arial, sans-serif;

  --container-max: 1140px;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;

  --radius:    3px;
  --radius-lg: 6px;
  --ease:      200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- RESET ---- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@keyframes ctaGlow {
  0%, 100% {
    opacity:    1;
    box-shadow: 0 4px 28px rgba(0, 194, 68, 0.8),
                0 0  16px  rgba(0, 194, 68, 0.6);
  }
  50% {
    opacity:    0.6;
    box-shadow: 0 2px 6px rgba(0, 194, 68, 0.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family:            var(--font);
  font-size:              1rem;
  line-height:            1.7;
  color:                  var(--text);
  background-color:       var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---- FOCUS ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline:        2px solid var(--amber);
  outline-offset: 3px;
  border-radius:  var(--radius);
}

/* ---- LAYOUT ---- */
.container {
  width:     100%;
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--space-md);
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-sm); }
}

/* ---- SHARED LABELS ---- */
.section-tag {
  display:        block;
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--amber);
  margin-bottom:  0.6rem;
}

.section-tag--light { color: rgba(255, 255, 255, 0.85); }

/* ---- BUTTONS ---- */
.btn {
  display:        inline-flex;
  align-items:    center;
  padding:        0.78rem 1.75rem;
  font-family:    var(--font);
  font-size:      0.875rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  border:         1px solid transparent;
  border-radius:  var(--radius);
  cursor:         pointer;
  transition:     background var(--ease), border-color var(--ease),
                  color var(--ease), box-shadow var(--ease);
  white-space:    nowrap;
}

.btn-primary {
  background:     var(--cta);
  color:          #FFFFFF;
  border-color:   var(--cta);
  font-weight:    700;
  letter-spacing: 0.06em;
  animation:      ctaGlow 0.9s ease-in-out infinite;
}

.btn-primary:hover {
  background:   var(--cta-hover);
  border-color: var(--cta-hover);
  box-shadow:   0 6px 28px rgba(0, 194, 68, 0.6),
                0 2px 8px  rgba(0, 194, 68, 0.4);
  transform:    translateY(-1px);
}

.btn-ghost {
  background:   transparent;
  color:        var(--green-deep);
  border-color: var(--border-mid);
}

.btn-ghost:hover {
  border-color: var(--amber);
  color:        var(--amber);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position:      sticky;
  top:           0;
  z-index:       100;
  background:    var(--green-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.9rem 0;
}

/* Logo */
.logo {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
}

.logo-img {
  width:       40px;
  height:      40px;
  object-fit:  contain;
  flex-shrink: 0;
}

.logo-text {
  display:        flex;
  flex-direction: column;
  gap:            0.05rem;
}

.logo-hy {
  font-size:   1rem;
  font-weight: 700;
  color:       #FFFFFF;
  line-height: 1.2;
}

.logo-en {
  font-size:      0.56rem;
  font-weight:    600;
  color:          rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
}

/* Nav */
.main-nav ul {
  display:     flex;
  gap:         2rem;
  align-items: center;
}

.main-nav a {
  font-size:   0.875rem;
  font-weight: 500;
  color:       rgba(255, 255, 255, 0.85);
  transition:  color var(--ease);
}

.main-nav a:hover { color: #FFFFFF; }

.main-nav .nav-cta {
  padding:       0.5rem 1.2rem;
  background:    var(--cta);
  color:         #FFFFFF;
  border-radius: var(--radius);
  font-weight:   700;
  animation:     ctaGlow 0.9s ease-in-out infinite;
  transition:    background var(--ease), transform var(--ease);
}

.main-nav .nav-cta:hover {
  background: var(--cta-hover);
  color:      #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 194, 68, 0.55);
  transform:  translateY(-1px);
}

/* Hamburger */
.nav-toggle {
  display:        none;
  flex-direction: column;
  gap:            5px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        6px;
}

.nav-toggle span {
  display:          block;
  width:            22px;
  height:           2px;
  background:       #FFFFFF;
  border-radius:    1px;
  transform-origin: center;
  transition:       transform var(--ease), opacity var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  .main-nav {
    display:    none;
    position:   absolute;
    top:        100%;
    left:       0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding:    var(--space-sm) var(--space-md);
  }

  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: var(--space-xs); }
  .main-nav a { display: block; padding: 0.6rem 0; font-size: 1rem; }
  .main-nav .nav-cta { display: inline-block; margin-top: 0.25rem; }
}

/* ============================================================
   HERO — hard split panel
   ============================================================ */
.hero {
  display:   grid;
  grid-template-columns: 55% 1fr;
  min-height: 90vh;
}

/* Green panel */
.hero-green {
  background:      var(--green-deep);
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  padding:         var(--space-xl) var(--space-lg) var(--space-lg);
  position:        relative;
  overflow:        hidden;
  isolation:       isolate;
}

/* Background image — fills the panel, anchored to show the meeting group */
.hero-img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 62%;
  z-index:         0;
}

/* Overlay — dark green tint lets the image's blue-teal tones bleed through */
.hero-green::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    170deg,
    rgba(0, 48, 18, 0.80) 0%,
    rgba(0, 70, 25, 0.62) 55%,
    rgba(0, 50, 20, 0.72) 100%
  );
  z-index:        1;
  pointer-events: none;
}

.hero-tag {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.75);
  margin-bottom:  var(--space-md);
  position:       relative;
  z-index:        2;
}

.hero-headline {
  font-size:      clamp(2.4rem, 4.5vw, 4rem);
  font-weight:    800;
  line-height:    1.08;
  letter-spacing: -0.025em;
  color:          #FFFFFF;
  margin-bottom:  var(--space-md);
  position:       relative;
  z-index:        2;
}

.hero-rule {
  width:         48px;
  height:        2px;
  background:    var(--amber);
  margin-bottom: var(--space-sm);
  position:      relative;
  z-index:       2;
}

.hero-since {
  font-size:      0.8rem;
  font-weight:    500;
  color:          rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  position:       relative;
  z-index:        2;
}

/* Light panel */
.hero-light {
  background:     var(--bg);
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        var(--space-xl) var(--space-lg);
  border-left:    1px solid var(--border);
}

.hero-subhead {
  font-size:     1.05rem;
  font-weight:   300;
  color:         var(--text-mid);
  line-height:   1.85;
  max-width:     42ch;
  margin-bottom: var(--space-md);
}

.hero-actions {
  display:       flex;
  gap:           var(--space-sm);
  flex-wrap:     wrap;
  margin-bottom: var(--space-xl);
}

.hero-stats {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-md) var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-mid);
}

.hero-stat {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
}

.stat-n {
  font-size:   2rem;
  font-weight: 800;
  color:       var(--green-deep);
  line-height: 1;
}

.stat-l {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-green { padding: var(--space-lg) var(--space-md); min-height: 50vh; }
  .hero-light { padding: var(--space-lg) var(--space-md); border-left: none; border-top: none; }
  .hero-subhead { max-width: none; }
  .hero-headline { font-size: clamp(2.2rem, 6vw, 3rem); }
}

/* ============================================================
   SERVICES — tab panel
   ============================================================ */
.services {
  background: var(--surface);
  padding:    var(--space-xl) 0;
  border-top: 1px solid var(--border);
}

.section-header {
  margin-bottom: var(--space-lg);
}

.section-header h2 {
  font-size:      clamp(1.7rem, 3vw, 2.4rem);
  font-weight:    700;
  color:          var(--green-deep);
  line-height:    1.2;
  letter-spacing: -0.015em;
}

/* Tab layout */
.services-tabs {
  display:               grid;
  grid-template-columns: 260px 1fr;
  gap:                   0;
  border:                1px solid var(--border-mid);
  border-radius:         var(--radius-lg);
  overflow:              hidden;
}

/* Rail */
.tab-rail {
  display:        flex;
  flex-direction: column;
  border-right:   1px solid var(--border-mid);
  background:     var(--bg);
}

.tab-btn {
  display:        flex;
  align-items:    flex-start;
  gap:            0.75rem;
  padding:        1.1rem 1.25rem;
  border:         none;
  border-bottom:  1px solid var(--border);
  border-left:    3px solid transparent;
  background:     transparent;
  cursor:         pointer;
  text-align:     left;
  font-family:    var(--font);
  transition:     background var(--ease), border-color var(--ease);
}

.tab-btn:last-child { border-bottom: none; }

.tab-btn:hover { background: rgba(0, 152, 55, 0.04); }

.tab-btn.is-active {
  background:        var(--surface);
  border-left-color: var(--amber);
}

.tab-num {
  font-size:   0.75rem;
  font-weight: 700;
  color:       var(--text-light);
  line-height: 1.6;
  flex-shrink: 0;
  transition:  color var(--ease);
}

.tab-btn.is-active .tab-num { color: var(--amber); }

.tab-label {
  font-size:   0.82rem;
  font-weight: 500;
  color:       var(--text-muted);
  line-height: 1.45;
  transition:  color var(--ease);
}

.tab-btn.is-active .tab-label { color: var(--green-deep); font-weight: 600; }
.tab-btn:hover .tab-label     { color: var(--text-mid); }

/* Panels */
.tab-panels { background: var(--surface); }

.tab-panel {
  padding:    2.5rem 2.5rem 2.5rem;
  height:     100%;
}

.tab-panel[hidden] { display: none; }

.tab-panel h3 {
  font-size:     1.3rem;
  font-weight:   700;
  color:         var(--green-deep);
  line-height:   1.3;
  margin-bottom: 0.3rem;
}

.panel-qualifier {
  font-size:     0.83rem;
  color:         var(--text-muted);
  font-style:    italic;
  margin-bottom: 1.2rem;
  min-height:    1.2em;
}

.panel-body {
  font-size:     0.95rem;
  color:         var(--text-mid);
  line-height:   1.9;
  font-weight:   300;
  margin-bottom: 0.75rem;
}

.panel-body:last-child { margin-bottom: 0; }

.panel-subhead {
  font-size:     0.95rem;
  font-weight:   500;
  color:         var(--text-mid);
  margin-top:    var(--space-sm);
  margin-bottom: 0.5rem;
}

.panel-list {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
}

.panel-list li {
  font-size:    0.95rem;
  font-weight:  300;
  color:        var(--text-mid);
  padding-left: 1.1rem;
  position:     relative;
}

.panel-list li::before {
  content:     '—';
  position:    absolute;
  left:        0;
  color:       var(--green-deep);
  font-weight: 600;
}

/* Mobile: rail becomes horizontal scroll strip above panels */
@media (max-width: 760px) {
  .services-tabs {
    grid-template-columns: 1fr;
  }

  .tab-rail {
    flex-direction: row;
    overflow-x:     auto;
    border-right:   none;
    border-bottom:  1px solid var(--border-mid);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tab-rail::-webkit-scrollbar { display: none; }

  .tab-btn {
    flex-direction: column;
    gap:            0.2rem;
    align-items:    center;
    padding:        0.75rem 1rem;
    border-bottom:  none;
    border-left:    none;
    border-bottom:  3px solid transparent;
    flex-shrink:    0;
    white-space:    nowrap;
  }

  .tab-btn.is-active {
    border-left-color:   transparent;
    border-bottom-color: var(--amber);
  }

  .tab-label { font-size: 0.75rem; }

  .tab-panel { padding: 1.5rem; }
}

/* ============================================================
   ABOUT — green tint strip
   ============================================================ */
.about {
  background:    var(--green-tint);
  padding:       var(--space-xl) 0;
  border-top:    1px solid rgba(0, 152, 55, 0.12);
  border-bottom: 1px solid rgba(0, 152, 55, 0.12);
}

.about-inner {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-xl);
}

.about-badge {
  flex-shrink:   0;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           0.15rem;
  background:    var(--green-deep);
  border-radius: var(--radius-lg);
  padding:       1.75rem 2rem;
  color:         #fff;
}

.badge-n {
  font-size:   3rem;
  font-weight: 800;
  line-height: 1;
  color:       #ffffff;
  letter-spacing: -0.02em;
}

.badge-l {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity:        0.6;
}

.about-text { flex: 1; }

.about-text h2 {
  font-size:      clamp(1.4rem, 2.5vw, 2rem);
  font-weight:    700;
  color:          var(--green-deep);
  line-height:    1.25;
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-sm);
}

.about-text p {
  font-size:   0.95rem;
  color:       var(--text-mid);
  line-height: 1.9;
  font-weight: 300;
  max-width:   68ch;
}

@media (max-width: 680px) {
  .about-inner { flex-direction: column; gap: var(--space-md); }
  .about-badge { flex-direction: row; }
}

/* ============================================================
   CONTACT — split (green left / white right)
   ============================================================ */
.contact {
  display:               grid;
  grid-template-columns: 42% 1fr;
  min-height:            500px;
}

.contact-info {
  background: var(--green-deep);
  display:    flex;
  align-items: center;
}

.contact-info-inner {
  padding: var(--space-xl) var(--space-lg);
}

.contact-info h2 {
  font-size:      clamp(1.8rem, 3vw, 2.6rem);
  font-weight:    700;
  color:          #FFFFFF;
  line-height:    1.15;
  letter-spacing: -0.015em;
  margin-bottom:  var(--space-sm);
}

.contact-info > .contact-info-inner > p {
  font-size:     0.95rem;
  color:         rgba(255,255,255,0.65);
  line-height:   1.85;
  margin-bottom: var(--space-md);
  font-weight:   300;
  max-width:     38ch;
}

.contact-list {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.contact-list li {
  display:     flex;
  align-items: center;
  gap:         0.85rem;
  font-size:   0.9rem;
  color:       rgba(255,255,255,0.75);
}

.contact-list svg {
  width:     18px;
  height:    18px;
  flex-shrink: 0;
  color:     rgba(255, 255, 255, 0.8);
}

.contact-list a { transition: color var(--ease); }
.contact-list a:hover { color: #ffffff; }

/* Form side */
.contact-form-wrap {
  background:  var(--surface);
  display:     flex;
  align-items: center;
  padding:     var(--space-xl) var(--space-lg);
}

.contact-form {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            1.2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--space-sm);
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.form-group label {
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.form-group input,
.form-group textarea {
  font-family:   var(--font);
  font-size:     0.9rem;
  color:         var(--text);
  background:    var(--bg);
  border:        1px solid var(--border-mid);
  border-radius: var(--radius);
  padding:       0.7rem 1rem;
  width:         100%;
  transition:    border-color var(--ease), box-shadow var(--ease);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color:   var(--text-light);
}

.form-group input:focus,
.form-group textarea:focus {
  outline:      none;
  border-color: var(--amber);
  box-shadow:   0 0 0 3px rgba(0, 152, 55, 0.12);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-footer {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
  flex-wrap:   wrap;
}

.form-note {
  font-size:  0.78rem;
  color:      var(--text-light);
  line-height: 1.5;
}

.form-status {
  font-size:   0.85rem;
  font-weight: 600;
  line-height: 1.5;
}

.form-status.is-success { color: var(--green-deep); }
.form-status.is-error   { color: var(--error); }

@media (max-width: 860px) {
  .contact {
    grid-template-columns: 1fr;
  }

  .contact-info-inner { padding: var(--space-lg) var(--space-md); }
  .contact-form-wrap  { padding: var(--space-lg) var(--space-md); }
}

@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background:  var(--green-deep);
  padding:     var(--space-md) 0 var(--space-sm);
}

.footer-inner {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             var(--space-sm);
  padding-bottom:  var(--space-sm);
  border-bottom:   1px solid rgba(255,255,255,0.1);
  margin-bottom:   var(--space-sm);
}

.footer-brand {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
}

.footer-name {
  font-size:   0.9rem;
  font-weight: 600;
  color:       rgba(255,255,255,0.85);
}

.footer-meta {
  font-size:  0.7rem;
  color:      rgba(255,255,255,0.3);
}

.footer-nav {
  display:   flex;
  gap:       var(--space-md);
  flex-wrap: wrap;
}

.footer-nav a {
  font-size:  0.8rem;
  color:      rgba(255,255,255,0.5);
  transition: color var(--ease);
}

.footer-nav a:hover { color: #ffffff; }

.footer-copy {
  font-size:  0.72rem;
  color:      rgba(255,255,255,0.25);
  text-align: center;
}

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-nav   { gap: var(--space-sm); }
}