﻿/* ========== SHOWROOM BACKDROP (keeps the glossy theme going past the hero) ========== */
body{
  background:
    radial-gradient(1000px 520px at 88% 4%, rgba(192,57,43,0.07), transparent 62%),
    radial-gradient(900px 500px at -5% 60%, rgba(192,57,43,0.04), transparent 55%),
    linear-gradient(180deg,#fbfaf9 0%,#f5f3f0 45%,#f7f5f2 100%);
}

/* ========== LANDING NAV ========== */
  .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 56px;transition:.35s;background:transparent;}
  .nav.scrolled{background:rgba(255,255,255,0.9);backdrop-filter:blur(14px);box-shadow:0 2px 18px rgba(0,0,0,0.06);padding:14px 56px;}
  .brand{display:flex;align-items:center;gap:10px;font-family:'Poppins';font-weight:800;font-size:19px;letter-spacing:.2px;}
  .brand .mark{width:38px;height:38px;border-radius:10px;background:var(--charcoal);display:flex;align-items:center;justify-content:center;}
  .logo{width:42px;height:42px;object-fit:contain;border-radius:8px;}
  .nav.scrolled .brand{color:var(--charcoal);}
  .nav:not(.scrolled) .brand{color:white;}
  .nav-links{display:flex;gap:34px;font-weight:600;font-size:14.5px;}
  .nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,0.88);}
  .nav.scrolled .nav-links a{color:var(--charcoal-soft);}
  .nav-links a:hover{color:var(--orange);}
  .nav-cta{display:flex;gap:12px;align-items:center;}
  .nav-cta .btn-ghost{background:white;border-color:white;color:var(--charcoal);}
  .nav-cta .btn-ghost:hover{background:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.85);}

  /* Mobile menu button (hidden on desktop) */
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border-radius:10px;border:1px solid rgba(255,255,255,0.3);background:transparent;cursor:pointer;}
  .nav-burger span{display:block;width:20px;height:2px;margin:0 auto;background:white;border-radius:2px;transition:.2s;}
  .nav.scrolled .nav-burger{border-color:var(--gray-light);}
  .nav.scrolled .nav-burger span{background:var(--charcoal);}
  .nav-mobile{display:none;}

  /* ========== HERO ========== */
  .hero{position:relative;min-height:100vh;display:flex;align-items:center;background:radial-gradient(ellipse 900px 500px at 80% 10%,rgba(192,57,43,0.18),transparent 60%),linear-gradient(180deg,#1c1c1f 0%,#131316 55%,#0e0e10 100%);overflow:hidden;}
  .hero-road{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.5;overflow:hidden;}
  .hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:160px 56px 120px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center;width:100%;}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-weight:700;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:22px;}
  .eyebrow .dash{width:28px;height:2px;background:var(--orange);border-radius:2px;}
  .hero h1{color:white;font-size:58px;font-weight:800;line-height:1.07;letter-spacing:-1px;}
  .hero h1 span{color:var(--orange);}
  .hero p.lead{color:rgba(255,255,255,0.7);font-size:17.5px;margin-top:22px;max-width:480px;}
  .hero-actions{display:flex;gap:14px;margin-top:38px;}
  .hero-stats{display:flex;gap:36px;margin-top:56px;}
  .hero-stats .stat b{display:block;font-size:28px;color:white;font-family:'Poppins';font-weight:800;}
  .hero-stats .stat span{color:rgba(255,255,255,0.5);font-size:13px;}
  .hero-card{position:relative;border-radius:24px;padding:28px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);backdrop-filter:blur(20px);box-shadow:var(--shadow-deep);}
  .hero-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
  .hero-card-top h4{color:white;font-size:15px;}
  .pill{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;}
  .pill.green{background:rgba(34,197,94,0.18);color:#4ade80;}
  .route-line{padding-left:28px;}
  .route-line .pt{position:relative;padding:14px 0 26px;border-left:2px dashed rgba(255,255,255,0.22);padding-left:22px;margin-left:-22px;}
  .route-line .pt:last-child{border-left:2px dashed transparent;}
  .route-line .pt::before{content:'';position:absolute;left:-7px;top:14px;width:13px;height:13px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(192,57,43,0.18);}
  .route-line .pt.done::before{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,0.18);}
  .route-line .pt b{color:white;font-size:14px;display:block;}
  .route-line .pt span{color:rgba(255,255,255,0.45);font-size:12.5px;}

  /* ========== LANDING SECTIONS ========== */
  .section{padding:80px 56px;max-width:1280px;margin:0 auto;}
  .section-head{max-width:620px;margin-bottom:56px;}
  .section-head h2{font-size:38px;font-weight:800;letter-spacing:-0.5px;color:var(--charcoal);}
  #courses .section-head{max-width:900px;}
  #courses .section-head h2{white-space:nowrap;font-size:clamp(26px,2.9vw,38px);}
  .section-head p{margin-top:14px;font-size:16px;}
  .section.dark{background:var(--charcoal);border-radius:32px;margin:0 24px;max-width:none;}
  .section.dark .section-head h2,.section.dark p{color:white;}
  .section.dark .section-head p{color:rgba(255,255,255,0.55);}

  .about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:center;}
  .about-visual{position:relative;height:420px;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#232327,#16161a);box-shadow:0 24px 60px rgba(0,0,0,0.18),0 2px 0 rgba(255,255,255,0.5) inset;}
  .about-visual .road-art{position:absolute;top:0;left:0;width:100%;height:100%;}
  .about-visual::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(125deg,rgba(255,255,255,0.32) 0%,rgba(255,255,255,0.05) 22%,rgba(255,255,255,0) 40%,rgba(0,0,0,0.22) 100%);
  }
  .badge-float{position:absolute;bottom:24px;left:24px;right:24px;z-index:2;background:linear-gradient(155deg,rgba(255,255,255,0.95),rgba(255,255,255,0.82));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.6);border-radius:16px;padding:18px 20px;display:flex;gap:14px;align-items:center;box-shadow:0 14px 40px rgba(0,0,0,0.22);}
  .badge-float .ico{width:44px;height:44px;border-radius:12px;background:var(--orange);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .badge-float b{display:block;font-size:14px;}
  .badge-float span{font-size:12.5px;}
  .about-points{display:flex;flex-direction:column;gap:22px;margin-top:28px;}
  .about-point{display:flex;gap:16px;}
  .about-point .ico{width:46px;height:46px;border-radius:13px;background:rgba(192,57,43,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .about-point h4{font-size:15.5px;margin-bottom:4px;}
  .about-point p{font-size:14.5px;}

  .course-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
  .course-card{background:linear-gradient(160deg,#ffffff 0%,#fcfbfa 55%,#f6f4f1 100%);border-radius:var(--radius);padding:32px;box-shadow:0 10px 30px rgba(20,20,20,0.06),0 1px 0 rgba(255,255,255,0.8) inset;border:1px solid var(--gray-light);position:relative;overflow:hidden;transition:.35s;}
  .course-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:.85;}
  .course-card.tdc::before{background:linear-gradient(90deg,transparent,#b9b9bd,transparent);}
  .course-card::after{content:'';position:absolute;top:-70%;left:-40%;width:55%;height:240%;background:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.55) 45%,rgba(255,255,255,0) 60%);transform:rotate(14deg);pointer-events:none;transition:left .8s cubic-bezier(.2,.7,.2,1);}
  .course-card:hover{transform:translateY(-6px);box-shadow:0 26px 55px rgba(20,20,20,0.14),0 1px 0 rgba(255,255,255,0.8) inset;}
  .course-card:hover::after{left:130%;}
  .course-card .tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.6px;padding:5px 12px;border-radius:999px;margin-bottom:18px;}
  .course-card.tdc .tag{background:rgba(112,112,112,0.12);color:var(--gray);}
  .course-card.pdc .tag{background:rgba(192,57,43,0.12);color:var(--orange);}
  .course-card h3{font-size:23px;margin-bottom:10px;}
  .course-card p.desc{font-size:14.5px;margin-bottom:22px;}
  .course-meta{display:flex;gap:22px;margin-bottom:24px;}
  .course-meta div{font-size:13px;color:var(--gray);}
  .course-meta b{display:block;color:var(--charcoal);font-size:16px;font-family:'Poppins';}
  .course-feats{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:10px;}
  .course-feats li{font-size:14px;display:flex;gap:10px;align-items:flex-start;color:var(--charcoal-soft);}
  .price-row{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--gray-light);}
  .price b{font-size:24px;font-family:'Poppins';}
  .price span{font-size:12.5px;}

  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .testi-card{background:linear-gradient(160deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden;transition:.3s;}
  .testi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(192,57,43,0.7),transparent);}
  .testi-card:hover{transform:translateY(-4px);border-color:rgba(192,57,43,0.35);}
  .testi-stars{color:var(--orange);font-size:14px;margin-bottom:16px;letter-spacing:2px;}
  .testi-card p{color:rgba(255,255,255,0.75);font-size:14.5px;margin-bottom:22px;}
  .testi-person{display:flex;align-items:center;gap:12px;}
  .testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-family:'Poppins';font-size:14px;}
  .testi-person b{color:white;font-size:14px;display:block;}
  .testi-person span{color:rgba(255,255,255,0.45);font-size:12.5px;}

  .contact-wrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;}
  .contact-info{display:flex;flex-direction:column;gap:24px;}
  .contact-item{display:flex;gap:16px;align-items:flex-start;}
  .contact-item .ico{width:46px;height:46px;border-radius:13px;background:var(--charcoal);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .contact-item h4{font-size:14.5px;margin-bottom:3px;}
  .contact-item p{font-size:14px;}
  .contact-form{position:relative;overflow:hidden;background:linear-gradient(160deg,#232327 0%,#1a1a1d 55%,#141416 100%);border-radius:var(--radius);padding:36px;box-shadow:0 24px 60px rgba(0,0,0,0.28);border:1px solid rgba(255,255,255,0.08);}
  .contact-form::before{content:'';position:absolute;top:-60%;left:-30%;width:55%;height:220%;background:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.06) 45%,rgba(255,255,255,0) 60%);transform:rotate(12deg);pointer-events:none;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
  .field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px;color:rgba(255,255,255,0.55);}
  .field input,.field textarea,.field select{width:100%;padding:13px 15px;border-radius:11px;border:1.5px solid rgba(255,255,255,0.12);font-size:14px;color:white;background:rgba(255,255,255,0.06);transition:.2s;}
  .field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,0.35);}
  .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--orange);background:rgba(255,255,255,0.1);outline:none;box-shadow:0 0 0 4px rgba(192,57,43,0.18);}
  .field{margin-bottom:16px;}

  footer{background:var(--asphalt);color:rgba(255,255,255,0.5);padding:60px 56px 30px;margin-top:40px;}
  .footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.08);}
  .footer-grid h5{color:white;font-size:13.5px;margin-bottom:16px;}
  .footer-grid .brand{color:white;margin-bottom:14px;}
  .footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;}
  .footer-grid ul a{transition:.18s;}
  .footer-grid ul a:hover{color:var(--orange);}
  .footer-bottom{max-width:1280px;margin:18px auto 0;display:flex;justify-content:space-between;font-size:12.5px;}
.about-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  display: block;
}
.badge-float .ico {
  overflow: hidden;
  flex-shrink: 0;
}
.badge-float .ico img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
/* Live course pricing variant line under the price (landing cards). */
.price-variants {
  margin-top:10px;font-size:12px;color:var(--gray);letter-spacing:.2px;
}
