:root{
    --bg:#f7f8fb;
    --bg-soft:#eef1f5;
    --card:#ffffff;
    --card-border:#e3e6ec;
    --text:#14171c;
    --text-dim:#4b5563;
    --text-faint:#6b7280;
    --violet:#6d43ff;
    --teal:#0f8a7d;
    --amber:#d97706;
    --radius:16px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:"Space Grotesk", "IBM Plex Sans", sans-serif;
    line-height:1.15;
    margin:0 0 .5em;
    letter-spacing:-0.01em;
  }
  p{margin:0 0 1em;color:var(--text-dim)}
  a{color:inherit}
  .mono{font-family:"IBM Plex Mono", monospace}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* background glow */
  .glow-field{
    position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  }
  .glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.22;}
  .glow--violet{width:520px;height:520px; background:var(--violet); top:-160px; left:-120px;}
  .glow--teal{width:460px;height:460px; background:var(--teal); top:280px; right:-160px; opacity:.14;}
  .glow--amber{width:360px;height:360px; background:var(--amber); bottom:-140px; left:35%; opacity:.10;}

  /* header */
  header{
    position:sticky; top:0; z-index:40;
    background:rgba(247,248,251,.75);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--card-border);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1120px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:10px; font-family:"Space Grotesk", sans-serif; font-weight:600; font-size:18px;}
  .brand-mark{width:30px;height:30px;flex:none}
  .nav-links{display:flex; gap:28px; font-size:14px; color:var(--text-dim);}
  .nav-links a{text-decoration:none; transition:color .15s}
  .nav-links a:hover{color:var(--text)}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 20px; border-radius:999px; font-weight:600; font-size:14px;
    text-decoration:none; border:1px solid transparent; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    white-space:nowrap;
  }
  .btn:active{transform:scale(.97)}
  .btn--primary{
    background:linear-gradient(135deg, var(--violet), var(--teal));
    color:#08090b;
    box-shadow:0 8px 24px -8px rgba(109,67,255,.35);
  }
  .btn--primary:hover{box-shadow:0 10px 30px -6px rgba(15,138,125,.35)}
  .btn--ghost{
    background:transparent; color:var(--text); border-color:var(--card-border);
  }
  .btn--ghost:hover{border-color:var(--teal)}
  .btn--sm{padding:8px 16px; font-size:13px}

  /* hero */
  .hero{padding:88px 0 64px; text-align:center;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--teal); background:rgba(15,138,125,.08);
    border:1px solid rgba(15,138,125,.25); padding:6px 14px; border-radius:999px;
    margin-bottom:22px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal); box-shadow:0 0 8px var(--teal);}
  .hero h1{font-size:clamp(32px, 5vw, 54px); max-width:780px; margin:0 auto .5em;}
  .hero h1 .grad{
    background:linear-gradient(135deg, var(--teal), var(--violet));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-sub{max-width:560px; margin:0 auto 34px; font-size:17px;}
  .hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:18px;}
  .hero-note{font-size:13px; color:var(--text-faint);}

  /* report preview card */
  .report-card{
    max-width:640px; margin:56px auto 0; text-align:left;
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    overflow:hidden; box-shadow:0 24px 48px -24px rgba(20,23,28,.14);
  }
  .report-card__bar{
    display:flex; align-items:center; gap:8px; padding:12px 16px;
    border-bottom:1px solid var(--card-border); background:var(--bg-soft);
  }
  .report-card__bar span{width:9px;height:9px;border-radius:50%;background:#d7dbe1}
  .report-card__title{margin-left:6px; font-size:12px; color:var(--text-faint); font-family:"IBM Plex Mono", monospace;}
  .report-card__body{padding:20px 22px; font-size:13.5px;}
  .report-row{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px dashed var(--card-border);}
  .report-row:last-child{border-bottom:none}
  .report-row .k{color:var(--text-faint)}
  .report-row .v{font-family:"IBM Plex Mono", monospace; color:var(--text); text-align:right}
  .tag{
    display:inline-block; font-size:11px; padding:2px 8px; border-radius:6px;
    background:rgba(15,138,125,.12); color:var(--teal); font-family:"IBM Plex Mono", monospace;
  }
  .report-card__foot{
    padding:12px 22px; font-size:11.5px; color:var(--text-faint); border-top:1px solid var(--card-border);
  }

  /* sections */
  section{padding:88px 0;}
  .section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
  .section-head .eyebrow{margin-bottom:16px}
  .section-head h2{font-size:clamp(26px,3.4vw,36px);}
  .section-head p{font-size:16px}

  /* use case cards */
  .grid{display:grid; gap:20px;}
  .grid--3{grid-template-columns:repeat(3, 1fr);}
  .grid--2{grid-template-columns:repeat(2, 1fr);}
  .card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:26px; transition:border-color .2s, transform .2s;
  }
  .card:hover{border-color:rgba(109,67,255,.35); transform:translateY(-3px);}
  .card__icon{
    width:44px;height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(109,67,255,.12), rgba(15,138,125,.12));
    margin-bottom:18px;
  }
  .card__icon svg{width:22px;height:22px}
  .card h3{font-size:17px; margin-bottom:8px;}
  .card p{font-size:14px; margin-bottom:0;}

  /* how it works */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step;}
  .step{position:relative; padding:28px 22px 22px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);}
  .step__num{
    font-family:"Space Grotesk"; font-size:13px; color:var(--bg);
    background:linear-gradient(135deg, var(--teal), var(--violet));
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-weight:700; margin-bottom:16px;
  }
  .step h3{font-size:16px;}
  .step p{font-size:14px; margin:0;}

  /* pricing */
  .pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .price-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:28px 24px; display:flex; flex-direction:column; gap:14px;
  }
  .price-card--featured{border-color:var(--teal); box-shadow:0 0 0 1px rgba(15,138,125,.3), 0 20px 50px -25px rgba(15,138,125,.25); position:relative;}
  .price-card--featured::before{
    content:"Популярный"; position:absolute; top:-12px; left:24px;
    background:linear-gradient(135deg, var(--teal), var(--violet)); color:#08090b;
    font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px;
  }
  .price-card h3{font-size:15px; color:var(--text-dim); font-weight:500; margin-bottom:0; text-transform:uppercase; letter-spacing:.04em;}
  .price-amount{font-family:"Space Grotesk"; font-size:34px; font-weight:700;}
  .price-amount span{font-size:14px; color:var(--text-faint); font-weight:400;}
  .price-card ul{list-style:none; padding:0; margin:0; font-size:13.5px; color:var(--text-dim); display:flex; flex-direction:column; gap:8px;}
  .price-card li{display:flex; gap:8px; align-items:flex-start;}
  .price-card li svg{flex:none; width:16px;height:16px; margin-top:2px; color:var(--teal)}
  .price-note{font-size:12px; color:var(--text-faint); text-align:center; margin-top:28px;}

  /* trust / legal */
  .trust{
    background:var(--card); border:1px solid var(--card-border); border-radius:20px;
    padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;
  }
  .trust h2{font-size:24px;}
  .trust-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
  .trust-list li{display:flex; gap:12px; font-size:14px; color:var(--text-dim);}
  .trust-list svg{flex:none; width:20px;height:20px; color:var(--teal); margin-top:1px;}

  /* faq */
  .faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
  .faq-item{background:var(--card); border:1px solid var(--card-border); border-radius:14px; overflow:hidden;}
  .faq-q{
    width:100%; text-align:left; background:none; border:none; color:var(--text);
    font-family:"Space Grotesk"; font-size:15.5px; font-weight:600; padding:18px 22px;
    cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  }
  .faq-q svg{flex:none; transition:transform .2s; color:var(--text-faint); width:18px;height:18px}
  .faq-item[open] .faq-q svg{transform:rotate(45deg); color:var(--teal)}
  .faq-a{padding:0 22px 20px; font-size:14.5px; color:var(--text-dim);}
  .faq-item summary::-webkit-details-marker{display:none}

  /* final cta */
  .cta-band{
    text-align:center; padding:72px 40px; border-radius:24px;
    background:radial-gradient(circle at 30% 20%, rgba(109,67,255,.14), transparent 60%),
               radial-gradient(circle at 80% 80%, rgba(15,138,125,.12), transparent 55%),
               var(--card);
    border:1px solid var(--card-border);
  }
  .cta-band h2{font-size:clamp(24px,3.2vw,34px); max-width:560px; margin:0 auto .4em;}
  .cta-band p{max-width:460px; margin:0 auto 28px;}

  footer{border-top:1px solid var(--card-border); padding:48px 0 32px; font-size:13px; color:var(--text-faint);}
  .footer-grid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px;}
  .footer-brand{display:flex; align-items:center; gap:10px; color:var(--text-dim); font-family:"Space Grotesk"; font-weight:600;}
  .footer-links{display:flex; gap:20px; flex-wrap:wrap;}
  .footer-links a{text-decoration:none; color:var(--text-faint);}
  .footer-links a:hover{color:var(--text-dim)}
  .footer-legal{border-top:1px solid var(--card-border); padding-top:22px; line-height:1.7;}

  @media (max-width: 860px){
    .nav-links{display:none}
    .grid--3, .steps, .pricing-grid{grid-template-columns:1fr;}
    .trust{grid-template-columns:1fr; padding:30px;}
    section{padding:64px 0}
  }

  /* ---------- Blog: index & article pages ---------- */
  .breadcrumbs{font-size:13px; color:var(--text-faint); margin-bottom:18px;}
  .breadcrumbs a{text-decoration:none; color:var(--text-faint);}
  .breadcrumbs a:hover{color:var(--teal)}

  .blog-hero{padding:64px 0 40px; text-align:center;}
  .blog-hero h1{font-size:clamp(28px,4vw,42px); max-width:720px; margin:0 auto .4em;}
  .blog-hero p{max-width:560px; margin:0 auto; font-size:16px;}

  .blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding-bottom:80px;}
  .blog-card{
    display:flex; flex-direction:column; gap:12px;
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:26px; text-decoration:none; transition:border-color .2s, transform .2s;
  }
  .blog-card:hover{border-color:rgba(109,67,255,.35); transform:translateY(-3px);}
  .blog-card .tag{align-self:flex-start}
  .blog-card h2{font-size:19px; margin:4px 0 0;}
  .blog-card p{font-size:14px; margin:0;}
  .blog-card .read-more{font-size:13px; color:var(--teal); margin-top:auto; font-weight:600;}

  .article{padding:48px 0 96px;}
  .article__head{max-width:760px; margin:0 auto 40px;}
  .article__head .eyebrow{margin-bottom:18px}
  .article__head h1{font-size:clamp(28px,4vw,42px); margin-bottom:.4em;}
  .article__meta{font-size:13px; color:var(--text-faint);}
  .prose{max-width:760px; margin:0 auto; font-size:16px; color:var(--text-dim);}
  .prose h2{color:var(--text); font-size:24px; margin-top:1.7em;}
  .prose h3{color:var(--text); font-size:18.5px; margin-top:1.4em;}
  .prose p{margin:0 0 1.1em;}
  .prose ul, .prose ol{margin:0 0 1.1em; padding-left:1.3em; display:flex; flex-direction:column; gap:8px;}
  .prose li{margin:0;}
  .prose strong{color:var(--text);}
  .prose a{color:#0b6b5f; text-decoration:underline; text-underline-offset:2px;}
  .prose blockquote{
    margin:1.6em 0; padding:16px 20px; border-left:3px solid var(--teal);
    background:var(--card); border-radius:0 12px 12px 0; font-size:15px; color:var(--text-dim);
  }
  .callout{
    max-width:760px; margin:2em auto; padding:22px 24px; border-radius:var(--radius);
    background:var(--card); border:1px solid rgba(15,138,125,.3);
    display:flex; gap:16px; align-items:flex-start;
  }
  .callout svg{flex:none; width:22px; height:22px; color:var(--teal); margin-top:2px;}
  .callout p{margin:0; font-size:14.5px;}
  .callout strong{color:var(--text);}

  .article-cta{
    max-width:760px; margin:56px auto 0; text-align:center; padding:40px 32px; border-radius:20px;
    background:radial-gradient(circle at 30% 20%, rgba(109,67,255,.12), transparent 60%),
               radial-gradient(circle at 80% 80%, rgba(15,138,125,.1), transparent 55%),
               var(--card);
    border:1px solid var(--card-border);
  }
  .article-cta h3{font-size:20px; margin-bottom:.4em;}
  .article-cta p{max-width:440px; margin:0 auto 20px; font-size:14.5px;}

  .related{max-width:760px; margin:64px auto 0;}
  .related h3{font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); font-weight:600; margin-bottom:16px;}
  .related-list{display:flex; flex-direction:column; gap:10px;}
  .related-list a{
    display:block; padding:14px 18px; background:var(--card); border:1px solid var(--card-border);
    border-radius:12px; text-decoration:none; color:var(--text); font-size:14.5px; font-weight:500;
    transition:border-color .2s;
  }
  .related-list a:hover{border-color:var(--teal)}

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


