:root{
  --bg:#281625;
  --bg-2:#1e101b;
  --panel:#24151b;
  --muted:#bdb0b6;
  --accent-pk:#ff3aa8;
  --accent-orange:#fb9f5d;
  --accent-azure:#6ef0ff;
  --accent-violet:#c9a6ff;
  --card:#2c1720;
  --card-2:#21121a;
}

*{box-sizing:border-box;font-family: "Kanit", sans-serif;  font-weight: 400;  font-style: normal;}
a{color:#fff;text-decoration:none;}
body{ color:#eee;
  background: linear-gradient(180deg,var(--bg) 0%, #2e1720 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* chips */
 .chip {
  display: inline-block;
  padding: 0.35rem 1rem;
  margin: 0 0.25rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--accent-pk);
  border-radius: 6px;
  transform: skew(-10deg);
  background: transparent;
  transition: all 0.2s ease;
}
 .chip span {
  display: inline-block;
  transform: skew(10deg);
}
 .chip:hover {
  border-color: rgba(255,255,255,0.25);
  color: var(--accent-pk);
}


@media only screen and (min-width: 320px) and (max-width: 991px) {
    .collapsey {
        display:block;
        max-height:0;
        overflow:hidden;
        transition:max-height 1.25s ease-in-out;
    }
    .showme {
        max-height:10em;
    }
}
header .navbar-nav{
    display:inline-block;
}
header li {
    list-style:none;
}




.btn-pk{ background:var(--accent-pk); color:#fff; padding:.35rem 1rem;  box-shadow:0 6px 18px rgba(255,58,153,0.12); }
.btn-pk:hover{border: 1px solid var(--accent-pk);}

/* Header */
.dl-header{ background:var(--bg-2); position:sticky; top:0; z-index:1030;border-bottom: 3px solid;border-image: linear-gradient(90deg, #f97500, #ff3eb7) 1; }
.container { max-width:1100px; }
.dl-logo{ font-weight:800; letter-spacing:2px; color:#fff; font-size:1.1rem; }
.dl-hamburger{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:#fff; padding:.35rem .6rem; border-radius:8px; }

.mobile-nav{ background:linear-gradient(180deg, rgba(30,16,20,.7), rgba(30,16,20,.85)); max-height:0; overflow:hidden; transition: max-height .28s ease; }
.mobile-nav.open{ max-height:300px; }
.mobile-link{ color:#fff; padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,0.02); text-decoration:none; }

/* Hero */
.hero{ padding-top:3rem; padding-bottom:4rem;

background: #ffffff;
background: radial-gradient(circle,rgba(66, 34, 61, 50%) 0%, rgba(20, 10, 18, 1) 50%);

position: relative;
overflow:hidden;
}
.hero .container{
z-index:2;
position: relative;}

.box {
      position: absolute;
      width: 20px;
      height: 20px;
      opacity: 0.9;
      animation: float 15s linear infinite alternate;
      z-index:1;
    }
/* Colours like your image */
    .box.white { background: #fff; }
    .box.orange { background: #ff6c00; }
    .box.pink { background: #ff4fcf; }

    /* Random sizes */
    .box.small { width: 10px; height: 10px; }
    .box.medium { width: 20px; height: 20px; }
    .box.large { width: 30px; height: 30px; }

    /* Floating animation (bouncing around) */
    @keyframes float {
      0%   { transform: translate(0, 0); }
      25%  { transform: translate(200px, 100px); }
      50%  { transform: translate(-150px, 200px); }
      75%  { transform: translate(100px, -150px); }
      100% { transform: translate(0, 0); }
    }

    /* Different speeds/delays per box */
    .box:nth-child(1) { top: 10%; left: 15%; animation-duration: 18s; }
    .box:nth-child(2) { top: 20%; left: 70%; animation-duration: 25s; }
    .box:nth-child(3) { top: 40%; left: 40%; animation-duration: 20s; }
    .box:nth-child(4) { top: 60%; left: 10%; animation-duration: 22s; }
    .box:nth-child(5) { top: 80%; left: 50%; animation-duration: 28s; }
    .box:nth-child(6) { top: 70%; left: 80%; animation-duration: 30s; }




.hero h1{ color:#fff; font-size:4rem; }
.hero p{ color:var(--accent-pk); display:block; }
.hero-card{ background:var(--bg-2); position:relative; color:#fff; min-height:140px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.hero-card h3{ color:var(--accent-orange); }
.hero .btn {background: linear-gradient(90deg, #f97500, #ff3eb7);border:none;}
.chip-outline{ display:inline-block; border:1px dashed rgba(255,255,255,0.06); padding:6px 10px; border-radius:8px; color:#fff; text-decoration:none; margin-top:.5rem; }

.gradbg{background: linear-gradient(90deg, #f97500, #ff3eb7);}
.gradbg .btn {background: #000;position:relative ;}

.gradbg .btn::after {
  content: "›";
  margin-left: 8px;
  font-size: 1.5em;position: absolute;
  right: 15px;
  bottom: 0px;
  font-size: 1.5rem;
}

.darkbg{ background:var(--bg-2); }





/* Topics */

/* Container for card + footer */
.topic {
  max-width: 320px;
  margin: 1rem auto;
}


.topic-card {
  background: #ff9b5c;
  border-radius: 8px 8px 0 0;
  transform: skew(-10deg);
  padding: 1.5rem 1rem;
  color: #191919;
}

.topic-card .topic-inner {
  transform: skew(10deg);
}

.ticks li{
  position: relative;
  padding-left: 50px; /* space for icon */
  margin-bottom: 12px;
  font-size: 18px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #ff9b5c;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ticks li::after {
  content: "";
  position: absolute;
  top:15%;
  left: 10px;
  transform: rotate(45deg);
  width: 10px;
  height: 18px;
  border-right: 3px solid #1a1a1a;
  border-bottom: 3px solid #1a1a1a;
}
.ticks.bg-azure li::before {    
  background-color: #7debff;
}
.ticks.bg-violet li::before {    
  background-color: #a385ff;
}
.ticks.bg-pink li::before {    
  background-color: var(--accent-pk);
}

.stack li .chip{border-color:#3b3037;min-width:105px;}

/* Footer box (black with orange border) */
.topic-footer {
  background: #1a0f14;
  border: 1px solid #f58c42;
  border-top: none;
  border-radius: 0 0 8px 8px;
  transform: skew(-10deg);
  padding: 0.75rem 1rem;
  text-align: center;
  width:100%;
  margin-left:-18px;
}

.topic-footer .footer-inner {
  transform: skew(10deg);
}

.topic-footer a {
  color: #ff9b5c;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

.topic-footer a:hover {
  color: #fff;
}


.topic.bg-azure .topic-card {
    background: #7debff;
  border: 1px solid #7debff;
}
.topic.bg-azure .topic-footer {
  border: 1px solid #7debff;
}
.topic.bg-azure .topic-footer a {
  color: #7debff;
}


.topic.bg-violet .topic-card {
    background: #a385ff;
  border: 1px solid #a385ff;
}
.topic.bg-violet .topic-footer {
  border: 1px solid #a385ff;
}
.topic.bg-violet .topic-footer a {
  color: #a385ff;
}


/* Featured guides */
.guide-card{ background:transparent; border:1px solid #757373; color:#fff; }
.guide-top{  background:linear-gradient(180deg,#fef6f2,#fbf5f0); border-radius:8px 8px 0 0;}

.bg-dark-3{ background:linear-gradient(180deg,#1b1014,#23141a); border-radius:0 0 8px 8px; border-top:1px solid rgba(255,255,255,0.02); }

.text-pk{ color:var(--accent-pk);  }
.text-orange{ color:#fef6f2; }
.text-azure{ color:#7debff; }
.text-violet{ color:#a385ff;  }

/* Promo */
.promo-card{ background:linear-gradient(180deg,#2b1822,#22141a); border:1px solid #757373; border-radius:20px; color:#fff; align-items:center; position:relative; }
.promo-card .thumb{ width:92px; height:92px; border-radius:14px; background:#444; flex-shrink:0; }
.promo-card .arrow a{ font-size:2rem; color:var(--accent-pk); text-decoration:none; }

/* Sections */
.bg-section{ background:linear-gradient(180deg,#2c1820,#201218); border-radius:26px; }
.adv-box{ background:linear-gradient(180deg,#2b1820,#22141a); padding:1rem; border-radius:14px; font-size:.95rem; color:#fff; font-weight:500; }
.tick{ color:var(--accent-pk); margin-right:.4rem; }

/* Who uses */
.badge-pill{ background:#2a1920; border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:.35rem .8rem; margin-right:.5rem; margin-bottom:.5rem; display:inline-block; font-size:.9rem; }

/* Footer */
.dl-footer{  font-size:.9rem; color:var(--muted); }
.footer-about{ max-width:300px; }

/* Back to top */
.to-top{ position:fixed; right:20px; bottom:20px; border-radius:50%; border: 0; width:46px; height:46px; background:#fff; color:var(--accent-pk); display:none; align-items:center; justify-content:center; }
.to-top.visible{ display:flex; }
.to-top:hover{ color:#fff;  background:var(--accent-pk);}