/* ============================================================
   WB / ОБЗОР — информационный проект о компании Wildberries
   Стилистика: посылка / складская этикетка / трек-номер
   Палитра: яркая, "сочная" — фиолет + маджента + лайм на тёплом фоне
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root{
  --kraft:        #ffe8c2;
  --kraft-dark:   #ffd68f;
  --kraft-deep:   #f6b93b;
  --paper:        #fffaf0;
  --ink:          #1c1030;
  --ink-soft:     #4a3a63;

  --violet:       #7b2ff7;
  --violet-deep:  #4e1aa8;
  --magenta:      #ff2e93;
  --magenta-deep: #c8106a;
  --red:          #ff4d4d;
  --green:        #17c964;
  --green-deep:   #0e9a4c;
  --yellow:       #ffb020;

  --line:         rgba(28,16,48,.16);

  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body:    'PT Serif', Georgia, serif;
  --f-mono:    'Space Mono', 'Courier New', monospace;

  --radius: 4px;
  --max: 1080px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:
    radial-gradient(circle at 8% -6%, rgba(255,46,147,.22), transparent 38%),
    radial-gradient(circle at 96% 8%, rgba(123,47,247,.22), transparent 42%),
    radial-gradient(circle at 50% 120%, rgba(255,176,32,.25), transparent 45%),
    var(--kraft);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* subtle paper fiber texture, no external image */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.4;
  background-image:
    repeating-linear-gradient(115deg, rgba(28,16,48,.03) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(25deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px);
  z-index:0;
}

a{ color:var(--magenta-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--violet);
  outline-offset:2px;
}

img{ max-width:100%; display:block; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 22px; position:relative; z-index:1; }

h1,h2,h3{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.02em; color:var(--ink); margin:0 0 .5em; }
h1{
  font-size:clamp(2.1rem, 5.2vw, 3.6rem); font-weight:700; line-height:1.03;
  background:linear-gradient(100deg, var(--violet-deep) 0%, var(--magenta) 55%, var(--magenta-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h2{ font-size:clamp(1.4rem, 3vw, 1.95rem); font-weight:600; }
h2::before{ content:"● "; color:var(--magenta); font-size:.6em; vertical-align:.15em; }
h3{ font-size:1.1rem; font-weight:600; letter-spacing:.03em; }
p{ margin:0 0 1.1em; }
strong{ color:var(--violet-deep); }

.eyebrow{
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:var(--magenta);
  padding:4px 10px;
  border-radius:20px;
  display:inline-flex; align-items:center; gap:.5em;
  box-shadow:2px 2px 0 var(--violet-deep);
}
.eyebrow::before{ content:"//"; opacity:.8; }

/* ---------- TOP TAPE NAV ---------- */
.tape-nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(100deg, var(--violet-deep) 0%, var(--violet) 45%, var(--magenta-deep) 100%);
  background-size:180% 180%;
  border-bottom:3px solid var(--yellow);
  box-shadow:0 3px 14px rgba(28,16,48,.28);
}
.tape-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; gap:16px; }
.brand{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  color:#fff; text-decoration:none; font-size:1.05rem; letter-spacing:.04em;
  display:flex; flex-direction:column; line-height:1.15;
}
.brand small{ font-family:var(--f-mono); font-weight:400; font-size:.63rem; letter-spacing:.1em; color:var(--yellow); text-transform:none; }

.nav-toggle{
  display:none; background:var(--yellow); border:2px solid var(--ink); color:var(--ink);
  font-family:var(--f-mono); font-weight:700; font-size:.8rem; padding:8px 12px; cursor:pointer; border-radius:var(--radius);
}
.nav-links{ display:flex; flex-wrap:wrap; gap:2px; list-style:none; margin:0; padding:0; font-family:var(--f-mono); }
.nav-links a{
  color:rgba(255,255,255,.85); text-decoration:none; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 12px; border-radius:var(--radius); transition:background .15s, color .15s;
  border-bottom:2px solid transparent;
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.14); }
.nav-links a[aria-current="page"]{ color:var(--ink); background:var(--yellow); border-bottom-color:var(--ink); font-weight:700; }

@media (max-width:840px){
  .nav-toggle{ display:inline-block; }
  .nav-links{
    display:none; flex-direction:column; width:100%;
    padding-top:10px; margin-top:10px; border-top:1px dashed rgba(255,255,255,.35);
  }
  .nav-links.open{ display:flex; }
  .tape-nav .wrap{ flex-wrap:wrap; }
}

