:root{
    --purple: #8b13df;
    --purple-hover: #7710bf;
    --dark: #0d0f0e;
    --dark-2: #14211a;
    --text-dark: #242627;
    --text-muted: #76817b;
    --border: #e3e8e4;
    --green-accent: #3fae6a;
    --radius-lg: 24px;
    --radius-md: 16px;
    --container: 1300px;
  }
  *{ box-sizing: border-box; margin: 0; padding: 0; }
  html{ scroll-behavior: smooth; }
  body{
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    background: #fff;
    line-height: 1.4;
  }
  img{ max-width: 100%; display: block; }
  a{ color: inherit; }
  .wrap{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
  .eyebrow{
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 12px;
  }
  h1, h2, h3{ font-weight: 600; line-height: 1.15; }
  .section-title{ font-size: 32px; font-weight: 700; margin-bottom: 8px; }
  .section-sub{ font-size: 16px; color: var(--text-muted); max-width: 550px; }
  .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    text-decoration: none;
    white-space: nowrap;
  }
  .btn--primary{ background: var(--purple); color: #fff; }
  .btn--primary:hover{ background: var(--purple-hover); }
  .btn--ghost{ background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
  .btn--ghost:hover{ background: rgba(255,255,255,0.16); }
  .btn--outline-dark{ background: transparent; color: var(--text-dark); border: 1px solid var(--border); }
  .btn--outline-dark:hover{ background: #f5f7f5; }
  .btn--link{
    background: none; border: none; padding: 0; height: auto;
    color: var(--purple); font-weight: 500; font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .placeholder-media{
    background: linear-gradient(135deg, #dfe7e1, #c7d3cb);
    display: flex; align-items: center; justify-content: center;
    color: #6c766f; font-size: 13px; text-align: center; padding: 12px;
    border-radius: var(--radius-md);
  }

  /* ===================== HEADER + HERO ===================== */
  .hero-section{
    background: #ffffff;
    color: var(--text-dark);
    padding-bottom: 0;
  }
  header.site-header{ padding: 20px 0; }
  header.site-header .wrap{
    display: flex; align-items: center; justify-content: space-between;
  }
  .logo{ display: inline-block; line-height: 0; }
  .logo img{ height: 44px; width: auto; display: block; }
  nav.main-nav{ display: flex; gap: 28px; }
  nav.main-nav a{
    font-size: 14px; font-weight: 500; text-decoration: none; color: var(--text-dark);
    transition: color 0.15s ease;
  }
  nav.main-nav a:hover{ color: var(--purple); }

  .hero-outer{
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 48px 0 64px;
  }
  .hero-copy{ flex: 0 0 42%; max-width: 520px; }
  .hero-copy h1{ font-size: 38px; margin-bottom: 20px; color: var(--text-dark); }
  .hero-copy p{ font-size: 15px; color: var(--text-muted); margin-bottom: 32px; }
  .hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
  .btn--ghost-light{ background: #fff; color: var(--text-dark); border: 1px solid var(--border); }
  .btn--ghost-light:hover{ background: #f5f7f5; }
  .hero-media{
    flex: 1 1 auto;
    min-width: 0;
  }
  .hero-media img{ width: 100%; height: auto; display: block; }

  /* ===================== SECTION SPACING ===================== */
  section{ padding: 96px 0; }
  section.tight{ padding: 64px 0; }

  /* ===================== ABOUT (О нас) ===================== */
  .about-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 40px;
  }
  .about-card{
    position: relative;
    border: 1px solid #dfdfdf;
    background: #FBF9FE;
    border-radius: var(--radius-lg);
    padding: 24px;
    aspect-ratio: 412 / 316;
    overflow: hidden;
    box-sizing: border-box;
  }
  .about-card .eyebrow-sm{ font-size: 18px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: var(--purple); display: block; margin-bottom: 16px; }
  .about-card h3{ font-size: 22px; font-weight: 600; margin-bottom: 16px; max-width: 88%; }
  .about-card p{ font-size: 16px; color: #636363; max-width: 88%; }
  .about-card .icon-img{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 43.2%;
    height: 56.3%;
    object-fit: contain;
    object-position: bottom right;
  }

  /* ===================== KEY DIRECTIONS (accurate rebuild) ===================== */
  .directions-header{ text-align: center; margin-bottom: 24px; }
  .directions-header .section-sub{ margin: 0 auto; }

  .directions-diagram{
    position: relative;
    max-width: 1100px;
    min-height: 760px;
    margin: 32px auto 0;
  }
  .directions-diagram .rings{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 700px; height: 700px;
    pointer-events: none;
  }
  .directions-diagram .rings svg{ width: 100%; height: 100%; }

  .direction-icon{
    position: absolute;
    width: 78px; height: 78px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border);
    box-shadow: 0 6px 16px rgba(36,38,39,0.06);
    display: flex; align-items: center; justify-content: center;
    color: var(--purple);
    transform: translate(-50%, -50%);
  }
  .direction-icon svg, .direction-icon img{ width: 32px; height: 32px; }

  .direction-label{
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: left;
  }
  .direction-label h4{ font-size: 17px; margin-bottom: 6px; }
  .direction-label p{ font-size: 14px; color: var(--text-muted); }
  .direction-label--wide{ width: 260px; }
  .direction-label--narrow{ width: 210px; }

  /* positions computed directly from Figma's real coordinates
     (icon/label box centers, offset from diagram center, scaled 0.62x) */
  .direction-icon--1{ left: calc(50% - 166px); top: calc(50% - 196px); }
  .direction-label--1{ left: calc(50% - 351px); top: calc(50% - 239px); }

  .direction-icon--2{ left: calc(50% + 150px); top: calc(50% - 196px); }
  .direction-label--2{ left: calc(50% + 335px); top: calc(50% - 245px); }

  .direction-icon--3{ left: calc(50% - 219px); top: calc(50%); }
  .direction-label--3{ left: calc(50% - 379px); top: calc(50% - 3px); }

  .direction-icon--4{ left: calc(50% + 215px); top: calc(50% - 8px); }
  .direction-label--4{ left: calc(50% + 375px); top: calc(50% - 10px); }

  .direction-icon--5{ left: calc(50% - 166px); top: calc(50% + 181px); }
  .direction-label--5{ left: calc(50% - 351px); top: calc(50% + 213px); }

  .direction-icon--6{ left: calc(50% + 150px); top: calc(50% + 181px); }
  .direction-label--6{ left: calc(50% + 335px); top: calc(50% + 213px); }

  .directions-center{
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 186px; height: 186px; border-radius: 50%;
    background: #fff; box-shadow: 0 12px 40px rgba(36,38,39,0.12);
    border: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px; padding: 16px;
  }
  .directions-center strong{ font-size: 20px; color: var(--purple); }
  .directions-center span{ font-size: 12px; color: var(--text-muted); }

  @media (max-width: 900px){
    .directions-diagram{ min-height: 0; }
    .directions-diagram .rings{ display: none; }
    .direction-icon, .direction-label{
      position: static;
      transform: none !important;
      width: auto;
    }
    .direction-icon{ margin-bottom: 24px; }
    .direction-label{ margin-bottom: 8px; }
    .directions-center{ position: static; transform: none; margin: 0 auto 32px; }
  }

  /* ===================== PRODUCTS ===================== */
  .product-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 48px 0;
    border-bottom: 1px solid var(--border);
  }
  .product-row:last-child{ border-bottom: none; }
  .product-row.reverse .product-media{ order: 1; }
  .product-row.reverse .product-copy{ order: 2; }
  .product-media{
    aspect-ratio: 16/11;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
  }
  .product-copy h3{ font-size: 22px; margin-bottom: 16px; }
  .product-copy ul{ list-style: none; margin-bottom: 24px; }
  .product-copy ul li{
    font-size: 14px; color: var(--text-muted); padding: 8px 0 8px 24px; position: relative;
    border-top: 1px solid var(--border);
  }
  .product-copy ul li:first-child{ border-top: none; }
  .product-copy ul li::before{
    content: "";
    position: absolute; left: 0; top: 15px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--purple);
  }

  /* ===================== WHY US ===================== */
  .why-us{ display: flex; gap: 69px; align-items: flex-start; }
  .why-us .why-intro{ width: 572px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
  .why-us .why-intro h2{ font-size: 42px; font-weight: 700; line-height: 1.2; }
  .why-us .why-intro h2 span{ color: var(--purple); }
  .why-us .why-intro p{ font-size: 16px; color: #6f6f72; }
  .why-us .divider{ width: 2px; align-self: stretch; background: var(--border); flex-shrink: 0; }
  .why-list{ display: flex; flex-direction: column; gap: 130px; width: 590px; }
  .why-item{ display: flex; flex-direction: column; gap: 12px; }
  .why-item h4{ font-size: 24px; font-weight: 600; }
  .why-item p{ font-size: 16px; color: #6f6f72; }

  /* ===================== AWARDS BANNER ===================== */
  .awards-card{
    position: relative;
    border-radius: 36px;
    padding: 50px;
    min-height: 496px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--text-dark);
  }
  .awards-card .bg-photo{ position: absolute; inset: 0; z-index: 0; }
  .awards-card .bg-photo img{ width: 100%; height: 100%; object-fit: cover; }
  .awards-card .bg-fade{
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(89deg, #ffffff 0%, rgba(255,255,255,0) 45%);
  }
  .awards-content{ position: relative; z-index: 2; max-width: 493px; display: flex; flex-direction: column; gap: 40px; }
  .awards-content .eyebrow{ color: var(--purple); }
  .awards-content h2{ font-size: 40px; margin-bottom: 12px; }
  .awards-content p{ font-size: 14px; color: var(--text-dark); }
  .award-badge-row{ display: flex; gap: 14px; align-items: center; }
  .award-badge-row img{ width: 100px; height: 95px; object-fit: contain; flex-shrink: 0; }
  .award-badge-row b{ font-size: 26px; display: block; }
  .award-badge-row .sub{ font-size: 20px; color: var(--purple); font-weight: 500; }
  .award-badge-row .company{ font-size: 14px; color: var(--text-muted); margin-top: 8px; }

  /* ===================== NEWS ===================== */
  .news-grid{
    display: flex;
    gap: 20px;
    margin-top: 32px;
    align-items: stretch;
  }
  .news-card{
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 28px;
  }
  .news-card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .news-card .fade{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(102,102,102,0.15)); }
  .news-card .content{ position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .news-card .tag{ font-size: 14px; margin-bottom: 8px; }
  .news-card h4{ font-size: 22px; font-weight: 500; }
  .news-card--main{ width: 850px; min-height: 530px; flex-shrink: 0; }
  .news-card--small{ min-height: 256px; flex: 1; }
  .news-col{ display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; }
  .news-card .arrow-btn{
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: #fff; color: var(--text-dark); display: flex; align-items: center; justify-content: center;
    transform: rotate(-45deg);
  }

  /* ===================== TEAM ===================== */
  .team-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
  .team-head h2{ max-width: 482px; }
  .team-head p{ max-width: 484px; }
  .team-grid{ display: flex; flex-wrap: wrap; gap: 24px 20px; justify-content: space-between; }
  .team-card{ display: flex; flex-direction: column; gap: 16px; width: 290px; }
  .team-card .photo{
    width: 130px; height: 130px; border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(160deg, #dfe3df, #b9c2ba);
  }
  .team-card h4{ font-size: 20px; font-weight: 600; }
  .team-card .role{ font-size: 18px; color: var(--purple); margin-top: 6px; font-weight: 500; }
  .team-card .socials{ display: flex; gap: 14px; margin-top: 4px; }
  .team-card .socials a{
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none;
  }
  .team-card .socials a img{ width: 20px; height: 20px; }

  /* ===================== CAREERS ===================== */
  .careers-card{
    position: relative;
    display: flex; align-items: center; gap: 70px;
    padding: 30px;
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
  }
  .careers-card .bg-photo{ position: absolute; inset: 0; z-index: 0; }
  .careers-card .bg-photo img{ width: 100%; height: 100%; object-fit: cover; }
  .careers-intro{ position: relative; z-index: 1; width: 257px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }
  .careers-intro h2{ font-size: 24px; font-weight: 600; }
  .careers-intro p{ font-size: 16px; }
  .jobs-grid{ position: relative; z-index: 1; display: flex; gap: 20px; }
  .job-card{
    background: #33483f;
    border-radius: 24px;
    padding: 16px 14px;
    width: 218px;
    min-height: 206px;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 16px;
  }
  .job-card h4{ font-size: 18px; font-weight: 600; }
  .job-card .location{ font-size: 14px; color: #dfdfdf; margin-top: 12px; }
  .job-card .meta{ display: flex; align-items: center; gap: 6px; font-size: 14px; color: #dfdfdf; }

  /* ===================== CTA FORM ===================== */
  .cta-form{ background: #fff; color: var(--text-dark); }
  .cta-grid{ display: flex; gap: 60px; align-items: flex-start; }
  .cta-grid h2{ font-size: 32px; font-weight: 600; line-height: 1.4; flex: 1; }
  .cta-fields-wrap{ flex: 1; display: flex; flex-direction: column; gap: 20px; }
  .cta-fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .cta-fields input, .cta-form textarea{
    width: 100%;
    background: #fff;
    border: 1px solid #d8ded8;
    border-radius: 18px;
    padding: 14px 18px;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
  }
  .cta-fields input::placeholder, .cta-form textarea::placeholder{ color: #9aa5a0; }
  .cta-form textarea{ min-height: 112px; resize: vertical; }
  .cta-form .whatsapp-note{ font-size: 16px; color: var(--text-dark); margin-top: 0; }
  .cta-form .whatsapp-note span{ color: var(--purple); }
  .cta-actions{ display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

  /* ===================== FOOTER ===================== */
  footer{ background: #fff; color: rgba(0,0,0,0.8); padding: 24px 0; }
  .footer-divider{ height: 1px; background: var(--border); margin-bottom: 24px; }
  .footer-grid{ display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
  .footer-brand{ display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
  .footer-brand .logo img{ height: 44px; }
  .footer-brand p{ font-size: 14px; color: #0a0a0a; }
  .footer-cols{ display: flex; gap: 80px; }
  .footer-col h5{ font-size: 16px; margin-bottom: 16px; color: var(--text-dark); font-weight: 500; }
  .footer-col ul{ list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .footer-col ul a, .footer-col ul li{ font-size: 14px; color: rgba(0,0,0,0.8); text-decoration: none; }
  .footer-socials{ display: flex; gap: 16px; margin-top: 20px; }
  .footer-socials a{
    width: 36px; height: 36px; border-radius: 12px; background: #e4e4e4;
    display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; color: var(--text-dark);
  }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 900px){
    section{ padding: 56px 0; }
    .hero-outer .wrap{ flex-direction: column; align-items: flex-start; }
    .hero-copy{ flex: 1 1 auto; max-width: 100%; }
    .hero-copy h1{ font-size: 28px; }
    .hero-media{ width: 100%; margin-top: 12px; }
    nav.main-nav{ display: none; }
    .about-grid{ grid-template-columns: 1fr; }
    .product-row{ grid-template-columns: 1fr; gap: 24px; }
    .product-row.reverse .product-media{ order: 1; }
    .product-row.reverse .product-copy{ order: 2; }
    .why-us{ flex-direction: column; gap: 32px; }
    .why-us .why-intro{ width: 100%; }
    .why-us .divider{ display: none; }
    .why-list{ width: 100%; gap: 40px; }
    .awards-card{ padding: 28px; }
    .news-grid{ flex-direction: column; }
    .news-card--main{ width: 100%; }
    .team-grid{ justify-content: flex-start; }
    .careers-card{ flex-direction: column; align-items: flex-start; }
    .jobs-grid{ flex-wrap: wrap; }
    .cta-grid{ flex-direction: column; gap: 24px; }
    .cta-fields{ grid-template-columns: 1fr; }
    .footer-grid{ flex-direction: column; }
    .footer-cols{ gap: 40px; }
  }
  @media (max-width: 520px){
    .team-card{ width: 100%; }
    .jobs-grid{ flex-direction: column; }
    .job-card{ width: 100%; }
    .footer-cols{ flex-direction: column; gap: 24px; }
  }