/* ==========================================================================
   PUBLIC SITE — REDESIGN v2
   Используется ТОЛЬКО на публичной странице (app/templates/public/index.html).
   Админка и логин по-прежнему используют app/static/css/main.css без изменений.
   ========================================================================== */

:root{
  --bg: #0b0812;
  --bg-2: #120c1c;
  --panel: #171021;
  --panel-2: #1d1529;
  --border: rgba(167,139,250,0.16);
  --border-strong: rgba(167,139,250,0.34);
  --text: #f1eef8;
  --text-dim: #a79fba;
  --text-faint: #8f89a0;
  --violet: #7c3aed;
  --violet-strong: #9257ff;
  --violet-light: #b9a6fb;
  --violet-glow: #d8cbff;
  --violet-dim: rgba(124,58,237,0.16);
  --live: #3ddc97;
  --live-dim: rgba(61,220,151,0.14);
  --red: #f0628c;
  --gold: #f5b942;
  --cyan: #35c5e8;
  --pink: #f0629c;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;
  --display: 'Space Grotesk', sans-serif;
  --radius: 10px;
}

/* Плавный (fluid) базовый размер шрифта.
   Почти вся вёрстка ниже переведена с px на rem, поэтому она масштабируется
   вместе с этим значением — это и даёт "отталкивание от ширины окна":
   макет выглядит одинаково пропорционально что на мониторе с масштабом
   125%, что со 150%, что со 175% — ведь на самом деле от масштаба ОС
   меняется именно ширина окна в CSS-пикселях, а не физический размер
   монитора. При ширине окна ~1180-1300px (то, под что изначально
   рисовался дизайн) получаем ровно 16px, как и было раньше. Уже, чем на
   мобильном, — 15px (минимум), значительно шире (большой монитор при
   низком масштабе ОС) — до 19px, чтобы макет не "терялся" в пустом поле. */
html{
  font-size: clamp(15px, 0.35vw + 12px, 19px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 800px 500px at 12% -5%, rgba(124,58,237,0.20), transparent 60%),
    radial-gradient(ellipse 700px 600px at 100% 15%, rgba(146,87,255,0.13), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 100%, rgba(124,58,237,0.10), transparent 60%);
}
body.modal-locked{ overflow:hidden; }

html{ scrollbar-color: var(--border-strong) var(--bg); scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:20px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--violet); }
.modal{ scrollbar-color: var(--violet) var(--panel); scrollbar-width:thin; }
.modal::-webkit-scrollbar{ width:8px; }
.modal::-webkit-scrollbar-track{ background:var(--panel); }
.modal::-webkit-scrollbar-thumb{ background:var(--violet); border-radius:20px; border:2px solid var(--panel); }

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--violet); color:#fff; }
:focus-visible{ outline:2px solid var(--violet-light); outline-offset:2px; }

.sr-only{
  position:absolute; width:0.0625rem; height:0.0625rem; padding:0; margin:-0.0625rem;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.wrap{ max-width:73.75rem; margin:0 auto; padding:0 1.75rem; position:relative; z-index:1; }

/* ---------- NAV ---------- */
header.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,8,18,0.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.75rem; max-width:73.75rem; margin:0 auto; gap:1.125rem;
  height:4.75rem; position:relative; z-index:1;
}
.brand{ display:flex; align-items:center; gap:0.125rem; }
.logo{
  font-family:var(--display); font-weight:700; font-size:1.0625rem; color:var(--text);
  display:flex; align-items:center; gap:0.5625rem; letter-spacing:-0.01em;
}
.logo a{ display:flex; align-items:center; gap:0.5625rem; }
.logo-img{ height:2.5rem; width:auto; display:block; }
.logo .dot{
  width:0.5625rem; height:0.5625rem; border-radius:0.1875rem; background:var(--violet-strong); display:inline-block;
  box-shadow:0 0 14px 2px rgba(146,87,255,0.65);
}
.brand-slogan{
  font-family:var(--mono); font-size:0.6562rem; color:var(--text-faint);
  padding-left:0.875rem; letter-spacing:.02em;
}
@media (max-width:640px){ .brand-slogan{ display:none; } }

