/* Start custom CSS *//* ============================================================
   TDB SIDEMOUNT — "Technical Blueprint" Theme
   Typography: Rajdhani (angular techy display) + Instrument Sans (clean body)
   Palette: Gunmetal + Electric Cyan + Steel + Warm Grey
   ============================================================ */

/* --- VARIABLES --- */
.sm-page{
  --sm-gun:#0C1620;
  --sm-steel:#1A2636;
  --sm-iron:#263544;
  --sm-plate:#344858;

  --sm-cyan:#00CFE8;
  --sm-cyan-dark:#00A8BD;
  --sm-electric:#00F0FF;
  --sm-teal:#2EC4B6;
  --sm-amber:#F0A500;

  --sm-white:#FFFFFF;
  --sm-off:#F4F6F8;
  --sm-light:#E2E7EC;
  --sm-text:#3A4856;
  --sm-text-muted:#6B7D8D;

  --font-head:'Rajdhani',sans-serif;
  --font-body:'Instrument Sans',sans-serif;

  --sp-xs:8px;--sp-sm:16px;--sp-md:24px;--sp-lg:40px;--sp-xl:64px;--sp-2xl:96px;

  font-family:var(--font-body);font-weight:400;color:var(--sm-text);line-height:1.7;
  margin:0;padding:0;
}
.sm-page *,.sm-page *::before,.sm-page *::after{box-sizing:border-box}
.sm-page h1,.sm-page h2,.sm-page h3,.sm-page h4{font-family:var(--font-head);margin:0;line-height:1.05}
.sm-page p{margin:0}
.sm-page img{max-width:100%;display:block}
.sm-page a{text-decoration:none}
.sm-wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* --- HERO --- */
.sm-hero{
  position:relative;min-height:100vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--sm-gun);
  width:100vw;left:50%;margin-left:-50vw;
  margin-top:-40px;padding-top:40px;
}
.sm-hero__bg{position:absolute;inset:0}
.sm-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.sm-hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(12,22,32,.2) 0%,rgba(12,22,32,.55) 40%,rgba(12,22,32,.9) 75%,rgba(12,22,32,.98) 100%),
    linear-gradient(135deg,rgba(0,207,232,.06) 0%,transparent 40%);
}

/* Blueprint grid background */
.sm-hero__blueprint{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(rgba(0,207,232,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,207,232,.03) 1px,transparent 1px);
  background-size:60px 60px;
  animation:smBlueprintDrift 20s linear infinite;
}
@keyframes smBlueprintDrift{
  0%{background-position:0 0}
  100%{background-position:60px 60px}
}

/* Crosshair decoration */
.sm-hero__crosshair{
  position:absolute;top:18%;right:15%;width:160px;height:160px;
  pointer-events:none;z-index:1;
}
.sm-xh{position:absolute;background:rgba(0,207,232,.12)}
.sm-xh--h{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%)}
.sm-xh--v{left:50%;top:0;height:100%;width:1px;transform:translateX(-50%)}
.sm-xh--ring{
  inset:20px;border-radius:50%;background:none;
  border:1px solid rgba(0,207,232,.1);
  animation:smXhSpin 12s linear infinite;
}
@keyframes smXhSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Fish */
.sm-fish{position:absolute;pointer-events:none;z-index:1;color:rgba(0,207,232,.04)}
.sm-fish--1{width:32px;top:38%;animation:smSwimR 24s linear infinite}
.sm-fish--2{width:22px;top:58%;animation:smSwimL 30s linear infinite;animation-delay:5s}
@keyframes smSwimR{0%{left:-4%}100%{left:104%}}
@keyframes smSwimL{0%{left:104%;transform:scaleX(-1)}100%{left:-4%;transform:scaleX(-1)}}

/* Bubbles */
.sm-bubbles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.sm-bubbles i{
  position:absolute;bottom:-10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(0,207,232,.1),rgba(0,207,232,.02));
  border:1px solid rgba(0,207,232,.06);
  animation:smBubUp linear infinite;
}
.sm-bubbles i:nth-child(1){width:5px;height:5px;left:8%;animation-duration:15s}
.sm-bubbles i:nth-child(2){width:10px;height:10px;left:18%;animation-duration:19s;animation-delay:2s}
.sm-bubbles i:nth-child(3){width:4px;height:4px;left:30%;animation-duration:12s;animation-delay:6s}
.sm-bubbles i:nth-child(4){width:14px;height:14px;left:42%;animation-duration:22s;animation-delay:1s;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.06),transparent);border-color:rgba(255,255,255,.04)}
.sm-bubbles i:nth-child(5){width:7px;height:7px;left:53%;animation-duration:16s;animation-delay:4s}
.sm-bubbles i:nth-child(6){width:3px;height:3px;left:65%;animation-duration:11s;animation-delay:8s}
.sm-bubbles i:nth-child(7){width:18px;height:18px;left:72%;animation-duration:24s;animation-delay:3s;
  background:radial-gradient(circle at 35% 35%,rgba(0,207,232,.06),transparent);border-color:rgba(0,207,232,.04)}
