/* ============================================================
   VERTEX DIGITIZING — style.css v6
   Hero: 3-image mosaic | Process: 2 category tabs
   Animations: slowed down
   ============================================================ */
:root{
  --white:#FFFFFF;--light:#F7F8FC;--light-2:#EEEEF5;
  --ink:#0F1117;--ink-70:#3D4055;--muted:#8589A0;
  --accent:#E84A0C;--accent-2:#FF6030;--gold:#D4940C;
  --border:#E3E5EF;--success:#0CAD70;
  --dark:#0F1117;--dark-2:#191B25;--dark-3:#22253A;--dark-b:#2E3245;
  --r3:3px;--r6:6px;--r12:12px;--r20:20px;
  --fh:'Outfit',sans-serif;--fb:'Inter',sans-serif;
  --sh:0 2px 16px rgba(15,17,23,.07);--sh2:0 8px 40px rgba(15,17,23,.12);
  --tr:.3s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--fb);background:var(--dark);color:var(--white);overflow-x:hidden;line-height:1.65}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* ── UTILITIES ──────────────────────────────────────────── */
.container{max-width:1180px;margin:0 auto;padding:0 28px}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(232,74,12,.12);border:1px solid rgba(232,74,12,.25);border-radius:100px;padding:5px 14px;font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}
.chip.light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.chip.light::before{background:rgba(255,255,255,.6)}
.h2{font-family:var(--fh);font-size:clamp(1.8rem,3.5vw,2.9rem);font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
.h2 em{font-style:normal;color:var(--accent)}
.h2 .wh{color:var(--white)}.h2 em.wh{color:var(--accent)}
.body-lg{font-size:16px;color:var(--ink-70);line-height:1.8}
.body-sm{font-size:14px;color:var(--muted);line-height:1.75}
.accent-line{width:44px;height:3px;background:var(--accent);border-radius:2px;margin:18px 0}
.accent-line.c{margin:18px auto}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:var(--r6);font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:.01em;transition:all var(--tr);cursor:pointer;border:2px solid transparent;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--white);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(232,74,12,.35)}
.btn-dark{background:var(--dark);color:var(--white);border-color:var(--dark)}
.btn-dark:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.btn-white{background:var(--white);color:var(--accent);border-color:var(--white)}
.btn-white:hover{background:var(--accent);color:var(--white);border-color:var(--accent)}
.btn-sm{padding:9px 20px;font-size:13px}

/* ── PRELOADER ──────────────────────────────────────────── */
#preloader{position:fixed;inset:0;background:var(--dark);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .7s,visibility .7s}
#preloader.gone{opacity:0;visibility:hidden;pointer-events:none}
.pl-name{font-family:var(--fh);font-size:1.6rem;font-weight:800;color:var(--white);letter-spacing:-.02em;text-align:center}
.pl-name span{color:var(--accent)}
.pl-bar{width:100px;height:2px;background:var(--dark-3);margin:16px auto 0;border-radius:2px;overflow:hidden}
.pl-bar::after{content:'';display:block;width:40%;height:100%;background:var(--accent);animation:plbar 1.1s ease-in-out infinite alternate}
@keyframes plbar{from{margin-left:0}to{margin-left:60%}}

/* ── ANNOUNCEMENT BAR ───────────────────────────────────── */
#ann-bar{width:100%;background:var(--dark-2);padding:10px 0;overflow:hidden;border-bottom:1px solid var(--dark-b);position:relative;z-index:1002}
.ann-marquee{display:flex;width:max-content;animation:ann 55s linear infinite}
.ann-item{display:flex;align-items:center;gap:10px;padding:0 28px;white-space:nowrap;font-family:var(--fh);font-size:12px;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.5)}
.ann-hi{color:var(--accent);font-weight:700}
.ann-bold{color:var(--white);font-weight:700}
.ann-sep{color:var(--dark-b);font-size:16px;padding:0 4px}
@keyframes ann{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


/* ══ LOGO IMAGE STYLES ═══════════════════════════════════ */

/* Preloader — pulsing large logo */
.pl-logo-img{
  width:100px;height:100px;
  border-radius:18px;
  display:block;margin:0 auto 18px;
  object-fit:contain;
  background:#000;
  animation:pl-logo-pulse 2.2s ease-in-out infinite;
  box-shadow:0 0 40px rgba(232,74,12,.25);
}
@keyframes pl-logo-pulse{
  0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 40px rgba(232,74,12,.25)}
  50%{transform:scale(.96);opacity:.8;box-shadow:0 0 20px rgba(232,74,12,.1)}
}

/* Navbar — compact beside brand name */
.nav-logo-img{
  width:40px;height:40px;
  border-radius:9px;
  object-fit:contain;
  background:#000;
  flex-shrink:0;
  transition:transform .35s ease;
}
.nav-logo:hover .nav-logo-img{transform:scale(1.07) rotate(-2deg)}

/* Hero — large branding above eyebrow */
.logo-hero{
  width:80px;height:80px;
  border-radius:16px;
  object-fit:contain;
  background:#000;
  margin-bottom:20px;
  display:block;
  box-shadow:0 8px 32px rgba(232,74,12,.22);
}

/* Section headers — small accent logo beside chip */
.logo-section-sm{
  width:40px;height:40px;
  border-radius:9px;
  object-fit:contain;
  background:#000;
  flex-shrink:0;
}
.logo-dark-bg{
  border-color:rgba(255,255,255,.1);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}

/* CTA banner — large centered logo above headline */
.logo-cta{
  width:110px;height:110px;
  border-radius:22px;
  object-fit:contain;
  background:#000;
  display:block;
  margin:0 auto 28px;
  box-shadow:0 12px 48px rgba(0,0,0,.3);
}

/* Contact info panel — medium logo above title */
.logo-contact{
  width:64px;height:64px;
  border-radius:14px;
  object-fit:contain;
  background:#000;
  display:block;
  margin-bottom:18px;
  box-shadow:0 6px 24px rgba(232,74,12,.18);
}

/* Footer — larger than before */
.footer-logo-img{
  width:48px;height:48px;
  border-radius:10px;
  object-fit:contain;
  background:#000;
  flex-shrink:0;
}
.logo-footer{
  width:52px!important;height:52px!important;
  border-radius:11px!important;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}

/* Testimonials — faded large watermark logo in bg */
.logo-testi-watermark{
  position:absolute;
  top:-20px;right:0;
  width:120px;height:120px;
  border-radius:20px;
  object-fit:cover;
  opacity:.07;
  pointer-events:none;
  filter:grayscale(1) brightness(3);
}

/* Promo modal visual panel logo */
.promo-logo-watermark{
  width:68px;height:68px;
  border-radius:14px;
  object-fit:contain;
  background:#000;
  margin-bottom:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}

