/*
Theme Name: Sabah AI
Theme URI: https://sabahai.com
Author: Sabah AI
Author URI: https://sabahai.com
Description: Engineering Blueprint Schematic - Custom AI, Geospatial AI, Chatbots, and AI Training.
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sabahai
*/

/* ========================================
   Engineering Blueprint Design System
   ======================================== */
:root {
  --bg: #0b1623;
  --bg-light: #111e2e;
  --text: #f0f0f0;
  --text-dim: #8b9bb4;
  --accent: #ff9f30;
  --success: #00ff9d;
  --grid-line: #1c2b3a;
  --border: rgba(139,155,180,0.15);
  --font: 'JetBrains Mono', monospace;
  --content-max: 1280px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);line-height:1.6;color:var(--text);background:var(--bg);min-height:100dvh;overflow-x:hidden}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--success)}
img{max-width:100%;height:auto}
::selection{background:rgba(255,159,48,0.3);color:var(--text)}

/* Blueprint Grid Background */
.blueprint-grid{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.4;background-image:
  linear-gradient(rgba(28,43,58,0.5) 1px,transparent 1px),
  linear-gradient(90deg,rgba(28,43,58,0.5) 1px,transparent 1px);
  background-size:40px 40px}
.blueprint-grid::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--accent),var(--accent) 20px,transparent 20px,transparent 40px);opacity:.3}
.blueprint-grid::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--success),var(--success) 20px,transparent 20px,transparent 40px);opacity:.2}

/* Container */
.container{max-width:var(--content-max);margin:0 auto;padding:0 1.5rem;position:relative;z-index:10}

/* ========================================
   Header
   ======================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:.85rem 0;border-bottom:1px solid var(--border);background:rgba(11,22,35,0.92);backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:.95rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:.5rem;text-transform:uppercase;letter-spacing:.1em}
.logo:hover{color:var(--accent)}
.logo svg{width:22px;height:22px}
.nav-links{display:flex;align-items:center;gap:1.5rem;list-style:none}
.nav-links a{color:var(--text-dim);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--accent);transition:width .15s}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.nav-cta{background:var(--accent);color:var(--bg)!important;padding:.45rem 1.25rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;transition:all .15s}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--success)!important;color:var(--bg)!important}
.nav-cta svg{display:none}
.menu-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;padding:.4rem;line-height:0}

/* ========================================
   Hero
   ======================================== */
