/* МойФФ — сайт moiff.ru. Эстетика «складская этикетка»: тёплая бумага, чёрная
   краска, оранжевый стикер, моноширинные коды и штрихкоды. */
:root{
  --brand:#E8500A;--brand-dark:#B93F06;--brand-soft:#FDEBE0;
  --ink:#171A1F;--ink2:#2A2E35;--muted:#5A6069;--faint:#8C887E;
  --paper:#F7F5F0;--paper2:#EFEBE2;--card:#fff;--line:#E3DED3;
  --green:#1D6E52;--green-soft:#E2F0EA;--blue:#2557B0;--blue-soft:#E7EEFA;--red:#B42318;--red-soft:#FDECEA;--amber:#B26A00;--amber-soft:#FFF4DF;
  --wb:#A73AFD;--oz:#005BFF;--ym:#FFCC00;--tg:#229ED9;--max:#4C3DF0;
  --r:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Golos Text',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);line-height:1.58;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.bf{font-family:'Nunito','Golos Text',sans-serif;font-weight:900;letter-spacing:-.018em;line-height:1.1}
.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-feature-settings:"zero"}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.sticker{display:inline-block;background:var(--brand);color:#fff;border-radius:.28em;padding:.04em .28em .12em;transform:rotate(-3deg);box-shadow:0 .09em 0 var(--brand-dark)}
.hl{background:linear-gradient(transparent 58%,#FFD3B8 58%,#FFD3B8 92%,transparent 92%)}

/* кнопки, бейджи */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;border-radius:12px;padding:14px 24px;text-decoration:none;transition:transform .15s,filter .15s,border-color .15s,color .15s;border:0;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 3px 0 var(--brand-dark)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-ghost{border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-dark{background:var(--ink);color:#fff}
.btn-sm{padding:9px 16px;font-size:.85rem;border-radius:10px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border-radius:99px;padding:7px 14px;margin-bottom:18px}
.tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:3px 7px}
.tag.new{background:var(--ink);color:#fff}
.tag.or{background:var(--brand);color:#fff}
.tag.gr{background:var(--green-soft);color:var(--green)}
.tag.bl{background:var(--blue-soft);color:var(--blue)}
.tag.rd{background:var(--red-soft);color:var(--red)}
.tag.am{background:var(--amber-soft);color:var(--amber)}
.mp{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.8rem}
.mp i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* шапка */
header.top{position:sticky;top:0;z-index:60;background:rgba(23,26,31,.97);backdrop-filter:blur(8px);color:#fff}
.nav{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:inline-flex;align-items:center;gap:4px;font-family:'Nunito',sans-serif;font-weight:900;font-size:22px;text-decoration:none;white-space:nowrap;color:#fff}
.nav-links{display:flex;gap:4px;margin-left:10px;align-items:center}
.nav-links>a,.dd>button{font:inherit;font-size:.87rem;font-weight:600;color:#C7CCD4;text-decoration:none;background:none;border:0;padding:8px 11px;border-radius:9px;cursor:pointer}
.nav-links>a:hover,.dd>button:hover,.dd.open>button{color:#fff;background:rgba(255,255,255,.07)}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 8px);left:-10px;width:620px;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.45);padding:10px;display:none;grid-template-columns:1fr 1fr;gap:2px}
.dd.open .dd-menu,.dd:focus-within .dd-menu{display:grid}
@media (hover:hover){.dd:hover .dd-menu{display:grid}.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}}
.dd-menu a{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:11px;text-decoration:none}
.dd-menu a:hover{background:var(--paper)}
.dd-menu .ic{font-size:1.2rem;line-height:1.3;width:26px;text-align:center}
.dd-menu b{display:block;font-size:.88rem}
.dd-menu small{display:block;font-size:.74rem;color:var(--muted);line-height:1.35}
.nav-cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav-cta .login{font-size:.87rem;font-weight:600;color:#C7CCD4;text-decoration:none;padding:9px 12px}
.nav-cta .login:hover{color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;padding:6px}
.mnav{display:none}
@media (max-width:980px){
  .nav-links,.nav-cta{display:none}.burger{display:block}
  .mnav.open{display:block;background:var(--ink);border-top:1px solid #2E333B;padding:8px 22px 18px}
  .mnav a{display:block;color:#E4E7EB;text-decoration:none;padding:10px 0;border-bottom:1px solid #2A2F37;font-weight:600;font-size:.95rem}
  .mnav .sub a{padding-left:14px;font-weight:500;font-size:.9rem;color:#C7CCD4}
  .mnav .btn{margin-top:14px;width:100%;justify-content:center}
}

/* секции */
section{padding:84px 0}
.sec-h{max-width:760px;margin-bottom:38px}
.sec-h h2{font-size:clamp(1.7rem,3.3vw,2.5rem);margin-bottom:12px}
.sec-h p{font-size:1.06rem;color:var(--muted)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark{background:var(--ink);color:#fff}
.dark .sec-h p{color:#AEB4BD}

/* герой */
.hero{padding:64px 0 46px;background:radial-gradient(1200px 500px at 85% -10%,#FFE3D2 0%,transparent 60%),linear-gradient(180deg,#fff 0%,var(--paper) 100%);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-60px;bottom:40px;width:280px;height:70px;opacity:.07;background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 5px,var(--ink) 5px 6px,transparent 6px 10px,var(--ink) 10px 14px,transparent 14px 16px);transform:rotate(-8deg)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.35rem);margin-bottom:18px}
.lead{font-size:1.1rem;color:var(--muted);margin-bottom:26px;max-width:560px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.notes{display:flex;gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--faint)}
.notes span::before{content:"✓ ";color:var(--green);font-weight:800}
.trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.trust .chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:.8rem;font-weight:600;color:var(--ink2)}
.trust .chip i{width:9px;height:9px;border-radius:50%}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:40px}}

/* «окно» интерфейса — иллюстрации */
.ui{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px -30px rgba(23,26,31,.38);overflow:hidden;font-size:.78rem;position:relative}
.ui-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--ink);color:#C7CCD4;font-size:.72rem}
.ui-bar i{width:9px;height:9px;border-radius:50%;background:#3A3F47}
.ui-bar i:nth-child(1){background:#FF5F57}.ui-bar i:nth-child(2){background:#FEBC2E}.ui-bar i:nth-child(3){background:#28C840}
.ui-bar span{margin-left:8px;font-family:'JetBrains Mono',monospace}
.ui-body{display:grid;grid-template-columns:118px 1fr;min-height:300px}
.ui-side{background:#1E2228;color:#AEB4BD;padding:10px 8px;display:flex;flex-direction:column;gap:2px;font-size:.7rem}
.ui-side b{color:#fff;font-family:'Nunito','Golos Text',sans-serif;font-size:.9rem;margin:2px 4px 8px}
.ui-side span{padding:5px 7px;border-radius:6px;display:flex;justify-content:space-between;gap:4px;white-space:nowrap;overflow:hidden}
.ui-side span.on{background:#fff;color:var(--ink);font-weight:700}
.ui-side em{font-style:normal;background:#E5484D;color:#fff;border-radius:99px;font-size:.58rem;font-weight:800;padding:0 5px;line-height:1.6}
.ui-main{padding:14px;background:var(--paper);min-width:0}
.ui-main h5{font-family:'Nunito','Golos Text',sans-serif;font-weight:900;font-size:1rem;margin-bottom:8px}
.ui-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;min-width:74px;flex:1}
.kpi b{display:block;font-family:'Nunito','Golos Text',sans-serif;font-size:1.15rem;line-height:1.1}
.kpi small{color:var(--muted);font-size:.64rem}
.kpi.red{background:var(--red-soft);border-color:#F3C7C1}.kpi.red b{color:var(--red)}
.kpi.or{background:#FFF3EB;border-color:#F6C7A7}.kpi.or b{color:#C24A08}
.kpi.gr{background:var(--green-soft);border-color:#BFE3CF}.kpi.gr b{color:var(--green)}
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:.7rem}
.tbl th{background:#F3F0EA;color:var(--muted);text-align:left;font-weight:700;padding:6px 8px;font-size:.62rem;text-transform:uppercase;letter-spacing:.05em}
.tbl td{padding:6px 8px;border-top:1px solid #EEEBE4;vertical-align:middle}
.st{display:inline-block;border-radius:99px;padding:1px 8px;font-weight:700;font-size:.62rem;white-space:nowrap}
.st.n{background:var(--blue-soft);color:var(--blue)}.st.p{background:var(--amber-soft);color:var(--amber)}.st.k{background:#FDE9DE;color:#C24A08}.st.s{background:var(--green-soft);color:var(--green)}.st.r{background:var(--red-soft);color:var(--red)}
.ui-alert{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 9px;margin-bottom:9px}
.ui-alert span{border-radius:7px;padding:2px 8px;font-weight:700;font-size:.64rem}
.ui-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(23,26,31,.4);padding:10px 12px;font-size:.72rem}
@media (max-width:560px){.ui-body{grid-template-columns:1fr}.ui-side{display:none}.ui-float{display:none}}

/* термо-этикетка как карточка */
.label{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;position:relative}
.label::before{content:"";position:absolute;left:14px;right:14px;top:-1px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px)}
.bc{height:26px;width:120px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 16px);opacity:.85}

/* что нового */
.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.news a{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative}
.news a:hover{transform:translateY(-2px);border-color:#F2B48F;box-shadow:0 18px 40px -26px rgba(232,80,10,.55)}
.news .ic{font-size:1.5rem;margin-bottom:10px}
.news h3{font-size:1.08rem;margin:8px 0 6px}
.news p{font-size:.88rem;color:var(--muted)}
.news .more{display:inline-block;margin-top:10px;font-size:.82rem;font-weight:700;color:var(--brand)}
.news .ver{position:absolute;top:18px;right:18px;font-size:.66rem;color:var(--faint)}
@media (max-width:980px){.news{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.news{grid-template-columns:1fr}}

/* путь товара */
.flow{display:grid;grid-template-columns:repeat(8,minmax(118px,1fr));gap:0;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.flow .stp{position:relative;padding:0 10px 0 0}
.flow .stp::before{content:"";position:absolute;top:21px;left:44px;right:0;height:2px;background:repeating-linear-gradient(90deg,#F2B48F 0 8px,transparent 8px 13px)}
.flow .stp:last-child::before{display:none}
.flow .dot{width:44px;height:44px;border-radius:13px;background:#fff;border:2px solid var(--brand);display:grid;place-items:center;font-size:1.15rem;position:relative;z-index:1;margin-bottom:12px}
.flow .stp:nth-child(odd) .dot{transform:rotate(-4deg)}
.flow b{display:block;font-size:.88rem;margin-bottom:3px}
.flow small{display:block;font-size:.75rem;color:var(--muted);line-height:1.4}
.dark .flow small{color:#AEB4BD}
.dark .flow .dot{background:var(--ink2)}

/* модули */
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mods a{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s}
.mods a:hover{border-color:var(--brand);transform:translateY(-2px)}
.mods .ic{width:42px;height:42px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center;font-size:1.25rem}
.mods h3{font-size:1.02rem}
.mods p{font-size:.84rem;color:var(--muted);flex:1}
.mods .go{font-size:.8rem;font-weight:700;color:var(--brand)}
@media (max-width:980px){.mods{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mods{grid-template-columns:1fr}}

/* сплиты */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.checks{list-style:none;display:grid;gap:10px;margin:18px 0}
.checks li{padding-left:30px;position:relative;font-size:.96rem}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:6px;background:var(--green-soft);border:1.5px solid #9FD3B8}
.checks li::after{content:"";position:absolute;left:6px;top:7px;width:7px;height:4px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.checks b{font-weight:700}

/* для кого */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.aud .card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.aud .card.ff{border:2px solid var(--brand)}
.aud h3{font-size:1.35rem;margin:8px 0 6px}
.aud .sub{color:var(--muted);margin-bottom:6px}
.aud .price{margin-top:14px;font-weight:700;color:var(--brand)}
@media (max-width:900px){.aud{grid-template-columns:1fr}}

/* сравнение */
.cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.cmp th,.cmp td{padding:14px 16px;text-align:left;font-size:.9rem;border-top:1px solid var(--line);vertical-align:top}
.cmp thead th{border-top:0;background:var(--paper2);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cmp thead th.us{background:var(--brand);color:#fff}
.cmp td.us{background:#FFF8F3;font-weight:600}
.cmp td:first-child{font-weight:700;width:24%}
.tbl-wrap{overflow-x:auto}
@media (max-width:700px){.cmp th,.cmp td{padding:10px 11px;font-size:.82rem}}

/* тарифы */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 20px;display:flex;flex-direction:column;position:relative}
.plan.hit{border:2px solid var(--brand);box-shadow:0 26px 60px -32px rgba(232,80,10,.6)}
.plan .badge{position:absolute;top:-12px;left:20px}
.plan h3{font-size:1.25rem}
.plan .for{font-size:.84rem;color:var(--muted);margin:3px 0 14px;min-height:2.6em}
.plan .pr{font-family:'Nunito','Golos Text',sans-serif;font-weight:900;font-size:2rem;line-height:1}
.plan .pr small{font-size:.9rem;font-weight:700;color:var(--muted)}
.plan .yr{font-size:.76rem;color:var(--green);font-weight:700;margin:6px 0 14px}
.plan ul{list-style:none;display:grid;gap:7px;margin-bottom:18px;flex:1}
.plan li{font-size:.86rem;padding-left:20px;position:relative}
.plan li::before{content:"●";position:absolute;left:2px;top:0;color:var(--brand);font-size:.7rem}
.plan .btn{justify-content:center;white-space:normal;text-align:center}
.allplans{margin-top:22px;background:#fff;border:1px dashed #E6B596;border-radius:16px;padding:18px 20px;font-size:.9rem}
.allplans b{color:var(--brand-dark)}
@media (max-width:1050px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.plans{grid-template-columns:1fr}}

/* шаги */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps .label{padding-top:22px}
.steps .n{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--brand);font-size:.85rem}
.steps h3{font-size:1.1rem;margin:6px 0 6px}
.steps p{font-size:.9rem;color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:860px;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 20px}
.faq summary{cursor:pointer;list-style:none;font-weight:700;padding:14px 26px 14px 0;position:relative;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:10px;font-size:1.4rem;color:var(--brand);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 16px;color:var(--ink2);font-size:.95rem}

/* CTA */
.cta{background:var(--ink);color:#fff;border-radius:26px;padding:52px 40px;text-align:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-40px;top:-30px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(232,80,10,.45),transparent 70%)}
.cta h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:10px}
.cta p{color:#AEB4BD;margin-bottom:22px}

/* страницы функций */
.crumbs{font-size:.8rem;color:var(--faint);margin-bottom:16px}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--brand)}
.fhero{padding:52px 0 40px;background:linear-gradient(180deg,#fff 0%,var(--paper) 100%)}
.fhero h1{font-size:clamp(1.9rem,3.8vw,2.9rem);margin-bottom:16px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.facts div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.facts b{display:block;font-family:'Nunito','Golos Text',sans-serif;font-size:1.25rem}
.facts span{font-size:.8rem;color:var(--muted)}
@media (max-width:700px){.facts{grid-template-columns:1fr}}
.blocks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.blocks .label h3{font-size:1.08rem;margin-bottom:8px;display:flex;gap:9px;align-items:center}
.blocks .label p,.blocks .label li{font-size:.92rem;color:var(--ink2)}
.blocks .label ul{padding-left:18px;display:grid;gap:5px;margin-top:6px}
@media (max-width:860px){.blocks{grid-template-columns:1fr}}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related a{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;font-weight:700;font-size:.92rem;display:flex;gap:10px;align-items:center}
.related a:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:760px){.related{grid-template-columns:1fr}}
.note{font-size:.85rem;color:var(--muted);background:var(--amber-soft);border:1px solid #F1D9A8;border-radius:12px;padding:12px 14px;margin-top:16px}

/* подвал */
footer.ft{background:#101317;color:#9AA1AB;padding:46px 0 30px;font-size:.88rem}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.ft-grid h4{color:#fff;font-size:.95rem;margin-bottom:10px}
.ft-grid a{display:block;text-decoration:none;color:#9AA1AB;padding:3px 0}
.ft-grid a:hover{color:#fff}
.ft-grid a.logo{color:#fff;display:inline-flex}
.ft-bot{border-top:1px solid #23272E;margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem}
@media (max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}}

/* появление */
/* скрываем только при работающем JS — без JS (и для поисковых ботов) всё видно сразу */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
:focus-visible{outline:3px solid #F59A66;outline-offset:2px;border-radius:6px}