/* ============================================================
   VGEO – style.css  |  Mobile-first · GPU · WCAG 2.1 AA
   ============================================================ */

/* ── 1. TOKENS ───────────────────────────────────────────── */
:root {
  --red:        #e63946;
  --red-dark:   #c1121f;
  --red-glow:   rgba(230,57,70,.28);
  --ink:        #111318;
  --ink-soft:   #3a3d46;
  --muted:      #6b7280;
  --surface:    #ffffff;
  --surface-2:  #f5f5f7;
  --dark-bg:    #111318;
  --dark-card:  rgba(255,255,255,.042);
  --dark-border:rgba(255,255,255,.08);

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;

  --ease:  cubic-bezier(.4,0,.2,1);
  --t-fast:.18s;
  --t-med: .32s;
  --t-slow:.55s;

  --sh-sm: 0 2px 10px rgba(0,0,0,.06);
  --sh-md: 0 8px 32px rgba(0,0,0,.10);
  --sh-lg: 0 24px 64px rgba(0,0,0,.14);

  --font:'Inter','Segoe UI',system-ui,sans-serif;
  --header-h:68px;
}

/* ── 1b. PRELOADER ───────────────────────────────────────── */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: #0d0f14;
  transition: opacity .55s ease, visibility .55s ease;
}
.site-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-preloader-logo {
  animation: preloaderLogoPulse 1.6s ease-in-out infinite;
  filter: brightness(1.1);
}
@keyframes preloaderLogoPulse {
  0%,100% { transform: translateY(0);   opacity: 1;   }
  50%      { transform: translateY(-4px); opacity: .7; }
}
.site-preloader-bar {
  display: block;
  width: 180px;
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.site-preloader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--red), #ff6b6b, var(--red));
  transform-origin: left center;
  transform: scaleX(0);
  animation: preloaderBarFill 2s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes preloaderBarFill {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* hide page content while preloading */
body.is-preloading > *:not(.site-preloader) {
  visibility: hidden;
}

/* visually hidden but accessible to screen readers and crawlers */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── 2. RESET ────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;tab-size:4}
body{font-family:var(--font);line-height:1.65;color:var(--ink);
     background:var(--surface);-webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none}

/* ── Focus ring (a11y WCAG 2.1) ── */
:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:4px
}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ── Skip link ── */
.skip-link{
  position:absolute;top:-100px;left:1rem;z-index:9999;
  background:var(--red);color:#fff;padding:.6rem 1.2rem;
  border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:700;
  transition:top .2s
}
.skip-link:focus{top:0}

/* ── Reduced-motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
}

/* ── 3. LAYOUT ───────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}

.section-title{text-align:center;margin-bottom:3.5rem}
.section-title h2{
  font-size:clamp(1.75rem,3vw,2.6rem);font-weight:800;
  letter-spacing:-.025em;line-height:1.2;
  position:relative;display:inline-block;padding-bottom:1rem
}
.section-title h2::after{
  content:'';position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);
  width:44px;height:3px;border-radius:2px;background:var(--red)
}
.section-title p{
  max-width:640px;margin:.75rem auto 0;
  color:var(--muted);font-size:1.05rem;line-height:1.7
}
.section-title--light h2{color:#fff}
.section-title--light p{color:rgba(255,255,255,.6)}

.text-red{color:var(--red)}

/* ── 4. HEADER ───────────────────────────────────────────── */
#main-header{
  position:fixed;inset-inline:0;top:0;
  height:var(--header-h);z-index:500;
  display:flex;align-items:center;
  transition:background var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease);
  will-change:background
}
#main-header.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(0,0,0,.09)
}

.header-container{
  display:flex;justify-content:space-between;
  align-items:center;width:100%;
  padding:0 clamp(1rem,4vw,2rem)
}

/* Logo */
.logo a{display:inline-flex;align-items:center}
.logo img{
  width:clamp(80px,10vw,110px);height:auto;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));
  transition:filter var(--t-med) var(--ease),transform var(--t-fast) var(--ease)
}
.logo a:hover img{transform:scale(1.04)}
#main-header.scrolled .logo img{filter:none}

/* Desktop nav */
nav ul{display:flex;gap:.2rem;align-items:center}
nav ul li a{
  color:#fff;padding:.45rem 1rem;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:500;letter-spacing:.01em;
  transition:background var(--t-fast),color var(--t-fast);
  display:block;white-space:nowrap
}
nav ul li a:hover,nav ul li a[aria-current="page"]{
  background:rgba(230,57,70,.14);color:var(--red)
}
#main-header.scrolled nav ul li a{color:var(--ink)}
#main-header.scrolled nav ul li a:hover{color:var(--red)}

/* CTA nav button */
.nav-cta{
  background:var(--red)!important;color:#fff!important;
  padding:.45rem 1.1rem!important;
  box-shadow:0 2px 10px var(--red-glow)
}
.nav-cta:hover{background:var(--red-dark)!important;transform:translateY(-1px)}

/* Hamburger */
.hamburger{
  display:none;
  width:44px;height:44px;
  border-radius:var(--r-sm);
  background:rgba(0,0,0,.45);
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  transition:background var(--t-fast)
}
.hamburger[aria-expanded="true"]{background:rgba(230,57,70,.9)}
.bar{
  display:block;width:22px;height:2px;
  background:#fff;border-radius:2px;
  transition:transform var(--t-med) var(--ease),
             opacity var(--t-fast),
             width var(--t-med)
}
.hamburger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] .bar:nth-child(2){opacity:0;width:0}
.hamburger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#main-header.scrolled .hamburger{background:transparent}
#main-header.scrolled .bar{background:var(--ink)}
#main-header.scrolled .hamburger[aria-expanded="true"] .bar{background:#fff}

/* ── 5. HERO SPLIT (index) ───────────────────────────────── */
/* ── HERO SLIDER ── */
.hero-welcome{
  position:relative;
  height:100dvh;min-height:560px;
  width:100%;overflow:hidden;
  background:#0d0f14; /* fallback while images load */
}

