/* SUNTIX website — static, responsive, cyber-aurora style
   Edit server & links in /js/config.js
*/

:root{
  --bg-0:#070712;
  --bg-1:#090b18;
  --card: rgba(255,255,255,.06);
  --text:#e9e9ff;
  --muted: rgba(233,233,255,.72);

  --a:#7c4dff;
  --b:#00e5ff;
  --c:#ff2ea6;
  --d:#4dff88;

  --shadow: 0 16px 55px rgba(0,0,0,.55);
  --radius: 22px;
  --radius-sm: 16px;

  --border: 1px solid rgba(255,255,255,.12);

  --container: 1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  /* фон без "шва": только радиальные слои + базовый цвет */
  background:
    radial-gradient(1200px 800px at 18% 12%, rgba(124,77,255,.24), transparent 62%),
    radial-gradient(1000px 700px at 82% 18%, rgba(0,229,255,.16), transparent 64%),
    radial-gradient(900px 900px at 32% 88%, rgba(255,46,166,.12), transparent 64%),
    radial-gradient(900px 780px at 86% 88%, rgba(77,255,136,.10), transparent 66%),
    var(--bg-0);
}

a{ color:inherit; text-decoration:none; }
button, input{ font-family:inherit; }
img{ max-width:100%; display:block; }
::selection{ background: rgba(0,229,255,.22); }

.container{
  width:min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

/* background layers */
.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
/* мягкая "аура" */
.bg:before{
  content:"";
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,77,255,.26), transparent 36%),
    radial-gradient(circle at 70% 30%, rgba(0,229,255,.20), transparent 40%),
    radial-gradient(circle at 35% 75%, rgba(255,46,166,.16), transparent 42%),
    radial-gradient(circle at 75% 80%, rgba(77,255,136,.12), transparent 44%);
  filter: blur(34px);
  opacity:.85;
  animation: drift 16s ease-in-out infinite alternate;
}
/* лёгкий noise, чтобы убрать бэндинг */
.bg:after{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:240px 240px;
  opacity:.07;
  mix-blend-mode: overlay;
}
@keyframes drift{
  0%{ transform: translate3d(-1.5%, -1%, 0) scale(1.02) rotate(-1deg); }
  100%{ transform: translate3d(1.5%, 1.2%, 0) scale(1.04) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce){
  .bg:before{ animation:none; }
}

/* hide scrollbar (optional) */
body{ -ms-overflow-style:none; scrollbar-width:none; }
body::-webkit-scrollbar{ width:0; height:0; }

/* header/nav */
header{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter: blur(14px);
  background: rgba(7,7,18,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width: 180px;
}
.logo{
  width:42px; height:42px; border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 35%),
    linear-gradient(135deg, rgba(124,77,255,.85), rgba(0,229,255,.65), rgba(255,46,166,.75));
  box-shadow: 0 10px 30px rgba(124,77,255,.25), 0 10px 30px rgba(0,229,255,.14);
  position:relative;
  overflow:hidden;
}
.logo:after{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 55%);
  transform: rotate(18deg);
}
.brand .title{ display:flex; flex-direction:column; line-height:1.05; }
.brand strong{ letter-spacing:.12em; font-weight:800; }
.brand span{ font-size:.86rem; color:var(--muted); }

.navlinks{ display:flex; gap:8px; align-items:center; }
.navlinks a{
  padding:10px 12px;
  border-radius: 14px;
  color: rgba(233,233,255,.86);
  border: 1px solid transparent;
  transition: .15s ease;
  white-space:nowrap;
}
.navlinks a:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.navlinks a.active{
  border-color: rgba(0,229,255,.20);
  background: linear-gradient(135deg, rgba(0,229,255,.10), rgba(124,77,255,.07));
  box-shadow: 0 10px 24px rgba(0,229,255,.08);
}

.nav-right{ display:flex; gap:10px; align-items:center; }

.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: var(--border);
  color:var(--text);
}
.hamburger:active{ transform: translateY(1px); }

@media (max-width: 860px){
  .navlinks{ display:none; }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
}

