:root{

  --bg:#060816;

  --card:#12192b;

  --border:rgba(255,255,255,.08);

  --text:#ffffff;
  --muted:#98a3bd;

  --accent:#ff7a3d;
  --accent2:#7b61ff;

  --green:#22c55e;
  --blue:#3b82f6;

  --radius:30px;

  --transition:.3s ease;
}

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

body{

  background:
    linear-gradient(
      180deg,
      #050816,
      #0b1022
    );

  color:var(--text);

  font-family:'DM Sans',sans-serif;
}
/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: 200px;
  height: 100vh;
  background: linear-gradient(160deg, #141428 0%, #1c1c35 100%);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  border-right: 1px solid rgba(255,255,255,0.05);
  transition: transform var(--transition);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.brand-icon {
  font-size: 24px;
  color: var(--accent);
}

.brand-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  letter-spacing: -0.5px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  color: #8a9bc0;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
}

.sidebar-nav li a i {
  width: 18px;
  text-align: center;
  font-size: 15px;
}

.sidebar-nav li a:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
  transform: translateX(3px);
}

.sidebar-nav li.active a {
  background: linear-gradient(90deg, rgba(235,104,53,0.2) 0%, rgba(235,104,53,0.05) 100%);
  color: var(--accent);
  border-left: 3px solid var(--accent);
}

.sidebar-footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 16px;
}

.sidebar-footer a {
  color: #6a7a94;
  font-size: 16px;
  transition: color var(--transition);
}

.sidebar-footer a:hover {
  color: var(--accent);
}

/* Sidebar backdrop (mobile) */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1040;
  backdrop-filter: blur(2px);
}

.sidebar-backdrop.visible {
  display: block;
}
/* NAVBAR */

.navbar{

  position:fixed;

  top:0;
  left:240px;
  right:0;

  height:82px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 30px;

  background:
    rgba(5,8,22,.8);

  backdrop-filter:blur(18px);

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

  z-index:999;
}

.search-bar{

  width:420px;

  display:flex;
  align-items:center;

  gap:12px;

  padding:14px 18px;

  border-radius:999px;

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

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

.search-bar input{

  width:100%;

  border:none;
  outline:none;

  background:none;

  color:white;
}

.nav-actions{

  display:flex;

  gap:14px;
}

.outline-btn,
.primary-btn{

  border:none;

  padding:14px 20px;

  border-radius:18px;

  cursor:pointer;

  font-weight:700;
}

.outline-btn{

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

  color:white;
}

.primary-btn{

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  color:white;
}

/* MAIN */

.main-home{

  margin-left:240px;

  padding:120px 40px 60px;
}

/* HERO */

.hero-section{

  text-align:center;

  margin-bottom:60px;
}

.hero-badge{

  display:inline-flex;

  padding:12px 18px;

  border-radius:999px;

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

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

  margin-bottom:24px;
}

.hero-section h1{

  font-size:
    clamp(58px,8vw,110px);

  line-height:1;

  margin-bottom:20px;

  font-family:'Syne',sans-serif;
}

.hero-section h1 span{

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;
}

.hero-section p{

  color:var(--muted);

  max-width:760px;

  margin:auto;

  line-height:1.8;

  font-size:18px;
}

/* FILTER */

.filter-bar{

  display:flex;
  justify-content:center;

  gap:14px;

  flex-wrap:wrap;

  margin-bottom:50px;
}

.filter-btn{

  border:none;

  padding:12px 18px;

  border-radius:999px;

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

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

  color:#d4dcf5;

  cursor:pointer;

  transition:var(--transition);
}

.filter-btn.active,
.filter-btn:hover{

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  color:white;
}

/* GRID */

.sections-grid{

  display:grid;

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

  gap:28px;
}

/* CARD */

.section-card{

  background:
    linear-gradient(
      145deg,
      #12192b,
      #172038
    );

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

  border-radius:32px;

  padding:32px;

  transition:var(--transition);
}

.section-card:hover{

  transform:translateY(-10px);

  border-color:
    rgba(255,255,255,.14);
}

.card-icon{

  width:78px;
  height:78px;

  border-radius:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:34px;

  margin-bottom:24px;
}

.orange{
  background:linear-gradient(135deg,#ff7a3d,#ffb347);
}

.purple{
  background:linear-gradient(135deg,#7b61ff,#b794ff);
}

.blue{
  background:linear-gradient(135deg,#3b82f6,#38bdf8);
}

.green{
  background:linear-gradient(135deg,#22c55e,#4ade80);
}

.card-label{

  display:inline-block;

  padding:8px 14px;

  border-radius:999px;

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

  color:#d9def5;

  font-size:12px;

  margin-bottom:18px;
}

.section-card h2{

  font-size:36px;

  margin-bottom:16px;

  font-family:'Syne',sans-serif;
}

.section-card p{

  color:var(--muted);

  line-height:1.8;

  margin-bottom:28px;
}

.section-card button{

  border:none;

  padding:14px 20px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  color:white;

  cursor:pointer;

  font-weight:700;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg2);
  padding: 20px 0;
  margin-left: 250px; /* offset for sidebar */
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
  gap: 40px;
  padding: 56px 48px 40px;
  max-width: 100%;
}

.footer-logo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
}

.footer-col p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.footer-col h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  position: relative;
  color: #a1a1aa;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-col ul li a:hover {
  color: var(--accent);  
  transform: translateX(6px);
}

.footer-col ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
  border-radius: 10px;
}

.footer-col ul li a:hover::after {
  width: 100%;
}

/* Social icons fix */
.socials {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 16px;
  text-decoration: none;
  transition: all var(--transition);
}

.socials a:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}

