/* ==========================================================================
   Repost / студия Петра Осипова — редизайн
   Подключается после bootstrap.min.css и bootstrap-icons.css
   Акцент — лаймовый #C6FF3D, задан в :root
   ========================================================================== */

:root{
  --white:#FFFFFF;
  --black:#0A0A0C;
  --ink:#101014;
  --ink-inv:#F5F5F5;
  --muted:#6B6B73;
  --muted-inv:#9A9AA4;
  --line:#E5E5E5;
  --line-inv:#24242A;
  --surface:#F4F4F5;
  --font-sans:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:14px;
  --pad-y:clamp(64px,7vw,124px);
  --accent:#C6FF3D;
  --on-accent:#0A0A0C;
  --accent-soft:rgba(198,255,61,.14);
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--muted); }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.05; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
.container{ max-width:1280px; --bs-gutter-x:3rem; }
@media (max-width:575px){ .container{ --bs-gutter-x:2rem; } }

/* ---------- helpers ---------- */
.sec{ padding:var(--pad-y) 0; }
.sec--dark{ background:var(--black); color:var(--ink-inv); }
.sec--dark a{ color:var(--ink-inv); }
.sec--dark a:hover{ color:var(--accent); }
.sec--soft{ background:var(--surface); }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); }
.sec--dark .eyebrow{ color:var(--muted-inv); }
.h-sec{ font-size:clamp(30px,3.6vw,52px); line-height:1.16; }
.h-hero{ font-size:clamp(38px,6vw,84px); letter-spacing:-.035em; line-height:1.3; }
.lead{ font-size:clamp(17px,1.3vw,20px); color:var(--muted); }
.sec--dark .lead{ color:var(--muted-inv); }
.rule{ height:1px; background:var(--line); border:0; margin:0; opacity:1; }
.sec--dark .rule{ background:var(--line-inv); }

.pill-mark{
  background:var(--accent); color:var(--on-accent);
  padding:0 .3em; border-radius:.24em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* tech pills */
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.02em;
  padding:6px 11px; border:1px solid var(--line); border-radius:999px;
  color:var(--ink); white-space:nowrap;
}
.sec--dark .tag{ border-color:var(--line-inv); color:var(--ink-inv); }
.tag--accent{ border-color:var(--accent); color:var(--ink); background:var(--accent-soft); }
.num{ font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.06em; }
.sec--dark .num{ color:var(--muted-inv); }

