/* ============================================================
   Homepage styles. Pixel values transcribed from the mockups
   (7a = panorama variant, 4a = efir variant), 1440px reference.
   ============================================================ */

/* Hero: Panorama (dark full-bleed slider).
   Slider timing per handoff README: 21s cycle, frame 1 is a permanent
   base layer, frames 2-3 crossfade in at 7s/14s delays. */
.hero-panorama{padding:8px max(32px,calc((100% - var(--content-w-wide))/2)) 0}
.hero-frame{position:relative;height:660px;border-radius:var(--r-hero);overflow:hidden;background:var(--indigo-dark);box-shadow:0 30px 70px rgba(34,29,68,.25)}
.hero-slide{position:absolute;inset:0}
.hero-slide img{width:100%;height:100%;object-fit:cover;animation:sm-kb 21s linear infinite both}
.hero-slide-2{animation:sm-fade 21s linear 7s infinite both}
.hero-slide-2 img{animation-delay:7s}
.hero-slide-3{animation:sm-fade 21s linear 14s infinite both}
.hero-slide-3 img{animation-delay:14s}
.hero-shade{position:absolute;inset:0;background:linear-gradient(76deg,rgba(16,14,40,.78) 0%,rgba(16,14,40,.42) 42%,rgba(16,14,40,.06) 68%),linear-gradient(180deg,rgba(16,14,40,0) 55%,rgba(16,14,40,.55) 100%);pointer-events:none}
.hero-content{position:absolute;left:56px;bottom:116px;max-width:660px}
.hero-eyebrow{font:700 13px var(--font);letter-spacing:.24em;color:var(--orange-light);text-transform:uppercase;animation:sm-rise .8s ease .2s both}
.hero-content h1{margin:16px 0 0;font:800 62px/1.08 var(--font);letter-spacing:-.028em;color:#fff;text-shadow:0 4px 30px rgba(16,14,40,.4);animation:sm-rise .85s ease .32s both}
.hero-content h1 span{color:var(--orange)}
.hero-content p{margin:18px 0 0;max-width:520px;font:400 16.5px/1.6 var(--font);color:rgba(255,255,255,.88);animation:sm-rise .85s ease .46s both}
.hero-actions{display:flex;gap:13px;margin-top:28px;animation:sm-rise .85s ease .6s both}
.hero-actions .btn-accent{background:#ef8a10;box-shadow:0 12px 28px rgba(0,0,0,.35)}
.hero-actions .btn-accent:hover{background:#fff;color:var(--indigo-dark)}
.hero-meta{display:flex;align-items:center;gap:14px;margin-top:30px;font:600 13.5px var(--font);color:rgba(255,255,255,.92);animation:sm-rise .85s ease .74s both}
/* flex:none keeps the dot separators round when the row runs out of space */
.hero-meta i{flex:none;width:4px;height:4px;border-radius:50%;background:var(--orange)}
.hero-chip{position:absolute;right:36px;top:32px;background:rgba(16,14,40,.45);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);border-radius:var(--r-pill);padding:9px 17px;font:600 12.5px var(--font);color:#fff;animation:sm-rise .9s ease .65s both}
.hero-thumbs{position:absolute;right:36px;bottom:32px;display:flex;flex-direction:column;gap:8px;background:rgba(16,14,40,.4);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:12px 14px;animation:sm-rise .9s ease .5s both}
.hero-thumbs-label{font:600 10.5px var(--font);letter-spacing:.14em;color:rgba(255,255,255,.8);text-transform:uppercase}
.hero-thumbs-row{display:flex;gap:10px}
.hero-thumbs-row span{position:relative;display:block;width:88px;height:60px;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.5);opacity:.75}
.hero-thumbs-row span.is-active{border-color:var(--orange);opacity:1}
.hero-thumbs-row img{width:100%;height:100%;object-fit:cover}
.hero-thumbs-bar{height:3px;border-radius:99px;background:rgba(255,255,255,.3)}
.hero-thumbs-bar i{display:block;width:34%;height:100%;border-radius:99px;background:var(--orange)}

/* Stats cards (Panorama variant) */
.stats-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px max(32px,calc((100% - var(--content-w-wide))/2)) 0}
.stat-card{background:#fff;border:1px solid #eceaf3;border-radius:var(--r-card);padding:20px 24px;display:flex;align-items:center;gap:15px;box-shadow:0 6px 18px rgba(34,29,68,.05)}
.stat-icon{flex:none;width:46px;height:46px;border-radius:13px;background:#fdeeda;display:grid;place-items:center}
.stat-icon svg{width:22px;height:22px}
.stat-value{font:800 22px/1 var(--font);color:var(--ink)}
.stat-value-sm{font:800 15.5px/1.2 var(--font)}
.stat-label{font:400 12.5px var(--font);color:var(--ink-2);margin-top:4px}

/* Hero: Efir (light two-column) */
/* The visual track wants 660px but must yield before the copy column gets too
   narrow for a 62px headline - "инженерството" alone is ~445px, and with a hard
   660px track it escaped its column from 1300px down. minmax resolves to exactly
   612px + 660px at the 1440px design width, so the desktop layout is unchanged. */
.hero-efir{display:grid;grid-template-columns:minmax(460px,1fr) minmax(0,660px);gap:56px;align-items:center;padding:44px max(56px,calc((100% - var(--content-w))/2)) 0}
/* Grid items default to min-width:auto, which lets a wide flex row (the button
   pair) push the whole column past the viewport. Pin every child to 0. */
.hero-efir>*{min-width:0}
.hero-efir-eyebrow{font:600 13px var(--font);letter-spacing:.32em;color:var(--ink-3);text-transform:uppercase;animation:sm-rise .7s ease .1s both}
.hero-efir-copy h1{margin:18px 0 0;font:800 62px/1.06 var(--font);letter-spacing:-.03em;text-wrap:balance;animation:sm-rise .8s ease .25s both}
.hero-efir-copy h1 span{color:var(--orange)}
.hero-efir-copy p{margin:20px 0 0;max-width:610px;font:400 16.5px/1.65 var(--font);color:var(--ink-2);animation:sm-rise .8s ease .4s both}
.hero-efir-actions{display:flex;gap:14px;margin-top:28px;animation:sm-rise .8s ease .55s both}
.hero-efir-btn{font:600 14.5px var(--font);padding:15px 28px}
.hero-efir-btn-outline{border:1px solid #d8d6e6;padding:14px 28px;font:600 14.5px var(--font);color:var(--indigo)}
.hero-efir-btn-outline:hover{border-color:var(--indigo)}
.eu-hero{display:flex;align-items:center;gap:24px;margin-top:26px;animation:sm-rise .8s ease .85s both}
.eu-hero img{height:40px;width:auto}
.eu-hero .eu-hero-text{margin:0;font:500 11px/1.45 var(--font);color:var(--ink-2);max-width:300px;align-self:center;animation:none}
.hero-efir-strip{display:flex;gap:14px;margin-top:38px;animation:sm-rise .8s ease .7s both}
.strip-thumb{position:relative;display:block;width:118px;height:86px;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(34,29,68,.16)}
.strip-thumb img{width:100%;height:100%;object-fit:cover}
.strip-thumb em{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(20,16,46,.85));padding:18px 8px 6px;font:600 10px var(--font);font-style:normal;color:#fff}
.strip-count{width:86px;height:86px;border-radius:14px;background:var(--indigo-tint);display:grid;place-items:center;font:700 13px var(--font);color:var(--indigo)}
.strip-count small{font:400 10px var(--font);color:var(--ink-2);margin-top:-14px}
.hero-efir-visual{position:relative;height:560px}
/* Two-frame crossfade: frame 1 is a permanent base layer, frame 2 fades
   in over it for the second half of the cycle (no white flash possible). */
@keyframes sm-fade2{0%,50%{opacity:0}58%{opacity:1}92%{opacity:1}100%{opacity:0}}
/* translateZ(0) pins the rounded-corner clip to its own GPU layer, and
   will-change keeps the animating frames composited - without these the
   browser re-rasterizes the arch mask over the moving images on every
   scroll frame, which reads as trembling. */
.hero-efir-img{position:absolute;inset:0 0 40px 0;border-radius:240px 28px 28px 28px;overflow:hidden;box-shadow:0 30px 60px rgba(34,29,68,.22);transform:translateZ(0)}
.hero-efir-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:sm-kb 30s linear infinite alternate;will-change:transform}
.hero-efir-img img:nth-child(2){opacity:0;animation:sm-kb 30s linear infinite alternate,sm-fade2 18s linear infinite;will-change:transform,opacity}
/* No backdrop-filter here: blurring a permanently animating backdrop (the
   Ken Burns slider) forces a full re-blur every frame and flickers. The
   near-opaque background gives the same frosted look for free. */
.float-card{position:absolute;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);border-radius:16px;padding:14px 20px;box-shadow:0 12px 30px rgba(34,29,68,.16)}
.float-card-years{left:-26px;top:96px;animation:sm-bob 7s ease-in-out infinite}
.float-card-years strong{display:block;font:800 24px var(--font);color:var(--indigo)}
.float-card-years span{font:400 12.5px var(--font);color:var(--ink-2)}
.float-card-award{right:-18px;bottom:118px;display:flex;align-items:center;gap:10px;animation:sm-bob 9s ease-in-out .8s infinite}
.float-card-award i{width:34px;height:34px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:#fff;font:800 15px var(--font);font-style:normal}
.float-card-award strong{display:block;font:700 14.5px var(--font)}
.float-card-award span{font:400 12px var(--font);color:var(--ink-2)}
.float-card-dark{left:40px;bottom:16px;background:var(--indigo-dark);border:0;color:#fff;padding:13px 20px;box-shadow:0 14px 30px rgba(34,29,68,.3);animation:sm-bob 11s ease-in-out 1.4s infinite}
.float-card-dark span{font:600 12.5px var(--font);color:rgba(255,255,255,.65)}
.float-card-dark strong{display:block;font:700 14.5px var(--font);margin-top:2px}

/* Stats band (Efir variant) */
.stats-band{position:relative;margin:40px max(56px,calc((100% - var(--content-w))/2)) 0;background:var(--indigo-dark);color:#fff;border-radius:var(--r-band);padding:44px 52px;overflow:hidden}
.stats-band>svg{position:absolute;inset:0;width:100%;height:100%}
.stats-band-grid{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:44px;align-items:center}
.stats-band-value{font:800 40px var(--font)}
.stats-band-value span{color:var(--orange)}
.stats-band-label{font:400 13px var(--font);color:rgba(255,255,255,.65);margin-top:4px}
.stats-band-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.16);margin-top:12px}
.stats-band-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--orange),var(--orange-light))}
.stats-band-tagline{font:500 17px/1.55 var(--font);color:rgba(255,255,255,.85);text-align:right;text-wrap:balance}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:28px;transition:transform .35s,box-shadow .35s}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.service-icon{width:48px;height:48px;border-radius:12px;background:var(--indigo-tint);display:grid;place-items:center}
.service-icon svg{width:24px;height:24px}
.service-card h3{margin:18px 0 0;font:700 18px var(--font)}
.service-card p{margin:9px 0 0;font:400 14.5px/1.6 var(--font);color:var(--ink-2)}
.service-more{display:inline-block;font:600 13.5px var(--font);color:var(--orange);margin-top:16px}