/* Slide nav dots */
.hero-dots{
  position:absolute;bottom:2rem;left:50%;
  transform:translateX(-50%);
  z-index:20;display:flex;gap:.55rem;
  pointer-events:none;
}
.hero-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:background var(--t-med),transform var(--t-med);
  pointer-events:auto;cursor:pointer;border:none;padding:0;
}
.hero-dot.active{
  background:#fff;transform:scale(1.35);
}

/* Slide label (bottom-left) */
.hero-slide-label{
  position:absolute;bottom:2rem;left:clamp(1.5rem,4vw,3rem);
  z-index:20;
  display:flex;align-items:center;gap:.65rem;
  color:rgba(255,255,255,.6);font-size:.8rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.hero-slide-label::before{
  content:'';display:block;width:24px;height:1px;background:var(--red);
}

/* Slide counter (bottom-right) */
.hero-slide-counter{
  position:absolute;bottom:2rem;right:clamp(1.5rem,4vw,3rem);
  z-index:20;
  color:rgba(255,255,255,.45);font-size:.8rem;font-weight:600;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.hero-slide-counter .current{color:#fff;font-size:1.1rem;}

.hero-welcome-half{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease), visibility .9s var(--ease);
  z-index:1;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero-welcome-half.active{
  opacity:1;visibility:visible;z-index:2;
}

/* BG images inline via style attr – more reliable than CSS url() on CDN */
.hero-welcome-half.left{
  background-color:#1a2030;
}
.hero-welcome-half.right{
  background-color:#1a1410;
}
.hero-welcome-half.scanner{
  background-color:#0f1a18;
}

/* Overlay */
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.62) 0%,
    rgba(5,5,15,.70) 50%,
    rgba(5,5,15,.85) 100%
  );
  z-index:1;
  transition:opacity var(--t-med);
}
.hero-welcome-half:hover .hero-overlay{opacity:1}

/* Vignette edges */
.hero-welcome-half::after{
  content:'';
  position:absolute;inset:0;z-index:1;
  box-shadow:inset 0 0 180px rgba(0,0,0,.65);
  pointer-events:none;
}

.hero-welcome-content{
  position:relative;z-index:3;
  max-width:560px;
  padding:0 2rem;
  color:#fff;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  transform:translateY(20px);
  transition:transform .9s var(--ease);
}
.hero-welcome-half.active .hero-welcome-content{
  transform:translateY(0);
}

/* Tag chip above logo */
.hero-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(230,57,70,.55);
  border-radius:6px;
  padding:.32rem .9rem;
  font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
  margin-bottom:1.6rem;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hero-chip-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--red);
  flex-shrink:0;
  animation:pulseDot 1.8s ease-in-out infinite;
}

.hero-welcome-logo{
  width:clamp(180px,26vw,320px);
  height:auto;
  object-fit:contain;
  margin:0 auto 1.8rem;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.55));
  transition:transform var(--t-med) var(--ease), filter var(--t-med);
}
.hero-welcome-half.active .hero-welcome-logo{
  filter:drop-shadow(0 6px 32px rgba(0,0,0,.7));
}

.hero-welcome-description{
  font-size:clamp(.92rem,1.4vw,1.05rem);
  line-height:1.75;
  margin-bottom:2rem;
  opacity:.85;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 6px rgba(0,0,0,.4);
  max-width:440px;
}

.hero-divider{display:none}

/* Particles */
.hero-particles{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.hero-particles span{
  position:absolute;border-radius:50%;
  background:rgba(230,57,70,.18);
  will-change:transform;
  animation:pFloat 9s ease-in-out infinite;
}
.hero-particles span:nth-child(1){width:56px;height:56px;left:8%;bottom:22%;animation-delay:0s}
.hero-particles span:nth-child(2){width:28px;height:28px;left:25%;bottom:55%;animation-delay:2.3s}
.hero-particles span:nth-child(3){width:72px;height:72px;left:62%;bottom:32%;animation-delay:1.1s}
.hero-particles span:nth-child(4){width:18px;height:18px;left:78%;bottom:68%;animation-delay:3.2s}
.hero-particles span:nth-child(5){width:40px;height:40px;left:90%;bottom:18%;animation-delay:1.8s}
@keyframes pFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.25}
  50%{transform:translateY(-38px) scale(1.08);opacity:.55}
}

/* Floating particles (GPU: translate only) */
.hero-particles{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden
}
.hero-particles span{
  position:absolute;border-radius:50%;
  background:rgba(230,57,70,.22);
  will-change:transform;
  animation:pFloat 9s ease-in-out infinite
}
.hero-particles span:nth-child(1){width:56px;height:56px;left:8%;bottom:22%;animation-delay:0s}
.hero-particles span:nth-child(2){width:28px;height:28px;left:25%;bottom:55%;animation-delay:2.3s}
.hero-particles span:nth-child(3){width:72px;height:72px;left:62%;bottom:32%;animation-delay:1.1s}
.hero-particles span:nth-child(4){width:18px;height:18px;left:78%;bottom:68%;animation-delay:3.2s}
.hero-particles span:nth-child(5){width:40px;height:40px;left:90%;bottom:18%;animation-delay:1.8s}
@keyframes pFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.35}
  50%{transform:translateY(-38px) scale(1.08);opacity:.7}
}

/* ── 6. HERO PAGE (geodezja/drony) ───────────────────────── */
.hero,.hero-dark{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden
}
.hero{background:url("images/zdjeciageoweb/uslugi-geodezyjne-krakow-wieliczka.jpg") center/cover no-repeat}
.hero-dark{background:url("images/uslugi-dronem-vgeo.jpg") center/cover no-repeat}
.hero-scanner-page{background:url("images/skaning-laserowy-3d-leica.jpg") center 40%/cover no-repeat}

.hero-bg-overlay{
  position:absolute;inset:0;
  background:linear-gradient(155deg,rgba(0,0,0,.72) 0%,rgba(12,10,28,.84) 100%);
  z-index:0
}

.hero-inner{
  position:relative;z-index:1;
  max-width:860px;width:100%;
  padding:calc(var(--header-h) + 2rem) 1.5rem 4rem
}