.sm-bubbles i:nth-child(8){width:6px;height:6px;left:82%;animation-duration:14s;animation-delay:7s}
.sm-bubbles i:nth-child(9){width:12px;height:12px;left:90%;animation-duration:20s;animation-delay:0s}
.sm-bubbles i:nth-child(10){width:8px;height:8px;left:25%;animation-duration:17s;animation-delay:9s}
.sm-bubbles i:nth-child(11){width:4px;height:4px;left:55%;animation-duration:10s;animation-delay:3.5s}
.sm-bubbles i:nth-child(12){width:16px;height:16px;left:38%;animation-duration:26s;animation-delay:5.5s;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.04),transparent);border-color:rgba(255,255,255,.03)}
.sm-bubbles i:nth-child(13){width:6px;height:6px;left:78%;animation-duration:13s;animation-delay:1.5s}
.sm-bubbles i:nth-child(14){width:9px;height:9px;left:48%;animation-duration:18s;animation-delay:6.5s}
@keyframes smBubUp{
  0%{transform:translateY(0) translateX(0) scale(0);opacity:0}
  10%{opacity:.5;transform:translateY(-8vh) translateX(3px) scale(1)}
  50%{opacity:.25;transform:translateY(-50vh) translateX(-6px) scale(.9)}
  100%{transform:translateY(-110vh) translateX(5px) scale(.5);opacity:0}
}

@media(max-width:768px){
  .sm-fish,.sm-hero__crosshair,.sm-hero__blueprint,.sm-bubbles{display:none}
}

/* Hero content */
.sm-hero__content{position:relative;z-index:10;padding-top:clamp(140px,22vh,220px);padding-bottom:clamp(60px,10vh,120px)}
.sm-hero__tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-size:.85rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sm-cyan);
  margin-bottom:var(--sp-md);
}
.sm-hero__tag-dot{
  width:8px;height:8px;background:var(--sm-cyan);border-radius:50%;
  animation:smDotPulse 2s ease-in-out infinite;
}
@keyframes smDotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.sm-hero h1{
  font-size:clamp(3rem,8vw,6rem);font-weight:700;
  color:var(--sm-white);text-transform:uppercase;letter-spacing:.03em;
  margin-bottom:var(--sp-md);
}
.sm-hero h1 span{color:var(--sm-cyan)}

.sm-hero__sub{
  font-size:clamp(.95rem,1.5vw,1.1rem);color:rgba(255,255,255,.65);
  max-width:560px;font-weight:400;margin-bottom:var(--sp-lg);line-height:1.7;
}

.sm-hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:var(--sp-xl)}

/* Buttons */
.sm-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:.95rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:15px 34px;cursor:pointer;border:none;
  transition:all .35s cubic-bezier(.23,1,.32,1);
}
.sm-btn--cyan{background:var(--sm-cyan);color:var(--sm-gun)}
.sm-btn--cyan:hover{
  background:var(--sm-electric);transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(0,207,232,.3);
}
.sm-btn--wire{
  background:transparent;color:var(--sm-white);
  border:1px solid rgba(255,255,255,.25);
}
.sm-btn--wire:hover{
  border-color:var(--sm-cyan);color:var(--sm-cyan);
  transform:translateY(-3px);
}
.sm-btn--white{background:var(--sm-white);color:var(--sm-gun)}
.sm-btn--white:hover{
  background:var(--sm-off);transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(255,255,255,.12);
}

/* Hero stats bar */
.sm-hero__bar{
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid rgba(0,207,232,.12);max-width:680px;
  background:rgba(0,207,232,.04);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.sm-hero__bar-item{
  flex:1;min-width:130px;padding:16px 22px;text-align:center;
  border-right:1px solid rgba(0,207,232,.08);
}
.sm-hero__bar-item:last-child{border-right:none}
.sm-hero__bar-val{
  display:block;font-family:var(--font-head);font-size:1.1rem;font-weight:700;
  color:var(--sm-cyan);letter-spacing:.04em;text-transform:uppercase;
}
.sm-hero__bar-label{
  display:block;font-size:.62rem;color:rgba(255,255,255,.4);
  letter-spacing:.08em;text-transform:uppercase;margin-top:3px;
}

/* --- SECTIONS --- */
.sm-section{
  padding:var(--sp-2xl) 0;position:relative;overflow:hidden;
  width:100vw;left:50%;margin-left:-50vw;
}
.sm-section--white{background:var(--sm-white)}
.sm-section--off{background:var(--sm-off)}
.sm-section--dark{background:var(--sm-gun)}
.sm-section--steel{background:var(--sm-steel)}

.sm-section-head{margin-bottom:var(--sp-xl)}
.sm-section-head h2{
  font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:var(--sm-gun);
}
.sm-section-head--light h2{color:var(--sm-white)}

.sm-label{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-size:.78rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sm-teal);
  margin-bottom:var(--sp-sm);
}
.sm-label::before{content:'';width:24px;height:2px;background:var(--sm-teal)}
.sm-label--cyan{color:var(--sm-cyan)}
.sm-label--cyan::before{background:var(--sm-cyan)}

