/* ═══════════════════════════════════════════════════════════════
   Опрос «Путь с Колобаевой» — стили в дизайн-системе сайта Кати.
   Токены и шрифты — те же, что на kolobaevayekaterina.com.
   ═══════════════════════════════════════════════════════════════ */
@import './design-tokens.css';

/* ─── Шрифты (локальные, как на сайте) ───────────────────────── */
@font-face{font-family:'Forum';src:url('./assets/fonts/forum_cyrillic.woff2') format('woff2');font-weight:400;font-style:normal;unicode-range:U+0400-04FF;}
@font-face{font-family:'Forum';src:url('./assets/fonts/forum_latin.woff2') format('woff2');font-weight:400;font-style:normal;unicode-range:U+0000-024F;}
@font-face{font-family:'IBM Plex Mono';src:url('./assets/fonts/ibm_reg_cyrillic.woff2') format('woff2');font-weight:400;font-style:normal;unicode-range:U+0400-04FF;}
@font-face{font-family:'IBM Plex Mono';src:url('./assets/fonts/ibm_reg_latin.woff2') format('woff2');font-weight:400;font-style:normal;unicode-range:U+0000-024F;}
@font-face{font-family:'IBM Plex Mono';src:url('./assets/fonts/ibm_med_cyrillic.woff2') format('woff2');font-weight:500;font-style:normal;unicode-range:U+0400-04FF;}
@font-face{font-family:'IBM Plex Mono';src:url('./assets/fonts/ibm_med_latin.woff2') format('woff2');font-weight:500;font-style:normal;unicode-range:U+0000-024F;}
@font-face{font-family:'IBM Plex Mono';src:url('./assets/fonts/ibm_light_cyrillic.woff2') format('woff2');font-weight:300;font-style:normal;unicode-range:U+0400-04FF;}
@font-face{font-family:'IBM Plex Mono';src:url('./assets/fonts/ibm_light_latin.woff2') format('woff2');font-weight:300;font-style:normal;unicode-range:U+0000-024F;}

/* ─── Reset / база (из index.css сайта) ──────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--color-bg-deep);
  background-image:
    radial-gradient(ellipse 80% 40% at 60% 10%, rgba(106,13,173,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 55%, rgba(58,8,112,0.25) 0%, transparent 65%),
    radial-gradient(ellipse 70% 40% at 80% 80%, rgba(45,10,74,0.3) 0%, transparent 60%);
  background-attachment:fixed;
  color:var(--color-text);
  font-family:var(--font-body);
  font-weight:300;
  line-height:var(--leading-normal);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:var(--z-grain);opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size:200px 200px;}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:300;line-height:var(--leading-tight);letter-spacing:var(--tracking-wide);}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--color-gold-50);outline-offset:3px;border-radius:var(--radius-sm);}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ─── Каркас страницы ─────────────────────────────────────────── */
.wrap{max-width:680px;margin:0 auto;padding:0 var(--space-6);}
.label{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-gold);opacity:.75;}
.divider{width:40px;height:1px;background:var(--gradient-gold);margin:var(--space-12) auto;opacity:.6;}

/* ─── Hero ────────────────────────────────────────────────────── */
.hero{text-align:center;padding:var(--space-24) 0 var(--space-10);}
.hero .sign{width:84px;height:auto;margin:0 auto var(--space-7);opacity:.95;filter:drop-shadow(0 4px 28px rgba(0,0,0,.45));}
.hero .kicker{display:inline-block;margin-bottom:var(--space-7);}
.hero h1{font-size:clamp(42px,9vw,70px);color:var(--color-cream);margin-bottom:var(--space-5);letter-spacing:var(--tracking-normal);text-align:center;text-wrap:balance;}
.hero .sub{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-text-dim);}
.hero .tagline{font-family:var(--font-heading);font-size:var(--text-h4);color:var(--color-gold-light);margin-top:var(--space-8);line-height:var(--leading-snug);}
.hero .wordmark{width:170px;margin:var(--space-16) auto 0;opacity:.5;}

/* ─── Текстовые блоки (концепт / зачем) ──────────────────────── */
.block{padding:var(--space-10) 0;}
.block .num{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--color-gold-70);text-transform:uppercase;}
.block h2{font-size:var(--text-h2);color:var(--color-cream);margin:var(--space-3) 0 var(--space-6);}
.block p{font-size:var(--text-body-lg);line-height:var(--leading-loose);color:var(--color-text);margin-bottom:var(--space-4);}
.block p b{color:var(--color-gold-light);font-weight:500;}
.concept-card{background:var(--gradient-card-bg);border:var(--border-accent);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-8);box-shadow:var(--shadow-card);}
.concept-card p:last-child{margin-bottom:0;}
.note{display:flex;gap:var(--space-3);align-items:flex-start;margin-top:var(--space-6);padding:var(--space-4) var(--space-5);border:var(--border-gold-10);border-radius:var(--radius-md);background:var(--color-gold-07);}
.note span{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-text-dim);}
.note .lock{color:var(--color-gold);flex:none;}
.note.tip{margin:var(--space-4) 0 var(--space-8);background:var(--color-gold-10);border-color:var(--color-gold-30);}
.note.tip span:last-child{color:var(--color-text);}

/* ─── Форма ───────────────────────────────────────────────────── */
.form-section{margin-top:var(--space-16);}
.form-section>.shead{margin-bottom:var(--space-8);text-align:center;}
.form-section>.shead .num{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--color-gold-70);text-transform:uppercase;}
.form-section>.shead h3{font-size:var(--text-h3);color:var(--color-cream);margin-top:var(--space-2);}