.hero-logo{
  width:clamp(160px,28vw,320px);height:auto;
  margin:0 auto 2rem;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.5));
  animation:fadeD .8s var(--ease) both
}
.hero-title{
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.15;
  margin-bottom:1.2rem;
  animation:fadeU .85s .15s var(--ease) both;
  text-shadow:0 2px 16px rgba(0,0,0,.3)
}
.hero-subtitle{
  font-size:clamp(.95rem,1.8vw,1.15rem);opacity:.88;
  max-width:620px;margin:0 auto 2.5rem;line-height:1.75;
  animation:fadeU .85s .3s var(--ease) both
}
.hero-buttons{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  animation:fadeU .85s .45s var(--ease) both
}

/* Mouse scroll indicator */
.hero-scroll-hint{
  position:absolute;bottom:2rem;left:50%;
  transform:translateX(-50%);z-index:2;
  opacity:.7
}
.hero-scroll-hint span{
  display:block;width:24px;height:38px;
  border:2px solid rgba(255,255,255,.5);border-radius:12px;position:relative
}
.hero-scroll-hint span::before{
  content:'';position:absolute;
  top:6px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;background:#fff;border-radius:2px;
  animation:scrollDot 2.2s ease infinite
}
@keyframes scrollDot{0%,100%{top:6px;opacity:1}60%{top:18px;opacity:0}}

/* ── 7. BUTTONS – SVG stroke-draw border animation ──────── */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.9rem;
  border-radius:var(--r-sm);
  font-weight:600;font-size:.93rem;
  border:none;                  /* border handled by SVG rect */
  white-space:nowrap;
  cursor:pointer;
  transition:background .4s ease,
             color .4s ease,
             box-shadow .4s ease,
             transform .18s ease;
  will-change:transform;
  z-index:0;
  /* make sure SVG sits behind text */
  isolation:isolate;
}
.btn:active{transform:scale(.97)!important;}

/* SVG border injected via JS into every .btn */
.btn-svg-border{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:-1;
}
.btn-svg-border rect{
  fill:none;
  stroke-width:2;
  rx:var(--btn-rx, 10px);
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  x:1px; y:1px;
  stroke-dasharray:var(--btn-dash, 60 999);
  stroke-dashoffset:var(--btn-dash, 60);
  transition:stroke-dashoffset 1s ease-in-out,
             stroke-dasharray  1s ease-in-out;
}
.btn:hover .btn-svg-border rect{
  stroke-dashoffset:-999;
}

/* ── Primary ── */
.btn-primary{
  background:var(--red);
  color:#fff;
}
.btn-primary .btn-svg-border rect{stroke:rgba(255,255,255,.55);}
.btn-primary:hover{
  background:var(--red-dark);
  box-shadow:0 8px 28px var(--red-glow);
  color:#fff;
}

/* ── Outline white ── */
.btn-outline-white{
  background:transparent;
  color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.btn-outline-white .btn-svg-border rect{stroke:#fff;}
.btn-outline-white:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:inset 0 0 0 1.5px #fff;
}

/* ── Outline red ── */
.btn-outline-red{
  background:transparent;
  color:var(--red);
  padding:.6rem 1.4rem;
  box-shadow:inset 0 0 0 1.5px var(--red);
}
.btn-outline-red .btn-svg-border rect{stroke:var(--red);}
.btn-outline-red:hover{
  background:rgba(230,57,70,.08);
  color:var(--red);
  box-shadow:inset 0 0 0 1.5px var(--red), 0 4px 16px var(--red-glow);
}

/* ── Hero (glass) ── */
.btn-hero{
  background:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.38);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  margin-top:auto;
}
.btn-hero .btn-svg-border rect{stroke:rgba(255,255,255,.75);}
.btn-hero:hover{
  background:rgba(230,57,70,.75);
  box-shadow:inset 0 0 0 1.5px var(--red), 0 6px 22px var(--red-glow);
  color:#fff;
}

/* ── Large variant ── */
.btn-large{padding:.95rem 2.4rem;font-size:1rem;}

/* ── Arrow ── */
.btn-arrow{
  display:inline-block;
  transition:transform .3s ease;
}
.btn:hover .btn-arrow{transform:translateX(6px);}

/* ── 8. STATS BAR ────────────────────────────────────────── */
.stats-bar{
  background:var(--ink);color:#fff;
  padding:clamp(2rem,4vw,3.5rem) 0
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;text-align:center
}
.stat-item{
  padding:1rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  transition:background var(--t-fast)
}
.stat-item:hover{background:rgba(255,255,255,.08)}
.stat-number{
  font-size:clamp(2rem,4vw,3rem);font-weight:800;
  color:var(--red);letter-spacing:-.03em;line-height:1;
  display:inline-block
}
.stat-suffix{
  font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:var(--red)
}
.stat-label{
  display:block;margin-top:.5rem;
  font-size:.88rem;color:rgba(255,255,255,.6);font-weight:400
}

/* ── 9. SERVICES PREVIEW ─────────────────────────────────── */
.services-preview{
  padding:clamp(4rem,8vw,6.5rem) 0;
  background:var(--surface-2)
}
.services-preview-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem
}
.services-preview-grid > *{
  flex:1 1 calc(33.333% - 1.5rem);
  min-width:260px;
  max-width:380px
}

.service-preview-card{
  background:var(--surface);border-radius:var(--r-md);
  padding:2rem 1.8rem;
  box-shadow:var(--sh-sm);
  border:1px solid rgba(0,0,0,.05);
  transition:transform var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease);
  will-change:transform;
  display:flex;flex-direction:column
}
.service-preview-card:hover{
  transform:translateY(-10px);box-shadow:var(--sh-md)
}

.spc-icon{
  width:54px;height:54px;
  background:rgba(230,57,70,.09);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.3rem;transition:background var(--t-fast)
}
.service-preview-card:hover .spc-icon{background:rgba(230,57,70,.17)}
.spc-icon svg{width:26px;height:26px;stroke:var(--red)}

