/* NaidiAI Studio — «Удаление фона». Dark + Light через semantic variables. */
:root,[data-theme="dark"]{
  --nai-bg:#000000;
  --nai-surface:#0E1011;
  --nai-surface-hover:#131617;
  --nai-inset:#000000;
  --nai-glass:rgba(28,30,32,.6);
  --nai-text:#ffffff;
  --nai-text-secondary:#828282;
  --nai-border:rgba(255,255,255,.08);
  --nai-accent:#007FFF;
  --nai-accent-soft:#4CA5FF;
  --nai-on-accent:#ffffff;
  --nai-cta-btn-bg:#02080F;
  --nai-cta-btn-text:#ffffff;
  --nai-glow-opacity:.5;
  --nai-thumb-glow:rgba(76,165,255,.35);
}
[data-theme="light"]{
  --nai-bg:#ffffff;
  --nai-surface:#f5f7f9;
  --nai-surface-hover:#eceff2;
  --nai-inset:#e8ebee;
  --nai-glass:rgba(245,247,249,.75);
  --nai-text:#111318;
  --nai-text-secondary:#626872;
  --nai-border:rgba(15,20,30,.10);
  --nai-accent:#007FFF;
  --nai-accent-soft:#4CA5FF;
  --nai-on-accent:#ffffff;
  --nai-cta-btn-bg:#02080F;
  --nai-cta-btn-text:#ffffff;
  --nai-glow-opacity:.22;
  --nai-thumb-glow:rgba(0,127,255,.25);
}
/* Montserrat: положите лицензированные файлы в assets/fonts/ и добавьте @font-face; до этого — системный fallback */
html{background:var(--nai-bg)}
body{margin:0;background:var(--nai-bg);color:var(--nai-text);font-family:Montserrat,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:500;line-height:1}
a{color:var(--nai-accent-soft);text-decoration:none}a:hover{opacity:.88}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
.nai-page{position:relative;width:100%;max-width:1440px;margin:0 auto;overflow:clip;background:var(--nai-bg)}
.nai-stack{position:relative;z-index:1;display:flex;flex-direction:column;gap:40px;align-items:center;padding-bottom:40px}
.nai-sec{width:100%;max-width:1280px;display:flex;flex-direction:column;gap:40px;align-items:center;padding:0 20px;box-sizing:border-box}
.nai-sec>*{width:100%}
.nai-full{max-width:none;padding:0}
.nai-h2{margin:0;font-size:28px;font-weight:500;text-align:center;line-height:1}
/* Glow */
.nai-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.nai-glow img{position:absolute;opacity:var(--nai-glow-opacity)}
.nai-glow .g1{top:-180px;right:-560px;width:1200px;transform:rotate(-64deg)}
.nai-glow .g2{top:34%;left:-680px;width:1100px;transform:rotate(116deg)}
.nai-glow .g3{top:68%;right:-620px;width:1000px;transform:rotate(-64deg)}
/* Hero */
.nai-hero{width:100%;display:flex;flex-direction:column;gap:40px;align-items:center;padding:48px 20px 0;box-sizing:border-box}
.nai-hero-copy{width:100%;max-width:793px;display:flex;flex-direction:column;gap:32px;align-items:center;text-align:center}
.nai-h1{margin:0;font-size:34px;font-weight:500;line-height:1.05}
.nai-hero-text{margin:0;font-size:17px;font-weight:400;line-height:1.45;color:var(--nai-text)}
/* Button */
.nai-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 34px;border:none;border-radius:26px;background:var(--nai-accent);color:var(--nai-on-accent);font-size:16px;font-weight:500;cursor:pointer;transition:opacity 160ms ease;white-space:nowrap;max-width:100%}
.nai-btn:hover{opacity:.88}
.nai-btn:focus-visible{outline:2px solid var(--nai-accent-soft);outline-offset:2px}
.nai-btn--onband{background:var(--nai-cta-btn-bg);color:var(--nai-cta-btn-text);font-weight:600}
/* BeforeAfter slider */
.nai-ba{display:flex;flex-direction:column;gap:20px;align-items:center;width:100%}
.nai-ba-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--nai-surface);touch-action:pan-y;user-select:none;transition:opacity 150ms ease}
.nai-ba-frame.is-fading{opacity:0}
.nai-ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.nai-ba-after{clip-path:inset(0 0 0 50%)}
.nai-ba-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--nai-accent-soft);transform:translateX(-1px)}
.nai-ba-handle{position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:var(--nai-accent);display:flex;align-items:center;justify-content:center;color:var(--nai-on-accent);font-size:14px;letter-spacing:2px;cursor:ew-resize;box-shadow:0 0 14px var(--nai-thumb-glow)}
.nai-ba-label{position:absolute;top:14px;padding:8px 14px;border-radius:16px;background:var(--nai-glass);backdrop-filter:blur(18px);font-size:14px;color:var(--nai-text)}
.nai-ba-label--before{left:14px}
.nai-ba-label--after{right:14px}
/* Example thumbs selector */
.nai-thumbs{display:flex;gap:12px;align-items:center;justify-content:flex-start;padding:10px;background:var(--nai-glass);backdrop-filter:blur(18px);border-radius:60px;max-width:100%;overflow-x:auto;scrollbar-width:none;box-sizing:border-box}
.nai-thumbs::-webkit-scrollbar{display:none}
.nai-thumb{flex:0 0 auto;width:56px;height:56px;padding:0;border:1.5px solid transparent;border-radius:28px;overflow:hidden;background:var(--nai-surface);cursor:pointer;transition:width 250ms ease,border-color 250ms ease,box-shadow 250ms ease,opacity 160ms ease}
.nai-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none;position:static}
.nai-thumb:hover{opacity:.88}
.nai-thumb.is-active{width:96px;border-color:var(--nai-accent-soft);box-shadow:0 0 14px var(--nai-thumb-glow);cursor:default;opacity:1}
/* Card grids */
.nai-grid{display:grid;gap:23px;width:100%}
.nai-grid--4{grid-template-columns:repeat(4,1fr)}
.nai-grid--3{grid-template-columns:repeat(3,1fr)}
.nai-card{background:var(--nai-surface);border-radius:30px;padding:24px 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;transition:background 160ms ease}
.nai-card:hover{background:var(--nai-surface-hover)}
.nai-card h3{margin:0;font-size:18px;font-weight:500;line-height:1.2}
.nai-card p{margin:0;font-size:15px;font-weight:400;line-height:1.45;color:var(--nai-text-secondary)}
/* Blue gradient right-edge accent (DS: --gradient-stroke) */
.nai-edge{position:relative}
.nai-edge::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(90deg,transparent 40%,var(--nai-accent-soft));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* Steps */
.nai-step-badge{width:44px;height:44px;border-radius:50%;background:rgba(128,128,128,.18);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--nai-text)}
[data-theme="dark"] .nai-step-badge{background:rgba(255,255,255,.1)}
.nai-steps-cta{display:flex;justify-content:center}
/* Prompt card */
.nai-prompt{max-width:640px;margin:0 auto}
.nai-prompt-code{background:var(--nai-inset);border-radius:10px;padding:16px;font-size:15px;font-weight:400;line-height:1.45;color:var(--nai-text)}
.nai-copy{align-self:flex-start;display:inline-flex;align-items:center;height:40px;padding:0 22px;border:1px solid var(--nai-border);border-radius:16px;background:transparent;color:var(--nai-text);font-size:14px;cursor:pointer;transition:background 160ms ease,opacity 160ms ease}
.nai-copy:hover{background:var(--nai-surface-hover)}
/* Models */
.nai-tier{align-self:flex-start;padding:6px 12px;border-radius:16px;background:var(--nai-glass);font-size:11px;letter-spacing:.1em;color:var(--nai-text-secondary)}
.nai-model-name{margin:0;font-size:17px;font-weight:500}
/* Note */
.nai-note{max-width:700px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:20px}
.nai-note p{margin:0;font-size:16px;font-weight:400;line-height:1.5;color:var(--nai-text-secondary)}
/* FAQ */
.nai-faq{width:100%;max-width:865px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.nai-faq-item{background:var(--nai-surface);border-radius:30px;overflow:hidden;transition:background 160ms ease}
.nai-faq-item:hover{background:var(--nai-surface-hover)}
.nai-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:22px 26px;border:none;background:transparent;font-size:17px;font-weight:500;text-align:left;cursor:pointer;box-sizing:border-box}
.nai-faq-glyph{font-size:28px;line-height:1;color:var(--nai-text);transition:color 160ms ease;flex:0 0 auto}
.nai-faq-item.is-open .nai-faq-glyph{color:var(--nai-accent-soft)}
.nai-faq-a{max-height:0;overflow:hidden;transition:max-height 250ms ease}
.nai-faq-a p{margin:0;padding:0 26px 22px;font-size:15px;font-weight:400;line-height:1.5;color:var(--nai-text-secondary)}
/* CTA band */
.nai-cta-band{width:100%;background:var(--nai-accent);box-sizing:border-box;padding:48px 20px}
.nai-cta-inner{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.nai-cta-copy{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:18px}
.nai-cta-copy h2{margin:0;font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#fff;line-height:1.15}
.nai-cta-copy p{margin:0;font-size:15px;font-weight:400;line-height:1.5;color:rgba(255,255,255,.85)}
/* Responsive: mobile-first upgrades */
@media (min-width:768px){
  .nai-stack{gap:60px;padding-bottom:60px}
  .nai-sec{padding:0 32px}
  .nai-hero{padding:60px 32px 0}
  .nai-h1{font-size:48px}
  .nai-h2{font-size:36px}
  .nai-thumbs{justify-content:center}
  .nai-cta-band{padding:60px 40px}
  .nai-cta-copy h2{font-size:32px}
}
@media (max-width:1023px){
  .nai-grid--4{grid-template-columns:repeat(2,1fr)}
  .nai-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .nai-grid--4,.nai-grid--3{grid-template-columns:1fr}
  .nai-btn{padding:0 24px}
}