/* Light Sky Color Scheme */
:root{
  --sky-light: #e6f3ff;
  --sky-medium: #b3d9ff;
  --sky-blue: #4da6ff;
  --sky-deep: #1a8cff;
  --cloud-white: #ffffff;
  --cloud-soft: rgba(255,255,255,0.9);
  --accent: #ff6b4a;
  --text-dark: #2c3e50;
  --text-medium: #34495e;
  --text-light: #5a6c7d;
  --card-bg: rgba(255,255,255,0.7);
  --card-border: rgba(255,255,255,0.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text-dark);
  background: linear-gradient(135deg, var(--sky-light) 0%, var(--sky-medium) 50%, var(--sky-blue) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}

main{
  position: relative;
}

.site-header{
  position:sticky;
  top:0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
  padding:.6rem 0;
  z-index:30;
  box-shadow: 0 2px 20px rgba(74, 166, 255, 0.1);
}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text-dark);text-decoration:none}
.logo{width:44px;height:44px}
.brand-text{font-weight:600;font-size:1.1rem;color:var(--sky-deep)}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:var(--text-medium);text-decoration:none;padding:.4rem .6rem;border-radius:6px;transition: all 0.2s ease}
.nav a:hover{color:var(--sky-deep);background:rgba(77, 166, 255, 0.1)}
.nav a.cta{background:var(--accent);color:white;box-shadow: 0 4px 15px rgba(255, 107, 74, 0.3)}
.nav a.cta:hover{background:var(--accent);transform: translateY(-1px);box-shadow: 0 6px 20px rgba(255, 107, 74, 0.4)}
.nav-toggle{
  display:none;
  background:none;
  border:0;
  color:var(--text-dark);
  cursor:pointer;
  padding:0.5rem;
  border-radius:4px;
  transition: background-color 0.2s ease;
}
.nav-toggle:hover{
  background:rgba(74, 166, 255, 0.1);
}
.nav-toggle:active{
  background:rgba(74, 166, 255, 0.2);
}
.hamburger{width:22px;height:2px;background:var(--text-dark);display:block;position:relative}
.hamburger::after,.hamburger::before{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--text-dark)}
.hamburger::before{top:-6px}
.hamburger::after{top:6px}

