/*
Theme Name: nxgent
Theme URI: https://nxgent.com
Author: Jose Mathew
Author URI: https://www.linkedin.com/in/jose-mathew-9884a034
Description: A light, dashboard-inspired WordPress theme built for nxgent, a software quality engineering & test automation practice. Signature feature: an animated CI/CD "pipeline" hero and hand-built SVG illustrations, built entirely in CSS/SVG (no external images).
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nxgent
*/


  :root{
    --bg:#F6F8F8;
    --panel:#FFFFFF;
    --panel-2:#EEF2F2;
    --text:#10171A;
    --text-dim:#5B6B70;
    --teal:#2F86EB;
    --teal-tint:#E7F1FC;
    --amber:#C97A1A;
    --amber-tint:#FBEEDD;
    --coral:#D14E3F;
    --line:#DFE5E5;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit;}
  svg{display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
  ::selection{background:var(--teal);color:#fff;}

  /* ---------- HEADER ---------- */
  header.site{
    position:sticky;top:0;z-index:50;
    background:rgba(246,248,248,0.9);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;}
  .logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-0.02em;}
  .logo .dot{width:9px;height:9px;border-radius:2px;background:var(--teal);}
  .logo .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text-dim);font-weight:400;letter-spacing:0.08em;margin-left:6px;text-transform:uppercase;border-left:1px solid var(--line);padding-left:10px;}
  nav.links{display:flex;gap:28px;font-size:14px;color:var(--text-dim);}
  nav.links a{text-decoration:none;transition:color .15s;}
  nav.links a:hover{color:var(--text);}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;border-radius:6px;
    font-size:13px;font-weight:600;text-decoration:none;
    font-family:'IBM Plex Mono',monospace;letter-spacing:0.02em;
    border:1px solid transparent;cursor:pointer;
  }
  .btn-primary{background:var(--teal);color:#fff;}
  .btn-primary:hover{background:#1F6FCB;}
  .btn-ghost{border-color:var(--line);color:var(--text);background:var(--panel);}
  .btn-ghost:hover{border-color:var(--teal);color:var(--teal);}

  /* ---------- HERO ---------- */
  .hero{padding:88px 0 64px;position:relative;}
  .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;margin-bottom:64px;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal);
    letter-spacing:0.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:22px;
  }
  .eyebrow::before{content:"";width:16px;height:1px;background:var(--teal);}
  .hero h1{font-size:52px;line-height:1.08;letter-spacing:-0.02em;margin:0 0 24px;font-weight:600;}
  .hero h1 em{font-style:normal;color:var(--teal);}
  .hero p.lead{font-size:17px;line-height:1.65;color:var(--text-dim);max-width:560px;margin:0 0 14px;}
  .hero p.caption{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal);letter-spacing:0.1em;text-transform:uppercase;margin:0 0 32px;}
  .hero-ctas{display:flex;gap:14px;}
  .hero-art{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;}

  /* pipeline signature element */
  .pipeline{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:28px 28px 24px;overflow-x:auto;
  }
  .pipeline-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dim);}
  .pipeline-head .run{color:var(--teal);}
  .stages{display:flex;align-items:center;min-width:640px;}
  .stage{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;flex:1;}
  .stage-node{
    width:34px;height:34px;border-radius:50%;
    border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text-dim);
    background:var(--panel);z-index:2;transition:all .4s ease;
  }
  .stage-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;transition:color .4s ease;}
  .stage-connector{position:absolute;top:17px;left:50%;width:100%;height:2px;background:var(--line);z-index:1;}
  .stage:last-child .stage-connector{display:none;}
  .stage.done .stage-node{border-color:var(--teal);background:var(--teal-tint);color:var(--teal);}
  .stage.done .stage-label{color:var(--text);}
  .stage.done .stage-connector{background:var(--teal);}
  @media (prefers-reduced-motion:reduce){.stage.active .stage-node{animation:none;}}

  /* ---------- METRICS ---------- */
  .metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);}
  .metrics .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
  .metric{padding:32px 0;text-align:left;border-left:1px solid var(--line);padding-left:24px;}
  .metric:first-child{border-left:none;padding-left:0;}
  .metric .num{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;color:var(--teal);}
  .metric .label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-top:4px;}

  /* ---------- SECTION HEADINGS ---------- */
  section{padding:84px 0;}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:24px;flex-wrap:wrap;}
  .sec-head .tag{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:10px;display:block;}
  .sec-head h2{font-size:32px;margin:0;font-weight:600;letter-spacing:-0.01em;max-width:520px;}
  .sec-head p{color:var(--text-dim);max-width:360px;font-size:15px;line-height:1.6;margin:0;}

  /* ---------- SERVICES ---------- */
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .service-card{background:var(--panel);padding:28px;transition:background .2s;}
  .service-card:hover{background:var(--panel-2);}
  .service-icon{width:40px;height:40px;margin-bottom:18px;}
  .service-id{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dim);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
  .service-id .status{width:7px;height:7px;border-radius:50%;background:var(--teal);}
  .service-card h3{font-size:18px;margin:0 0 10px;font-weight:600;}
  .service-card p{font-size:14px;color:var(--text-dim);line-height:1.6;margin:0;}

  /* ---------- INDUSTRIES ---------- */
  .pill-row{display:flex;flex-wrap:wrap;gap:10px;}
  .pill{
    font-family:'IBM Plex Mono',monospace;font-size:13px;
    border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:8px 16px;color:var(--text-dim);
  }

  /* ---------- BUILD LOG (experience) ---------- */
  .log-entry{display:grid;grid-template-columns:160px 1fr;gap:32px;padding:32px 0;border-top:1px solid var(--line);}
  .log-entry:last-child{border-bottom:1px solid var(--line);}
  .log-date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dim);padding-top:3px;}
  .log-date .current{color:var(--teal);}
  .log-role{font-size:20px;font-weight:600;margin:0 0 4px;font-family:'Space Grotesk',sans-serif;}
  .log-org{color:var(--text-dim);font-size:14px;margin:0 0 16px;}
  .log-body{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
  .log-body li{font-size:14px;color:var(--text-dim);line-height:1.6;padding-left:22px;position:relative;}
  .log-body li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-family:'IBM Plex Mono',monospace;font-size:12px;}

  /* ---------- PROJECTS ---------- */
  .proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
  .proj-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--panel);}
  .proj-card .proj-icon{width:34px;height:34px;margin-bottom:14px;}
  .proj-card .client{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--amber);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
  .proj-card h3{margin:0 0 10px;font-size:17px;}
  .proj-card p{margin:0;font-size:14px;color:var(--text-dim);line-height:1.6;}

  /* ---------- TOOLS ---------- */
  .tool-group{margin-bottom:28px;}
  .tool-group h4{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin:0 0 14px;font-weight:500;}
  .tool-group .pill-row .pill{color:var(--text);}

  /* ---------- ABOUT ---------- */
  .about{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start;}
  .about-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--panel);}
  .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--amber));display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#fff;font-size:20px;margin-bottom:16px;}
  .about-card h4{margin:0 0 2px;font-size:16px;}
  .about-card .role{color:var(--text-dim);font-size:13px;margin-bottom:16px;}
  .about-card a.linkedin{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal);text-decoration:none;}
  .about p{font-size:15px;line-height:1.75;color:var(--text-dim);}
  .about p strong{color:var(--text);font-weight:600;}
  .about-art{margin-top:24px;}

  /* ---------- CONTACT ---------- */
  .contact-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;}
  .contact-panel h2{font-size:30px;margin:0 0 14px;font-weight:600;}
  .contact-panel p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0 0 24px;}
  .contact-info{display:grid;gap:14px;}
  .contact-info div{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text-dim);}
  .contact-info div span{color:var(--text);display:block;font-size:14px;margin-top:2px;}
  form{display:grid;gap:14px;}
  form input,form textarea{
    width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;
    padding:12px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:14px;
  }
  form textarea{min-height:90px;resize:vertical;}
  form input::placeholder,form textarea::placeholder{color:var(--text-dim);}
  form input:focus,form textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--line);padding:40px 0;background:var(--panel);}
  .footer-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-dim);flex-wrap:wrap;gap:12px;}
  .footer-row a{text-decoration:none;color:var(--text-dim);}
  .footer-row a:hover{color:var(--teal);}

  @media(max-width:860px){
    .hero-grid{grid-template-columns:1fr;}
    .hero h1{font-size:36px;}
    .metrics .wrap{grid-template-columns:repeat(2,1fr);}
    .metric{border-left:none !important;padding-left:0 !important;border-top:1px solid var(--line);padding-top:20px;}
    .metric:nth-child(1),.metric:nth-child(2){border-top:none;padding-top:0;}
    .services-grid{grid-template-columns:1fr;}
    .proj-grid{grid-template-columns:1fr;}
    .about{grid-template-columns:1fr;}
    .contact-panel{grid-template-columns:1fr;padding:28px;}
    .sec-head{flex-direction:column;align-items:flex-start;}
    nav.links{display:none;}
  }