/*
Theme Name: حصن التقنية | Castle Tech
Theme URI: https://castle-tech.com
Author: Castle Tech
Author URI: https://castle-tech.com
Description: قالب مخصص لشركة حصن التقنية - حلول متكاملة لكاميرات المراقبة والشبكات والأنظمة الأمنية في الرياض
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: castle-tech
*/

:root {
  --navy:    #F4F8FC;
  --navy2:   #FFFFFF;
  --navy3:   #D8E6F0;
  --blue:    #1A6FA8;
  --blue2:   #1A6FA8;
  --blue3:   #2E86C1;
  --white:   #1A2A3A;
  --muted:   #5A7A94;
  --green:   #18A558;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'IBM Plex Sans Arabic',sans-serif;background:#F4F8FC;color:#1A2A3A;overflow-x:hidden;}

.topbar{background:var(--blue);padding:8px 5%;display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.topbar-wa{display:flex;align-items:center;gap:6px;background:var(--green);padding:4px 14px;border-radius:20px;font-size:12px;color:#fff;text-decoration:none;}
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.97);backdrop-filter:blur(10px);border-bottom:1px solid #D8E6F0;padding:0 5%;display:flex;align-items:center;justify-content:space-between;height:70px;}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.nav-logo-text{font-size:20px;font-weight:600;color:#1A2A3A;line-height:1.1;}
.nav-logo-sub{font-size:10px;color:#1A6FA8;letter-spacing:3px;}
.nav-links{display:flex;gap:28px;list-style:none;}
.nav-links a{color:#5A7A94;text-decoration:none;font-size:14px;transition:.2s;}
.nav-links a:hover,.nav-links a.active{color:var(--blue3);}
.nav-cta{background:var(--blue);color:#1A2A3A;padding:9px 20px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:500;border:1px solid var(--blue2);transition:.2s;}
.nav-cta:hover{background:var(--blue2);color:var(--navy);}

.hero{min-height:88vh;padding:80px 5% 60px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(26,111,168,0.12) 0%,transparent 60%);pointer-events:none;}
.hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(#D8E6F0 1px,transparent 1px),linear-gradient(90deg,var(--navy3) 1px,transparent 1px);background-size:40px 40px;opacity:0.25;pointer-events:none;}
.hero-content{position:relative;z-index:2;}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(26,111,168,.06);border:1px solid rgba(91,184,245,0.3);color:#1A6FA8;font-size:12px;padding:5px 14px;border-radius:20px;margin-bottom:24px;}
.hero-badge-dot{width:6px;height:6px;background:var(--blue3);border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{font-size:clamp(32px,4.5vw,56px);font-weight:600;line-height:1.3;margin-bottom:20px;}
.hero h1 span{color:#1A6FA8;}
.hero-desc{font-size:16px;color:#5A7A94;line-height:1.9;margin-bottom:36px;font-weight:300;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary{background:#1A6FA8;color:#1A2A3A;padding:13px 28px;border-radius:10px;text-decoration:none;font-size:14px;font-weight:500;border:1px solid var(--blue2);transition:.2s;}
.btn-primary:hover{background:var(--blue2);color:var(--navy);}
.btn-wa{background:var(--green);color:#fff;padding:13px 28px;border-radius:10px;text-decoration:none;font-size:14px;font-weight:500;transition:.2s;display:flex;align-items:center;gap:8px;}
.btn-wa:hover{opacity:.9;}
.hero-visual{position:relative;z-index:2;}
.monitor-wrap{background:#FFFFFF;border:1px solid #D8E6F0;border-radius:16px;padding:16px;position:relative;}
.monitor-bar{display:flex;align-items:center;gap:6px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #D8E6F0;}
.monitor-dot{width:8px;height:8px;border-radius:50%;}
.monitor-label{font-size:11px;color:#5A7A94;margin-right:auto;letter-spacing:1px;}
.live-badge{background:rgba(229,57,53,.15);color:#ef5350;font-size:10px;padding:2px 8px;border-radius:4px;border:1px solid rgba(229,57,53,.3);animation:pulse 1.5s infinite;}
.cams-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cam-feed{background:#EDF2F7;border-radius:8px;padding:10px;border:1px solid var(--navy3);aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.cam-feed::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,111,168,.04) 0%,transparent 60%);}
.cam-num{font-size:10px;color:#1A6FA8;font-family:monospace;z-index:1;}
.cam-icon{z-index:1;display:flex;justify-content:center;align-items:center;flex:1;}
.cam-time{font-size:9px;color:#5A7A94;font-family:monospace;z-index:1;}
.scan-line{position:absolute;left:0;right:0;height:1px;background:rgba(91,184,245,.15);animation:scan 3s linear infinite;}
@keyframes scan{0%{top:0}100%{top:100%}}

.stats-strip{background:#FFFFFF;border-top:1px solid #D8E6F0;border-bottom:1px solid #D8E6F0;padding:28px 5%;display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.stat-item{text-align:center;padding:0 20px;border-left:1px solid var(--navy3);}
.stat-item:last-child{border-left:none;}
.stat-num{font-size:32px;font-weight:600;color:#1A6FA8;}
.stat-lbl{font-size:12px;color:#5A7A94;margin-top:4px;}

section{padding:80px 5%;}
.section-tag{font-size:12px;color:#1A6FA8;letter-spacing:3px;margin-bottom:10px;text-transform:uppercase;}
.section-title{font-size:clamp(24px,3vw,36px);font-weight:600;margin-bottom:14px;}
.section-desc{font-size:15px;color:#5A7A94;line-height:1.8;max-width:600px;margin-bottom:44px;}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0;}
.service-card{background:#FFFFFF;border:1px solid var(--navy3);border-radius:14px;padding:28px;transition:.3s;cursor:pointer;position:relative;overflow:hidden;}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue2),transparent);opacity:0;transition:.3s;}
.service-card:hover{border-color:var(--blue);transform:translateY(-4px);}
.service-card:hover::before{opacity:1;}
.service-icon{width:48px;height:48px;background:rgba(26,111,168,.06);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;border:1px solid rgba(91,184,245,.2);}
.service-name{font-size:16px;font-weight:600;margin-bottom:8px;}
.service-desc{font-size:13px;color:#5A7A94;line-height:1.8;}
.service-price{margin-top:16px;font-size:12px;color:#1A6FA8;font-weight:500;}

.why-section{background:#FFFFFF;}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;}
.why-card{background:#F4F8FC;border:1px solid var(--navy3);border-radius:14px;padding:28px;display:flex;gap:18px;align-items:flex-start;}
.why-num{font-size:28px;font-weight:700;color:rgba(91,184,245,.2);font-family:'Bebas Neue',sans-serif;flex-shrink:0;line-height:1;}
.why-title{font-size:16px;font-weight:600;margin-bottom:8px;}
.why-desc{font-size:13px;color:#5A7A94;line-height:1.8;}

.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
.package-card{background:#FFFFFF;border:1px solid var(--navy3);border-radius:14px;padding:32px;text-align:center;transition:.3s;position:relative;}
.package-card.featured{border-color:#1A6FA8;background:linear-gradient(135deg,var(--navy2),rgba(26,111,168,.06));}
.package-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;padding:4px 16px;border-radius:20px;white-space:nowrap;}
.package-name{font-size:18px;font-weight:600;margin-bottom:8px;}
.package-price{font-size:28px;font-weight:700;color:#1A6FA8;margin:16px 0 4px;}
.package-price-note{font-size:12px;color:#5A7A94;margin-bottom:20px;}
.package-features{list-style:none;text-align:right;margin-bottom:24px;}
.package-features li{font-size:13px;color:#5A7A94;padding:6px 0;border-bottom:1px solid #D8E6F0;display:flex;align-items:center;gap:8px;}
.package-features li::before{content:'';width:6px;height:6px;background:var(--blue2);border-radius:50%;flex-shrink:0;}
.package-cta{display:block;background:var(--blue);color:#fff;padding:11px 24px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:500;transition:.2s;}
.package-cta:hover{background:var(--blue2);color:var(--navy);}
.package-card.featured .package-cta{background:var(--blue2);color:var(--navy);}

.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
.portfolio-card{background:#FFFFFF;border:1px solid var(--navy3);border-radius:14px;overflow:hidden;transition:.3s;}
.portfolio-card:hover{border-color:#1A6FA8;transform:translateY(-4px);}
.portfolio-img{height:160px;background:#F4F8FC;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-bottom:1px solid #D8E6F0;}
.portfolio-img-label{position:absolute;top:10px;right:10px;background:rgba(10,22,40,.8);color:#1A6FA8;font-size:10px;padding:3px 8px;border-radius:4px;border:1px solid var(--navy3);}
.portfolio-info{padding:16px;}
.portfolio-title{font-size:14px;font-weight:600;margin-bottom:4px;}
.portfolio-sub{font-size:12px;color:#1A6FA8;}

.cta-banner{background:linear-gradient(135deg,var(--navy2),rgba(26,111,168,.1));border:1px solid var(--blue);border-radius:20px;padding:60px 40px;text-align:center;position:relative;overflow:hidden;margin:0 5% 70px;}
.cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(91,184,245,.08),transparent 60%);}
.cta-title{font-size:clamp(22px,3vw,38px);font-weight:600;margin-bottom:14px;position:relative;}
.cta-desc{font-size:15px;color:#5A7A94;margin-bottom:32px;position:relative;}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;}

footer{background:#FFFFFF;border-top:1px solid #D8E6F0;padding:30px 5%;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;}
.footer-copy{font-size:12px;color:#5A7A94;}

.wa-float{position:fixed;bottom:28px;left:28px;z-index:999;background:var(--green);color:#fff;padding:12px 20px;border-radius:30px;display:flex;align-items:center;gap:8px;text-decoration:none;font-size:13px;font-weight:500;box-shadow:0 4px 20px rgba(37,162,68,.35);transition:.2s;}
.wa-float:hover{transform:scale(1.04);}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr;}
  .packages-grid{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .nav-links{display:none;}
}
@media(max-width:600px){
  .services-grid{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:1fr;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
}

.page-header{padding:60px 5% 50px;background:#1A6FA8;border-bottom:1px solid #D8E6F0;position:relative;overflow:hidden;}
.page-header::after{content:'';position:absolute;inset:0;background-image:linear-gradient(#D8E6F0 1px,transparent 1px),linear-gradient(90deg,var(--navy3) 1px,transparent 1px);background-size:40px 40px;opacity:.15;pointer-events:none;}
.breadcrumb{font-size:12px;color:#5A7A94;margin-bottom:12px;position:relative;z-index:1;}
.breadcrumb a{color:#fff;text-decoration:none;}
.page-header h1{font-size:clamp(28px,3.5vw,44px);font-weight:600;position:relative;z-index:1;margin-bottom:10px;color:#fff;}
.page-header p{font-size:15px;color:#5A7A94;position:relative;z-index:1;}

.quote-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;padding:60px 5%;align-items:start;}
.form-card{background:#FFFFFF;border:1px solid var(--navy3);border-radius:16px;padding:36px;}
.form-title{font-size:18px;font-weight:600;margin-bottom:6px;}
.form-subtitle{font-size:13px;color:#5A7A94;margin-bottom:28px;}
.form-group{margin-bottom:18px;}
.form-label{font-size:13px;font-weight:500;margin-bottom:8px;display:block;}
.form-label span{color:#ef5350;margin-right:2px;}
input,select,textarea{width:100%;background:#F4F8FC;border:1px solid var(--navy3);border-radius:10px;padding:12px 14px;font-size:13px;color:#1A2A3A;font-family:'IBM Plex Sans Arabic',sans-serif;transition:.2s;outline:none;}
input:focus,select:focus,textarea:focus{border-color:#1A6FA8;}
textarea{resize:vertical;min-height:110px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.services-check{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
.check-item{display:flex;align-items:center;gap:8px;background:#F4F8FC;border:1px solid var(--navy3);border-radius:8px;padding:10px 12px;cursor:pointer;transition:.2s;}
.check-item:hover{border-color:#1A6FA8;}
.check-item input[type=checkbox]{width:auto;cursor:pointer;accent-color:#1A6FA8;}
.check-item label{font-size:12px;color:#5A7A94;cursor:pointer;}
.submit-btn{width:100%;background:var(--blue);color:#fff;padding:14px;border-radius:10px;border:none;font-size:15px;font-weight:500;cursor:pointer;font-family:'IBM Plex Sans Arabic',sans-serif;transition:.2s;margin-top:8px;}
.submit-btn:hover{background:var(--blue2);color:var(--navy);}
.form-note{font-size:11px;color:#5A7A94;text-align:center;margin-top:12px;}
.success-msg{display:none;background:rgba(37,162,68,.1);border:1px solid rgba(37,162,68,.3);border-radius:10px;padding:16px;text-align:center;margin-top:16px;font-size:13px;color:#66bb6a;}
.sidebar{display:flex;flex-direction:column;gap:16px;}
.info-card{background:#FFFFFF;border:1px solid var(--navy3);border-radius:14px;padding:24px;}
.info-card-title{font-size:14px;font-weight:600;margin-bottom:16px;}
.contact-item{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.contact-icon{width:38px;height:38px;background:rgba(26,111,168,.06);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(91,184,245,.2);}
.contact-label{font-size:11px;color:#5A7A94;}
.contact-val{font-size:14px;font-weight:500;}
.contact-val a{color:#1A2A3A;text-decoration:none;}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;padding:13px;border-radius:10px;text-decoration:none;font-size:14px;font-weight:500;transition:.2s;}
.wa-btn:hover{opacity:.9;}
.hours-list{list-style:none;}
.hours-list li{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid rgba(26,58,92,.5);}
.hours-list li:last-child{border-bottom:none;}
.hours-list .day{color:#5A7A94;}
.hours-list .time{color:#1A6FA8;}
.promise-list{list-style:none;}
.promise-list li{font-size:13px;color:#5A7A94;padding:7px 0;border-bottom:1px solid rgba(26,58,92,.4);display:flex;align-items:center;gap:8px;}
.promise-list li:last-child{border-bottom:none;}