/*
Theme Name: DEVPRO
Theme URI: https://devpro.com
Author: DEVPRO by Bajwa Brothers
Author URI: https://devpro.com
Description: Professional dark tech portfolio theme with 3D hero slider for DEVPRO by Bajwa Brothers. Features animated 3D carousel, custom page templates, and full business portfolio layout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: devpro
Tags: dark, portfolio, technology, business, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   DEVPRO THEME — GLOBAL VARIABLES & RESET
   ============================================================ */
:root {
  --dp-bg:        #05090f;
  --dp-bg2:       #080e18;
  --dp-surface:   #0b1422;
  --dp-surface2:  #0f1c2e;
  --dp-cyan:      #00c8f0;
  --dp-purple:    #6c3fff;
  --dp-red:       #ff3a5e;
  --dp-gold:      #f5b942;
  --dp-text:      #ddeeff;
  --dp-muted:     #5a7499;
  --dp-border:    rgba(0,200,240,.10);
  --dp-glow:      0 0 28px rgba(0,200,240,.30);
  --dp-radius:    10px;
  --dp-font-head: 'Orbitron', monospace;
  --dp-font-body: 'Syne', sans-serif;
  --dp-font-mono: 'JetBrains Mono', monospace;
  --dp-trans:     .35s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--dp-font-body);
  background: var(--dp-bg);
  color: var(--dp-text);
  overflow-x: hidden;
  line-height: 1.7;
}

img { max-width:100%; height:auto; display:block; }
a  { color:inherit; text-decoration:none; transition:color var(--dp-trans); }
ul, ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* Scrollbar */
::-webkit-scrollbar            { width:4px; }
::-webkit-scrollbar-track      { background:var(--dp-bg); }
::-webkit-scrollbar-thumb      { background:var(--dp-cyan); border-radius:2px; }

/* Screen-reader text */
.screen-reader-text {
  clip:rect(1px,1px,1px,1px); height:1px; overflow:hidden;
  position:absolute; width:1px; word-wrap:normal !important;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.dp-tag {
  font-family: var(--dp-font-mono);
  font-size: .68rem;
  letter-spacing: .20em;
  color: var(--dp-cyan);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .8rem;
}
.dp-tag::before {
  content:'';
  display:block;
  width:28px; height:1px;
  background:var(--dp-cyan);
}

.dp-title {
  font-family: var(--dp-font-head);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:1rem;
}

.dp-sub {
  color: var(--dp-muted);
  font-size: .97rem;
  max-width: 520px;
  margin-bottom:2.5rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.dp-btn {
  display:inline-block;
  padding:.85rem 2rem;
  font-family: var(--dp-font-mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  transition:all var(--dp-trans);
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0 100%);
}
.dp-btn-primary {
  background:linear-gradient(135deg,var(--dp-cyan),var(--dp-purple));
  color:#000;
}
.dp-btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,200,240,.40); color:#000; }

.dp-btn-outline {
  border:1px solid var(--dp-border);
  color:var(--dp-text);
  background:transparent;
}
.dp-btn-outline:hover { border-color:var(--dp-cyan); color:var(--dp-cyan); background:rgba(0,200,240,.05); }

/* ============================================================
   GLOW DIVIDER
   ============================================================ */
.dp-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--dp-cyan),var(--dp-purple),transparent);
  opacity:.25;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.dp-reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .70s ease, transform .70s ease;
}
.dp-reveal.dp-visible { opacity:1; transform:translateY(0); }

/* ============================================================
   SECTIONS
   ============================================================ */
.dp-section { padding:6rem 0; }
.dp-container { max-width:1200px; margin:0 auto; padding:0 2rem; }
.dp-section-head { margin-bottom:3.5rem; }

/* ============================================================
   GRID BACKGROUND (reusable)
   ============================================================ */
.dp-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,200,240,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,240,.035) 1px, transparent 1px);
  background-size:55px 55px;
  animation:gridScroll 25s linear infinite;
  pointer-events:none;
}
@keyframes gridScroll {
  to { background-position:55px 55px; }
}

/* ============================================================
   CARDS GRID (Services / Industries shared)
   ============================================================ */
.dp-cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1px;
  background:var(--dp-border);
  border:1px solid var(--dp-border);
  border-radius:var(--dp-radius);
  overflow:hidden;
}

.dp-card {
  background:var(--dp-surface);
  padding:2.2rem;
  position:relative;
  overflow:hidden;
  transition:background var(--dp-trans);
}
.dp-card::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--dp-cyan),transparent);
  transform:translateX(-100%);
  transition:transform .55s ease;
}
.dp-card:hover::after { transform:translateX(0); }
.dp-card:hover { background:var(--dp-surface2); }

.dp-card-num {
  font-family:var(--dp-font-mono);
  font-size:.62rem; letter-spacing:.2em;
  color:var(--dp-muted); margin-bottom:1.2rem;
}
.dp-card-icon {
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  background:rgba(0,200,240,.07);
  border:1px solid rgba(0,200,240,.18);
  border-radius:8px;
  margin-bottom:1.2rem;
  transition:all var(--dp-trans);
}
.dp-card:hover .dp-card-icon {
  background:rgba(0,200,240,.14);
  box-shadow:0 0 18px rgba(0,200,240,.25);
}
.dp-card-title {
  font-family:var(--dp-font-head);
  font-size:.88rem; font-weight:600;
  letter-spacing:.04em; margin-bottom:.6rem;
}
.dp-card-desc {
  font-size:.84rem; color:var(--dp-muted); line-height:1.7;
}
.dp-card-tags {
  display:flex; flex-wrap:wrap; gap:.35rem; margin-top:1.2rem;
}
.dp-tag-pill {
  padding:.22rem .65rem;
  background:rgba(0,200,240,.05);
  border:1px solid rgba(0,200,240,.14);
  font-family:var(--dp-font-mono);
  font-size:.62rem; color:var(--dp-muted);
  border-radius:3px;
}

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */
@media(max-width:768px){
  .dp-section { padding:4rem 0; }
  .dp-cards-grid { grid-template-columns:1fr; }
}