/* Mobile adjustments */
@media(max-width:768px){
  .logo-hero{width:60px;height:60px;border-radius:12px;margin-bottom:16px}
  .logo-cta{width:80px;height:80px;border-radius:16px;margin-bottom:20px}
  .logo-contact{width:52px;height:52px}
  .logo-testi-watermark{width:80px;height:80px;opacity:.05}
}
@media(max-width:480px){
  .logo-hero{width:52px;height:52px}
  .pl-logo-img{width:80px;height:80px;border-radius:14px}
}
/* ── NAVBAR ─────────────────────────────────────────────── */
#navbar{position:sticky;top:0;z-index:1001;background:var(--dark);border-bottom:1px solid var(--dark-b);transition:box-shadow .3s,background .3s}
#navbar.scrolled{background:rgba(15,17,23,.97);backdrop-filter:blur(16px);box-shadow:0 4px 24px rgba(0,0,0,.35)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}

.nav-brand{font-family:var(--fh);font-size:1.1rem;font-weight:800;letter-spacing:-.02em;color:var(--white)}
.nav-menu{display:flex;align-items:center;gap:4px}
.nav-menu a{font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.65);padding:7px 12px;border-radius:var(--r6);transition:all var(--tr);white-space:nowrap}
.nav-menu a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-phone{font-family:var(--fh);font-size:13px;font-weight:600;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:6px;transition:color var(--tr);white-space:nowrap}
.nav-phone:hover{color:var(--white)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;padding:6px;cursor:pointer;flex-shrink:0}
.nav-burger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:var(--tr)}
.nav-burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-burger.open span:nth-child(2){opacity:0;transform:translateX(-6px)}
.nav-burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ════════════════════════════════════
   ★ HERO — 3-image mosaic, no slider
   ════════════════════════════════════ */
#hero{height:calc(100vh - 107px);min-height:560px;background:var(--dark);display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;position:relative;padding:0}
#hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}
#hero::after{content:'';position:absolute;top:-20%;left:-10%;width:65%;height:90%;background:radial-gradient(ellipse,rgba(232,74,12,.09) 0%,transparent 65%);pointer-events:none;z-index:0}
.hero-bg-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.hero-bg-glow{position:absolute;top:-20%;left:-10%;width:65%;height:90%;background:radial-gradient(ellipse,rgba(232,74,12,.09) 0%,transparent 65%);pointer-events:none}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:60px 48px 60px 28px;max-width:640px;margin-left:auto}
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.hero-eline{width:28px;height:2px;background:var(--accent);border-radius:2px;flex-shrink:0}
.hero-etxt{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.hero-h1{font-family:var(--fh);font-size:clamp(2.4rem,4.8vw,4.6rem);font-weight:800;line-height:1.06;letter-spacing:-.04em;color:var(--white);margin-bottom:20px}
.hero-h1 em{font-style:normal;color:var(--accent)}
.hero-desc{font-size:15px;color:rgba(255,255,255,.5);max-width:420px;line-height:1.85;margin-bottom:32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
/* Stats — locked dimensions */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--dark-b);border-radius:var(--r12);overflow:hidden}
.hs{padding:16px 12px;text-align:center;border-right:1px solid var(--dark-b)}
.hs:last-child{border-right:none}
.hs-n{font-family:var(--fh);font-size:1.5rem;font-weight:800;color:var(--white);display:block;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;min-height:1.6rem}
.hs-l{font-size:10px;font-weight:500;color:rgba(255,255,255,.3);letter-spacing:.04em;margin-top:6px;display:block}

/* ── Hero mosaic panel ── */
.hero-mosaic{
  position:relative;
  background:var(--dark-2);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:12px;
  padding:24px;
  width:100%;
  height:100%;
}
/* subtle corner accent */
.hero-mosaic::before{content:'';position:absolute;top:0;right:0;width:3px;height:60%;background:linear-gradient(to bottom,var(--accent),transparent);z-index:3}
.hm-img{border-radius:14px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.06);min-height:0;min-width:0}
.hm-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.hm-img:hover img{transform:scale(1.04)}
/* equal 2x2 grid */
.hm-img:nth-child(1){grid-column:1;grid-row:1}
.hm-img:nth-child(2){grid-column:2;grid-row:1}
.hm-img:nth-child(3){grid-column:1;grid-row:2}
.hm-img:nth-child(4){grid-column:2;grid-row:2}
/* floating label on each mosaic image */
.hm-lbl{
  position:absolute;bottom:10px;left:10px;z-index:2;
  background:rgba(15,17,23,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:100px;
  padding:4px 11px;
  font-family:var(--fh);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);
}
.hm-lbl.accent{background:var(--accent);border-color:var(--accent);color:#fff}
/* bottom-left floating status badge */
.hero-badge{
  position:absolute;bottom:20px;left:6px;z-index:10;
  background:rgba(15,17,23,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r12);
  padding:12px 16px;display:flex;align-items:center;gap:10px;
}
.badge-dot{width:9px;height:9px;border-radius:50%;background:var(--success);animation:pdot 2.5s ease infinite;flex-shrink:0}
@keyframes pdot{0%,100%{box-shadow:0 0 0 0 rgba(12,173,112,.4)}60%{box-shadow:0 0 0 8px rgba(12,173,112,0)}}
.badge-main{font-family:var(--fh);font-size:12px;font-weight:700;color:var(--white);display:block}
.badge-sub{font-size:10px;color:rgba(255,255,255,.4)}

/* ── MARQUEE ────────────────────────────────────────────── */
.mq-band{background:var(--accent);padding:12px 0;overflow:hidden}
.mq-track{display:flex;width:max-content;animation:mq-roll 38s linear infinite}
.mq-item{display:flex;align-items:center;gap:14px;padding:0 24px;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap}
.mq-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5);flex-shrink:0}
@keyframes mq-roll{to{transform:translateX(-50%)}}

/* ── SECTION BASE ───────────────────────────────────────── */
section{padding:88px 0}
.sec-head{margin-bottom:48px}
.sec-head.c{text-align:center}
.sec-head.c .body-lg{margin:12px auto 0;max-width:520px}

/* ── SERVICES ───────────────────────────────────────────── */
#services{background:var(--white)}
.svc-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:48px}
.svc-right p{font-size:15px;color:var(--muted);line-height:1.85;padding-left:24px;border-left:3px solid var(--border)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc-card{border:1px solid var(--border);border-radius:var(--r20);overflow:hidden;background:var(--white);transition:transform .4s var(--tr),box-shadow .4s var(--tr),border-color .3s}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--sh2);border-color:rgba(232,74,12,.25)}
.svc-card:hover .svc-thumb img{transform:scale(1.06)}
.svc-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--dark)}
.svc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;display:block}
.svc-body{padding:20px}
.svc-name{font-family:var(--fh);font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:7px}
.svc-desc{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:14px}
.svc-tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:3px 9px;border-radius:100px;background:var(--light-2);color:var(--ink-70);border:1px solid var(--border)}

