/* 7k475n.casino — фарфоровая мануфактура. Префикс porc-. Обжиговый графит + кобальт + бисквит. */

:root{
  --porc-graphite:#14161a;
  --porc-graphite-2:#1b1e24;
  --porc-graphite-3:#232830;
  --porc-cobalt:#3a63b5;
  --porc-cobalt-lt:#5b86dd;
  --porc-cobalt-dk:#2b4c92;
  --porc-bisque:#eee9e1;
  --porc-bisque-dim:#c3bdb3;
  --porc-muted:#8d9099;
  --porc-line:rgba(238,233,225,.14);
  --porc-radius:16px;
  --porc-shell:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.porc-body{
  margin:0;
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(58,99,181,.20), transparent 62%),
    radial-gradient(700px 460px at 4% 12%, rgba(58,99,181,.10), transparent 60%),
    var(--porc-graphite);
  color:var(--porc-bisque);
  font-family:"Hind Guntur","Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.66;
}
img,svg{max-width:100%;height:auto}
a{color:var(--porc-cobalt-lt);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4,.porc-logo__name,.porc-tape__n,.porc-kpi__n,.porc-wbox__pct,.porc-rung__c{
  font-family:"Gabriela","Georgia",serif;
  font-weight:400;
  letter-spacing:.2px;
}
h1{font-size:clamp(28px,4.2vw,46px);line-height:1.16;margin:.2em 0 .5em}
h2{font-size:clamp(23px,2.9vw,33px);line-height:1.24;margin:0 0 .55em}
h3{font-size:clamp(18px,1.9vw,21px);line-height:1.3;margin:1.6em 0 .5em;color:#fff}
h4{font-size:15px;margin:0 0 .8em;color:var(--porc-cobalt-lt);text-transform:uppercase;letter-spacing:1.4px}

.porc-skip{position:absolute;left:-9999px;top:0;background:var(--porc-cobalt);color:#fff;padding:12px 20px;z-index:99}
.porc-skip:focus{left:12px;top:12px}

/* ---------- шапка ---------- */
.porc-top{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  max-width:var(--porc-shell);margin:0 auto;padding:16px 20px;
  border-bottom:1px solid var(--porc-line);
}
.porc-logo{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.porc-logo:hover{text-decoration:none}
.porc-logo__glyph{width:44px;height:44px;flex:0 0 44px}
.porc-logo__txt{display:flex;flex-direction:column;line-height:1.15}
.porc-logo__name{font-size:20px;color:#fff}
.porc-logo__sub{font-size:12px;color:var(--porc-muted);letter-spacing:.6px}
.porc-nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.porc-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 13px;
  border-radius:10px;color:var(--porc-bisque-dim);font-size:15px;
}
.porc-nav a:hover{background:rgba(58,99,181,.18);color:#fff;text-decoration:none}

/* ---------- кнопки ---------- */
.porc-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--porc-cobalt-lt),var(--porc-cobalt-dk));
  color:#fff;font-weight:600;letter-spacing:.3px;text-align:center;
  border:1px solid rgba(238,233,225,.18);
}
.porc-cta:hover{filter:brightness(1.1);text-decoration:none}
.porc-cta--sm{min-height:44px;padding:0 18px;font-size:15px}
.porc-cta--lg{min-height:54px;padding:0 30px;font-size:17px}
.porc-cta--ghost{background:transparent;color:var(--porc-bisque);border:1px solid var(--porc-line)}

/* ---------- сводная лента ---------- */
.porc-tape{
  max-width:var(--porc-shell);margin:22px auto 0;padding:16px 20px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  background:linear-gradient(180deg,rgba(58,99,181,.13),rgba(20,22,26,.5));
  border:1px solid var(--porc-line);border-radius:var(--porc-radius);
}
.porc-tape__cell{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border-left:2px solid rgba(58,99,181,.5)}
.porc-tape__n{font-size:21px;color:#fff}
.porc-tape__l{font-size:12.5px;color:var(--porc-muted);line-height:1.35}

/* ---------- общий контейнер секций ---------- */
.porc-hero,.porc-slab,.porc-final{
  max-width:var(--porc-shell);margin:0 auto;padding:52px 20px;
  border-bottom:1px solid var(--porc-line);
}
.porc-over{
  margin:0 0 12px;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--porc-cobalt-lt);
}
.porc-lead{max-width:78ch;color:var(--porc-bisque-dim);margin:0 0 26px}

/* ---------- герой ---------- */
.porc-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center}
.porc-chip{
  display:inline-block;margin:0 0 12px;padding:6px 14px;border-radius:999px;
  border:1px solid rgba(58,99,181,.5);background:rgba(58,99,181,.12);
  font-size:12.5px;letter-spacing:1px;color:var(--porc-cobalt-lt);
}
.porc-hero__sub{color:var(--porc-bisque-dim);max-width:64ch;margin:0 0 24px}
.porc-hero__btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.porc-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.porc-kpi__i{
  padding:14px 12px;border-radius:12px;border:1px solid var(--porc-line);
  background:rgba(238,233,225,.04);display:flex;flex-direction:column;gap:2px;
}
.porc-kpi__n{font-size:22px;color:#fff}
.porc-kpi__l{font-size:12.5px;color:var(--porc-muted)}
.porc-hero__art{margin:0}
.porc-hero__svg{width:100%;display:block}
.porc-hero__art figcaption{margin-top:10px;font-size:13px;color:var(--porc-muted);text-align:center}

/* ---------- приветственный пакет ---------- */
.porc-wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.porc-wbox{
  padding:20px 18px;border-radius:var(--porc-radius);
  background:linear-gradient(180deg,rgba(238,233,225,.07),rgba(238,233,225,.02));
  border:1px solid var(--porc-line);border-top:3px solid var(--porc-cobalt);
}
.porc-wbox--b{border-top-color:var(--porc-cobalt-lt)}
.porc-wbox--c{border-top-color:#7ea3e8}
.porc-wbox--d{border-top-color:var(--porc-bisque-dim)}
.porc-wbox__st{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--porc-muted)}
.porc-wbox__pct{font-size:30px;color:#fff;margin:6px 0 8px}
.porc-wbox__t{font-weight:600;margin-bottom:8px;color:#fff}
.porc-wbox__s{font-size:14px;color:var(--porc-bisque-dim);line-height:1.55}

/* ---------- три шага ---------- */
.porc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.porc-sbox{padding:22px 20px;border-radius:var(--porc-radius);border:1px solid var(--porc-line);background:rgba(238,233,225,.035)}
.porc-sbox__n{font-family:"Gabriela",serif;font-size:30px;color:var(--porc-cobalt-lt);line-height:1}
.porc-sbox__h{font-weight:600;color:#fff;margin:8px 0 6px;font-size:18px}
.porc-sbox p{margin:0;font-size:15px;color:var(--porc-bisque-dim)}

/* ---------- каталог ---------- */
.porc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:26px}
.porc-card{
  border-radius:14px;overflow:hidden;border:1px solid var(--porc-line);
  background:rgba(238,233,225,.04);display:flex;flex-direction:column;
}
.porc-card__cv{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:"Gabriela",serif;font-size:17px;color:#0f1116;padding:10px;line-height:1.2;
  background:linear-gradient(150deg,var(--porc-bisque),#cfc8bd);
}
.porc-cv1{background:linear-gradient(150deg,#eee9e1,#9fb8e6)}
.porc-cv2{background:linear-gradient(150deg,#dfe6f5,#7f9fd8)}
.porc-cv3{background:linear-gradient(150deg,#eee9e1,#b9c9ea)}
.porc-cv4{background:linear-gradient(150deg,#e6ddf1,#8fa8dd)}
.porc-cv5{background:linear-gradient(150deg,#eee9e1,#8aa4d6)}
.porc-cv7{background:linear-gradient(150deg,#e4ecf8,#9db6e4)}
.porc-cv8{background:linear-gradient(150deg,#eee9e1,#a7bce6)}
.porc-cv10{background:linear-gradient(150deg,#dde7f6,#8fa9dc)}
.porc-cv11{background:linear-gradient(150deg,#eee9e1,#94aede)}
.porc-cv12{background:linear-gradient(150deg,#e8eef9,#a2b9e7)}
.porc-card h3{margin:12px 14px 4px;font-size:16px}
.porc-card p{margin:0 14px 12px;font-size:13px;color:var(--porc-muted)}
.porc-card__b{
  margin:auto 14px 14px;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;border-radius:10px;border:1px solid rgba(58,99,181,.55);
  color:var(--porc-cobalt-lt);font-size:14px;font-weight:600;
}
.porc-card__b:hover{background:rgba(58,99,181,.18);color:#fff;text-decoration:none}

.porc-tags{margin-bottom:16px}
.porc-tags__h{font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--porc-muted);margin-bottom:10px}
.porc-tags__l{display:flex;flex-wrap:wrap;gap:8px}
.porc-tags__l span{
  padding:7px 13px;border-radius:999px;font-size:13.5px;
  border:1px solid var(--porc-line);background:rgba(58,99,181,.10);color:var(--porc-bisque-dim);
}

/* ---------- клубная лестница ---------- */
.porc-ladder{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:22px}
.porc-rung{
  padding:16px 12px;border-radius:12px;text-align:center;
  border:1px solid var(--porc-line);
  background:linear-gradient(180deg,rgba(58,99,181,.08),rgba(238,233,225,.03));
  display:flex;flex-direction:column;gap:4px;
}
.porc-rung:nth-child(5){background:linear-gradient(180deg,rgba(58,99,181,.24),rgba(238,233,225,.03))}
.porc-rung:nth-child(6){background:linear-gradient(180deg,rgba(238,233,225,.20),rgba(58,99,181,.12));border-color:rgba(238,233,225,.35)}
.porc-rung__n{font-size:15px;color:#fff;font-weight:600}
.porc-rung__c{font-size:19px;color:var(--porc-cobalt-lt)}
.porc-rung:nth-child(6) .porc-rung__c{color:#fff}
.porc-lgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.porc-lbox{padding:20px 18px;border-radius:var(--porc-radius);border:1px solid var(--porc-line);background:rgba(238,233,225,.035)}
.porc-lbox__h{font-family:"Gabriela",serif;font-size:18px;color:#fff;margin-bottom:8px}
.porc-lbox p{margin:0;font-size:15px;color:var(--porc-bisque-dim)}

/* ---------- гонка ---------- */
.porc-tour__btn{margin-bottom:24px}
.porc-tkpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.porc-tkpi>div{
  padding:18px 16px;border-radius:14px;border:1px solid var(--porc-line);
  background:rgba(58,99,181,.10);display:flex;flex-direction:column;gap:3px;
}
.porc-tkpi>div>span:first-child{font-family:"Gabriela",serif;font-size:26px;color:#fff}
.porc-tkpi__b{font-size:14px;color:var(--porc-bisque)}
.porc-tkpi i{font-style:normal;font-size:13px;color:var(--porc-muted)}

/* ---------- живой зал ---------- */
.porc-live{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.porc-lv{border-radius:var(--porc-radius);overflow:hidden;border:1px solid var(--porc-line);background:rgba(238,233,225,.04)}
.porc-lv__cv{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:"Gabriela",serif;font-size:20px;color:#0f1116;line-height:1.2;padding:10px;
}
.porc-lc1{background:linear-gradient(140deg,#eee9e1,#8fa9dc)}
.porc-lc2{background:linear-gradient(140deg,#dfe7f6,#6f92d2)}
.porc-lc3{background:linear-gradient(140deg,#eee9e1,#a3bae6)}
.porc-lc4{background:linear-gradient(140deg,#e6ecf8,#7d9dd9)}
.porc-lc5{background:linear-gradient(140deg,#eee9e1,#95afe0)}
.porc-lv__b{padding:14px 16px 18px;position:relative}
.porc-lv__t{font-weight:600;color:#fff;margin-bottom:2px}
.porc-lv__s{font-size:13px;color:var(--porc-muted);margin-bottom:8px}
.porc-lv__m{font-size:14px;color:var(--porc-cobalt-lt)}
.porc-lv__p{font-size:13.5px;color:var(--porc-bisque-dim)}
.porc-lv__on{
  position:absolute;top:-30px;right:12px;padding:4px 10px;border-radius:999px;
  background:var(--porc-cobalt);color:#fff;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;
}

/* ---------- обзор марки ---------- */
.porc-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.porc-bdg{
  padding:9px 15px;border-radius:10px;font-size:13.5px;
  border:1px solid rgba(58,99,181,.45);background:rgba(58,99,181,.12);color:var(--porc-bisque);
}

/* ---------- отзывы ---------- */
.porc-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.porc-rev{padding:22px 20px;border-radius:var(--porc-radius);border:1px solid var(--porc-line);background:rgba(238,233,225,.04)}
.porc-rev__st{color:var(--porc-cobalt-lt);letter-spacing:2px;margin-bottom:10px}
.porc-rev__off{color:var(--porc-muted)}
.porc-rev__q{margin:0 0 14px;font-size:15px;color:var(--porc-bisque-dim)}
.porc-rev__m{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--porc-muted)}
.porc-rev__a{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--porc-cobalt);color:#fff;font-family:"Gabriela",serif;font-size:16px;
}

/* ---------- касса ---------- */
.porc-pay{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
.porc-pbox{
  padding:16px 12px;border-radius:12px;text-align:center;
  border:1px solid var(--porc-line);background:rgba(238,233,225,.05);
  display:flex;flex-direction:column;gap:3px;
}
.porc-pbox__n{font-weight:700;color:#fff;font-size:15px}
.porc-pbox i{font-style:normal;font-size:12.5px;color:var(--porc-muted)}
.porc-times{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.porc-times>div{
  padding:14px 16px;border-radius:12px;border:1px solid var(--porc-line);
  background:rgba(58,99,181,.10);display:flex;flex-direction:column;gap:2px;
}
.porc-times__n{font-family:"Gabriela",serif;font-size:19px;color:#fff}
.porc-times>div>span:last-child{font-size:13.5px;color:var(--porc-bisque-dim)}

/* ---------- предфутерный призыв ---------- */
.porc-final{
  text-align:center;
  background:linear-gradient(180deg,rgba(58,99,181,.16),transparent);
}
.porc-final p{max-width:62ch;margin:0 auto 22px;color:var(--porc-bisque-dim)}

/* ---------- FAQ ---------- */
.porc-slab details{
  border:1px solid var(--porc-line);border-radius:12px;
  background:rgba(238,233,225,.035);margin-bottom:10px;
}
.porc-slab summary{
  cursor:pointer;list-style:none;padding:14px 18px;min-height:44px;
  display:flex;align-items:center;gap:10px;font-weight:600;color:#fff;
}
.porc-slab summary::-webkit-details-marker{display:none}
.porc-slab summary::before{content:"+";color:var(--porc-cobalt-lt);font-size:20px;line-height:1}
.porc-slab details[open] summary::before{content:"–"}
.porc-slab details p{margin:0;padding:0 18px 16px 40px;font-size:15px;color:var(--porc-bisque-dim)}

/* ---------- заметка автора ---------- */
.porc-author p{max-width:88ch;color:var(--porc-bisque-dim)}

/* ---------- подвал ---------- */
.porc-foot{max-width:var(--porc-shell);margin:0 auto;padding:40px 20px 34px}
.porc-foot__top{display:grid;grid-template-columns:1.1fr 1.4fr;gap:32px}
.porc-foot__logo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.porc-foot__logo>span{display:flex;flex-direction:column;font-size:13px;color:var(--porc-muted);line-height:1.3}
.porc-foot__n{font-family:"Gabriela",serif;font-size:19px;color:#fff}
.porc-foot__legal{margin:0;font-size:13.5px;color:var(--porc-muted);max-width:62ch}
.porc-foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.porc-foot__col ul{margin:0;padding:0;list-style:none}
.porc-foot__col li{font-size:14px;color:var(--porc-bisque-dim);padding:5px 0}
.porc-foot__bottom{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--porc-line);
  display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--porc-muted);
}

/* ---------- адаптив ---------- */
@media (max-width:1080px){
  .porc-grid{grid-template-columns:repeat(3,1fr)}
  .porc-pay{grid-template-columns:repeat(3,1fr)}
  .porc-tape{grid-template-columns:repeat(3,1fr)}
  .porc-ladder{grid-template-columns:repeat(3,1fr)}
  .porc-wgrid{grid-template-columns:repeat(2,1fr)}
  .porc-live{grid-template-columns:repeat(2,1fr)}
  .porc-tkpi{grid-template-columns:repeat(2,1fr)}
  .porc-times{grid-template-columns:repeat(2,1fr)}
  .porc-hero{grid-template-columns:1fr}
  .porc-foot__top{grid-template-columns:1fr}
}
@media (max-width:620px){
  body.porc-body{font-size:16px}
  .porc-hero,.porc-slab,.porc-final{padding:36px 16px}
  .porc-top{padding:14px 16px}
  .porc-nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .porc-tape,.porc-kpi,.porc-grid,.porc-wgrid,.porc-steps,.porc-lgrid,
  .porc-live,.porc-revs,.porc-pay,.porc-times,.porc-tkpi,.porc-ladder,
  .porc-foot__cols{grid-template-columns:1fr}
  .porc-tags__l{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
  .porc-hero__btns .porc-cta{width:100%}
  .porc-lv__on{top:8px;right:8px}
  .porc-lv__b{padding-top:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}