/* PROM3D — style.css v5 — graphite + orange */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Graphite */
  --g:    #1a1f2e;
  --g2:   #141824;
  --g3:   #0e1219;
  --gl:   #f0f1f5;
  --gl2:  #e2e4ec;
  /* Orange accent */
  --acc:  #f97316;
  --acc2: #ea580c;
  --accl: #fff7ed;
  --accl2:#fed7aa;
  /* Text */
  --ink:  #0f172a;
  --mid:  #374151;
  --soft: #6b7280;
  --pale: #9ca3af;
  /* Surfaces */
  --bg:   #f8f9fa;
  --line: #e5e7eb;
  --white:#ffffff;
  /* Radii / shadows */
  --r:    12px;
  --r2:   20px;
  --r3:   28px;
  --sh:   0 2px 16px rgba(15,23,42,.08);
  --sh2:  0 8px 40px rgba(15,23,42,.12);
  --sh3:  0 20px 80px rgba(15,23,42,.16);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:15px;color:var(--ink);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
input,select,textarea,button{font-family:inherit}
.w{max-width:1160px;margin:0 auto;padding:0 24px}

/* ── HEADER ────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.site-header.scrolled{box-shadow:var(--sh)}
.hdr{display:flex;align-items:center;height:68px;gap:8px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.logo img{height:42px;width:auto;object-fit:contain}
.logo-txt{font-size:22px;font-weight:900;color:var(--g);letter-spacing:-.5px}
nav{display:flex;gap:2px;margin:0 auto}
nav a{padding:7px 13px;border-radius:8px;font-size:14px;font-weight:600;color:var(--soft);transition:all .15s;white-space:nowrap}
nav a:hover,nav a.on{background:var(--gl);color:var(--g)}
.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hdr-tel{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;background:var(--gl);color:var(--g);font-size:14px;font-weight:800;transition:background .15s}
.hdr-tel:hover{background:var(--gl2)}
.hdr-cta{padding:10px 20px;border-radius:10px;background:var(--acc);color:#fff;font-size:14px;font-weight:800;transition:all .15s}
.hdr-cta:hover{background:var(--acc2);transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}

/* ── MOBILE NAV ─────────────────────────────── */
.mob-menu{display:none !important;position:fixed;top:0;left:0;right:0;bottom:0;background:#ffffff;z-index:200;flex-direction:column;padding:76px 20px 32px;gap:4px;overflow-y:auto}
.mob-menu.open{display:flex !important;flex-direction:column}
.mob-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:10px;background:#f0f1f5;border:none;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;line-height:1}
.mob-menu a{padding:14px 16px;border-radius:var(--r);font-size:16px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.mob-cta{background:var(--acc) !important;color:#fff !important;text-align:center;margin-top:12px;border-bottom:none !important;border-radius:var(--r) !important}

/* ── BUTTONS ────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:var(--r);font-size:15px;font-weight:800;transition:all .18s;cursor:pointer;border:2px solid transparent;text-decoration:none !important;white-space:nowrap}
.btn-primary{background:var(--acc);color:#fff !important;border-color:var(--acc)}
.btn-primary:hover{background:var(--acc2);transform:translateY(-1px);box-shadow:0 6px 24px rgba(249,115,22,.3);color:#fff}
.btn-outline{background:transparent;color:var(--g) !important;border-color:var(--g)}
.btn-outline:hover{background:var(--gl)}
.btn-white{background:#fff;color:var(--g) !important}
.btn-white:hover{background:var(--gl)}
.btn-ghost{background:rgba(255,255,255,.15);color:#fff !important;border-color:rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.25)}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-full{width:100%;justify-content:center;padding:15px}

/* ── SECTIONS ───────────────────────────────── */
.sec{padding:88px 0;background:var(--white)}
.sec-alt{background:var(--bg)}
.sec-dark{background-color:var(--g);background-image:linear-gradient(135deg,var(--g3) 0%,var(--g) 100%);color:#fff}
.sec-dark h2{color:#fff !important}
.sec-dark .sec-sub{color:rgba(255,255,255,.65)}
.sec-dark .overline{color:var(--acc)}

.sec-head{text-align:center;margin-bottom:56px}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:44px;text-align:left}
.overline{display:block;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
h1{font-size:clamp(36px,4.5vw,60px);font-weight:900;line-height:1.07;color:var(--ink);letter-spacing:-2px;margin-bottom:20px}
h1 em{font-style:normal;color:var(--acc)}
h2{font-size:clamp(26px,3vw,42px);font-weight:900;color:var(--ink);letter-spacing:-.8px;line-height:1.14;margin-bottom:14px}
h3{font-size:17px;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:8px}
.sec-sub{font-size:16px;color:var(--soft);line-height:1.65;max-width:520px}
.sec-head .sec-sub{margin:0 auto}
.page-hero{padding:60px 0 72px;background:linear-gradient(160deg,var(--white) 55%,var(--gl) 100%)}

/* ── TAGS ───────────────────────────────────── */
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{padding:3px 10px;border-radius:20px;background:var(--gl);color:var(--mid);font-size:11px;font-weight:700}

/* ── CARDS ──────────────────────────────────── */
.card{padding:30px 26px;border-radius:var(--r2);border:1.5px solid var(--line);background:var(--white);transition:all .2s}
.card:hover{border-color:var(--acc);box-shadow:var(--sh2);transform:translateY(-3px)}
.card-ic{width:52px;height:52px;border-radius:14px;background:var(--accl);color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card-ic svg{width:26px;height:26px}

/* ── FORM ───────────────────────────────────── */
.form-box{background:var(--white);border-radius:var(--r3);padding:36px 32px;box-shadow:var(--sh3)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--mid)}
.field input,.field select,.field textarea{padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);font-size:14px;color:var(--ink);background:var(--white);outline:none;width:100%;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(249,115,22,.1)}
.field textarea{resize:vertical;min-height:88px}
.upload-wrap input[type=file]{display:none}
.upload-lbl{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;border:1.5px dashed var(--line);background:var(--bg);cursor:pointer;font-size:14px;color:var(--soft);transition:all .18s}
.upload-lbl:hover{border-color:var(--acc);background:var(--accl)}
.form-btn{width:100%;padding:15px;background:var(--acc);color:#fff;border:none;border-radius:var(--r);font-size:16px;font-weight:900;cursor:pointer;transition:all .18s}
.form-btn:hover{background:var(--acc2);transform:translateY(-1px)}
.form-note{font-size:12px;color:var(--soft);text-align:center;margin-top:10px;line-height:1.5}
.form-status{font-size:13px;color:var(--soft);text-align:center;margin-top:8px}
.form-status a{color:var(--acc);font-weight:700}

/* ── CTA DARK SECTION ───────────────────────── */
.cta-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}
.cta-left{display:flex;flex-direction:column;gap:24px;padding-top:8px}
.cta-left h2{color:#fff !important}
.cta-left p{color:rgba(255,255,255,.7) !important}
.cta-feats{display:flex;flex-direction:column;gap:10px}
.cta-feat{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.85);font-weight:600}
.cta-feat-dot{width:22px;height:22px;border-radius:6px;background:rgba(249,115,22,.25);display:flex;align-items:center;justify-content:center;color:var(--acc);flex-shrink:0;font-size:11px;font-weight:900}
.cta-contacts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cta-contact{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);transition:background .15s}
.cta-contact:hover{background:rgba(255,255,255,.16)}
.cta-contact-ic{font-size:18px;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cta-contact strong{display:block;color:#fff;font-size:14px;font-weight:800}
.cta-contact span{color:rgba(255,255,255,.5);font-size:11px}

/* ── ADV STRIP ──────────────────────────────── */
.adv-strip{background:var(--g)}
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.adv-item{padding:26px 20px;border-right:1px solid rgba(255,255,255,.08);display:flex;align-items:flex-start;gap:14px}
.adv-item:last-child{border:none}
.adv-ic{width:40px;height:40px;border-radius:10px;background:rgba(249,115,22,.2);display:flex;align-items:center;justify-content:center;color:var(--acc);flex-shrink:0}
.adv-ic svg{width:20px;height:20px}
.adv-item strong{display:block;color:#fff;font-size:14px;font-weight:800;margin-bottom:3px}
.adv-item span{font-size:12px;color:rgba(255,255,255,.55);line-height:1.5}

/* ── PORTFOLIO ──────────────────────────────── */
.port-card:hover{box-shadow:var(--sh2);transform:translateY(-4px);border-color:var(--acc) !important}
.port-card:hover .port-img img{transform:scale(1.06)}

/* ── FOOTER ─────────────────────────────────── */
.site-footer{background:var(--g3);padding:60px 0 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:48px;margin-bottom:48px}
.footer-logo{margin-bottom:14px}
.footer-logo img{height:40px;width:auto;filter:brightness(0) invert(1)}
.footer-logo-txt{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.5px}
.footer-desc{font-size:13px;line-height:1.7;color:rgba(255,255,255,.4);max-width:230px;margin-top:4px}
.footer-col h4{font-size:11px;font-weight:800;color:rgba(255,255,255,.3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul li a{font-size:14px;color:rgba(255,255,255,.5);font-weight:500;transition:color .15s}
.footer-col ul li a:hover{color:#fff}
.fc-item{margin-bottom:10px}
.fc-label{font-size:10px;color:rgba(255,255,255,.3);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px}
.fc-val{font-size:14px;font-weight:700;color:rgba(255,255,255,.65);transition:color .15s;display:block}
.fc-val:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.22)}

/* ── BACK TO TOP ─────────────────────────────── */
.btt{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:12px;background:var(--acc);color:#fff;border:none;cursor:pointer;z-index:99;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(249,115,22,.4);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}
.btt.show{opacity:1;transform:translateY(0);pointer-events:auto}
.btt:hover{background:var(--acc2)}
.btt svg{width:20px;height:20px}

/* ── ANIMATIONS ─────────────────────────────── */
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.au{animation:up .55s ease both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}

/* ── RESPONSIVE ─────────────────────────────── */
@media(max-width:1020px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta-grid{grid-template-columns:1fr;gap:44px}
  .adv-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  nav{display:none}
  .burger{display:flex}
  .hdr-tel span{display:none}
  .sec-head-row{flex-direction:column;align-items:flex-start}
  .hdr-right{margin-left:auto}
  .hdr-tel{padding:8px 11px}
  .hdr-tel svg{width:22px;height:22px}
}
@media(max-width:600px){
  .w{padding:0 16px}
  .sec{padding:56px 0}
  .page-hero{padding:40px 0 52px}
  .form-box{padding:22px 16px}
  .frow{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .adv-grid{grid-template-columns:1fr}
  .btt{bottom:16px;right:16px}
}

/* ── Global image containment ──────────────────────────────── */
img { max-width: 100%; height: auto; display: block; }

.hero-main,
.hero-thumb,
.port-img,
.srv-img-box,
.ph-slot,
.ps-slot {
  overflow: hidden;
  position: relative;
}

.hero-main img,
.hero-thumb img,
.port-img img,
.srv-img-box img,
.ph-slot img,
.ps-slot img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  max-width: none !important;
}