/* ── ABOUT ──────────────────────────────────────────────── */
#about{background:var(--light)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-left{position:relative}
.ba-wrap{position:relative;border-radius:var(--r20);overflow:hidden;border:1px solid var(--border);aspect-ratio:1.15;user-select:none;cursor:col-resize;box-shadow:var(--sh2);min-height:200px}
.ba-after,.ba-before{position:absolute;inset:0}
.ba-after img,.ba-before img{width:100%;height:100%;object-fit:contain;display:block}
.ba-before{clip-path:inset(0 50% 0 0);z-index:2}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--white);z-index:5;transform:translateX(-50%);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--white);border:3px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:13px;font-weight:700;box-shadow:0 2px 12px rgba(0,0,0,.2);pointer-events:none;z-index:6}
.ba-lbl{position:absolute;top:14px;z-index:7;font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r3)}
.ba-lbl.b{left:14px;background:rgba(15,17,23,.75);color:#fff}
.ba-lbl.a{right:14px;background:var(--accent);color:#fff}
.about-counter{position:absolute;bottom:-18px;right:-18px;background:var(--accent);border-radius:var(--r20);padding:20px 24px;text-align:center;box-shadow:0 8px 32px rgba(232,74,12,.3);z-index:3}
.acc-n{font-family:var(--fh);font-size:2.4rem;font-weight:800;color:var(--white);display:block;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;min-height:2.8rem}
.acc-l{font-size:11px;color:rgba(255,255,255,.75);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;display:block}
.about-feats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.af{display:flex;gap:12px;align-items:flex-start}
.af-ico{width:36px;height:36px;flex-shrink:0;border-radius:var(--r6);background:rgba(232,74,12,.08);border:1px solid rgba(232,74,12,.15);display:flex;align-items:center;justify-content:center}
.af-ico svg{width:16px;height:16px;stroke:var(--accent)}
.af-t{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px}
.af-d{font-size:12px;color:var(--muted);line-height:1.6}

/* ════════════════════════════════════
   ★ PROCESS — 2 side-by-side columns
   ════════════════════════════════════ */
#process{background:var(--dark)}

/* Two columns */
.proc-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:48px;
}
.proc-col{
  background:var(--dark-3);
  border:1px solid var(--dark-b);
  border-radius:var(--r20);
  padding:32px;
  transition:border-color .3s;
}
.proc-col:hover{border-color:rgba(232,74,12,.2)}

/* Column header */
.proc-col-head{
  display:flex;align-items:center;gap:14px;
  padding-bottom:24px;
  margin-bottom:28px;
  border-bottom:1px solid var(--dark-b);
}
.proc-col-ico{
  width:48px;height:48px;flex-shrink:0;
  border-radius:var(--r12);
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.proc-col-ico svg{width:22px;height:22px;stroke:var(--white)}
.proc-col-title{font-family:var(--fh);font-size:1.05rem;font-weight:800;color:var(--white);margin-bottom:3px}
.proc-col-sub{font-size:12px;color:rgba(255,255,255,.38);line-height:1.4}

/* Vertical steps */
.proc-col-steps{display:flex;flex-direction:column}
.proc-col-step{
  display:flex;gap:16px;align-items:flex-start;
  position:relative;
  padding-bottom:28px;
}
.proc-col-step:last-of-type{padding-bottom:0}
/* vertical connector line */
.proc-col-step::before{
  content:'';
  position:absolute;
  left:20px;top:42px;bottom:0;
  width:1px;
  background:var(--dark-b);
}
.proc-col-step:last-of-type::before{display:none}
.proc-col-step-ico{
  width:40px;height:40px;flex-shrink:0;
  border-radius:50%;
  background:var(--dark-2);
  border:1.5px solid var(--dark-b);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  transition:all .4s ease;
}
.proc-col-step:hover .proc-col-step-ico{border-color:var(--accent);background:rgba(232,74,12,.12)}
.proc-col-step-ico svg{width:16px;height:16px;stroke:rgba(255,255,255,.35);transition:stroke .3s}
.proc-col-step:hover .proc-col-step-ico svg{stroke:var(--accent)}
.proc-col-step-n{
  position:absolute;top:-6px;right:-6px;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent);
  font-family:var(--fh);font-size:9px;font-weight:800;
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.proc-col-step-body{padding-top:6px}
.proc-col-step-title{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--white);margin-bottom:5px;line-height:1.3}
.proc-col-step-desc{font-size:12.5px;color:rgba(255,255,255,.38);line-height:1.7}

/* min order note */
.proc-note{
  margin-top:24px;
  padding:12px 16px;
  background:rgba(212,148,12,.1);
  border:1px solid rgba(212,148,12,.25);
  border-radius:var(--r12);
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--gold);line-height:1.6;
}
.proc-note svg{width:16px;height:16px;stroke:var(--gold);flex-shrink:0;margin-top:2px}

/* ── STATS BAND ─────────────────────────────────────────── */
#stats-band{background:var(--dark-2);border-top:1px solid var(--dark-b);border-bottom:1px solid var(--dark-b);padding:56px 0}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stat{padding:0 20px;border-right:1px solid var(--dark-b)}
.stat:last-child{border-right:none}
.stat-n{font-family:var(--fh);font-size:2.8rem;font-weight:800;color:var(--accent);display:block;line-height:1;margin-bottom:8px;white-space:nowrap;font-variant-numeric:tabular-nums;min-height:3.4rem}
.stat-l{font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35)}