.mobile-menu{ display:none; padding: 12px 0 18px 0; }
.mobile-menu a{
  display:block;
  padding: 12px 12px;
  border-radius: 16px;
  border: var(--border);
  background: rgba(255,255,255,.04);
  margin-top: 10px;
}
.mobile-menu a.active{
  border-color: rgba(0,229,255,.22);
  background: linear-gradient(135deg, rgba(0,229,255,.10), rgba(124,77,255,.07));
}
.mobile-menu.show{ display:block; }

/* common UI */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border: var(--border);
  background: rgba(255,255,255,.04);
  padding: 9px 12px;
  border-radius: 999px;
  color: rgba(233,233,255,.85);
}
.glow{ position:relative; }
.glow:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,77,255,.45), rgba(0,229,255,.35), rgba(255,46,166,.40));
  filter: blur(10px);
  opacity:.45;
  z-index:-1;
}

.card{
  border: var(--border);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-inner{ padding: 22px; }
.grid{ display:grid; gap:16px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
  transition:.16s ease;
  user-select:none;
}
.btn:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  border: 1px solid rgba(0,229,255,.24);
  background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(124,77,255,.12));
  box-shadow: 0 16px 38px rgba(0,229,255,.10);
}
.btn-primary:hover{
  border-color: rgba(0,229,255,.36);
  box-shadow: 0 18px 55px rgba(0,229,255,.12);
}
.btn-danger{
  border: 1px solid rgba(255,46,166,.24);
  background: linear-gradient(135deg, rgba(255,46,166,.16), rgba(124,77,255,.10));
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(233,233,255,.84);
  font-size:.86rem;
}

hr.sep{
  border:none;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 16px 0;
}

