/* ============================================================
   Seek Brand Spec — extracted from www.seek-re.com
   ============================================================
   Fonts: Montserrat 700 (headings/brand logo), Inter (body)
   Source: seek-re.com/assets/index-Dx54DLyk.css
   ============================================================ */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

/* ---- CSS Variables ---- */
:root {
  /* Colors */
  --seek-primary:       #3B82F6;   /* blue — buttons, links, primary actions */
  --seek-primary-hsl:   207 100% 42%;
  --seek-accent:        #0D99FF;   /* sky blue — glows, pulse dots, soft shadows */
  --seek-accent-hsl:    207 100% 52%;
  --seek-background:    #FAFAFA;
  --seek-foreground:    #171717;
  --seek-card:          #FFFFFF;
  --seek-card-foreground: #171717;
  --seek-muted:         #F5F5F5;
  --seek-muted-foreground: #737373;
  --seek-secondary:      #F5F5F5;
  --seek-secondary-foreground: #171717;
  --seek-border:        #E5E7EB;
  --seek-input:         rgba(13, 153, 255, 0.1);
  --seek-destructive:   #EF4444;
  --seek-warning:       #F59E0B;
  --seek-primary-foreground: #FFFFFF;

  /* Typography */
  --seek-font-heading:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --seek-font-body:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --seek-font-bold:     700;
  --seek-font-semibold: 600;
  --seek-font-medium:   500;

  /* Heading sizes */
  --seek-h1:  2.75rem;   /* 44px mobile → 60px desktop */
  --seek-h2:  3rem;      /* 48px desktop */
  --seek-h3:  2rem;      /* 32px desktop */
  --seek-h4:  1.5rem;    /* 24px desktop */
  --seek-body:    1rem;     /* 16px */
  --seek-body-lg: 1.125rem;  /* 18px */
  --seek-body-sm: 0.875rem;  /* 14px */

  /* Line heights */
  --seek-leading-tight:   1.1;
  --seek-leading-snug:    1.25;
  --seek-leading-normal:  1.5;

  /* Letter spacing */
  --seek-tracking-tight:   -0.025em;
  --seek-tracking-widest:  0.15em;  /* uppercase labels */

  /* Layout */
  --seek-container-max:     1100px;
  --seek-container-max-lg:   1400px;
  --seek-section-pad-y:      4rem;   /* 64px */
  --seek-section-pad-x:      2rem;   /* 32px */

  /* Border radius */
  --seek-radius:    0.75rem;   /* 12px */
  --seek-radius-sm: 0.5rem;    /* 8px */
  --seek-radius-lg: 1rem;      /* 16px */
  --seek-radius-xl: 1.5rem;    /* 24px */
  --seek-radius-pill: 9999px;  /* fully rounded */

  /* Shadows (accent-color tinted) */
  --seek-shadow-soft:  0 2px 8px -1px rgba(13, 153, 255, 0.1);
  --seek-shadow-medium: 0 4px 12px -2px rgba(13, 153, 255, 0.15);
  --seek-shadow-strong: 0 8px 24px -4px rgba(13, 153, 255, 0.2);
  --seek-shadow-glow:   0 0 20px rgba(13, 153, 255, 0.3);

  /* Gradients */
  --seek-gradient-brand:   linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --seek-gradient-accent:  linear-gradient(135deg, #0D99FF 0%, #8B5CF6 100%);

  /* Transitions */
  --seek-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --seek-z-header: 50;
  --seek-z-overlay: 60;
  --seek-z-modal: 100;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--seek-background);
  color: var(--seek-foreground);
  font-family: var(--seek-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--seek-font-heading);
  font-weight: var(--seek-font-bold);
  letter-spacing: var(--seek-tracking-tight);
  line-height: var(--seek-leading-tight);
  color: var(--seek-foreground);
}

h1 { font-size: var(--seek-h1); }
h2 { font-size: var(--seek-h2); }
h3 { font-size: var(--seek-h3); }
h4 { font-size: var(--seek-h4); }
p  { line-height: var(--seek-leading-normal); }
a  { color: var(--seek-foreground); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---- Container ---- */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--seek-section-pad-x);
  padding-right: var(--seek-section-pad-x);
}
@media (min-width: 1100px) { .container { max-width: var(--seek-container-max); } }
@media (min-width: 1400px) { .container { max-width: var(--seek-container-max-lg); } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-weight: 600;
  border-radius: var(--seek-radius-pill);
  border: 2px solid transparent;
  padding: 0.75rem 2rem;
  height: 3rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s var(--seek-ease);
  text-decoration: none;
}
.btn:hover { transform: scale(1.05); }
.btn:active { transform: scale(1.02); }

/* Primary — filled blue */
.btn-primary {
  background: var(--seek-primary);
  color: var(--seek-primary-foreground);
  border-color: var(--seek-primary);
  box-shadow: var(--seek-shadow-medium);
}
.btn-primary:hover {
  background: rgba(59, 130, 246, 0.9);
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow: var(--seek-shadow-strong);
}

