/* Theme 1405-08: «دقت صنعتی» — navy (logo shield) + thin laser line. Loaded after style.css. */
:root{
  --navy-900:#0B1A2E;--navy-800:#0F2240;--navy-700:#13294B;--steel-400:#8A97A8;--concrete-100:#E6E8EB;--laser:#FF3B30;
  --bg:var(--navy-900);--bg2:var(--navy-800);--bg3:var(--navy-700);
  --border:#223a5e;--hair:rgba(138,151,168,.18);
  --text:#fff;--text2:#B4BFCC;--text3:var(--steel-400);
  --sh:0 6px 28px rgba(3,10,22,.55);
}
body{background:var(--bg)}
::selection{background:var(--orange);color:#fff}

/* surfaces that had the old near-black hard-coded */
.navbar{background:rgba(11,26,46,.82)!important}
.mobile-bar{background:rgba(11,26,46,.96)}
.hp-tag{background:rgba(15,34,64,.85)}
.ig-title{background:rgba(8,18,34,.92)}
.hero,.page-header{background:radial-gradient(1200px 500px at 85% 0%,rgba(19,41,75,.9),transparent 60%),linear-gradient(180deg,var(--navy-900),#091527)}
.cta-section{background:linear-gradient(90deg,rgba(11,26,46,.96),rgba(11,26,46,.82)),url('../images/projects/finished-floor.jpg') center/cover!important}
.blog-thumb{background:linear-gradient(135deg,var(--bg3),var(--navy-900))}
.ft-cta{background:linear-gradient(135deg,#13294B,#0F2240);border-color:rgba(249,115,22,.4)}

/* the laser line: thin red rule under page headers and section titles */
.page-header{position:relative}
.page-header::after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--laser) 20%,var(--laser) 80%,transparent);box-shadow:0 0 12px rgba(255,59,48,.55);transform-origin:right;animation:laser-draw 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
.hero{position:relative}
.hero::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--laser) 15%,var(--laser) 85%,transparent);box-shadow:0 0 14px rgba(255,59,48,.6);transform-origin:right;animation:laser-draw 1.3s cubic-bezier(.2,.7,.2,1) .2s both}
.section-title::before{background:linear-gradient(90deg,var(--orange),var(--laser));box-shadow:0 0 10px rgba(255,59,48,.35)}
@keyframes laser-draw{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}

/* scroll level indicator on top of the page */
.laser-progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:2000;background:var(--laser);box-shadow:0 0 8px rgba(255,59,48,.7);transform-origin:right;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){
  .laser-progress{animation:laser-scroll linear both;animation-timeline:scroll(root)}
  @keyframes laser-scroll{to{transform:scaleX(1)}}
}
@supports not (animation-timeline:scroll()){.laser-progress{display:none}}

/* cards: steel hairline + laser underline on hover */
.svc-card,.blog-card,.calc-box,.faq-item{border-color:var(--hair)}
.svc-card,.blog-card{position:relative;overflow:hidden}
.svc-card::after,.blog-card::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--laser);transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.svc-card:hover::after,.blog-card:hover::after{transform:scaleX(1)}
.btn-primary:active,.mb-call:active{animation:trowel .18s linear 2}
@keyframes trowel{25%{transform:translateX(2px)}75%{transform:translateX(-2px)}}

/* tables and article details */
.compare th{background:var(--bg3)}
.article-body h2{scroll-margin-top:80px}
.breadcrumb a{color:var(--steel-400)}

@media (prefers-reduced-motion:reduce){
  .page-header::after,.hero::after{animation:none}
  .laser-progress{display:none}
  .svc-card::after,.blog-card::after{transition:none}
}