/*
Theme Name: Saraj Systems
Theme URI: https://www.sarajsystems.com
Author: Saraj Systems
Author URI: https://www.sarajsystems.com
Description: Custom theme for Saraj Systems -- AI systems engineering and corporate training. This is a "quick wrap" conversion from a static HTML design: page content lives in front-page.php, header.php, and footer.php, not in the WordPress database. See README.txt before handing to a developer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary -- All Rights Reserved
Text Domain: saraj-systems
*/

/* ============================================================
   DESIGN TOKENS — distinct from AI Workflow India's navy/teal system
   Concept: engineering / systems / blueprint precision
============================================================ */
:root{
  --ink:#1C1F26;
  --indigo:#33415C;
  --copper:#A34E2E;
  --copper-light:#E8A87C;
  --paper:#FFFFFF;
  --fog:#F4F5F7;
  --line:#E2E4E9;
  --ash:#666B76;
  --ash-light:#9198A3;

  --display:'Space Grotesk', 'Arial Narrow', sans-serif;
  --body:'IBM Plex Sans', -apple-system, sans-serif;
  --mono:'IBM Plex Mono', 'Courier New', monospace;

  --maxw:1180px;
  --radius:7px;
  --radius-sm:4px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--copper); outline-offset:3px; border-radius:3px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:104px 0;}
@media (max-width:768px){ .section{padding:64px 0;} .wrap{padding:0 20px;} }

.eyebrow{
  font-family:var(--mono);
  font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--copper);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{content:'';width:5px;height:5px;background:var(--copper); display:inline-block;}

h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.1; letter-spacing:-0.01em; }
h2{font-size:clamp(28px,3.6vw,40px); margin-bottom:16px;}
h3{font-size:21px;}
p{color:var(--ash);}
.section-head{max-width:620px; margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:var(--radius-sm);
  font-family:var(--body); font-weight:600; font-size:14.5px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--copper); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(28,31,38,0.4); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-sm{padding:11px 20px; font-size:13px;}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1; transform:none;}

/* ============================================================
   TOPBAR
============================================================ */
.topbar{background:var(--ink); color:#A6ACBB; font-size:12.5px;}
.topbar-inner{display:flex; justify-content:space-between; align-items:center; padding:9px 28px; gap:16px;}
.topbar-contact a{transition:color .15s;}
.topbar-contact a:hover{color:var(--copper-light);}
.topbar-contact .dot{margin:0 10px; color:#454B58;}
@media (max-width:820px){ .topbar-trust{display:none;} .topbar-inner{justify-content:center;} }

/* ============================================================
   HEADER / NAV
============================================================ */
header.site{position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px;}
.logo{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:18.5px; color:var(--ink);}
.logo-mark{width:32px;height:32px; border-radius:var(--radius-sm); background:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.logo-mark svg{width:18px;height:18px;}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{font-size:14px; font-weight:500; color:var(--ash); transition:color .15s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-toggle{display:none; width:44px; height:44px; position:relative; flex-shrink:0;}
.nav-toggle span{position:absolute; left:11px; width:22px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .25s ease, top .25s ease;}
.nav-toggle span:nth-child(1){top:15px;}
.nav-toggle span:nth-child(2){top:21px;}
.nav-toggle span:nth-child(3){top:27px;}
.nav-toggle.open span:nth-child(1){top:21px; transform:rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){top:21px; transform:rotate(-45deg);}
@media (max-width:900px){
  .nav-links{position:fixed; top:0; right:-340px; height:100vh; width:min(78vw,320px); background:var(--paper); flex-direction:column; align-items:flex-start; padding:100px 32px 32px; gap:22px; box-shadow:-16px 0 48px -12px rgba(28,31,38,0.16); transition:right .35s cubic-bezier(.2,.8,.3,1);}
  .nav-links.open{right:0;}
  .nav-links a{font-size:17px; padding:10px 0; display:block;}
  .nav-links li{width:100%;}
  .nav-cta .btn-sm{display:none;}
  .nav-toggle{display:block;}
}

/* ============================================================
   HERO — circuit/blueprint signature
============================================================ */
.hero{position:relative; padding:80px 0 96px; background:var(--paper); overflow:hidden;}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 700px 500px at 78% 20%, black 0%, transparent 70%);
  opacity:0.6;
}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;}
.hero h1{font-size:clamp(36px,4.8vw,58px); line-height:1.06; margin:20px 0 22px;}
.hero h1 em{font-style:normal; color:var(--copper);}
.hero-sub{font-size:17px; color:var(--ash); max-width:470px; margin-bottom:34px;}
.hero-ctas{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:26px;}
.hero-trust{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--ash);}
.hero-trust svg{width:14px;height:14px; color:var(--copper); flex-shrink:0;}

