/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Design Tokens ---------- */
:root{
  /* Colors */
  --primary-navy:#0F1419; --primary-blue:#007AFF; --accent-orange:#FF6B35;
  --neutral-light:#F8F9FA; --neutral-gray:#6C757D; --white:#FFF;
  --text-primary:#2C3E50; --text-secondary:#5A6C7D;

  /* Shadows */
  --shadow-light:0 2px 8px rgba(0,0,0,.1);
  --shadow-medium:0 4px 16px rgba(0,0,0,.15);
  --shadow-heavy:0 8px 32px rgba(0,0,0,.2);

  /* Type & spacing */
  --font-system:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Inter',var(--font-system);
  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2rem;
  --space-xl:3rem; --space-2xl:4rem;

  /* Radius & transitions */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px;
  --transition-fast:.15s ease-out; --transition-normal:.3s ease-out; --transition-slow:.5s ease-out;

  /* Layout */
  --container-max:1200px;
  --logo-offset:50px;      /* distance from viewport left to logo */
  --header-height:96px;    /* pushes content below fixed header */
}

/* ---------- Base Typography ---------- */
html{ font-size:16px; scroll-behavior:smooth; }
body{
  font-family:var(--font-system); line-height:1.6; color:var(--text-primary); background:var(--white);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:600; line-height:1.2; margin-bottom:var(--space-sm); }
h1{ font-size:clamp(2rem,5vw,3rem); } h2{ font-size:clamp(1.5rem,4vw,2.25rem); } h3{ font-size:clamp(1.25rem,3vw,1.5rem); }
p{ margin-bottom:var(--space-sm); color:var(--text-secondary); }

/* ---------- Header (scoped) ---------- */
header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,0,0,.1);
  padding:var(--space-sm) 0;
}
.header-container{
  max-width:var(--container-max); margin:0 auto;
  /* Left padding here positions the logo; other containers unaffected */
  padding:0 calc(var(--space-md)) 0 calc(var(--space-md) + var(--logo-offset));
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-lg);
}

.logo {
    display: flex;
    align-items: center;
    transition: transform var(--transition-fast);
    margin-left: 0;
}

.logo:hover {
    transform: scale(1.05);
}

.logo:hover img {
    filter: brightness(1.1);
}

.logo img {
    display: block;
    height: clamp(75px, 20vh, 105px); /* Responsive sizing: min 52px, max 85px */
    width: auto;
    transition: all var(--transition-fast);
}
/* ---------- Nav ---------- */
nav ul{ display:flex; list-style:none; gap:var(--space-lg); align-items:center; }
nav a{
  color:var(--text-primary); text-decoration:none; font-weight:500;
  padding:var(--space-xs) var(--space-sm); border-radius:var(--radius-sm);
  transition:all var(--transition-fast); position:relative;
}
nav a::after{
  content:''; position:absolute; bottom:-2px; left:50%; width:0; height:2px;
  background:var(--primary-blue); transition:all var(--transition-fast); transform:translateX(-50%);
}
nav a:hover::after, nav a.active::after{ width:100%; }
nav a:hover, nav a.active{ color:var(--primary-blue); }

/* ---------- Page Flow ---------- */
main{ margin-top:var(--header-height); }

/* ---------- Hero ---------- */
.hero{
  min-height:90vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(135deg,var(--neutral-light) 0%, #E3F2FD 100%); position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,122,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity:.3;
}
.hero-content{ max-width:800px; padding:0 var(--space-md); position:relative; z-index:2; animation:fadeInUp 1s ease-out; }
.hero h1{
  font-size:clamp(2.5rem,6vw,4rem); font-weight:700; margin-bottom:var(--space-md);
  background:linear-gradient(135deg,var(--primary-navy),var(--primary-blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero p{
  font-size:clamp(1.1rem,2vw,1.25rem); margin-bottom:var(--space-xl); color:var(--text-secondary);
  max-width:600px; margin-inline:auto;
}

/* ---------- Buttons ---------- */
.cta-button{
  display:inline-flex; align-items:center; gap:var(--space-xs);
  padding:var(--space-md) var(--space-xl); background:var(--primary-blue); color:var(--white);
  text-decoration:none; border-radius:var(--radius-lg); font-weight:600; font-size:1.1rem;
  transition:all var(--transition-normal); box-shadow:var(--shadow-medium); position:relative; overflow:hidden;
}
.cta-button::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transition:left .5s;
}
.cta-button:hover::before{ left:100%; }
.cta-button:hover{ transform:translateY(-2px); box-shadow:var(--shadow-heavy); background:#0056CC; }
.cta-button:active{ transform:translateY(0); }

/* ---------- Content Sections ---------- */
.features{ padding:var(--space-2xl) 0; background:var(--white); }
.features-container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--space-md); }
.features h2{ text-align:center; margin-bottom:var(--space-xl); color:var(--primary-navy); }
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-xl); margin-top:var(--space-xl); }
.feature{
  background:var(--white); padding:var(--space-xl); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-light); transition:all var(--transition-normal); position:relative; overflow:hidden;
}
.feature::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--primary-blue),var(--accent-orange));
  transform:scaleX(0); transition:transform var(--transition-normal);
}
.feature:hover::before{ transform:scaleX(1); }
.feature:hover{ transform:translateY(-8px); box-shadow:var(--shadow-heavy); }
.feature h3{ color:var(--primary-navy); margin-bottom:var(--space-sm); font-size:1.25rem; }
.feature p{ color:var(--text-secondary); line-height:1.6; }

