@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500&display=swap');

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto',sans-serif; background: linear-gradient(135deg,#1e1e2f,#27293d); color:#f0f0f0; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }

/* Header */
header {
  position:fixed; top:0; left:0; width:100%; padding:1rem 2rem;
  background:rgba(30,30,47,0.95); backdrop-filter:blur(10px);
  display:flex; justify-content:space-between; align-items:center; z-index:1000;
  transition:background 0.3s ease;
}
header.scrolled { background:rgba(30,30,47,1); box-shadow:0 4px 20px rgba(0,0,0,0.3);}
header .logo { font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.8rem; letter-spacing:2px; color:#ff6f61; }
nav a { margin-left:2rem; font-weight:500; position:relative; }
nav a::after { content:''; display:block; width:0; height:2px; background:#ff6f61; position:absolute; bottom:-4px; left:0; transition:width 0.3s; }
nav a:hover::after { width:100%; }

/* Hero */
.hero { display:flex; flex-direction:column; justify-content:center; align-items:center; height:100vh; text-align:center; padding:0 1rem; }
.hero h1 { font-family:'Montserrat',sans-serif; font-size:3rem; margin-bottom:1rem; color:#ff6f61; animation:fadeInUp 1s ease forwards; }
.hero p { font-size:1.2rem; margin-bottom:2rem; max-width:600px; opacity:0; animation:fadeInUp 1s ease 0.5s forwards; }
.hero .btn { padding:0.8rem 2rem; background:#ff6f61; color:#fff; font-weight:600; border-radius:50px; cursor:pointer; transition: transform 0.3s, box-shadow 0.3s; opacity:0; animation:fadeInUp 1s ease 1s forwards; }
.hero .btn:hover { transform:translateY(-3px); box-shadow:0 10px 20px rgba(255,111,97,0.4); }

@keyframes fadeInUp { 0% { opacity:0; transform:translateY(20px); } 100% { opacity:1; transform:translateY(0); } }

/* Features */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; padding:6rem 2rem 4rem; max-width:1200px; margin:0 auto; }
.feature-card { background:rgba(255,255,255,0.05); border-radius:15px; padding:2rem; text-align:center; transition:transform 0.4s, box-shadow 0.4s; cursor:default; }
.feature-card:hover { transform:translateY(-10px); box-shadow:0 15px 30px rgba(255,111,97,0.3); }
.feature-card h3 { margin-bottom:1rem; color:#ff6f61; }
.feature-card p { color:#ccc; line-height:1.6; }

/* Footer */
footer { padding:2rem; text-align:center; background:rgba(30,30,47,0.9); margin-top:4rem; font-size:0.9rem; color:#888; }

/* Scroll Animation */
.fade-in { opacity:0; transform:translateY(30px); transition: all 0.6s ease-out; }
.fade-in.visible { opacity:1; transform:translateY(0); }