/* Portfolio */
.portfolio-arrows{display:flex;gap:10px}
.portfolio-arrows span{width:42px;height:42px;border-radius:50%;border:1px solid #d8d6e6;display:grid;place-items:center;color:var(--ink-3)}
.portfolio-arrows span.is-active{background:var(--indigo);border-color:var(--indigo);color:#fff}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.project-card{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;height:300px;box-shadow:var(--shadow-card)}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.project-card:hover img{transform:scale(1.06)}
.project-card-info{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:12px;padding:12px 16px;pointer-events:none}
.project-card-info strong{display:block;font:700 14.5px var(--font);color:var(--ink)}
.project-card-info em{display:block;font:500 12px var(--font);font-style:normal;color:var(--orange);margin-top:2px}

/* ---------- Responsive ---------- */
/* 1101-1240 is still the two-column desktop hero, but its second track was a
   hard 660px: at 1101 that left the copy 273px, so "инженерството" ran out of
   its column and across the photo, and the EU strip collapsed into a seven-line
   ribbon. Proportional tracks and a smaller headline hold the composition all
   the way down to the 1100 restack. Gutters drop to 32px to line the hero and
   the stats band up with .section, which common.css already narrows here. */
@media (max-width:1240px){
  .hero-efir{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;padding:40px 32px 0}
  .hero-efir-copy h1{font-size:52px}
  /* The years card overhangs left into the column gap; -26px was scaled for the
     56px desktop gap and would have landed on the copy at this gap size. */
  .float-card-years{left:-10px}
  .eu-hero{gap:18px}
  .eu-hero .eu-hero-text{max-width:none}
  .stats-band{margin:40px 32px 0;padding:40px}
  .stats-band-grid{gap:32px}
}
@media (max-width:1100px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .stats-cards{grid-template-columns:repeat(2,1fr)}
  .stats-band-grid{grid-template-columns:1fr 1fr}
  .stats-band-tagline{text-align:left;grid-column:1/-1}
  /* The decorative curve is a 1330x210 viewBox stretched with
     preserveAspectRatio="none". It only reads as a curve while the band is a
     single 210px-tall row; from here down the band is a 2x2 grid twice that
     height, so the path stretches into an S that cuts through the figures,
     the progress bars and the tagline. Hidden for the whole stacked range. */
  .stats-band>svg{display:none}
  /* minmax(0,1fr) instead of 1fr: a bare 1fr track still floors at min-content */
  .hero-efir{grid-template-columns:minmax(0,1fr);padding:32px 32px 0}
  .hero-efir-visual{height:420px;max-width:640px}
  .hero-efir-img{border-radius:120px 28px 28px 28px}
  /* The float cards keep overlapping the photo here, but their desktop offsets
     are negative: they were meant to overhang into the copy column of a
     two-column hero. In this single-column hero that overhang lands in the page
     gutter - .float-card-years butted the screen edge and .float-card-award was
     stranded in the empty space beside the 640px photo. Inset them instead. */
  .float-card-years{left:18px;top:84px}
  .float-card-award{right:18px;bottom:104px}
  .float-card-dark{left:18px;bottom:8px}
  /* Touch target: the burger nav is on from 1080 down, so these are tablets.
     The drill-down link is an 18px inline box by default. (Below 760 it already
     got this treatment; it is just as needed on an iPad.) */
  .service-more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px}
}
@media (max-width:760px){
  /* ---- Panorama hero: unpin the copy, let the frame grow with it ----
     Below 760 the fixed-height frame clipped the top of .hero-content
     (headline included), so the copy rejoins normal flow and the frame
     sizes to it; the slides stay absolute behind it. */
  .hero-panorama{padding:8px 20px 0}
  .hero-frame{height:auto;display:flex;flex-direction:column;justify-content:flex-end}
  .hero-shade{background:linear-gradient(180deg,rgba(16,14,40,.3) 0%,rgba(16,14,40,.58) 42%,rgba(16,14,40,.88) 100%)}
  .hero-content{position:relative;left:auto;right:auto;bottom:auto;max-width:none;padding:150px 20px 30px}
  /* 700/.24em made the label 330px wide - two lines with "ОТ 2005" orphaned */
  .hero-eyebrow{font-weight:600;font-size:12px;letter-spacing:.09em;text-wrap:balance}
  .hero-content h1{font-size:40px}
  .hero-content p{margin-top:14px;font-size:15px}
  .hero-thumbs{display:none}
  /* Caption chip duplicates the portfolio captions and lands on the headline */
  .hero-chip{display:none}
  .hero-actions{margin-top:24px}
  /* The dot separators cannot survive wrapping, so the three facts become
     pills - same pill language as the buttons, and wrapping looks intentional. */
  .hero-meta{flex-wrap:wrap;gap:8px;margin-top:22px;font-size:12.5px}
  .hero-meta i{display:none}
  .hero-meta span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);padding:6px 13px}
  .stats-cards{margin:20px 20px 0;gap:12px}
  .stat-card{padding:16px 18px;gap:13px}
  .stat-icon{width:42px;height:42px;border-radius:12px}

  /* ---- Efir hero ---- */
  /* Reading order: .eu-hero is nested in the copy column, which is correct on
     desktop (it sits under the copy, level with the photo). Stacked, that drops
     a funding disclaimer between the thumb strip and the hero photo. Making the
     copy display:contents lifts its children into the hero grid, so .eu-hero
     can be ordered after the photo and its cards without touching the markup or
     the desktop layout. The gap goes to 0 because the lifted children already
     carry their own margins; the visual gets that spacing back explicitly. */
  .hero-efir{padding:24px 20px 0;gap:0}
  .hero-efir-copy{display:contents}
  .eu-hero{order:2;gap:14px;margin-top:30px;flex-wrap:wrap}
  .eu-hero img{height:32px}
  .eu-hero .eu-hero-text{max-width:100%;font-size:12.5px;line-height:1.5}
  .hero-efir-copy h1{font-size:40px}
  .hero-efir-copy p{font-size:15.5px}
  /* Thumb strip: a real grid instead of a ragged wrapped flex row */
  .hero-efir-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:30px}
  .strip-thumb,.strip-count{width:auto;height:88px}
  .strip-thumb em{padding:18px 10px 8px;font-size:12px}
  /* align-content:center stops the two auto rows stretching apart in the taller tile */
  .strip-count{align-content:center;font-size:15px}
  .strip-count small{font-size:12px;margin-top:2px}
  /* Float cards leave absolute flow and stack under the photo: on a phone they
     blanketed the image and each other. Desktop (>=761px) keeps the overlap. */
  .hero-efir-visual{order:1;margin-top:32px;position:static;height:auto;max-width:none;display:grid;gap:10px}
  .hero-efir-img{position:relative;inset:auto;aspect-ratio:4/3;margin-bottom:4px}
  .float-card{position:static;background:#fff;backdrop-filter:none;border:1px solid var(--border);border-radius:14px;padding:13px 16px;box-shadow:var(--shadow-card);animation:none}
  .float-card-years{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .float-card-years strong{display:inline;font-size:21px}
  .float-card-dark{background:var(--indigo-dark);border-color:var(--indigo-dark);padding:13px 16px}

  /* ---- Stats band ---- */
  /* The decorative curve is already hidden from 1100 down */
  .stats-band{margin:36px 20px 0;padding:32px 24px}

  /* ---- Services / portfolio ---- */
  /* Section-to-section breathing room comes from .section in common.css */
  .services-grid,.portfolio-grid{margin-top:24px;gap:16px}
  /* Carousel arrows are aria-hidden and wired to nothing; the grid is a stack */
  .portfolio-arrows{display:none}
  /* 44px tap target on every card's drill-down link (18px inline by default) */
  .service-more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px}
}
@media (max-width:560px){
  /* Stacked full-width pills: side by side both labels wrapped to two lines,
     and their combined min-content width forced a horizontal page scroll. */
  .hero-efir-actions,.hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-efir-actions .btn,.hero-actions .btn{display:block;width:100%;text-align:center}
  .hero-efir-btn,.hero-efir-btn-outline{padding:15px 20px}
  /* .32em tracking pushed the eyebrow onto a second line */
  .hero-efir-eyebrow{font-size:12px;letter-spacing:.13em;text-wrap:balance}
  /* 120px was scaled for a 640px-wide image; it ate a third of a phone frame */
  .hero-efir-img{border-radius:72px var(--r-hero) var(--r-hero) var(--r-hero)}
  /* Four tiles side by side get too narrow for their captions on a phone */
  .hero-efir-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services-grid,.portfolio-grid{grid-template-columns:1fr}
  .stats-band{padding:28px 20px;border-radius:var(--r-hero)}
  .stats-band-grid{gap:24px}
  .stats-band-value{font-size:32px}
  .stats-band-tagline{font-size:15px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
  /* 300px of near-identical photo per card made the section endless */
  .project-card{height:auto;aspect-ratio:4/3}
  .portfolio-grid{gap:14px}
}
@media (max-width:430px){
  /* Fluid headline: "инженерството" is one unbreakable 13-character word, so the
     type has to track the viewport or it runs past the edge (the panorama frame
     clips it outright). The clamp ceilings are the fixed sizes we want at 430. */
  .hero-content{padding:130px 16px 26px}
  .hero-content h1{font-size:clamp(27px,8.6vw,32px)}
  .hero-efir-copy h1{font-size:clamp(28px,9.2vw,34px)}
  .stats-cards{grid-template-columns:1fr}
  .stats-band-grid{grid-template-columns:1fr}
}