/* --- OVERVIEW --- */
.sm-overview__grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,5vw,80px);
  align-items:start;
}
.sm-overview__text p{margin-bottom:var(--sp-sm);font-size:1.02rem;color:var(--sm-text)}
.sm-overview__text strong{color:var(--sm-gun);font-weight:600}

.sm-overview__benefits h3{
  font-size:1.1rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--sm-gun);margin-bottom:var(--sp-md);
}
.sm-benefit{
  display:flex;gap:16px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--sm-light);
  transition:all .3s ease;
}
.sm-benefit:last-child{border-bottom:none}
.sm-benefit:hover{padding-left:8px}
.sm-benefit__marker{
  font-family:var(--font-head);font-size:.8rem;font-weight:700;
  color:var(--sm-cyan);min-width:28px;padding-top:2px;
}
.sm-benefit strong{display:block;font-size:.92rem;font-weight:600;color:var(--sm-gun);margin-bottom:2px}
.sm-benefit p{font-size:.82rem;color:var(--sm-text-muted);font-weight:400;line-height:1.5}

/* --- WHO --- */
.sm-who__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sm-who__card{
  padding:28px 24px;background:var(--sm-white);border:1px solid var(--sm-light);
  transition:all .35s ease;
}
.sm-who__card:hover{
  border-color:var(--sm-cyan);transform:translateY(-4px);
  box-shadow:0 10px 32px rgba(0,0,0,.06);
}
.sm-who__icon{font-size:2rem;display:block;margin-bottom:var(--sp-sm)}
.sm-who__card h3{
  font-size:1.05rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--sm-gun);margin-bottom:8px;
}
.sm-who__card p{font-size:.85rem;color:var(--sm-text-muted);font-weight:400;line-height:1.6}

/* --- LEARN (CURRICULUM) --- */
.sm-learn__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.sm-learn__card{
  padding:32px 28px;
  background:rgba(0,207,232,.04);border:1px solid rgba(0,207,232,.08);
  position:relative;overflow:hidden;
  transition:all .35s ease;
}
.sm-learn__card:hover{
  border-color:rgba(0,207,232,.2);transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.15);
}
.sm-learn__card-num{
  font-family:var(--font-head);font-size:3.5rem;font-weight:700;
  color:rgba(0,207,232,.1);line-height:1;margin-bottom:8px;
}
.sm-learn__card h3{
  font-size:1.2rem;font-weight:700;color:var(--sm-white);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:var(--sp-xs);
}
.sm-learn__card p{font-size:.9rem;color:rgba(255,255,255,.6);font-weight:400;line-height:1.65;margin-bottom:var(--sp-sm)}
.sm-learn__tags{display:flex;flex-wrap:wrap;gap:6px}
.sm-learn__tags span{
  padding:4px 12px;font-size:.65rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sm-cyan);
  border:1px solid rgba(0,207,232,.15);
  transition:all .3s ease;
}
.sm-learn__tags span:hover{background:rgba(0,207,232,.1);border-color:var(--sm-cyan)}

/* --- STRUCTURE --- */
.sm-structure__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:var(--sp-lg)}
.sm-struct-card{
  padding:32px 28px;background:var(--sm-off);border:1px solid var(--sm-light);
  border-top:3px solid var(--sm-cyan);
  transition:all .35s ease;
}
.sm-struct-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.06)}
.sm-struct-card__day{
  font-family:var(--font-head);font-size:.8rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sm-cyan);
  margin-bottom:var(--sp-xs);
}
.sm-struct-card h3{
  font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--sm-gun);margin-bottom:8px;
}
.sm-struct-card p{font-size:.88rem;color:var(--sm-text-muted);font-weight:400;line-height:1.65}

.sm-structure__notes{display:flex;flex-wrap:wrap;gap:12px 28px}
.sm-struct-note{
  display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--sm-text-muted);
}
.sm-struct-note span{color:var(--sm-teal);font-weight:700;font-size:1rem}