/* ── PORTFOLIO ──────────────────────────────────────────── */
#portfolio{background:var(--white)}
.port-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:20px;flex-wrap:wrap}
.port-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ptab{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.04em;padding:7px 16px;border-radius:100px;color:var(--muted);background:var(--light);border:1px solid var(--border);transition:all var(--tr);cursor:pointer}
.ptab:hover{color:var(--ink);border-color:var(--ink)}
.ptab.active{background:var(--accent);color:var(--white);border-color:var(--accent)}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.port-card{border-radius:var(--r20);overflow:hidden;border:1px solid var(--border);transition:transform .4s ease,box-shadow .4s ease;cursor:pointer}
.port-card:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.port-card.hidden{display:none}
.port-thumb{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--dark)}
.port-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;display:block}
.port-card:hover .port-thumb img{transform:scale(1.06)}
.port-overlay{position:absolute;inset:0;background:rgba(15,17,23,.78);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .4s;padding:20px;text-align:center;gap:6px}
.port-card:hover .port-overlay{opacity:1}
.port-ov-cat{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.port-ov-name{font-family:var(--fh);font-size:1.1rem;font-weight:700;color:var(--white)}
.port-info{padding:12px 16px 16px;background:var(--white)}
.port-cat{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.port-name{font-family:var(--fh);font-size:13.5px;font-weight:700;color:var(--ink)}

/* ── PRICING ────────────────────────────────────────────── */
#pricing{background:var(--light)}
.pricing-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r20);overflow:hidden;box-shadow:var(--sh)}
.pricing-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}
.pt{width:100%;border-collapse:collapse;min-width:600px}
.pt thead tr{background:var(--dark)}
.pt thead th{padding:14px 20px;font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);text-align:left}
.pt thead th:last-child{text-align:right}
.pt tbody tr{border-bottom:1px solid var(--border);transition:background var(--tr)}
.pt tbody tr:last-child{border-bottom:none}
.pt tbody tr:hover{background:var(--light)}
.pt tbody tr.pop{background:rgba(232,74,12,.04)}
.pt tbody td{padding:16px 20px;font-size:14px;color:var(--ink-70);vertical-align:middle}
.pt tbody td:first-child{color:var(--ink);font-weight:600}
.pt tbody td:last-child{text-align:right}
.pt-svc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-badge{font-family:var(--fh);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:100px;background:var(--accent);color:var(--white);white-space:nowrap}
.pt-badge.g{background:var(--gold)}
.pt-price{font-family:var(--fh);font-size:1.4rem;font-weight:800;color:var(--accent);white-space:nowrap}
.pt-price small{font-size:.7rem;font-weight:500;color:var(--muted);font-family:var(--fb)}
.pt-note{background:var(--light);border-top:1px solid var(--border);padding:12px 20px;font-size:13px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pt-note a{color:var(--accent);font-weight:700;text-decoration:underline}

/* ── TESTIMONIALS ───────────────────────────────────────── */
#testi{background:var(--dark)}
.testi-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;align-items:start}
.tc{background:var(--dark-3);border:1px solid var(--dark-b);border-radius:var(--r20);padding:28px;transition:border-color var(--tr)}
.tc:hover{border-color:rgba(232,74,12,.35)}
.tc.feat{background:var(--accent);border-color:var(--accent);grid-row:span 2;padding:36px}
.tc-stars{margin-bottom:14px;font-size:13px;color:var(--gold);letter-spacing:2px}
.tc-q{font-size:14.5px;font-style:italic;line-height:1.75;color:rgba(255,255,255,.6);margin-bottom:20px;font-family:var(--fb)}
.tc.feat .tc-q{color:rgba(255,255,255,.9);font-size:16px}
.tc-author{display:flex;align-items:center;gap:12px}
.tc-av{width:40px;height:40px;border-radius:50%;background:var(--dark-2);border:2px solid var(--dark-b);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:.9rem;font-weight:800;color:var(--accent);flex-shrink:0}
.tc.feat .tc-av{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);color:var(--white)}
.tc-name{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--white)}
.tc-role{font-size:11px;color:rgba(255,255,255,.4)}

/* ── CTA ────────────────────────────────────────────────── */
#cta{background:var(--accent);padding:80px 0;position:relative;overflow:hidden}
#cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 80% 50%,rgba(255,255,255,.08),transparent 60%);pointer-events:none}
.cta-inner{position:relative;z-index:2;text-align:center}
.cta-h{font-family:var(--fh);font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;color:var(--white);letter-spacing:-.03em;margin-bottom:14px}
.cta-sub{font-size:15px;color:rgba(255,255,255,.7);margin-bottom:32px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── FAQ ────────────────────────────────────────────────── */
#faq{background:var(--white)}
.faq-inner{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-family:var(--fh);font-size:15px;font-weight:700;color:var(--ink);text-align:left;background:none;transition:color var(--tr)}
.faq-btn:hover,.faq-item.open .faq-btn{color:var(--accent)}
.faq-icon{width:28px;height:28px;flex-shrink:0;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);transition:all var(--tr)}
.faq-item.open .faq-icon{background:var(--accent);border-color:var(--accent);color:var(--white);transform:rotate(180deg)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.faq-ans-inner{padding:0 0 18px;font-size:14px;color:var(--muted);line-height:1.8}

/* ── CONTACT ────────────────────────────────────────────── */
#contact{background:var(--light)}
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start}
.contact-title{font-family:var(--fh);font-size:1.6rem;font-weight:800;color:var(--ink);margin-bottom:24px;letter-spacing:-.025em;line-height:1.25}
.ci{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.ci-ico{width:42px;height:42px;flex-shrink:0;border-radius:var(--r6);background:rgba(232,74,12,.08);border:1px solid rgba(232,74,12,.15);display:flex;align-items:center;justify-content:center}
.ci-ico svg{width:18px;height:18px;stroke:var(--accent)}
.ci-lbl{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ci-val{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--ink)}
.form-box{background:var(--white);border:1px solid var(--border);border-radius:var(--r20);padding:36px;box-shadow:var(--sh)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{margin-bottom:15px}
.flbl{display:block;font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fctrl{width:100%;background:var(--light);border:1.5px solid var(--border);border-radius:var(--r6);padding:11px 14px;font-size:14px;color:var(--ink);font-family:var(--fb);outline:none;transition:border-color var(--tr),box-shadow var(--tr)}
.fctrl::placeholder{color:rgba(133,137,160,.5)}
.fctrl:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,74,12,.1);background:var(--white)}
select.fctrl{cursor:pointer}
textarea.fctrl{resize:vertical;min-height:100px}
.f-sub{width:100%;justify-content:center;margin-top:4px}
.f-ok{display:none;text-align:center;padding:16px;color:var(--success);font-weight:700;font-size:14px;background:rgba(12,173,112,.07);border-radius:var(--r6);margin-top:10px;border:1px solid rgba(12,173,112,.2)}

/* ── FOOTER ─────────────────────────────────────────────── */
footer{background:var(--dark);padding:60px 0 28px}
.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.ft-desc{font-size:13px;color:rgba(255,255,255,.35);line-height:1.8;margin-top:12px;max-width:240px}
.ft-h{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:16px}
.ft-links li{margin-bottom:9px}
.ft-links li a{font-size:13px;color:rgba(255,255,255,.45);transition:color var(--tr)}
.ft-links li a:hover{color:var(--accent)}
.ft-bot{border-top:1px solid var(--dark-b);padding-top:22px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.2)}
.ft-social{display:flex;gap:8px;margin-top:18px}
.ft-soc{width:34px;height:34px;border-radius:50%;border:1px solid var(--dark-b);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);transition:all var(--tr)}
.ft-soc:hover{border-color:var(--accent);color:var(--accent)}

