/* Responsive Nord RCM styles with animations */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background:#f4f8fb;color:#0f172a;scroll-behavior:smooth;}
a{color:inherit}
header{background:#ffffff;box-shadow:0 2px 6px rgba(16,24,40,0.04);position:sticky;top:0;z-index:40;transition:background .25s ease;}
.container{max-width:1100px;margin:0 auto;padding:24px;}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:56px;height:auto;}
.brand h2{margin:0;font-size:18px;color:#0756d6;}
.navlinks{display:flex;gap:18px;align-items:center;}
.navlinks a{padding:8px 10px;border-radius:8px;text-decoration:none;color:#0f172a;font-weight:600;transition:transform .15s ease, background .15s ease;}
.navlinks a.active{background:#eef6ff;color:#0756d6}
.navlinks a:hover{transform:translateY(-3px);background:#f1f7ff}
.hamburger{display:none;border:0;background:#36454F;font-size:22px;cursor:pointer;padding:6px}

/* Hero */
.hero{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 16px;opacity:0;transform:translateY(10px);transition:opacity .7s ease, transform .7s ease;}
.logo-large{width:260px;max-width:60vw;height:auto;filter:drop-shadow(0 8px 24px rgba(7,86,214,0.12));transition:transform .6s ease;}
h1{font-size:28px;margin:18px 0 8px;color:#06203a;}
.lead{max-width:780px;margin:0 auto;font-size:16px;color:#334155;line-height:1.5;}

/* About / Contact layout */
.section{padding:48px 16px;background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(244,248,251,0.9));}
.card{background:white;box-shadow:0 6px 18px rgba(2,6,23,0.06);border-radius:12px;padding:24px;margin:16px 0;text-align:left;opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}

/* Form */
form{display:flex;flex-direction:column;gap:12px;}
input,textarea{width:100%;padding:12px 14px;border:1px solid #e6eef8;border-radius:10px;font-size:15px;transition:box-shadow .15s ease, transform .12s ease;}
input:focus, textarea:focus{box-shadow:0 6px 18px rgba(7,86,214,0.08);transform:translateY(-2px);outline:none;border-color:#cfe3ff;}
button{background:#0756d6;color:white;border:0;padding:12px;border-radius:10px;font-weight:700;cursor:pointer;transition:transform .14s ease, box-shadow .14s ease;}
button:hover{opacity:0.98;transform:translateY(-3px);box-shadow:0 8px 20px rgba(7,86,214,0.12)}

/* Footer */
footer{background:#06203a;color:#cfe6ff;padding:18px 0;text-align:center;margin-top:24px;}

/* In-view class to trigger animations */
.in-view{opacity:1;transform:none;}

/* Subtle float animation for logo */
@keyframes floaty {
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}
.logo-large.float{animation:floaty 4s ease-in-out infinite;}

/* Responsive rules */
@media (max-width:900px){
  .grid{grid-template-columns:1fr;}
  .brand h2{display:none}
  .navlinks{display:none}
  .hamburger{display:block}
  .logo-large{width:220px}
  h1{font-size:22px}
  .hero{min-height:55vh;padding:28px 12px}
  footer{font-size:14px;padding:16px}
}

@media (max-width:420px){
  .logo-large{width:180px}
  h1{font-size:20px}
  .lead{font-size:15px;padding:0 8px}
  .container{padding:12px}
}