/* NaidiAI — Улучшение качества фото. Tokens copied from NaidiAI Studio DS. */
/* Автономно, без CDN: Montserrat подключается локально. Положите файлы в assets/fonts/
   (woff2, начертания 400/500/600/700); до этого работает системный fallback. */
@font-face{font-family:"Montserrat";src:url("../assets/fonts/Montserrat-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/Montserrat-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/Montserrat-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/Montserrat-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root,[data-theme="dark"]{
--font-core:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--black:#000;--white:#fff;--ink-900:#02080F;--surface-900:#0E1011;--surface-800:#1C1E20;
--grey-500:#828282;--grey-450:#898989;--blue-500:#007FFF;--blue-400:#4CA5FF;
--alpha-white-10:rgba(255,255,255,0.1);
--bg-page:var(--black);--surface-card:var(--surface-900);--surface-inset:var(--black);--surface-tag:var(--surface-800);
--text-primary:var(--white);--text-secondary:var(--grey-500);--text-ui:var(--grey-450);
--action-primary:var(--blue-500);--accent:var(--blue-400);--text-on-action:var(--white);
--cta-band:var(--blue-500);--cta-button-bg:var(--ink-900);--cta-button-fg:var(--blue-500);
--border:rgba(255,255,255,0.12);--border-hairline:rgba(255,255,255,0.12);
--card-stroke:none;--shadow:none;--surface-hover:#131617;
--glass-fill:rgba(28,30,32,0.2);--glass-border:inset 0 0 0 1px rgba(255,255,255,0.14);--glass-sheen:inset 0 1px 0 0 rgba(255,255,255,0.18);
--gradient-stroke:linear-gradient(90deg,rgba(76,165,255,0) 55%,rgba(76,165,255,0.55) 88%,#4CA5FF 100%);--gradient-stroke-w:1.5px;
--fs-display:48px;--fs-section:36px;--fs-body:20px;--fs-label:16px;--fs-ui:15px;--fs-caption:14px;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
--lh-flat:100%;--ls-wide:0.1em;
--r-10:10px;--r-16:16px;--r-20:20px;--r-26:26px;--r-30:30px;--r-full:9999px;
--transition:160ms ease;
--hero-glow:radial-gradient(52% 52% at 50% 46%,rgba(0,127,255,0.34) 0%,rgba(0,127,255,0.12) 48%,rgba(0,127,255,0) 78%);
}
[data-theme="light"]{
--bg-page:#F6F8FB;--surface-card:#FFF;--surface-2:#F1F4F8;--surface-hover:#E8EDF4;
--text-primary:#111827;--text-secondary:#5F6875;--text-ui:#7B8490;
--border:rgba(17,24,39,0.12);--border-hairline:rgba(17,24,39,0.10);
--card-stroke:inset 0 0 0 1px rgba(17,24,39,0.12),0 1px 2px rgba(17,24,39,0.05),0 8px 20px rgba(17,24,39,0.04);
--shadow:0 8px 20px rgba(17,24,39,0.06);
--alpha-white-10:rgba(17,24,39,0.06);
--glass-fill:rgba(255,255,255,0.55);--glass-border:inset 0 0 0 1px rgba(17,24,39,0.10);--glass-sheen:inset 0 1px 0 0 rgba(255,255,255,0.9);
--hero-glow:radial-gradient(52% 52% at 50% 46%,rgba(0,127,255,0.14) 0%,rgba(0,127,255,0.05) 48%,rgba(0,127,255,0) 78%);
}
html{background:var(--bg-page)}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-core);font-weight:var(--fw-medium);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:opacity var(--transition)}
a:hover{color:var(--text-primary);opacity:1}
*{text-wrap:pretty;box-sizing:border-box}
img{display:block;max-width:100%}
/* layout */
.nai-page{overflow-x:clip;padding:72px 0 96px}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.sec{margin-top:104px}
h1,h2,h3{margin:0;font-weight:var(--fw-medium);line-height:var(--lh-flat)}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-section)}
.lead{font-size:var(--fs-body);font-weight:var(--fw-regular);color:var(--text-secondary);line-height:145%;margin:0}
.sec-head{margin-bottom:40px}
.sec-head .lead{margin-top:18px;max-width:620px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
/* buttons */
.nai-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 34px;border:none;border-radius:var(--r-26);cursor:pointer;background:var(--action-primary);color:var(--text-on-action);font-family:var(--font-core);font-size:var(--fs-label);font-weight:var(--fw-medium);line-height:var(--lh-flat);transition:opacity var(--transition)}
.nai-btn:hover{opacity:.88}.nai-btn:active{opacity:.76}
.nai-btn-ink{background:var(--cta-button-bg);color:var(--cta-button-fg)}
.trust{margin-top:18px;font-size:var(--fs-caption);color:var(--text-secondary);font-weight:var(--fw-medium)}
.on-blue .trust{color:rgba(255,255,255,0.75)}
/* cards */
.nai-card{position:relative;border-radius:var(--r-30);background:var(--surface-card);box-shadow:var(--card-stroke);padding:24px}
.nai-gradient-edge::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--gradient-stroke-w);background:var(--gradient-stroke);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
/* hero */
.hero{display:grid;grid-template-columns:1fr 1.12fr;gap:64px;align-items:stretch}
.hero-body{display:flex;flex-direction:column;align-items:flex-start}
.hero h1{max-width:none;margin-top:0}
.hero .lead{margin-top:22px;max-width:none;text-align:justify}
.hero-drop{margin-top:32px;width:100%;max-width:none;flex:1;min-height:150px;gap:16px}
.up-drop.hero-drop{border:2.5px dashed var(--blue-500);border-radius:var(--r-20)}
.up-drop.hero-drop:hover{border-color:var(--blue-400);box-shadow:0 0 24px rgba(0,127,255,0.18)}
.up-drop.pulse{animation:dropPulse 800ms ease 2}
@keyframes dropPulse{0%,100%{box-shadow:0 0 0 rgba(0,127,255,0)}50%{box-shadow:0 0 34px rgba(0,127,255,0.45)}}
@media (prefers-reduced-motion:reduce){.up-drop.pulse{animation:none}}
.hero-media{position:relative}
/* category selector */
.cats{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 1 0;min-width:76px;padding:14px 10px;border:none;border-radius:var(--r-16);cursor:pointer;background:var(--surface-card);box-shadow:var(--card-stroke);color:var(--text-secondary);font-family:var(--font-core);font-size:var(--fs-caption);font-weight:var(--fw-medium);line-height:var(--lh-flat);transition:color var(--transition),background var(--transition),box-shadow var(--transition)}
.cat svg{width:20px;height:20px}
.cat:hover{color:var(--text-primary)}
.cat[aria-selected="true"]{color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 18px rgba(0,127,255,0.18)}
.cat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero-media::before{content:"";position:absolute;inset:-16%;background:var(--hero-glow);pointer-events:none}
/* before/after slider */
.ba{--pos:50%;position:relative;overflow:hidden;border-radius:var(--r-30);touch-action:pan-y;user-select:none;background:var(--surface-card)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:rgba(255,255,255,0.9)}
.ba-knob{position:absolute;top:50%;left:var(--pos);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:var(--r-full);background:var(--glass-fill);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--glass-border),var(--glass-sheen),0 4px 18px rgba(0,0,0,0.35);cursor:ew-resize;touch-action:none}
.ba-knob::before,.ba-knob::after{content:"";position:absolute;top:50%;width:8px;height:8px;border-left:2px solid #fff;border-bottom:2px solid #fff}
.ba-knob::before{left:9px;transform:translateY(-50%) rotate(45deg)}
.ba-knob::after{right:9px;transform:translateY(-50%) rotate(-135deg)}
.ba-knob:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ba-tag{position:absolute;top:16px;padding:8px 14px;border-radius:var(--r-16);background:rgba(2,8,15,0.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:var(--fs-caption);line-height:var(--lh-flat)}
.ba-tag-b{left:16px}.ba-tag-a{right:16px}
/* upload zone */
.tool{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:32px}
.tool h2{font-size:28px}
.tool-note{margin-top:14px;font-size:var(--fs-ui);color:var(--text-secondary);font-weight:var(--fw-regular)}
.up-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:150px;padding:28px 40px;border-radius:var(--r-10);background:var(--surface-inset);border:1px dashed var(--border);cursor:pointer;color:var(--text-primary);font-family:var(--font-core);transition:border-color var(--transition)}
.up-drop:hover{border-color:var(--accent)}
.up-drop b{font-size:var(--fs-label);font-weight:var(--fw-medium)}
.up-drop span{font-size:var(--fs-caption);color:var(--text-ui)}
[data-theme="light"] .up-drop{color:#fff}
.tool-side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
/* benefits */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}
.benefit{border-radius:var(--r-30);background:var(--surface-card);box-shadow:var(--card-stroke);padding:26px 28px}
.benefit::before{content:"";display:block;width:10px;height:10px;border-radius:3px;background:var(--accent);margin-bottom:18px}
.benefit h3{font-size:var(--fs-body)}
.benefit p{margin:12px 0 0;font-size:var(--fs-label);font-weight:var(--fw-regular);color:var(--text-secondary);line-height:145%}
/* other tools */
.tools{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:900px;margin:0 auto}
.tool-pill{display:inline-flex;align-items:center;padding:16px 28px;border-radius:var(--r-30);background:var(--surface-card);box-shadow:var(--card-stroke),inset 0 0 0 1px var(--border-hairline);color:var(--text-primary);font-size:var(--fs-label);font-weight:var(--fw-medium);line-height:var(--lh-flat);transition:box-shadow var(--transition),color var(--transition),background var(--transition)}
.tool-pill:hover{color:var(--text-primary);opacity:1;background:var(--surface-hover);box-shadow:var(--card-stroke),inset 0 0 0 1px var(--accent),0 0 20px rgba(0,127,255,0.18)}
/* big examples */
.ex{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;margin-top:72px}
.ex>div:first-child{display:flex;flex-direction:column;justify-content:center;border-radius:var(--r-30);background:var(--surface-card);box-shadow:var(--card-stroke);padding:48px}
.ex:first-of-type{margin-top:0}
.ex-media{order:2;display:flex}
.ex-media .ba{flex:1;aspect-ratio:auto!important;min-height:420px}
.ex.flip .ex-media{order:0}
.ex h3{font-size:28px;max-width:none}
.ex h2{max-width:none}
.ex p{margin:28px 0 0;font-size:var(--fs-body);font-weight:var(--fw-regular);color:var(--text-secondary);line-height:145%;max-width:none}
/* showcase grid */
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:23px}
.type-tile img,.type-tile image-slot{border-radius:var(--r-20);aspect-ratio:1/1;width:100%;object-fit:cover}
.type-tile image-slot{display:block;height:auto}
.type-tile figcaption{margin-top:14px;font-size:var(--fs-label);line-height:130%}
.type-tile{margin:0}
.type-tile img{transition:transform 360ms cubic-bezier(.22,1,.36,1)}
.type-tile:hover img{transform:scale(1.02)}
/* use cases showcase */
.cs-pills{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.cs-pill{padding:14px 26px;border:none;border-radius:var(--r-30);cursor:pointer;background:var(--surface-card);box-shadow:var(--card-stroke);color:var(--text-secondary);font-family:var(--font-core);font-size:var(--fs-ui);font-weight:var(--fw-medium);line-height:var(--lh-flat);transition:color var(--transition),box-shadow var(--transition),background var(--transition)}
.cs-pill:hover{color:var(--text-primary)}
.cs-pill[aria-selected="true"]{background:var(--action-primary);color:#fff;box-shadow:0 0 22px rgba(0,127,255,0.28)}
.cs-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cs-stage{position:relative;height:clamp(340px,48vw,660px);touch-action:pan-y}
.cs-card{position:absolute;top:0;left:50%;width:min(72%,940px);transform:translateX(-50%);transition:transform 520ms cubic-bezier(.22,1,.36,1),opacity 520ms ease,filter 520ms ease;will-change:transform,opacity,filter}
.cs-card img{width:100%;height:auto;border-radius:var(--r-30);box-shadow:0 24px 70px rgba(0,0,0,0.45);pointer-events:none}
[data-theme="light"] .cs-card img{box-shadow:0 20px 60px rgba(17,24,39,0.18)}
.type-tile img,.use img,.ex img{pointer-events:none}
[data-theme="light"] .cs-card img{box-shadow:0 20px 60px rgba(17,24,39,0.18)}
.cs-card[data-pos="active"]{z-index:3;opacity:1;filter:none;transform:translateX(-50%) scale(1)}
.cs-card[data-pos="left"]{z-index:1;opacity:.32;filter:blur(7px);transform:translateX(-114%) scale(.82);cursor:pointer}
.cs-card[data-pos="right"]{z-index:1;opacity:.32;filter:blur(7px);transform:translateX(14%) scale(.82);cursor:pointer}
.cs-card[data-pos="left"]:hover,.cs-card[data-pos="right"]:hover{opacity:.5}
.cs-card[data-pos="hidden"]{z-index:0;opacity:0;filter:blur(8px);transform:translateX(-50%) scale(.7);pointer-events:none}
.cs-cta{display:flex;justify-content:center;margin-top:16px}
@media (prefers-reduced-motion:reduce){.cs-card{transition:none}}
/* steps */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:23px}
.steps::before{content:"";position:absolute;top:5px;left:8%;right:8%;height:1px;background:var(--border)}
.step{padding-top:28px;position:relative}
.step::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;background:var(--accent)}
.step h3{font-size:var(--fs-body)}
.step p{margin:12px 0 0;font-size:var(--fs-label);font-weight:var(--fw-regular);color:var(--text-secondary);line-height:145%;max-width:34ch}
/* giant showcase */
.giant .ba{aspect-ratio:16/9}
.giant .ba img{object-position:50% 28%}
/* why pills */
.whys{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.why{padding:20px 30px;border-radius:var(--r-30);background:var(--surface-card);box-shadow:var(--card-stroke);font-size:var(--fs-label);letter-spacing:var(--ls-wide);line-height:130%}
/* CTA band */
.cta-band{border-radius:var(--r-30);background:var(--cta-band);color:#fff;padding:56px 48px}
.cta-grid{background:#02080F url("../assets/images/cta-grid.webp") center/cover no-repeat;display:flex;flex-direction:column;align-items:center;text-align:center;padding:80px 48px}
.cta-band h2{font-size:var(--fs-section);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:0.02em;max-width:20ch}
.cta-band p{margin:20px 0 0;font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:145%;color:rgba(255,255,255,0.85);max-width:46ch}
.cta-grid .nai-btn{margin-top:34px}
/* FAQ */
.faqs{max-width:865px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.nai-faq{border-radius:var(--r-30);background:var(--surface-card);box-shadow:var(--card-stroke);cursor:pointer;transition:background var(--transition)}
.nai-faq:hover{background:var(--surface-hover)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:26px 32px;border:none;background:none;color:var(--text-primary);font-family:var(--font-core);font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:130%;text-align:left;cursor:pointer}
.faq-glyph{font-size:var(--fs-section);line-height:60%;color:var(--text-primary);flex:0 0 auto;transition:color var(--transition)}
.nai-faq[data-open] .faq-glyph{color:var(--accent)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms ease}
.nai-faq[data-open] .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 32px 26px;font-size:var(--fs-label);font-weight:var(--fw-regular);color:var(--text-secondary);line-height:150%;max-width:60ch}
/* final cta */
.final{text-align:center;padding:32px 0 0}
.final .lead{margin:20px auto 0;max-width:52ch}
.final .nai-btn{margin-top:34px}
/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity 600ms ease,transform 600ms ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
.type-tile img,.faq-a{transition:none}
.type-tile:hover img{transform:none}
}
/* responsive */
@media (max-width:1023px){
h1{font-size:40px}h2{font-size:30px}
.hero{grid-template-columns:1fr;gap:48px}
.hero-media{max-width:640px}
.benefits,.steps{grid-template-columns:repeat(2,1fr)}
.steps::before{display:none}
.types{grid-template-columns:repeat(2,1fr)}
.ex{grid-template-columns:1fr;gap:32px;margin-top:64px}
.ex>div:first-child{padding:32px}
.ex-media,.ex.flip .ex-media{order:0}
.ex-media .ba{aspect-ratio:4/3!important;min-height:0}
.tool{grid-template-columns:1fr}
.cta-band{padding:44px 32px}
.cta-grid{padding:56px 24px}
.giant .ba{aspect-ratio:4/3}
}
@media (max-width:639px){
.nai-page{padding-top:48px}
.sec{margin-top:72px}
h1{font-size:34px}h2{font-size:26px}
.ex h3,.tool h2{font-size:22px}
.lead{font-size:18px}
.benefits,.steps{grid-template-columns:1fr}
.hero-media{max-width:none}
.cats{gap:8px}
.cat{min-width:60px;padding:12px 6px;font-size:12px}
.giant .ba{aspect-ratio:1/1}
.cs-stage{height:auto}
.cs-card{position:relative;left:0;width:100%;max-width:none;margin:0;transform:none;display:none}
.cs-card[data-pos="active"]{display:block;transform:none}
.cs-pill{padding:12px 18px;font-size:var(--fs-caption)}
.cs-pills{gap:8px;margin-bottom:28px}
.cs-cta{margin-top:12px}
.nai-btn{width:100%;max-width:420px}
.cta-band h2{font-size:24px}
.whys{justify-content:flex-start}
}