.hero-art{position:relative; aspect-ratio:400/380;}
.hero-art svg{width:100%; height:100%; overflow:visible;}
.circuit-path{fill:none; stroke:var(--indigo); stroke-width:1.6; opacity:0.4;}
.circuit-pulse{fill:none; stroke:var(--copper); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:5 240; animation:pulseTravel 3.6s linear infinite;}
.circuit-pulse.p2{animation-delay:-1.6s; stroke:var(--indigo);}
@keyframes pulseTravel{ to{ stroke-dashoffset:-245; } }
.circuit-node{transform-box:fill-box; transform-origin:center;}
.circuit-node.pulse{animation:nodeGlow 3s ease-in-out infinite;}
.circuit-node.pulse.n2{animation-delay:1.5s;}
@keyframes nodeGlow{ 0%,100%{opacity:1;} 50%{opacity:0.45;} }
.tick-label{font-family:var(--mono); font-size:9px; fill:var(--ash-light);}

.hero-tag{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 13px; box-shadow:0 14px 30px -16px rgba(28,31,38,0.22);
  font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--ink);
  display:flex; align-items:center; gap:8px; animation:tagFloat 5s ease-in-out infinite;
}
.hero-tag .dot{width:6px;height:6px; background:var(--copper); flex-shrink:0;}
@keyframes tagFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:52px;}
  .hero-art{max-width:420px; margin:0 auto;}
}

/* ============================================================
   ABOUT
============================================================ */
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start;}
.about p{font-size:16px; margin-bottom:15px; max-width:510px;}
.stat-cards{display:flex; flex-direction:column; gap:14px;}
.stat-card{border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; display:flex; align-items:center; gap:16px; transition:border-color .2s, transform .2s;}
.stat-card:hover{border-color:var(--copper); transform:translateX(4px);}
.stat-icon{width:42px;height:42px; border-radius:var(--radius-sm); background:var(--fog); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.stat-icon svg{width:20px;height:20px; color:var(--ink);}
.stat-card strong{display:block; font-size:15.5px; color:var(--ink); font-weight:700;}
.stat-card span{font-size:13px; color:var(--ash);}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr; gap:34px;} }

/* ============================================================
   HIGHLIGHTED SERVICES
============================================================ */
.highlight{background:var(--fog);}
.highlight-row{display:grid; grid-template-columns:0.95fr 1.05fr; gap:60px; align-items:center;}
.highlight-row + .highlight-row{margin-top:88px;}
.highlight-row.rev .art-col{order:2;}
.highlight-row.rev .text-col{order:1;}
.art-panel{background:#fff; border:1px solid var(--line); border-radius:12px; padding:36px; box-shadow:0 20px 50px -28px rgba(28,31,38,0.2);}
.text-col h3{font-size:clamp(22px,2.8vw,28px); margin-bottom:12px;}
.text-col > p{font-size:15.5px; margin-bottom:24px; max-width:470px;}
.benefit-list{display:flex; flex-direction:column; gap:12px; margin-bottom:28px;}
.benefit-list li{display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--ink); font-weight:500;}
.benefit-list svg{width:18px; height:18px; color:var(--copper); flex-shrink:0; margin-top:1px;}

