/* ══════════════════════════════════════════════════════════
       security-integration.css
       Единый контур безопасности — B2B page styles
       Prefix: sint-
       Accent: #06b6d4 / #22d3ee (cyan)
    ══════════════════════════════════════════════════════════ */

    /* ── Hero ── */
    .sint-hero {
      background: linear-gradient(135deg, #060b0d 0%, #071318 40%, #091e24 70%, #0a2430 100%);
      padding: var(--space-20) 0 var(--space-24);
      position: relative;
      overflow: hidden;
    }
    .sint-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 55% 70% at 80% 40%, rgba(6,182,212,0.13) 0%, transparent 60%);
      z-index: 1;
    }
    .sint-hero__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-10);
      align-items: center;
      position: relative; z-index: 1;
    }
    .sint-hero__visual {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sint-hero__img {
      width: 100%;
      max-width: 380px;
      height: auto;
      display: block;
      filter: drop-shadow(0 0 50px rgba(6,182,212,0.2));
    }
    /* Мобильный: 3D-щит скрываем. Медиазапрос обязан идти ПОСЛЕ базовых
       правил .sint-hero__visual — специфичность у них одинаковая, и при
       обратном порядке display:flex перебивал display:none (щит не
       скрывался). */
    @media (max-width: 900px) {
      .sint-hero__grid { grid-template-columns: 1fr; }
      .sint-hero__visual { display: none; }
    }
    .sint-hero__eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(6,182,212,0.12); border: 1px solid rgba(6,182,212,0.35);
      color: #67e8f9; font-size: var(--font-size-sm); font-weight: 600;
      letter-spacing: 0.05em; text-transform: uppercase;
      padding: 6px 14px; border-radius: var(--radius-full);
      margin-bottom: var(--space-5);
    }
    .sint-hero__title {
      font-size: clamp(1.9rem, 4vw, 3rem);
      font-weight: var(--font-weight-bold);
      color: var(--color-white); line-height: 1.15;
      margin-bottom: var(--space-5);
    }
    .sint-hero__title span { color: #22d3ee; }
    .sint-hero__desc {
      font-size: var(--font-size-lg);
      color: rgba(255,255,255,0.68);
      line-height: 1.7;
      margin-bottom: var(--space-8);
    }
    .sint-hero__actions {
      display: flex; gap: var(--space-3); flex-wrap: wrap;
      margin-bottom: var(--space-8);
    }
    @media (max-width: 600px) {
    }

    /* ── Topology diagram ── */
    .sint-diagram-wrap {
      display: flex; align-items: center; justify-content: center;
      padding: var(--space-4);
    }
    .sint-diagram {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      max-width: 380px;
      margin: 0 auto;
    }

    /* Central hub */
    .sint-hub {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 80px; height: 80px;
      border-radius: 50%;
      background: rgba(6,182,212,0.15);
      border: 2px solid rgba(6,182,212,0.5);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      z-index: 2;
      box-shadow: 0 0 24px rgba(6,182,212,0.25), 0 0 48px rgba(6,182,212,0.1);
      text-align: center;
    }
    .sint-hub__label {
      font-size: 11px; font-weight: 700;
      color: #22d3ee; line-height: 1.2;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .sint-hub__sub {
      font-size: 8px; color: rgba(103,232,249,0.6);
      margin-top: 2px; line-height: 1.2;
    }
                  50% { transform: scale(1.08); opacity: 0.15; }
    }

    /* Satellite nodes */
    .sint-node {
      position: absolute;
      width: 90px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      padding: 10px 8px;
      text-align: center;
      font-size: 11px;
      z-index: 2;
    }
    .sint-node__icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 6px;
    }
    .sint-node__name {
      font-size: 10px; font-weight: 600;
      color: rgba(255,255,255,0.8);
      line-height: 1.3;
    }

    .sint-node--top {
      top: 0; left: 50%; transform: translateX(-50%);
      border-color: rgba(77,166,255,0.35);
    }
    .sint-node--top .sint-node__icon { background: rgba(77,166,255,0.15); color: #4da6ff; }

    .sint-node--right {
      right: 0; top: 50%; transform: translateY(-50%);
      border-color: rgba(34,197,94,0.35);
    }
    .sint-node--right .sint-node__icon { background: rgba(34,197,94,0.15); color: #22c55e; }

    .sint-node--bottom {
      bottom: 0; left: 50%; transform: translateX(-50%);
      border-color: rgba(251,146,60,0.35);
    }
    .sint-node--bottom .sint-node__icon { background: rgba(251,146,60,0.15); color: #fb923c; }

    .sint-node--left {
      left: 0; top: 50%; transform: translateY(-50%);
      border-color: rgba(250,204,21,0.35);
    }
    .sint-node--left .sint-node__icon { background: rgba(250,204,21,0.12); color: #facc15; }

    /* SVG overlay for lines */
    .sint-diagram-svg {
      position: absolute;
      inset: 0; width: 100%; height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* Traveling dot animation on SVG paths */
    .sint-travel-dot {
      fill: #22d3ee;
      filter: drop-shadow(0 0 4px #22d3ee);
    }
    .sint-travel-dot--blue   { fill: #4da6ff; filter: drop-shadow(0 0 4px #4da6ff); }
    .sint-travel-dot--green  { fill: #22c55e; filter: drop-shadow(0 0 4px #22c55e); }
    .sint-travel-dot--orange { fill: #fb923c; filter: drop-shadow(0 0 4px #fb923c); }
    .sint-travel-dot--yellow { fill: #facc15; filter: drop-shadow(0 0 4px #facc15); }

    /* ── Dark systems section ── */
    .sint-systems {
      background: #070e12;
      padding: var(--space-20) 0;
    }
    .sint-systems .section-header__eyebrow { color: #22d3ee; }
    .sint-systems .section-header__eyebrow::before { background: #22d3ee; }
    .sint-systems .section-header__title { color: var(--color-white); }
    .sint-systems .section-header__desc { color: rgba(255,255,255,0.5); }

    .sint-systems-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-6);
    }
    @media (max-width: 700px) {
      .sint-systems-grid { grid-template-columns: 1fr; }
    }

    .sint-system-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius-2xl);
      padding: var(--space-8);
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s, background 0.2s;
    }
    .sint-system-card:hover {
      background: rgba(255,255,255,0.05);
    }
    .sint-system-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px;
      border-radius: 3px 0 0 3px;
    }
    .sint-system-card--blue::before   { background: #4da6ff; }
    .sint-system-card--green::before  { background: #22c55e; }
    .sint-system-card--orange::before { background: #fb923c; }
    .sint-system-card--yellow::before { background: #facc15; }

    .sint-system-card--blue:hover   { border-color: rgba(77,166,255,0.25); }
    .sint-system-card--green:hover  { border-color: rgba(34,197,94,0.25); }
    .sint-system-card--orange:hover { border-color: rgba(251,146,60,0.25); }
    .sint-system-card--yellow:hover { border-color: rgba(250,204,21,0.25); }

    .sint-system-card__header {
      display: flex; align-items: center; gap: var(--space-4);
      margin-bottom: var(--space-5);
    }
    .sint-system-card__icon {
      width: 48px; height: 48px; border-radius: var(--radius-xl);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .sint-system-card--blue .sint-system-card__icon   { background: rgba(77,166,255,0.12); color: #4da6ff; }
    .sint-system-card--green .sint-system-card__icon  { background: rgba(34,197,94,0.12); color: #22c55e; }
    .sint-system-card--orange .sint-system-card__icon { background: rgba(251,146,60,0.12); color: #fb923c; }
    .sint-system-card--yellow .sint-system-card__icon { background: rgba(250,204,21,0.1); color: #facc15; }

    .sint-system-card__title {
      font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
      color: var(--color-white);
    }
    .sint-system-card__desc {
      font-size: var(--font-size-sm); color: rgba(255,255,255,0.5);
      line-height: 1.65; margin-bottom: var(--space-5);
    }
    .sint-system-card__list {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: var(--space-2);
    }
    .sint-system-card__list li {
      display: flex; align-items: center; gap: var(--space-2);
      font-size: var(--font-size-sm); color: rgba(255,255,255,0.65);
    }
    .sint-system-card__list li::before {
      content: '';
      width: 11px; height: 11px; flex-shrink: 0; margin-top: 4px;
      -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6.5l3 3 6-7' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6.5l3 3 6-7' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
      background: #4da6ff;
    }
    .sint-system-card--blue   .sint-system-card__list li::before { background: #4da6ff; }
    .sint-system-card--green  .sint-system-card__list li::before { background: #22c55e; }
    .sint-system-card--orange .sint-system-card__list li::before { background: #fb923c; }
    .sint-system-card--yellow .sint-system-card__list li::before { background: #facc15; }

    /* ── Scenarios section ── */
    .sint-scenarios-section {
      background: var(--color-gray-50);
      padding: var(--space-20) 0;
    }
    .sint-scenarios {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
    }
    @media (max-width: 900px) {
      .sint-scenarios { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
    }

    .sint-scenario-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-100);
      border-radius: var(--radius-2xl);
      padding: var(--space-7);
      display: flex; flex-direction: column; gap: var(--space-5);
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .sint-scenario-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
    }
    .sint-scenario-card__title {
      font-size: var(--font-size-base); font-weight: var(--font-weight-semibold);
      color: var(--color-gray-900);
    }
    .sint-scenario-card__trigger {
      font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em; color: #06b6d4;
      background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.2);
      padding: 4px 10px; border-radius: var(--radius-full);
      display: inline-flex; align-items: center; gap: 5px;
      width: fit-content;
    }
    .sint-scenario-card__trigger svg { flex-shrink: 0; }

    .sint-scenario-flow {
      display: flex; flex-direction: column; gap: var(--space-2);
    }
    .sint-scenario-step {
      display: flex; align-items: flex-start; gap: var(--space-3);
    }
    .sint-scenario-step__num {
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.25);
      color: #22d3ee; font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      margin-top: 1px;
    }
    .sint-scenario-step__text {
      font-size: var(--font-size-sm); color: var(--color-gray-600); line-height: 1.5;
    }
    .sint-scenario-arrow {
      width: 1px; height: 10px; background: rgba(6,182,212,0.2);
      margin-left: 11px;
    }

    /* ── Pricing ── */
    .sint-pricing {
      background: var(--color-white);
      padding: var(--space-20) 0;
    }

    /* Popular card cyan override */
    .sint-pricing .pricing-card--popular {
      border-color: rgba(6,182,212,0.5);
      background: linear-gradient(160deg, #040f13 0%, #071922 100%);
      box-shadow: 0 0 0 1px rgba(6,182,212,0.3), 0 20px 60px rgba(6,182,212,0.15);
    }
    .sint-pricing .pricing-card--popular .pricing-card__badge {
      background: linear-gradient(90deg, #0891b2, #06b6d4);
      color: white;
      border: none;
    }
    .sint-pricing .pricing-card--popular .pricing-card__name,
    .sint-pricing .pricing-card--popular .pricing-card__price { color: var(--color-white); }
    .sint-pricing .pricing-card--popular .pricing-card__desc,
    .sint-pricing .pricing-card--popular .pricing-card__period { color: rgba(255,255,255,0.55); }
    .sint-pricing .pricing-card--popular .pricing-card__currency { color: #22d3ee; }
    .sint-pricing .pricing-card--popular .pricing-card__features li { color: rgba(255,255,255,0.8); }
    .sint-pricing .pricing-card--popular .pricing-card__features svg { color: #22d3ee; }
    .sint-pricing .pricing-card--popular .pricing-card__highlight-pill {
      background: rgba(6,182,212,0.15);
      border-color: rgba(6,182,212,0.35);
      color: #67e8f9;
    }
    .sint-pricing .pricing-card--popular .btn--primary {
      background: linear-gradient(90deg, #0891b2, #06b6d4);
      border-color: transparent;
    }
    .sint-pricing .pricing-card--popular .btn--primary:hover {
      background: linear-gradient(90deg, #0e7490, #0891b2);
    }

    /* Enterprise card — ensure button is visible on dark bg */
    .sint-pricing .pricing-card--enterprise .btn--ghost {
      color: var(--color-white);
      border-color: rgba(255,255,255,0.25);
    }
    .sint-pricing .pricing-card--enterprise .btn--ghost:hover {
      background: rgba(255,255,255,0.08);
    }

    /* ── CTA dark ── */
    .sint-cta-section {
      padding: var(--space-16) 0;
    }

    /* ── Features grid + cards ── */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
    }
    @media (max-width: 900px) {
      .features-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
    }
    .feature-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-100);
      border-radius: var(--radius-2xl);
      padding: var(--space-8);
      display: flex; flex-direction: column; gap: var(--space-4);
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
    .feature-card__icon {
      width: 52px; height: 52px; flex-shrink: 0;
      border-radius: var(--radius-xl);
      background: rgba(6,182,212,0.1);
      display: flex; align-items: center; justify-content: center;
      color: #06b6d4;
    }
    .feature-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-gray-900); }
    .feature-card__desc  { font-size: var(--font-size-sm); color: var(--color-gray-500); line-height: 1.65; }

    /* Use global .faq-section, .faq-grid, accordion-item from components.css */

    /* ── White-section eyebrow overrides ── */
    #features .section-header__eyebrow {
      color: #06b6d4;
    }
    #features .section-header__eyebrow::before {
      background: #06b6d4;
    }
    .sint-pricing .section-header__eyebrow {
      color: #06b6d4;
    }
    .sint-pricing .section-header__eyebrow::before {
      background: #06b6d4;
    }
    .sint-scenarios-section .section-header__eyebrow {
      color: #06b6d4;
    }
    .sint-scenarios-section .section-header__eyebrow::before {
      background: #06b6d4;
    }

    /* ── Pricing: non-popular card cyan accents ── */
    .sint-pricing .pricing-card:not(.pricing-card--popular):not(.pricing-card--enterprise) .pricing-card__tier-icon {
      background: rgba(6,182,212,0.08);
      color: #06b6d4;
    }
    .sint-pricing .pricing-card:not(.pricing-card--popular):not(.pricing-card--enterprise) .pricing-card__highlight-pill {
      background: rgba(6,182,212,0.08);
      border-color: rgba(6,182,212,0.25);
      color: #06b6d4;
    }
    .sint-pricing .pricing-card:not(.pricing-card--popular):not(.pricing-card--enterprise) .pricing-card__features svg {
      color: #22d3ee;
    }

    /* ── Pricing: popular card — fix blue card__top ── */
    .sint-pricing .pricing-card--popular .pricing-card__top {
      background: linear-gradient(135deg, #083344 0%, #0e4f64 100%);
      border-bottom-color: rgba(255,255,255,0.1);
    }
    .sint-pricing .pricing-card--popular .pricing-card__tier-icon {
      background: rgba(255,255,255,0.15);
      color: white;
    }

    /* ── FAQ CTA card cyan override ── */
    .sint-faq .faq-cta-card {
      background: linear-gradient(135deg, #0c4a6e, #0891b2);
    }

    /* FAQ legacy eyebrow classes */
    .section-eyebrow {
      display: inline-block;
      font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
      text-transform: uppercase; letter-spacing: 0.08em;
      color: #06b6d4; margin-bottom: var(--space-3);
    }
    .section-title {
      font-size: clamp(1.75rem, 3vw, 2.25rem);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-gray-900); letter-spacing: -0.02em;
    }
    .section-subtitle {
      font-size: var(--font-size-base); color: var(--color-gray-500);
      line-height: var(--line-height-relaxed);
    }

    /* ── CTA Dark — cyan override ── */
    .sint-cta-section .cta-dark {
      background: linear-gradient(135deg, #083344 0%, #0c4a6e 50%, #0e5f80 100%);
    }
    .sint-cta-section .cta-dark::before {
      background: rgba(6,182,212,0.12);
    }
    .sint-cta-section .cta-dark__eyebrow {
      color: #67e8f9;
    }
    .sint-cta-section .cta-dark .btn--primary {
      background: #06b6d4;
      border-color: #06b6d4;
      color: #fff;
    }
    .sint-cta-section .cta-dark .btn--primary:hover {
      background: #0891b2;
      border-color: #0891b2;
    }

    /* Override eyebrow for sections within sint-systems */
    .sint-section-eyebrow {
      display: inline-block;
      font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.08em; color: #22d3ee;
      background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.2);
      padding: 4px 12px; border-radius: var(--radius-full);
      margin-bottom: var(--space-4);
    }

/* фирменный акцент страницы в стеклянных статах */
.sint-hero .glass-stat__val { color: #22d3ee; }