.newsletter-form input:focus {
  border-color: var(--accent);
}

.newsletter-form button {
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.newsletter-form button:hover {
  background: #d45c28;
}

.footer-bottom {
  border-top: 1px solid #1e1e1e;
  padding: 20px 48px;
  text-align: center;
  padding: 30px;
  color: #777;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-left: 260px;
  font-size: 13px;
  color: #aaa;
}
/* RESPONSIVE */

@media(max-width:900px){

  .sidebar{
    display:none;
  }

  .navbar,
  .main-home{

    margin-left:0;

    left:0;
  }

}

@media(max-width:768px){

  .navbar{

    flex-direction:column;

    height:auto;

    padding:18px;

    gap:16px;
  }

  .search-bar{
    width:100%;
  }

  .main-home{
    padding:160px 20px 40px;
  }

  .sections-grid{
    grid-template-columns:1fr;
  }

}

.sections-container{
  width: min(1300px, 92%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  padding: 60px 0;
}

.section-card{
  background: linear-gradient(155deg, #111827, #1f2937);
  border-radius: 24px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: 0.35s ease;
  box-shadow: 0 14px 40px rgba(3, 7, 18, 0.35);
}

.section-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 26px 60px rgba(3, 7, 18, 0.45);
}

.section-icon{
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: linear-gradient(135deg,#6c63ff,#8b5cf6);
  color: #fff;
  margin-bottom: 20px;
}

.section-card h2{
  font-size: 1.4rem;
  margin-bottom: 14px;
  font-family: 'Syne', sans-serif;
  color: #f8fafc;
}

.section-card p{
  color: #cbd5f5;
  line-height: 1.7;
  margin-bottom: 24px;
}

.section-card a{
  text-decoration: none;
  color: var(--accent2);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-card a:hover{
  gap: 14px;
  color: var(--accent);
}

/* ADDITIONAL MODERN SECTION CARD STYLES */

.premium-card {
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

.premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.05),
    transparent
  );
  opacity: 0;
  transition: 0.4s;
}

.premium-card:hover::before {
  opacity: 1;
}

.premium-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.card-tag {
  display: inline-block;
  margin: 12px 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* GRADIENT ICONS */

.gradient-purple {
  background: linear-gradient(135deg, #7f5af0, #6246ea);
}

.gradient-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.gradient-pink {
  background: linear-gradient(135deg, #ff4d9d, #ff006e);
}

.gradient-green {
  background: linear-gradient(135deg, #00c896, #00a86b);
}

.gradient-orange {
  background: linear-gradient(135deg, #ff9f43, #ff6b00);
}

.gradient-cyan {
  background: linear-gradient(135deg, #00c2ff, #007cf0);
}

.gradient-red {
  background: linear-gradient(135deg, #ff5f6d, #d7263d);
}

.gradient-gold {
  background: linear-gradient(135deg, #f9c74f, #f8961e);
}

.gradient-dark {
  background: linear-gradient(135deg, #111827, #4f46e5);
}

.gradient-sky {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.gradient-violet {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.gradient-lime {
  background: linear-gradient(135deg, #84cc16, #65a30d);
}

/* ICON STYLE */

.section-icon {
  width: 70px;
  height: 70px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

/* =====================================================
EXTRA PROFESSIONAL GRADIENTS
ADD INSIDE section.css

.gradient-indigo {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.gradient-emerald {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.gradient-rose {
  background: linear-gradient(135deg, #f43f5e, #fb7185);
}

.gradient-teal {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.gradient-yellow {
  background: linear-gradient(135deg, #f59e0b, #facc15);
}

.gradient-magenta {
  background: linear-gradient(135deg, #d946ef, #f472b6);
}

.gradient-navy {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
}

.gradient-crimson {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

.gradient-silver {
  background: linear-gradient(135deg, #6b7280, #9ca3af);
}

.gradient-aqua {
  background: linear-gradient(135deg, #06b6d4, #67e8f9);
}

.gradient-platinum {
  background: linear-gradient(135deg, #374151, #6b7280);
}

.gradient-lavender {
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
}