/* css/style.css */

/* ==========================================================================
   1. ROOT VARIABLES & TOKENS
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

   :root {
       /* Color System - Industrial, Premium, Calm */
       --color-bg-base: #ffffff;
       --color-bg-surface: #f7f9fa;
       --color-bg-alt: #eceef1;
       
       --color-text-primary: #111827;
       --color-text-secondary: #4b5563;
       --color-text-tertiary: #9ca3af;
       
       --color-brand-primary: #0f172a;    /* Deep Slate/Navy */
       --color-brand-primary-hover: #1e293b;
       --color-brand-accent: #a38a66;     /* Muted Gold / Brass */
       --color-brand-accent-hover: #8c7556;
       --color-whatsapp: #25d366;         /* WhatsApp Green */
       --color-whatsapp-hover: #20ba5a;
       
       --color-border-subtle: #e5e7eb;
       --color-border-strong: #d1d5db;
       
       --color-status-active: #059669;
       
       /* Typography - Fluid System */
       --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
       
       --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
       --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
       --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
       --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
       --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
       --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
       --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
       --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 4rem);
       
       /* Spacing Architecture */
       --space-1: 0.25rem;  /* 4px */
       --space-2: 0.5rem;   /* 8px */
       --space-3: 0.75rem;  /* 12px */
       --space-4: 1rem;     /* 16px */
       --space-6: 1.5rem;   /* 24px */
       --space-8: 2rem;     /* 32px */
       --space-12: 3rem;    /* 48px */
       --space-16: 4rem;    /* 64px */
       --space-24: 6rem;    /* 96px */
       --space-32: 8rem;    /* 128px */
       
       /* Layout */
       --container-width: 1280px;
       --radius-sm: 2px;
       --radius-md: 4px;
       
       /* Transitions */
       --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
       --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   /* ==========================================================================
      2. RESET & BASE
      ========================================================================== */
   *, *::before, *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   html {
       scroll-behavior: smooth;
       -webkit-text-size-adjust: 100%;
   }
   
   body {
       font-family: var(--font-sans);
       font-size: var(--text-base);
       line-height: 1.6;
       color: var(--color-text-primary);
       background-color: var(--color-bg-base);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       overflow-x: hidden;
   }
   
   h1, h2, h3, h4, h5, h6 {
       font-weight: 500;
       line-height: 1.2;
       color: var(--color-brand-primary);
       letter-spacing: -0.02em;
   }
   
   p {
       color: var(--color-text-secondary);
   }
   
   a {
       color: var(--color-brand-primary);
       text-decoration: none;
       transition: color var(--transition-fast);
   }
   
   a:hover {
       color: var(--color-brand-accent);
   }
   
   ul, ol {
       list-style: none;
   }
   
   img, picture, svg, video {
       display: block;
       max-width: 100%;
       height: auto;
   }
   
   :focus-visible {
       outline: 2px solid var(--color-brand-accent);
       outline-offset: 2px;
   }
   
   ::selection {
       background-color: var(--color-brand-primary);
       color: var(--color-bg-base);
   }
   
   /* ==========================================================================
      3. UTILITIES
      ========================================================================== */
   .container {
       width: 100%;
       max-width: var(--container-width);
       margin: 0 auto;
       padding: 0 var(--space-6);
   }
   
   .container-sm {
       width: 100%;
       max-width: 800px;
       margin: 0 auto;
       padding: 0 var(--space-6);
   }
   
   .section {
       padding: var(--space-24) 0;
   }
   
   .section-sm {
       padding: var(--space-12) 0;
   }
   
   .bg-surface { background-color: var(--color-bg-surface); }
   .bg-primary { background-color: var(--color-brand-primary); color: var(--color-bg-base); }
   .bg-primary p { color: var(--color-bg-surface); }
   
   .text-center { text-align: center; }
   .text-muted { color: var(--color-text-tertiary); }
   
   .eyebrow {
       display: block;
       font-family: var(--font-mono);
       font-size: var(--text-xs);
       text-transform: uppercase;
       letter-spacing: 0.1em;
       color: var(--color-brand-accent);
       margin-bottom: var(--space-4);
   }
   
   .data-value {
       font-family: var(--font-mono);
       font-weight: 500;
   }
   
   .mt-4 { margin-top: var(--space-4); }
   .mt-8 { margin-top: var(--space-8); }
   .mt-12 { margin-top: var(--space-12); }
   .mt-16 { margin-top: var(--space-16); }
   
   .mb-4 { margin-bottom: var(--space-4); }
   .mb-8 { margin-bottom: var(--space-8); }
   .mb-12 { margin-bottom: var(--space-12); }
   
   /* Grid Systems */
   .grid { display: grid; }
   .grid-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: var(--space-12); }
   .grid-cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-8); }
   .grid-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-6); }
   
   /* ==========================================================================
      4. COMPONENTS
      ========================================================================== */
   
   /* Buttons */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 0.75rem 1.5rem;
       font-size: var(--text-sm);
       font-weight: 500;
       border-radius: var(--radius-sm);
       cursor: pointer;
       transition: all var(--transition-base);
       border: 1px solid transparent;
       text-decoration: none;
       font-family: var(--font-sans);
       gap: var(--space-2);
   }
   
   .btn-primary {
       background-color: var(--color-brand-primary);
       color: var(--color-bg-base);
   }
   
   .btn-primary:hover {
       background-color: var(--color-brand-primary-hover);
       color: var(--color-bg-base);
   }
   
   .btn-secondary {
       background-color: transparent;
       color: var(--color-brand-primary);
       border-color: var(--color-border-strong);
   }
   
   .btn-secondary:hover {
       border-color: var(--color-brand-primary);
       background-color: var(--color-bg-surface);
   }

   .btn-whatsapp {
       background-color: var(--color-whatsapp);
       color: var(--color-bg-base);
       border-color: var(--color-whatsapp);
   }

   .btn-whatsapp:hover {
       background-color: var(--color-whatsapp-hover);
       color: var(--color-bg-base);
       border-color: var(--color-whatsapp-hover);
   }
   
   /* Header & Navigation */
   .site-header {
       position: sticky;
       top: 0;
       z-index: 100;
       background-color: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
       border-bottom: 1px solid var(--color-border-subtle);
   }
   
   .header-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 5rem;
   }
   
   .logo a {
       font-size: var(--text-xl);
       font-weight: 600;
       color: var(--color-brand-primary);
       letter-spacing: -0.02em;
       display: flex;
       align-items: center;
       gap: var(--space-2);
   }
   
   .logo span {
       display: block;
       font-size: 0.65rem;
       font-family: var(--font-mono);
       color: var(--color-text-secondary);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-top: 0.125rem;
   }
   
   .main-nav {
       display: flex;
       align-items: center;
   }
   
   .nav-list {
       display: flex;
       gap: var(--space-8);
       align-items: center;
   }
   
   .nav-list a {
       font-size: var(--text-sm);
       font-weight: 500;
       color: var(--color-text-secondary);
   }
   
   .nav-list a:hover {
       color: var(--color-brand-primary);
   }
   
   .nav-list .btn {
       color: var(--color-bg-base);
   }
   
   .mobile-menu-btn {
       display: none;
       background: transparent;
       border: none;
       padding: var(--space-2);
       cursor: pointer;
       z-index: 101;
   }
   
   .mobile-menu-btn svg {
       width: 24px;
       height: 24px;
       fill: none;
       stroke: var(--color-brand-primary);
       stroke-width: 2;
       stroke-linecap: round;
   }
   
   /* Forms */
   .form-group {
       margin-bottom: var(--space-6);
   }
   
   .form-label {
       display: block;
       font-size: var(--text-sm);
       font-weight: 500;
       color: var(--color-brand-primary);
       margin-bottom: var(--space-2);
   }
   
   .form-control {
       width: 100%;
       padding: 0.875rem 1rem;
       font-family: var(--font-sans);
       font-size: var(--text-base);
       color: var(--color-brand-primary);
       background-color: var(--color-bg-base);
       border: 1px solid var(--color-border-strong);
       border-radius: var(--radius-sm);
       transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .form-control:focus {
       outline: none;
       border-color: var(--color-brand-accent);
       box-shadow: 0 0 0 3px rgba(163, 138, 102, 0.1);
   }
   
   textarea.form-control {
       resize: vertical;
       min-height: 120px;
   }

   /* Selection Options Group (Radios & Checks Styled Elegantly) */
   .choice-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
       gap: var(--space-3);
   }

   .choice-card {
       position: relative;
       border: 1px solid var(--color-border-strong);
       padding: var(--space-4);
       border-radius: var(--radius-sm);
       cursor: pointer;
       display: flex;
       align-items: center;
       gap: var(--space-3);
       transition: background-color var(--transition-fast), border-color var(--transition-fast);
   }

   .choice-card:hover {
       background-color: var(--color-bg-surface);
   }

   .choice-card input[type="radio"],
   .choice-card input[type="checkbox"] {
       accent-color: var(--color-brand-accent);
       width: 1rem;
       height: 1rem;
       cursor: pointer;
   }

   .choice-card span {
       font-size: var(--text-sm);
       font-weight: 500;
       color: var(--color-text-primary);
   }
   
   /* Footer */
   .site-footer {
       padding: var(--space-16) 0 var(--space-8);
       border-top: 1px solid rgba(255,255,255,0.1);
   }
   
   .footer-grid {
       display: grid;
       grid-template-columns: 2fr 1fr 1fr;
       gap: var(--space-12);
       margin-bottom: var(--space-16);
   }
   
   .footer-brand h2 {
       color: var(--color-bg-base);
       font-size: var(--text-xl);
       margin-bottom: var(--space-2);
   }
   
   .footer-brand p {
       color: var(--color-text-tertiary);
       font-size: var(--text-sm);
   }
   
   .footer-nav h3 {
       color: var(--color-bg-base);
       font-size: var(--text-sm);
       font-family: var(--font-mono);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: var(--space-6);
   }
   
   .footer-nav ul {
       display: flex;
       flex-direction: column;
       gap: var(--space-3);
   }
   
   .footer-nav a {
       color: var(--color-text-tertiary);
       font-size: var(--text-sm);
   }
   
   .footer-nav a:hover {
       color: var(--color-bg-base);
   }
   
   .footer-bottom {
       border-top: 1px solid rgba(255,255,255,0.1);
       padding-top: var(--space-8);
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: var(--text-xs);
       color: var(--color-text-tertiary);
   }
   
   /* ==========================================================================
      5. PAGE SPECIFIC (Home)
      ========================================================================== */
   
   /* Hero */
   .hero {
       padding: clamp(4rem, 10vw, 8rem) 0;
       border-bottom: 1px solid var(--color-border-subtle);
       background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-surface) 100%);
   }
   
   .hero h1 {
       max-width: 900px;
       margin-bottom: var(--space-6);
   }
   
   .hero-lead {
       font-size: var(--text-xl);
       color: var(--color-text-secondary);
       max-width: 700px;
       margin-bottom: var(--space-8);
   }
   
   .hero-actions {
       display: flex;
       gap: var(--space-4);
       flex-wrap: wrap;
   }
   
   /* Corporate Profile (Stats) */
   .data-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
       gap: var(--space-8);
       border-top: 1px solid var(--color-border-strong);
       padding-top: var(--space-8);
   }
   
   .data-item {
       display: flex;
       flex-direction: column;
   }
   
   .data-item .value {
       font-size: var(--text-3xl);
       color: var(--color-brand-primary);
       font-weight: 400;
       letter-spacing: -0.02em;
   }
   
   .data-item .label {
       font-size: var(--text-xs);
       font-family: var(--font-mono);
       color: var(--color-text-secondary);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-top: var(--space-2);
   }

   /* Leadership Quotes & Bios */
   .statement-block {
       border-left: 2px solid var(--color-brand-accent);
       padding-left: var(--space-6);
       margin-bottom: var(--space-12);
   }

   .statement-block blockquote {
       font-size: var(--text-xl);
       color: var(--color-brand-primary);
       line-height: 1.4;
       margin-bottom: var(--space-4);
   }

   .statement-block cite {
       font-family: var(--font-mono);
       font-size: var(--text-sm);
       color: var(--color-text-secondary);
       font-style: normal;
       display: flex;
       align-items: center;
       gap: var(--space-2);
   }

   .statement-block cite::before {
       content: "";
       display: block;
       width: 20px;
       height: 1px;
       background-color: var(--color-brand-accent);
   }
   
   .leadership-profile h3 {
       font-size: var(--text-lg);
       margin-bottom: var(--space-1);
   }

   .leadership-profile .role {
       display: block;
       font-family: var(--font-mono);
       font-size: var(--text-xs);
       color: var(--color-brand-accent);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: var(--space-4);
   }
   
   /* Service Architecture */
   .service-card {
       background: var(--color-bg-base);
       border: 1px solid var(--color-border-subtle);
       padding: var(--space-8);
       height: 100%;
       transition: border-color var(--transition-base);
   }
   
   .service-card:hover {
       border-color: var(--color-border-strong);
   }
   
   .service-card h3 {
       font-size: var(--text-lg);
       margin-bottom: var(--space-4);
   }
   
   .service-card p {
       font-size: var(--text-sm);
       margin: 0;
   }
   
   .integration-notice {
       display: flex;
       align-items: flex-start;
       gap: var(--space-4);
       background: var(--color-bg-base);
       border-left: 2px solid var(--color-brand-accent);
       padding: var(--space-6);
       margin-top: var(--space-12);
   }
   
   /* Projects Matrix */
   .project-category-title {
       font-family: var(--font-mono);
       font-size: var(--text-sm);
       color: var(--color-text-secondary);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: var(--space-6);
       padding-bottom: var(--space-4);
       border-bottom: 1px solid var(--color-border-subtle);
   }
   
   .project-card {
       border: 1px solid var(--color-border-subtle);
       background: var(--color-bg-base);
       display: flex;
       flex-direction: column;
   }
   
   .project-card-header {
       padding: var(--space-6);
       border-bottom: 1px solid var(--color-border-subtle);
       background: var(--color-bg-surface);
   }
   
   .project-status {
       display: inline-flex;
       align-items: center;
       gap: var(--space-2);
       font-family: var(--font-mono);
       font-size: var(--text-xs);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: var(--space-4);
   }
   
   .status-indicator {
       width: 6px;
       height: 6px;
       border-radius: 50%;
   }
   
   .status-active { background-color: var(--color-status-active); }
   .status-commissioned { background-color: var(--color-brand-primary); }
   
   .project-card-header h3 {
       font-size: var(--text-lg);
       margin-bottom: var(--space-1);
   }
   
   .project-location {
       font-size: var(--text-sm);
       color: var(--color-text-secondary);
   }
   
   .project-card-body {
       padding: var(--space-6);
       flex-grow: 1;
   }
   
   .scope-list {
       display: flex;
       flex-direction: column;
       gap: var(--space-3);
   }
   
   .scope-item {
       font-size: var(--text-sm);
       display: flex;
       align-items: flex-start;
       gap: var(--space-3);
   }
   
   .scope-item::before {
       content: "—";
       color: var(--color-brand-accent);
   }

   /* Client Testimonial */
   .client-testimonial {
       background-color: var(--color-bg-surface);
       border: 1px solid var(--color-border-subtle);
       padding: var(--space-8);
       border-radius: var(--radius-sm);
       text-align: center;
   }

   .client-testimonial blockquote {
       font-size: var(--text-xl);
       color: var(--color-brand-primary);
       margin-bottom: var(--space-6);
       max-width: 800px;
       margin-left: auto;
       margin-right: auto;
   }

   .client-testimonial cite {
       display: flex;
       flex-direction: column;
       font-style: normal;
   }

   .client-testimonial .client-name {
       font-weight: 500;
       color: var(--color-brand-primary);
   }

   .client-testimonial .client-title {
       font-family: var(--font-mono);
       font-size: var(--text-xs);
       color: var(--color-text-secondary);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-top: var(--space-1);
   }

   /* Success Screen Layout */
   .success-card {
       border: 1px solid var(--color-border-subtle);
       background: var(--color-bg-base);
       border-top: 4px solid var(--color-brand-accent);
       padding: var(--space-12);
   }

   .success-ref {
       font-family: var(--font-mono);
       font-size: var(--text-lg);
       font-weight: 500;
       background-color: var(--color-bg-surface);
       padding: var(--space-3) var(--space-4);
       border: 1px solid var(--color-border-strong);
       display: inline-block;
       letter-spacing: 0.05em;
   }
   
   /* ==========================================================================
      6. SUBPAGES
      ========================================================================== */
   .page-header {
       padding: var(--space-16) 0 var(--space-8);
       background-color: var(--color-bg-surface);
       border-bottom: 1px solid var(--color-border-subtle);
   }
   
   .page-header h1 {
       margin-bottom: var(--space-4);
   }
   
   .document-list {
       display: flex;
       flex-direction: column;
       border-top: 1px solid var(--color-border-strong);
   }
   
   .document-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: var(--space-6) 0;
       border-bottom: 1px solid var(--color-border-subtle);
   }
   
   .document-meta h3 {
       font-size: var(--text-base);
       margin-bottom: var(--space-1);
   }
   
   .document-meta p {
       font-family: var(--font-mono);
       font-size: var(--text-xs);
   }
   
   /* Verification Box */
   .verification-result {
       padding: var(--space-6);
       border: 1px solid var(--color-border-subtle);
       background-color: var(--color-bg-surface);
       border-radius: var(--radius-sm);
   }
   
   .verification-result.error {
       border-left: 3px solid #dc2626;
   }
   
   /* ==========================================================================
      7. RESPONSIVE DESIGN
      ========================================================================== */
   @media (max-width: 992px) {
       .footer-grid {
           grid-template-columns: 1fr 1fr;
       }
       .footer-brand {
           grid-column: 1 / -1;
       }
   }
   
   @media (max-width: 768px) {
       .header-container {
           height: 4rem;
       }
       
       .mobile-menu-btn {
           display: block;
       }
       
       .main-nav {
           position: fixed;
           top: 4rem;
           left: 0;
           right: 0;
           background-color: var(--color-bg-base);
           padding: var(--space-6);
           border-bottom: 1px solid var(--color-border-subtle);
           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
           transform: translateY(-100%);
           opacity: 0;
           visibility: hidden;
           transition: all var(--transition-base);
       }
       
       .main-nav.is-open {
           transform: translateY(0);
           opacity: 1;
           visibility: visible;
       }
       
       .nav-list {
           flex-direction: column;
           align-items: flex-start;
           gap: var(--space-6);
       }
       
       .nav-list .btn {
           width: 100%;
       }
       
       .hero-actions {
           flex-direction: column;
       }
       
       .hero-actions .btn {
           width: 100%;
       }
       
       .document-item {
           flex-direction: column;
           align-items: flex-start;
           gap: var(--space-4);
       }
   }