.service-preview-card h3{
  font-size:1.05rem;font-weight:700;
  margin-bottom:.6rem;color:var(--ink)
}
.service-preview-card p{
  font-size:.93rem;color:var(--muted);
  line-height:1.65;margin-bottom:1.2rem;flex:1
}
.card-link{
  font-size:.88rem;font-weight:600;color:var(--red);
  display:inline-flex;align-items:center;gap:.3rem;
  transition:gap var(--t-fast),color var(--t-fast);
  margin-top:auto
}
.card-link:hover{gap:.7rem}

/* ── 10. PROCESS TIMELINE ────────────────────────────────── */
.process-section{
  padding:clamp(4rem,8vw,6.5rem) 0;
  background:var(--surface)
}
.process-timeline{
  position:relative;
  padding-left:clamp(52px,8vw,80px);
  margin:2.5rem 0 .5rem
}
.process-timeline::before{
  content:'';position:absolute;
  top:48px;bottom:48px;
  left:clamp(29px,5vw,47px);
  width:2px;
  background:linear-gradient(to bottom,transparent,var(--red) 12%,var(--red) 88%,transparent);
  border-radius:2px
}
.process-step{
  display:flex;margin-bottom:2.8rem;position:relative
}
.process-step:last-child{margin-bottom:0}

.process-icon{
  position:absolute;
  left:clamp(-56px,-8vw,-58px);
  top:50%;transform:translateY(-50%);
  width:clamp(58px,8vw,76px);height:clamp(58px,8vw,76px);
  background:var(--red);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(230,57,70,.14),var(--sh-sm);
  z-index:2;
  transition:transform var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease);
  will-change:transform
}
.process-step:hover .process-icon{
  transform:translateY(-50%) scale(1.12);
  box-shadow:0 0 0 12px rgba(230,57,70,.18),var(--sh-md)
}
.process-icon svg{width:clamp(22px,3vw,30px);height:clamp(22px,3vw,30px);color:#fff}

.process-content{
  background:var(--surface);border:1px solid rgba(0,0,0,.07);
  padding:1.7rem 2rem;border-radius:var(--r-md);
  box-shadow:var(--sh-sm);flex:1;
  margin-left:clamp(16px,3vw,30px);position:relative;
  transition:transform var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease),
             border-color var(--t-med)
}
.process-content::before{
  content:'';position:absolute;
  top:50%;left:-9px;
  transform:translateY(-50%) rotate(45deg);
  width:16px;height:16px;
  background:var(--surface);
  border-left:1px solid rgba(0,0,0,.07);
  border-bottom:1px solid rgba(0,0,0,.07);
  z-index:-1
}
.process-step:hover .process-content{
  transform:translateX(8px);
  box-shadow:var(--sh-md);border-color:rgba(230,57,70,.2)
}
.process-number{
  font-size:.75rem;font-weight:700;color:var(--red);
  letter-spacing:.08em;text-transform:uppercase;
  display:block;margin-bottom:.35rem
}
.process-content h3{
  font-size:1.15rem;font-weight:700;
  color:var(--ink);margin-bottom:.5rem
}
.process-content p{color:var(--muted);font-size:.93rem;line-height:1.65}

/* ── 11. SERVICES GRID ───────────────────────────────────── */
.services{
  padding:clamp(4rem,8vw,6.5rem) 0;
  background:var(--surface-2)
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem
}
.service-card{
  background:var(--surface);padding:2.2rem;
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  border:1px solid rgba(0,0,0,.05);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease)
}
.service-card::after{
  content:'';position:absolute;
  bottom:0;left:0;width:0;height:3px;
  background:var(--red);
  transition:width var(--t-slow) var(--ease)
}
.service-card:hover{transform:translateY(-9px);box-shadow:var(--sh-md)}
.service-card:hover::after{width:100%}

.service-card-icon{
  width:52px;height:52px;
  background:rgba(230,57,70,.08);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.3rem;transition:background var(--t-fast)
}
.service-card:hover .service-card-icon{background:rgba(230,57,70,.18)}
.service-card-icon svg{width:24px;height:24px;stroke:var(--red)}
.service-card h3{
  font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.6rem
}
.service-card p{
  color:var(--muted);font-size:.93rem;line-height:1.65;flex:1;margin-bottom:1.4rem
}

/* ── 12. ABOUT ───────────────────────────────────────────── */
.about{
  padding:clamp(4rem,8vw,6.5rem) 0;background:var(--surface)
}
.about-content{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center
}
.about-tag{
  display:inline-block;
  background:rgba(230,57,70,.09);color:var(--red);
  font-size:.78rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  padding:.35rem .9rem;border-radius:20px;margin-bottom:1rem
}
.about-text h2{
  font-size:clamp(1.55rem,2.5vw,2.2rem);
  font-weight:800;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:1.3rem
}
.about-text p{color:var(--ink-soft);line-height:1.8;margin-bottom:1.1rem}

.about-checklist{
  margin:1.3rem 0 2rem;
  display:flex;flex-direction:column;gap:.7rem
}
.about-checklist li{
  display:flex;align-items:center;gap:.8rem;
  font-size:.95rem;color:var(--ink)
}
.about-checklist li::before{
  content:'';flex-shrink:0;
  width:20px;height:20px;border-radius:50%;
  background:var(--red)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center/60% no-repeat
}

.about-image{position:relative}
.about-image img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.about-image::before{
  content:'';position:absolute;
  top:-14px;right:-14px;width:100%;height:100%;
  border:3px solid var(--red);border-radius:var(--r-lg);
  z-index:-1;opacity:.35
}
.about-image-badge{
  position:absolute;bottom:-18px;left:-18px;
  background:var(--red);color:#fff;
  padding:.9rem 1.3rem;border-radius:var(--r-md);
  box-shadow:var(--sh-md);text-align:center
}
.badge-number{display:block;font-size:1.7rem;font-weight:800;line-height:1}
.badge-text{font-size:.78rem;opacity:.88}

