/* ===== ABOUT PAGE — SECTION A1: ORIGIN & PROMISE ===== */
.nowrap { white-space: nowrap; }

/* Layout: copy first (mobile), image second. Desktop — 2 колонки. */
.about-hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas: "copy media";
  gap: clamp(20px, 3.5vw, 32px);
  align-items: center;
}
.about-copy  { grid-area: copy; }
.about-media { grid-area: media; margin: 0; text-align: center; position: relative; }

@media (max-width: 767px){
  .about-hero-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "media";
  }
}

.eyebrow{
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #8a4b00;
}

.about-title{
  margin: 6px 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  color: #7b3200;
  position: relative;
}

/* Unique animation #1: underline sweep on reveal */
.about-title .underline{
  position: absolute; left: 0; bottom: -6px; height: 3px; width: 100%;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  transform-origin: left center; transform: scaleX(0);
}
.about-hero.is-visible .about-title .underline{
  animation: underlineGrow .55s cubic-bezier(.22,.95,.5,1) .08s forwards;
}
@keyframes underlineGrow{ to { transform: scaleX(1); } }

.about-text{ color: #3a2b14; max-width: 62ch; margin: 0 0 10px; }

.about-promises{
  margin: 0 0 12px; padding-left: 18px; color: #3a2b14;
}
.about-promises li{ margin: 6px 0; opacity: 0; transform: translateY(6px); }

/* Unique animation #2: staggered promise items */
.about-hero.is-visible .about-promises li{
  animation: riseIn .35s ease forwards;
}
.about-hero.is-visible .about-promises li:nth-child(1){ animation-delay: .06s; }
.about-hero.is-visible .about-promises li:nth-child(2){ animation-delay: .14s; }
.about-hero.is-visible .about-promises li:nth-child(3){ animation-delay: .22s; }
@keyframes riseIn{
  to { opacity: 1; transform: translateY(0); }
}

.about-ctas{ display: flex; gap: 12px; flex-wrap: wrap; }

/* Media block */
.about-cap{ font-size: 12px; color: #6b4a27; margin-top: 6px; }

/* Unique animation #3: orbiting dots + badge pop-in */
.badge{
  transform: scale(.98) translateY(6px);
  opacity: 0;
  will-change: transform, opacity;
}
.about-hero.is-visible .badge{
  animation: badgePop .45s ease-out .05s forwards;
}
@keyframes badgePop{
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Dots orbit */
.orbit{
  position: absolute; inset: 0; pointer-events: none;
}
.dot{
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFD37A, #FFAF17 60%, #FF8C00);
  opacity: 0; transform: scale(.6);
}
.d1{ left: 10%; top: 18%; }
.d2{ left: 50%; top: 6%; }
.d3{ right: 8%; top: 22%; }

/* on reveal dots fade in, then slow orbit using subtle translate/rotate */
.about-hero.is-visible .dot{ animation: dotIn .3s ease forwards; }
.about-hero.is-visible .d1{ animation-delay: .12s; }
.about-hero.is-visible .d2{ animation-delay: .2s; }
.about-hero.is-visible .d3{ animation-delay: .28s; }

@keyframes dotIn{ to { opacity: .7; transform: scale(1); } }

/* gentle continuous drift (performance-friendly) */
@keyframes driftSmall{
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3px, -2px) scale(1); }
  100% { transform: translate(0, 0) scale(1); }
}
.about-hero.is-visible .d1,
.about-hero.is-visible .d2,
.about-hero.is-visible .d3{ animation: dotIn .3s ease forwards, driftSmall 6s ease-in-out .5s infinite; }

/* Prefers-reduced-motion: отключаем непрерывный дрейф */
@media (prefers-reduced-motion: reduce){
  .about-hero.is-visible .d1,
  .about-hero.is-visible .d2,
  .about-hero.is-visible .d3{ animation: dotIn .3s ease forwards; }
}
/* ====== A2: DESIGN PILLARS (unique animations) ====== */
.pillars-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.pillars-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.pillars-intro { color: #3a2b14; max-width: 65ch; }

.pillars-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
@media (max-width: 1199px){ .pillars-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .pillars-grid{ grid-template-columns: 1fr; } }

.card{
  position: relative;
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  will-change: transform;
}
.card:hover, .card:focus-within{
  transform: translateY(-4px) rotate(-.25deg);
  box-shadow: 0 12px 28px rgba(255,166,0,.25);
  border-color: rgba(255,166,0,.45);
}

.pillar-fig{ margin: 0 0 10px; text-align: center; }
.pillar-cap{ font-size: 12px; color: #6b4a27; margin-top: 6px; }
.pillar-sub{ margin: 2px 0 8px; color: #8a3700; font-size: clamp(18px, 2.2vw, 22px); }
.pillar-text{ color: #3a2b14; margin: 0; }

/* --- Unique #1: "corner-peel" — уголок отгибается при появлении --- */
.pillar::after{
  content:"";
  position:absolute; top:0; right:0;
  width: 34px; height: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,0)) border-box,
    linear-gradient(135deg, #FFB200, #FF8C00) border-box;
  border: 10px solid transparent;
  border-left: none; border-bottom: none;
  border-top-right-radius: 16px;
  transform-origin: 100% 0%;
  transform: rotateX(90deg);
  opacity: 0;
}
.pillars.is-visible .pillar::after{
  animation: peelIn .6s cubic-bezier(.22,.95,.5,1) .08s forwards;
}
@keyframes peelIn{
  0%   { transform: rotateX(90deg); opacity: 0; }
  60%  { transform: rotateX(-8deg); opacity: 1; }
  100% { transform: rotateX(0deg);  opacity: 1; }
}

/* --- Unique #2: "icon-hop" — иконка мягко подпрыгивает при появлении --- */
.icon{ will-change: transform; transform-origin: 50% 80%; }
.pillars.is-visible .pillar:nth-child(1) .icon{ animation: iconHop .65s ease-out .05s 1 both; }
.pillars.is-visible .pillar:nth-child(2) .icon{ animation: iconHop .65s ease-out .12s 1 both; }
.pillars.is-visible .pillar:nth-child(3) .icon{ animation: iconHop .65s ease-out .19s 1 both; }
.pillars.is-visible .pillar:nth-child(4) .icon{ animation: iconHop .65s ease-out .26s 1 both; }

@keyframes iconHop{
  0%   { transform: translateY(8px) scale(.98); opacity: .0; }
  40%  { transform: translateY(-4px) scale(1.02); opacity: 1; }
  70%  { transform: translateY(2px)  scale(1.0); }
  100% { transform: translateY(0)    scale(1.0); }
}

/* --- Unique #3: "rail-progress" — прожигающаяся линия и пинги точек --- */
.pillars-rail{
  position: relative; height: 8px; border-radius: 999px;
  background: #ffe8b5; overflow: hidden; margin-top: 4px;
}
.rail-fill{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #FFB200, #FF8C00);
  transform: scaleX(0); transform-origin: left center;
}
.rail-dot{
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #FF8C00; transform: translateY(-50%);
}
.rail-dot.d1{ left: 7%; } .rail-dot.d2{ left: 35%; } .rail-dot.d3{ left: 65%; } .rail-dot.d4{ left: 93%; }

@keyframes fillRail{ to { transform: scaleX(1); } }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(255,140,0,.45); }
  100%{ box-shadow: 0 0 0 14px rgba(255,140,0,0); }
}
.pillars.is-visible .rail-fill{ animation: fillRail .9s cubic-bezier(.22,.95,.5,1) .12s forwards; }
.pillars.is-visible .rail-dot.d1{ animation: ping 1s ease-out .18s 1 both; }
.pillars.is-visible .rail-dot.d2{ animation: ping 1s ease-out .36s 1 both; }
.pillars.is-visible .rail-dot.d3{ animation: ping 1s ease-out .54s 1 both; }
.pillars.is-visible .rail-dot.d4{ animation: ping 1s ease-out .72s 1 both; }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .pillar::after { animation: none !important; opacity: 1; transform: none; }
  .icon { animation: none !important; opacity: 1; transform: none; }
  .rail-fill { transform: none !important; }
  .rail-dot { box-shadow: none !important; }
}
/* ====== A3: WORLD & ROUTES ====== */
.world-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.world-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.world-intro { color: #3a2b14; max-width: 65ch; }

.world-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
@media (max-width: 991px){ .world-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px){ .world-grid{ grid-template-columns: 1fr; } }

.world-card{
  position: relative;
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  /* Unique: lane-shift (въезд при появлении) */
  transform: translateX(-10px);
  opacity: 0;
  transition: transform .55s cubic-bezier(.22,.95,.5,1), opacity .55s ease, box-shadow .25s ease, border-color .2s ease;
}
.world.is-visible .world-card{
  transform: translateX(0);
  opacity: 1;
}
.world-card:hover, .world-card:focus-within{
  box-shadow: 0 12px 28px rgba(255,166,0,.25);
  border-color: rgba(255,166,0,.45);
}

.world-fig{ margin: 0 0 10px; text-align: center; position: relative; overflow: hidden; border-radius: 12px; }
.world-cap{ font-size: 12px; color: #6b4a27; margin-top: 6px; }
.world-sub{ margin: 2px 0 8px; color: #8a3700; font-size: clamp(18px, 2.2vw, 22px); }
.world-text{ color: #3a2b14; margin: 0; }

/* Unique #1: glow-trail — «световая дорожка» скользит по карточке при reveal */
.world-card.glow::after{
  content: "";
  position: absolute; left: -40%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.35) 50%,
                                      rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  opacity: 0; pointer-events: none;
}
@keyframes trail { 0%{left:-40%; opacity:0;} 12%{opacity:.6;} 100%{left:120%; opacity:0;} }
.world.is-visible .card-1.glow::after{ animation: trail .9s ease-out .10s 1 both; }
.world.is-visible .card-2.glow::after{ animation: trail .9s ease-out .26s 1 both; }
.world.is-visible .card-3.glow::after{ animation: trail .9s ease-out .42s 1 both; }

/* Unique #2: stripe-slide — тонкие бегущие полосы внутри figure */
.stripe-slide::before,
.stripe-slide::after{
  content: ""; position: absolute; left: -20%; right: -20%;
  height: 2px; background: linear-gradient(90deg, rgba(255,140,0,0), rgba(255,140,0,.35), rgba(255,140,0,0));
  transform: translateX(-12%); opacity: 0; pointer-events: none;
}
.stripe-slide::before{ top: 22%; }
.stripe-slide::after { top: 76%; }
@keyframes stripeMove {
  0% { transform: translateX(-12%); opacity: 0; }
  30%{ opacity: .8; }
  100%{ transform: translateX(12%); opacity: 0; }
}
.world.is-visible .card-1 .stripe-slide::before{ animation: stripeMove .9s ease-out .12s 1 both; }
.world.is-visible .card-1 .stripe-slide::after { animation: stripeMove .9s ease-out .24s 1 both; }
.world.is-visible .card-2 .stripe-slide::before{ animation: stripeMove .9s ease-out .28s 1 both; }
.world.is-visible .card-2 .stripe-slide::after { animation: stripeMove .9s ease-out .40s 1 both; }
.world.is-visible .card-3 .stripe-slide::before{ animation: stripeMove .9s ease-out .44s 1 both; }
.world.is-visible .card-3 .stripe-slide::after { animation: stripeMove .9s ease-out .56s 1 both; }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .world-card{ transform: none !important; opacity: 1 !important; }
  .world-card.glow::after,
  .stripe-slide::before, .stripe-slide::after{ animation: none !important; opacity: 0 !important; }
}
/* ====== A4: ACCESSIBILITY (focus-beam & tick-fade) ====== */
.a11y-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.a11y-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.a11y-intro { color: #3a2b14; max-width: 65ch; }

.a11y-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
@media (max-width: 1199px){ .a11y-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .a11y-grid{ grid-template-columns: 1fr; } }

.a11y-card{
  position: relative;
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  overflow: hidden;
  /* вход: лёгкий подъезд снизу */
  transform: translateY(12px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22,.95,.5,1), opacity .5s ease, box-shadow .25s ease, border-color .2s ease;
}
.a11y.is-visible .a11y-card{ transform: translateY(0); opacity: 1; }
.a11y-card:hover, .a11y-card:focus-within{
  box-shadow: 0 12px 28px rgba(255,166,0,.25);
  border-color: rgba(255,166,0,.45);
}

.a11y-fig{ margin: 0 0 10px; text-align: center; position: relative; }
.a11y-cap{ font-size: 12px; color: #6b4a27; margin-top: 6px; text-align: center; }
.a11y-sub{ margin: 2px 0 8px; color: #8a3700; font-size: clamp(18px, 2.2vw, 22px); }

/* --- Unique #1: focus-beam — световой луч сканирует карточку при появлении --- */
.a11y-card::after{
  content: "";
  position: absolute; left: -40%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.35) 50%,
                                      rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  opacity: 0; pointer-events: none;
}
@keyframes beam { 0%{left:-40%; opacity:0;} 12%{opacity:.6;} 100%{left:120%; opacity:0;} }
.a11y.is-visible .a11y-card:nth-child(1)::after{ animation: beam .9s ease-out .08s 1 both; }
.a11y.is-visible .a11y-card:nth-child(2)::after{ animation: beam .9s ease-out .20s 1 both; }
.a11y.is-visible .a11y-card:nth-child(3)::after{ animation: beam .9s ease-out .32s 1 both; }
.a11y.is-visible .a11y-card:nth-child(4)::after{ animation: beam .9s ease-out .44s 1 both; }

/* --- Unique #2: tick-fade — пункты чеклиста проявляются с галочкой --- */
.a11y-points{ margin: 0; padding-left: 18px; color: #3a2b14; }
.a11y-points li{
  position: relative; margin: 6px 0; opacity: 0; transform: translateY(6px);
  list-style: none; padding-left: 18px;
}
.a11y-points li::before{
  content: ""; position: absolute; left: 0; top: .35em;
  width: 10px; height: 10px; border-radius: 2px;
  border: 2px solid #FF8C00; transform: rotate(0deg) scale(.8); opacity: .0;
}
@keyframes tickFade { 
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes tickPop {
  0%   { opacity: 0; transform: rotate(-20deg) scale(.8); }
  60%  { opacity: 1; transform: rotate(6deg) scale(1.05); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Запуск по карточкам и пунктам со ступенчатой задержкой */
.a11y.is-visible .a11y-card:nth-child(1) .a11y-points li:nth-child(1){ animation: tickFade .32s ease .08s forwards; }
.a11y.is-visible .a11y-card:nth-child(1) .a11y-points li:nth-child(1)::before{ animation: tickPop .32s ease .08s forwards; }
.a11y.is-visible .a11y-card:nth-child(1) .a11y-points li:nth-child(2){ animation: tickFade .32s ease .16s forwards; }
.a11y.is-visible .a11y-card:nth-child(1) .a11y-points li:nth-child(2)::before{ animation: tickPop .32s ease .16s forwards; }
.a11y.is-visible .a11y-card:nth-child(1) .a11y-points li:nth-child(3){ animation: tickFade .32s ease .24s forwards; }
.a11y.is-visible .a11y-card:nth-child(1) .a11y-points li:nth-child(3)::before{ animation: tickPop .32s ease .24s forwards; }

/* Сдвигаем тайминги для 2–4 карточек */
.a11y.is-visible .a11y-card:nth-child(2) .a11y-points li:nth-child(1){ animation: tickFade .32s ease .20s forwards; }
.a11y.is-visible .a11y-card:nth-child(2) .a11y-points li:nth-child(1)::before{ animation: tickPop .32s ease .20s forwards; }
.a11y.is-visible .a11y-card:nth-child(2) .a11y-points li:nth-child(2){ animation: tickFade .32s ease .28s forwards; }
.a11y.is-visible .a11y-card:nth-child(2) .a11y-points li:nth-child(2)::before{ animation: tickPop .32s ease .28s forwards; }
.a11y.is-visible .a11y-card:nth-child(2) .a11y-points li:nth-child(3){ animation: tickFade .32s ease .36s forwards; }
.a11y.is-visible .a11y-card:nth-child(2) .a11y-points li:nth-child(3)::before{ animation: tickPop .32s ease .36s forwards; }

.a11y.is-visible .a11y-card:nth-child(3) .a11y-points li:nth-child(1){ animation: tickFade .32s ease .32s forwards; }
.a11y.is-visible .a11y-card:nth-child(3) .a11y-points li:nth-child(1)::before{ animation: tickPop .32s ease .32s forwards; }
.a11y.is-visible .a11y-card:nth-child(3) .a11y-points li:nth-child(2){ animation: tickFade .32s ease .40s forwards; }
.a11y.is-visible .a11y-card:nth-child(3) .a11y-points li:nth-child(2)::before{ animation: tickPop .32s ease .40s forwards; }
.a11y.is-visible .a11y-card:nth-child(3) .a11y-points li:nth-child(3){ animation: tickFade .32s ease .48s forwards; }
.a11y.is-visible .a11y-card:nth-child(3) .a11y-points li:nth-child(3)::before{ animation: tickPop .32s ease .48s forwards; }

.a11y.is-visible .a11y-card:nth-child(4) .a11y-points li:nth-child(1){ animation: tickFade .32s ease .44s forwards; }
.a11y.is-visible .a11y-card:nth-child(4) .a11y-points li:nth-child(1)::before{ animation: tickPop .32s ease .44s forwards; }
.a11y.is-visible .a11y-card:nth-child(4) .a11y-points li:nth-child(2){ animation: tickFade .32s ease .52s forwards; }
.a11y.is-visible .a11y-card:nth-child(4) .a11y-points li:nth-child(2)::before{ animation: tickPop .32s ease .52s forwards; }
.a11y.is-visible .a11y-card:nth-child(4) .a11y-points li:nth-child(3){ animation: tickFade .32s ease .60s forwards; }
.a11y.is-visible .a11y-card:nth-child(4) .a11y-points li:nth-child(3)::before{ animation: tickPop .32s ease .60s forwards; }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .a11y-card{ transform: none !important; opacity: 1 !important; }
  .a11y-card::after,
  .a11y-points li,
  .a11y-points li::before{
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}
/* ====== A6: LIGHTWEIGHT TECH & PERFORMANCE ====== */
.tech-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.tech-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.tech-intro { color: #3a2b14; max-width: 65ch; }

.tech-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
@media (max-width: 991px){ .tech-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px){ .tech-grid{ grid-template-columns: 1fr; } }

.tech-card{
  position: relative;
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  overflow: hidden;

  /* Unique: techTilt (перспективный въезд) */
  transform: perspective(900px) translateY(14px) rotateX(5deg);
  opacity: 0;
  transition:
    transform .55s cubic-bezier(.22,.95,.5,1),
    opacity .55s ease,
    box-shadow .25s ease, border-color .2s ease;
}
.tech.is-visible .tech-card{
  transform: perspective(900px) translateY(0) rotateX(0deg);
  opacity: 1;
}
.tech-card:hover, .tech-card:focus-within{
  box-shadow: 0 12px 28px rgba(255,166,0,.25);
  border-color: rgba(255,166,0,.45);
}

.tech-fig{ margin: 0 0 10px; text-align: center; position: relative; }
.tech-cap{ font-size: 12px; color: #6b4a27; margin-top: 6px; text-align: center; }
.tech-sub{ margin: 2px 0 8px; color: #8a3700; font-size: clamp(18px, 2.2vw, 22px); }
.tech-text{ color: #3a2b14; margin: 0 0 6px; }
.tech-points{ margin: 0; padding-left: 18px; color: #3a2b14; }
.tech-points li{ margin: 6px 0; }

/* Unique: scanDown — скан-полоса сверху вниз один раз при появлении */
.tech-card::after{
  content: "";
  position: absolute; left: 0; right: 0; top: -35%;
  height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.35) 50%,
                                      rgba(255,255,255,0) 100%);
  transform: skewY(-6deg);
  opacity: 0; pointer-events: none;
}
@keyframes scanDown {
  0%   { top: -35%; opacity: 0; }
  10%  { opacity: .7; }
  100% { top: 120%; opacity: 0; }
}
.tech.is-visible .tech-card:nth-child(1)::after{ animation: scanDown .9s ease-out .10s 1 both; }
.tech.is-visible .tech-card:nth-child(2)::after{ animation: scanDown .9s ease-out .26s 1 both; }
.tech.is-visible .tech-card:nth-child(3)::after{ animation: scanDown .9s ease-out .42s 1 both; }

/* Unique: sparkBurst — мягкий всплеск за иконкой */
.tech-fig::before{
  content: ""; position: absolute; left: 50%; top: 38%;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,178,0,.6), rgba(255,140,0,0));
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0; pointer-events: none;
}
@keyframes sparkBurst {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  40%  { opacity: .9; transform: translate(-50%,-50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); }
}
.tech.is-visible .tech-card:nth-child(1) .tech-fig::before{ animation: sparkBurst .6s ease-out .18s 1 both; }
.tech.is-visible .tech-card:nth-child(2) .tech-fig::before{ animation: sparkBurst .6s ease-out .30s 1 both; }
.tech.is-visible .tech-card:nth-child(3) .tech-fig::before{ animation: sparkBurst .6s ease-out .42s 1 both; }

/* Decorative segmented pipe */
.tech-pipe{
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; margin-top: 4px;
}
.tech-pipe .seg{
  height: 8px; border-radius: 999px;
  background: #ffe8b5; overflow: hidden;
}
.tech-pipe .seg::before{
  content: ""; display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #FFB200, #FF8C00);
  transform: scaleX(0); transform-origin: left center;
}
@keyframes pipeFill { to { transform: scaleX(1); } }
.tech.is-visible .seg.s1::before{ animation: pipeFill .4s cubic-bezier(.22,.95,.5,1) .10s forwards; }
.tech.is-visible .seg.s2::before{ animation: pipeFill .4s cubic-bezier(.22,.95,.5,1) .22s forwards; }
.tech.is-visible .seg.s3::before{ animation: pipeFill .4s cubic-bezier(.22,.95,.5,1) .34s forwards; }
.tech.is-visible .seg.s4::before{ animation: pipeFill .4s cubic-bezier(.22,.95,.5,1) .46s forwards; }
.tech.is-visible .seg.s5::before{ animation: pipeFill .4s cubic-bezier(.22,.95,.5,1) .58s forwards; }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .tech-card{ transform: none !important; opacity: 1 !important; }
  .tech-card::after, .tech-fig::before, .tech-pipe .seg::before{
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
}
/* Pillars: уголок и эффекты — не вылезаем за рамки */
.pillars .card{ overflow: hidden; }

/* Rail под карточками */
.pillars-rail{ overflow: hidden; }

/* World: световая дорожка — тоже внутри карточки */
.world-card{ overflow: hidden; }

/* (опционально) немного уменьшим размах "лучей" — ещё надёжнее */
.world-card.glow::after,
.a11y-card::after{
  left: -30%;
  width: 60%;
}
/* ====== A7: TEAM & VALUES (ribbon-unfold / stamp-pop / stitch-run) ====== */
.team-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.team-title {
  position: relative; margin: 0; color: #7b3200;
  font-size: clamp(24px, 3.2vw, 36px);
}
/* ribbon-unfold: лента за заголовком */
.team-title::after{
  content:""; position:absolute; left:0; bottom:-6px; height:10px; width:100%;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  transform: scaleX(0); transform-origin: left center;
}
.team.is-visible .team-title::after{ animation: teamRibbon .5s cubic-bezier(.22,.95,.5,1) .06s forwards; }
@keyframes teamRibbon{ to { transform: scaleX(1); } }

.team-intro { color: #3a2b14; max-width: 65ch; }

.team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
@media (max-width: 991px){ .team-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px){ .team-grid{ grid-template-columns: 1fr; } }

.team-card{
  position: relative;
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  overflow: hidden;          /* предотвращает горизонтальный переплыв */
  /* вход: лёгкий подъезд и появление */
  transform: translateY(12px);
  opacity: 0;
  transition: transform .55s cubic-bezier(.22,.95,.5,1), opacity .55s ease,
              box-shadow .25s ease, border-color .2s ease;
}
.team.is-visible .team-card{ transform: translateY(0); opacity: 1; }
.team-card:hover, .team-card:focus-within{
  box-shadow: 0 12px 28px rgba(255,166,0,.25);
  border-color: rgba(255,166,0,.45);
}

.team-fig{ margin: 0 0 10px; text-align: center; position: relative; }
.team-cap{ font-size: 12px; color: #6b4a27; margin-top: 6px; text-align: center; }
.team-name{ margin: 2px 0 8px; color: #8a3700; font-size: clamp(18px, 2.2vw, 22px); }
.team-note{ color: #3a2b14; margin: 0 6px 6px 0; }
.team-points{ margin: 0; padding-left: 18px; color: #3a2b14; }
.team-points li{ margin: 6px 0; }

/* avatar hover micro-tilt */
.avatar{ transition: transform .2s ease; border-radius: 12px; }
.team-card:hover .avatar,
.team-card:focus-within .avatar{ transform: rotate(-.4deg) scale(1.01); }

/* stitch-run: бегущая строчка по краю */
.team-card::before{
  content:""; position:absolute; inset:0; border-radius: 16px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,140,0,.45) 0 6px, rgba(255,140,0,0) 6px 12px),
    repeating-linear-gradient(180deg, rgba(255,140,0,.45) 0 6px, rgba(255,140,0,0) 6px 12px),
    repeating-linear-gradient(270deg, rgba(255,140,0,.45) 0 6px, rgba(255,140,0,0) 6px 12px),
    repeating-linear-gradient(0deg, rgba(255,140,0,.45) 0 6px, rgba(255,140,0,0) 6px 12px);
  background-size: 0 2px, 2px 0, 0 2px, 2px 0;   /* начинается «с нуля» */
  background-position: left top, right top, right bottom, left bottom;
  background-repeat: no-repeat;
}
.team.is-visible .team-card::before{
  animation: stitchRun .7s ease-out .1s forwards;
}
@keyframes stitchRun{
  to { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
}

/* stamp-pop: всплывающий штамп в углу карты */
.stamp{
  position: absolute; top: 10px; right: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,178,0,.15); color: #A34300; font-weight: 800; font-size: 12px;
  transform: scale(.8) rotate(-6deg); opacity: 0;
  box-shadow: 0 6px 18px rgba(255,166,0,.25);
}
.team.is-visible .team-card:nth-child(1) .stamp{ animation: stampPop .38s ease-out .18s forwards; }
.team.is-visible .team-card:nth-child(2) .stamp{ animation: stampPop .38s ease-out .28s forwards; }
.team.is-visible .team-card:nth-child(3) .stamp{ animation: stampPop .38s ease-out .38s forwards; }
@keyframes stampPop{
  0% { transform: scale(.8) rotate(-6deg); opacity: 0; }
  70%{ transform: scale(1.05) rotate(.8deg); opacity: 1; }
  100%{ transform: scale(1) rotate(0); opacity: 1; }
}

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .team-card{ transform: none !important; opacity: 1 !important; }
  .team-title::after,
  .team-card::before,
  .stamp{ animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* ====== A8: PRESS & DOWNLOAD ====== */
.press-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.press-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.press-intro { color: #3a2b14; max-width: 65ch; }

.press-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(16px, 2.8vw, 28px);
  align-items: center;
}
@media (max-width: 767px){ .press-grid{ grid-template-columns: 1fr; } }

.press-copy { display: grid; gap: 12px; }
.press-points{ margin: 0; padding-left: 18px; color: #3a2b14; }
.press-ctas{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.press-note{ color: #6b4a27; }
.sweep-lnk{
  position: relative;
  font-weight: 700;
  padding-bottom: 2px;
  outline-offset: 2px;
}
.sweep-lnk::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s ease;
}
.sweep-lnk:hover::after, .sweep-lnk:focus-visible::after{ transform: scaleX(1); }

/* Badge + confetti (contained; no horizontal overflow) */
.press-media{ margin: 0; text-align: center; position: relative; overflow: hidden; }
.press-cap{ font-size: 12px; color: #6b4a27; margin-top: 6px; }

/* Unique #1: badgeSpinPop */
.press-badge{
  transform: translateY(8px) scale(.96) rotate(-6deg);
  opacity: 0; will-change: transform, opacity;
  border-radius: 12px;
}
.press.is-visible .press-badge{
  animation: badgeSpinPop .5s cubic-bezier(.22,.95,.5,1) .06s forwards;
}
@keyframes badgeSpinPop{
  60% { transform: translateY(-2px) scale(1.03) rotate(2deg); opacity: 1; }
  100%{ transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}

/* Unique #2: confettiBurst — внутри figure */
.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.p{ position:absolute; bottom:18%; width:6px; height:6px; border-radius:50%; opacity:0; }
.p1{ left:18%; background:#FFB200; }
.p2{ left:38%; background:#FF8C00; }
.p3{ left:58%; background:#FFC54D; }
.p4{ left:72%; background:#FF9D2E; }
.p5{ left:86%; background:#FFD77A; }

.press.is-visible .p1{ animation: confettiBurst .7s ease-out .18s both; }
.press.is-visible .p2{ animation: confettiBurst .7s ease-out .24s both; }
.press.is-visible .p3{ animation: confettiBurst .7s ease-out .30s both; }
.press.is-visible .p4{ animation: confettiBurst .7s ease-out .36s both; }
.press.is-visible .p5{ animation: confettiBurst .7s ease-out .42s both; }

@keyframes confettiBurst{
  0%   { transform: translateY(0) scale(.8); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(-24px) scale(1.1); opacity: 0; }
}

/* Unique #3: CTA pulse при появлении секции */
.press.is-visible .btn-primary{ animation: ctaPulse .6s ease-out .2s 1 both; }
@keyframes ctaPulse{
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-2px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .press-badge, .p, .btn-primary, .sweep-lnk::after{ animation: none !important; transform: none !important; opacity: 1 !important; }
  .sweep-lnk::after{ transform: scaleX(1) !important; }
}
/* ------- Button system refresh ------- */
:root{
  --btn-h: clamp(44px, 5.2vw, 52px);
  --btn-r: 999px;
  --btn-pad-x: clamp(16px, 3.2vw, 22px);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-r);
  border: 1.5px solid transparent;          /* аккуратнее, чем 2px */
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  gap: 8px;
  transition: transform .12s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
  will-change: transform;
}

/* Primary */
.btn-primary{
  color: #1b1202;
  background: linear-gradient(135deg, #FFB200 0%, #FF8C00 100%);
  border-color: #E08A00;
  box-shadow: 0 8px 18px rgba(255,157,0,.28);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(255,157,0,.34); }
.btn-primary:active{ transform: translateY(0); box-shadow: 0 6px 12px rgba(255,157,0,.24); }

/* Ghost (outline) — заметнее фон и мягче контраст */
.btn-ghost{
  background: #FFF6DA;             /* тёплый фон вместо полностью прозрачного */
  color: #8a4b00;
  border-color: #FFC14D;
}
.btn-ghost:hover{ background: #FFEDBD; }
.btn-ghost:active{ background: #FFE7A6; }

/* Единый красивый focus-ring */
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #fff,                 /* «прослойка» для читаемости */
    0 0 0 5px rgba(255,178,0,.9);
}

/* Контейнер с кнопками — выравнивание и расстояния */
.press-ctas, .about-ctas{
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Текстовая ссылка рядом с кнопками */
.sweep-lnk{
  position: relative;
  font-weight: 700;
  color: #A55B12;
  padding: 8px 2px 4px;            /* чтобы по высоте не «проседала» */
  border-radius: 6px;
  outline-offset: 2px;
}
.sweep-lnk::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.sweep-lnk:hover::after,
.sweep-lnk:focus-visible::after{ transform: scaleX(1); }