/*
 * zanadio Landing Pages – Design System
 * Shared CSS variables, reset, typography, buttons, and layout primitives.
 * Every landing page under pages/ should reference this file.
 */

/* === FONTS === */
@font-face { font-family:'TT Commons Pro'; src:url('fonts/TTCommons-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'TT Commons Pro'; src:url('fonts/TTCommons-DemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'TT Commons Pro'; src:url('fonts/TTCommons-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Mungil'; src:url('fonts/Mungil.woff2') format('woff2'); font-weight:400; font-display:swap; }

/* === RESET === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family: 'TT Commons Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a2e2a; line-height:1.6; font-size:17px; overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }

/* === CI VARIABLES === */
:root {
  --primary: #00a878;
  --primary-dark: #008f66;
  --primary-light: #00c98f;
  --secondary: #2b504c;
  --accent: #ffd166;
  --accent-dark: #e6b84d;
  --gradient: linear-gradient(130deg, #409F7F 0%, #2A5656 100%);
  --light-green: #e8f5f3;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --text: #1a2e2a;
  --text-light: #4a6b66;
  --container: 1280px;
  --radius-lg: 0.75rem;
  --radius-2xl: 1.5rem;
  --shadow-card: 0px 4px 48px rgba(0,16,51,0.1);
}

/* === CONTAINER === */
.container { max-width:var(--container); margin:0 auto; padding:0 1rem; }
@media (min-width:640px) { .container { padding:0 1.5rem; } }
@media (min-width:1300px) { .container { padding:0 2rem; } }

/* === SECTIONS === */
.section { padding: 6.25rem 0; }
@media (max-width:768px) { .section { padding: 4rem 0; } }

/* === BUTTONS === */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:'TT Commons Pro',sans-serif; font-weight:600; font-size:1rem;
  border-radius: var(--radius-lg); cursor:pointer;
  border:2px solid transparent; transition: all 0.2s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.btn-sm { padding:0.5rem 1rem; font-size:0.875rem; }
.btn-md { padding:0.75rem 1.5rem; font-size:1rem; }
.btn-lg { padding:1rem 2rem; font-size:1.125rem; }

.btn-primary { background:var(--primary); color:white; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-white { background:white; color:var(--primary); border-color:white; }
.btn-white:hover { background:var(--gray-100); }
.btn-white-outline { background:transparent; color:white; border-color:white; }
.btn-white-outline:hover { background:rgba(255,255,255,0.1); }
.btn-outline { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:white; }
.btn-accent { background:var(--accent); color:var(--secondary); border-color:var(--accent); }
.btn-accent:hover { background:var(--accent-dark); border-color:var(--accent-dark); }

/* === SECTION HEADERS === */
.sec-header { text-align:center; max-width:48rem; margin:0 auto 2.5rem; }
.sec-header h2 {
  font-family:'TT Commons Pro',sans-serif;
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight:700; line-height:1.2; color:var(--secondary); margin-bottom:1rem;
}
.sec-header p { font-size:1.125rem; color:var(--gray-600); line-height:1.6; }
.sec-label {
  display:inline-block; background:var(--light-green); color:var(--primary);
  font-weight:700; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em;
  padding:0.375rem 1rem; border-radius:9999px; margin-bottom:1rem;
}

/* === BACKGROUNDS === */
.bg-white { background:white; }
.bg-light { background:var(--light-green); }
.bg-grad { background:var(--gradient); color:white; }

/* === FADE-IN ANIMATION === */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.vis { opacity:1; transform:translateY(0); }