:root {
  --color-bg: 248 250 252; /* slate-50 */
  --color-bg-card: 255 255 255; /* white */
  --color-text: 30 41 59; /* slate-800 */
  --color-text-muted: 100 116 139; /* slate-500 */
  --color-border: 226 232 240; /* slate-200 */
  
  --color-primary: 139 92 246; /* #8B5CF6 */
  --color-primary-dark: 124 58 237; /* #7C3AED */
  --color-accent: 16 185 129; /* #10B981 */
  --color-accent-dark: 5 150 105; /* #059669 */
  --color-secondary-accent: 234 179 8; /* #EAB308 */
  --color-hero-bg: 15 23 42; /* slate-900 */
}

html.dark {
  --color-bg: 15 23 42; /* slate-900 */
  --color-bg-card: 30 41 59; /* slate-800 */
  --color-text: 226 232 240; /* slate-200 */
  --color-text-muted: 148 163 184; /* slate-400 */
  --color-border: 51 65 85; /* slate-700 */
  --color-hero-bg: 15 23 42; /* slate-900 */
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Tailwind v3 Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Styling for the hero section's grid background */
.grid-background {
  background-color: rgb(var(--color-hero-bg)); /* neutral-900 */
  background-image:
    repeating-linear-gradient(to right, rgba(var(--color-border), 0.4) 0, rgba(var(--color-border), 0.4) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(to bottom, rgba(var(--color-border), 0.4) 0, rgba(var(--color-border), 0.4) 1px, transparent 1px, transparent 40px);
  background-size: 40px 40px;
}

/* SVG Animations */
.wifi-svg { animation: glow 3s infinite alternate ease-in-out; }
.wifi-svg path { opacity: 0; animation-name: wave; animation-duration: 2.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.wifi-svg path:nth-of-type(3) { animation-delay: 0s; }
.wifi-svg path:nth-of-type(2) { animation-delay: 0.2s; }
.wifi-svg path:nth-of-type(1) { animation-delay: 0.4s; }
.wifi-svg circle { opacity: 1; }
@keyframes glow { from { filter: drop-shadow(0 0 10px rgba(23, 201, 210, 0.4)); } to { filter: drop-shadow(0 0 25px rgba(23, 201, 210, 0.8)); } }
@keyframes wave { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }

/* Scroll Indicator */
.indicator-container { display: flex; justify-content: center; align-items: center; gap: 0.75rem; }
.indicator-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; background-color: rgb(var(--color-border)); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; cursor: pointer; }
.indicator-dot.active { width: 2rem; background-color: rgb(var(--color-accent)); }

/* Package Toggle */
.package-toggle-container {
  display: flex;
  gap: 1rem; /* 16px */
  position: relative;
  z-index: 10;
}

/* Base style for each toggle button */
.toggle-button {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem; /* 12px 24px */
  border-radius: 9999px; /* Fully rounded */
  font-weight: 600;
  color: rgb(var(--color-text-muted));
  background-color: rgba(var(--color-border), 0.3);
  border: 1px solid rgb(var(--color-border));
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

/* Style for the active button */
.toggle-button.active {
  background-color: rgb(var(--color-bg-card));
  color: rgb(var(--color-text));
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Hover effect for inactive buttons */
.toggle-button:not(.active):hover {
  transform: translateY(-2px);
  border-color: rgba(107, 114, 128, 0.5); /* neutral-500 */
}

/* The wiggle animation for the icon on click */
.wiggle svg {
  animation: wiggle 0.4s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  75% { transform: rotate(-8deg); }
}

/* --- DEFINITIVE STYLES FOR THE "OUR JOURNEY" TIMELINE --- */

.timeline-container {
  position: relative;
  max-width: 48rem; /* 768px */
  margin: 0 auto;
}

/* The central vertical line for desktop */
.timeline-container::after {
  content: '';
  position: absolute;
  width: 3px;
  background-color: rgb(var(--color-border)); /* neutral-700 */
  top: 8px;
  bottom: 8px;
  left: 50%;
  margin-left: -1.5px;
}

.timeline-item {
  padding: 1rem 2.5rem;
  position: relative;
  width: 50%;
}

/* The circle on the central line for all items */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgb(var(--color-bg)); /* neutral-900 */
  border: 4px solid rgb(var(--color-primary)); /* primary */
  top: 24px;
  border-radius: 50%;
  z-index: 1;
}

/* ---- DESKTOP STYLES (ALTERNATING) ---- */
.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}
.timeline-item:nth-child(odd)::after {
  right: -10px;
}

.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}
.timeline-item:nth-child(even)::after {
  left: -10px;
}

.timeline-year {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(var(--color-accent)); /* accent */
  margin-bottom: 0.5rem;
}

/* ---- MOBILE OVERRIDE (SINGLE COLUMN) ---- */
@media screen and (max-width: 768px) {
  /* Move the central line to the left */
  .timeline-container::after {
    left: 20px;
  }

  /* Force ALL items to be full-width and aligned to the left */
  .timeline-item {
    width: 100%;
    left: 0 !important; /* !important guarantees this rule wins */
    padding-left: 50px;
    padding-right: 1rem;
    text-align: left !important; /* Force text alignment */
  }

  /* Position ALL dots correctly on the left-side line */
  .timeline-item::after {
    left: 10px !important;
  }
}

/* --- STYLES FOR THE CONTACT FORM --- */

.form-input {
  display: block;
  width: 100%;
  background-color: rgb(var(--color-bg-card)); /* neutral-800 */
  border: 1px solid rgb(var(--color-border)); /* neutral-700 */
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  color: rgb(var(--color-text)); /* neutral-100 */
  transition: all 0.2s;
}
.form-input:focus {
  outline: none;
  border-color: rgb(var(--color-primary)); /* primary */
  box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.5);
}

