/* ============================================================
   ICE CREAM OS — landing synthwave remix on BOOTSTRA.386
   ============================================================ */

:root{
  --sw-bg:      #12033a;
  --sw-bg2:     #0a0223;
  --sw-panel:   #180441;
  --sw-magenta: #ff2a7f;
  --sw-pink:    #ff7ac8;
  --sw-cyan:    #21f7ff;
  --sw-purple:  #8a2bff;
  --sw-yellow:  #ffe94a;
  --sw-blue:    #2f63ff;
}

html, body{
  background: var(--sw-bg);
  color: var(--sw-cyan);
  -webkit-font-smoothing: none;
  font-smooth: never;
  scroll-behavior: smooth;
}

/* CRT scanlines overlay */
body::after{
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.16) 3px,
    rgba(0,0,0,0) 4px
  );
}

a{ color: var(--sw-cyan); }
a:hover{ color: var(--sw-yellow); }

/* ============ NAVBAR (CSS-only, sin JS) ============ */
.topnav{
  position: sticky; top:0; z-index:1000;
  background: linear-gradient(90deg, var(--sw-purple), var(--sw-blue));
  border-bottom: 2px solid var(--sw-cyan);
  display:flex; align-items:center; flex-wrap:wrap;
  padding: 8px 16px;
}
.topnav .brand{
  color:#fff; font-weight:bold;
  display:flex; align-items:center; gap:8px;
  text-shadow: 0 0 6px #000;
  margin-right:auto;
}
.topnav .brand img{ width:28px; height:28px; object-fit:contain; }
.topnav .nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:2px;
}
.topnav .nav-links a{
  color:#fff; font-size:14px;
  padding:8px 12px; display:block;
  text-decoration:none;
}
.topnav .nav-links a:hover{ background: var(--sw-magenta); }
.topnav .nav-links a.active{ background: var(--sw-magenta); }
.topnav .cart{ color:#fff; font-size:16px; margin-left:6px; text-decoration:none; }
.topnav .cart:hover{ color: var(--sw-yellow); }

/* pure CSS hamburger toggle */
.menu-toggle{ display:none; }
.menu-btn{
  display:none;
  color:#fff; font-size:22px; cursor:pointer;
  padding:2px 10px; user-select:none;
}
.menu-btn:hover{ background: var(--sw-magenta); }

@media (max-width: 860px){
  .menu-btn{ display:block; }
  .topnav .nav-links{
    display:none; width:100%;
    flex-direction:column; align-items:stretch;
    padding-top:6px;
  }
  .topnav .nav-links a{ padding:10px 12px; }
  .topnav .cart{ display:none; }
  .menu-toggle:checked ~ .nav-links{ display:flex; }
}

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 80px 20px;
  background:
    linear-gradient(to bottom, var(--sw-bg2), var(--sw-bg) 60%, #3a0861 100%);
  overflow:hidden;
}
/* flat synthwave perspective grid */
.hero::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:45%;
  background: repeating-linear-gradient(to top,
      transparent 0 14px,
      rgba(255,42,127,.28) 14px 15px,
      transparent 15px 16px);
  background-size:100% 100%;
  transform: perspective(300px) rotateX(62deg) scale(1.7);
  transform-origin: bottom center;
  opacity:.5;
}
.hero-logo{
  width:160px; height:160px; object-fit:contain;
  filter: drop-shadow(0 0 18px rgba(255,255,0,.55)) drop-shadow(0 0 40px rgba(255,42,127,.4));
  margin-bottom:10px;
}
.hero h1{
  color:#fff;
  font-size: clamp(34px, 6vw, 72px);
  text-shadow: 0 0 12px var(--sw-magenta), 0 0 30px var(--sw-purple);
  letter-spacing:2px;
}
.hero .tagline{
  color: var(--sw-cyan);
  font-size: clamp(14px, 2.4vw, 22px);
  text-shadow: 0 0 10px var(--sw-cyan);
  margin: 8px 0 26px;
}
.hero .lead{ color: var(--sw-pink); }

/* ============ SECTIONS ============ */
section{ padding: 60px 0; }
.section-title{
  color: var(--sw-yellow);
  text-shadow: 0 0 8px var(--sw-yellow);
  font-size:26px;
  margin-bottom: 6px;
}
.section-sub{ color: var(--sw-pink); margin-bottom: 30px; }

