/* =========================================================
   HELLO TECHD WORLD
   Neuro UI + Premium LMS Experience
========================================================= */

:root{

  /* CORE COLORS */

  --techd-bg: #0B1120;
  --techd-surface: #111827;
  --techd-card: #1E293B;

  --techd-primary: #2563EB;
  --techd-primary-hover: #3B82F6;

  --techd-success: #10B981;
  --techd-warning: #F59E0B;
  --techd-purple: #8B5CF6;

  --techd-text: #F8FAFC;
  --techd-muted: #94A3B8;

  --techd-border: rgba(255,255,255,0.08);

  --techd-radius: 16px;

  --techd-shadow:
    0 10px 30px rgba(0,0,0,0.25);

  --techd-glow:
    0 0 20px rgba(37,99,235,0.25);

  --techd-gradient:
    linear-gradient(
      135deg,
      #0F172A 0%,
      #111827 50%,
      #1E293B 100%
    );

  --techd-padding: 20px;

  --techd-font:
    Inter,
    Segoe UI,
    sans-serif;
}

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  font-family:var(--techd-font);

  background:
    radial-gradient(circle at top left,
    rgba(37,99,235,0.10),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(16,185,129,0.08),
    transparent 25%),

    var(--techd-bg);

  color:var(--techd-text);

  min-height:100vh;

  line-height:1.6;
}

/* =========================================================
   MAIN CONTAINER
========================================================= */

.techd-containerX{

  max-width:1400px;

  margin:30px auto;

  padding:0 0px;

  display:grid;

  grid-template-columns:
    260px
    1fr
    320px;

  gap:24px;
}

/* =========================================================
   SIDEBAR
========================================================= */

.techd-menu{

  background:rgba(17,24,39,0.85);

  border:1px solid var(--techd-border);

  border-radius:var(--techd-radius);

  padding:0px;

  height:fit-content;

  box-shadow:var(--techd-shadow);
}

.techd-menu-title{

  font-size:14px;

  text-transform:uppercase;

  letter-spacing:2px;

  color:var(--techd-muted);

  margin-bottom:20px;
}

.techd-menu a{

  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 16px;

  margin-bottom:12px;

  border-radius:14px;

  text-decoration:none;

  color:var(--techd-text);

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid transparent;

  transition:all .25s ease;
}

.techd-menu a:hover{

  background:
    rgba(37,99,235,0.14);

  border:
    1px solid rgba(59,130,246,.25);

  transform:translateX(4px);

  box-shadow:var(--techd-glow);
}

/* =========================================================
   MAIN CONTENT
========================================================= */

.techd-main{

  display:flex;
  flex-direction:column;

  gap:24px;
}

/* HERO */

.techd-hero{

  background:var(--techd-gradient);

  border-radius:24px;

  padding:50px;

  border:1px solid var(--techd-border);

  box-shadow:var(--techd-shadow);

  position:relative;

  overflow:hidden;
}

.techd-hero::before{

  content:"";

  position:absolute;

  width:400px;
  height:400px;

  background:
    radial-gradient(
      rgba(37,99,235,.18),
      transparent 70%
    );

  top:-200px;
  right:-150px;
}

.techd-badge{

  display:inline-flex;
  align-items:center;
  gap:10px;

  background:
    rgba(16,185,129,.12);

  border:
    1px solid rgba(16,185,129,.25);

  color:#6EE7B7;

  padding:10px 18px;

  border-radius:999px;

  margin-bottom:25px;

  font-size:14px;
  font-weight:700;
}

.techd-hero h1{

  font-size:58px;

  line-height:1.05;

  letter-spacing:-2px;

  margin-bottom:22px;

  max-width:900px;
}

.techd-highlight{

  color:#60A5FA;
}

.techd-hero p{

  color:var(--techd-muted);

  font-size:20px;

  max-width:780px;

  margin-bottom:35px;
}

/* CTA */

.techd-actions{

  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.techd-btn{

  padding:16px 28px;

  border-radius:14px;

  border:none;

  cursor:pointer;

  font-weight:700;

  font-size:15px;

  transition:.25s ease;
}

.techd-btn-primary{

  background:linear-gradient(
    135deg,
    #2563EB,
    #3B82F6
  );

  color:white;

  box-shadow:
    0 10px 25px rgba(37,99,235,.35);
}

.techd-btn-primary:hover{

  transform:translateY(-3px);
}

.techd-btn-secondary{

  background:
    rgba(255,255,255,.04);

  color:white;

  border:
    1px solid var(--techd-border);
}

.techd-btn-secondary:hover{

  background:
    rgba(255,255,255,.08);
}

/* =========================================================
   STATS
========================================================= */

.techd-stats{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

  gap:20px;
}

.techd-stat{

  background:
    rgba(17,24,39,.85);

  border:
    1px solid var(--techd-border);

  border-radius:20px;

  padding:24px;

  box-shadow:var(--techd-shadow);
}

.techd-stat h3{

  font-size:34px;

  margin-bottom:6px;
}

.techd-stat p{

  color:var(--techd-muted);
}

/* =========================================================
   RIGHT PANEL
========================================================= */

.techd-right{

  display:flex;
  flex-direction:column;

  gap:20px;
}

.techd-card{

  background:
    rgba(17,24,39,.88);

  border:
    1px solid var(--techd-border);

  border-radius:20px;

  padding:24px;

  box-shadow:var(--techd-shadow);
}

.techd-card h3{

  margin-bottom:14px;

  font-size:22px;
}

.techd-card p{

  color:var(--techd-muted);
}

/* =========================================================
   FOOTER
========================================================= */

.techd-footer{

  margin-top:40px;

  padding:40px 20px;

  border-top:
    1px solid var(--techd-border);

  text-align:center;

  color:var(--techd-muted);
}

.techd-footer strong{

  color:white;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1100px){

  .techd-container{
    grid-template-columns:1fr;
  }

  .techd-right{
    order:2;
  }
}

@media (max-width:768px){

  .techd-hero{
    padding:0px 0px;
  }

  .techd-hero h3{
    font-size:12px;
    line-height:1.2;
    margin-bottom:0px;
  }
}