/*
Theme Name: Avant Techs
Theme URI: https://avanttechs.com
Author: Avant Techs Pvt. Ltd.
Author URI: https://avanttechs.com
Description: A modern, gradient-driven business theme built for Avant Techs Pvt. Ltd. — full-stack development, data analysis, digital marketing and accounting software, presented with animated hover states, scroll reveals and a signature animated network hero.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: avant-techs
Tags: business, portfolio, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, e-commerce
*/

/* =========================================================
   0. RESET & BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

/* =========================================================
   1. DESIGN TOKENS
========================================================= */
:root{
  /* -- Brand palette: "Ink / Paper / Signal / Circuit / Volt / Pulse" -- */
  --ink:            #0A0E27;
  --ink-2:          #121834;
  --ink-3:          #1A2147;
  --paper:          #F6F7FC;
  --paper-2:        #EEF0FA;
  --white:          #FFFFFF;

  --signal:         #4F46E5;   /* primary indigo   */
  --signal-dark:    #3B32B0;
  --circuit:        #22D3EE;   /* secondary cyan   */
  --volt:           #A855F7;   /* tertiary violet  */
  --pulse:          #FB7185;   /* sparing accent   */

  --text-body:      #1B1F3B;
  --text-muted:     #5B6082;
  --text-on-dark:   #E7E9F7;
  --text-on-dark-muted: #9BA1C7;
  --border:         #E3E5F3;
  --border-dark:    rgba(231,233,247,0.12);

  --grad-brand:     linear-gradient(135deg, var(--signal) 0%, var(--circuit) 100%);
  --grad-brand-2:   linear-gradient(135deg, var(--volt) 0%, var(--pulse) 100%);
  --grad-tri:       linear-gradient(120deg, var(--signal) 0%, var(--volt) 55%, var(--circuit) 100%);
  --grad-mesh:      radial-gradient(circle at 15% 20%, rgba(79,70,229,0.55), transparent 42%),
                     radial-gradient(circle at 85% 15%, rgba(34,211,238,0.35), transparent 45%),
                     radial-gradient(circle at 50% 90%, rgba(168,85,247,0.35), transparent 50%);
  --grad-text:      linear-gradient(100deg, var(--signal), var(--volt) 45%, var(--circuit) 90%);

  --shadow-sm:      0 2px 10px rgba(10,14,39,0.06);
  --shadow-md:      0 12px 30px rgba(10,14,39,0.10);
  --shadow-lg:      0 24px 60px rgba(10,14,39,0.16);
  --shadow-glow:    0 18px 45px rgba(79,70,229,0.35);
  --shadow-glow-cy: 0 18px 45px rgba(34,211,238,0.30);

  --radius-sm:      10px;
  --radius-md:      18px;
  --radius-lg:      28px;
  --radius-pill:    999px;

  --ease:           cubic-bezier(.22,1,.36,1);
  --fast:           .2s var(--ease);
  --med:            .45s var(--ease);
  --slow:           .8s var(--ease);

  --container:      1220px;
  --section-y:      clamp(4.5rem, 8vw, 8rem);
  --gap:            1.75rem;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
}

/* =========================================================
   2. TYPOGRAPHY
========================================================= */
body{
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--paper);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-body);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark p, .on-dark span { color: var(--text-on-dark); }