/* feature cards */
.feature-card{
  background: var(--sw-panel);
  border:1px solid var(--sw-purple);
  padding: 22px;
  height:100%;
  box-shadow: 0 0 14px rgba(138,43,255,.25);
  transition: transform .1s;
}
.feature-card:hover{
  transform: translateY(-3px);
  border-color: var(--sw-magenta);
  box-shadow: 0 0 22px rgba(255,42,127,.4);
}
.feature-card .icon{ font-size:34px; display:block; margin-bottom:10px; }
.feature-card h3{ color: var(--sw-magenta); text-shadow:0 0 6px var(--sw-magenta); font-size:18px; }
.feature-card p{ margin:0; font-size:14px; line-height:18px; }

/* tables */
.table-bordered th{ color: var(--sw-yellow); }
.table-bordered, .table-bordered td, .table-bordered th{ border-color: rgba(33,247,255,.4); }
.table-bordered td{ color: var(--sw-cyan); }

/* download cards */
.dl-card{
  background: var(--sw-panel);
  border:1px solid var(--sw-purple);
  padding:18px; height:100%;
  text-align:center;
}
.dl-card .dl-ico{ font-size:40px; }
.dl-card h3{ color: var(--sw-magenta); font-size:17px; margin:10px 0 4px; }
.dl-card small{ color: var(--sw-pink); }

/* product cards (shop) */
.product-card{
  background: var(--sw-panel);
  border:1px solid var(--sw-purple);
  padding:18px;
  display:flex; flex-direction:column; gap:10px;
  height:100%;
  transition: transform .1s, border-color .1s;
}
.product-card:hover{
  border-color: var(--sw-cyan);
  box-shadow: 0 0 18px rgba(33,247,255,.3);
}
.product-card .p-ico{
  font-size:46px;
  filter: drop-shadow(0 0 8px rgba(33,247,255,.5));
}
.product-card h3{ color: var(--sw-cyan); font-size:16px; margin:0; }
.product-card p{ font-size:13px; line-height:16px; margin:0; flex:1; }
.product-card .price{ color: var(--sw-yellow); font-size:18px; text-shadow:0 0 6px var(--sw-yellow); }
.btn-add{
  background: var(--sw-magenta);
  color:#fff; border:1px solid var(--sw-magenta);
  font-size:13px;
}
.btn-add:hover{ background: var(--sw-pink); border-color: var(--sw-pink); color:#000; box-shadow:0 0 12px var(--sw-magenta); }
.category-tag{
  display:inline-block; align-self:flex-start;
  background: var(--sw-purple); color:#fff;
  font-size:11px; padding:2px 8px;
  text-shadow:0 0 3px #000;
}

/* blog cards */
.blog-card{
  background: var(--sw-panel);
  border:1px solid var(--sw-purple);
  padding:20px; height:100%;
}
.blog-card .date{ color: var(--sw-yellow); font-size:12px; }
.blog-card h3{ color: var(--sw-cyan); font-size:18px; margin:6px 0; }
.blog-card p{ font-size:14px; line-height:18px; }
.blog-card a{ color: var(--sw-pink); }

/* ============ BUTTONS / FORMS ============ */
.btn-primary{
  background: var(--sw-magenta);
  border:1px solid var(--sw-magenta);
  color:#fff; text-shadow:0 0 4px #000;
}
.btn-primary:hover{
  background: var(--sw-pink); border-color: var(--sw-pink); color:#000;
  box-shadow:0 0 12px var(--sw-magenta);
}
.btn-outline-light{ color: var(--sw-cyan); border-color: var(--sw-cyan); }
.btn-outline-light:hover{ background: var(--sw-cyan); color:#000; }
.form-control{
  background:#0d0230; color: var(--sw-cyan);
  border:1px solid var(--sw-cyan);
}
.form-control:focus{ background:#0d0230; color:#fff; border-color: var(--sw-yellow); box-shadow:0 0 8px var(--sw-yellow); }
label{ color: var(--sw-pink); font-size:12px; }

/* ============ FOOTER ============ */
footer{
  border-top:2px solid var(--sw-cyan);
  background: linear-gradient(90deg, var(--sw-purple), var(--sw-blue));
  color:#fff;
  padding:20px 0;
  font-size:13px;
  text-shadow:0 0 4px #000;
}
footer a{ color: var(--sw-yellow); }

.mag{ color: var(--sw-magenta); text-shadow:0 0 6px var(--sw-magenta); }
.cyn{ color: var(--sw-cyan); }
.pink{ color: var(--sw-pink); }

/* scrollbars retro */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#0d0230; }
::-webkit-scrollbar-thumb{ background: var(--sw-magenta); border:2px solid #0d0230; }
::-webkit-scrollbar-thumb:hover{ background: var(--sw-pink); }