/* ---------- Page Content ---------- */
.page-content{ max-width:800px; margin:0 auto; padding:var(--space-2xl) var(--space-md); }
.page-content h1{ color:var(--primary-navy); margin-bottom:var(--space-lg); text-align:center; }
.page-content h2{ color:var(--primary-blue); margin-top:var(--space-xl); margin-bottom:var(--space-md); }
.page-content ul{ margin:var(--space-md) 0; padding-left:var(--space-lg); }
.page-content li{ margin-bottom:var(--space-xs); color:var(--text-secondary); }

/* ---------- Forms ---------- */
.contact-form{
  max-width:500px; margin:var(--space-xl) auto 0; padding:var(--space-xl);
  background:var(--neutral-light); border-radius:var(--radius-lg); box-shadow:var(--shadow-light);
}
.form-group{ margin-bottom:var(--space-lg); position:relative; }
.form-group label{ display:block; margin-bottom:var(--space-xs); font-weight:500; color:var(--text-primary); }
.form-group input,.form-group textarea{
  width:100%; padding:var(--space-md); border:2px solid #E9ECEF; border-radius:var(--radius-sm);
  font-size:1rem; transition:all var(--transition-fast); background:var(--white);
}
.form-group input:focus,.form-group textarea:focus{
  outline:none; border-color:var(--primary-blue); box-shadow:0 0 0 3px rgba(0,122,255,.1);
}
.form-group textarea{ resize:vertical; min-height:120px; }
.form-submit{
  width:100%; padding:var(--space-md); background:var(--primary-blue); color:var(--white);
  border:none; border-radius:var(--radius-sm); font-size:1rem; font-weight:600; cursor:pointer;
  transition:all var(--transition-normal);
}
.form-submit:hover{ background:#0056CC; transform:translateY(-1px); }
.form-submit:active{ transform:translateY(0); }

/* ---------- Footer (isolated) ---------- */
footer{
  background:var(--primary-navy); color:var(--white);
  padding:var(--space-xl) 0; text-align:center; margin-top:var(--space-2xl);
}
.footer-container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--space-md); }
footer a{ color:var(--accent-orange); text-decoration:none; transition:color var(--transition-fast); }
footer a:hover{ color:var(--white); }
.social-links{ margin-top:var(--space-sm); }
.social-links a{ margin:0 var(--space-sm); padding:var(--space-xs); border-radius:var(--radius-sm); transition:all var(--transition-fast); }
.social-links a:hover{ background:rgba(255,255,255,.1); }

/* ---------- Animations ---------- */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
.fade-in{ animation:fadeInUp .6s ease-out; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .header-container{ padding:0 var(--space-md); }
  :root{ --header-height:88px; }
}
@media (max-width:768px){
  .header-container{ padding:0 var(--space-sm); }
  nav ul{ gap:var(--space-sm); }
  nav a{ padding:var(--space-xs); font-size:.9rem; }
  .hero{ min-height:70vh; padding:var(--space-xl) 0; }
  :root{ --header-height:80px; }
}
@media (max-width:480px){
  .hero h1{ font-size:2rem; }
  .hero p{ font-size:1rem; }
  .cta-button{ padding:var(--space-sm) var(--space-lg); font-size:1rem; }
  :root{ --header-height:76px; }
}

/* ---------- Reduced Motion / High Contrast ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media (prefers-contrast:high){
  :root{
    --shadow-light:0 2px 8px rgba(0,0,0,.3);
    --shadow-medium:0 4px 16px rgba(0,0,0,.4);
    --shadow-heavy:0 8px 32px rgba(0,0,0,.5);
  }
}