/* ============================================================
   КВАДРАТУРА — square.css
   Пасхалка: на этой странице НЕТ ни одного скругления —
   она демонстрирует продукт собой. border-radius здесь запрещён.
   ============================================================ */
:root{
  --bg:#0a0a14; --panel:rgba(18,18,30,0.96); --acc:#e0902e;
  --line:rgba(224,144,46,0.4); --txt:#e8e8f2; --mut:#9a95b0;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg); color:var(--txt); font-family:'Exo 2',sans-serif; min-height:100vh;
  background-image:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(224,144,46,0.10), transparent),
    radial-gradient(ellipse 50% 35% at 85% 15%, rgba(90,127,192,0.08), transparent);
}

.panel{
  position:relative; max-width:760px; margin:34px auto 18px; padding:26px 30px 22px;
  background:var(--panel); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  box-shadow:0 0 30px rgba(224,144,46,0.15); text-align:center;
}
.panel h1{
  font-family:'Orbitron',sans-serif; font-size:1.7rem; letter-spacing:3px;
  background:linear-gradient(135deg,#e0902e,#f4c069); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; margin-bottom:10px;
}
.panel .subtitle{color:var(--mut); font-size:0.92rem; line-height:1.55; max-width:620px; margin:0 auto;}

/* ---- демо было/станет ---- */
.sq-demo{
  max-width:760px; margin:10px auto 0; padding:20px 24px;
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  background:var(--panel); border:1px solid rgba(255,255,255,0.1);
}
.sq-demo-col{text-align:center;}
.sq-demo-cap{
  font-family:'Jura',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--mut); margin-bottom:12px;
}
.sq-demo-cap.on{color:var(--acc);}
.sq-demo-row{display:flex; align-items:center; gap:14px;}
.sq-ava{
  width:54px; height:54px; background:linear-gradient(135deg,#3a5b96,#5a7fc0);
  display:inline-flex; align-items:center; justify-content:center; font-size:26px;
}
.sq-ava.r{border-radius:50%;} /* единственные скругления на странице — в блоке «до» */
.sq-btn-demo{
  background:linear-gradient(135deg,#6d28d9,#a855f7); color:#fff; padding:10px 20px;
  font-size:0.82rem; font-weight:600;
}
.sq-btn-demo.r{border-radius:999px;}
.sq-card-demo{
  width:66px; height:44px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25);
  display:inline-block;
}
.sq-card-demo.r{border-radius:14px;}
.sq-arrow{font-size:1.8rem; color:var(--acc);}

/* ---- контентные блоки ---- */
.sq-block{
  max-width:760px; margin:16px auto 0; padding:22px 26px;
  background:var(--panel); border:1px solid rgba(255,255,255,0.1);
}
.sq-block h2{
  font-family:'Orbitron',sans-serif; font-size:0.98rem; letter-spacing:2px; color:var(--acc);
  margin-bottom:10px; text-transform:uppercase;
}
.sq-block p{color:#cfc9de; font-size:0.92rem; line-height:1.65;}

/* магазины Stylus */
.sq-stores{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.sq-store{
  display:inline-block; padding:11px 18px; text-decoration:none;
  background:rgba(10,10,20,0.7); color:#e8e8f2; border:1px solid rgba(255,255,255,0.22);
  font-family:'Jura',sans-serif; font-weight:700; font-size:0.82rem; letter-spacing:0.5px;
  transition:.2s;
}
.sq-store:hover{border-color:var(--acc); box-shadow:0 0 12px rgba(224,144,46,0.4);}
.sq-store.mine{
  border-color:var(--acc); background:rgba(224,144,46,0.12);
  box-shadow:0 0 14px rgba(224,144,46,0.35);
}
.sq-store.mine::after{content:' ← ваш'; color:var(--acc); font-size:0.72rem;}

/* опции под шагом 2 */
.sq-opts{max-width:520px; margin:16px auto 0; text-align:left;}
.sq-opt{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px; cursor:pointer;
  background:rgba(10,10,20,0.6); border:1px solid rgba(255,255,255,0.14); margin-bottom:8px;
  font-size:0.88rem; line-height:1.4; transition:.15s;
}
.sq-opt:hover{border-color:var(--acc);}
.sq-opt input{width:17px; height:17px; margin-top:1px; accent-color:var(--acc); flex-shrink:0;}
.sq-opt-hint{color:#7d7896; font-size:0.74rem; padding:0 2px 2px; line-height:1.45;}
.sq-install.off{opacity:0.5; cursor:not-allowed; transform:none !important; box-shadow:none !important;}

/* кнопка установки стиля */
.sq-install{
  display:block; max-width:420px; margin:16px auto 0; padding:16px 24px; text-align:center;
  background:linear-gradient(135deg,#b06a14,#e0902e); color:#fff; text-decoration:none;
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:0.95rem; letter-spacing:2px;
  transition:.2s;
}
.sq-install:hover{transform:translateY(-2px); box-shadow:0 0 24px rgba(224,144,46,0.55);}
.sq-hint{margin-top:12px; color:#7d7896; font-size:0.8rem; text-align:center;}

/* ---- SEO ---- */
.sq-seo{max-width:760px; margin:30px auto 0; padding:0 16px; color:#565170; font-size:0.82rem; line-height:1.7; text-align:center;}

@media (max-width:560px){
  .panel h1{font-size:1.25rem;}
  .panel{margin:22px 12px 14px;}
  .sq-demo, .sq-block{margin-left:12px; margin-right:12px;}
  .sq-arrow{transform:rotate(90deg);}
}