/* ==========================================================================
   DARK BLACK/ORANGE THEME  (appended override — wins by cascade order)
   Accents remapped: --violet -> orange, --teal -> gold, --amber -> deep orange
   ========================================================================== */
:root{
  --bg:#0a0a0c;
  --bg-soft:#131317;
  --card:#161619;
  --card-border:#2a2a31;
  --text:#f4f2ee;
  --text-dim:#bdb9b1;
  --text-faint:#87847d;
  --violet:#ff7a18;   /* primary accent (orange) */
  --teal:#f5a623;     /* secondary accent (gold)  */
  --amber:#ff9a3d;    /* tertiary accent          */
}
body{background:var(--bg); color:var(--text);}

/* header */
header{background:rgba(10,10,12,.72); border-bottom-color:var(--card-border);}

/* glows on black */
.glow--violet{opacity:.20}
.glow--teal{opacity:.14}
.glow--amber{opacity:.12}

/* buttons */
.btn--primary{
  background:linear-gradient(135deg, var(--violet), var(--teal));
  color:#0a0a0c;
  box-shadow:0 8px 24px -8px rgba(255,122,24,.40);
}
.btn--primary:hover{box-shadow:0 10px 30px -6px rgba(245,166,35,.42)}
.btn--ghost:hover{border-color:var(--violet)}

