/* ============================================================================
   Sema PTA landing — 07 — Приватность (privacy diagram, devices)
   ----------------------------------------------------------------------------
   To edit this section, open css/privacy.css. All rules are grouped here.
   ============================================================================ */

/* ============ Privacy ============ */

.privacy {
    background: linear-gradient(180deg, #14100C, #0E0B08);
    border: 1px solid var(--border);
    border-radius: 28px; padding: 64px;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
    align-items: center;
  }

.privacy h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 20px; }

.privacy p  { color: var(--text-dim); font-size: 16px; margin-bottom: 20px; }

.privacy-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }

.privacy-list li { list-style: none; display: flex; gap: 12px; color: var(--text-dim); font-size: 15px; }

.privacy-list li::before {
    content: "\2713"; color: var(--sema-500);
    width: 22px; height: 22px; flex-shrink: 0;
    background: rgba(255,138,76,0.1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
  }

/* ============ Privacy diagram (new): cloud crossed → barrier → 3 devices with local Sema ML ============ */

.privacy-diagram {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 22px 22px;
    background:
      radial-gradient(circle at 50% 100%, rgba(255,138,76,0.10), transparent 60%),
      linear-gradient(180deg, rgba(20,16,12,0.6), rgba(14,11,8,0.9));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-height: 380px;
  }

/* cloud X row */

.pd-cloud {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: #E88;
    opacity: 0.75;
  }

.pd-cloud svg { color: #E88; opacity: 0.65; }

.pd-cross {
    position: absolute; top: 4px; left: 50%;
    width: 80px; height: 2px;
    background: #E88;
    transform: translateX(-50%) rotate(-18deg);
    box-shadow: 0 0 8px rgba(232,136,136,0.5);
  }

.pd-cloud-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: #E88;
    text-transform: uppercase;
  }

/* barrier */

.pd-barrier {
    position: relative;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(255,138,76,0.5) 0 8px, transparent 8px 14px);
    display: flex;
    justify-content: center;
  }

.pd-barrier-label {
    position: absolute;
    top: -10px;
    padding: 2px 10px;
    background: #14100C;
    border: 1px solid rgba(255,138,76,0.35);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--sema-300);
    text-transform: uppercase;
    white-space: nowrap;
  }

/* devices row */

.pd-devices {
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr;
    gap: 14px;
    width: 100%;
    align-items: end;
  }

.pd-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

.pd-screen {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px 8px 4px 4px;
    border: 1.5px solid var(--sema-500);
    background: linear-gradient(180deg, rgba(255,138,76,0.08), rgba(20,16,12,0.9));
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 24px rgba(255,138,76,0.15), inset 0 0 20px rgba(255,138,76,0.05);
  }

.pd-phone .pd-screen {
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    padding: 8px;
  }

.pd-base {
    width: 60%;
    height: 5px;
    background: rgba(255,138,76,0.4);
    border-radius: 0 0 6px 6px;
  }

.pd-phone .pd-base { display: none; }

.pd-caption {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-top: 4px;
  }

.pd-ml {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,138,76,0.15);
    border: 1px solid rgba(255,138,76,0.4);
  }

.pd-ml-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sema-500);
    box-shadow: 0 0 6px var(--sema-500);
    animation: pd-pulse 1.6s ease-in-out infinite;
  }

.pd-ml-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--sema-500);
    text-transform: uppercase;
    font-weight: 700;
  }

.pd-notes {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

.pd-notes span {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(244,238,230,0.28);
  }

.pd-notes span:nth-child(1) { width: 90%; }

.pd-notes span:nth-child(2) { width: 60%; }

.pd-notes span:nth-child(3) { width: 78%; }

/* footer badge */

.pd-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,138,76,0.10);
    border: 1px solid rgba(255,138,76,0.35);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--sema-300);
    text-transform: uppercase;
  }

.pd-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sema-500);
    box-shadow: 0 0 6px var(--sema-500);
  }