/* ── PROMO MODAL ────────────────────────────────────────── */
#promo-overlay{position:fixed;inset:0;background:rgba(15,17,23,.85);backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
#promo-overlay.show{opacity:1;visibility:visible}
.promo-box{background:var(--white);border-radius:var(--r20);overflow:hidden;max-width:780px;width:100%;display:grid;grid-template-columns:1fr 1fr;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.5);transform:scale(.94) translateY(20px);transition:transform .5s cubic-bezier(.4,0,.2,1)}
#promo-overlay.show .promo-box{transform:none}
.promo-x{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(15,17,23,.2);color:var(--white);font-size:16px;display:flex;align-items:center;justify-content:center;transition:all var(--tr);line-height:1}
.promo-x:hover{background:rgba(15,17,23,.6)}
.promo-vis{position:relative;overflow:hidden;min-height:380px}
.promo-vis img{width:100%;height:100%;object-fit:cover}
.promo-vis-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,74,12,.8),rgba(15,17,23,.85));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}
.promo-pct{font-family:var(--fh);font-size:5.5rem;font-weight:800;color:var(--white);line-height:1}
.promo-off{font-family:var(--fh);font-size:2rem;font-weight:700;color:rgba(255,255,255,.9)}
.promo-label2{font-size:11px;font-family:var(--fh);font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
.promo-body{padding:36px 32px;display:flex;flex-direction:column;justify-content:center}
.promo-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(232,74,12,.1);border:1px solid rgba(232,74,12,.22);border-radius:100px;padding:5px 14px;font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.promo-title{font-family:var(--fh);font-size:1.7rem;font-weight:800;color:var(--ink);line-height:1.2;margin-bottom:8px;letter-spacing:-.02em}
.promo-title em{font-style:normal;color:var(--accent)}
.promo-subtitle{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.7}
.promo-cd-label{font-family:var(--fh);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.promo-cd{display:flex;gap:8px;margin-bottom:20px}
.pcd-b{background:var(--light);border:1px solid var(--border);border-radius:var(--r6);padding:10px 12px;text-align:center;flex:1}
.pcd-n{font-family:var(--fh);font-size:1.7rem;font-weight:800;color:var(--ink);display:block;line-height:1}
.pcd-u{font-size:9px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:3px;display:block}
.promo-form2{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.promo-inp{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r6);font-size:14px;font-family:var(--fb);color:var(--ink);outline:none;transition:border-color var(--tr)}
.promo-inp:focus{border-color:var(--accent)}
.promo-inp::placeholder{color:rgba(133,137,160,.5)}
.promo-go{padding:12px;border-radius:var(--r6);background:var(--accent);color:var(--white);font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:none;cursor:pointer;transition:background var(--tr)}
.promo-go:hover{background:var(--accent-2)}
.promo-skip2{font-size:11px;color:var(--muted);text-align:center;text-decoration:underline;cursor:pointer;display:block}
.promo-fine{font-size:10px;color:var(--muted);margin-top:8px;line-height:1.5}

/* ── SCROLL TOP ─────────────────────────────────────────── */
#back-top{position:fixed;bottom:88px;right:20px;width:40px;height:40px;border-radius:var(--r6);background:var(--accent);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;pointer-events:none;transform:translateY(10px);transition:all var(--tr);z-index:500;box-shadow:0 4px 16px rgba(232,74,12,.35)}
#back-top.show{opacity:1;pointer-events:all;transform:none}
#back-top:hover{background:var(--dark);transform:translateY(-2px)}

/* ── SCROLL REVEAL — animation-based (immune to cascade conflicts) ──
   Elements start invisible via .sr class. JS IntersectionObserver
   adds .sr-show which fires a @keyframes animation.
   Animations override any competing opacity/transform rules. ── */
@keyframes srUp   {from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none}}
@keyframes srLeft {from{opacity:0;transform:translateX(-32px)} to{opacity:1;transform:none}}
@keyframes srRight{from{opacity:0;transform:translateX(32px)} to{opacity:1;transform:none}}
@keyframes srPop  {from{opacity:0;transform:scale(.94) translateY(16px)} to{opacity:1;transform:none}}

.sr{opacity:0}
.sr.sr-show        {animation:srUp    .7s cubic-bezier(.22,1,.36,1) both}
.sr.sr-left.sr-show{animation:srLeft  .7s cubic-bezier(.22,1,.36,1) both}
.sr.sr-right.sr-show{animation:srRight .7s cubic-bezier(.22,1,.36,1) both}
.sr.sr-pop.sr-show {animation:srPop   .65s cubic-bezier(.22,1,.36,1) both}

/* Legacy .rev class support — mapped to .sr in JS */
.rev,.rev-left,.rev-right,.rev-scale{opacity:0}
.rd1{--sr-delay:.1s}.rd2{--sr-delay:.2s}.rd3{--sr-delay:.32s}.rd4{--sr-delay:.46s}.rd5{--sr-delay:.6s}

/* ════ RESPONSIVE ════════════════════════════════════════ */
@media(max-width:1024px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr 1fr}
  .tc.feat{grid-row:unset}
  .stats-row{grid-template-columns:1fr 1fr}
  .stat:nth-child(2),.stat:nth-child(4){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--dark-b);padding-bottom:24px}
  .stat:nth-child(3),.stat:nth-child(4){padding-top:24px}
  .ft{grid-template-columns:1fr 1fr;gap:36px}
  .proc-steps.s5{grid-template-columns:repeat(3,1fr);gap:24px}
  .proc-steps.s5 .proc-step:nth-child(4),.proc-steps.s5 .proc-step:nth-child(5){margin-top:12px}
}
@media(max-width:900px){
  section{padding:72px 0}
  #hero{grid-template-columns:1fr;height:auto;min-height:auto;max-height:none}
  .hero-copy{padding:56px 20px 40px;max-width:100%;margin:0}
  .hero-h1{font-size:clamp(2rem,7vw,3.4rem)}
  .hero-mosaic{height:auto;min-height:0;max-height:none;align-self:auto;
    grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
    gap:10px;padding:12px}
  .hm-img{aspect-ratio:1/1;height:auto}
  .hm-img:nth-child(1){grid-column:1;grid-row:1}
  .hm-img:nth-child(2){grid-column:2;grid-row:1}
  .hm-img:nth-child(3){grid-column:1;grid-row:2}
  .hm-img:nth-child(4){grid-column:2;grid-row:2}
  .about-grid{grid-template-columns:1fr;gap:52px}
  .about-left{max-width:100%;margin:0 auto;padding-bottom:44px;padding-right:0}
  .ba-wrap{aspect-ratio:0.9}
  .proc-cols{gap:16px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .svc-top{grid-template-columns:1fr}
  .svc-right p{padding-left:0;border-left:none;border-top:2px solid var(--border);padding-top:14px}
}
@media(max-width:768px){
  .container{padding:0 16px}
  section{padding:60px 0}
  .nav-menu{display:none;flex-direction:column;position:fixed;top:107px;left:0;right:0;background:rgba(15,17,23,.98);padding:16px;gap:4px;border-bottom:1px solid var(--dark-b);backdrop-filter:blur(16px);z-index:999}
  .nav-menu.open{display:flex}
  .nav-menu a{padding:12px 16px;font-size:14px;border-radius:var(--r6);width:100%}
  .nav-burger{display:flex}
  .nav-phone{display:none}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hs:nth-child(1),.hs:nth-child(2){border-bottom:1px solid var(--dark-b)}
  .hs:nth-child(2),.hs:nth-child(4){border-right:none}
  .hero-mosaic{height:auto;gap:8px;padding:10px;grid-template-rows:1fr 1fr}
  .hm-img:nth-child(1){grid-column:1;grid-row:1}
  .hm-img:nth-child(2){grid-column:2;grid-row:1}
  .hm-img:nth-child(3){grid-column:1;grid-row:2}
  .hm-img:nth-child(4){grid-column:2;grid-row:2}
  .svc-grid{grid-template-columns:1fr 1fr}
  .proc-cols{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .port-grid{grid-template-columns:1fr 1fr}
  .port-head{flex-direction:column;align-items:flex-start;gap:12px}
  .testi-grid{grid-template-columns:1fr}
  .tc.feat{grid-row:unset}
  .f-row{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr 1fr}
  .ft-bot{flex-direction:column;gap:12px;text-align:center}
  .cta-btns{flex-direction:column;align-items:center}
  .promo-box{grid-template-columns:1fr;max-width:420px}
  .promo-vis{display:none}
  .promo-body{padding:28px 24px}
  .proc-cat-badge{display:none}
}
@media(max-width:480px){
  .container{padding:0 14px}
  section{padding:52px 0}
  .hero-copy{padding:44px 14px 40px}
  .hero-h1{font-size:clamp(1.9rem,8.5vw,2.8rem)}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero-mosaic{height:auto;gap:6px;padding:8px;grid-template-rows:1fr 1fr}
  .hm-img{border-radius:10px}
  .hm-img:nth-child(1){grid-column:1;grid-row:1}
  .hm-img:nth-child(2){grid-column:2;grid-row:1}
  .hm-img:nth-child(3){grid-column:1;grid-row:2}
  .hm-img:nth-child(4){grid-column:2;grid-row:2}
  .btn{padding:11px 20px;font-size:13px}
  .svc-grid{grid-template-columns:1fr}
  .port-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .stat-n{font-size:2rem}
  .about-feats{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr}
  .form-box{padding:20px 16px}
  .f-row{grid-template-columns:1fr}
  .promo-body{padding:22px 18px}
  .promo-title{font-size:1.4rem}
  .proc-col{padding:22px 18px}

  /* ── Pricing: hide middle cols, show service + price only ── */
  .pricing-scroll{overflow-x:auto}
  .pt{min-width:unset;width:100%}
  .pt thead th:nth-child(2),
  .pt thead th:nth-child(3),
  .pt tbody td:nth-child(2),
  .pt tbody td:nth-child(3){display:none}
  .pt tbody td:first-child{font-size:13px}
  .pt-svc{flex-direction:column;align-items:flex-start;gap:5px}
  .pt-price{font-size:1.25rem}

  /* ── About: counter card compact on tiny screens ── */
  .about-left{padding-bottom:50px;padding-right:0;max-width:100%}
  .ba-wrap{aspect-ratio:0.85}
  .about-counter{padding:14px 18px;border-radius:var(--r12);bottom:-14px;right:-14px}
  .acc-n{font-size:2rem;min-height:2.4rem}
}

/* ════════════════════════════════════════════════════════
   v7 ADDITIONS — Hero fix, 4-img mosaic, bigger cards,
   nav dropdown, before/after resize
   ════════════════════════════════════════════════════════ */

/* ── HERO COPY — fix empty left gap ─────────────────────── */
.hero-copy{
  padding:56px 32px 56px 56px!important;
  max-width:none!important;
  margin-left:0!important;
  justify-content:center!important;
}

/* ── HERO MOSAIC — equal 2x2 four-image grid ──────────────── */
.hero-mosaic{
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  min-height:0;
}
.hm-img{position:relative;overflow:hidden}
.hm-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.hm-img:hover img{transform:scale(1.04)}

/* ── SERVICES — bigger cards, 2-column ──────────────────── */
.svc-grid{grid-template-columns:repeat(2,1fr)!important;gap:24px!important}
.svc-thumb{aspect-ratio:4/3!important}
.svc-body{padding:26px!important}
.svc-name{font-size:1.25rem!important}
.svc-desc{font-size:13.5px!important}

/* ── ABOUT — bigger image, no badge gap ─────────────────── */
.about-grid{grid-template-columns:1.4fr 0.6fr!important;gap:48px!important}
.about-left{padding-bottom:0!important;padding-right:0!important}
.ba-wrap{aspect-ratio:1.1!important;box-shadow:var(--sh2)}

/* ── NAV DROPDOWN ────────────────────────────────────────── */
.nav-item-drop{position:relative}
.nav-drop-trigger{display:flex;align-items:center;gap:5px;cursor:pointer}
.nav-drop-trigger svg{width:11px;height:11px;stroke:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.nav-item-drop:hover .nav-drop-trigger svg,
.nav-item-drop.open .nav-drop-trigger svg{transform:rotate(180deg)}
/* Bridge: ::before covers gap so mouse can travel to dropdown */
.nav-dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;
  background:var(--dark-2);border:1px solid var(--dark-b);border-radius:var(--r12);
  min-width:210px;padding:8px;
  box-shadow:0 20px 56px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transition:opacity .28s cubic-bezier(.4,0,.2,1),visibility .28s,transform .28s cubic-bezier(.4,0,.2,1);
  z-index:1100;
  transform:translateX(-50%) translateY(-6px) scale(.97);
  transform-origin:top center;
}
.nav-dropdown::before{
  content:'';position:absolute;bottom:100%;left:0;right:0;height:14px;
}
.nav-dropdown-inner{
  background:transparent;border:none;border-radius:0;
  min-width:unset;padding:0;
  box-shadow:none;
  transform:none!important;
}
.nav-item-drop:hover .nav-dropdown,
.nav-item-drop.open .nav-dropdown{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
}
.nav-dropdown a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px!important;border-radius:var(--r6);
  font-size:13px!important;white-space:nowrap;
  transition:background .2s,color .2s,transform .2s;
}
.nav-dropdown a svg{width:15px;height:15px;stroke:var(--accent);flex-shrink:0;transition:transform .2s}
.nav-dropdown a:hover{background:rgba(232,74,12,.12)!important;transform:translateX(3px)}
.nav-dropdown a:hover svg{transform:scale(1.15)}

/* Mobile dropdown */
@media(max-width:768px){
  .nav-dropdown{
    position:static;transform:none;opacity:1;visibility:visible;
    padding-top:0;
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
  }
  .nav-dropdown-inner{
    overflow:hidden;transform:none!important;
    background:rgba(0,0,0,.25);border:none;border-radius:var(--r8);
    padding:4px 0 4px 14px;box-shadow:none;min-width:unset;
    transition:none;
  }
  .nav-item-drop.open .nav-dropdown{grid-template-rows:1fr}
  .nav-drop-trigger svg{transform:none!important}
  .nav-item-drop.open .nav-drop-trigger svg{transform:rotate(180deg)!important}
}

/* ── File upload field ──────────────────────────────────── */
.file-drop{
  display:block;width:100%;box-sizing:border-box;
  border:1.5px dashed var(--border);border-radius:var(--r6);
  padding:18px;text-align:center;cursor:pointer;
  transition:border-color .25s,background .25s;
  background:var(--light);position:relative;
}
.file-drop:hover{border-color:var(--accent);background:rgba(232,74,12,.03)}
.file-drop.has-file{border-color:var(--success);border-style:solid;background:rgba(12,173,112,.05)}
.file-drop input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.file-drop-icon{width:28px;height:28px;stroke:var(--muted);margin:0 auto 8px}
.file-drop.has-file .file-drop-icon{stroke:var(--success)}
.file-drop-text{font-size:13px;color:var(--ink-70);font-weight:600}
.file-drop-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.file-drop-filename{font-size:12.5px;color:var(--success);font-weight:700;margin-top:6px}

/* ── Responsive for new hero/services/about ─────────────── */
@media(max-width:900px){
  .hero-copy{padding:56px 24px 48px!important;max-width:100%!important}
  .svc-grid{grid-template-columns:1fr!important}
  .about-grid{grid-template-columns:1fr!important}
}
@media(max-width:480px){
  .hero-mosaic{grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr!important;gap:6px!important}
  .hm-img:nth-child(1){grid-column:1!important;grid-row:1!important}
  .hm-img:nth-child(2){grid-column:2!important;grid-row:1!important}
  .hm-img:nth-child(3){grid-column:1!important;grid-row:2!important}
  .hm-img:nth-child(4){grid-column:2!important;grid-row:2!important}
}

/* ════════════════════════════════════════════════════════
   v8 — POLISH PASS
   Micro-interactions, accessibility, refined depth
   ════════════════════════════════════════════════════════ */

/* ── Text selection ─────────────────────────────────────── */
::selection{background:var(--accent);color:#fff}
::-moz-selection{background:var(--accent);color:#fff}

/* ── Custom scrollbar ───────────────────────────────────── */
html{scrollbar-width:thin;scrollbar-color:var(--accent) var(--dark-2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--dark-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:10px;border:2px solid var(--dark-2)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-2)}

/* ── Focus rings (a11y + polish) ────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px
}
.btn:focus-visible{outline-offset:4px}

/* ── Smoother global transitions ────────────────────────── */
a,button{transition:color var(--tr),background-color var(--tr),border-color var(--tr),transform var(--tr),box-shadow var(--tr)}

/* ── Button micro-polish ────────────────────────────────── */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{box-shadow:0 4px 14px rgba(232,74,12,.22)}
.btn-primary:hover{box-shadow:0 10px 32px rgba(232,74,12,.42)}

/* ── Card depth refinements (additive) ──────────────────── */
.blog-card,.svc-card,.tc,.proc-step,.port-card{
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1),border-color .35s ease
}
.blog-card:hover,.svc-card:hover,.port-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 48px rgba(15,17,23,.14)
}

/* ── Mosaic image hover — lift the active tile ──────────── */
.hm-img{transition:transform .5s cubic-bezier(.4,0,.2,1),box-shadow .5s ease}
.hm-img:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.35);z-index:2}