/* ── 13. ADVANTAGES (drony) ──────────────────────────────── */
.advantages-section{
  padding:clamp(4rem,8vw,6.5rem) 0;
  background:#12141a;color:#fff
}
.advantages-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1.4rem;margin-top:1rem
}
.advantage-card{
  background:var(--dark-card);border:1px solid var(--dark-border);
  border-radius:var(--r-md);padding:2rem;
  position:relative;overflow:hidden;
  transition:transform var(--t-med) var(--ease),
             background var(--t-med),border-color var(--t-med)
}
.advantage-card::before{
  content:'';position:absolute;
  top:0;left:0;width:3px;height:0;
  background:var(--red);
  transition:height var(--t-slow) var(--ease)
}
.advantage-card:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(230,57,70,.3);
  transform:translateY(-7px)
}
.advantage-card:hover::before{height:100%}
.advantage-number{
  font-size:3.2rem;font-weight:900;color:rgba(255,255,255,.05);
  line-height:1;margin-bottom:.6rem;letter-spacing:-.04em
}
.advantage-icon{margin-bottom:.9rem}
.advantage-icon svg{width:32px;height:32px;stroke:var(--red)}
.advantage-card h3{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.6rem}
.advantage-card p{color:rgba(255,255,255,.62);font-size:.91rem;line-height:1.65}

/* ── 14. PORTFOLIO ALTERNATING ───────────────────────────── */
.portfolio-alternating{
  padding:clamp(4rem,8vw,6.5rem) 0;
  background:#13151b;color:#fff
}
.portfolio-items{margin-top:1.5rem}
.portfolio-item{
  display:flex;align-items:stretch;
  margin-bottom:3.5rem;
  background:rgba(255,255,255,.038);
  border:1px solid var(--dark-border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t-med) var(--ease),
             border-color var(--t-med)
}
.portfolio-item:last-child{margin-bottom:0}
.portfolio-item:hover{transform:translateY(-7px);border-color:rgba(230,57,70,.22)}
.portfolio-item.reverse{flex-direction:row-reverse}

.portfolio-image{
  flex:0 0 46%;
  overflow:hidden;min-height:300px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.25)
}
.portfolio-image img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)
}
.portfolio-item:hover .portfolio-image img{transform:scale(1.05)}

.portfolio-content{flex:1;padding:clamp(1.5rem,4vw,3rem)}
.portfolio-content h3{
  font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;color:#fff;
  margin-bottom:1.1rem;position:relative;padding-bottom:.9rem
}
.portfolio-content h3::after{
  content:'';position:absolute;left:0;bottom:0;
  width:36px;height:2px;background:var(--red);border-radius:2px
}
.portfolio-content p{
  color:rgba(255,255,255,.68);line-height:1.75;margin-bottom:1.1rem;
  font-size:.95rem
}
.portfolio-content ul{margin-bottom:1.6rem}
.portfolio-content ul li{
  color:rgba(255,255,255,.72);margin-bottom:.45rem;
  padding-left:1.3rem;position:relative;font-size:.93rem
}
.portfolio-content ul li::before{
  content:'→';position:absolute;left:0;
  color:var(--red);font-weight:700
}

/* ── 15. FAQ ─────────────────────────────────────────────── */
.faq{padding:clamp(4rem,8vw,6.5rem) 0}
.faq-dark{background:#13151b;color:#fff}

.faq-container{max-width:780px;margin:0 auto}
.faq-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  margin-bottom:.45rem;
  overflow:hidden;
  transition:border-color var(--t-fast), background var(--t-fast);
  background:rgba(255,255,255,.03);
}
.faq-dark .faq-item:hover{
  border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.045);
}
.faq-item.active{
  border-color:rgba(230,57,70,.28) !important;
  background:rgba(255,255,255,.045) !important;
}

.faq-question{
  width:100%;text-align:left;
  border:none;outline:none;
  padding:1.05rem 1.4rem;
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;
  background:transparent;
  transition:background var(--t-fast);
  user-select:none;
  gap:1rem;
}
.faq-question:hover{background:rgba(255,255,255,.03)}
.faq-question h3,
.faq-question > span:first-child{
  margin:0;
  font-size:.97rem;font-weight:500;
  color:rgba(255,255,255,.92);
  line-height:1.45;
}
.faq-item.active .faq-question h3,
.faq-item.active .faq-question > span:first-child{color:#fff;}
.faq-icon{
  width:28px;height:28px;min-width:28px;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.05);
  transition:transform var(--t-med) var(--ease),
             background var(--t-fast),
             border-color var(--t-fast),
             color var(--t-fast);
  flex-shrink:0;
}
.faq-item:hover .faq-icon{
  border-color:rgba(255,255,255,.35);
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);
}
.faq-item.active .faq-icon{
  transform:rotate(45deg);
  background:var(--red);
  color:#fff;
  border-color:var(--red);
  box-shadow:0 0 12px rgba(230,57,70,.35);
}
.faq-icon-svg{
  width:13px;height:13px;
  display:block;
  transition:transform var(--t-med) var(--ease);
  stroke:currentColor;
}
.faq-answer{
  padding:0 1.4rem;max-height:0;overflow:hidden;
  color:rgba(255,255,255,.88);font-size:.97rem;line-height:1.78;
  transition:max-height var(--t-slow) var(--ease),
             padding var(--t-med);
}
.faq-answer p{margin:0;}
.faq-item.active .faq-answer{
  max-height:600px;
  padding:.85rem 1.4rem 1.2rem;
  border-top:1px solid rgba(255,255,255,.06);
}

/* ── 16. CTA BANNER ──────────────────────────────────────── */
.cta-banner{
  background:linear-gradient(130deg,#111318 0%,#200d0d 100%);
  padding:clamp(3rem,6vw,5.5rem) 0;
  position:relative;overflow:hidden
}
.cta-banner::before{
  content:'';position:absolute;
  top:-40%;right:-8%;width:520px;height:520px;
  background:radial-gradient(circle,rgba(230,57,70,.16) 0%,transparent 68%);
  pointer-events:none
}
.cta-banner::after{
  content:'';position:absolute;
  bottom:-40%;left:-8%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(230,57,70,.09) 0%,transparent 68%);
  pointer-events:none
}
.cta-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;position:relative;z-index:1
}
.cta-text h2{
  font-size:clamp(1.45rem,3vw,2.2rem);
  font-weight:800;color:#fff;margin-bottom:.4rem;letter-spacing:-.02em
}
.cta-text p{color:rgba(255,255,255,.62);font-size:1rem}

