:root{
  --deep:#0c0907;

  --ink-dark:#24160d;
  --ink:#2a190c;
  --ink-inv:#fff8f0;
  --muted:#5f4b3d;
  --edge:rgba(0,0,0,.15);

  /* Акценты из скринов */
  --ui-orange:#ff8a1e;
  --ui-orange-2:#e59a55;
  --teal:#26cfc8;          /* бирюзовый */
  --rasp:#ff4b8a;          /* малиновый */
  --sand:#f6e8cf;

  /* Светлые панели */
  --panel-hi:#fff3df;
  --panel-mid:#fde7c7;

  --shadow-dark:0 18px 40px rgba(0,0,0,.55);
  --shadow-card:0 12px 28px rgba(0,0,0,.25);
  --r:18px
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:#f5efe9;
  background:
    linear-gradient(180deg, rgb(18 12 9 / 67%), rgb(28 18 12 / 66%)),
    url(img/bg-maze-fixed.jpg) center center / cover no-repeat fixed,
    var(--deep);
  min-height:100dvh;
  line-height:1.6
}

.mic-wrap{width:min(1120px,100% - 2rem);margin-inline:auto}

/* Header / Nav */
.mic-head{
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(10px);
  background:rgb(22 15 11 / 86%);
  border-bottom:1px solid rgb(255 255 255 / 12%)
}
.mic-head__row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;padding:.9rem 0}
.mic-brand{display:inline-flex;align-items:center;text-decoration:none;gap:.6rem}
.mic-badge{display:inline-block;background:linear-gradient(135deg,var(--ui-orange),var(--rasp));color:#2b1607;font-weight:900;padding:.42rem .7rem;border-radius:12px;letter-spacing:.5px}
.mic-title{font-weight:800;color:#fff2e5}
.mic-nav{display:flex;gap:1rem;align-items:center}
.mic-nav a{color:#f0dcc8;text-decoration:none;font-weight:700}
.mic-nav a:hover{color:#fff3e4}
.mic-btn{
  display:inline-flex;align-items:center;gap:.6rem;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--ui-orange),var(--rasp));
  color:#2b1607;font-weight:900;text-decoration:none;
  padding:.95rem 1.15rem;border-radius:18px;box-shadow:var(--shadow-dark)
}
.mic-btn--alt{background:linear-gradient(135deg,var(--teal),#b1fff6);color:#06211f}
.mic-btn--ghost{background:transparent;color:#ffe8d1;border:1px solid rgb(255 255 255 / 18%)}
.mic-burger{display:none;background:transparent;border:0;color:#ffe8d1;font-size:1.25rem}

/* Hero */
.mic-hero{padding:3.2rem 0 2.6rem;border-bottom:1px solid rgb(255 255 255 / 10%);background:linear-gradient(180deg,rgba(255,138,30,.06),transparent 52%)}
.mic-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.mic-hero__h{margin:0 0 .6rem;font-size:clamp(2rem,2.7vw,3rem);line-height:1.1}
.mic-hero__p{margin:0 0 1.2rem;color:#f1ddc7}
.mic-hero__cta{display:flex;gap:.9rem;flex-wrap:wrap}
.mic-hero__media{position:relative}
.mic-hero__img{
  width:100%;border-radius:var(--r);
  outline:2px solid rgb(255 210 158 / 50%);
  box-shadow:var(--shadow-dark);
  transform:perspective(1200px) rotateY(-6deg);
  animation:micFloat 7s ease-in-out infinite
}
.mic-chip{
  position:absolute;display:inline-flex;gap:.5rem;align-items:center;
  background:linear-gradient(135deg,#fff3df,#ffe9cd);
  color:#7a4d2b;padding:.55rem .8rem;border-radius:999px;border:1px solid rgb(0 0 0 / 10%);
  font-weight:800
}
.mic-chip--corner{top:10px;right:10px}
@keyframes micFloat{0%,100%{transform:perspective(1200px) rotateY(-6deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-6deg) translateY(-7px)}}

/* Section wrappers */
.mic-sec{padding:3.1rem 0}
.mic-sec--alt{background:linear-gradient(180deg,transparent,rgba(255, 230, 200, .08) 26%,transparent 62%)}
.mic-h2{
  margin:0 0 1rem;font-size:clamp(1.7rem,2.2vw,2.35rem);color:#fff5ea;
  position:relative;padding-bottom:.35rem
}
.mic-h2:after{
  content:"";position:absolute;left:0;right:55%;bottom:0;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--rasp),var(--ui-orange),var(--teal))
}
.mic-h3{margin:.25rem 0 .45rem;font-size:1.14rem;color:var(--ink)}
.mic-split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.mic-bullets{margin:0;padding-left:1.2rem;color:#4a2f1e}

/* Bright PANELS */
.mic-cardimg{
  width:100%;border-radius:var(--r);
  outline:2px solid rgb(255 210 158 / 55%);
  box-shadow:var(--shadow-card);
  background:linear-gradient(180deg,#fff2e0,#ffe8c7)
}
.mic-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mic-feature,
.mic-rcard,
.mic-rev,
.mic-acc .mic-acc__item,
.mic-form{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel-mid));
  border:1px solid var(--edge);
  border-radius:var(--r);
  box-shadow:var(--shadow-card);
  color:var(--ink)
}

/* Большие иконки с трёхцветным градиентом */
.mic-feature{padding:1.15rem}
.mic-feature i{
  font-size:2.1rem;
  background:linear-gradient(135deg,var(--rasp),var(--ui-orange),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* Rules */
.mic-rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.mic-rcard{padding:1.15rem}
.mic-rico{
  display:inline-flex;width:60px;height:60px;border-radius:14px;align-items:center;justify-content:center;
  background:conic-gradient(from 120deg at 50% 50%, #ffe1b8, #ffd08f 40%, #ffc0d4 70%, #bff7f2 100%);
  color:#5a371f;margin-bottom:.75rem;border:1px solid rgb(0 0 0 / 08%)
}
.mic-rico i{font-size:1.35rem}

/* Gallery */
.mic-shots{margin-top:1.1rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.95rem}
.mic-shots img{
  width:100%;border-radius:12px;background:#fff2e0;box-shadow:var(--shadow-card)
}
.mic-shots img:nth-child(4n+1){outline:2px solid rgb(255 145 86 / 55%)}  /* оранжевый */
.mic-shots img:nth-child(4n+2){outline:2px solid rgb(255 108 158 / 55%)}  /* малиновый */
.mic-shots img:nth-child(4n+3){outline:2px solid rgb(38 207 200 / 55%)}   /* бирюзовый */
.mic-shots img:nth-child(4n+4){outline:2px solid rgb(255 210 158 / 55%)}  /* песочный */

/* Tips */
.mic-tips{margin:0;padding-left:1.2rem;color:#412916}

/* Reviews */
.mic-revs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.mic-rev{display:grid;grid-template-columns:64px 1fr;gap:.95rem;padding:1.05rem}
.mic-ava img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgb(0 0 0 / 10%)}
.mic-stars i{color:#ffb84d;font-size:1.1rem}

/* FAQ */
.mic-acc__q{width:100%;text-align:left;padding:1.1rem;font-weight:800;color:var(--ink);background:transparent;border:0}
.mic-acc__a{display:none;padding:0 1.1rem 1.1rem;color:#5a3b25}
.mic-acc__item.mic-open .mic-acc__a{display:block}

/* Forms */
.mic-field{display:grid;gap:.55rem;margin-bottom:.95rem}
.mic-field label{color:#5a3b25}
.mic-form input,.mic-form textarea{
  width:100%;padding:.95rem 1rem;border-radius:16px;border:1px solid rgb(0 0 0 / 12%);
  background:#fff9f1;color:var(--ink-dark)
}
.mic-form input::placeholder,.mic-form textarea::placeholder{color:#8f6b4e}
.mic-form .mic-btn{background:linear-gradient(135deg,var(--rasp),var(--ui-orange));color:#2b1607}
.mic-msg{margin-top:.7rem;font-weight:800}
.mic-msg.m-ok{color:#1f9f7f}
.mic-msg.m-bad{color:#c64646}

/* Footer */
.mic-foot{border-top:1px solid rgb(255 255 255 / 10%);background:rgb(22 15 11 / 92%);backdrop-filter:blur(8px);padding:2rem 0}
.mic-foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;align-items:center}
.mic-brand--foot .mic-badge{transform:translateY(1px)}
.mic-foot__nav{display:flex;gap:1rem}
.mic-foot__nav a{color:#f0dcc8;text-decoration:none}
.mic-foot__nav a:hover{color:#fff3e4}
.mic-social{display:flex;gap:1.1rem}
.mic-social a{color:#f0dcc8;font-size:1.25rem}

/* Responsive */
@media (max-width:980px){
  .mic-hero__grid,.mic-split{grid-template-columns:1fr}
  .mic-grid3{grid-template-columns:1fr}
  .mic-rgrid{grid-template-columns:1fr 1fr}
  .mic-revs{grid-template-columns:1fr}
  .mic-shots{grid-template-columns:1fr 1fr}
  .mic-burger{display:inline-flex}
  .mic-nav{
    display:none;position:absolute;right:1rem;top:64px;background:rgb(22 15 11 / 97%);
    border:1px solid rgb(255 255 255 / 12%);border-radius:14px;padding:.95rem;flex-direction:column;min-width:220px;box-shadow:var(--shadow-dark)
  }
  .mic-nav.mic-show{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .mic-hero__img{animation:none}
}
/* --- Contrast fix for text sections --- */

/* Автоматически даём светлую панель первому столбцу в двухколоночных секциях */
.mic-sec .mic-split > div:first-child{
  background: linear-gradient(180deg,var(--panel-hi),var(--panel-mid));
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 1.15rem;
  color: var(--ink);
}

/* Заголовки и текст внутри этих панелей — тёмные, как на светлом UI */
.mic-sec .mic-split > div:first-child .mic-h2,
.mic-sec .mic-split > div:first-child .mic-h3{ color: var(--ink); }
.mic-sec .mic-split > div:first-child p{ color: #3d2819; }

/* Списки читаются лучше */
.mic-sec .mic-split > div:first-child .mic-bullets,
.mic-sec .mic-split > div:first-child .mic-tips{
  color:#3b2617;
}

/* Чуть усилим контраст FAQ и карточек, если фон за ними яркий */
.mic-acc .mic-acc__q{ color: var(--ink); }
.mic-acc .mic-acc__a{ color:#5a3b25; }
/* Hero stats */
.mic-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
  margin-top:1.1rem
}
.mic-stat{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel-mid));
  border:1px solid var(--edge);
  border-radius:14px;
  padding:.85rem;
  box-shadow:var(--shadow-card);
  color:var(--ink)
}
.mic-stat__top{
  display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem
}
.mic-stat__top i{
  font-size:1.25rem;
  background:linear-gradient(135deg,var(--rasp),var(--ui-orange),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.mic-stat__label{font-weight:800;color:var(--ink)}
.mic-stat__val{
  font-weight:900;font-size:1.6rem;line-height:1;color:#2b1709
}
.mic-meter{height:8px;background:#ffe8ce;border-radius:999px;margin-top:.5rem;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.mic-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--ui-orange),#ffd38f)}
.mic-meter--teal span{background:linear-gradient(90deg,var(--teal),#bff7f2)}
.mic-meter--rasp span{background:linear-gradient(90deg,var(--rasp),#ffc0d4)}

/* mini row */
.mic-stat--mini{grid-column:1 / -1;padding:.7rem .8rem}
.mic-stat__mini{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;
  background:#fff8f0;border:1px solid var(--edge);border-radius:10px;padding:.5rem .6rem;margin-top:.5rem
}
.mic-stat__mini i{
  font-size:1.1rem;
  background:linear-gradient(135deg,var(--ui-orange),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.mic-stat__mini span{color:#5a3b25;font-weight:700}
.mic-stat__mini strong{color:#2a190c}
@media (max-width:640px){
  .mic-stats{grid-template-columns:1fr}
}
/* Newsletter one-column full width */
.mic-form--wide{
  width:100%;
  max-width:none;
  padding: 20px;
}
/* Make the text column readable on a bright panel */
.mic-pane{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel-mid));
  border:1px solid var(--edge);
  border-radius:var(--r);
  box-shadow:var(--shadow-card);
  padding:1.15rem;
  color:var(--ink);
}
.mic-pane .mic-h2,
.mic-pane .mic-h3{ color:var(--ink); }
.mic-pane p,
.mic-pane li{ color:#3d2819; }

/* Since we swapped columns in Pattern Playbook, remove the auto-panel from the first col there */
#mic-patterns .mic-split > div:first-child{
  background:none;border:0;box-shadow:none;padding:0;color:inherit;
}

.mic-foot__legal{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.mic-foot__legal a{color:#f0dcc8;text-decoration:none;font-weight:700}
.mic-foot__legal a:hover{color:#fff3e4}
.mic-foot__legal span{color:#cdb8a3}
.mic-social a{transition:transform .15s ease, color .15s ease}
.mic-social a:hover{transform:translateY(-2px); color:#fff}
.mic-cookie{position:fixed;left:0;right:0;bottom:16px;z-index:70;display:none}
.mic-cookie.show{display:block}
.mic-cookie__inner{width:min(1120px,100% - 2rem);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;background:linear-gradient(180deg,#fff3df,#fde7c7);border:1px solid rgba(0,0,0,.15);border-radius:16px;box-shadow:0 14px 32px rgba(0,0,0,.35);padding:1rem}
.mic-cookie__text h3{margin:.1rem 0 .3rem;font-size:1.1rem;color:#2a190c}
.mic-cookie__text p{margin:0 0 .4rem;color:#4a2f1e}
.mic-cookie__link{color:#ff8a1e;text-decoration:none;font-weight:800}
.mic-cookie__actions{display:flex;gap:.5rem;flex-wrap:wrap}

.mic-cookie-drawer{position:fixed;inset:0;z-index:80;display:none;background:rgb(0 0 0 / 45%)}
.mic-cookie-drawer.show{display:block}
.mic-cookie-drawer__panel{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(720px,100%);background:linear-gradient(180deg,#fff3df,#fde7c7);border-top-left-radius:18px;border-top-right-radius:18px;border:1px solid rgba(0,0,0,.15);box-shadow:0 -12px 28px rgba(0,0,0,.25);padding:1rem 1rem 1.1rem}
.mic-cookie-drawer__panel h3{margin:.2rem 0 .6rem;color:#2a190c}
.mic-cookie-row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;background:#fff9f1;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:.7rem .8rem;margin:.5rem 0}
.mic-cookie-label{font-weight:900;color:#2a190c}
.mic-cookie-note{color:#5a3b25;font-size:.95rem}
.mic-cookie-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.6rem}

.mic-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.mic-switch input{position:absolute;opacity:0;pointer-events:none}
.mic-switch span{width:48px;height:28px;background:#e9dccb;border:1px solid rgba(0,0,0,.12);border-radius:999px;display:inline-block;position:relative;transition:background .2s}
.mic-switch span:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#ff8a1e,#ffb35f);transition:transform .2s}
.mic-switch input:checked + span{background:#c9f4ef;border-color:#9be6dd}
.mic-switch input:checked + span:after{transform:translateX(20px);background:linear-gradient(135deg,#26cfc8,#b1fff6)}

@media (max-width:800px){
  .mic-cookie__inner{grid-template-columns:1fr}
  .mic-cookie__actions{justify-content:flex-start}
}
/* Responsive footer grid */
.mic-foot__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:1rem;
  align-items:start;
}

/* Grid areas for reflow */
.mic-foot__col--brand{grid-area:brand}
.mic-foot__col--nav{grid-area:nav}
.mic-foot__col--social{grid-area:social; display:flex; justify-content:flex-end}

/* Tablet: 2 columns, бренд на всю ширину сверху */
@media (max-width: 960px){
  .mic-foot__grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "brand brand"
      "nav   social";
  }
  .mic-foot__col--social{justify-content:flex-end}
}

/* Mobile: 1 column, центрируем всё */
@media (max-width: 600px){
  .mic-foot__grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "nav"
      "social";
    text-align:center;
  }
  .mic-foot__col--social{justify-content:center}
  .mic-foot__nav{justify-content:center}
  .mic-foot__legal{justify-content:center}
}

/* Minor polish */
.mic-foot__nav{display:flex;gap:1rem;flex-wrap:wrap}
.mic-foot__legal{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.mic-social{display:flex;gap:1rem;flex-wrap:wrap}
.mic-social a{font-size:1.2rem}
/* FAQ: always show answers */
#mic-faq .mic-acc__a{display:block}
#mic-faq .mic-acc__q{cursor:default}
.mic-form {
  padding: 20px;
}
/* Universal success popup */
.mic-pop{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgb(0 0 0 / 45%)}
.mic-pop.show{display:flex}
.mic-pop__box{
  width:min(520px, calc(100% - 2rem));
  background:linear-gradient(180deg,#fff3df,#fde7c7);
  border:1px solid rgba(0,0,0,.15);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
  padding:1.1rem 1.2rem;
  color:#2a190c;
  text-align:center
}
.mic-pop__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:16px;margin:.2rem auto .6rem;
  background:linear-gradient(135deg,#26cfc8,#b1fff6); /* бирюзовый акцент */
  border:1px solid rgba(0,0,0,.08)
}
.mic-pop__icon i{font-size:1.6rem;color:#0c3b38}
.mic-pop__title{margin:.2rem 0 .4rem;font-weight:900;font-size:1.25rem}
.mic-pop__text{margin:0 0 .8rem;color:#5a3b25}
.mic-pop__actions{display:flex;gap:.6rem;justify-content:center;margin-top:.2rem}
.mic-pop__close{display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;padding:.8rem 1rem;border-radius:14px;font-weight:900}
.mic-pop__close--ok{background:linear-gradient(135deg,#ff8a1e,#e59a55);color:#2b1607;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.mic-pop__close--ghost{background:transparent;color:#2a190c;border:1px solid rgba(0,0,0,.15)}