/* ── Form input polish ──────────────────────────────────── */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],textarea,select{
  transition:border-color var(--tr),box-shadow var(--tr),background-color var(--tr)
}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="number"]:focus,textarea:focus,select:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(232,74,12,.14);
  outline:none
}

/* ── Link underline animation in body content ───────────── */
.post-content p a,.post-content li a{
  color:var(--accent);font-weight:600;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s ease
}
.post-content p a:hover,.post-content li a:hover{background-size:100% 1.5px}

/* ── Nav link hover underline ───────────────────────────── */
.nav-menu > li > a,.nav-drop-trigger > a{position:relative}
.nav-menu > li > a::after,.nav-drop-trigger > a::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.4,0,.2,1)
}
.nav-menu > li > a:hover::after,.nav-menu > li > a.active::after,.nav-drop-trigger:hover > a::after{
  transform:scaleX(1);transform-origin:left
}

/* ── Section heading rhythm ─────────────────────────────── */
.h2{text-wrap:balance}
.hero-h1,.page-title,.post-title{text-wrap:balance}
p{text-wrap:pretty}

/* ── Marquee fade edges ─────────────────────────────────── */
#ann-bar,.mq-band{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)
}

/* ── Back to top — refined ──────────────────────────────── */
#back-top{transition:opacity .35s ease,transform .35s ease,background-color var(--tr);transform:translateY(20px);opacity:0;pointer-events:none}
#back-top.show{transform:translateY(0);opacity:1;pointer-events:auto}
#back-top:hover{transform:translateY(-4px)}