.hero{
  padding:4rem 0 5rem;
  background: transparent;
  position: relative;
}
.hero::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.6) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.4) 0%, transparent 50%);
  pointer-events: none;
}
.hero-inner{display:flex;gap:2rem;align-items:center}
.hero-copy{flex:1}
.hero-copy h1{font-size:2.1rem;margin:0 0 .6rem;color:var(--text-dark);line-height:1.05;font-weight:700}
.lead{color:var(--text-medium);margin:0 0 1rem;font-size:1.1rem;line-height:1.6}
.hero-ctas{display:flex;gap:.75rem}
.btn{display:inline-block;padding:.65rem 1rem;border-radius:8px;text-decoration:none;font-weight:600;transition: all 0.2s ease}
.btn.primary{background:var(--accent);color:white;box-shadow:0 6px 18px rgba(255, 107, 74, 0.3)}
.btn.primary:hover{transform: translateY(-2px);box-shadow:0 8px 25px rgba(255, 107, 74, 0.4)}
.btn.ghost{border:1px solid var(--sky-deep);color:var(--sky-deep);background:transparent}
.btn.ghost:hover{background:var(--sky-deep);color:white}
.hero-visual{width:320px;flex:0 0 320px}
.logo-scene{position:relative;width:320px;height:240px;display:flex;align-items:center;justify-content:center}
.hero-logo{width:220px;height:220px}
.bird{position:absolute;width:42px;height:28px;background:transparent;top:36%;left:8%;transform-origin:center}
.bird::before{content:"";display:block;width:100%;height:100%;background-image:radial-gradient(circle at 30% 40%, rgba(255,255,255,0.98) 0, rgba(255,255,255,0.01) 35%);mask-image:linear-gradient(#000,#000);border-radius:50%;}
/* Simpler bird silhouette using pseudo-element */
.bird::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:transparent;mask:none;}

/* subtle motion */
@keyframes birdFlight{0%{transform:translate(0,0) rotate(-8deg)}25%{transform:translate(72px,-30px) rotate(-2deg)}50%{transform:translate(140px,-18px) rotate(6deg)}75%{transform:translate(72px,6px) rotate(2deg)}100%{transform:translate(0,0) rotate(-8deg)}}
.bird{animation:birdFlight 6s ease-in-out infinite}

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin:3rem 0;
  padding:2rem 0;
}
.features article{
  background:var(--card-bg);
  padding:2rem;
  border-radius:16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:220px;
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(74, 166, 255, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.features article:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(74, 166, 255, 0.15);
}
.feature-icon{
  font-size:2.5rem;
  margin-bottom:1rem;
  display:block;
}
.features h3{margin:0 0 1rem 0;color:var(--text-dark);font-size:1.2rem;font-weight:600}
.features p{margin:0;color:var(--text-medium);line-height:1.5}

.products{
  margin:4rem auto;
  padding:3rem 2rem;
  background: var(--card-bg);
  border-radius: 20px;
  border: 1px solid var(--card-border);
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(74, 166, 255, 0.1);
  max-width: 1100px;
  width: calc(100% - 2rem);
}
.products h2{text-align:center;color:var(--text-dark);margin-bottom:1rem;font-weight:700}
.section-intro{text-align:center;margin-bottom:3rem;color:var(--text-medium);max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;justify-items:center}
.product-card{
  background:rgba(255,255,255,0.8);
  padding:2rem;
  border-radius:16px;
  text-align:center;
  position:relative;
  border:1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(74, 166, 255, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(74, 166, 255, 0.12);
}
.product-card h3{margin:0 0 1rem 0;color:var(--text-dark);font-size:1.2rem;font-weight:600}
.product-card p{margin:0 0 1.5rem 0;color:var(--text-medium);line-height:1.5}
.coming-soon{
  background:var(--accent);
  color:white;
  padding:0.5rem 1rem;
  border-radius:20px;
  font-size:0.85rem;
  font-weight:600;
  display:inline-block;
  box-shadow: 0 2px 10px rgba(255, 107, 74, 0.3);
}

.product-link{
  background:var(--sky-deep);
  color:white;
  padding:0.5rem 1rem;
  border-radius:20px;
  font-size:0.85rem;
  font-weight:600;
  display:inline-block;
  text-decoration:none;
  box-shadow: 0 2px 10px rgba(26, 140, 255, 0.3);
  transition: all 0.2s ease;
}

.product-link:hover{
  background:var(--sky-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(26, 140, 255, 0.4);
}

.about,.contact{
  background:var(--card-bg);
  padding:3rem 2rem;
  border-radius:20px;
  margin:3rem auto;
  text-align:center;
  border: 1px solid var(--card-border);
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(74, 166, 255, 0.1);
  max-width: 1100px;
  width: calc(100% - 2rem);
}
.about h2,.contact h2{color:var(--text-dark);margin-bottom:1.5rem;font-weight:700}
.about p,.contact p{color:var(--text-medium);line-height:1.6;max-width:800px;margin:0 auto;font-size:1.05rem}
.contact p{margin-bottom:2rem}

.site-footer{
  margin-top:4rem;
  padding:3rem 0 2rem;
  background: rgba(255, 255, 255, 0.8);
  border-top:1px solid var(--card-border);
  position: relative;
  backdrop-filter: blur(15px);
}
.site-footer::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sky-blue) 50%, transparent 100%);
}
.footer-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  color:var(--text-dark);
}
.footer-logo{width:32px;height:32px}
.footer-brand-text{font-weight:600;font-size:1.1rem;color:var(--sky-deep)}
.footer-links{
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-links a{
  color:var(--text-medium);
  text-decoration:none;
  transition:color 0.2s ease;
}
.footer-links a:hover{color:var(--sky-deep)}
.footer-bottom{
  color:var(--text-light);
  text-align:center;
}

/* Responsive */
@media (max-width:900px){
  .hero-inner{flex-direction:column;align-items:flex-start}
  .hero-visual{width:100%;flex-basis:auto}
  .hero-logo{width:160px;height:160px}
  .features{grid-template-columns:1fr;gap:1.5rem}
  .features article{padding:1.5rem;min-height:auto}
  .products-grid{grid-template-columns:1fr;gap:1.5rem}
  .footer-links{gap:1.5rem}
}
@media (max-width:640px){
  .container{padding:0.8rem}
  .nav{display:none}
  .nav-toggle{display:block}
  .brand-text{display:none}
  .hero{padding:2.2rem 0}
  .hero-copy h1{font-size:1.5rem}
  .features{margin:2rem 0}
  .features article{padding:1.5rem}
  .products{margin:2rem auto;padding:2rem 1rem;width: calc(100% - 1rem)}
  .products-grid{grid-template-columns:1fr;gap:1.5rem}
  .about,.contact{padding:2rem 1rem;margin:2rem auto;width: calc(100% - 1rem)}
  .footer-links{flex-direction:column;gap:1rem;text-align:center}
  .footer-content{gap:1rem}
}
/* mobile nav open state */
.nav.open{
  display:flex;
  flex-direction:column;
  position:absolute;
  right:1rem;
  top:60px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(15px);
  padding:1rem;
  border-radius:12px;
  border:1px solid var(--card-border);
  box-shadow: 0 8px 32px rgba(74, 166, 255, 0.15);
  gap:0.5rem;
  min-width:180px;
  z-index:100;
}
.nav.open a{
  color:var(--text-medium);
  padding:0.8rem 1rem;
  border-radius:8px;
  transition: all 0.2s ease;
}
.nav.open a:hover{
  background:rgba(74, 166, 255, 0.1);
  color:var(--sky-deep);
}
.nav.open a.cta{
  background:var(--accent);
  color:white;
  margin-top:0.5rem;
}
.nav.open a.cta:hover{
  background:var(--accent);
  transform: translateY(-1px);
}

/* small accessibility focus styles */
a:focus{outline:2px solid rgba(74, 166, 255, 0.5);outline-offset:3px}