.nav-links{ display:flex; gap:0.125rem; font-family:var(--mono); font-size:0.8438rem; }
.nav-links a{
  display:flex; align-items:center; color:var(--text-dim); position:relative;
  padding:0.5625rem 0.875rem; border-radius:0.5rem;
  transition:color .15s ease, background-color .15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--text); background:var(--violet-dim); }
.nav-links a .num{ color:var(--violet-light); margin-right:0.4375rem; font-size:0.6875rem; transition:color .15s ease; }
.nav-links a.active{ color:var(--text); background:var(--violet-dim); }
.nav-links a.active::after{
  content:''; display:inline-block; width:0.3125rem; height:0.75rem; margin-left:0.375rem;
  background:var(--violet-light); animation:blink 1s steps(1) infinite; vertical-align:middle;
}
@keyframes blink{ 50%{ opacity:0; } }

.burger{ display:none; flex-direction:column; gap:0.25rem; background:none; border:none; cursor:pointer; padding:0.375rem; }
.burger span{ width:1.25rem; height:0.125rem; background:var(--text); border-radius:0.125rem; }

.nav-right{ display:flex; align-items:center; gap:0.875rem; }
.nav-group-right{ display:flex; align-items:center; gap:1.375rem; }
@media (max-width:900px){ .nav-group-right{ gap:0.75rem; } }

@media (max-width:900px){
  .nav-links{
    position:fixed; top:4.75rem; left:0; right:0;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    flex-direction:column; gap:0;
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
    z-index:40;
  }
  .nav-links.open{ max-height:25rem; }
  .nav-links a{ padding:0.9375rem 1.75rem; border-bottom:1px solid var(--border); border-radius:0; }
  .nav-links a.active{ background:var(--violet-dim); }
  .burger{ display:flex; }
}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--mono); font-size:0.8438rem; font-weight:500;
  padding:0.875rem 1.375rem; border-radius:0.625rem;
  border:1px solid var(--border-strong);
  cursor:pointer; transition:all .22s ease;
  display:inline-flex; align-items:center; gap:0.5rem;
}
.btn svg{ width:0.9375rem; height:0.9375rem; }
.btn-primary{ background:var(--violet); color:#fff; }
.btn-primary:hover{ background:var(--violet-strong); box-shadow:0 8px 30px rgba(146,87,255,0.4); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--text-dim); border-color:var(--border); }
.btn-ghost:hover{ color:var(--text); border-color:var(--border-strong); background:var(--violet-dim); }
.btn-nav{ padding:0.625rem 1rem; font-size:0.7812rem; border-radius:0.5rem; }

/* ---------- FLASH MESSAGES ---------- */
.flash-wrap{ padding-top:1.125rem; position:relative; z-index:1; }
.flash{ border-bottom:1px solid var(--border); background:var(--panel); }
.flash .wrap{ padding:0.75rem 1.75rem; font-family:var(--mono); font-size:0.8125rem; display:flex; align-items:center; gap:0.625rem; }
.flash-success{ border-color:rgba(61,220,151,0.4); }
.flash-success .wrap{ color:var(--live); }
.flash-success .wrap::before{ content:'✓'; }
.flash-error{ border-color:var(--red); }
.flash-error .wrap{ color:var(--red); }
.flash-error .wrap::before{ content:'✕'; }