/* ---------- SHIPPING LABEL (signature component) ---------- */
.ship-label{
  margin:34px 0 40px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:18px 20px 16px;
  position:relative;
  box-shadow:6px 6px 0 var(--violet), 6px 6px 0 1px var(--ink);
}
.ship-label::before, .ship-label::after{
  content:""; position:absolute; top:-9px; width:16px; height:16px;
  background:radial-gradient(circle, var(--kraft) 55%, transparent 58%);
  border-radius:50%;
}
.ship-label::before{ left:26px; } .ship-label::after{ right:26px; }
.ship-label__row{
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:baseline;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px dashed var(--line); padding-bottom:10px; margin-bottom:10px;
}
.ship-label__route{
  font-family:var(--f-mono); font-weight:700; font-size:.85rem; letter-spacing:.04em; color:var(--violet-deep);
  margin-bottom:12px; word-break:break-word;
}
.ship-label__stamp{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-weight:700; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--red); border:2px solid var(--ink); border-radius:40px; padding:5px 12px;
  transform:rotate(-2deg);
}
.barcode{ display:block; margin:10px 0 12px; height:34px; width:100%; max-width:260px; }
.barcode rect{ fill:var(--violet-deep); }

/* ---------- HERO ---------- */
.hero{ padding:8px 0 10px; }
.hero__lede{ font-size:1.15rem; max-width:62ch; color:var(--ink-soft); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }

.btn{
  font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem;
  text-decoration:none; padding:13px 20px; border-radius:var(--radius); display:inline-block;
  border:2px solid var(--ink); transition:transform .12s ease, box-shadow .12s ease;
}
.btn--primary{
  background:linear-gradient(100deg, var(--magenta), var(--violet));
  color:#fff; border-color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.btn--primary:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn--ghost{ background:var(--yellow); color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.btn--ghost:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }

/* ---------- STAT TAGS ---------- */
.tag-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px;
  margin:30px 0;
}
.tag{
  background:var(--paper); border:2px solid var(--ink); border-radius:var(--radius);
  padding:16px 16px 14px; position:relative; box-shadow:4px 4px 0 var(--violet);
}
.tag:nth-of-type(2n){ box-shadow:4px 4px 0 var(--magenta); }
.tag:nth-of-type(3n){ box-shadow:4px 4px 0 var(--yellow); }
.tag:nth-of-type(4n){ box-shadow:4px 4px 0 var(--green); }
.tag::before{
  content:""; position:absolute; left:-7px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; background:var(--kraft); border-radius:50%; border-right:1.5px solid var(--ink);
}
.tag__num{ font-family:var(--f-display); font-weight:700; font-size:1.9rem; color:var(--violet-deep); line-height:1; }
.tag__num small{ font-size:1rem; font-family:var(--f-mono); }
.tag__label{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }
.tag--up .tag__num{ color:var(--green-deep); }

/* ---------- CARD GRID (nav cards / sections) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin:26px 0 10px; }
.card{
  background:var(--paper); border:2px solid var(--ink); border-radius:var(--radius);
  padding:20px; text-decoration:none; color:var(--ink); display:block;
  box-shadow:5px 5px 0 var(--ink); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  border-top:6px solid var(--violet);
}
.card:nth-of-type(2n){ border-top-color:var(--magenta); }
.card:nth-of-type(3n){ border-top-color:var(--yellow); }
.card:nth-of-type(4n){ border-top-color:var(--green); }
.card:nth-of-type(5n){ border-top-color:var(--red); }
.card:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); }
.card__k{ font-family:var(--f-mono); font-size:.68rem; color:var(--magenta-deep); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.card h3{ margin:6px 0 8px; -webkit-text-fill-color:var(--ink); background:none; }
.card p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* ---------- SECTION ---------- */
.section{ padding:36px 0; border-top:2px dashed var(--line); }
.section:first-of-type{ border-top:none; }
.section--tight{ padding:22px 0; }
.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; }
@media (max-width:760px){ .two-col{ grid-template-columns:1fr; } }

.timeline{ list-style:none; margin:0; padding:0; border-left:4px solid var(--violet); }
.timeline li{ position:relative; padding:2px 0 22px 24px; }
.timeline li::before{
  content:""; position:absolute; left:-11px; top:5px; width:16px; height:16px; border-radius:50%;
  background:var(--magenta); border:3px solid var(--ink);
}
.timeline li:nth-child(2n)::before{ background:var(--yellow); }
.timeline li:nth-child(3n)::before{ background:var(--green); }
.timeline time{ font-family:var(--f-mono); font-weight:700; font-size:.78rem; color:var(--violet-deep); letter-spacing:.05em; }
.timeline h3{ margin:2px 0 4px; }