/* --- INCLUDES --- */
.sm-inc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sm-inc-card{
  display:flex;gap:14px;align-items:flex-start;
  padding:22px;background:var(--sm-white);border:1px solid var(--sm-light);
  transition:all .35s ease;
}
.sm-inc-card:hover{border-color:var(--sm-cyan);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.05)}
.sm-inc-card>span{font-size:1.5rem;flex-shrink:0}
.sm-inc-card strong{
  display:block;font-family:var(--font-head);font-size:.9rem;font-weight:700;
  color:var(--sm-gun);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;
}
.sm-inc-card p{font-size:.8rem;color:var(--sm-text-muted);font-weight:400;line-height:1.4}

/* --- WHY TIOMAN --- */
.sm-why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sm-why__card{
  padding:28px 24px;
  background:rgba(0,207,232,.04);border:1px solid rgba(0,207,232,.08);
  transition:all .35s ease;
}
.sm-why__card:hover{border-color:rgba(0,207,232,.2);transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.12)}
.sm-why__card h3{
  font-size:1.05rem;font-weight:700;color:var(--sm-white);
  margin-bottom:8px;
}
.sm-why__card p{font-size:.85rem;color:rgba(255,255,255,.55);font-weight:400;line-height:1.6}

/* --- FAQ --- */
.sm-faq__list{max-width:800px}
.sm-faq__item{border-bottom:1px solid var(--sm-light)}
.sm-faq__item:first-child{border-top:1px solid var(--sm-light)}
.sm-faq__q{
  display:flex;align-items:center;gap:16px;
  width:100%;padding:20px 0;cursor:pointer;
  font-family:var(--font-body);font-size:1rem;font-weight:500;
  color:var(--sm-gun);list-style:none;
  transition:all .3s ease;
}
.sm-faq__q::-webkit-details-marker{display:none}
.sm-faq__q::marker{display:none;content:''}
.sm-faq__q:hover{padding-left:8px;color:var(--sm-cyan)}

.sm-faq__plus{
  flex-shrink:0;width:26px;height:26px;position:relative;
  border:2px solid var(--sm-cyan);
  transition:all .35s ease;
}
.sm-faq__plus::before,.sm-faq__plus::after{
  content:'';position:absolute;top:50%;left:50%;
  background:var(--sm-cyan);transition:all .35s ease;
}
.sm-faq__plus::before{width:10px;height:2px;transform:translate(-50%,-50%)}
.sm-faq__plus::after{width:2px;height:10px;transform:translate(-50%,-50%)}

.sm-faq__item[open] .sm-faq__plus{background:var(--sm-cyan);transform:rotate(45deg)}
.sm-faq__item[open] .sm-faq__plus::before,
.sm-faq__item[open] .sm-faq__plus::after{background:var(--sm-gun)}
.sm-faq__item[open] .sm-faq__q{color:var(--sm-cyan)}

.sm-faq__a{padding:0 0 20px 42px}
.sm-faq__a p{font-size:.92rem;color:var(--sm-text-muted);font-weight:400;line-height:1.75}

/* --- CTA --- */
.sm-cta{
  background:linear-gradient(160deg,var(--sm-steel),var(--sm-cyan-dark));
  text-align:center;position:relative;overflow:hidden;
  padding:var(--sp-2xl) 0 0 !important;
}
.sm-cta h2{
  font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700;
  text-transform:uppercase;color:var(--sm-white);margin-bottom:var(--sp-sm);
}
.sm-cta p{
  font-size:1.05rem;color:rgba(255,255,255,.7);max-width:540px;
  margin:0 auto var(--sp-lg);font-weight:400;
}
.sm-cta__fade{
  height:120px;
  background:linear-gradient(to bottom,transparent,#ffffff);
  margin-top:var(--sp-2xl);
}

/* --- RESPONSIVE --- */
@media(max-width:1024px){
  .sm-overview__grid{grid-template-columns:1fr}
  .sm-who__grid{grid-template-columns:repeat(2,1fr)}
  .sm-learn__grid{grid-template-columns:1fr}
  .sm-why__grid{grid-template-columns:repeat(2,1fr)}
  .sm-inc__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .sm-hero{min-height:auto;padding-top:60px}
  .sm-hero__bar{flex-direction:column}
  .sm-hero__bar-item{border-right:none;border-bottom:1px solid rgba(0,207,232,.06)}
  .sm-hero__bar-item:last-child{border-bottom:none}
  .sm-hero__actions{flex-direction:column;align-items:flex-start}
  .sm-section{padding:var(--sp-xl) 0}
  .sm-who__grid{grid-template-columns:1fr}
  .sm-why__grid{grid-template-columns:1fr}
  .sm-inc__grid{grid-template-columns:1fr}
  .sm-structure__grid{grid-template-columns:1fr}
  .sm-structure__notes{flex-direction:column}
}/* End custom CSS */