/* ===== NaidiAI tokens (only those used by this page) ===== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
:root{
--font-core:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
/* colors — dark theme (default) */
--bg-page:#000000;
--surface-card:#0E1011;
--surface-tag:#1C1E20;
--text-primary:#FFFFFF;
--text-secondary:#828282;
--action-primary:#007FFF;
--accent:#4CA5FF;
--border-hairline:rgba(255,255,255,0.12);
--card-stroke:none;
--cta-button-bg:#02080F;
--cta-button-fg:#007FFF;
/* typography */
--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.100em;
/* spacing */
--section-gap:60px;--heading-gap:40px;--card-gap:23px;--container:1280px;--container-faq:865px;--sp-20:20px;
/* radii */
--r-16:16px;--r-20:20px;--r-26:26px;--r-30:30px;
/* motion */
--transition:160ms ease;
}
/* light theme overrides */
[data-theme="light"]{
--bg-page:#F6F8FB;
--surface-card:#FFFFFF;
--surface-2:#F1F4F8;
--surface-hover:#E8EDF4;
--text-primary:#111827;
--text-secondary:#5F6875;
--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);
}
/* base */
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}
/* shared interaction rules */
.nai-btn:hover{opacity:.88}
.nai-btn:active{opacity:.76}
.nai-faq{cursor:pointer;transition:background var(--transition)}
.nai-faq:hover{background:#131617}
[data-theme="light"] .nai-faq:hover{background:var(--surface-hover)}
html.theme-switching *{transition:background-color 260ms ease,color 260ms ease,box-shadow 260ms ease,opacity 260ms ease,filter 260ms ease!important}
/* ===== end tokens ===== */
/* «Открытки к 1 сентября» — BODY-лендинг NaidiAI. Слой --nai-* поверх токенов DS. */
:root{
--nai-bg:var(--bg-page);
--nai-surface:var(--surface-card);
--nai-surface-tag:var(--surface-tag);
--nai-text:var(--text-primary);
--nai-text-2:var(--text-secondary);
--nai-action:var(--action-primary);
--nai-accent:var(--accent);
--nai-border:var(--border-hairline);
--nai-radius:var(--r-30);
--nai-glow-a:.5;
--nai-glow-b:.28;
--nai-card-shadow:0 24px 60px rgba(0,0,0,.45);
--nai-veil:linear-gradient(to top,rgba(2,8,15,.85) 0%,rgba(2,8,15,.42) 42%,rgba(2,8,15,0) 100%);
}
[data-theme="light"]{
--nai-glow-a:.2;
--nai-glow-b:.1;
--nai-card-shadow:0 18px 44px rgba(17,24,39,.2);
}
/* ---- каркас ---- */
.s1{overflow-x:clip;position:relative;font-family:var(--font-core)}
.s1 .wrap{max-width:var(--container);margin:0 auto;padding:0 20px;position:relative}
.s1 section{margin-top:var(--section-gap)}
.s1 h1,.s1 h2,.s1 h3{margin:0;line-height:var(--lh-flat);font-weight:var(--fw-medium)}
.s1 h2{font-size:clamp(28px,3.4vw,var(--fs-section));text-align:center;text-wrap:balance}
.s1 p{margin:0}
.s1 p.s1-sub{margin:16px auto 0;max-width:640px;color:var(--nai-text-2);font-weight:var(--fw-regular);font-size:clamp(16px,1.6vw,var(--fs-body));line-height:145%;text-align:center}
.s1-head{margin-bottom:var(--heading-gap)}
.s1 img{display:block}
a{color:var(--nai-accent)}a:hover{color:var(--nai-action)}
/* ---- кнопки, pills ---- */
.nai-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 34px;border:none;border-radius:var(--r-26);cursor:pointer;background:var(--nai-action);color:#FFF;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}
.s1-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.s1-pill{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:var(--r-30);background:var(--nai-surface-tag);color:var(--nai-text);font-size:13px;font-weight:var(--fw-medium);letter-spacing:var(--ls-wide);text-transform:uppercase;white-space:nowrap}
[data-theme="light"] .s1-pill{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--nai-border)}
/* ---- HERO ---- */
.s1-hero{margin-top:0;position:relative;padding-top:56px}
.s1-hero::before{content:"";position:absolute;top:-160px;right:-12vw;width:62vw;height:640px;background:radial-gradient(55% 55% at 60% 40%,rgba(0,127,255,var(--nai-glow-a)) 0%,rgba(0,127,255,0) 70%);pointer-events:none}
.s1-hero .wrap{max-width:820px;text-align:center}
.s1-hero h1{font-size:clamp(34px,4.2vw,var(--fs-display));line-height:112%;text-wrap:balance}
.s1-hero h1 em{font-style:normal;color:var(--nai-accent)}
.s1 p.s1-hero-lead{margin:22px auto 26px;max-width:600px;color:var(--nai-text-2);font-weight:var(--fw-regular);font-size:clamp(16px,1.7vw,var(--fs-body));line-height:145%}
.s1-hero .nai-btn{margin-top:30px}
/* ---- Gallery showcase: колонки, картинки целиком без кропа ---- */
.s1-gallery{columns:4;column-gap:var(--card-gap)}
.s1-g{position:relative;border-radius:var(--r-20);overflow:hidden;background:var(--nai-surface);margin-bottom:var(--card-gap);break-inside:avoid}
.s1-g img{display:block;width:100%;height:auto;opacity:0;transition:opacity 420ms ease,transform 480ms cubic-bezier(.22,1,.36,1)}
.s1-g img.loaded{opacity:1}
.s1-g:hover img{transform:scale(1.03)}
/* кнопка «Скачать» на открытках галереи */
.s1-g-dl{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;border:none;border-radius:var(--r-16);cursor:pointer;background:rgba(2,8,15,.6);backdrop-filter:blur(8px);color:#FFF;font-family:var(--font-core);font-size:var(--fs-caption);font-weight:var(--fw-medium);opacity:0;transition:opacity var(--transition),background var(--transition)}
.s1-g:hover .s1-g-dl{opacity:1}
.s1-g-dl:hover{background:var(--action-primary)}
@media (hover:none){.s1-g-dl{opacity:1}}
/* ---- Before/After: вертикальный preview, ребёнок в полный рост (contain, без кропа) ---- */
.s1-tf{position:relative}
.s1-tf-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,64px);align-items:stretch;max-width:1280px;margin:0 auto}
.s1-tf-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.s1-tf-copy h2{text-align:left;font-size:clamp(26px,2.8vw,var(--fs-section));line-height:118%}
.s1-tf-lead{margin-top:18px;max-width:none;color:var(--nai-text-2);font-weight:var(--fw-regular);font-size:var(--fs-label);line-height:150%}
.s1-tf-steps{margin-top:var(--heading-gap);display:flex;flex-direction:column;gap:var(--sp-20)}
.s1-tf-step h3{font-size:var(--fs-label);line-height:130%}
.s1-tf-step p{margin-top:8px;max-width:420px;color:var(--nai-text-2);font-weight:var(--fw-regular);font-size:var(--fs-ui);line-height:150%}
.s1-tf-copy .nai-btn{margin-top:34px}
.s1-tf-stage{position:relative;width:100%;margin:0 auto;border-radius:var(--nai-radius);overflow:hidden;background:var(--nai-surface);box-shadow:var(--card-stroke)}
.s1-tf-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.s1-tf-stage .after{opacity:0;transition:opacity 1100ms ease}
.s1-tf-tag{position:absolute;left:18px;top:18px;z-index:4;display:inline-flex;height:36px;align-items:center;padding:0 18px;border-radius:var(--r-16);background:rgba(2,8,15,.55);backdrop-filter:blur(8px);color:#FFF;font-size:var(--fs-caption);font-weight:var(--fw-medium);transition:opacity 300ms ease}
.s1-tf-tag.after-tag{opacity:0;background:rgba(0,127,255,.85)}
.s1-tf.on .s1-tf-stage .after{opacity:1}
.s1-tf.on .s1-tf-tag.before-tag{opacity:0}
.s1-tf.on .s1-tf-tag.after-tag{opacity:1}

/* ---- Идеи для открыток ---- */
.s1-ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--card-gap)}
.s1-idea{display:flex;flex-direction:column;align-items:flex-start;border-radius:var(--nai-radius);background:var(--nai-surface);box-shadow:var(--card-stroke);padding:30px 30px 34px}
.s1-idea h3{font-size:var(--fs-body)}
.s1-idea p{margin:14px 0 24px;color:var(--nai-text-2);font-weight:var(--fw-regular);font-size:var(--fs-ui);line-height:150%}
.s1-idea-btn{margin-top:auto;padding-top:0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 22px;border:none;border-radius:var(--r-16);cursor:pointer;background:var(--nai-surface-tag);color:var(--nai-text);font-family:var(--font-core);font-size:14px;font-weight:var(--fw-medium);line-height:var(--lh-flat);transition:background var(--transition),color var(--transition)}
.s1-idea-btn:hover{background:var(--nai-action);color:#FFF}
[data-theme="light"] .s1-idea-btn{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--nai-border)}
[data-theme="light"] .s1-idea-btn:hover{background:var(--nai-action);color:#FFF;box-shadow:none}
/* ---- Как это работает: 3 карточки без нумерации, деликатная glow-линия ---- */
.s1-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--card-gap)}
.s1-steps::before{content:"";position:absolute;left:10%;right:10%;top:-18px;height:1.5px;background:linear-gradient(90deg,rgba(76,165,255,0),rgba(76,165,255,.4),rgba(76,165,255,0))}
.s1-step{border-radius:var(--nai-radius);background:var(--nai-surface);box-shadow:var(--card-stroke);padding:30px 28px}
.s1-step h3{font-size:var(--fs-body);line-height:125%}
.s1-step p{margin-top:12px;color:var(--nai-text-2);font-weight:var(--fw-regular);font-size:var(--fs-ui);line-height:150%}
/* ---- FAQ ---- */
.s1-faq{max-width:var(--container-faq);margin:0 auto;display:flex;flex-direction:column;gap:14px}
.s1-faq-item{border-radius:var(--nai-radius);background:var(--nai-surface);box-shadow:var(--card-stroke);overflow:hidden}
.s1-faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:24px 28px;border:none;background:none;cursor:pointer;color:var(--nai-text);font-family:var(--font-core);font-size:clamp(16px,1.8vw,var(--fs-body));font-weight:var(--fw-medium);line-height:130%;text-align:left}
.s1-faq-glyph{flex:none;font-size:var(--fs-section);font-weight:var(--fw-medium);line-height:var(--lh-flat);color:var(--nai-text-2);transition:color var(--transition)}
.s1-faq-item.open .s1-faq-glyph{color:var(--nai-accent)}
.s1-faq-a{max-height:0;overflow:hidden;transition:max-height 320ms ease}
.s1-faq-a p{padding:0 28px 26px;color:var(--nai-text-2);font-weight:var(--fw-regular);font-size:var(--fs-label);line-height:150%}
/* ---- Финальный CTA: неоновая сетка, контент по центру ---- */
.s1-cta{margin:var(--section-gap) 20px 0;position:relative}
.s1-cta-inner{max-width:var(--container);margin:0 auto;border-radius:var(--nai-radius);overflow:hidden;background:#02080F url("../assets/images/cta-grid.webp") center/cover no-repeat;padding:clamp(56px,8vw,110px) clamp(24px,6vw,80px);display:flex;flex-direction:column;align-items:center;text-align:center}
.s1-cta h2{color:#FFF;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em;font-size:clamp(26px,3.2vw,var(--fs-section))}
.s1-cta p{margin:20px auto 0;max-width:560px;color:rgba(255,255,255,.88);font-weight:var(--fw-regular);font-size:clamp(15px,1.6vw,18px);line-height:145%}
.s1-cta .nai-btn{margin-top:32px;background:var(--action-primary);color:#FFF;font-weight:var(--fw-semibold);box-shadow:0 0 34px rgba(0,127,255,.45)}
/* ---- scroll reveal ---- */
html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
html.js [data-reveal].in{opacity:1;transform:none}
/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
html.js [data-reveal]{opacity:1;transform:none;transition:none}
.s1-tf-stage .after,.s1-g img{transition-duration:1ms}
.s1-g img{opacity:1}
}
/* ---- адаптив ---- */
@media (max-width:1023px){
.s1-gallery{columns:2}
.s1-tf-inner{grid-template-columns:1fr;max-width:560px}
.s1-tf-stage{aspect-ratio:972/1619}
.s1-tf-copy{order:-1}
.s1-tf-copy h2{text-align:center;margin:0 auto}
.s1-tf-lead{margin-left:auto;margin-right:auto;text-align:center}
.s1-tf-copy{align-items:center}
.s1-tf-steps{align-self:stretch}
.s1-steps{grid-template-columns:1fr;max-width:520px;margin:0 auto}
.s1-steps::before{display:none}
.s1-ideas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:639px){
.s1 section{margin-top:48px}
.s1-hero::before{right:-30vw;width:100vw}
.s1-gallery{gap:14px}
.s1-ideas{grid-template-columns:1fr}
}

/* ===== hero banner ===== */
/* Hero-баннер NaidiAI: два совмещённых слоя + canvas-маска */
:root{--hb-ink:#02080F;--hb-deep:#00123B;--hb-blue:#009AF6;--hb-accent:#4CA5FF}
.hb-page{font-family:var(--font-core);color:var(--text-primary);padding:40px 20px}
.hb-shell{max-width:var(--container);margin:0 auto}
.s1-hero-banner{margin-top:40px}
.s1-hero-pills{justify-content:center;margin-top:22px}
.hb{position:relative;border-radius:var(--r-30);overflow:hidden;background:var(--hb-ink);aspect-ratio:1774/887;isolation:isolate}
.hb-base,.hb-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hb-base{object-fit:cover;object-position:center}
.hb-canvas{pointer-events:none;z-index:2}
.hb-copy{position:absolute;left:clamp(24px,4.5%,64px);top:50%;transform:translateY(-50%);z-index:3;max-width:min(42%,460px);display:flex;flex-direction:column;align-items:flex-start}
.hb-copy h1{margin:0;font-size:clamp(20px,2.5vw,var(--fs-section));line-height:118%;font-weight:var(--fw-medium);text-wrap:balance}
.hb-copy h1 em{font-style:normal;color:var(--hb-accent)}
.hb-copy p{margin:clamp(10px,1.4vw,18px) 0 0;color:var(--text-secondary);font-weight:var(--fw-regular);font-size:clamp(12px,1.15vw,var(--fs-label));line-height:150%}
.nai-btn{margin-top:clamp(14px,2vw,26px);display:inline-flex;align-items:center;justify-content:center;height:clamp(40px,4vw,52px);padding:0 clamp(20px,2.4vw,34px);border:none;border-radius:var(--r-26);cursor:pointer;background:var(--action-primary);color:#FFF;font-family:var(--font-core);font-size:clamp(13px,1.1vw,var(--fs-label));font-weight:var(--fw-medium);line-height:var(--lh-flat);transition:opacity var(--transition)}
.hb-pills{margin-top:clamp(14px,2vw,24px);gap:8px;justify-content:flex-start}
.hb-pills .s1-pill{height:32px;padding:0 14px;font-size:11px;background:rgba(28,30,32,.55);backdrop-filter:blur(8px);color:#FFF}
.hb-hint{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;pointer-events:none;transition:opacity 420ms ease}
.hb-hint.done{opacity:0}
.hb-hint.flip{flex-direction:row-reverse}
.hb-hint-dot{width:9px;height:9px;border-radius:50%;background:var(--hb-blue);flex:none;animation:hb-pulse 2.1s ease-in-out infinite}
.hb-hint-line{width:clamp(28px,4vw,56px);height:1.5px;background:linear-gradient(90deg,var(--hb-blue),rgba(0,154,246,0));flex:none}
.hb-hint.flip .hb-hint-line{background:linear-gradient(-90deg,var(--hb-blue),rgba(0,154,246,0))}
.hb-hint-text{color:#FFF;font-size:var(--fs-caption);font-weight:var(--fw-medium);white-space:nowrap;text-shadow:0 1px 12px rgba(2,8,15,.8)}
@keyframes hb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,154,246,.55)}50%{box-shadow:0 0 0 10px rgba(0,154,246,0)}}
[data-theme="light"] .hb-hint-text{color:#FFF}
@media (hover:none){.hb-hint-text::after{content:" — нажмите"}}
@media (prefers-reduced-motion:reduce){.hb-hint-dot{animation:none}}
@media (max-width:767px){
.hb{aspect-ratio:4/5}
.hb-base{object-position:72% center}
.hb-copy{position:static;transform:none;max-width:none;padding:24px 20px 28px;background:linear-gradient(to top,rgba(2,8,15,.94) 0%,rgba(2,8,15,.72) 60%,rgba(2,8,15,0) 100%);width:100%;align-self:flex-end;margin-top:auto}
.hb{display:flex;flex-direction:column;justify-content:flex-end}
.hb-copy h1{font-size:24px}
.hb-copy p{font-size:14px}
}