@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
  /* Colors: #0F0766, #344CB7, #577BC1, #CCFF00 */
  --primary-color: #344CB7; /* Royal Blue */
  --secondary-color: #0F0766; /* Deep Navy */
  --accent-color: #CCFF00; /* Neon Lime */
  --light-color: #F0F4FF; /* Light Blue White */
  --dark-color: #000957; /* Very Dark Blue */
  
  --gradient-primary: linear-gradient(135deg, #0F0766 0%, #344CB7 100%);
  --hover-color: #577BC1;
  --background-color: #FFFFFF;
  --text-color: #333333;
  
  --border-color: rgba(52, 76, 183, 0.3);
  --divider-color: rgba(15, 7, 102, 0.1);
  --shadow-color: rgba(52, 76, 183, 0.2);
  --highlight-color: #CCFF00;
  
  --main-font: 'Roboto Condensed', sans-serif;
  --alt-font: 'Roboto', sans-serif;
}

body { font-family: var(--alt-font); color: var(--text-color); background-color: var(--background-color); }
h1, h2, h3 { font-family: var(--main-font); text-transform: uppercase; letter-spacing: 1px; }

/* Sharp Tech Design */
.tech-card { border: 1px solid var(--border-color); background: white; padding: 2rem; position: relative; overflow: hidden; }
.tech-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--primary-color); }
.tech-card:hover { border-color: var(--primary-color); box-shadow: 0 10px 30px var(--shadow-color); transition: 0.3s; }

.btn-tech { background: var(--accent-color); color: var(--secondary-color); padding: 15px 40px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: 0.2s; display: inline-block; }
.btn-tech:hover { background: var(--primary-color); color: var(--accent-color); transform: scale(1.02); }

/* Grid Layout */
.grid-lines { background-image: linear-gradient(var(--divider-color) 1px, transparent 1px), linear-gradient(90deg, var(--divider-color) 1px, transparent 1px); background-size: 20px 20px; }

/* Nav */
#nav-toggle-tech { display: none; }
@media (max-width: 768px) {
    .tech-menu { display: none; width: 100%; position: absolute; top: 100%; left: 0; background: var(--secondary-color); padding: 20px; text-align: center; }
    #nav-toggle-tech:checked ~ .tech-menu { display: flex; flex-direction: column; }
    .hamburger-tech { display: block; font-size: 24px; color: var(--secondary-color); cursor: pointer; }
}
@media (min-width: 769px) { .hamburger-tech { display: none; } }