/* ============================================
   AISymmetric Design System — Reusable Template
   Premium consulting / SaaS website styles

   HOW TO USE:
   1. Update CSS custom properties below for your brand
   2. Copy styles.css + resume.css for the full system
   3. Pair with site-template.html for structure
   4. Include neural-network.js + interactions.js for animations
   ============================================ */


/* ==============================================
   1. DESIGN TOKENS — Change these for your brand
   ============================================== */
:root {
  /* --- Core Colors --- */
  --white: #FFFFFF;
  --graphite: #111111;              /* Dark background / text */
  --blue: #3B82F6;                  /* Primary brand accent */
  --cyan: #22D3EE;                  /* Secondary accent / gradients */

  /* --- Neutral Scale (Gray) --- */
  --gray-50: #F9FAFB;              /* Section backgrounds */
  --gray-100: #F3F4F6;             /* Card borders, dividers */
  --gray-200: #E5E7EB;             /* Input borders, subtle lines */
  --gray-300: #D1D5DB;             /* Hint text, flip hints */
  --gray-400: #9CA3AF;             /* Subtitle text, labels */
  --gray-500: #6B7280;             /* Body text */
  --gray-600: #4B5563;             /* Nav links, secondary text */
  --gray-700: #374151;             /* Stronger body text */
  --gray-800: #1F2937;             /* Dark text */
  --gray-900: #111827;             /* Headings */

  /* --- Typography --- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* --- Spacing Scale --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* --- Border Radius --- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 100px;

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.06);
  --shadow-blue: 0 8px 30px rgba(59, 130, 246, 0.3);

  /* --- Transitions --- */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Layout --- */
  --container-max: 1200px;
  --container-padding: 24px;
}


/* ==============================================
   2. RESET & BASE
   ============================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  background: var(--white);
  color: var(--graphite);
  overflow-x: hidden;
  line-height: var(--line-height-base);
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

img { max-width: 100%; }


/* ==============================================
   3. LAYOUT PRIMITIVES
   ============================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}


/* ==============================================
   4. GRADIENT TEXT — The signature look
   ============================================== */
.gradient-text {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ==============================================
   5. SECTION PATTERN — Reusable across all sections
   ============================================== */
.section {
  position: relative;
  padding: var(--space-5xl) 0;
  z-index: 1;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  margin-bottom: var(--space-md);
}

.section-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-size: 17px;
  color: var(--gray-500);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}


/* ==============================================
   6. CARD SYSTEM — Glass morphism base
   ============================================== */

/* --- Base Card (used by service, platform, case, team, etc.) --- */
/*
   Pattern: white background, subtle border, blur backdrop,
   hover lifts card with blue glow border + shadow
*/

/* Service Cards (3-col grid) */
.service-card {
  position: relative;
  padding: 36px 32px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  transition: all var(--transition-smooth);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.2);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.service-card:hover::before {
  opacity: 1;
}

/* Platform Cards (compact icon + text) */
.platform-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  transition: all var(--transition-smooth);
  backdrop-filter: blur(10px);
}

.platform-card:hover {
  border-color: rgba(59, 130, 246, 0.2);
  box-shadow: var(--shadow-md), 0 0 20px rgba(59, 130, 246, 0.06);
  transform: translateY(-2px);
}

/* Case Study Cards (with metrics) */
.case-card {
  position: relative;
  padding: 36px 32px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-smooth);
  backdrop-filter: blur(10px);
}

.case-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.15);
  box-shadow: var(--shadow-lg);
}

.case-metric-value {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark Tool Cards (explore section) */
.tool-card {
  display: flex;
  flex-direction: column;
  background: var(--graphite);
  border-radius: var(--radius-2xl);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}


/* ==============================================
   7. TEAM FLIP CARDS
   ============================================== */
.team-card {
  perspective: 1000px;
  height: 480px;
  cursor: pointer;
  display: block;
}

.team-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.7s var(--ease-smooth);
  transform-style: preserve-3d;
}

.team-card:hover .team-card-inner {
  transform: rotateY(180deg);
}

.team-card-front,
.team-card-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.team-card-front {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 32px;
  backdrop-filter: blur(10px);
}

.team-card-back {
  background: var(--graphite);
  color: var(--white);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 36px;
}

.team-photo {
  width: 180px; height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 24px;
  border: 3px solid var(--gray-100);
  transition: border-color 0.4s ease;
}

.team-card:hover .team-photo {
  border-color: var(--blue);
}

.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.team-role {
  font-size: 14px;
  color: var(--blue);
  font-weight: 500;
}

.team-back-content .team-role {
  color: var(--cyan);
}

.team-link-hint {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
}

/* Team Grid Variants */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.team-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
}

.team-subsection {
  text-align: center;
  margin: 60px 0 32px;
}

.team-subsection-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}