/* ── Footer social icon refinement ──────────────────────── */
.ft-soc{transition:transform var(--tr),background-color var(--tr),color var(--tr)}
.ft-soc:hover{transform:translateY(-3px) rotate(-4deg);color:var(--white);background:var(--accent)}

/* ══════════════════════════════════════════════════════════
   ENHANCED ANIMATIONS & TRANSITIONS
   ══════════════════════════════════════════════════════════ */

/* ── Button animations ───────────────────────────────────── */
.btn{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.btn-primary:hover{box-shadow:0 8px 28px rgba(232,74,12,.4)}

/* ── Card hover lift ─────────────────────────────────────── */
.blog-card,.svc-card,.tc,.proc-step,.port-card{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease,border-color .35s ease}
.blog-card:hover,.svc-card:hover,.port-card:hover{
  transform:translateY(-6px) scale(1.01);box-shadow:0 20px 48px rgba(0,0,0,.18)}
.tc:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.2)}

/* ── Image zoom on card hover ────────────────────────────── */
.port-thumb,.svc-card .svc-img,.blog-card .bc-img,.type-img,.gallery-strip-item{overflow:hidden}
.port-thumb img,.svc-card .svc-img img,.blog-card .bc-img img,.type-img img,.gallery-strip-item img{
  transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.port-card:hover .port-thumb img,.svc-card:hover .svc-img img,
.blog-card:hover .bc-img img,.gallery-strip-item:hover img{transform:scale(1.08)}

/* ── Port overlay fade ───────────────────────────────────── */
.port-overlay{
  position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,18,.92) 0%,rgba(10,12,18,.3) 60%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
  opacity:0;transition:opacity .35s ease}
.port-card:hover .port-overlay{opacity:1}
.port-ov-cat{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.port-ov-name{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--white)}

/* Port info description */
.port-desc{font-size:12px;color:var(--muted);line-height:1.6;margin-top:4px}

/* ── Chip badge hover ────────────────────────────────────── */
.chip{display:inline-flex;transition:transform .3s ease,box-shadow .3s ease}
.chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(232,74,12,.25)}

/* ── Accent line animate ─────────────────────────────────── */
.accent-line{
  width:0;height:3px;background:var(--accent);border-radius:2px;margin:18px 0;
  transition:width .7s cubic-bezier(.22,1,.36,1) .15s
}
.accent-line.c{margin:18px auto}
.accent-line.visible{width:44px}