.q{background:var(--color-bg-card);border:var(--border-card);border-radius:var(--radius-card);padding:var(--space-7) var(--space-6);margin-bottom:var(--space-5);transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);}
.q:focus-within{border-color:var(--color-gold-30);background:var(--color-bg-card-hover);}
.q.invalid{border-color:rgba(232,132,90,.6);}
.q .qtext{display:block;font-size:var(--text-body-lg);color:var(--color-cream);line-height:var(--leading-relaxed);margin-bottom:var(--space-5);}
.q .qtext .req{color:var(--color-peach);margin-left:4px;}
.q .qhint{display:block;font-size:var(--text-body);color:rgba(240,230,220,.72);margin-top:-2px;margin-bottom:var(--space-4);line-height:var(--leading-relaxed);}

/* варианты (radio / checkbox) */
.opts{display:flex;flex-direction:column;gap:var(--space-2);}
.opt{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);font-size:var(--text-body-lg);color:var(--color-text);}
.opt:hover{border-color:var(--color-gold-30);background:var(--color-white-03);}
.opt input{position:absolute;opacity:0;width:0;height:0;}
.opt .mark{flex:none;width:20px;height:20px;border:1.5px solid var(--color-gold-50);border-radius:50%;display:grid;place-items:center;transition:all var(--duration-fast) var(--ease-out);}
.opt .mark.sq{border-radius:6px;}
.opt .mark::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--gradient-btn);transform:scale(0);transition:transform var(--duration-fast) var(--ease-out);}
.opt .mark.sq::after{border-radius:3px;}
.opt input:checked~.mark{border-color:var(--color-peach);}
.opt input:checked~.mark::after{transform:scale(1);}
.opt input:checked~span{color:var(--color-cream);}
.opt.selected{border-color:var(--color-gold-30);background:var(--color-white-03);}

/* поле "свой вариант" + текстовые поля */
textarea,input[type=text]{width:100%;background:var(--color-bg-deep);border:var(--border-subtle);border-radius:var(--radius-md);color:var(--color-cream);font-family:var(--font-body);font-weight:300;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);padding:var(--space-4);transition:border-color var(--duration-base) var(--ease-out);resize:vertical;}
textarea:focus,input[type=text]:focus{border-color:var(--color-gold-50);outline:none;}
textarea::placeholder,input::placeholder{color:var(--color-text-ghost);}
textarea{min-height:120px;}
.other-field{margin-top:var(--space-3);display:none;}
.other-field.show{display:block;}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;}

/* макеты ответов A / B */
.mocks{display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-2) 0 var(--space-6);}
.mock{border:var(--border-card);border-radius:var(--radius-md);padding:var(--space-5);background:var(--color-white-02);}
.mock .tag{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-gold);margin-bottom:var(--space-3);}
.mock .bubble{font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--color-text);}
.mock .link{color:var(--color-peach);}

/* submit */
.actions{text-align:center;margin:var(--space-12) 0 var(--space-4);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-5) var(--space-12);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--text-sm);font-weight:400;letter-spacing:var(--tracking-wider);text-transform:uppercase;cursor:pointer;border:none;position:relative;overflow:hidden;background:var(--gradient-btn);color:rgba(255,255,255,.95);box-shadow:var(--shadow-btn);transition:box-shadow var(--duration-slow) var(--ease-default);}
.btn:hover{box-shadow:var(--shadow-btn-hover);}
.btn:disabled{opacity:.5;cursor:default;}
.btn::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.18) 50%,transparent);transform:skewX(-20deg);transition:left var(--duration-slower) var(--ease-default);pointer-events:none;}
.btn:hover::before{left:130%;}
.form-error{text-align:center;color:var(--color-peach);font-size:var(--text-sm);margin-top:var(--space-4);min-height:18px;}

/* голосовой ввод */
.voicebar{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-3);flex-wrap:wrap;}
.mic{display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 16px;border-radius:var(--radius-full);background:transparent;border:1px solid var(--color-gold-30);color:var(--color-gold);font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);}
.mic:hover{border-color:var(--color-gold-50);box-shadow:var(--shadow-gold-glow);}
.mic:disabled{opacity:.5;cursor:default;}
.mic .dot{width:9px;height:9px;border-radius:50%;background:var(--color-gold);flex:none;}
.mic.rec{border-color:rgba(232,132,90,.7);color:var(--color-peach);}
.mic.rec .dot{background:var(--color-peach);animation:micpulse 1s infinite;}
@keyframes micpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.65);}}
.voicestatus{font-size:var(--text-sm);color:var(--color-text-muted);}

/* спасибо */
.thanks{display:none;text-align:center;padding:var(--space-24) 0;}
.thanks.show{display:block;}
.thanks .sign{width:96px;margin:0 auto var(--space-8);}
.thanks h2{font-size:var(--text-h1);color:var(--color-cream);margin-bottom:var(--space-8);}
.thanks .letter{max-width:480px;margin:0 auto;}
.thanks .letter p{font-size:var(--text-body-lg);line-height:var(--leading-loose);color:var(--color-text);margin-bottom:var(--space-5);}
.thanks .letter p:last-child{margin-bottom:0;}
.thanks .sign-name{font-family:var(--font-heading);font-size:var(--text-h4);color:var(--color-gold-light);margin-top:var(--space-8);letter-spacing:.04em;}

/* футер */
footer{text-align:center;padding:var(--space-6) 0 var(--space-14);}
footer .divider{margin-bottom:var(--space-6);}
footer .anon{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed);margin-bottom:var(--space-8);}
footer .wm{width:140px;margin:0 auto;opacity:.45;}

@media (max-width:600px){
  .hero{padding:var(--space-20) 0 var(--space-8);}
  .concept-card{padding:var(--space-8) var(--space-5);}
}