/* ==============================================
   8. BUTTONS
   ============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
  border: none;
}

.btn-primary {
  background: var(--graphite);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}

.btn-secondary {
  background: transparent;
  color: var(--graphite);
  border: 1px solid var(--gray-200);
}

.btn-secondary:hover {
  border-color: var(--gray-400);
  transform: translateY(-2px);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

/* Hero-specific buttons (for dark backgrounds) */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--blue), #2563eb);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--gray-300);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}


/* ==============================================
   9. NAVIGATION
   ============================================== */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 0;
  transition: all var(--transition-smooth);
}

.nav.scrolled {
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Solid nav variant (for inner pages) */
.nav-solid {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-cta {
  background: var(--graphite) !important;
  color: var(--white) !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-sm);
  font-size: 13px !important;
  font-weight: 600 !important;
}

.nav-cta:hover {
  background: var(--blue) !important;
  transform: translateY(-1px);
}


/* ==============================================
   10. HERO METRICS
   ============================================== */
.hero-metrics {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
}

.metric {
  text-align: center;
  min-width: 120px;
}

.metric-value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: inline;
}

.metric-suffix {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-label {
  display: block;
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 4px;
  font-weight: 500;
}

.metric-divider {
  width: 1px;
  height: 40px;
  margin-top: 8px;
  background: var(--gray-200);
}


/* ==============================================
   11. FORMS
   ============================================== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--graphite);
  background: var(--white);
  transition: all var(--transition-fast);
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}


/* ==============================================
   12. FOOTER
   ============================================== */
.footer {
  position: relative;
  z-index: 1;
  padding: 80px 0 40px;
  border-top: 1px solid var(--gray-100);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  margin-bottom: 60px;
}

.footer-links {
  display: flex;
  gap: 60px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col h5 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graphite);
  margin-bottom: 4px;
}

.footer-col a {
  font-size: 14px;
  color: var(--gray-400);
}

.footer-col a:hover {
  color: var(--graphite);
}


/* ==============================================
   13. ANIMATIONS
   ============================================== */
[data-aos] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-smooth),
              transform 0.6s var(--ease-smooth);
}

[data-aos].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pulse dot animation (hero badge) */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

.badge-dot {
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Flow dot animations (architecture diagram) */
@keyframes flow-dot {
  0% { left: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

@keyframes flow-dot-v {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: calc(100% - 8px); opacity: 0; }
}


/* ==============================================
   14. RESPONSIVE BREAKPOINTS
   ============================================== */
@media (max-width: 1024px) {
  .services-grid,
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .team-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
  }

  .tools-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu { display: flex; }

  .hero { padding: 100px 24px 60px; min-height: auto; }
  .hero-title { font-size: 36px; }

  .hero-metrics {
    flex-direction: column;
    gap: 24px;
  }

  .metric-divider {
    width: 40px;
    height: 1px;
  }

  .services-grid,
  .platforms-grid,
  .cases-grid,
  .why-grid,
  .team-grid,
  .team-grid-3 {
    grid-template-columns: 1fr;
  }

  .section { padding: 80px 0; }
  .form-row { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; gap: 40px; }
  .footer-links { flex-wrap: wrap; gap: 32px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 32px; }
  .metric-value, .metric-suffix { font-size: 28px; }
  .section-title { font-size: 28px; }
}


/* ==============================================
   15. GRID PATTERNS — Common layouts
   ============================================== */

/* 3-column grid (services, platforms, cases, tools) */
.services-grid,
.platforms-grid,
.cases-grid,
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 2-column grid (why section, contact) */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}


/* ==============================================
   QUICK CUSTOMIZATION GUIDE
   ==============================================

   To rebrand this design system:

   1. COLORS: Change --blue and --cyan in :root
      - Blue is the primary accent (buttons, links, tags)
      - Cyan is the secondary (gradients, highlights)
      - Both used together in gradient-text

   2. FONT: Change --font-family in :root
      - Default is Inter (clean, modern, great for tech)
      - Good alternatives: 'DM Sans', 'Outfit', 'Plus Jakarta Sans'

   3. DARK BG: --graphite controls dark sections
      - Hero badge, card backs, tool cards, footer
      - Change to #0A0A0A for deeper black, #1a1a2e for navy

   4. CARD STYLE: Glass morphism is the default
      - background: rgba(255, 255, 255, 0.7)
      - backdrop-filter: blur(10px)
      - border: 1px solid var(--gray-100)
      - Remove backdrop-filter for solid cards

   5. HOVER EFFECTS: Lift + blue glow border
      - transform: translateY(-4px) on hover
      - border-color: rgba(59, 130, 246, 0.2)
      - Adjust 0.2 opacity for subtler/stronger glow

   6. ANIMATIONS: Scroll reveal via [data-aos]
      - interactions.js handles IntersectionObserver
      - Staggered 80ms delay between siblings
      - Counter animation on hero metrics

   7. BACKGROUNDS:
      - neural-network.js: Flowing dot network (canvas)
      - Cursor particles: Follow mouse with blue/cyan dots
      - Both optional — site works without them

   ============================================== */