.submit-button {
  width: 100%;
  background-color: rgb(var(--color-primary)); /* primary */
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}
.submit-button:hover {
  background-color: rgb(var(--color-primary-dark)); /* primary-dark */
}
.submit-button:disabled {
  background-color: rgb(var(--color-border)); /* neutral-700 */
  cursor: not-allowed;
}

.success-message {
  width: 100%;
  background-color: rgba(var(--color-accent), 0.2); /* accent-transparent */
  color: rgb(var(--color-accent)); /* accent */
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-accent));
}

/* --- STYLES FOR THE ARTICLE CARD --- */
.article-card-link {
  display: block;
  height: 100%;
}
.article-card-link > div {
  display: flex;
  flex-direction: column;
}

/* --- STYLES FOR MARKDOWN ARTICLE PAGES --- */
.prose {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

.prose h1 {
  @apply text-4xl lg:text-5xl font-extrabold text-primary mb-8;
}
.prose h2 {
  @apply text-3xl lg:text-4xl font-bold text-neutral-100 mt-12 mb-6 border-b border-neutral-700 pb-2;
}
.prose h3 {
  @apply text-2xl font-bold text-neutral-200 mt-8 mb-4;
}
.prose p, .prose ul, .prose li {
  @apply text-lg text-neutral-300 leading-relaxed;
}
.prose p {
  @apply mb-6;
}
.prose ul {
  @apply list-disc list-outside pl-6 mb-6 space-y-2;
}
.prose table {
  @apply w-full table-auto border-collapse border border-neutral-700 mb-6;
}
.prose th {
  @apply bg-neutral-800 border border-neutral-700 p-3 text-left font-bold text-neutral-100;
}
.prose td {
  @apply border border-neutral-700 p-3;
}

/* --- STYLES FOR THE 404 GLITCH EFFECT (WEB-SEARCH REFINEMENT) --- */

.glitch-text {
  position: relative;
  /* 1. The main text gets its own subtle, high-frequency shake */
  animation: glitch-shake 1s infinite linear alternate-reverse;
}

/* Base setup for the two "ghost" layers */
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 2. The first "ghost" layer (Accent Color) */
.glitch-text::before {
  left: 3px;
  text-shadow: -2px 0 rgb(var(--color-accent)); /* Accent color */
  /* This layer has its own rapid "tearing" animation */
  animation: glitch-tear-1 2s infinite linear alternate-reverse;
}

/* 3. The second "ghost" layer (Yellow Color) */
.glitch-text::after {
  left: -3px;
  text-shadow: 2px 0 rgb(var(--color-secondary-accent)); /* Yellow accent */
  /* This layer has a DIFFERENT "tearing" animation */
  animation: glitch-tear-2 3s infinite linear alternate-reverse;
}

/* Keyframe for the main text's fast shake */
@keyframes glitch-shake {
  0%   { transform: translate(0); }
  25%  { transform: translate(1px, 1px); }
  50%  { transform: translate(-1px, -1px); }
  75%  { transform: translate(1px, -1px); }
  100% { transform: translate(0); }
}

/* Keyframe for the first ghost layer's "tearing" */
@keyframes glitch-tear-1 {
  0%   { clip-path: inset(10% 0 85% 0); }
  10%  { clip-path: inset(40% 0 10% 0); }
  20%  { clip-path: inset(90% 0 2% 0); }
  30%  { clip-path: inset(25% 0 60% 0); }
  40%  { clip-path: inset(5% 0 70% 0); }
  50%  { clip-path: inset(80% 0 15% 0); }
  60%  { clip-path: inset(10% 0 50% 0); }
  70%  { clip-path: inset(60% 0 30% 0); }
  80%  { clip-path: inset(95% 0 1% 0); }
  90%  { clip-path: inset(30% 0 65% 0); }
  100% { clip-path: inset(10% 0 85% 0); }
}

/* Keyframe for the second ghost layer's "tearing" (different steps) */
@keyframes glitch-tear-2 {
  0%   { clip-path: inset(70% 0 20% 0); }
  10%  { clip-path: inset(10% 0 80% 0); }
  20%  { clip-path: inset(40% 0 30% 0); }
  30%  { clip-path: inset(60% 0 10% 0); }
  40%  { clip-path: inset(80% 0 5% 0); }
  50%  { clip-path: inset(20% 0 70% 0); }
  60%  { clip-path: inset(50% 0 30% 0); }
  70%  { clip-path: inset(1% 0 90% 0); }
  80%  { clip-path: inset(25% 0 50% 0); }
  90%  { clip-path: inset(75% 0 10% 0); }
  100% { clip-path: inset(70% 0 20% 0); }
}