/* styles.css
   iKnow landing page - Bootstrap 5 + custom CSS
   Mobile-first responsive layout, rounded cards, pastel animations
*/

/* Basic variables */
:root{
  --primary:#2A2C77;      /* deep blue */
  --secondary: #27B3FF;
  --accent:#00c48c;       /* green CTA */
  --muted:#6c7a89;
  --bg:#f6fbff;
  --card:#ffffff;
  --glass-border: rgba(10, 22, 40, 0.04);
  --max-width:1200px;
  --radius:18px;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Page background */
body{
  background:var(--bg);
  color:#0f1724;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.logo { width: 180px; }
/* Header */
.site-header{
  /*height:90px;*/
  z-index:1050;
}
.site-header .brand{
  text-decoration:none;
  color:var(--primary);
  font-weight:700;
  font-size:1.125rem;
}
.logo-circle{
  width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#5ea1ff);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;
}
.logo-circle.small{width:36px;height:36px;border-radius:8px}
.site-header .nav-link { color:var(--muted); font-weight:600; padding:0.35rem .6rem; border-radius:8px; text-decoration:none; }
.site-header .nav-link:hover { background:rgba(41,98,255,0.06); color:var(--primary); }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:90px 0 0 0; background:var(--bg); z-index:1049; display:none;
}
.mobile-menu-inner{padding:1.5rem}
.mobile-menu .btn-close{float:right}

/* Hero */
.text-primary {
    color: var(--primary);
}
#home h1 { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#home p  { color: rgba(255,255,255,0.9); }

h1 {
    font-size: 2.8rem;
    line-height: 1.3;
}
h2 {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--primary);
}
.semi-para {
    color: var(--primary);
    font-size: 1.5rem;
    line-height: 2rem;
}
.hero-section{
  min-height:680px;
  padding-top:96px;
  padding-bottom:64px;
  position:relative;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&s=0f8b9a1d6e50b9a5f4f2b2e9b2f70f87');
  background-size:cover;
  background-position:center;
  filter: contrast(95%) saturate(120%) brightness(100%);
  opacity:0.9;
  z-index:-2;
}
.hero-section::after{
  content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,99,255,0.28), rgba(255,255,255,0.1));
  mix-blend-mode:overlay; z-index:-1;
}

.hero-title{
  color:#00204a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  font-size:clamp(1.6rem, 4vw, 2.6rem);
}
.lead{color:rgba(0,0,0,0.6);}

/* Video card */
.video-card{
  width:360px; max-width:100%; height:220px; background:linear-gradient(180deg,#0d47a1,#2962ff); border-radius:16px; overflow:hidden;
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.video-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.85}
.play-center{width:66px;height:66px;background:rgba(255,255,255,0.12); color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;z-index:2;backdrop-filter: blur(2px)}
.video-caption{position:relative; z-index:2;}

/* floating dots right side */
.float-actions{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--primary);margin:12px 0;opacity:0.85}
.dot-2{background:var(--accent); width:14px; height:14px}

/* stat cards */
.stat-card{min-width:96px;border-radius:12px}

/* Feature boxes */
.feature-box{border:1px solid var(--glass-border)}

/* Feature cards */
.feature-card{border-radius:14px}

/* Steps */
.step-card{border:1px solid var(--glass-border)}
.step-num{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#e0f7fa,#b2ebf2);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#00796b;margin:0 auto}

/* Age cards */
.age-card{border:1px solid rgba(10,22,40,0.04)}
.age-header{font-weight:700}

/* small cards */
.small-card{border:1px solid var(--glass-border)}
.reward-cta{border:1px solid rgba(10,22,40,0.04)}

/* register mini step */
.mini-step{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e8f8f2,#d1f3e9);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary);margin:0 auto}

/* contact form */
.contact-info{border:1px solid var(--glass-border)}

/* footer */
.site-footer{border-top:1px solid rgba(10,22,40,0.04)}

/* responsive tweaks */
@media (max-width:991.98px){
  .hero-section{min-height:820px;padding-top:80px;padding-bottom:48px}
  .hero-bg{background-position: center 20%}
}

/* mobile menu show */
.mobile-menu.show{display:block}

/* slight animations */
.feature-card, .age-card, .step-card, .small-card { transition:transform .24s cubic-bezier(.2,.9,.3,1); }
.feature-card:hover, .age-card:hover, .step-card:hover, .small-card:hover { transform: translateY(-6px); }

/* utility tweaks */
a { text-decoration:none; }

.card:hover {
  transform: translateY(-6px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.08) !important;
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, hsl(0 0% 100%) , hsl(198 73% 95%));
}
.bg-card {
    background-color: hsl(0 0% 100%);
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

/* rounded radius consistent with rest of design */
.rounded-4 { border-radius: 1rem !important; }

/* subtle lift and transition */
.step-card {
  transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease;
  background: linear-gradient(180deg,#ffffff,#fbfcfe);
  border-color: rgba(13,41,80,0.08);
}
.step-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,0.08); }

/* smaller rounded icon container */
.rounded-2 { border-radius: 0.5rem !important; }

/* step number sizing on small screens */
.step-number { font-size: 1.25rem; }

/* arrow styling tweak (you can replace → with an SVG if preferred) */
@media (max-width: 767.98px) {
  /* hide arrows on small screens already handled with d-none d-md-flex */
}

/* badge appearance (pill style already provided by Bootstrap) */
.badge {
  font-size: .85rem;
  padding-top: .35rem;
  padding-bottom: .35rem;
}

/* small check circle sizing */
.card .bi-check-lg { font-size: .78rem; }

/* responsive tweaks if you want tighter spacing on mobile */
@media (max-width: 576px) {
  .card .p-4 { padding: 1rem !important; }
}

/* gentle float animation for icon bubbles */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
.animate-float { animation: float 5s ease-in-out infinite; }

/* card hover lift */
.rank-card, .gift-card {
  transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease;
  background: #fff;
}
.rank-card:hover, .gift-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,0.06); }

/* circular icon styles */
.icon-bubble { box-shadow: 0 12px 30px rgba(13,41,80,0.06); }
.gift-bubble { box-shadow: 0 10px 24px rgba(13,41,80,0.12); }

/* responsive tweaks */
@media (max-width: 767.98px) {
  .icon-bubble, .gift-bubble { width:64px !important; height:64px !important; }
}

.register-step {
  transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s ease;
  background:#fff;
}
.register-step:hover {
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(2,6,23,0.06);
}

/* floating feel for icons */
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
.register-step .rounded-circle { animation:float 5s ease-in-out infinite; }