h1{ font-size: clamp(2.4rem, 2rem + 2.2vw, 3.6rem); }
h2{ font-size: clamp(1.9rem, 1.6rem + 1.4vw, 2.75rem); }
h3{ font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
h4{ font-size: 1.125rem; }
p{ color: var(--text-muted); }
p.lead{ font-size: 1.15rem; line-height: 1.75; }
strong{ font-weight: 600; color: var(--text-body); }
.on-dark p{ color: var(--text-on-dark-muted); }

.eyebrow{
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
  margin-bottom: 1rem;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1.5px;
  background: var(--grad-brand);
  display:inline-block;
}
.on-dark .eyebrow{ color: var(--circuit); }

.grad-text{
  background: var(--grad-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
  display: inline-block;
}
@keyframes gradientShift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

/* =========================================================
   3. LAYOUT
========================================================= */
.container{ max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
.section{ padding-block: var(--section-y); position: relative; }
.section-head{ max-width: 640px; margin-bottom: 3.5rem; }
.section-head.center{ margin-inline: auto; text-align: center; }
.bg-paper2{ background: var(--paper-2); }
.bg-ink{ background: var(--ink); }
.bg-white{ background: var(--white); }
.grid{ display: grid; gap: var(--gap); }
.g-2{ grid-template-columns: repeat(2,1fr); }
.g-3{ grid-template-columns: repeat(3,1fr); }
.g-4{ grid-template-columns: repeat(4,1fr); }
.flex{ display:flex; align-items:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* reveal-on-scroll */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }
.reveal-delay-4{ transition-delay: .32s; }

/* =========================================================
   4. BUTTONS
========================================================= */
.btn{
  display: inline-flex; align-items: center; justify-content:center; gap: .55rem;
  font-family: var(--font-body);
  font-weight: 600; font-size: .95rem;
  padding: .95rem 1.9rem;
  border-radius: var(--radius-pill);
  transition: transform var(--fast), box-shadow var(--fast), background-position var(--med);
  white-space: nowrap;
  position: relative;
}
.btn svg{ width:18px; height:18px; transition: transform var(--fast); }
.btn-primary{
  background: var(--grad-brand);
  background-size: 180% auto;
  background-position: 0% 50%;
  color: var(--white);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover{ background-position: 100% 50%; transform: translateY(-3px); box-shadow: 0 22px 50px rgba(79,70,229,0.45); }
.btn-primary:hover svg{ transform: translateX(4px); }
.btn-ghost{
  background: transparent;
  color: var(--text-body);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover{ border-color: var(--signal); color: var(--signal); transform: translateY(-3px); }
.on-dark .btn-ghost{ color: var(--text-on-dark); border-color: var(--border-dark); }
.on-dark .btn-ghost:hover{ border-color: var(--circuit); color: var(--circuit); }
.btn-block{ width:100%; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible{
  outline: 2.5px solid var(--volt); outline-offset: 3px; border-radius: var(--radius-sm);
}

/* =========================================================
   5. SITE HEADER / NAV
========================================================= */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 999;
  padding: 1.35rem 0;
  transition: background var(--med), padding var(--med), box-shadow var(--med), backdrop-filter var(--med);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.site-header.is-scrolled{
  padding: .85rem 0;
  background: rgba(10,14,39,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(10,14,39,0.25);
}
.site-logo{ display:flex; align-items:center; gap:.6rem; font-family: var(--font-display); font-size:1.35rem; font-weight:700; color:var(--white); }
.site-logo img{ max-height: 40px; width:auto; }
.site-logo .logo-mark{
  width: 38px; height:38px; border-radius: 11px;
  background: var(--grad-brand); display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-family: var(--font-display); flex-shrink:0;
}
.site-logo .logo-text span{ background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

.primary-nav ul{ display:flex; gap:2.1rem; align-items:center; }
.primary-nav a{
  font-size:.95rem; font-weight:500; color: var(--text-on-dark); position:relative; padding: .3rem 0;
}
.primary-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background: var(--grad-brand); transition: width var(--fast);
}
.primary-nav a:hover::after, .primary-nav a.is-active::after, .primary-nav .current-menu-item > a::after{ width:100%; }
.primary-nav a:hover{ color: var(--white); }
.header-cta{ display:flex; align-items:center; gap:1.5rem; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; width:28px; z-index:1001; }
.menu-toggle span{ height:2px; width:100%; background:#fff; border-radius:2px; transition: transform var(--fast), opacity var(--fast); }
.menu-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2){ opacity:0; }
.menu-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   6. HERO + SIGNATURE NETWORK CANVAS
========================================================= */
.hero{
  position: relative;
  background: var(--ink);
  padding-top: clamp(9rem, 14vw, 12rem);
  padding-bottom: clamp(5rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; background: var(--grad-mesh); z-index:-2;
}
.hero-canvas{ position:absolute; inset:0; z-index:-1; opacity:.85; }
.hero-grid-lines{
  position:absolute; inset:0; z-index:-2;
  background-image: linear-gradient(var(--border-dark) 1px, transparent 1px), linear-gradient(90deg, var(--border-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
}
.hero-inner{ max-width: 780px; }
.hero .eyebrow{ color: var(--circuit); }
.hero-status{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--font-mono); font-size:.78rem; color: var(--text-on-dark-muted);
  border:1px solid var(--border-dark); padding:.45rem .9rem; border-radius: var(--radius-pill);
  margin-bottom: 1.6rem;
}
.hero-status .dot{ width:7px; height:7px; border-radius:50%; background: var(--pulse); box-shadow: 0 0 0 0 rgba(251,113,133,.6); animation: pulseDot 2s infinite; }
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(251,113,133,.55); }
  70%{ box-shadow: 0 0 0 9px rgba(251,113,133,0); }
  100%{ box-shadow: 0 0 0 0 rgba(251,113,133,0); }
}
.hero h1{ color:#fff; margin-bottom: 1.4rem; }
.hero-cycle{
  display:inline-block; position:relative; min-width: 1ch;
}
.hero-cycle-word{
  background: var(--grad-text); background-size: 200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: gradientShift 5s ease-in-out infinite;
}
.hero p.lead{ color: var(--text-on-dark-muted); max-width: 560px; margin-bottom: 2.4rem; }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom: 3.5rem; }
.hero-meta{ display:flex; gap:2.6rem; flex-wrap:wrap; }
.hero-meta div{ display:flex; flex-direction:column; }
.hero-meta strong{ font-family: var(--font-display); font-size:1.6rem; color:#fff; }
.hero-meta span{ font-size:.82rem; color: var(--text-on-dark-muted); }

/* =========================================================
   7. STATS STRIP
========================================================= */
.stats-strip{ background: var(--ink-2); padding-block: 2.6rem; border-top:1px solid var(--border-dark); border-bottom:1px solid var(--border-dark); }
.stats-strip .grid{ grid-template-columns: repeat(4,1fr); text-align:center; }
.stat strong{ display:block; font-family: var(--font-display); font-size: clamp(1.7rem,1.4rem + 1vw,2.4rem); color:#fff; }
.stat span{ font-size:.85rem; color: var(--text-on-dark-muted); }

/* =========================================================
   8. CARDS — services / values / portfolio / team / blog
========================================================= */
.card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 2.2rem; transition: transform var(--med), box-shadow var(--med), border-color var(--med);
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: var(--grad-brand); opacity:0; transition: opacity var(--med);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before{ opacity:1; }

.icon-tile{
  width:56px; height:56px; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background: var(--paper-2); color: var(--signal); margin-bottom:1.4rem;
  transition: background var(--med), transform var(--med), color var(--med);
}
.icon-tile svg{ width:26px; height:26px; }
.card:hover .icon-tile{ background: var(--grad-brand); color:#fff; transform: rotate(-6deg) scale(1.08); }

.service-card h3{ margin-bottom:.6rem; }
.service-card p{ margin-bottom:1.2rem; font-size:.96rem; }
.service-card .card-link{ font-size:.88rem; font-weight:600; color:var(--signal); display:inline-flex; align-items:center; gap:.4rem; }
.service-card .card-link svg{ width:15px;height:15px; transition: transform var(--fast); }
.service-card:hover .card-link svg{ transform: translateX(4px); }

.value-card{ text-align:left; }

/* Portfolio */
.portfolio-filters{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.filter-btn{
  font-size:.86rem; font-weight:600; padding:.55rem 1.25rem; border-radius: var(--radius-pill);
  border:1.5px solid var(--border); color: var(--text-muted); transition: all var(--fast);
}
.filter-btn:hover{ border-color: var(--signal); color: var(--signal); }
.filter-btn.is-active{ background: var(--grad-brand); border-color:transparent; color:#fff; }

.portfolio-card{ border-radius: var(--radius-lg); overflow:hidden; background:#fff; border:1px solid var(--border); transition: transform var(--med), box-shadow var(--med); }
.portfolio-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.portfolio-thumb{
  height: 220px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.portfolio-thumb .thumb-tag{
  position:absolute; top:14px; left:14px; background:rgba(255,255,255,.18); backdrop-filter: blur(6px);
  color:#fff; font-size:.72rem; font-weight:600; padding:.35rem .8rem; border-radius: var(--radius-pill); text-transform:uppercase; letter-spacing:.06em;
}
.portfolio-thumb .thumb-mark{ font-family: var(--font-display); font-size:3rem; color: rgba(255,255,255,.85); font-weight:700; transition: transform var(--med); }
.portfolio-card:hover .thumb-mark{ transform: scale(1.15) rotate(-4deg); }
.portfolio-body{ padding: 1.6rem 1.8rem 1.9rem; }
.portfolio-body span{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--signal); }
.portfolio-body h3{ margin: .4rem 0 .5rem; }
.portfolio-body p{ font-size:.92rem; }

/* Team */
.team-card{ text-align:center; }
.avatar{
  width:96px; height:96px; border-radius:50%; margin: 0 auto 1.2rem;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:1.5rem; font-weight:700; color:#fff;
  position:relative; transition: transform var(--med);
}
.team-card:hover .avatar{ transform: scale(1.07); }
.avatar::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px dashed var(--border); }
.team-card h3{ margin-bottom:.15rem; font-size:1.1rem; }
.team-role{ font-size:.85rem; color: var(--signal); font-weight:600; margin-bottom:.9rem; display:block; }
.team-social{ display:flex; justify-content:center; gap:.6rem; }
.team-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color: var(--text-muted); transition: all var(--fast);
}
.team-social a:hover{ background: var(--grad-brand); border-color:transparent; color:#fff; transform: translateY(-3px); }
.team-social svg{ width:15px; height:15px; }

/* Blog */
.blog-card{ display:flex; flex-direction:column; border-radius: var(--radius-lg); overflow:hidden; background:#fff; border:1px solid var(--border); transition: transform var(--med), box-shadow var(--med); }
.blog-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.blog-thumb{ height:190px; position:relative; }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform var(--slow); }
.blog-card:hover .blog-thumb img{ transform: scale(1.08); }
.blog-body{ padding:1.6rem 1.7rem 1.9rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.blog-meta{ display:flex; gap:1rem; font-size:.78rem; color: var(--text-muted); font-family: var(--font-mono); }
.blog-body h3 a:hover{ color: var(--signal); }
.blog-body p{ font-size:.92rem; flex:1; }
.read-more{ font-size:.86rem; font-weight:600; color:var(--signal); display:inline-flex; align-items:center; gap:.4rem; }
.read-more svg{ width:15px;height:15px; transition: transform var(--fast); }
.blog-card:hover .read-more svg{ transform: translateX(4px); }

/* =========================================================
   9. PROCESS / TIMELINE
========================================================= */
.process-steps{ display:grid; grid-template-columns: repeat(5,1fr); gap: 1.5rem; position:relative; }
.process-steps::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:1.5px;
  background: linear-gradient(90deg, var(--border) 0%, var(--border) 100%); z-index:0;
}
.process-step{ position:relative; z-index:1; text-align:left; }
.process-num{
  width:52px; height:52px; border-radius:50%; background:#fff; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:600; color: var(--signal);
  margin-bottom:1.2rem; transition: all var(--med);
}
.process-step:hover .process-num{ background: var(--grad-brand); border-color:transparent; color:#fff; transform: scale(1.1); }
.process-step h3{ font-size:1.05rem; margin-bottom:.5rem; }
.process-step p{ font-size:.88rem; }

.timeline{ position:relative; padding-left: 2.2rem; border-left: 2px solid var(--border); display:flex; flex-direction:column; gap:2.6rem; }
.timeline-item{ position:relative; }
.timeline-item::before{
  content:""; position:absolute; left:-2.2rem; top:2px; width:14px; height:14px; border-radius:50%;
  background: var(--grad-brand); box-shadow: 0 0 0 4px var(--paper);
}
.timeline-year{ font-family: var(--font-mono); color:var(--signal); font-weight:600; font-size:.9rem; }
.timeline-item h3{ margin: .3rem 0 .5rem; font-size:1.15rem; }
.timeline-item p{ font-size:.92rem; max-width: 560px; }

/* =========================================================
   10. TESTIMONIALS
========================================================= */
.testimonial-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 2.4rem;
  display:flex; flex-direction:column; gap:1.3rem; transition: transform var(--med), box-shadow var(--med);
}
.testimonial-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.testimonial-card svg{ width:34px; height:34px; color: var(--circuit); opacity:.5; }
.testimonial-card p{ color: var(--text-body); font-size:1rem; }
.testimonial-person{ display:flex; align-items:center; gap:.9rem; margin-top:auto; }
.testimonial-person .avatar{ width:46px;height:46px; font-size:.9rem; margin:0; }
.testimonial-person strong{ display:block; font-size:.92rem; }
.testimonial-person span{ font-size:.8rem; color:var(--text-muted); }

/* =========================================================
   11. TECH STACK BADGES
========================================================= */
.tech-marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tech-track{ display:flex; gap:1rem; width:max-content; animation: scrollTrack 26s linear infinite; }
.tech-marquee:hover .tech-track{ animation-play-state: paused; }
@keyframes scrollTrack{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.tech-pill{
  font-family: var(--font-mono); font-size:.85rem; font-weight:500; color: var(--text-on-dark);
  border:1px solid var(--border-dark); padding:.7rem 1.4rem; border-radius: var(--radius-pill); white-space:nowrap;
  transition: all var(--fast);
}
.tech-pill:hover{ border-color: var(--circuit); color: var(--circuit); background: rgba(34,211,238,0.08); }

/* =========================================================
   11b. ABOUT VISUAL — code window + floating badges (no stock photo needed)
========================================================= */
.about-visual{ position:relative; }
.code-window{
  background: var(--ink); border-radius: var(--radius-lg); padding: 1.7rem;
  box-shadow: var(--shadow-lg); transform: rotate(-2deg); transition: transform var(--med);
  border: 1px solid var(--border-dark);
}
.about-visual:hover .code-window{ transform: rotate(0deg); }
.code-window-head{ display:flex; gap:.45rem; margin-bottom:1.3rem; }
.code-window-head span{ width:11px; height:11px; border-radius:50%; background: var(--border-dark); }
.code-window-head span:nth-child(1){ background:#FB7185; }
.code-window-head span:nth-child(2){ background:#FBBF24; }
.code-window-head span:nth-child(3){ background:#34D399; }
.code-window-body pre{ font-family: var(--font-mono); font-size:.82rem; line-height:2; color: var(--text-on-dark-muted); overflow-x:auto; white-space:pre; }
.c-kw{ color: var(--volt); }
.c-fn{ color: var(--circuit); }
.c-str{ color: #86EFAC; }
.c-com{ color: #5B6082; }
.floating-badge{
  position:absolute; background:#fff; border-radius: var(--radius-md); padding:.85rem 1.2rem;
  box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:.7rem; font-size:.85rem; font-weight:600;
  animation: floatY 4.5s ease-in-out infinite; border:1px solid var(--border);
}
.floating-badge .icon-tile{ width:36px; height:36px; margin-bottom:0; }
.floating-badge .icon-tile svg{ width:18px; height:18px; }
.badge-1{ top:-1.4rem; right:-1.4rem; animation-delay:0s; }
.badge-2{ bottom:-1.4rem; left:-1.6rem; animation-delay:1.6s; }
@media (max-width: 900px){ .floating-badge{ display:none; } .code-window{ transform:none; } }

/* =========================================================
   12. CTA BAND
========================================================= */
.cta-band{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; padding: clamp(2.8rem,5vw,4.5rem);
  background: var(--ink); isolation:isolate; text-align:center;
}
.cta-band::before{ content:""; position:absolute; inset:0; background: var(--grad-mesh); z-index:-1; }
.cta-band h2{ color:#fff; margin-bottom: 1rem; }
.cta-band p{ color: var(--text-on-dark-muted); max-width:520px; margin: 0 auto 2rem; }
.cta-band .btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   13. FOOTER
========================================================= */
.site-footer{ background: var(--ink); padding-top: 5rem; border-top: 1px solid var(--border-dark); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3.5rem; }
.footer-brand p{ margin: 1.2rem 0 1.5rem; font-size:.92rem; max-width: 280px; }
.footer-social{ display:flex; gap:.7rem; }
.footer-social a{ width:38px;height:38px;border-radius:50%; border:1px solid var(--border-dark); display:flex; align-items:center; justify-content:center; color: var(--text-on-dark-muted); transition: all var(--fast); }
.footer-social a:hover{ background: var(--grad-brand); border-color:transparent; color:#fff; transform: translateY(-3px); }
.footer-social svg{ width:16px;height:16px; }
.footer-col h4{ color:#fff; font-size:.95rem; margin-bottom:1.3rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.8rem; }
.footer-col a{ font-size:.9rem; color: var(--text-on-dark-muted); transition: color var(--fast); }
.footer-col a:hover{ color: var(--circuit); padding-left:4px; }
.footer-col li{ transition: padding var(--fast); }
.footer-contact li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; color: var(--text-on-dark-muted); }
.footer-contact svg{ width:17px;height:17px; flex-shrink:0; margin-top:.15rem; color: var(--circuit); }
.footer-bottom{ border-top:1px solid var(--border-dark); padding:1.6rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.82rem; color: var(--text-on-dark-muted); }
.footer-bottom a{ color: var(--text-on-dark-muted); }
.footer-bottom a:hover{ color:#fff; }
.back-to-top{
  position:fixed; right:1.8rem; bottom:1.8rem; width:48px; height:48px; border-radius:50%;
  background: var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-glow); opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all var(--fast); z-index: 900;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform: translateY(-4px); }
.back-to-top svg{ width:20px;height:20px; }

/* =========================================================
   14. FORMS
========================================================= */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.2rem; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size:.85rem; font-weight:600; color: var(--text-body); }
.form-field input, .form-field textarea, .form-field select{
  border:1.5px solid var(--border); border-radius: var(--radius-sm); padding:.9rem 1.1rem; font-size:.95rem;
  background:#fff; transition: border-color var(--fast), box-shadow var(--fast);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  border-color: var(--signal); box-shadow: 0 0 0 4px rgba(79,70,229,0.12); outline:none;
}
.form-field textarea{ resize: vertical; min-height:140px; }
.form-note{ font-size:.82rem; color: var(--text-muted); margin-top:-.5rem; margin-bottom:1.2rem; }
.form-success{ background: #ECFDF5; border:1px solid #A7F3D0; color:#065F46; padding:1rem 1.3rem; border-radius: var(--radius-sm); margin-bottom:1.5rem; font-size:.92rem; }
.form-error{ background: #FEF2F2; border:1px solid #FECACA; color:#991B1B; padding:1rem 1.3rem; border-radius: var(--radius-sm); margin-bottom:1.5rem; font-size:.92rem; }

.contact-info-card{
  display:flex; gap:1.1rem; padding:1.5rem; border:1px solid var(--border); border-radius: var(--radius-md); margin-bottom:1.1rem;
  transition: all var(--fast);
}
.contact-info-card:hover{ border-color: var(--signal); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.contact-info-card .icon-tile{ margin-bottom:0; flex-shrink:0; }
.contact-info-card h4{ margin-bottom:.3rem; font-size:.98rem; }
.contact-info-card p{ font-size:.88rem; margin:0; }
.map-embed{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border); height:280px; margin-top:1.5rem; }
.map-embed iframe{ width:100%; height:100%; border:0; filter: grayscale(.15) contrast(1.05); }

/* =========================================================
   15. PAGE HEADER (inner pages)
========================================================= */
.page-hero{
  background: var(--ink); position:relative; overflow:hidden; isolation:isolate;
  padding: clamp(8rem,12vw,10rem) 0 5rem;
  text-align:center;
}
.page-hero::before{ content:""; position:absolute; inset:0; background: var(--grad-mesh); z-index:-1; }
.page-hero h1{ color:#fff; margin-bottom:1rem; }
.breadcrumb{ display:flex; gap:.5rem; justify-content:center; font-size:.85rem; color: var(--text-on-dark-muted); margin-bottom:1.2rem; font-family: var(--font-mono); }
.breadcrumb a:hover{ color:#fff; }
.page-hero p.lead{ max-width:600px; margin:0 auto; }

/* =========================================================
   16. SINGLE POST / BLOG CONTENT
========================================================= */
.post-content{ max-width:760px; margin:0 auto; }
.post-content h2{ margin: 2.2rem 0 1rem; }
.post-content h3{ margin: 1.8rem 0 .9rem; }
.post-content p{ margin-bottom: 1.3rem; color: var(--text-body); }
.post-content ul, .post-content ol{ margin: 0 0 1.3rem 1.3rem; list-style: disc; color: var(--text-body); }
.post-content ol{ list-style: decimal; }
.post-content li{ margin-bottom:.5rem; }
.post-content a{ color: var(--signal); text-decoration: underline; text-underline-offset:3px; }
.post-content blockquote{ border-left:3px solid var(--signal); padding: .3rem 0 .3rem 1.4rem; font-style:italic; color: var(--text-muted); margin: 1.5rem 0; }
.post-content img{ border-radius: var(--radius-md); margin: 1.5rem 0; }
.post-hero-thumb{ border-radius: var(--radius-lg); height: 380px; margin-bottom: 3rem; overflow:hidden; }
.post-hero-thumb img{ width:100%; height:100%; object-fit:cover; }
.post-tags{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2.5rem; }
.post-tags a{ font-size:.8rem; border:1px solid var(--border); padding:.4rem 1rem; border-radius: var(--radius-pill); color:var(--text-muted); }
.post-tags a:hover{ border-color:var(--signal); color:var(--signal); }
.author-box{ display:flex; gap:1.2rem; align-items:center; margin-top:3rem; padding:1.6rem; background:var(--paper-2); border-radius: var(--radius-md); }
.pagination{ display:flex; justify-content:center; gap:.6rem; margin-top:3rem; }
.pagination a, .pagination span{ width:42px;height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border); font-size:.88rem; font-weight:600; transition: all var(--fast); }
.pagination a:hover{ border-color:var(--signal); color:var(--signal); }
.pagination .current{ background: var(--grad-brand); color:#fff; border-color:transparent; }

.comments-area{ max-width:760px; margin: 3rem auto 0; }
.comment-list{ display:flex; flex-direction:column; gap:1.5rem; margin-bottom:2.5rem; }
.comment-body{ display:flex; gap:1rem; padding:1.4rem; border:1px solid var(--border); border-radius: var(--radius-md); }
.comment-form input, .comment-form textarea{ width:100%; border:1.5px solid var(--border); border-radius: var(--radius-sm); padding:.9rem 1.1rem; margin-bottom:1rem; }
.comment-form textarea{ min-height:120px; }

.not-found{ text-align:center; padding: 8rem 0; }
.not-found .code{ font-family: var(--font-display); font-size:6rem; background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* =========================================================
   17. MISC
========================================================= */
::selection{ background: var(--signal); color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--paper); }
::-webkit-scrollbar-thumb{ background: var(--signal); border-radius:10px; }
.skip-link{ position:absolute; left:-999px; top:auto; background:var(--signal); color:#fff; padding:1rem; z-index:10000; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; top:0; }
.divider-fade{ height:1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.blob{ position:absolute; border-radius:50%; filter: blur(70px); opacity:.35; z-index:-1; pointer-events:none; }

/* =========================================================
   18. RESPONSIVE
========================================================= */
@media (max-width: 1080px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .g-4{ grid-template-columns: repeat(2,1fr); }
  .process-steps{ grid-template-columns: repeat(3,1fr); row-gap:2.5rem; }
  .process-steps::before{ display:none; }
}
@media (max-width: 900px){
  .primary-nav{ position:fixed; inset:0 0 0 30%; background: var(--ink); z-index:1000; padding: 7rem 2rem 2rem; transform: translateX(100%); transition: transform var(--med); }
  .primary-nav.is-open{ transform: translateX(0); }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:1.6rem; }
  .primary-nav a{ font-size:1.15rem; }
  .menu-toggle{ display:flex; }
  .header-cta .btn-primary{ display:none; }
  .g-3{ grid-template-columns: repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media (max-width: 640px){
  .g-2, .g-3, .g-4{ grid-template-columns: 1fr; }
  .stats-strip .grid{ grid-template-columns: repeat(2,1fr); row-gap:1.8rem; }
  .process-steps{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .hero-meta{ gap:1.6rem; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .cta-band .btn-row{ flex-direction:column; }
  .cta-band .btn{ width:100%; }
  .back-to-top{ right:1.1rem; bottom:1.1rem; width:42px;height:42px; }
}