/* assets/css/style.css */

/* ==== Design Tokens ==== */
:root {
  /* Light harmonious palette */
  --color-primary: #4a90e2;   /* Soft blue */
  --color-secondary: #6ec1e4; /* Lighter teal */
  --color-accent: #ffb400;   /* Warm gold */
  --color-bg: #f5faff;       /* Very light background */
  --color-text: #212529;     /* Dark gray for readability */
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.3);
  --border-radius: 12px;
  --spacing-unit: 1rem;
}

/* ==== Base Styles ==== */
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }
body { margin:0; font-family:'Inter',sans-serif; background:var(--color-bg); color:var(--color-text); line-height:1.6; }

/* ==== Glass‑morphism utilities ==== */
.glass { background:var(--glass-bg); backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%); border:1px solid var(--glass-border); border-radius:var(--border-radius); }
.glass-strong { background:rgba(255,255,255,0.25); backdrop-filter:blur(16px) saturate(200%); -webkit-backdrop-filter:blur(16px) saturate(200%); }

/* ==== Buttons ==== */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:0.5rem 1rem; border-radius:var(--border-radius); border:none; cursor:pointer; font-weight:500; transition:background-color 0.3s ease, transform 0.2s ease; }
.btn-primary { background:var(--color-primary); color:#fff; }
.btn-primary:hover { background:#3b78c2; transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--color-primary); border:2px solid var(--color-primary); }
.btn-outline:hover { background:var(--color-primary); color:#fff; }

/* ==== Card component ==== */
.card { background:var(--glass-bg); border-radius:var(--border-radius); padding:var(--spacing-unit); box-shadow:0 4px 30px rgba(0,0,0,0.1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 8px 40px rgba(0,0,0,0.15); }

/* ==== Animation keyframes ==== */
@keyframes fadeInUp { 0%{opacity:0;transform:translateY(20px);} 100%{opacity:1;transform:translateY(0);} }
@keyframes float { 0%{transform:translateY(0);} 50%{transform:translateY(-8px);} 100%{transform:translateY(0);} }

/* ==== Utilities ==== */
.text-gradient { background:linear-gradient(45deg,var(--color-primary),var(--color-accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ==== Responsive Grid ==== */
.services-grid, .features-grid, .projects-gallery, .reviews-grid, .faq-grid, .contact-grid { display:grid; gap:var(--spacing-unit); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

/* ==== Micro‑Interactions ==== */
a { color:var(--color-primary); text-decoration:none; position:relative; transition:color 0.2s ease; }
a::after { content:''; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--color-primary); transform:scaleX(0); transition:transform 0.3s ease; }
a:hover::after { transform:scaleX(1); }

input, textarea, select { border:1px solid rgba(0,0,0,0.1); border-radius:var(--border-radius); padding:0.5rem; transition:border-color 0.3s ease, box-shadow 0.3s ease; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(74,144,226,0.2); }

/* ==== Fade‑in on scroll (fallback for browsers without AOS) ==== */
[data-aos] { opacity:0; transition:opacity 0.6s ease, transform 0.6s ease; }
[data-aos].aos-animate { opacity:1; transform:none; }

/* ==== Reduced motion ==== */
@media (prefers-reduced-motion:reduce){ *, *::before, *::after { transition-duration:0.001ms !important; } }

/* ==== Responsive image fallback ==== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}