/* ── 17. CONTACT ─────────────────────────────────────────── */
.contact{
  padding:clamp(4rem,8vw,6.5rem) 0;
  background:#1c1e26;color:#fff
}
.contact-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start
}

.contact-info h2{
  font-size:clamp(1.6rem,2.5vw,2rem);font-weight:800;color:#fff;
  margin-bottom:.9rem;position:relative;padding-bottom:.9rem
}
.contact-info h2::after{
  content:'';position:absolute;left:0;bottom:0;
  width:38px;height:3px;background:var(--red);border-radius:2px
}
.contact-info>p{
  margin-bottom:2.2rem;color:rgba(255,255,255,.75);
  font-size:.97rem;line-height:1.75
}
.contact-details{margin-bottom:2.2rem}

.contact-item{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.038);border:1px solid var(--dark-border);
  border-radius:var(--r-md);margin-bottom:.8rem;
  transition:background var(--t-fast),
             border-color var(--t-fast),
             transform var(--t-fast)
}
.contact-item:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(230,57,70,.25);transform:translateY(-2px)
}
.contact-icon{
  width:44px;height:44px;min-width:44px;
  background:var(--red);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(230,57,70,.32)
}
.contact-icon svg{stroke:#fff;width:18px;height:18px}
.contact-text h3{
  font-size:.88rem;font-weight:600;
  color:rgba(255,255,255,.62);margin-bottom:.15rem
}
.contact-text p,.contact-text a{
  color:#fff;font-size:.97rem;font-weight:500;margin:0
}
.contact-text a:hover{color:var(--red)}

.contact-map{
  margin-top:1.8rem;border-radius:var(--r-md);
  overflow:hidden;border:2px solid var(--dark-border);
  transition:border-color var(--t-fast)
}
.contact-map:hover{border-color:rgba(230,57,70,.35)}
.contact-map iframe{display:block;width:100%}

/* Map lazy-load placeholder */
.map-placeholder{
  width:100%;height:220px;
  background:linear-gradient(135deg,#14161e,#1a1d28);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;
  color:rgba(255,255,255,.4);font-size:.85rem;
  cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast);
  border-radius:var(--r-md);
}
.map-placeholder:hover{
  background:linear-gradient(135deg,#1c1f2a,#222638);
  color:rgba(255,255,255,.65);
}
.map-placeholder svg{
  stroke:var(--red);opacity:.7;flex-shrink:0;
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.map-placeholder:hover svg{opacity:1;transform:scale(1.1);}
.contact-map iframe{display:block;width:100%;height:260px;}

/* Form */
.contact-form{
  background:#fff;padding:clamp(1.8rem,4vw,2.8rem);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  position:relative;overflow:hidden
}
.contact-form::before{
  content:'';position:absolute;top:0;inset-inline:0;
  height:4px;background:var(--red)
}
.contact-form h2{
  font-size:1.45rem;font-weight:800;color:var(--ink);
  margin-bottom:1.8rem;text-align:center
}
.form-group{margin-bottom:1.4rem;position:relative}
.form-label{
  display:block;font-size:.85rem;font-weight:600;
  color:var(--ink-soft);margin-bottom:.45rem
}
.form-control{
  width:100%;padding:.85rem 1.1rem;
  border:1.5px solid #e2e5ec;border-radius:var(--r-sm);
  font-size:.95rem;font-family:var(--font);color:var(--ink);
  background:#fafbfc;outline:none;
  transition:border-color var(--t-fast),
             background var(--t-fast),
             box-shadow var(--t-fast)
}
.form-control:focus{
  border-color:var(--red);background:#fff;
  box-shadow:0 0 0 3px rgba(230,57,70,.14)
}
.form-control::placeholder{color:#adb5bd}
.form-control:invalid:not(:placeholder-shown){border-color:#f59e0b}
.form-control:valid:not(:placeholder-shown){border-color:#22c55e}

textarea.form-control{min-height:130px;resize:vertical}

.submit-btn{
  width:100%;padding:.95rem;
  background:var(--red);color:#fff;
  border:none;border-radius:var(--r-sm);
  font-weight:700;font-size:.97rem;font-family:var(--font);
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:.4rem;
  transition:background var(--t-fast),
             transform var(--t-fast),
             box-shadow var(--t-fast)
}
.submit-btn:hover{
  background:var(--red-dark);transform:translateY(-3px);
  box-shadow:0 8px 28px var(--red-glow)
}
.submit-btn:active{transform:scale(.98)}
.submit-btn:disabled{opacity:.6;pointer-events:none}

/* Success / error toast */
.form-toast{
  margin-top:.8rem;padding:.7rem 1rem;
  border-radius:var(--r-sm);font-size:.9rem;font-weight:600;
  text-align:center;opacity:0;
  transition:opacity var(--t-med)
}
.form-toast.show{opacity:1}
.form-toast.success{background:#dcfce7;color:#166534}
.form-toast.error  {background:#fee2e2;color:#991b1b}

/* ── 18. FOOTER ──────────────────────────────────────────── */
.minimal-footer{
  background:#0a0c10;
  color:rgba(255,255,255,.55);
  padding:clamp(3rem,5vw,4.5rem) 0 0;
  font-size:.91rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-main{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1.1fr;
  gap:clamp(1.5rem,3vw,3rem);
  padding-bottom:clamp(2rem,4vw,3rem);
  align-items:start;
}

/* Brand column */
.footer-brand .footer-logo-link{display:inline-block;margin-bottom:1.1rem;}
.footer-brand .footer-logo-link img{
  width:clamp(100px,12vw,140px);
  height:auto;
  opacity:.8;
  transition:opacity var(--t-fast),transform var(--t-fast),filter var(--t-fast);
}
.footer-brand .footer-logo-link:hover img{
  opacity:1;
  transform:scale(1.03);
  filter:drop-shadow(0 0 10px rgba(230,57,70,.4));
}
.footer-desc{
  font-size:.875rem;
  color:rgba(255,255,255,.42);
  line-height:1.75;
  max-width:260px;
}

/* Headings */
.footer-section h4{
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:1rem;
  position:relative;
  padding-bottom:.65rem;
}
.footer-section h4::after{
  content:'';
  position:absolute;left:0;bottom:0;
  width:20px;height:2px;
  background:var(--red);border-radius:2px;
}

/* Links */
.footer-links,.footer-contact{
  display:flex;flex-direction:column;gap:0;
  align-items:flex-start;
}
.footer-links li,.footer-contact li{
  line-height:1;
  width:100%;
}
.footer-links a,.footer-contact a{
  color:rgba(255,255,255,.48);
  font-size:.88rem;
  font-weight:400;
  padding:.38rem 0;
  display:block;
  width:100%;
  transition:color var(--t-fast),padding-left var(--t-fast);
}
.footer-links a:hover{
  color:rgba(255,255,255,.92);
  padding-left:6px;
}
.footer-contact a:hover{color:rgba(255,255,255,.92);}
.footer-contact li{
  color:rgba(255,255,255,.4);
  font-size:.88rem;
  line-height:1.65;
  padding:.18rem 0;
}

/* Divider */
.footer-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 30%,rgba(255,255,255,.08) 70%,transparent);
  margin:0;
}

/* Copyright bar */
.footer-copyright{
  padding:1.2rem 0 1.4rem;
}
.footer-copyright .container{
  display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:.6rem;
  font-size:.8rem;
}
.copyright{color:rgba(255,255,255,.3);margin:0;}
.creator{
  color:rgba(255,255,255,.3);
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.25rem;
  line-height:1.4;
}

.creator a{color:rgba(230,57,70,.7);transition:color var(--t-fast);}
.creator a:hover{color:var(--red);}
.creator-partof{
  display:flex;
  align-items:center;
  gap:.35rem;
  color:rgba(255,255,255,.22);
  font-size:.72rem;
  letter-spacing:.04em;
}
.creator-utilite{display:inline-flex;align-items:center;}
.utilite-logo{
  height:15px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
  filter:brightness(0) invert(.45);
  transition:filter var(--t-fast);
}
.creator-utilite:hover .utilite-logo{filter:brightness(0) invert(.7);}


/* ── 19. BACK TO TOP ─────────────────────────────────────── */
.back-to-top{
  position:fixed;bottom:1.8rem;right:1.8rem;
  width:46px;height:46px;
  background:var(--red);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px var(--red-glow);
  opacity:0;visibility:hidden;
  transform:translateY(14px);
  transition:opacity var(--t-med),visibility var(--t-med),
             transform var(--t-med) var(--ease);
  z-index:99;
  will-change:transform
}
.back-to-top:hover{background:var(--red-dark);transform:translateY(-3px)!important}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}

/* ── 20. SCROLL REVEAL ───────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity var(--t-slow) var(--ease),
             transform var(--t-slow) var(--ease);
  transition-delay:var(--delay,0s)
}
.reveal.visible{opacity:1;transform:none}

/* Stagger helpers */
.stagger-1{--delay:.08s}
.stagger-2{--delay:.16s}
.stagger-3{--delay:.24s}
.stagger-4{--delay:.32s}
.stagger-5{--delay:.40s}

/* ── 21. KEYFRAMES ───────────────────────────────────────── */
@keyframes fadeU{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeD{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}

/* ── 22. RESPONSIVE ──────────────────────────────────────── */

/* ─ Tablet landscape 1024px ─ */
@media(max-width:1100px){
  .footer-main{grid-template-columns:1.4fr 1fr 1fr}
  .about-content{grid-template-columns:1fr;gap:3rem}
  .about-image{max-width:520px;margin:0 auto}
  .portfolio-image{min-height:260px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

/* ─ Tablet portrait 768px ─ */
@media(max-width:768px){
  :root{--header-h:62px}

  /* Nav */
  .hamburger{display:flex}
  .nav-menu{
    position:fixed;
    top:var(--header-h);left:-100%;
    flex-direction:column;gap:.3rem;
    background:rgba(10,11,16,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    width:100%;padding:1.5rem 1rem 2rem;
    transition:left var(--t-med) var(--ease);
    z-index:498;
    border-bottom:2px solid var(--red)
  }
  .nav-menu.open{left:0}
  .nav-menu li a{
    font-size:1.05rem;padding:.75rem 1rem;border-radius:var(--r-sm);
    color:#fff!important
  }
  .nav-menu li a:hover{background:rgba(230,57,70,.18)}
  .nav-cta{background:var(--red)!important}
  .services-grid{grid-template-columns:repeat(2,1fr)}

  /* Hero split mobile fixes removed since it's a slider now */
  .hero-welcome-logo{width:clamp(140px,45vw,240px)}
  .hero-welcome-description{font-size:.92rem}

  /* Hero page */
  .hero-inner{padding-top:calc(var(--header-h) + 1.5rem)}

  /* Portfolio */
  .portfolio-item,.portfolio-item.reverse{flex-direction:column}
  .portfolio-image{flex:none;width:100%;min-height:220px;max-height:300px}
  .portfolio-content{padding:1.6rem}

  /* Process */
  .process-timeline{padding-left:52px}
  .process-timeline::before{left:31px}
  .process-icon{left:-52px;width:60px;height:60px}
  .process-content{margin-left:18px;padding:1.4rem 1.5rem}

  /* CTA */
  .cta-inner{flex-direction:column;text-align:center}

  /* Services preview */
  .services-preview-grid > *{flex:1 1 calc(50% - 1.5rem);max-width:50%}

  /* Stats */
  .stat-item{padding:.75rem}
}

/* ─ Phone 480px ─ */
@media(max-width:480px){
  .hero-welcome-content{padding:1.5rem 1rem;min-height:320px;height:auto}
  .hero-welcome-logo{width:clamp(120px,55vw,200px)}
  .hero-welcome-description{font-size:.88rem;margin-bottom:1.5rem}

  .stats-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .stat-number{font-size:1.8rem}

  .services-preview-grid > *{flex:1 1 100%;max-width:100%}
  .services-grid{grid-template-columns:1fr}
  .advantages-grid{grid-template-columns:1fr}

  .process-timeline{padding-left:44px}
  .process-timeline::before{left:25px}
  .process-icon{left:-44px;width:50px;height:50px}
  .process-icon svg{width:20px;height:20px}
  .process-content{margin-left:12px;padding:1.2rem}

  .footer-main{grid-template-columns:1fr}
  .footer-logo{grid-column:span 1;padding-top:0}
  .footer-copyright .container{flex-direction:column;text-align:center}

  .contact-form{padding:1.6rem 1.2rem}
  .contact-container{grid-template-columns:1fr}

  .about-image-badge{bottom:-14px;left:-10px;padding:.7rem 1rem}
  .badge-number{font-size:1.4rem}

  .btn-large{padding:.8rem 1.8rem;font-size:.95rem}
  .back-to-top{bottom:1.2rem;right:1.2rem;width:42px;height:42px}
}

/* ─ Very small 360px ─ */
@media(max-width:360px){
  .hero-welcome-half{min-height:44vh}
  .stats-grid{grid-template-columns:1fr}
  .services-preview-grid > *{flex:1 1 100%;max-width:100%}
  .hero-buttons{flex-direction:column;align-items:center}
  .btn{width:100%;justify-content:center}
}

/* ── 23. NEW ANIMATIONS ──────────────────────────────────── */

/* Scroll progress bar */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--red), #ff6b7a, var(--red));
  background-size: 200% 100%;
  z-index: 9999;
  transition: width .1s linear;
  animation: shimmerBar 2.5s linear infinite;
}
@keyframes shimmerBar {
  0%   { background-position: 100% 0 }
  100% { background-position: -100% 0 }
}

/* Hero badge (typing text) */
.hero-badge-top {
  position: absolute;
  top: calc(var(--header-h) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: .38rem 1.1rem;
  white-space: nowrap;
  animation: fadeD .7s var(--ease) both;
  pointer-events: none;
}
.hero-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.5);
  animation: pulseDot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5) }
  50%      { box-shadow: 0 0 0 7px rgba(74,222,128,0) }
}
.hero-badge-text {
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .02em;
  min-width: 180px;
}
.hero-badge-cursor {
  display: inline-block;
  width: 2px; height: .85em;
  background: #fff;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink .7s step-end infinite;
}
@keyframes blink { 50% { opacity: 0 } }

/* Stats icon */
.stat-icon {
  width: 44px; height: 44px;
  background: rgba(230,57,70,.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .7rem;
  transition: transform var(--t-med) var(--ease), background var(--t-fast);
}
.stat-item:hover .stat-icon {
  transform: scale(1.18) rotate(-6deg);
  background: rgba(230,57,70,.24);
}
.stat-icon svg { width: 22px; height: 22px; stroke: var(--red) }

/* Stat glow pulse on count finish */
@keyframes statGlow {
  0%,100% { text-shadow: none }
  50%      { text-shadow: 0 0 20px var(--red-glow) }
}
.stat-number.counted { animation: statGlow 1.2s ease }

/* Service card shimmer on hover */
.service-preview-card {
  overflow: hidden;
  position: relative;
}
.service-preview-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.18) 50%,
    transparent 60%
  );
  transition: left .55s var(--ease);
  pointer-events: none;
}
.service-preview-card:hover::after { left: 150% }

/* Process timeline connector pulse */
.process-timeline::before {
  animation: lineGrow 1.2s var(--ease) both;
}
@keyframes lineGrow {
  from { transform: scaleY(0); transform-origin: top }
  to   { transform: scaleY(1); transform-origin: top }
}

/* CTA banner floating orbs */
.cta-banner .cta-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat 6s ease-in-out infinite;
}
.cta-orb-1 {
  width: 80px; height: 80px;
  background: rgba(230,57,70,.18);
  top: 15%; right: 20%;
  animation-delay: 0s;
}
.cta-orb-2 {
  width: 44px; height: 44px;
  background: rgba(230,57,70,.12);
  bottom: 20%; right: 35%;
  animation-delay: 1.4s;
}
.cta-orb-3 {
  width: 120px; height: 120px;
  background: rgba(230,57,70,.07);
  top: 30%; left: 15%;
  animation-delay: 2.8s;
}
@keyframes orbFloat {
  0%,100% { transform: translateY(0) scale(1) }
  50%     { transform: translateY(-18px) scale(1.07) }
}

/* Hero welcome half: subtle ken-burns via scale on pseudo */
.hero-welcome-half.active .hero-overlay {
  animation: kenBurns 8s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1) }
  to   { transform: scale(1.04) }
}