/* hero */
.hero{ padding: 38px 0 26px; }
.hero-wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-wrap{ grid-template-columns: 1fr; }
}
.hero h1{
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  margin: 0 0 10px 0;
  letter-spacing:.02em;
}
.hero p{
  margin:0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height:1.55;
}
.hero .hero-actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.kv{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
.kv .pill strong{ font-weight:800; letter-spacing:.02em; }
.server-box .card-inner{ display:flex; flex-direction:column; gap:12px; }
.big-ip{ font-size: 1.25rem; letter-spacing:.02em; }
.muted{ color: var(--muted); }

/* sections */
.section{ padding: 22px 0 32px; }
.section h2{ font-size: 1.35rem; margin: 0 0 12px 0; }
.section .sub{ color: var(--muted); margin: 0 0 16px 0; line-height:1.55; }

.feature{
  display:flex; gap:12px;
  padding: 16px;
  border-radius: var(--radius);
  border: var(--border);
  background: rgba(255,255,255,.04);
}
.feature svg{ flex:0 0 auto; opacity:.9; }
.feature strong{ display:block; }
.feature span{ color: var(--muted); display:block; margin-top:4px; }

/* donate cards/catalog */
.product{
  position:relative;
  border-radius: var(--radius);
  border: var(--border);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  transition: .18s ease;
}
.product:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.product .p-top{ padding: 18px 18px 12px; }
.product .p-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 8px; }
.product .p-title strong{ font-size: 1.05rem; letter-spacing:.01em; }
.product .p-desc{ color: var(--muted); line-height: 1.45; min-height: 44px; }
.product .p-bottom{ padding: 0 18px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price{ font-weight:900; letter-spacing:.02em; }
.price small{ font-weight:600; color: var(--muted); }

.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.search{
  flex:1 1 280px;
  display:flex; gap:10px; align-items:center;
  border: var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 10px 12px;
}
.search input{
  width:100%;
  background: transparent;
  border:none;
  outline:none;
  color: var(--text);
  font-size: 0.98rem;
}
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding: 9px 12px;
  border-radius: 999px;
  border: var(--border);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
  color: rgba(233,233,255,.86);
}
.chip.active{
  border-color: rgba(0,229,255,.26);
  background: linear-gradient(135deg, rgba(0,229,255,.14), rgba(124,77,255,.10));
}
.catalog{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.catalog .product{ grid-column: span 4; }
@media (max-width: 980px){ .catalog .product{ grid-column: span 6; } }
@media (max-width: 640px){ .catalog .product{ grid-column: span 12; } }

/* rules accordion */
.accordion{
  border: var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.04);
}
.acc-item + .acc-item{ border-top: 1px solid rgba(255,255,255,.10); }
.acc-btn{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding: 16px 18px;
  background: transparent;
  border:none;
  color: var(--text);
  cursor:pointer;
  font-size: 1rem;
  text-align:left;
}
.acc-left{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.acc-btn strong{ line-height:1.22; }
.acc-btn .acc-sub{ color: var(--muted); font-size:.92rem; line-height:1.25; }
.acc-btn .chev{ margin-top:4px; opacity:.88; transition:.15s ease; }
.acc-panel{
  display:none;
  padding: 0 18px 18px;
  color: rgba(233,233,255,.86);
  line-height:1.6;
}
.acc-item.open .acc-panel{ display:block; }
.acc-item.open .chev{ transform: rotate(180deg); }

/* rules list (ровные отступы) */
.acc-panel ul{ list-style:none; margin: 12px 0 0 0; padding: 0; }
.acc-panel ul ul{ margin-top: 8px; margin-left: 8px; }
.acc-panel li{ position:relative; padding-left: 18px; margin: 10px 0; }
.acc-panel ul ul li{ margin: 8px 0; }
.acc-panel li::before{
  content:"";
  position:absolute;
  left: 6px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(233,233,255,.35);
  box-shadow: 0 0 0 3px rgba(124,77,255,.10);
}
.acc-panel ul ul li::before{
  width: 5px;
  height: 5px;
  background: rgba(233,233,255,.28);
  box-shadow: none;
}
.acc-panel li strong{ font-weight: 900; }

/* footer */
footer{
  padding: 28px 0 34px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(233,233,255,.72);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-title{ font-weight:800; letter-spacing:.08em; }
.footer-links a{
  display:block;
  padding: 8px 0;
  color: rgba(233,233,255,.80);
}
.footer-links a:hover{ color: rgba(233,233,255,1); }

.toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 12px 14px;
  border-radius: 999px;
  border: var(--border);
  background: rgba(10,10,22,.78);
  backdrop-filter: blur(12px);
  display:none;
  z-index: 70;
  box-shadow: var(--shadow);
}
.toast.show{ display:inline-flex; }

/* cart drawer */
.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(430px, 100%);
  background: rgba(8,8,18,.78);
  backdrop-filter: blur(18px);
  border-left: 1px solid rgba(255,255,255,.12);
  transform: translateX(102%);
  transition: .2s ease;
  z-index: 60;
  display:flex;
  flex-direction:column;
}
.drawer.show{ transform: translateX(0%); }
.drawer-head{
  padding: 16px 16px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.drawer-body{ padding: 0 16px 16px; overflow:auto; flex:1 1 auto; }
.cart-item{
  border: var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
  margin-top: 10px;
}
.cart-item .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cart-item .row strong{ font-size: 0.98rem; }
.cart-item .row span{ color: var(--muted); font-size: 0.9rem; }
.cart-item .qty{ display:flex; gap:8px; align-items:center; margin-top: 10px; }
.qty button{
  width:36px; height:36px;
  border-radius: 14px;
  border: var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
}
.qty button:hover{ background: rgba(255,255,255,.08); }
.qty .count{ min-width: 26px; text-align:center; font-weight:800; }
.drawer-foot{ padding: 14px 16px 18px; border-top: 1px solid rgba(255,255,255,.10); }
.total{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; font-weight:800; }
.field{
  margin-top: 10px;
  border: var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 10px 12px;
}
.field input{
  width:100%;
  border:none; outline:none;
  background: transparent;
  color: var(--text);
  font-size: 0.98rem;
}

/* modal */
.modal{
  position: fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 80;
}
.modal.show{ display:flex; }
.modal-card{
  width:min(720px, 100%);
  border-radius: 22px;
  border: var(--border);
  background: rgba(10,10,22,.86);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{
  padding: 14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal-body{ padding: 16px; color: rgba(233,233,255,.88); line-height:1.6; }
.modal-body ul{ margin: 8px 0 0 18px; }
.modal-actions{
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* helpers */
.row2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 820px){ .row2{ grid-template-columns: 1fr; } }