/* report preview card */
.report-card{box-shadow:0 24px 48px -24px rgba(0,0,0,.6);}
.report-card__bar span{background:#3a3a42}

/* hover accents that were hardcoded violet/teal */
.card:hover{border-color:rgba(255,122,24,.42)}
.blog-card:hover{border-color:rgba(255,122,24,.42)}
.card__icon{background:linear-gradient(135deg, rgba(255,122,24,.16), rgba(245,166,35,.16));}

/* eyebrow / tag / callout tints (were green) */
.eyebrow{color:var(--teal); background:rgba(245,166,35,.10); border-color:rgba(245,166,35,.28);}
.tag{background:rgba(245,166,35,.14); color:var(--teal);}
.callout{border-color:rgba(255,122,24,.35);}

/* steps number contrast */
.step__num{color:#0a0a0c}

/* pricing featured (kept for other pages that still use it) */
.price-card--featured{border-color:var(--teal); box-shadow:0 0 0 1px rgba(245,166,35,.32), 0 20px 50px -25px rgba(255,122,24,.25);}
.price-card--featured::before{color:#0a0a0c}

/* final CTA + article CTA radial tints */
.cta-band{
  background:radial-gradient(circle at 30% 20%, rgba(255,122,24,.16), transparent 60%),
             radial-gradient(circle at 80% 80%, rgba(245,166,35,.12), transparent 55%),
             var(--card);
}
.article-cta{
  background:radial-gradient(circle at 30% 20%, rgba(255,122,24,.14), transparent 60%),
             radial-gradient(circle at 80% 80%, rgba(245,166,35,.10), transparent 55%),
             var(--card);
}

/* prose links -> orange */
.prose a{color:var(--amber);}
.prose blockquote{border-left-color:var(--teal);}

/* card feature icons -> accent */
.card__icon svg{stroke:var(--violet);}

/* recolor existing inline brand SVGs to the palette (shape unchanged) */
.brand-mark rect,
.footer-brand svg rect{fill:#1c1c20;}
.brand-mark circle,
.footer-brand svg circle{stroke:var(--teal);}
.brand-mark line,
.footer-brand svg line{stroke:var(--violet);}