.hero{z-index:10;min-height:100dvh;display:flex;align-items:center;padding:6rem 0 4rem;position:relative}
.hero::before{content:'';position:absolute;top:40%;left:5%;width:90%;height:1px;background:repeating-linear-gradient(90deg,var(--accent),var(--accent) 8px,transparent 8px,transparent 24px);opacity:.15;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:15%;right:8%;width:200px;height:200px;border:1px solid rgba(255,159,48,0.08);border-radius:50%;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hero-content h1{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;line-height:1.15;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.02em}
.hero-content h1 .tag{display:inline-block;font-size:.65rem;color:var(--accent);border:1px solid var(--accent);padding:2px 8px;margin-bottom:.75rem;letter-spacing:.15em;font-weight:500}
.hero-content h1 .highlight{color:var(--accent)}
.hero-subtitle{font-size:clamp(.8rem,1vw,.9rem);color:var(--text-dim);max-width:600px;margin-bottom:2rem;line-height:1.7}
.hero-buttons{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;border:none;font-family:var(--font);text-transform:uppercase;letter-spacing:.05em;border-radius:0}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{background:var(--success);color:var(--bg)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-dim)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.hero-visual{display:flex;justify-content:center;align-items:center;position:relative}
.hero-diagram{width:300px;height:280px;position:relative}
.hero-diagram svg{width:100%;height:100%}
.schematic-circle{position:absolute;width:180px;height:180px;border:1px solid var(--accent);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.4}
.schematic-circle-inner{position:absolute;width:100px;height:100px;border:1px dashed rgba(0,255,157,0.3);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.schematic-line-h{position:absolute;width:260px;height:1px;background:var(--accent);top:50%;left:50%;transform:translate(-50%,-50%);opacity:.3}
.schematic-line-v{position:absolute;width:1px;height:260px;background:var(--accent);top:50%;left:50%;transform:translate(-50%,-50%);opacity:.3}
.schematic-label{position:absolute;font-size:.55rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}
.schematic-label.tl{top:10%;left:5%}
.schematic-label.tr{top:10%;right:5%}
.schematic-label.bl{bottom:10%;left:5%}
.schematic-label.br{bottom:10%;right:5%}
.schematic-dot{position:absolute;width:6px;height:6px;background:var(--accent);border-radius:50%}
.schematic-dot:nth-child(1){top:20%;left:30%}
.schematic-dot:nth-child(2){top:65%;left:60%}
.schematic-dot:nth-child(3){top:40%;left:75%}
.schematic-connector{position:absolute;width:80px;height:0;border-top:1px dashed rgba(255,159,48,0.2)}
.schematic-connector:nth-child(1){top:calc(20% + 3px);left:calc(30% + 6px);transform:rotate(25deg)}
.schematic-connector:nth-child(2){top:calc(65% + 3px);left:calc(60% + 6px);transform:rotate(-15deg)}

/* ========================================
   Sections
   ======================================== */
.section{padding:clamp(3rem,6vw,5rem) 0;position:relative;z-index:10;border-bottom:1px solid var(--border)}
.section-header{text-align:center;margin-bottom:3rem}
.section-header .section-code{font-size:.6rem;color:var(--accent);border:1px solid var(--accent);display:inline-block;padding:2px 10px;margin-bottom:.75rem;letter-spacing:.15em;text-transform:uppercase}
.section-header h2{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;color:var(--text);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.03em}
.section-header p{color:var(--text-dim);font-size:.8rem;max-width:600px;margin:0 auto;line-height:1.6}
.section-line{width:80px;height:1px;background:var(--accent);margin:1rem auto 0}

/* ========================================
   Services
   ======================================== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.service-card{background:var(--bg);padding:2.5rem 2rem;text-align:left;position:relative;overflow:hidden;transition:background .15s}
.service-card:hover{background:var(--bg-light)}
.service-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--accent);transition:height .2s}
.service-card:hover::before{height:100%}
.service-icon{width:40px;height:40px;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.service-icon svg{width:20px;height:20px;color:var(--accent)}
.service-card h3{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}
.service-card .service-tag{font-size:.55rem;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem;display:block}
.service-card p{color:var(--text-dim);font-size:.75rem;line-height:1.6}

/* ========================================
   About / Specs
   ======================================== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.about-content .spec-label{font-size:.6rem;color:var(--accent);text-transform:uppercase;letter-spacing:.15em;margin-bottom:.75rem}
.about-content h2{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;color:var(--text);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.03em}
.about-content p{color:var(--text-dim);font-size:.8rem;margin-bottom:.75rem;line-height:1.65}
.specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:1.5rem}
.spec-item{background:var(--bg);padding:1rem;text-align:center}
.spec-item strong{display:block;font-size:1.1rem;color:var(--accent);font-weight:700}
.spec-item span{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}

/* ========================================
   CTA
   ======================================== */
.cta-section{text-align:center;border-bottom:none!important}
.cta-section .cta-code{font-size:.6rem;color:var(--success);border:1px solid var(--success);display:inline-block;padding:2px 10px;margin-bottom:.75rem;letter-spacing:.15em;text-transform:uppercase}
.cta-section h2{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;color:var(--text);margin-bottom:.5rem;text-transform:uppercase}
.cta-section p{color:var(--text-dim);font-size:.8rem;max-width:500px;margin:0 auto 1.5rem}

/* ========================================
   Footer
   ======================================== */
.site-footer{z-index:10;padding:3rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-brand .footer-ref{font-size:.55rem;color:var(--text-dim);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.15em}
.footer-brand h3{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem;text-transform:uppercase}
.footer-brand p{color:var(--text-dim);font-size:.7rem;line-height:1.6;max-width:300px}
.footer-col h4{font-size:.65rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.5rem}
.footer-col a{color:var(--text-dim);font-size:.7rem}
.footer-col a:hover{color:var(--accent)}
.footer-social{display:flex;gap:.5rem;margin-top:.75rem}
.footer-social a{width:32px;height:32px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:all .15s}
.footer-social a:hover{border-color:var(--accent);color:var(--accent)}
.footer-social a svg{width:14px;height:14px}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.25rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{color:var(--text-dim);font-size:.65rem}
.footer-bottom-links{display:flex;gap:1.5rem;list-style:none}
.footer-bottom-links a{color:var(--text-dim);font-size:.65rem}
.footer-bottom-links a:hover{color:var(--accent)}

/* ========================================
   Blog / Content
   ======================================== */
.page-content{max-width:750px;margin:0 auto;color:var(--text-dim);font-size:.85rem;line-height:1.8}
.page-content h1{font-size:1.5rem;color:var(--text);margin-bottom:.5rem;text-transform:uppercase}
.post-meta{font-size:.7rem;color:var(--text-dim);display:flex;gap:1rem;margin-bottom:2rem}
.post-card{border:1px solid var(--border);padding:1.5rem;margin-bottom:1rem;transition:border-color .15s;background:var(--bg)}
.post-card:hover{border-color:var(--accent)}
.post-card h2{font-size:.95rem;margin-bottom:.4rem;text-transform:uppercase}
.post-card h2 a{color:var(--text)}
.post-card h2 a:hover{color:var(--accent)}
.post-card .meta{font-size:.65rem;color:var(--text-dim);margin-bottom:.6rem}
.post-card p{color:var(--text-dim);font-size:.75rem}
.pagination{display:flex;gap:.25rem;justify-content:center;margin:2rem 0}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border:1px solid var(--border);font-size:.7rem;color:var(--text-dim);transition:all .15s}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .current{border-color:var(--accent);color:var(--accent)}

/* ========================================
   Responsive
   ======================================== */
@media(max-width:1024px){
.hero-grid,.about-grid{grid-template-columns:1fr;text-align:center;gap:2rem}
.hero-buttons{justify-content:center}
.hero-visual{order:-1}
.hero-diagram{width:220px;height:200px}
.services-grid{grid-template-columns:1fr 1fr}
.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:1rem;background:var(--bg);border-bottom:1px solid var(--border);gap:.5rem}
.nav-links.open{display:flex}
.menu-toggle{display:inline-flex}
.services-grid{grid-template-columns:1fr}
.specs-grid{grid-template-columns:1fr 1fr}
.footer-grid{grid-template-columns:1fr;gap:1.5rem}
.footer-bottom{flex-direction:column;text-align:center}
.hero{padding:5rem 0 3rem}}