/* ---------- HERO ---------- */
.hero{ padding:5.5rem 0 4rem; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:3.5rem; align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; padding-top:0.5rem; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--mono); font-size:0.7812rem; color:var(--violet-light);
  background:var(--violet-dim); border:1px solid var(--border);
  padding:0.375rem 0.8125rem; border-radius:1.25rem; margin-bottom:1.5rem;
}
.eyebrow .pulse-dot{
  width:0.375rem; height:0.375rem; border-radius:50%; background:var(--live);
  box-shadow:0 0 8px 1px var(--live); animation:pulse 2s infinite; flex-shrink:0;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

h1.hero-title{
  font-family:var(--display); font-size:clamp(2.125rem, 4.8vw, 3.5rem);
  font-weight:700; line-height:1.08; letter-spacing:-0.02em; margin-bottom:1.375rem;
}
h1.hero-title .accent{
  background:linear-gradient(100deg, var(--violet-glow), var(--violet-strong) 60%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-desc{ color:var(--text-dim); font-size:1rem; max-width:48ch; margin-bottom:2rem; }
.hero-desc strong{ color:var(--text); font-weight:600; }

.hero-ctas{ display:flex; gap:0.875rem; flex-wrap:wrap; margin-bottom:2.5rem; }

/* stat cards */
.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:0.625rem;
}
.stat{
  background:var(--panel); border:1px solid var(--border); border-radius:0.75rem;
  padding:1rem 0.875rem 0.875rem; position:relative; overflow:hidden; transition:all .2s ease;
}
.stat::before{
  content:''; position:absolute; top:0; left:0; right:0; height:0.125rem;
  background:var(--accent, var(--violet-strong));
}
.stat:hover{ border-color:var(--border-strong); background:var(--panel-2); transform:translateY(-2px); }
.stat:nth-child(4n+1){ --accent: var(--violet-strong); }
.stat:nth-child(4n+2){ --accent: var(--cyan); }
.stat:nth-child(4n+3){ --accent: var(--gold); }
.stat:nth-child(4n+4){ --accent: var(--pink); }
.stat b{
  display:block; font-family:var(--display); font-size:1.3125rem; font-weight:700;
  background:linear-gradient(120deg, var(--text), var(--accent, var(--violet-glow)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1.25; margin-bottom:0.3125rem;
}
.stat span{ display:block; font-size:0.6875rem; color:var(--text-faint); font-family:var(--mono); letter-spacing:.02em; line-height:1.4; }
@media (max-width:560px){ .hero-stats{ grid-template-columns:repeat(2, 1fr); } }

/* ---------- TERMINAL WIDGET ---------- */
.terminal{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--border-strong);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(146,87,255,0.05), 0 30px 70px -20px rgba(124,58,237,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
  animation:float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.term-bar{
  display:flex; align-items:center; gap:0.5rem; padding:0.8125rem 1rem;
  border-bottom:1px solid var(--border); background:rgba(255,255,255,0.015);
}
.term-dot{ width:0.625rem; height:0.625rem; border-radius:50%; }
.term-bar .term-dot:nth-child(1){ background:#ff5f57; }
.term-bar .term-dot:nth-child(2){ background:#febc2e; }
.term-bar .term-dot:nth-child(3){ background:#28c840; }
.term-name{ font-family:var(--mono); font-size:0.7812rem; color:var(--text-faint); margin-left:0.625rem; }
.term-body{ padding:1.625rem 1.5rem 0.375rem; font-family:var(--mono); font-size:0.875rem; line-height:2; }
.term-body .k{ color:var(--violet-light); }
.term-body .s, .term-body .live{ color:var(--live); }
.term-body .c{ color:var(--text-faint); margin-top:0.625rem; }
.caret{
  display:inline-block; width:0.4375rem; height:0.9375rem; background:var(--violet-glow);
  margin-left:0.25rem; vertical-align:middle; animation:blink2 1s step-end infinite;
}
@keyframes blink2{ 50%{ opacity:0; } }

.stack-row{ display:flex; gap:0.5rem; flex-wrap:wrap; padding:1.125rem 1.5rem 1.5rem; }
.pill{
  font-family:var(--mono); font-size:0.7188rem; color:var(--violet-light);
  background:var(--violet-dim); border:1px solid var(--border);
  padding:0.3125rem 0.625rem; border-radius:0.375rem;
}

/* ---------- SECTION HEADERS ---------- */
section{ padding:6.25rem 0; position:relative; z-index:1; }
.section-head{ margin-bottom:3rem; max-width:40rem; }
.section-tag{
  font-family:var(--mono); font-size:0.7812rem; color:var(--violet-light);
  display:flex; align-items:center; gap:0.5rem; margin-bottom:0.875rem;
}
.section-tag .path{ color:var(--violet-light); }
h2{ font-family:var(--display); font-size:clamp(1.6875rem,3.2vw,2.3125rem); font-weight:700; letter-spacing:-0.02em; margin-bottom:0.75rem; }
.section-sub{ color:var(--text-dim); margin-top:0.375rem; max-width:60ch; font-size:0.9688rem; }

/* ---------- SERVICES ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; align-items:stretch; }
@media (max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } }

.svc-card{
  background:var(--panel); border:1px solid var(--border); border-radius:0.875rem;
  padding:1.375rem; display:flex; flex-direction:column; flex:1;
  transition:all .25s ease; position:relative; overflow:hidden;
}
.svc-card::before{
  content:''; position:absolute; inset:0; opacity:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%), rgba(146,87,255,0.12), transparent 60%);
  transition:opacity .3s ease; pointer-events:none;
}
.svc-card:hover{ border-color:var(--border-strong); transform:translateY(-4px); background:var(--panel-2); }
.svc-card:hover::before{ opacity:1; }
.svc-card--link{ cursor:pointer; }
.svc-card--link:hover{ border-color:var(--violet-strong); }
.svc-card--link:focus-visible{ border-color:var(--violet-strong); }

.svc-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; gap:0.5rem; }
.svc-file{ font-family:var(--mono); font-size:0.75rem; color:var(--text-faint); }
.svc-file .ext{ color:var(--text-faint); }
.svc-badge{
  font-family:var(--mono); font-size:0.6562rem; color:var(--violet-light);
  background:var(--violet-dim); padding:0.1875rem 0.5rem; border-radius:0.3125rem; border:1px solid var(--border);
  white-space:nowrap; flex-shrink:0;
}
.svc-title{ font-family:var(--display); font-weight:600; font-size:1.1875rem; margin-bottom:0.5rem; }
.svc-desc{ font-size:0.8625rem; color:var(--text-dim); margin-bottom:1rem; min-height:3.25rem; }
.svc-tags{ display:flex; gap:0.375rem; flex-wrap:wrap; margin-bottom:1rem; }
.tag{
  font-family:var(--mono); font-size:0.675rem; color:var(--text-dim);
  border:1px solid var(--border); padding:0.1875rem 0.5625rem; border-radius:0.375rem;
}
.svc-foot{
  margin-top:auto; padding-top:0.875rem; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
}
.svc-price{
  font-family:var(--mono); font-size:0.8125rem; color:var(--violet-glow); font-weight:500;
  flex:1; border-radius:0.3125rem; padding:0.125rem 0.25rem; margin:-0.125rem -0.25rem;
}
.svc-price[contenteditable="true"]{ outline:1px dashed var(--border-strong); background:var(--panel-2); }
.price-edit-btn{
  background:none; border:none; color:var(--text-faint); cursor:pointer;
  padding:0.25rem; display:inline-flex; border-radius:0.3125rem; flex-shrink:0;
}
.price-edit-btn:hover{ color:var(--violet-light); background:var(--violet-dim); }
.price-edit-btn svg{ width:0.8125rem; height:0.8125rem; }

/* hosting bar (full width, below services grid) */
.hosting-bar{
  margin-top:1.125rem; display:flex; flex-direction:column; gap:0.5rem;
}
.hosting-bar-top{
  display:flex; justify-content:space-between; align-items:center; gap:0.75rem;
}
.hosting-bar-body{
  display:flex; flex-direction:row; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.hosting-bar-text{ flex:1 1 320px; min-width:0; text-align:left; }
.hosting-bar-text .svc-title{ margin-bottom:0.25rem; }
.hosting-bar-text .svc-desc{ text-align:left; }
.hosting-bar .svc-price{
  font-size:1.125rem; white-space:nowrap; flex:none; text-align:right; margin-left:auto;
}
@media (max-width:560px){
  .hosting-bar .svc-price{ text-align:left; margin-left:0; }
}

.empty-hint{
  grid-column:1/-1; text-align:center; padding:2.5rem 1.25rem;
  font-family:var(--mono); font-size:0.8125rem; color:var(--text-faint);
  border:1px dashed var(--border); border-radius:0.75rem;
}

/* ---------- SKILLS ---------- */
.skills-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
@media (max-width:900px){ .skills-wrap{ grid-template-columns:1fr; } }
.skill-cloud{ display:flex; flex-wrap:wrap; gap:0.625rem; }
.skill-pill{
  font-family:var(--mono); font-size:0.8125rem; padding:0.5625rem 1rem; border-radius:0.5rem;
  border:1px solid var(--border); color:var(--text-dim); transition:all .2s ease;
}
.skill-pill:hover{ border-color:var(--violet); color:var(--violet-glow); background:var(--violet-dim); transform:translateY(-2px); }
.skill-pill.core{ border-color:var(--border-strong); color:var(--violet-light); background:var(--violet-dim); }

/* ---------- PORTFOLIO TABS ---------- */
.tabbar{ display:flex; gap:0.125rem; border-bottom:1px solid var(--border); overflow-x:auto; }
.tabbar::-webkit-scrollbar{ display:none; }
.tab{
  font-family:var(--mono); font-size:0.7812rem; color:var(--text-faint);
  padding:0.8125rem 1.125rem; border:1px solid transparent; border-bottom:none;
  border-radius:0.5rem 0.5rem 0 0; cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:0.5rem; transition:all .2s ease;
}
.tab:hover{ color:var(--text-dim); }
.tab.active{
  color:var(--text); background:var(--panel);
  border-color:var(--border); border-bottom:1px solid var(--panel); margin-bottom:-0.0625rem;
}
.tab-dot{ width:0.375rem; height:0.375rem; border-radius:50%; }
.tab-dot.live{ background:var(--live); box-shadow:0 0 6px var(--live); }
.tab-dot.dev{ background:var(--text-faint); }

.tab-panel{ display:none; background:var(--panel); border:1px solid var(--border); border-radius:0 0.75rem 0.75rem 0.75rem; padding:2.125rem; }
.tab-panel.active{ display:grid; grid-template-columns:1fr 1fr; gap:2.25rem; align-items:center; }
@media (max-width:760px){ .tab-panel.active{ grid-template-columns:1fr; } }

.proj-status{
  display:inline-flex; align-items:center; gap:0.4375rem;
  font-family:var(--mono); font-size:0.7188rem; color:var(--live);
  background:var(--live-dim); border:1px solid rgba(61,220,151,0.3);
  padding:0.3125rem 0.6875rem; border-radius:1.25rem; margin-bottom:1rem;
}
.proj-status.dev{ color:var(--violet-light); background:var(--violet-dim); border-color:var(--border); }
.proj-title{ font-family:var(--display); font-size:1.5rem; font-weight:600; margin-bottom:0.75rem; }
.proj-desc{ color:var(--text-dim); font-size:0.9375rem; margin-bottom:1.125rem; }
.proj-meta{ font-family:var(--mono); font-size:0.75rem; color:var(--text-faint); }
.case-link-row{
  font-family:var(--mono); font-size:0.75rem; color:var(--violet-light);
  display:inline-flex; align-items:center; gap:0.375rem; margin-top:0.875rem;
}
.case-link-row svg{ width:0.75rem; height:0.75rem; flex-shrink:0; }
.case-link-row:hover{ text-decoration:underline; }
.proj-visual{
  background:var(--bg-2); border:1px solid var(--border); border-radius:0.625rem;
  height:13.75rem; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; color:var(--border-strong); font-size:1.75rem;
  position:relative; overflow:hidden; letter-spacing:-1px;
}
.proj-visual::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(146,87,255,0.08) 50%, transparent 70%);
  pointer-events:none;
}
.proj-visual img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }

/* ---------- TESTIMONIALS ---------- */
.testimonials-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.25rem; margin-bottom:2.75rem; flex-wrap:wrap; }
.testimonials-head h2{ margin:0; }
.testimonials-summary{
  display:flex; align-items:center; gap:0.875rem;
  background:var(--panel); border:1px solid var(--border); border-radius:0.75rem;
  padding:0.75rem 1.25rem;
}
.ts-score{ font-family:var(--display); font-size:1.75rem; font-weight:700; color:var(--gold); line-height:1; }
.ts-details{ display:flex; flex-direction:column; gap:0.1875rem; }
.ts-stars{ font-family:var(--mono); font-size:0.875rem; color:var(--gold); letter-spacing:2px; }
.ts-count{ font-family:var(--mono); font-size:0.7188rem; color:var(--text-faint); }
@media (max-width:600px){ .testimonials-head{ flex-direction:column; align-items:flex-start; } }

.testimonials-carousel{ position:relative; }
.testimonials-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px) / 3);
  gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:0.25rem; -webkit-overflow-scrolling:touch;
}
.testimonials-track::-webkit-scrollbar{ display:none; }
.testimonials-track{ scrollbar-width:none; }
@media (max-width:900px){ .testimonials-track{ grid-auto-columns:calc((100% - 16px) / 2); } }
@media (max-width:600px){ .testimonials-track{ grid-auto-columns:100%; } }

.tc-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:2.375rem; height:2.375rem; border-radius:50%;
  background:var(--panel); border:1px solid var(--border); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  transition:all .15s ease;
}
.tc-arrow svg{ width:1.125rem; height:1.125rem; }
.tc-arrow:hover{ border-color:var(--violet-strong); color:var(--violet-light); }
.tc-arrow:active{ transform:translateY(-50%) scale(.92); }
.tc-arrow:disabled{ opacity:.35; cursor:default; }
.tc-arrow-prev{ left:-1.1875rem; }
.tc-arrow-next{ right:-1.1875rem; }
@media (max-width:900px){
  .tc-arrow{ width:2rem; height:2rem; }
  .tc-arrow svg{ width:0.9375rem; height:0.9375rem; }
  .tc-arrow-prev{ left:-0.875rem; }
  .tc-arrow-next{ right:-0.875rem; }
}
@media (max-width:640px){ .tc-arrow{ display:none; } }

.testimonials-dots{ display:flex; justify-content:center; gap:0.5rem; margin-top:1.375rem; }
.testimonials-dots .dot{
  width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--border);
  border:none; padding:0; cursor:pointer; transition:all .2s ease;
}
.testimonials-dots .dot.active{ background:var(--violet-strong); width:1.25rem; border-radius:0.25rem; }

