@import url("https://fonts.googleapis.com/css?family=PT+Sans:300,400,700|Open+Sans:300,400,700");

      :root {
        --font: PT Sans;
        --alt-font: Open Sans;
        --accent-color: #009cde;
        --secondary-color: #3f9c35;
        --link-color: #009cde;
        --accent-highlight-color: #00425f;
        --accent-highlight-background-color: #c4eeff;
        --accent-tinted-color-70: #b3e1f5;
        --accent-tinted-color-80: #ccebf8;
        --accent-tinted-color-90: #e6f5fc;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #12b9ff;
        --secondary-hover-color: #50c044;
        --secondary-contrast-color: #fff;
        --link-hover-color: #45c8ff;
      }
      
body { background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/f0d7e685-a985-49bd-bc32-1f28afb7e322/14qryrjydw92-GradiantGrey1_1500.png'); background-attachment: fixed; background-size: cover; }
.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_v4/v1/course-uploads/f0d7e685-a985-49bd-bc32-1f28afb7e322/n3ctp9ge7p2c-HeaderLogo.jpg') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/* =============================
   RSM Academy – Base Theme (CSS only)
   ============================= */

:root{
  --bg:#0b1020;
  --surface:#0f172a;
  --text:#0b0f1a;
  --ink:#0a0e19;
  --muted:#5b6477;

  --primary:#15a748;
  --primary-700:#0c9d7a;
  --primary-900:#07725a;
  --emerald-50:#eafff7;

  --accent-blue:#009cde;
  --accent-orange:#ff9a3e;
  --accent-pink:#ff6fae;
  --accent-violet:#7b61ff;

  --card:#ffffff;
  --card-2:#f7f9fc;
  --ring:rgba(15,23,42,0.1);
  --shadow:0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06);

  --r-xl:28px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --pad:clamp(16px, 2vw + 8px, 28px);
  --maxw:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:#0b0f1a;
  background:#ffffff;
  line-height:1.6;
}