/* ---------- buttons ---------- */
.btn-r{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:999px; border:1px solid transparent;
  font-size:15px; font-weight:600; letter-spacing:-.01em; cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn-r i{ font-size:17px; }
.btn-dark{ background:var(--black); color:var(--ink-inv); }
.btn-dark:hover{ background:var(--accent); color:var(--on-accent); }
.btn-accent{ background:var(--accent); color:var(--on-accent); }
.btn-accent:hover{ background:var(--white); color:var(--ink); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }
.sec--dark .btn-ghost{ border-color:var(--line-inv); color:var(--ink-inv); }
.sec--dark .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm{ padding:11px 20px; font-size:14px; }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.head-row{ display:flex; align-items:center; gap:28px; min-height:74px; }
.brand{ font-weight:700; font-size:20px; letter-spacing:-.03em; display:flex; align-items:center; gap:9px; }
.nav-burger{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  background:transparent; color:var(--ink); font-size:22px; line-height:1; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.nav-mob{ display:grid; gap:2px; padding:8px 0 22px; }
.nav-mob a{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 0; font-size:18px; font-weight:500; border-bottom:1px solid var(--line);
}
.nav-mob a i{ color:var(--muted); font-size:16px; }
.brand b{ width:11px; height:11px; border-radius:50%; background:var(--accent); }
.nav-main{ display:flex; gap:28px; margin-left:auto; }
.nav-main a{ font-size:15px; font-weight:500; color:var(--muted); }
.nav-main a:hover{ color:var(--ink); }

/* ---------- order modal ---------- */
.order-modal{ border-radius:20px; border:none; background:var(--black); color:#fff; padding:8px; }
.order-modal__title{ font-size:22px; }
.order-modal__hint{ color:rgba(255,255,255,.55); font-size:15px; margin-bottom:28px; }
.order-modal__row{
  display:flex; align-items:center; gap:14px;
  padding:16px 0; border-top:1px solid rgba(255,255,255,.1);
}
.order-modal__icon{
  flex:0 0 44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.order-modal__icon i{ font-size:20px; color:var(--accent); }
.order-modal__label{ font-size:13px; color:rgba(255,255,255,.45); margin-bottom:2px; }
.order-modal__phone{ font-size:17px; font-weight:600; color:#fff; text-decoration:none; }
.order-modal__link-row{
  padding:12px 0; border-top:1px solid rgba(255,255,255,.1);
}
.order-modal__link-row--last{ border-bottom:1px solid rgba(255,255,255,.1); }
.order-modal__link{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.order-modal__icon--wa{ background:#25D366; }
.order-modal__icon--tg{ background:#229ED9; }
.order-modal__icon--wa i,
.order-modal__icon--tg i{ font-size:22px; color:#fff; }
.order-modal__service-label{ font-size:13px; color:rgba(255,255,255,.45); margin-bottom:2px; }
.order-modal__service-name{ font-size:16px; font-weight:600; color:#fff; }
.order-modal__chevron{ color:rgba(255,255,255,.3); font-size:18px; margin-left:auto; }

/* ---------- logos (карточка проекта) ---------- */
.logo-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.logo-tile{
  border:1px solid var(--line-inv); border-radius:12px; padding:16px;
  display:flex; flex-direction:column; align-items:center; gap:12px; background:#121218;
}
.logo-tile image-slot{ width:100%; height:84px; }
.logo-tile span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-inv); }

/* ---------- hero ---------- */
.hero{ padding:clamp(48px,6vw,96px) 0 clamp(40px,5vw,72px); }
.hero .h-hero{ max-width:16ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-lead{ max-width:56ch; }
.hero-aside{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column; gap:18px;
}
.hero-aside dt{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hero-aside dd{ margin:2px 0 0; font-size:16px; font-weight:500; }

/* ---------- stats ---------- */
.stat{ border-top:1px solid var(--line-inv); padding-top:22px; }
.stat i{ font-size:22px; color:var(--accent); }
.stat-n{ font-size:clamp(40px,4.6vw,64px); font-weight:600; color:var(--accent); letter-spacing:-.04em; line-height:1; margin:14px 0 6px; }
.stat-l{ color:var(--muted-inv); font-size:15px; }

/* ---------- service cards ---------- */
.card-r{
  border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  height:100%; display:flex; flex-direction:column; gap:12px;
  transition:border-color .18s ease, transform .18s ease;
}
.card-r:hover{ border-color:var(--ink); }
.card-r i{ font-size:26px; }
.card-r h3{ font-size:21px; }
.card-r .lead{ font-size:15px; }

/* ---------- works list (главная) ---------- */
.works-list{ display:flex; flex-direction:column; gap:2px; }
.work-row{
  display:flex; gap:clamp(24px,4vw,56px); align-items:center;
  padding:clamp(36px,5vw,64px) 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit;
}
.work-row__photo{
  flex:0 0 50%; border-radius:var(--radius); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); position:relative;
}
.work-row__photo img{ width:100%; height:auto; display:block; }
.work-row__placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.work-row__body{ flex:1; min-width:0; }
.work-row .work-title{ font-size:clamp(20px,2.2vw,30px); }
.work-row .work-desc{ max-width:60ch; }
.work-row__arrow{
  flex:0 0 auto; width:44px; height:44px;
  border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, border-color .18s;
}
.work-row__arrow i{ font-size:18px; }
.works-end-rule{ border-top:1px solid var(--line); }
.works-empty{ padding:40px 0; }

/* ---------- portfolio grid ---------- */
.work{ display:block; height:100%; }
.work-thumb{
  position:relative; aspect-ratio:16/11; border-radius:var(--radius); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.sec--dark .work-thumb{ background:#14141A; border-color:var(--line-inv); }
.work-thumb span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.work-thumb::after{
  content:"\F1C5"; font-family:"bootstrap-icons"; position:absolute; inset:auto auto 12px 14px;
  font-size:16px; color:var(--muted); opacity:.5;
}
.work:hover .work-thumb{ border-color:var(--ink); }
.work-meta{ display:flex; align-items:baseline; gap:10px; margin-top:16px; }
.work-cat{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.work-title{ font-size:20px; font-weight:600; margin-top:4px; }
.work:hover .work-title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.work-desc{ color:var(--muted); font-size:15px; margin-top:6px; }
.work .tags{ margin-top:12px; }

.filter{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-pill{
  border-radius:999px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- portfolio list page ---------- */
.portfolio-hero{ max-width:22ch; }
.portfolio-lead{ max-width:60ch; }

/* ---------- portfolio detail ---------- */
.case-img{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.case-img img{ width:100%; display:block; }
.case-body{ font-size:clamp(17px,1.4vw,20px); line-height:1.65; color:var(--ink); }
.gallery-item{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.gallery-item img{ width:100%; display:block; }

/* ---------- about ---------- */
.photo-slot{
  aspect-ratio:4/5; border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  text-align:center; padding:20px; filter:grayscale(1);
}

/* ---------- accordions (bootstrap override) ---------- */
.acc .accordion-item{ background:transparent; border:0; border-top:1px solid var(--line); }
.acc .accordion-item:last-child{ border-bottom:1px solid var(--line); }
.acc .accordion-button{
  background:transparent; color:var(--ink); box-shadow:none;
  padding:26px 0; font-family:inherit; font-size:clamp(19px,1.7vw,24px); font-weight:600;
  letter-spacing:-.02em; gap:18px; align-items:flex-start;
}
.acc .accordion-button:focus{ box-shadow:none; }
.acc .accordion-button::after{
  content:"\F64D"; font-family:"bootstrap-icons"; background:none; width:auto; height:auto;
  font-size:18px; font-weight:400; transition:transform .22s ease; margin-left:auto;
}
.acc .accordion-button:not(.collapsed)::after{ transform:rotate(45deg); }
.acc .accordion-button:not(.collapsed){ color:var(--ink); }
.acc .accordion-body{ padding:0 0 28px; color:var(--muted); max-width:70ch; }
.acc-n{ font-family:var(--font-mono); font-size:13px; color:var(--muted); padding-top:.35em; min-width:2.4em; }
.acc .accordion-button:not(.collapsed) .acc-n{ color:var(--accent); }

.acc--dark .accordion-item{ border-top-color:var(--line-inv); }
.acc--dark .accordion-item:last-child{ border-bottom-color:var(--line-inv); }
.acc--dark .accordion-button{ color:var(--ink-inv); }
.acc--dark .accordion-button:not(.collapsed){ color:var(--accent); }
.acc--dark .accordion-body{ color:var(--muted-inv); }
.acc--dark .acc-n{ color:var(--muted-inv); }

/* price rows */
.price .accordion-button{ padding:28px 0; }
.price-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 24px; width:100%; }
.price-name{ font-size:clamp(19px,1.7vw,24px); font-weight:600; letter-spacing:-.02em; }
.price-note{ color:var(--muted); font-size:15px; font-weight:400; flex:1 1 260px; }
.price-val{ font-family:var(--font-mono); font-size:15px; font-weight:500; white-space:nowrap; color:var(--ink); }
.price .accordion-body ul{ display:grid; gap:8px; }
.price .accordion-body li{ display:flex; gap:10px; }
.price .accordion-body li i{ color:var(--accent); font-size:14px; padding-top:.35em; }

/* consult block */
.consult{ background:var(--surface); border-radius:var(--radius); padding:clamp(26px,3vw,44px); }

/* reviews */
.review{ border:1px solid var(--line); border-radius:var(--radius); padding:26px; height:100%; }
.stars{ color:var(--accent); font-size:14px; letter-spacing:2px; }
.review p{ margin:14px 0 20px; font-size:16px; }
.review footer{ font-size:14px; color:var(--muted); }
.review footer b{ display:block; color:var(--ink); font-weight:600; font-size:15px; }

/* biz tools (карточка проекта) */
.tool{ display:flex; gap:14px; padding:20px 0; border-top:1px solid var(--line-inv); }
.tool i{ color:var(--accent); font-size:20px; }
.tool h4{ font-size:17px; margin-bottom:4px; }
.tool p{ color:var(--muted-inv); font-size:15px; }

/* ---------- form ---------- */
.f-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px; }
.f-input{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:10px;
  background:var(--white); font-family:inherit; font-size:16px; color:var(--ink);
}
.f-input:focus{ outline:none; border-color:var(--ink); }
.choice{ display:flex; flex-wrap:wrap; gap:8px; }
.choice label{
  font-family:var(--font-mono); font-size:12px; padding:9px 15px;
  border:1px solid var(--line); border-radius:999px; cursor:pointer;
}
.choice input{ display:none; }
.choice input:checked + span{ color:var(--on-accent); }
.choice label:has(input:checked){ background:var(--accent); border-color:var(--accent); }
.captcha-slot{
  height:46px; width:160px; border:1px dashed var(--line); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
}

/* ---------- footer ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:flex; align-items:center; gap:9px; padding:13px 18px;
  border:1px solid var(--line-inv); border-radius:12px; font-size:15px; font-weight:500;
}
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.footer-lead{ max-width:44ch; }
.foot-mark{
  font-weight:700; letter-spacing:-.05em; line-height:.78;
  font-size:clamp(80px,19vw,280px); color:#15151B;
  margin:clamp(30px,5vw,60px) 0 -.16em; user-select:none; overflow:hidden;
}
.foot-mark span{ color:var(--accent); }
.foot-legal{ display:flex; flex-wrap:wrap; gap:8px 26px; font-size:14px; color:var(--muted-inv); }

@media (max-width:991px){
  .nav-main{ display:none; }
  body{ font-size:16px; }
}
@media (max-width:575px){
  .head-row{ gap:12px; min-height:66px; }
  .btn-sm{ padding:10px 15px; font-size:13px; }
  .brand{ font-size:18px; }
  .hero{ padding-top:32px; }
  .stat{ padding-top:16px; }
  .card-r,.review,.hero-aside{ padding:22px; }
  .acc .accordion-button{ padding:20px 0; }
  .price .accordion-button{ padding:22px 0; }
  .acc .accordion-body{ padding-bottom:22px; }
  .chip{ flex:1 1 calc(50% - 10px); }
  .foot-mark{ font-size:clamp(66px,24vw,120px); }
}

@media(max-width:979px){
  .h-hero{ font-size:clamp(28px,8vw,38px); }
  .work-row{ flex-direction:column; gap:20px; padding:28px 0; }
  .work-row__photo{ flex:none; width:100%; }
}

.work-integ{ display:grid; gap:0; }
.work-integ__row{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid #E5E5E5; }
.work-integ__icon{ flex:0 0 36px; height:36px; border:1px solid #E5E5E5; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:4px; }
.work-integ__icon img{ width:100%; height:100%; object-fit:contain; }
.work-integ__name{ font-size:13px; font-weight:600; color:var(--ink); margin-bottom:1px; }
.work-integ__desc{ font-size:12px; color:var(--muted); line-height:1.4; }
.work-lid{ font-size:15px; color:var(--muted); line-height:1.5; max-width:52ch; }

.case-img a.glightbox,
.gallery-item a.glightbox{ display:block; cursor:zoom-in; }
.case-img a.glightbox img,
.gallery-item a.glightbox img{ transition:opacity .2s; }
.case-img a.glightbox:hover img,
.gallery-item a.glightbox:hover img{ opacity:.9; }