/* Outline — white border, transparent bg (for dark backgrounds) */
.btn-outline {
  background: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
  backdrop-filter: blur(4px);
}
.btn-outline:hover {
  background: #FFFFFF;
  color: var(--seek-foreground);
}

/* Ghost — muted surface */
.btn-ghost {
  background: var(--seek-muted);
  color: var(--seek-foreground);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--seek-border); }

/* Sizes */
.btn-sm { height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: var(--seek-radius-pill); }
.btn-lg { height: 3.5rem; padding: 0.75rem 2.5rem; font-size: 1.125rem; }

/* ---- Cards ---- */
.card {
  overflow: hidden;
  border-radius: var(--seek-radius);
  border: 1px solid var(--seek-border);
  background: var(--seek-card);
  box-shadow: var(--seek-shadow-soft);
  transition: all 0.3s var(--seek-ease);
}
.card:hover { box-shadow: var(--seek-shadow-medium); }

.card-feature {
  border-radius: var(--seek-radius);
  border: 1px solid rgba(13, 153, 255, 0.2);
  background: linear-gradient(135deg, rgba(13,153,255,0.05) 0%, rgba(13,153,255,0.1) 100%);
  padding: 1.5rem;
  transition: all 0.3s var(--seek-ease);
}
.card-feature:hover {
  background: linear-gradient(135deg, rgba(13,153,255,0.1) 0%, rgba(13,153,255,0.2) 100%);
}

/* ---- Header / Nav ---- */
.seek-header {
  position: sticky;
  top: 0;
  z-index: var(--seek-z-header);
  background: rgba(250, 250, 250, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--seek-border);
  height: 4rem;
}
.seek-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.seek-logo {
  font-family: var(--seek-font-heading);
  font-weight: var(--seek-font-bold);
  font-size: 2rem;
  background: linear-gradient(135deg, var(--seek-primary) 0%, rgba(59,130,246,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seek-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.seek-nav a {
  color: var(--seek-foreground);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.seek-nav a:hover { color: var(--seek-primary); }

/* ---- Footer ---- */
.seek-footer {
  background: var(--seek-foreground);
  color: var(--seek-background);
  padding: 3rem var(--seek-section-pad-x);
}
.seek-footer a { color: rgba(255,255,255,0.7); transition: color 0.2s; }
.seek-footer a:hover { color: #FFFFFF; }

/* ---- Badges / Pills ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border-radius: var(--seek-radius-pill);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
}
.badge-primary { background: var(--seek-primary); color: #FFFFFF; border-color: var(--seek-primary); }
.badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--seek-accent);
  animation: seek-pulse 2s ease-in-out infinite;
}

/* ---- Forms ---- */
.seek-input {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: var(--seek-radius);
  border: 1px solid var(--seek-border);
  background: var(--seek-card);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  color: var(--seek-foreground);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.seek-input::placeholder { color: var(--seek-muted-foreground); }
.seek-input:focus {
  outline: none;
  border-color: var(--seek-primary);
  box-shadow: 0 0 0 2px rgba(13,153,255,0.2);
}

/* ---- Section patterns ---- */
.section-white   { background: #FFFFFF; }
.section-muted   { background: var(--seek-muted); }
.section-dark    { background: var(--seek-foreground); color: var(--seek-background); }
.section-padded  { padding-top: var(--seek-section-pad-y); padding-bottom: var(--seek-section-pad-y); }
.section-padded-lg { padding-top: 5rem; padding-bottom: 5rem; }

/* ---- Links ---- */
.seek-link       { color: var(--seek-primary); text-decoration: none; transition: opacity 0.2s; }
.seek-link:hover { opacity: 0.85; }
.seek-link-white { color: #FFFFFF; text-decoration: none; transition: opacity 0.2s; }
.seek-link-white:hover { opacity: 0.8; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--seek-background); }
::-webkit-scrollbar-thumb { background: var(--seek-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--seek-muted-foreground); }

/* ---- Animations ---- */
@keyframes seek-fade-in  { 0% { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes seek-slide-up  { 0% { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes seek-scale-in  { 0% { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes seek-glow-pulse { 0%,to { box-shadow: 0 0 20px rgba(13,153,255,0.3); } 50% { box-shadow: 0 0 30px rgba(13,153,255,0.5); } }
@keyframes seek-ping      { 75%,to { transform:scale(2); opacity:0; } }
@keyframes seek-bounce    { 0%,to { transform:translateY(-25%); animation-timing-function:cubic-bezier(0.8,0,1,1); } 50% { transform:none; animation-timing-function:cubic-bezier(0,0,0.2,1); } }

.animate-fade-in   { animation: seek-fade-in 0.6s ease-out forwards; }
.animate-slide-up  { animation: seek-slide-up 0.8s ease-out forwards; }
.animate-scale-in  { animation: seek-scale-in 0.4s ease-out forwards; }
.animate-glow-pulse { animation: seek-glow-pulse 2s ease-in-out infinite; }
.animate-pulse     { animation: seek-ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.animate-bounce    { animation: seek-bounce 1s infinite; }