/* Diagnostic scan infographic (Assessment) */
.scan-wrap{display:flex; flex-direction:column; gap:16px;}
.scan-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.scan-cell{aspect-ratio:1; border-radius:4px; background:var(--fog); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative;}
.scan-cell.ok{background:#FBF0EA; border-color:var(--copper-light);}
.scan-cell svg{width:14px;height:14px;}
.scan-legend{display:flex; gap:20px; font-family:var(--mono); font-size:10.5px; color:var(--ash);}
.scan-legend span{display:flex; align-items:center; gap:6px;}
.scan-legend .sw{width:9px;height:9px; border-radius:2px;}

/* Modular assembly infographic (Training) */
.assemble-row{display:flex; align-items:center; justify-content:center; gap:6px;}
.blk{width:46px; height:46px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.blk.a{background:var(--ink);}
.blk.b{background:var(--copper);}
.blk.c{background:var(--indigo);}
.blk.ghost{background:transparent; border:1.5px dashed #C7CBD3;}
.blk svg{width:20px;height:20px; color:#fff;}
.assemble-arrow{color:var(--ash-light); flex-shrink:0;}
.assemble-caption{text-align:center; font-family:var(--mono); font-size:10.5px; color:var(--ash); text-transform:uppercase; letter-spacing:.06em; margin-top:14px;}

@media (max-width:900px){
  .highlight-row{grid-template-columns:1fr; gap:32px;}
  .highlight-row.rev .art-col{order:1;}
  .highlight-row.rev .text-col{order:2;}
  .highlight-row + .highlight-row{margin-top:60px;}
  .art-panel{padding:26px;}
}

/* ============================================================
   OTHER SERVICES
============================================================ */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px;}
.svc-card{border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; transition:border-color .2s, transform .2s, box-shadow .2s;}
.svc-card:hover{border-color:var(--copper); transform:translateY(-4px); box-shadow:0 18px 36px -24px rgba(28,31,38,0.24);}
.svc-icon{width:42px; height:42px; border-radius:var(--radius-sm); background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.svc-icon svg{width:20px; height:20px; color:#fff;}
.svc-card h4{font-family:var(--body); font-size:16px; font-weight:700; margin-bottom:7px; color:var(--ink);}
.svc-card p{font-size:13.5px; line-height:1.55;}
@media (max-width:900px){ .svc-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .svc-grid{grid-template-columns:1fr;} }

/* ============================================================
   TESTIMONIALS
============================================================ */
.testimonials{background:var(--fog);}
.tm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.tm-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:15px;}
.tm-stars{color:#D89A3E; letter-spacing:1px;}
.tm-quote{font-size:14px; color:var(--ink); font-style:italic; line-height:1.6;}
.tm-who{display:flex; align-items:center; gap:11px; margin-top:auto;}
.tm-avatar{width:36px; height:36px; border-radius:50%; background:var(--indigo); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;}
.tm-who strong{display:block; font-size:13px; color:var(--ink);}
.tm-who span{font-size:11.5px; color:var(--ash);}
.tm-note{text-align:center; margin-top:32px; font-size:12.5px; color:var(--ash); font-family:var(--mono);}
@media (max-width:900px){ .tm-grid{grid-template-columns:1fr;} }

/* ============================================================
   CONTACT
============================================================ */
.contact-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:52px; align-items:start;}
.form-card{background:var(--fog); border:1px solid var(--line); border-radius:12px; padding:36px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:15px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; font-weight:600; color:var(--ink);}
.field input, .field select, .field textarea{border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; font-size:14px; color:var(--ink); background:#fff; transition:border-color .15s;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--copper); outline:none;}
.field textarea{resize:vertical; min-height:96px;}
.form-full{margin-bottom:15px;}
.form-note{font-size:11.5px; color:var(--ash); margin-top:13px;}
.contact-info{display:flex; flex-direction:column; gap:16px;}
.info-card{display:flex; align-items:flex-start; gap:15px; padding:18px; border:1px solid var(--line); border-radius:var(--radius);}
.info-icon{width:38px;height:38px;border-radius:var(--radius-sm); background:var(--fog); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.info-icon svg{width:18px;height:18px; color:var(--ink);}
.info-card strong{display:block; font-size:13.5px; color:var(--ink); margin-bottom:3px;}
.info-card span, .info-card a{font-size:13px; color:var(--ash);}
.info-card a:hover{color:var(--copper);}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:32px;} .form-row{grid-template-columns:1fr;} .form-card{padding:24px;} }

/* ============================================================
   FOOTER
============================================================ */
footer{background:var(--ink); color:#9CA2B3; padding:60px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08);}
.footer-brand .logo{color:#fff; margin-bottom:13px;}
.footer-brand .logo-mark{background:var(--copper);}
.footer-brand p{color:#7D8494; font-size:13.5px; max-width:280px;}
.footer-col h5{font-family:var(--body); font-size:12.5px; font-weight:700; color:#fff; letter-spacing:.04em; text-transform:uppercase; margin-bottom:15px;}
.footer-col ul{display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:13.5px; color:#9CA2B3; transition:color .15s;}
.footer-col a:hover{color:var(--copper-light);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; color:#6B7180; flex-wrap:wrap; gap:12px;}
.footer-legal{display:flex; gap:20px;}
.social-row{display:flex; gap:9px; margin-top:15px;}
.social-row a{width:34px;height:34px;border-radius:var(--radius-sm); background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; transition:background .15s;}
.social-row a:hover{background:var(--copper);}
.social-row svg{width:16px;height:16px; color:#fff;}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; gap:28px 18px;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} .footer-bottom{flex-direction:column; align-items:flex-start;} }

/* ============================================================
   CLIENT LOGO BAR
============================================================ */
.logo-bar{background:var(--fog); border-bottom:1px solid var(--line); padding:26px 0;}
.logo-bar-inner{display:flex; align-items:center; gap:32px; flex-wrap:wrap;}
.logo-bar-label{font-family:var(--mono); font-size:11px; color:var(--ash); text-transform:uppercase; letter-spacing:.1em; flex-shrink:0;}
.logo-row{display:flex; align-items:center; gap:28px; flex-wrap:wrap; flex:1;}
.logo-chip{
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--radius-sm);
  border:1.5px dashed #C7CBD3; background:#fff;
  font-family:var(--mono); font-size:12px; color:var(--ash);
  white-space:nowrap;
}
.logo-chip svg{width:14px;height:14px; color:var(--ash-light); flex-shrink:0;}
@media (max-width:700px){
  .logo-bar-inner{flex-direction:column; align-items:flex-start; gap:14px;}
  .logo-row{gap:12px;}
}

/* ============================================================
   INDUSTRIES
============================================================ */
.ind-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.ind-card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 18px; text-align:center;
  transition:border-color .2s, transform .2s, background .2s;
}
.ind-card:hover{border-color:var(--copper); transform:translateY(-3px); background:var(--fog);}
.ind-icon{
  width:44px; height:44px; border-radius:50%; background:var(--fog);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.ind-card:hover .ind-icon{background:#fff;}
.ind-icon svg{width:21px;height:21px; color:var(--indigo);}
.ind-card span{font-size:13.5px; font-weight:600; color:var(--ink);}
@media (max-width:820px){ .ind-grid{grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   BLOG
============================================================ */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.blog-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s;}
.blog-card:hover{border-color:var(--copper); transform:translateY(-4px); box-shadow:0 18px 36px -24px rgba(28,31,38,0.24);}
.blog-thumb{
  aspect-ratio:16/9; background:
    linear-gradient(135deg, var(--fog) 0%, var(--fog) 100%);
  position:relative; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
}
.blog-thumb svg{width:34px;height:34px; color:var(--line);}
.blog-tag{
  position:absolute; top:12px; left:12px;
  background:#fff; border:1px solid var(--line); border-radius:100px;
  padding:4px 11px; font-family:var(--mono); font-size:10px; color:var(--copper); font-weight:500;
}
.blog-body{padding:20px 20px 22px;}
.blog-date{font-family:var(--mono); font-size:11px; color:var(--ash); margin-bottom:9px; display:block;}
.blog-body h4{font-family:var(--body); font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.4; margin-bottom:10px;}
.blog-link{font-size:13px; font-weight:600; color:var(--copper); display:inline-flex; align-items:center; gap:5px;}
.blog-note{text-align:center; margin-top:30px; font-size:12.5px; color:var(--ash); font-family:var(--mono);}
@media (max-width:900px){ .blog-grid{grid-template-columns:1fr;} }