.quote-block{
  font-family:var(--f-display); font-size:1.35rem; line-height:1.35; color:var(--ink);
  border-left:5px solid var(--magenta); background:rgba(255,46,147,.07);
  padding:12px 18px; margin:22px 0; text-transform:none; border-radius:0 var(--radius) var(--radius) 0;
}

table.data-table{ width:100%; border-collapse:collapse; font-size:.92rem; margin:14px 0 24px; background:var(--paper); border:2px solid var(--ink); }
.data-table th, .data-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
.data-table th{ font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#fff; background:var(--violet-deep); }
.data-table tbody tr:nth-child(even){ background:rgba(123,47,247,.05); }

.note-box{
  background:linear-gradient(135deg, rgba(255,176,32,.16), rgba(255,46,147,.1));
  border:2px dashed var(--violet); border-radius:var(--radius);
  padding:16px 18px; font-size:.92rem; color:var(--ink-soft); margin:22px 0;
}
.note-box strong{ color:var(--magenta-deep); }

.faq-item{ border-bottom:1px solid var(--line); padding:16px 0; }
.faq-item summary{ cursor:pointer; font-family:var(--f-display); font-weight:600; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; gap:14px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--f-mono); font-weight:700; color:#fff; background:var(--magenta); border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.faq-item[open] summary::after{ content:"−"; background:var(--violet); }
.faq-item p{ margin-top:10px; color:var(--ink-soft); }

.job-card{ border:2px solid var(--ink); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; background:var(--paper); border-left:6px solid var(--green); }
.job-card:nth-of-type(2n){ border-left-color:var(--magenta); }
.job-card:nth-of-type(3n){ border-left-color:var(--violet); }
.job-card__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:baseline; }
.job-card__salary{ font-family:var(--f-mono); font-weight:700; font-size:.85rem; color:var(--green-deep); }
.job-card ul{ margin:8px 0 0; padding-left:20px; color:var(--ink-soft); font-size:.92rem; }

/* ---------- FOOTER: return receipt ---------- */
.receipt-footer{
  margin-top:60px; background:var(--ink); color:var(--paper);
  border-top:6px solid var(--magenta);
  position:relative;
}
.receipt-footer::before{
  content:""; position:absolute; top:-9px; left:0; right:0; height:18px;
  background-image:radial-gradient(circle, var(--kraft) 0 5px, transparent 6px);
  background-size:24px 18px; background-repeat:repeat-x; background-position:top center;
}
.receipt-footer .wrap{ padding:40px 22px 26px; }
.receipt-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px; }
@media (max-width:760px){ .receipt-grid{ grid-template-columns:1fr; } }
.receipt-footer h4{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); margin:0 0 12px; }
.receipt-footer ul{ list-style:none; margin:0; padding:0; }
.receipt-footer li{ margin-bottom:8px; }
.receipt-footer a{ color:var(--paper); text-decoration:none; font-size:.92rem; opacity:.88; }
.receipt-footer a:hover{ opacity:1; text-decoration:underline; color:var(--magenta); }
.receipt-footer p{ color:rgba(255,250,240,.65); font-size:.85rem; }
.disclaimer{
  margin-top:26px; padding-top:18px; border-top:1px dashed rgba(255,250,240,.25);
  font-family:var(--f-mono); font-size:.72rem; color:rgba(255,250,240,.55); line-height:1.7;
}

/* ---------- FEEDBACK FORM ---------- */
.feedback-form{
  max-width:520px; margin:22px 0 6px; display:flex; flex-direction:column; gap:16px;
}
.ffield{ display:flex; flex-direction:column; gap:6px; }
.ffield label{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.ffield input, .ffield textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:var(--radius);
  padding:11px 12px; resize:vertical;
}
.ffield input:focus, .ffield textarea:focus{ outline:3px solid var(--violet); outline-offset:1px; }
.ffield input:invalid:not(:placeholder-shown), .ffield textarea:invalid:not(:placeholder-shown){ border-color:var(--red); }
.feedback-form .btn{ align-self:flex-start; cursor:pointer; }
.ffield__note{ font-family:var(--f-mono); font-size:.82rem; margin:0; min-height:1.4em; }
.ffield__note[data-state="ok"]{ color:var(--green-deep); font-weight:700; }
.ffield__note[data-state="err"]{ color:var(--red); font-weight:700; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--yellow); color:var(--ink); padding:10px 16px; z-index:100; font-weight:700;
}
.skip-link:focus{ left:12px; top:12px; }