/* Gradient text for section titles on dark backgrounds */
.gradient-text {
  background: linear-gradient(90deg, var(--red), #ff8c94);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Footer logo hover glow */
.footer-logo-link:hover img {
  filter: drop-shadow(0 0 12px rgba(230,57,70,.5));
  opacity: 1 !important;
}

/* Back-to-top pulse ring */
.back-to-top.show::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--red);
  animation: ringPulse 1.8s ease-out infinite;
}
@keyframes ringPulse {
  0%   { opacity: .6; transform: scale(1) }
  100% { opacity: 0;  transform: scale(1.55) }
}

/* Floating geo shapes in the hero section */
.hero-geo-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: .15;
  animation: geoRotate 20s linear infinite;
}
.hero-geo-shape svg { width: 100%; height: 100% }
.geo-1 { width: 120px; height: 120px; top: 15%; left: 5%; animation-duration: 25s }
.geo-2 { width: 70px;  height: 70px;  bottom: 25%; right: 8%; animation-direction: reverse; animation-duration: 18s }
.geo-3 { width: 50px;  height: 50px;  top: 60%; left: 40%; animation-duration: 30s }

@keyframes geoRotate {
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}

/* Reveal – scale variant for cards */
.reveal-scale {
  opacity: 0;
  transform: scale(.94);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal-scale.visible { opacity: 1; transform: scale(1) }

/* ── 24. PRINT ───────────────────────────────────────────── */
@media print{
  #main-header,.back-to-top,.hero-particles,.cta-banner{display:none}
  body{font-size:11pt;color:#000;background:#fff}
  a[href]::after{content:" ("attr(href)")";font-size:.85em;color:#666}
  .contact-map{display:none}
}