.testimonial-card{
  background:var(--panel); border:1px solid var(--border); border-radius:0.75rem;
  padding:1.375rem; display:flex; flex-direction:column; scroll-snap-align:start; min-width:0;
}
.testimonial-quote{ color:var(--text-dim); font-size:0.875rem; line-height:1.65; margin:0 0 1.125rem; flex-grow:1; }
.testimonial-quote::before{ content:'"'; color:var(--violet-light); font-family:var(--mono); margin-right:0.125rem; }
.testimonial-quote::after{ content:'"'; color:var(--violet-light); font-family:var(--mono); margin-left:0.125rem; }
.testimonial-foot{ display:flex; align-items:center; gap:0.75rem; }
.testimonial-avatar{
  width:2.25rem; height:2.25rem; border-radius:50%; flex-shrink:0;
  background:var(--violet-dim); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:0.8125rem; color:var(--violet-light);
}
.testimonial-who{ min-width:0; }
.testimonial-name{ font-size:0.8125rem; font-weight:600; color:var(--text); }
.testimonial-project{ font-family:var(--mono); font-size:0.7188rem; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.testimonial-rating{ font-family:var(--mono); font-size:0.75rem; color:var(--gold); letter-spacing:1px; margin-top:1rem; }
.testimonials-empty{
  grid-column:1/-1; text-align:center; padding:2.5rem 1.25rem;
  font-family:var(--mono); font-size:0.8125rem; color:var(--text-faint);
  border:1px dashed var(--border); border-radius:0.75rem;
}

/* ---------- CONTACT ---------- */
.contact-box{
  background:linear-gradient(160deg, rgba(124,58,237,0.16), rgba(124,58,237,0.02));
  border:1px solid var(--border-strong); border-radius:1.25rem;
  padding:3.75rem 3rem; text-align:center; position:relative; overflow:hidden;
}
.contact-box::before{
  content:''; position:absolute; width:25rem; height:25rem; border-radius:50%;
  background:radial-gradient(circle, rgba(146,87,255,0.25), transparent 70%);
  top:-12.5rem; left:50%; transform:translateX(-50%); filter:blur(10px); pointer-events:none;
}
.contact-box::after{
  content:''; position:absolute; inset:0; opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(146,87,255,0.16), transparent 60%);
  transition:opacity .3s ease; pointer-events:none;
}
.contact-box:hover::after{ opacity:1; }
.contact-box h2{ position:relative; margin-bottom:0.75rem; }
.contact-box p{ position:relative; color:var(--text-dim); max-width:52ch; margin:0 auto 1.75rem; font-size:0.9688rem; }
.contact-links{ position:relative; display:flex; gap:0.875rem; justify-content:center; flex-wrap:wrap; }
.contact-note{ position:relative; font-family:var(--mono); font-size:0.7188rem; color:var(--text-faint); margin-top:1.25rem; }

