/* -------------------------------------------------
   tyylit.css – all visual styling
   ------------------------------------------------- */

/* ==== Root & colour variables ==================================== */
:root {
  --bg-primary: #0b0b0b;
  --bg-gradient-start: #1a1a2e;
  --bg-gradient-mid:   #16213e;
  --bg-gradient-end:   #0f3460;

  --accent-1:  #667eea; /* purple‑light */
  --accent-2:  #764ba2; /* purple‑dark */

  --secondary-1:#28e0e0;
  --secondary-2:#00bcd4;

  --text-primary:#f0f0f0;
  --text-muted:#ddd;
  --text-light:#ccc;
}

/* Global reset & box model */
*{margin:0;padding:0;box-sizing:border-box;}

html{
  /* Fluid base font size (14 px → 18 px) */
  font-size: clamp(14px,1vw + .5rem,18px);
}
body{
  font-family:'Roboto',sans-serif;
  background:#0b0b0b;                     /* fallback colour */
  background-image:
    linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-gradient-start) 100%);
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
}
a{ text-decoration:none; }

/* ==== Helper container (adds side padding on small screens) === */
.container{
  max-width:1200px;
  margin:auto;
  padding-inline:max(1rem,5%);
}

/* ====================== HERO SECTION =========================== */
.hero-section{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:
    linear-gradient(135deg,var(--bg-gradient-start) 0%,
                                 var(--bg-gradient-mid)   50%,
                                 var(--bg-gradient-end) 100%);
  overflow:hidden;
}
.hero-section::before{
  content:"";
  position:absolute;
  width:200%;height:200%;
  background:
    radial-gradient(circle,rgba(102,126,234,.1) 1px,transparent 1px);
  background-size:50px 50px;
  animation:moveBackground 20s linear infinite;
  opacity:.4;
}
@keyframes moveBackground{
  from{transform:translate(0,0);}
  to  {transform:translate(50px,50px);}
}

.hero-content{
  position:relative;z-index:2;
  max-width:900px;margin:auto;
  animation:fadeInUp 1s ease;
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px);}
  to  {opacity:1;transform:translateY(0);}
}

.hero-content h1{
  font-family:'Poppins',sans-serif;
  font-size: clamp(2.5rem,8vw,4rem);
  margin-bottom:.75rem;
  font-weight:700;
  text-shadow:2px 2px 20px rgba(0,0,0,.3);
  background:linear-gradient(45deg,#fff,#f0f0f0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-content p{
  font-size: clamp(.9rem,4vw,1.25rem);
  margin-bottom:2rem;
  text-shadow:1px 1px 10px rgba(0,0,0,.3);
  color:#fff;
}

/* ---- Scroll indicator (now a button) -------------------------- */
.scroll-indicator{
  position:absolute;bottom:30px;left:50%;
  transform:translateX(-50%);
  width:44px;height:44px;               /* ≥ 44 dp tap target */
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  animation:bounce 2s infinite;
}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0);}
  40%{transform:translateX(-50%) translateY(-20px);}
  60%{transform:translateX(-50%) translateY(-10px);}
}
.scroll-indicator svg{
  width:30px;height:30px;fill:#fff;
}

/* ====================== TAB NAVIGATION ======================== */
.tab-section{
  padding:4rem 0;
}
.tab-navigation{
  display:flex;justify-content:center;
  gap:.75rem;margin-bottom:2.5rem;
  flex-wrap:wrap;
}
.tab-btn{
  font-family:'Poppins',sans-serif;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.2);
  color:#fff;
  padding:.75rem 2rem;               /* big tap area */
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  border-radius:50px;
  transition:all .3s ease;
  position:relative;overflow:hidden;
  flex:1 0 auto;
  min-width:140px;
}
.tab-btn::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;
}
.tab-btn:hover::before{ left:100%; }
.tab-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(126,75,255,.4);
}
.tab-btn.active{
  background:
    linear-gradient(135deg,var(--accent-1),var(--accent-2));
  border-color:var(--accent-1);
  box-shadow:0 10px 40px rgba(126,75,255,.6);
  transform:scale(1.05);
}
.tab-btn:focus-visible{
  outline:3px solid var(--accent-1);
  outline-offset:2px;
}

/* -------------------- TAB CONTENT -------------------------- */
.tab-content{
  display:none;
  animation:fadeIn .6s ease;
}
.tab-content.active{display:block;}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px);}
  to  {opacity:1;transform:translateY(0);}
}

/* -------------------- CONTENT WRAPPER ---------------------- */
.content-wrapper{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  border-radius:20px;
  padding:2rem;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.content-wrapper h2{
  font-family:'Poppins',sans-serif;
  font-size: clamp(2rem,6vw,2.5rem);
  margin-bottom:1rem;
  background:
    linear-gradient(135deg,var(--accent-1),var(--accent-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.content-wrapper p{
  font-size:.95rem;
  line-height:1.8;
  margin-bottom:1rem;
  color:#ddd;
}

/* -------------------- FEATURE CARDS ----------------------- */
.feature-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.5rem;
  margin:2rem 0;
}
@media (min-width:480px) and (max-width:768px){
  .feature-cards{grid-template-columns:repeat(2,1fr);}
}

.feature-card{
  background:rgba(0,0,0,.6);
  padding:1.5rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.05);
  transition:.3s ease;
  text-align:center;
}
.feature-card:hover{
  transform:translateY(-5px);
  background:rgba(0,0,0,.8);
  border-color:rgba(255,255,255,.1);
}
.feature-card h3{
  font-family:'Poppins',sans-serif;
  font-size:1.2rem;
  margin-bottom:.75rem;
  color:#fff;
  font-weight:600;
}
.feature-card p{
  font-size:.85rem;
  color:#aaa;
  line-height:1.6;
}

/* -------------------- ACTION LINKS ----------------------- */
.action-links{
  display:flex;gap:1rem;
  justify-content:center;flex-wrap:wrap;
  margin-top:2rem;
}
.action-link{
  display:inline-block;
  background:
    linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#fff;
  padding:.75rem 2rem;
  border-radius:50px;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  transition:.3s ease;
  box-shadow:0 10px 30px rgba(126,75,255,.3);
}
.action-link:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(126,75,255,.5);
}
.action-link.secondary{
  background:
    linear-gradient(135deg,var(--secondary-1),var(--secondary-2));
}

/* -------------------- FOOTER -------------------------------- */
footer{
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
  text-align:center;
  padding:3rem 1rem;
  color:#ccc;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:4rem;
}
footer a{
  color:var(--accent-1);
  transition:.2s ease;
}
footer a:hover{color:var(--accent-2);}
footer p{margin:.5rem 0;}

/* -------------------- REDUCED MOTION ----------------------- */
@media (prefers-reduced-motion: reduce){
  .hero-section::before,
  .scroll-indicator,
  .tab-btn::before,
  .feature-card,
  .action-link{
    animation:none;
    transition:none;
  }
}

/* --------- LIGHT‑THEME FALLBACK for users who prefer light ---- */
@media (prefers-color-scheme:light){
  :root{
    --bg-primary:#fafafa;
    --bg-gradient-start:#e0e7ff;
    --bg-gradient-mid:#cfd9ff;
    --bg-gradient-end:#b8c5ff;

    --text-primary:#111;
    --text-muted:#333;
    --text-light:#555;
  }
}