/* ── FAQ answer smooth ───────────────────────────────────── */
.faq-ans{transition:max-height .42s cubic-bezier(.4,0,.2,1)}
.faq-item.open{background:rgba(232,74,12,.03);border-radius:var(--r8)}

/* ── Navbar link hover ───────────────────────────────────── */
.nav-menu > li > a{transition:color .22s,background .22s,transform .22s}
.nav-menu > li > a:hover{transform:translateY(-1px)}

/* ── Hero copy staggered entrance ────────────────────────── */
@keyframes heroSlideUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.hero-copy .chip{animation:heroSlideUp .75s cubic-bezier(.22,1,.36,1) .05s both}
.hero-h1{animation:heroSlideUp .8s cubic-bezier(.22,1,.36,1) .2s both}
.hero-copy .hero-desc{animation:heroSlideUp .75s cubic-bezier(.22,1,.36,1) .38s both}
.hero-actions{animation:heroSlideUp .7s cubic-bezier(.22,1,.36,1) .52s both}
.hero-stats{animation:heroSlideUp .7s cubic-bezier(.22,1,.36,1) .68s both}
.hero-copy .hero-eyebrow{animation:heroSlideUp .7s cubic-bezier(.22,1,.36,1) .02s both}
.logo-hero{animation:heroSlideUp .6s cubic-bezier(.22,1,.36,1) 0s both}

/* ── Page hero (inner pages) animate ────────────────────── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.page-breadcrumb{animation:fadeInUp .6s cubic-bezier(.22,1,.36,1) .1s both}
.page-title{animation:fadeInUp .7s cubic-bezier(.22,1,.36,1) .22s both}
.page-desc{animation:fadeInUp .65s cubic-bezier(.22,1,.36,1) .38s both}

/* ── Smooth image lazy-load fade ─────────────────────────── */
img{transition:opacity .45s ease}
img[loading="lazy"]{opacity:0}
img.loaded{opacity:1}

/* ── Type card hover ─────────────────────────────────────── */
.type-card{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease,border-color .35s ease}
.type-card:hover{transform:translateY(-6px) scale(1.01)}

/* ── Gallery strip item hover ────────────────────────────── */
.gallery-strip-item{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.gallery-strip-item:hover{transform:scale(1.03);box-shadow:0 12px 32px rgba(0,0,0,.25)}

/* ── About before/after hover ────────────────────────────── */
.ba-wrap{transition:box-shadow .4s ease}
.ba-wrap:hover{box-shadow:0 24px 64px rgba(0,0,0,.3)}

/* ── Footer link hover ───────────────────────────────────── */
.ft-links a{transition:color .22s,transform .22s;display:inline-block}
.ft-links a:hover{color:var(--accent);transform:translateX(4px)}

/* ── Page transition overlay ─────────────────────────────── */
/* #page-transition managed entirely by inline JS styles */

/* ── Scroll progress bar ─────────────────────────────────── */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  z-index:99998;border-radius:0 2px 2px 0;
  transition:width .08s linear;
  box-shadow:0 0 10px rgba(232,74,12,.6)
}

/* ── Hero mosaic stagger entrance ────────────────────────── */
@keyframes mosaicIn{from{opacity:0;transform:scale(.9) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.hm-img{animation:mosaicIn .7s cubic-bezier(.22,1,.36,1) both}
.hm-img:nth-child(1){animation-delay:.2s}
.hm-img:nth-child(2){animation-delay:.35s}
.hm-img:nth-child(3){animation-delay:.5s}
.hm-img:nth-child(4){animation-delay:.65s}

/* ── Marquee band entrance ───────────────────────────────── */
@keyframes fadeInMq{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.mq-band{animation:fadeInMq .6s cubic-bezier(.22,1,.36,1) .8s both}


/* ── Port card filter animation ──────────────────────────── */
.port-card{transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.port-card.hiding{opacity:0;transform:scale(.9) translateY(8px);pointer-events:none}

/* ── Ptab filter button ──────────────────────────────────── */
.ptab{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.ptab:hover{transform:translateY(-2px)}
.ptab.active{transform:translateY(-1px);box-shadow:0 4px 14px rgba(232,74,12,.3)}

/* ── Stats number ────────────────────────────────────────── */
@keyframes statPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.stat.in .stat-n,.hs.in .hs-n{animation:statPop .55s cubic-bezier(.34,1.56,.64,1) .1s both}

/* ── Process step connector pulse ───────────────────────── */
@keyframes connectorDraw{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1)}}
.proc-col-step.in::before{animation:connectorDraw .4s ease}

/* ── Svc card image overlay shimmer ─────────────────────── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.svc-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);
  background-size:200% 100%;
  opacity:0;transition:opacity .3s ease
}
.svc-card:hover .svc-thumb::after{opacity:1;animation:shimmer .8s ease}
.svc-thumb{position:relative}

/* Stagger children: JS adds .sr then .sr-show — no pre-hiding in CSS
   so images are always visible even if JS is slow or fails */
.port-grid .port-card{transition:box-shadow .35s ease,border-color .35s ease}
/* Only hide when JS has explicitly marked them for animation */
.port-grid .port-card.sr:not(.sr-show),
.testi-grid .tc.sr:not(.sr-show),
.faq-inner .faq-item.sr:not(.sr-show),
.pricing-cards .price-card.sr:not(.sr-show),
.stats-row .stat.sr:not(.sr-show),
.about-feats .af.sr:not(.sr-show){opacity:0}

/* ── Floating section dot-nav (home only) ───────────────── */
#section-nav{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);
  z-index:900;display:flex;flex-direction:column;gap:10px;
  opacity:0;transition:opacity .4s ease;pointer-events:none
}
#section-nav.visible{opacity:1;pointer-events:all}
.sn-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.35);
  cursor:pointer;transition:background .25s,transform .25s,border-color .25s;
  position:relative
}
.sn-dot:hover,.sn-dot.active{background:var(--accent);border-color:var(--accent);transform:scale(1.4)}
.sn-dot .sn-tip{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:rgba(15,17,23,.85);backdrop-filter:blur(6px);
  color:#fff;font-size:11px;font-weight:600;white-space:nowrap;
  padding:4px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.1);
  opacity:0;pointer-events:none;transition:opacity .2s ease
}
.sn-dot:hover .sn-tip{opacity:1}

/* ── Hero scroll-down chevron ───────────────────────────── */
.hero-scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,.45);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  animation:scrollBounce 2s ease-in-out 1.5s infinite;
  text-decoration:none;transition:color .2s
}
.hero-scroll:hover{color:rgba(255,255,255,.9)}
.hero-scroll svg{opacity:.6}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@media(max-width:768px){#section-nav{display:none}.hero-scroll{display:none}}

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

/* ── Print styles (clean printouts) ─────────────────────── */
@media print{
  #ann-bar,#navbar,#back-top,footer,.nav-burger,#preloader,.sidebar-cta{display:none!important}
  body{background:#fff!important;color:#000!important}
  a{color:#000!important;text-decoration:underline}
  .post-content{max-width:100%}
}