footer{
  border-top:1px solid var(--border);
  padding:2.125rem 0 3rem;
  font-family:var(--mono); font-size:0.75rem; color:var(--text-faint);
  text-align:center; position:relative; z-index:1;
}
footer a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; }
footer a:hover{ color:var(--violet-light); }

/* ---------- HOSTING MODAL ---------- */
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(11,8,18,0.78); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:1.25rem;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--panel); border:1px solid var(--border); border-radius:0.875rem;
  width:100%; max-width:27.5rem; overflow:hidden; max-height:90vh; overflow-y:auto;
}
.modal.modal-wide{ max-width:51.25rem; }
.modal-wide .modal-body{ padding:1.625rem; }
.modal-wide .section-head{ margin-bottom:1.625rem; }
.modal-wide .hosting-table-wrap{ margin-bottom:1.375rem; }
.modal-head{
  padding:0.8125rem 1.125rem; background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:0.75rem; color:var(--text-dim);
  position:sticky; top:0;
}
.modal-close{ background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:1rem; }
.modal-close:hover{ color:var(--violet-light); }
.modal-body{ padding:1.375rem; display:flex; flex-direction:column; gap:0.75rem; }

/* ---------- HOSTING TABLE / CURRENCY ---------- */
.hosting-table-wrap{
  overflow-x:auto; border:1px solid var(--border); border-radius:0.625rem; margin-bottom:1.75rem;
  background:var(--bg-2);
}
table.hosting-table{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:0.8125rem; min-width:42.5rem; }
.hosting-head-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.25rem; flex-wrap:wrap; }
.currency-switch{
  display:flex; align-items:center; gap:0.125rem;
  background:var(--panel-2); border:1px solid var(--border); border-radius:1.25rem;
  padding:0.1875rem; flex-shrink:0;
}
.currency-switch-label{ font-family:var(--mono); color:var(--text-faint); font-size:0.75rem; padding:0 0.5rem 0 0.375rem; }
.cur-btn{
  font-family:var(--mono); font-size:0.7188rem; color:var(--text-dim);
  background:none; border:none; border-radius:1rem; padding:0.375rem 0.6875rem; cursor:pointer;
  transition:all .15s ease;
}
.cur-btn:hover{ color:var(--text); }
.cur-btn.active{ background:var(--violet); color:#fff; font-weight:700; }
.currency-note{ font-family:var(--mono); font-size:0.7188rem; color:var(--text-faint); margin:0.625rem 0 1.375rem; }
@media (max-width:600px){ .currency-switch{ flex-wrap:wrap; border-radius:0.625rem; } .currency-switch-label{ width:100%; padding:0.25rem 0 0 0.375rem; } }

.hosting-table th, .hosting-table td{ padding:0.8125rem 0.875rem; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.hosting-table th{ background:rgba(255,255,255,0.02); color:var(--text-faint); font-weight:600; font-size:0.6875rem; text-transform:uppercase; letter-spacing:.04em; }
.hosting-table tbody tr:last-child td{ border-bottom:none; }
.hosting-table tbody tr:hover td{ background:var(--violet-dim); }
.hosting-table td.price{ color:var(--violet-glow); font-weight:700; }
.hosting-table .order-link{ color:var(--violet-light); font-size:0.75rem; display:inline-flex; align-items:center; gap:0.25rem; }
.hosting-table .order-link:hover{ text-decoration:underline; }
.hosting-table tr.custom td{ color:var(--text-dim); }

.hosting-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.125rem; margin-bottom:1.125rem; }
@media (max-width:760px){ .hosting-info-grid{ grid-template-columns:1fr; } }
.info-box{ background:var(--bg-2); border:1px solid var(--border); border-radius:0.625rem; padding:1.125rem; }
.info-box h3{ font-family:var(--mono); font-size:0.8125rem; color:var(--violet-light); margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem; }
.info-box h3 svg{ width:0.9375rem; height:0.9375rem; flex-shrink:0; }
.info-box ul{ display:flex; flex-direction:column; gap:0.5rem; font-size:0.8438rem; color:var(--text-dim); }
.info-box li{ padding-left:1rem; position:relative; }
.info-box li::before{ content:'—'; position:absolute; left:0; color:var(--text-faint); }

.rules-box{
  background:rgba(240,98,140,0.08); border:1px solid var(--red); border-radius:0.625rem;
  padding:1.125rem; font-size:0.8125rem; color:var(--text-dim); line-height:1.7;
}
.rules-box .rules-title{
  font-family:var(--mono); font-size:0.8125rem; color:var(--red); margin-bottom:0.625rem;
  display:flex; align-items:center; gap:0.5rem; font-weight:700;
}
.rules-box .rules-title svg{ width:0.9375rem; height:0.9375rem; }
.rules-box strong{ color:var(--text); }
.rules-box .rules-note{ margin-top:0.625rem; color:var(--text); }
/* ---------- CUSTOM ERROR PAGES (404 / 500) ---------- */
.error-page{
  min-height:60vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:4rem 1.75rem;
}
.error-code{
  font-family:var(--mono); font-size:5rem; font-weight:700; line-height:1;
  color:var(--cyan); opacity:0.85; letter-spacing:-0.02em;
}
.error-title{ font-size:1.75rem; margin:1rem 0 0.625rem; }
.error-desc{ color:var(--text-dim); max-width:40ch; margin-bottom:2rem; }