:root {
      --brand-bg: #BDC6C7;
      --brand-surface: #C7CFD1;
      --brand-primary: #1E1E1E;
      --brand-accent: #4C5C68;
      --brand-muted: #7C8A92;
      --brand-highlight: #D3DBDD;

      --radius-lg: 1rem;
      --radius-xl: 1.25rem;
      --shadow-soft: 0 8px 20px rgba(0,0,0,0.06);
      --transition-fast: 0.2s ease;
      --transition-medium: 0.4s ease;
    }

    * { box-sizing:border-box; margin:0; padding:0; }
    html, body { height:100%; }
    html { scroll-behavior:smooth; }

    body {
      font-family:'Inter',system-ui,-apple-system,sans-serif;
      background:var(--brand-bg);
      color:var(--brand-primary);
      -webkit-font-smoothing:antialiased;
      line-height: 1.5;
    }

    img { max-width:100%; display:block; }
    a { color:inherit; text-decoration:none; }
    button { font-family:inherit; cursor:pointer; border:none; background:none; }

    .container {
      max-width:1120px;
      margin:0 auto;
      padding:0 16px;
    }

    .page-shell { min-height:100vh; display:flex; flex-direction:column; }
    main { flex:1; }

    /* HEADER / NAV */
    .site-header {
      position:sticky;
      top:0;
      z-index:40;
      background:rgba(199,207,209,0.96);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--brand-highlight);
    }
    .nav-inner {
      height:56px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .nav-brand {
      font-family:'Poppins',sans-serif;
      font-weight:700;
      font-size:1.1rem;
      letter-spacing:0.02em;
      padding:4px 6px;
      border-radius:6px;
      transition:opacity var(--transition-fast);
    }
    .nav-brand:hover { opacity:0.85; }

    .nav-links-desktop {
      display:none; /* Hidden by default (mobile first) */
      align-items:center;
      gap:24px;
      font-size:0.9rem;
      flex:1;
      justify-content:center;
    }
    .nav-link {
      position:relative;
      padding:6px 4px;
      font-family:'Poppins',sans-serif;
      font-weight:600;
      transition:color var(--transition-fast);
    }
    .nav-link::after {
      content:"";
      position:absolute;
      left:0;
      bottom:-3px;
      width:100%;
      height:2px;
      border-radius:999px;
      background:var(--brand-primary);
      transform-origin:left;
      transform:scaleX(0);
      transition:transform var(--transition-fast);
    }
    .nav-link:hover::after,
    .nav-link:focus-visible::after { transform:scaleX(1); }

    .nav-right {
      display:flex;
      align-items:center;
      gap:8px;
    }

    .lang-select {
      background:rgba(199,207,209,0.95);
      border:1px solid var(--brand-highlight);
      border-radius:999px;
      padding:4px 10px;
      font-size:0.82rem;
      outline:none;
      min-width:60px;
      font-weight:500;
      cursor: pointer;
    }

    .nav-mobile-toggle {
      display:inline-flex;
      width:40px;
      height:40px;
      border-radius:14px;
      border:1px solid var(--brand-highlight);
      background:var(--brand-surface);
      align-items:center;
      justify-content:center;
      transition:transform var(--transition-fast), background var(--transition-fast);
    }
    .nav-mobile-toggle:active { transform:scale(0.96); }
    .nav-mobile-toggle:hover { background:#d3dadc; }

    .nav-burger {
      width:19px;
      height:2px;
      background:var(--brand-primary);
      position:relative;
      transition:background var(--transition-fast);
    }
    .nav-burger::before,
    .nav-burger::after {
      content:"";
      position:absolute;
      left:0;
      width:19px;
      height:2px;
      background:var(--brand-primary);
      transition:transform var(--transition-fast), opacity var(--transition-fast);
    }
    .nav-burger::before { top:-6px; }
    .nav-burger::after { top:6px; }

    .nav-mobile-toggle.is-open .nav-burger { background:transparent; }
    .nav-mobile-toggle.is-open .nav-burger::before {
      transform:translateY(6px) rotate(45deg);
    }
    .nav-mobile-toggle.is-open .nav-burger::after {
      transform:translateY(-6px) rotate(-45deg);
    }

    /* Animated Mobile Menu */
    .nav-links-mobile {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      background:rgba(199,207,209,0.98);
      border-bottom:1px solid var(--brand-highlight);
      transition: max-height 0.5s ease-in-out, opacity 0.4s ease;
      /* FIX: Added overflow-y to allow scrolling if menu is tall on landscape phones */
      display: flex;
      flex-direction: column;
    }
    .nav-links-mobile.is-open {
      max-height: 100vh; 
      opacity: 1;
      overflow-y: auto; 
    }

    .nav-links-mobile-inner {
      padding:12px 0 20px;
      display:flex;
      flex-direction:column;
    }
    .nav-link-mobile {
      text-align:left;
      padding:10px 0;
      font-family:'Poppins',sans-serif;
      font-weight:600;
      font-size:0.95rem;
      border-bottom: 1px solid rgba(0,0,0,0.03);
    }
    .nav-link-mobile:last-child { border-bottom: none; }

    /* SECTIONS */
    .section {
      padding:40px 0;
      border-bottom:1px solid var(--brand-highlight);
    }
    .section--no-border { border-bottom:none; }

    .section-title {
      font-family:'Poppins',sans-serif;
      font-weight:600;
      font-size:1.4rem;
      margin-bottom:12px;
    }
    .section-subtitle {
      color:var(--brand-muted);
      font-size:0.9rem;
      margin-bottom:20px;
      max-width:640px;
    }

    /* HERO */
    .hero {
      padding-top:32px;
      padding-bottom:32px;
      animation:heroIntro 0.7s ease-out both;
    }
    .hero-title {
      font-family:'Poppins',sans-serif;
      font-weight:600;
      font-size:1.8rem;
      line-height:1.2;
      max-width:640px;
    }
    .hero-text {
      margin-top:8px;
      color:var(--brand-muted);
      font-size:0.95rem;
      max-width:640px;
    }
    .hero-actions {
      margin-top:24px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }
    .hero-title,
    .hero-text,
    .hero-actions {
      opacity:0;
      transform:translateY(16px);
      animation:heroFade 0.8s ease-out forwards;
    }
    .hero-text { animation-delay:0.08s; }
    .hero-actions { animation-delay:0.16s; }

    /* BUTTONS */
    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 20px;
      border-radius:10px;
      font-family:'Poppins',sans-serif;
      font-weight:600;
      font-size:0.9rem;
      border:1px solid transparent;
      transition:all var(--transition-fast);
      cursor: pointer;
    }
    .btn:active { transform:scale(0.96); }

    .btn-primary {
      background:var(--brand-primary);
      color:#ffffff;
      border-color:rgba(76,92,104,0.4);
    }
    .btn-primary:hover {
      background:var(--brand-accent);
      box-shadow:var(--shadow-soft);
    }

    .btn-secondary {
      background:var(--brand-surface);
      color:var(--brand-primary);
      border-color:var(--brand-highlight);
    }
    .btn-secondary:hover {
      background:#d4dbdd;
      box-shadow:var(--shadow-soft);
    }

    /* CARDS */
    .card {
      background:var(--brand-surface);
      border-radius:var(--radius-xl);
      border:1px solid var(--brand-highlight);
      overflow:hidden;
      box-shadow:0 0 0 rgba(0,0,0,0);
      transition:transform var(--transition-fast), box-shadow var(--transition-fast), opacity 0.3s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .card-hover { cursor:pointer; }
    .card-hover:hover {
      transform:translateY(-3px) scale(1.01);
      box-shadow:var(--shadow-soft);
    }
    .card-image {
      width:100%;
      height:auto;
      aspect-ratio:16/9;
      object-fit:cover;
      background: #ccc; /* Placeholder bg if image fails */
    }
    .card-body { padding:20px; flex: 1; display: flex; flex-direction: column; }
    .card-subtitle {
      font-size:0.82rem;
      color:var(--brand-muted);
    }
    .card-title {
      margin-top:4px;
      font-family:'Poppins',sans-serif;
      font-weight:600;
      font-size:1.05rem;
    }
    .card-text {
      margin-top:6px;
      font-size:0.85rem;
      color:rgba(30,30,30,0.85);
      flex: 1;
    }

    /* GRID */
    .grid { display:grid; gap:16px; }
    .grid-3 { grid-template-columns: 1fr; }
    
    @media (min-width:640px){
      .grid-3 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width:1024px){
      .grid-3 { grid-template-columns: repeat(3, 1fr); }
    }

    /* PORTFOLIO FILTER */
    .chip-row {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:20px;
    }
    .chip {
      padding:8px 16px;
      border-radius:999px;
      border:1px solid var(--brand-highlight);
      background:var(--brand-surface);
      font-family:'Poppins',sans-serif;
      font-size:0.85rem;
      font-weight:600;
      color:var(--brand-primary);
      transition:all var(--transition-fast);
      cursor: pointer;
    }
    .chip:hover {
      transform:translateY(-1px);
      box-shadow:var(--shadow-soft);
    }
    .chip--active {
      background:var(--brand-primary);
      color:#ffffff;
      border-color:var(--brand-primary);
    }

    /* EXPERTISE */
    .expertise-layout { display:grid; gap:24px; }
    @media (min-width:768px){
      .expertise-layout { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    .expertise-block {
      background:var(--brand-surface);
      border-radius:var(--radius-xl);
      border:1px solid var(--brand-highlight);
      padding:24px;
      position:relative;
      overflow:hidden;
    }
    .expertise-badge {
      position:absolute;
      right:14px;
      top:14px;
      padding:6px 10px;
      font-size:0.7rem;
      border-radius:999px;
      background:rgba(76,92,104,0.08);
      color:var(--brand-accent);
      font-weight:600;
    }
    .expertise-tag-row {
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:8px;
    }
    .expertise-pill {
      display:inline-flex;
      align-items:center;
      padding:4px 10px;
      border-radius:999px;
      background:#d4dcde;
      font-size:0.75rem;
      font-weight:500;
      color:var(--brand-accent);
    }
    .expertise-list {
      margin-top:16px;
      font-size:0.85rem;
      color:rgba(30,30,30,0.85);
      list-style:none;
    }
    .expertise-list li {
      position:relative;
      padding-left:18px;
      margin-bottom:8px;
    }
    .expertise-list li::before {
      content:"•";
      position:absolute;
      left:4px;
      top:0;
      color:var(--brand-accent);
      font-weight:700;
    }

    /* TRAINING */
    .training-layout { display:grid; gap:24px; }
    @media (min-width:768px){
      .training-layout { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    .training-list {
      margin-top:10px;
      margin-left:18px;
      font-size:0.85rem;
      color:rgba(30,30,30,0.85);
    }

    .training-highlights {
      margin-top:16px;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
      font-size:0.78rem;
    }
    .training-highlight {
      padding:8px 10px;
      border-radius:10px;
      background:#d4dcde;
      transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    }
    .training-highlight:hover {
      transform:translateY(-1px);
      box-shadow:var(--shadow-soft);
      background:#e0e6e8;
    }
    .training-highlight-label {
      font-weight:600;
      font-size:0.8rem;
    }
    .training-highlight-meta {
      font-size:0.75rem;
      color:var(--brand-muted);
      margin-top:2px;
    }

    /* BLOG / NEWS */
    .meta-date {
      font-size:0.82rem;
      color:var(--brand-muted);
      margin-bottom:4px;
    }

    /* CONTACT */
    .contact-card {
      background:var(--brand-surface);
      border-radius:var(--radius-xl);
      border:1px solid var(--brand-highlight);
      padding:24px;
      text-align:center;
    }
    .contact-row {
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      font-size:1rem;
      color:var(--brand-primary);
    }
    .contact-row-icon {
      width:32px;
      height:32px;
      border-radius:999px;
      background:rgba(211,219,221,0.9);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-right:6px;
    }

    /* CONTACT + FOOTER SOCIAL ICONS */
    .contact-socials,
    .footer-socials {
      display:flex;
      justify-content:center;
      gap:16px;
      margin-top:24px;
    }
    .footer-socials { margin-top:0; }

    .social-icon {
      width:36px;
      height:36px;
      border-radius:999px;
      background:rgba(211,219,221,0.9);
      border:1px solid var(--brand-highlight);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--brand-primary);
      transition: all 0.2s ease;
    }
    .social-icon svg { width:18px; height:18px; display:block; }

    .social-icon:hover { transform:translateY(-2px); box-shadow:var(--shadow-soft); }
    .social-icon--linkedin:hover { background:#0a66c2; color:#ffffff; }
    .social-icon--instagram:hover { background:radial-gradient(circle at 30% 30%, #feda77, #f58529, #dd2a7b, #8134af, #515bd4); color:#ffffff; }
    .social-icon--whatsapp:hover { background:#25d366; color:#ffffff; }

    /* WHATSAPP FLOAT BUTTON */
    .whatsapp-help-btn {
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:50;
      background:#25D366;
      color:#ffffff;
      border-radius:999px;
      padding:10px 18px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-family:'Poppins',sans-serif;
      font-weight:600;
      font-size:0.88rem;
      box-shadow:0 12px 25px rgba(0,0,0,0.18);
      border:none;
      transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
      cursor: pointer;
    }
    .whatsapp-help-btn span:first-child{
      width:22px;
      height:22px;
      border-radius:999px;
      background:rgba(0,0,0,0.08);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:0.9rem;
    }
    .whatsapp-help-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 30px rgba(0,0,0,0.24);
      background:#1ebe5b;
    }

    /* MODAL */
    .modal {
      position:fixed;
      inset:0;
      display:none;
      z-index:60;
      overflow-y: auto;
      padding: 16px;
      align-items: flex-start; 
    }
    .modal--open { display:flex; }
    
    .modal-backdrop {
      position:fixed; 
      inset:0;
      background:rgba(0,0,0,0.35);
      backdrop-filter: blur(2px);
      z-index: 0;
    }
    .modal-dialog {
      position:relative;
      z-index:1;
      width:100%;
      max-width:440px;
      background:var(--brand-surface);
      border-radius:var(--radius-xl);
      border:1px solid var(--brand-highlight);
      box-shadow:0 18px 45px rgba(0,0,0,0.18);
      padding:24px;
      /* Auto margin allows vertical centering in flex if height permits, else scrolls */
      margin: auto; 
      animation:modalIn 0.25s ease-out forwards;
    }
    .modal-header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:16px;
    }
    .modal-title {
      font-family:'Poppins',sans-serif;
      font-weight:600;
      font-size:1.1rem;
    }
    .modal-close {
      width:32px;
      height:32px;
      border-radius:999px;
      border:1px solid var(--brand-highlight);
      background:var(--brand-surface);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:1.2rem;
      transition:background var(--transition-fast), transform var(--transition-fast);
      cursor: pointer;
    }
    .modal-close:hover {
      background:#d4dbdd;
      transform:scale(1.05);
    }

    .form-group { margin-bottom:14px; text-align:left; }
    .form-label {
      display:block;
      font-size:0.85rem;
      font-weight:500;
      margin-bottom:6px;
    }
    .form-input,
    .form-textarea {
      width:100%;
      border-radius:10px;
      border:1px solid var(--brand-highlight);
      padding:10px;
      font-size:0.9rem;
      font-family:inherit;
      outline:none;
      background:#dde4e6;
      transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    }
    .form-input:focus,
    .form-textarea:focus {
      border-color:var(--brand-accent);
      box-shadow:0 0 0 2px rgba(76,92,104,0.25);
      background:var(--brand-surface);
    }
    .form-textarea { min-height:100px; resize:vertical; }

    .form-hint {
      font-size:0.75rem;
      color:var(--brand-muted);
      margin-top:4px;
    }
    .form-error {
      font-size:0.8rem;
      color:#b91c1c;
      margin-top:4px;
      display:none;
    }
    .form-error.is-visible { display:block; }

    .modal-footer {
      margin-top:20px;
      display:flex;
      justify-content:flex-end;
      gap:8px;
    }

    /* BACK TO TOP */
    .back-to-top {
      position:fixed;
      right:18px;
      bottom:80px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid var(--brand-highlight);
      background:var(--brand-surface);
      font-size:0.8rem;
      color:var(--brand-primary);
      box-shadow:var(--shadow-soft);
      opacity:0;
      pointer-events:none;
      transition:opacity var(--transition-fast), transform var(--transition-fast);
      z-index:40;
    }
    .back-to-top.is-visible {
      opacity:1;
      pointer-events:auto;
      transform:translateY(0);
    }

    /* FOOTER */
    .site-footer {
      border-top:1px solid var(--brand-highlight);
      background:rgba(199,207,209,0.98);
      padding:24px 0;
      font-size:0.85rem;
      color:rgba(30,30,30,0.8);
      margin-top: 40px;
    }
    .footer-inner {
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:16px;
      align-items:center;
    }
    .footer-left {
      font-family:'Poppins',sans-serif;
      font-weight:500;
    }

    /* ANIMATIONS */
    /* Only apply hidden state when JS loads to prevent blank page on JS fail */
    .js-reveal {
      opacity:0;
      transform:translateY(16px);
      transition:opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .js-reveal.is-visible {
      opacity:1;
      transform:translateY(0);
    }

    @keyframes modalIn {
      from { opacity:0; transform:translateY(16px) scale(0.98); }
      to   { opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes heroIntro {
      from { opacity:0; transform:translateY(18px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes heroFade {
      from { opacity:0; transform:translateY(16px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* RESPONSIVE */
    @media (max-width:767px){
      .hero-title { font-size:1.5rem; }
      .nav-links-desktop { display:none; } 
    }
    @media (min-width:768px){
      .back-to-top { bottom:88px; }
      .nav-links-desktop { display:flex; }
      .nav-mobile-toggle { display:none; }
      .nav-links-mobile { display:none; }
      .hero-title { font-size:2rem; }
    }