.container{max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad);}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(150%) blur(6px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand .mark{width:28px; height:28px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,var(--primary),#40e0c2)}
.nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav a{color:#1f2937; text-decoration:none; font-weight:600}
.nav a:hover{color:var(--primary-900)}
.cta{display:flex; gap:12px}
.btn{appearance:none; border:none; cursor:pointer; padding:12px 18px; font-weight:700; border-radius:14px; transition:transform .06s ease, box-shadow .2s ease;}
.btn:active{transform:translateY(1px)}
.btn-outline{background:#fff; border:1px solid var(--ring)}
.btn-primary{color:#083a30; background:linear-gradient(180deg,var(--primary), #18b58a); box-shadow:0 10px 20px rgba(24,181,138,.25)}

/* Hero */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg, #e9fbf5 0%, #f7fffb 100%);}
.hero-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:64px 0}
.kicker{display:inline-flex; gap:8px; align-items:center; background:#fff; color:#0a3d31; padding:8px 12px; border-radius:999px; font-size:12px; font-weight:800; border:1px solid var(--ring)}
.kicker svg{width:14px; height:14px}
.hero h1{font-size:clamp(30px, 3.5vw + 8px, 56px); line-height:1.05; margin:14px 0 10px; letter-spacing:-.02em}
.hero p{max-width:48ch; color:#334155; font-size:clamp(14px, 1vw + 12px, 18px)}
.hero-actions{display:flex; gap:12px; margin-top:18px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; font-weight:700; border:1px solid var(--ring); background:#fff}

/* Device mock */
.mock{position:relative; height:520px; display:flex; align-items:center; justify-content:center;}
.phone{width:min(360px, 90%); height:500px; background:#0c1327; border-radius:34px; box-shadow:var(--shadow); border:10px solid black; position:relative; overflow:hidden;}
.screen{position:absolute; inset:0; padding:18px; color:#e2e8f0; font-size:14px}
.bubble{position:absolute; right:-10px; top:60px; transform:rotate(-8deg); width:220px; background:#fff; color:#0f172a; border-radius:18px; box-shadow:var(--shadow); padding:14px}
.bubble small{display:block; color:#64748b}

/* Wave accent */
.hero-wave{position:absolute; left:0; right:0; bottom:-1px; height:60px; background:radial-gradient(120% 80px at 20% 0%, rgba(33,194,150,.25), rgba(33,194,150,0) 70%)}

/* Trust row */
.trust{display:flex; gap:26px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:22px 0; color:#64748b; font-weight:600}
.trust span{opacity:.7}

/* Why choose us */
.section{padding:72px 0}
/* FIXED: corrected invalid hex (#eafe f7 -> #eafef7) */
.eyebrow{display:inline-flex; gap:8px; align-items:center; text-transform:uppercase; letter-spacing:.12em; color:#0b8067; font-weight:800; font-size:12px; background:#eafef7;}
.section h2{font-size:clamp(26px, 2.7vw + 8px, 40px); letter-spacing:-.02em; text-align:center; margin:10px 0}
.lead{color:#475569; text-align:center; max-width:68ch; margin:0 auto 28px}
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feature{background:var(--card); border:1px solid var(--ring); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow)}
.feature h3{margin:10px 0 6px; font-size:18px}
.feature p{margin:0; color:#475569; font-size:14px}
.icon{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:white}
.i-blue{background:var(--accent-blue)}
.i-orange{background:var(--accent-orange)}
.i-green{background:var(--primary)}
.i-violet{background:var(--accent-violet)}

/* Courses strip */
.courses{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
.course{background:var(--card-2); border:1px solid var(--ring); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.course img{display:block; width:100%; height:160px; object-fit:cover}
.course .meta{padding:14px}
.tag{display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#ecfeff; color:#02687a; border:1px solid #a5f3fc}

/* Footer */
footer{padding:60px 0; background:#0b1020; color:#cbd5e1}
footer .brand{color:#e2e8f0}
.footgrid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px; margin-top:18px}
footer a{color:#cbd5e1; text-decoration:none}

/* Responsive */
@media (max-width:1000px){
  .hero-wrap{grid-template-columns:1fr; gap:20px}
  .mock{height:460px}
  .features{grid-template-columns:repeat(2,1fr)}
  .courses{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav ul{display:none}
  .features{grid-template-columns:1fr}
  .courses{grid-template-columns:1fr}
}

/* A11y / motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}
.btn:focus-visible, a:focus-visible{outline:3px solid var(--accent-blue); outline-offset:3px; border-radius:12px}


/* RSM Academy – Hero v1 (compat) */
.rsm-hero{position:relative; overflow:hidden; background:linear-gradient(180deg,#e7fbf3 0%,#f5fffb 100%);}
.rsm-hero .rsm-wrap{max-width:1200px; margin:0 auto; padding:64px 24px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}

/* Left column */
.rsm-hero .kicker{display:inline-flex; align-items:center; gap:8px; background:#ffffff; color:#0a3d31; border:1px solid rgba(15,23,42,0.08); border-radius:999px; padding:8px 12px; font:700 12px/1 Inter,Arial,Helvetica,sans-serif}
.rsm-hero h1{font:800 48px/1.1 Inter,Arial,Helvetica,sans-serif; color:#083a30; margin:16px 0 10px}
.rsm-hero p.lead{max-width:56ch; color:#334155; font:500 16px/1.6 Inter,Arial,Helvetica,sans-serif; margin:0 0 16px}

/* Pills */
.rsm-hero .pills{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 18px}
.rsm-hero .pill{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:#fff; border:1px solid rgba(15,23,42,0.1); font:700 13px/1 Inter,Arial,Helvetica,sans-serif; color:#0f172a}
.rsm-hero .pill i{width:18px; height:18px; display:inline-grid; place-items:center; border-radius:6px; background:#21c296; color:#083a30; font-style:normal; font-weight:900}

/* Actions */
.rsm-hero .actions{display:flex; gap:12px; align-items:center; margin-top:6px}
.rsm-hero .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:14px; font:800 14px/1 Inter,Arial,Helvetica,sans-serif; text-decoration:none; border:1px solid transparent}
.rsm-hero .btn-primary{background:linear-gradient(180deg,#21c296,#18b58a); color:#083a30; border-color:rgba(24,181,138,.35); box-shadow:0 10px 20px rgba(24,181,138,.25)}
.rsm-hero .btn-secondary{background:#ffffff; color:#0f172a; border-color:rgba(15,23,42,0.1)}
.rsm-hero .btn:hover{filter:brightness(.98)}

/* Right column: simple mock */
.rsm-hero .mock{position:relative; height:520px; display:flex; align-items:center; justify-content:center}
.rsm-hero .device{width:360px; max-width:90%; height:500px; background:#0c1327; border-radius:34px; box-shadow:0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06); border:10px solid #000; position:relative; overflow:hidden}
.rsm-hero .screen{position:absolute; top:0; left:0; right:0; bottom:0; padding:18px; color:#e2e8f0; font:600 14px/1.4 Inter,Arial,Helvetica,sans-serif}

/* Floating course card */
.rsm-hero .float-card{position:absolute; right:-10px; top:60px; transform:rotate(-6deg); width:240px; background:#fff; color:#0f172a; border-radius:18px; box-shadow:0 10px 30px rgba(3,7,18,.08), 0 2px 8px rgba(3,7,18,.06); padding:14px; border:1px solid rgba(15,23,42,0.06)}
.rsm-hero .float-card small{display:block; color:#64748b}
.rsm-hero .tag{display:inline-block; padding:6px 10px; border-radius:999px; font:800 12px/1 Inter,Arial,Helvetica,sans-serif; background:#ecfeff; color:#02687a; border:1px solid #a5f3fc}

/* Decorative bubble backplate */
.rsm-hero:before{content:""; position:absolute; right:-80px; top:-80px; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(33,194,150,.25), rgba(33,194,150,0) 70%)}

/* Responsive */
@media (max-width:1000px){
  .rsm-hero .rsm-wrap{grid-template-columns:1fr; gap:24px}
  .rsm-hero .mock{height:460px}
  .rsm-hero h1{font-size:40px}
}
@media (max-width:640px){
  .rsm-hero h1{font-size:34px}
  .rsm-hero .float-card{display:none}
}
/* App card stack (logo tiles) */
.rsm-hero .appstack{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px}
.rsm-hero .app-card{display:flex; align-items:center; gap:10px; background:#ffffff; border:1px solid rgba(15,23,42,0.1); border-radius:14px; padding:10px 12px}
.rsm-hero .app-card .logo{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; font:900 12px/1 Inter,Arial,Helvetica,sans-serif}
/* Microsoft product color cues */
.rsm-hero .logo.finance{background:#009cde}       /* Blue */
.rsm-hero .logo.scm{background:#15a748}           /* Green */
.rsm-hero .logo.bc{background:#f59e0b}            /* Amber */
.rsm-hero .logo.ce{background:#7c3aed}            /* Violet */
.rsm-hero .logo.pp{background:#9333ea}            /* Power Platform purple */
.rsm-hero .app-card .name{font:700 13px/1.2 Inter,Arial,Helvetica,sans-serif; color:#0f172a}
.rsm-hero .app-card .sub{font:600 11px/1 Inter,Arial,Helvetica,sans-serif; color:#64748b}
/* Microsoft badge */
.rsm-hero .ms-badge { background: rgba(255,255,255,.96) !important; padding: 6px 10px !important; border-radius: 10px !important; }

