@font-face {
  font-family: "3DS";
  src: url("assets/fonts/3ds-regular.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "3DS Fonticon";
  src: url("assets/fonts/3ds_fonticon.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #102033;
  --muted: #617085;
  --line: #e2e6ea;
  --paper: #f7f8fa;
  --soft: #f7f8fa;
  --white: #ffffff;
  --sw-red: #0A66C2;
  --sw-red-dark: #074B8F;
  --sw-red-soft: #EAF3FF;
  --steel: #4d5967;
  --graphite: #111820;
  --navy: #151b23;
  --shadow: 0 24px 70px rgba(8, 68, 128, 0.13);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "3DS";
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  padding: 8px clamp(20px, 5vw, 72px);
  background: var(--sw-red);
  border-bottom: 1px solid rgba(5, 47, 95, 0.26);
  box-shadow: 0 16px 42px rgba(7, 75, 143, 0.22);
}

.brand {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
}

.brand img {
  width: clamp(495px, 42vw, 690px);
  max-height: 96px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transform: scale(1.55);
  transform-origin: left center;
}

.nav {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 30px;
  font-size: 17px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
}

.nav a:hover {
  color: #ffffff;
}

.header-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 800;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.header-cta {
  position: relative;
  z-index: 3;
}

.header-cta,
.btn.primary {
  color: var(--white);
  background: var(--sw-red);
  box-shadow: 0 14px 32px rgba(10, 102, 194, 0.24);
}

.hero-actions .btn.primary {
  animation: cta-nudge 30s ease-in-out infinite;
}

.header-cta {
  color: var(--sw-red-dark);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(70, 0, 0, 0.2);
}

.btn.secondary {
  color: var(--sw-red-dark);
  background: var(--sw-red-soft);
}

.header-cta:hover,
.btn:hover {
  transform: translateY(-2px);
}

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: clamp(58px, 8vw, 108px) clamp(20px, 5vw, 72px) 58px;
  background:
    linear-gradient(120deg, rgba(10, 102, 194, 0.09), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8f9fb 52%, #EAF3FF 100%);
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 32, 51, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 32, 51, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(10, 102, 194, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 102, 194, 0.04) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
  mask-image:
    radial-gradient(circle at 24% 26%, transparent 0 18%, rgba(0, 0, 0, 0.22) 31%, rgba(0, 0, 0, 0.52) 58%, transparent 92%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.2) 68%, transparent);
  animation: cad-grid-drift 42s linear infinite;
  content: "";
}

.hero::after {
  position: absolute;
  top: clamp(38px, 7vw, 92px);
  right: clamp(10px, 3vw, 46px);
  z-index: 0;
  width: min(780px, 48vw);
  height: min(620px, 72%);
  pointer-events: none;
  background:
    radial-gradient(circle at 54% 36%, rgba(10, 102, 194, 0.18), transparent 42%),
    radial-gradient(circle at 62% 54%, rgba(255, 255, 255, 0.86), transparent 55%);
  filter: blur(10px);
  opacity: 0.92;
  content: "";
}

.hero > :not(.hero-api-texture) {
  position: relative;
  z-index: 1;
}

.hero-api-texture {
  position: absolute;
  inset: -18%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: rgba(89, 99, 111, 0.07);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  line-height: 2.2;
  white-space: pre;
  opacity: 0.72;
  transform: rotate(-18deg);
  mask-image:
    radial-gradient(circle at 23% 38%, transparent 0 20%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0.72) 72%, transparent 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.28) 58%, transparent);
  content: "";
}

.hero-api-texture::before {
  position: absolute;
  inset: 0;
  content:
    "SldWorks   ModelDoc2   IModelDocExtension   FeatureManager   SelectionMgr   Component2   AssemblyDoc   DrawingDoc   PartDoc   Configuration   CustomPropertyManager   BomTableAnnotation   TableAnnotation   View   Sheet   SketchManager   EquationMgr   Mate2   Body2   Face2   Edge   Vertex   DisplayDimension   Annotation   Feature   ModelView   IEdmVault5   IEdmFile5   IEdmFolder5   IEdmEnumeratorVariable5   IEdmCard5   IEdmBatchGet   IEdmBatchUnlock   IEdmSearch5   IEdmTaskInstance   IEdmAddIn5   IEdmCmd   IEdmState5   IEdmTransition5   IEdmVariable5   IEdmUserMgr5\A"
    "IEdmVault5   IEdmFile5   IEdmFolder5   IEdmEnumeratorVariable5   IEdmCard5   IEdmBatchGet   IEdmBatchUnlock   IEdmSearch5   IEdmTaskInstance   IEdmAddIn5   IEdmCmd   IEdmState5   IEdmTransition5   IEdmVariable5   IEdmUserMgr5   SldWorks   ModelDoc2   IModelDocExtension   FeatureManager   SelectionMgr   Component2   AssemblyDoc   DrawingDoc   PartDoc   Configuration   CustomPropertyManager   BomTableAnnotation   TableAnnotation   View   Sheet   SketchManager   EquationMgr   Mate2\A"
    "AssemblyDoc   DrawingDoc   PartDoc   Configuration   CustomPropertyManager   BomTableAnnotation   TableAnnotation   View   Sheet   SketchManager   EquationMgr   Mate2   Body2   Face2   Edge   Vertex   DisplayDimension   Annotation   Feature   ModelView   SldWorks   ModelDoc2   IModelDocExtension   FeatureManager   SelectionMgr   Component2   IEdmVault5   IEdmFile5   IEdmFolder5   IEdmEnumeratorVariable5   IEdmCard5   IEdmBatchGet   IEdmBatchUnlock\A"
    "CustomPropertyManager   BomTableAnnotation   TableAnnotation   View   Sheet   SketchManager   EquationMgr   Mate2   Body2   Face2   Edge   Vertex   DisplayDimension   Annotation   Feature   ModelView   IEdmSearch5   IEdmTaskInstance   IEdmAddIn5   IEdmCmd   IEdmState5   IEdmTransition5   IEdmVariable5   IEdmUserMgr5   SldWorks   ModelDoc2   IModelDocExtension   FeatureManager   SelectionMgr   Component2   AssemblyDoc   DrawingDoc\A"
    "ModelDoc2   IModelDocExtension   FeatureManager   SelectionMgr   Component2   AssemblyDoc   DrawingDoc   PartDoc   Configuration   CustomPropertyManager   IEdmVault5   IEdmFile5   IEdmFolder5   IEdmEnumeratorVariable5   IEdmCard5   IEdmBatchGet   IEdmBatchUnlock   IEdmSearch5   IEdmTaskInstance   IEdmAddIn5   IEdmCmd   BomTableAnnotation   TableAnnotation   View   Sheet   SketchManager   EquationMgr   Mate2\A"
    "IEdmTaskInstance   IEdmAddIn5   IEdmCmd   IEdmState5   IEdmTransition5   IEdmVariable5   IEdmUserMgr5   SldWorks   ModelDoc2   IModelDocExtension   FeatureManager   SelectionMgr   Component2   AssemblyDoc   DrawingDoc   PartDoc   Configuration   CustomPropertyManager   BomTableAnnotation   TableAnnotation   View   Sheet   SketchManager   EquationMgr   Mate2   Body2   Face2   Edge   Vertex\A"
    "SldWorks   ModelDoc2   IModelDocExtension   FeatureManager   SelectionMgr   Component2   AssemblyDoc   DrawingDoc   PartDoc   Configuration   CustomPropertyManager   BomTableAnnotation   TableAnnotation   View   Sheet   SketchManager   EquationMgr   Mate2   Body2   Face2   Edge   Vertex   DisplayDimension   Annotation   Feature   ModelView   IEdmVault5   IEdmFile5   IEdmFolder5   IEdmEnumeratorVariable5   IEdmCard5   IEdmBatchGet   IEdmBatchUnlock\A"
    "IEdmVault5   IEdmFile5   IEdmFolder5   IEdmEnumeratorVariable5   IEdmCard5   IEdmBatchGet   IEdmBatchUnlock   IEdmSearch5   IEdmTaskInstance   IEdmAddIn5   IEdmCmd   IEdmState5   IEdmTransition5   IEdmVariable5   IEdmUserMgr5   SldWorks   ModelDoc2   IModelDocExtension   FeatureManager   SelectionMgr   Component2   AssemblyDoc   DrawingDoc   PartDoc   Configuration   CustomPropertyManager\A"
    "AssemblyDoc   DrawingDoc   PartDoc   Configuration   CustomPropertyManager   BomTableAnnotation   TableAnnotation   View   Sheet   SketchManager   EquationMgr   Mate2   Body2   Face2   Edge   Vertex   DisplayDimension   Annotation   Feature   ModelView   SldWorks   ModelDoc2   IModelDocExtension   FeatureManager   SelectionMgr   Component2   IEdmVault5   IEdmFile5   IEdmFolder5\A"
    "CustomPropertyManager   BomTableAnnotation   TableAnnotation   View   Sheet   SketchManager   EquationMgr   Mate2   Body2   Face2   Edge   Vertex   DisplayDimension   Annotation   Feature   ModelView   IEdmSearch5   IEdmTaskInstance   IEdmAddIn5   IEdmCmd   IEdmState5   IEdmTransition5   IEdmVariable5   IEdmUserMgr5   SldWorks   ModelDoc2   IModelDocExtension";
}

@keyframes cad-grid-drift {
  from {
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  }

  to {
    background-position: 33px 33px, 33px 33px, 169px 169px, 169px 169px;
  }
}

@keyframes cta-nudge {
  0%,
  94%,
  100% {
    transform: translateX(0);
    box-shadow: 0 14px 32px rgba(10, 102, 194, 0.24);
  }

  95% {
    transform: translateX(-2px) rotate(-0.6deg);
  }

  96% {
    transform: translateX(3px) rotate(0.6deg);
    box-shadow: 0 18px 40px rgba(10, 102, 194, 0.34);
  }

  97% {
    transform: translateX(-2px) rotate(-0.4deg);
  }

  98% {
    transform: translateX(2px) rotate(0.4deg);
  }

  99% {
    transform: translateX(0);
  }
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--sw-red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 980px;
  margin-bottom: 18px;
  color: #202a36;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.94;
  letter-spacing: 0;
}

.hero-title-top {
  display: block;
  color: #202a36;
  background-color: #202a36;
  background-image:
    linear-gradient(90deg, rgba(32, 42, 54, 0.9), rgba(32, 42, 54, 0.76)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='96' viewBox='0 0 620 96'%3E%3Cg fill='%23ffffff' fill-opacity='.42' font-family='Consolas, monospace' font-size='13' font-weight='700'%3E%3Ctext x='0' y='22'%3EModelDoc2.Extension.SelectByID2%28%29%20%20SldWorks.GetActiveDoc%28%29%3C/text%3E%3Ctext x='28' y='50'%3EIEdmVault5.LoginAuto%28%29%20%20IEdmFile5.LockFile%28%29%3C/text%3E%3Ctext x='-18' y='78'%3ECustomPropertyManager.Get6%28%29%20%20AssemblyDoc.GetComponents%28False%29%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-position: center, 0 50%;
  background-size: cover, 620px 96px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15em;
  margin-top: 0.06em;
}

.solidworks-word {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4.04em;
  height: 0.95em;
  transform: translateY(-0.03em);
}

.solidworks-word img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.api-title-wrap {
  position: relative;
  display: inline-block;
  isolation: isolate;
  z-index: 1;
}

.api-title {
  position: relative;
  display: inline-block;
  z-index: 1;
  color: #263445;
  font-weight: 800;
  min-width: min(100%, 10ch);
}

.api-title::after {
  display: inline-block;
  width: 0.08em;
  height: 0.8em;
  margin-left: 0.08em;
  background: var(--sw-red);
  content: "";
  transform: translateY(0.08em);
  animation: typing-caret 900ms steps(1) infinite;
}

.api-title.is-paused::after {
  opacity: 0;
  animation: none;
}

.typed-orbit {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.12em);
  z-index: -1;
  width: min(17em, 46vw);
  height: 2.2em;
  pointer-events: none;
  transform: translateY(-50%);
}

.typed-icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  max-width: 18em;
  min-height: 1.44em;
  padding: 0.26em 0.52em;
  color: var(--sw-red-dark);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(10, 102, 194, 0.24);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(8, 68, 128, 0.12);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.17em;
  font-weight: 900;
  line-height: 1.05;
  opacity: 0.62;
  text-align: center;
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
  animation: typed-icon-float 5.8s ease-in-out infinite;
}

.typed-icon.is-empty {
  display: none;
}

.typed-icon-1 {
  top: -0.72em;
  left: 0;
  animation-delay: -0.4s;
}

.typed-icon-2 {
  bottom: -0.68em;
  left: 0.5em;
  animation-delay: -1.6s;
}

.typed-icon-3 {
  top: 0.34em;
  left: 1.1em;
  animation-delay: -2.7s;
}

.typed-icon-4 {
  top: -0.46em;
  left: 1.8em;
  animation-delay: -3.9s;
}

.typed-icon-5 {
  bottom: -0.48em;
  left: 2.2em;
  animation-delay: -5s;
}

@keyframes typing-caret {
  50% {
    opacity: 0;
  }
}

@keyframes typed-icon-float {
  0%,
  100% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0) scale(0.92);
  }

  28% {
    opacity: 0.9;
    transform: translate3d(0.18em, -0.22em, 0) scale(1.05);
  }

  62% {
    opacity: 0.72;
    transform: translate3d(-0.14em, 0.18em, 0) scale(0.98);
  }
}

h2 {
  color: var(--navy);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: 0;
}

h3 {
  color: var(--navy);
  font-size: 22px;
  line-height: 1.18;
}

.hero-desc {
  max-width: 620px;
  margin-bottom: 16px;
  color: var(--steel);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.58;
}

.hero-proof {
  position: relative;
  z-index: 2;
  display: inline-flex;
  max-width: 620px;
  margin-bottom: 12px;
  padding: 8px 11px;
  color: var(--sw-red-dark);
  background: #ffffff;
  border: 1px solid #B8D4F0;
  border-left: 4px solid var(--sw-red);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(8, 68, 128, 0.08);
  font-size: 14px;
  font-weight: 900;
}

.tech-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.tech-badge,
.course-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tech-badge {
  min-height: 38px;
  padding: 6px 12px 6px 8px;
  color: var(--graphite);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(8, 68, 128, 0.08);
  font-size: 14px;
  font-weight: 900;
}

.tech-badge img,
.course-label img {
  width: 24px;
  height: 24px;
}

.hero-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}

.cta-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 620px;
  margin-bottom: 22px;
  color: var(--steel);
  font-size: 13px;
  font-weight: 800;
}

.cta-note span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cta-note span::before {
  width: 6px;
  height: 6px;
  background: var(--sw-red);
  border-radius: 999px;
  content: "";
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 700px;
}

.hero-stats div {
  padding: 18px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(220, 229, 239, 0.9);
  border-radius: 8px;
}

.hero-stats strong {
  display: block;
  margin-bottom: 6px;
  color: var(--sw-red-dark);
  font-size: 26px;
  font-weight: 900;
}

.hero-stats span {
  color: var(--steel);
  font-size: 13px;
  font-weight: 700;
}

.code-panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid #7a8794;
  border-radius: 3px;
  background: #f3f5f7;
  box-shadow:
    0 38px 95px rgba(8, 68, 128, 0.22),
    0 18px 48px rgba(12, 37, 67, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.84);
}

.code-titlebar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 0 0 0 10px;
  background: linear-gradient(90deg, #085AAE, #0A66C2);
  border-bottom: 1px solid #7d1015;
}

.window-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #0A66C2;
  background: #ffffff;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 900;
}

.window-controls {
  display: flex;
  align-self: stretch;
}

.window-controls span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: #ffffff;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.window-controls span:last-child {
  background: rgba(70, 0, 0, 0.28);
}

.code-titlebar p {
  margin: 0;
  color: #ffffff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
}

pre {
  margin: 0;
  padding: 24px 26px;
  color: #f5f7f9;
  background: #151719;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: auto;
}

.code-panel > pre {
  min-height: 260px;
  max-height: 300px;
  overflow: auto;
}

.code-quiz {
  padding: 18px;
  background: #ffffff;
  border-top: 1px solid #dfe5eb;
}

.code-panel.is-correct .code-quiz {
  background: #effaf4;
  box-shadow: inset 0 0 0 2px #42b878;
}

.code-panel.is-wrong .code-quiz {
  background: #fff4f4;
  box-shadow: inset 0 0 0 2px #ef6b6b;
}

.quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.quiz-kicker,
.quiz-timer,
.quiz-score {
  color: var(--sw-red-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.quiz-kicker,
.quiz-timer {
  display: inline-flex;
}

.quiz-timer {
  margin-left: 10px;
  padding-left: 10px;
  color: var(--graphite);
  border-left: 1px solid #d8e0e8;
}

.quiz-timer.is-low {
  color: #ffffff;
  background: var(--sw-red);
  border-left: 0;
  border-radius: 4px;
  padding: 3px 7px;
}

.quiz-score {
  color: var(--steel);
}

.quiz-subtitle {
  margin: -2px 0 10px;
  color: var(--steel);
  font-size: 12px;
  font-weight: 800;
}

.code-quiz h3 {
  margin-bottom: 12px;
  font-size: 17px;
  line-height: 1.25;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.quiz-option,
.quiz-next,
.quiz-course,
.quiz-copy,
.quiz-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #d8e0e8;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.quiz-option {
  justify-content: flex-start;
  min-height: 46px;
  padding: 8px 10px;
  color: var(--graphite);
  background: #ffffff;
  border-color: #b9c6d3;
  text-align: left;
}

.quiz-option:hover {
  border-color: var(--sw-red);
  box-shadow: inset 4px 0 0 var(--sw-red);
}

.quiz-option:disabled {
  cursor: default;
  opacity: 1;
}

.quiz-next:disabled {
  color: #788493;
  background: #eef1f4;
  border-color: #d8e0e8;
  box-shadow: none;
  cursor: not-allowed;
}

.quiz-next[hidden],
.quiz-course[hidden],
.quiz-copy[hidden],
.quiz-linkedin[hidden],
.quiz-share-message[hidden] {
  display: none !important;
}

.option-key {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  color: #ffffff;
  background: #5f6b78;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
}

.quiz-option.is-correct .option-key {
  background: #2da85f;
}

.quiz-option.is-wrong .option-key {
  background: #0A66C2;
}

.quiz-option.is-correct {
  color: #176341;
  background: #e9f9f0;
  border-color: #8bd3a8;
}

.quiz-option.is-wrong {
  color: #9b1c1c;
  background: #fff0f0;
  border-color: #f2a2a2;
}

.quiz-feedback {
  min-height: 24px;
  margin: 10px 0 0;
  color: var(--steel);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.quiz-next,
.quiz-course,
.quiz-copy,
.quiz-linkedin {
  color: #ffffff;
  background: var(--sw-red);
  border-color: var(--sw-red);
}

.quiz-course,
.quiz-linkedin {
  text-decoration: none;
}

.quiz-linkedin {
  gap: 8px;
  color: #0a66c2;
  background: #ffffff;
  border-color: #cbd8e5;
}

.quiz-linkedin img {
  width: 72px;
  max-height: 16px;
  object-fit: contain;
}

.quiz-share-message {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.quiz-share-message span {
  color: var(--sw-red-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.quiz-share-message textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  padding: 10px 12px;
  color: var(--graphite);
  background: #ffffff;
  border: 1px solid #b9c6d3;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.confetti-piece {
  position: fixed;
  top: -12px;
  z-index: 999;
  width: 8px;
  height: 12px;
  pointer-events: none;
  animation: confetti-fall 900ms ease-out forwards;
}

@keyframes confetti-fall {
  to {
    transform: translate3d(var(--confetti-x), 120vh, 0) rotate(540deg);
    opacity: 0;
  }
}

.logos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 30px clamp(20px, 5vw, 72px);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #0A66C2 0%, #074B8F 100%);
  border-block: 1px solid rgba(5, 47, 95, 0.22);
  box-shadow: inset 0 16px 42px rgba(5, 47, 95, 0.12);
}

.build-strip {
  justify-content: center;
}

.logos p {
  margin: 0;
  color: var(--steel);
  font-size: 18px;
  line-height: 1.55;
}

.tool-strip-content {
  display: grid;
  gap: 8px;
  max-width: 1440px;
  text-shadow: 0 1px 14px rgba(5, 47, 95, 0.18);
}

.tool-strip-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.tool-strip-intro {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.logos .tool-strip-label,
.logos .tool-strip-intro {
  color: rgba(255, 255, 255, 0.94);
}

.tool-strip-items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.tool-card {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 12px;
  color: var(--graphite);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(5, 47, 95, 0.16);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
}

.tool-card img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: grayscale(1) saturate(0) opacity(0.58);
}

.tool-card img[src*="vba-logo-official"],
.tool-card img[src*="csharp-logo-official"] {
  width: 54px;
  height: 54px;
}

.tool-card img[src*="vba-logo-official"] {
  width: 84px;
  height: 52px;
  object-fit: contain;
}

.tool-card strong {
  display: block;
  margin-bottom: 3px;
}

.tool-card small {
  display: block;
  color: var(--steel);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.section,
.course-band,
.course-preview-section,
.company-band,
.instructor,
.support-proof,
.conference-resource,
.certificate-proof,
.path,
.pricing,
.faq,
.disclaimer,
.final-cta {
  padding: clamp(70px, 8vw, 112px) clamp(20px, 5vw, 72px);
}

#courses,
#reviews,
#instructor,
#pricing {
  scroll-margin-top: 96px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 40px;
}

.section-heading p:not(.eyebrow),
.section-lead {
  color: var(--steel);
  font-size: 18px;
  line-height: 1.65;
}

.workflow-showcase {
  display: grid;
  grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(28px, 5vw, 84px);
  overflow: hidden;
  background: var(--paper);
}

.workflow-showcase .section-heading {
  max-width: 620px;
  margin-bottom: 0;
}

.feature-carousel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 8px 0 22px;
  background: var(--paper);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.feature-track {
  display: flex;
  width: max-content;
  gap: 18px;
  background: transparent;
  animation: workflow-marquee 78s linear infinite;
}

.feature-carousel:hover .feature-track {
  animation-play-state: paused;
}

.feature-card,
.course-list article,
blockquote,
.pricing-card,
.instructor-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 14px 42px rgba(12, 37, 67, 0.08);
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(290px, 27vw, 360px);
  min-height: 450px;
  overflow: hidden;
  padding: 0 20px 22px;
  box-shadow: 0 8px 18px rgba(12, 37, 67, 0.035);
}

.feature-image {
  width: calc(100% + 40px);
  height: 174px;
  margin: 0 -20px 20px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.feature-card ul {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.feature-card li {
  position: relative;
  padding-left: 14px;
  color: var(--steel);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.feature-card li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--sw-red);
  border-radius: 999px;
  content: "";
}

.feature-card p,
.course-list p,
blockquote p,
.instructor-card p,
.proof-list,
.path-steps,
.pricing-card p,
.pricing-card li,
.faq-answer,
.final-cta p,
.site-footer p {
  color: var(--steel);
  line-height: 1.65;
}

@keyframes workflow-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 9px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-track {
    animation: none;
  }
}

.course-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  background: #F2F8FF;
  border-block: 1px solid #BFD9F4;
}

.course-preview-section {
  background: var(--paper);
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
}

.preview-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(12, 37, 67, 0.07);
}

.preview-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.preview-card div {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
}

.preview-card h3 {
  margin: 0;
  font-size: 22px;
}

.preview-card p {
  margin: 0;
  color: var(--steel);
  font-size: 14px;
  line-height: 1.55;
}

.preview-card ul {
  display: grid;
  gap: 7px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.preview-card li {
  position: relative;
  padding-left: 14px;
  color: var(--steel);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.preview-card li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--sw-red);
  border-radius: 999px;
  content: "";
}

.preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.course-copy {
  max-width: 1180px;
}

.course-copy h2 {
  margin-bottom: 0;
}

.course-groups {
  display: grid;
  gap: 24px;
}

.course-group {
  display: grid;
  gap: 14px;
}

.course-group-heading {
  max-width: 760px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.course-group-heading h3 {
  margin-bottom: 0;
  font-size: 24px;
}

.course-group-heading p:not(.eyebrow) {
  margin-bottom: 0;
  color: var(--steel);
  font-size: 15px;
  line-height: 1.55;
}

.premium-group .course-group-heading {
  background: transparent;
}

.premium-group {
  padding-top: 4px;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(343px, 384px));
  justify-content: center;
  gap: 14px;
  max-width: 1600px;
  margin-inline: auto;
}

.course-list article {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.course-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.course-list article > :not(.course-thumb) {
  margin-left: 20px;
  margin-right: 20px;
}

.course-list article > .course-label {
  margin-top: 20px;
}

.course-list .course-label {
  display: inline-flex;
  margin-bottom: 13px;
  color: var(--sw-red);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.course-list h3 {
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.22;
}

.course-list p {
  font-size: 15px;
  line-height: 1.58;
}

.course-label strong {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  color: #ffffff;
  background: var(--sw-red);
  border-radius: 6px;
  font-size: 11px;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 20px;
  padding-top: 14px;
}

.course-meta span,
.course-platform,
.buy-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  color: var(--steel);
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.buy-now {
  color: #ffffff;
  background: var(--sw-red);
  border-color: var(--sw-red);
  box-shadow: 0 10px 20px rgba(10, 102, 194, 0.16);
}

.buy-now:hover {
  background: var(--sw-red-dark);
  border-color: var(--sw-red-dark);
}

.course-platform img {
  width: 22px;
  height: 16px;
  object-fit: contain;
  margin-right: 7px;
}

.website-chip {
  color: var(--graphite);
  background: #ffffff;
  border-color: #d7dce2;
}

.website-chip img {
  display: none;
}

.udemy-chip {
  color: #4d216d;
  background: #faf5ff;
  border-color: #e5d2f4;
}

.udemy-chip img {
  width: 34px;
  max-height: 14px;
  height: auto;
}

.youtube-chip {
  color: #b00000;
  background: #fff4f4;
  border-color: #ffc8c8;
}

.muted-platform {
  opacity: 0.74;
}

.course-price {
  color: var(--sw-red-dark) !important;
  background: var(--sw-red-soft) !important;
  border-color: #B8D4F0 !important;
}

.course-price.free {
  color: #176341 !important;
  background: #e9f9f0 !important;
  border-color: #bfe8d0 !important;
}

.course-list h3 a:hover,
.course-link:hover,
.in-person-note a:hover {
  color: var(--sw-red);
}

.course-link {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  margin-bottom: 28px;
  padding-top: 18px;
  color: var(--sw-red-dark);
  font-size: 14px;
  font-weight: 900;
}

.in-person-note {
  max-width: 1180px;
  padding: 18px 20px;
  color: var(--steel);
  background: #ffffff;
  border: 1px solid #BFD9F4;
  border-radius: 8px;
  box-shadow: 0 14px 42px rgba(12, 37, 67, 0.06);
  line-height: 1.65;
}

.in-person-note strong {
  color: var(--graphite);
}

.in-person-note span {
  color: var(--sw-red-dark);
  font-weight: 900;
}

.in-person-note a {
  display: inline-flex;
  margin-left: 6px;
  color: var(--sw-red-dark);
  font-weight: 900;
}

.split {
  display: grid;
  grid-template-columns: minmax(280px, 0.45fr) 1fr;
  gap: 34px;
  align-items: start;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

blockquote {
  margin: 0;
  padding: 28px;
}

.review-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 6px 10px;
  color: var(--sw-red-dark);
  background: var(--sw-red-soft);
  border: 1px solid #B8D4F0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.review-source.logo-source {
  width: 86px;
  height: 34px;
  padding: 6px 9px;
  background: #ffffff;
  border-color: #d7dce2;
}

.review-source.logo-source img {
  width: 66px;
  height: auto;
}

.review-source.logo-source.linkedin-source {
  width: 92px;
}

.review-source.logo-source.linkedin-source img {
  width: 72px;
}

.review-source.logo-source.bluebyte-source {
  width: 106px;
  height: 38px;
}

.review-source.logo-source.bluebyte-source img {
  width: 82px;
}

blockquote p {
  color: var(--ink);
  font-size: 19px;
}

cite {
  color: var(--sw-red-dark);
  font-style: normal;
  font-weight: 800;
}

.instructor {
  background: linear-gradient(135deg, var(--graphite), #052F5F);
}

.instructor-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 0.78fr) minmax(280px, 0.62fr);
  gap: 30px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 56px);
}

.instructor-photo {
  position: relative;
  align-self: stretch;
  display: grid;
  align-items: end;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(10, 102, 194, 0.18), transparent 44%),
    linear-gradient(180deg, #ffffff, #f6f7f9);
  border: 1px solid #ebd1d3;
  border-radius: 8px;
}

.instructor-photo::before {
  position: absolute;
  inset: 16px 16px auto auto;
  width: 70px;
  height: 70px;
  background: var(--sw-red);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.92;
  content: "";
}

.instructor-photo img {
  position: relative;
  z-index: 1;
  width: min(116%, 370px);
  max-width: none;
  margin: 0 auto -8px;
  object-fit: contain;
}

.instructor-photo figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 230, 234, 0.95);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(12, 37, 67, 0.12);
}

.instructor-photo figcaption strong {
  color: var(--sw-red-dark);
  font-size: 15px;
  font-weight: 900;
}

.instructor-photo figcaption span {
  color: var(--steel);
  font-size: 12px;
  font-weight: 800;
}

.instructor-copy h2 {
  font-size: clamp(30px, 3.4vw, 48px);
}

.instructor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.support-proof {
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(520px, 1fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  background:
    linear-gradient(90deg, rgba(234, 243, 255, 0.72), rgba(255, 255, 255, 0.82) 38%, rgba(247, 248, 250, 0.96)),
    var(--paper);
}

.support-copy {
  max-width: 560px;
}

.support-copy h2 {
  max-width: 620px;
  font-size: clamp(34px, 4vw, 58px);
}

.support-copy p:not(.eyebrow) {
  color: var(--steel);
  font-size: 19px;
  line-height: 1.65;
}

.slack-demo {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  min-height: 470px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d8dee6;
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(12, 37, 67, 0.14);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease, transform 500ms ease;
}

.slack-demo:not(.is-running):not(.is-complete) {
  opacity: 0.92;
}

.slack-demo.is-running,
.slack-demo.is-complete {
  opacity: 1;
  transform: translateY(0);
}

.slack-sidebar {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  padding: 18px 0;
  background: #4a154b;
}

.slack-sidebar span {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.slack-sidebar span:first-child {
  background: #ffffff;
}

.slack-window {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  background: #ffffff;
}

.slack-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 0 22px;
  border-bottom: 1px solid #e8edf2;
}

.slack-topbar div {
  display: grid;
  gap: 2px;
}

.slack-topbar strong {
  color: #1d1c1d;
  font-size: 17px;
}

.slack-topbar span {
  color: #6f7782;
  font-size: 12px;
  font-weight: 800;
}

.slack-status {
  padding: 6px 9px;
  color: #217a3b !important;
  background: #e9f8ee;
  border: 1px solid #ccebd5;
  border-radius: 999px;
}

.slack-thread {
  display: grid;
  align-content: end;
  gap: 18px;
  min-height: 340px;
  padding: 28px 24px;
}

.slack-message {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.mentor-message {
  opacity: 0;
  transform: translateY(10px);
}

.slack-demo.is-answering .mentor-message,
.slack-demo.is-complete .mentor-message {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms ease;
}

.slack-avatar {
  width: 42px;
  height: 42px;
  overflow: hidden;
  object-fit: cover;
  background: #e8edf2;
  border-radius: 8px;
}

.student-avatar {
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 900;
  background: #1264a3;
}

.slack-message-body {
  min-width: 0;
}

.slack-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.slack-meta strong {
  color: #1d1c1d;
  font-size: 16px;
  font-weight: 900;
}

.slack-meta span {
  color: #7b828c;
  font-size: 12px;
  font-weight: 700;
}

.typed-line {
  min-height: 1.55em;
  margin: 0;
  color: #2f3640;
  font-size: 17px;
  line-height: 1.55;
}

.typed-line.is-typing::after {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--sw-red);
  content: "";
  animation: support-caret 800ms steps(1) infinite;
}

.slack-message pre {
  opacity: 0;
  transform: translateY(6px);
  margin: 12px 0 0;
  padding: 12px 14px;
  overflow-x: auto;
  color: #26313d;
  background: #f6f8fa;
  border: 1px solid #e1e7ee;
  border-radius: 8px;
  transition: opacity 260ms ease, transform 260ms ease;
}

.slack-demo.is-complete .slack-message pre {
  opacity: 1;
  transform: translateY(0);
}

.slack-message code {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 13px;
}

.slack-typing {
  display: none;
  align-items: center;
  gap: 5px;
  width: max-content;
  margin-left: 54px;
  padding: 9px 12px;
  background: #f4f6f8;
  border: 1px solid #e4e9ef;
  border-radius: 999px;
}

.slack-demo.is-thinking .slack-typing {
  display: flex;
}

.slack-typing span {
  width: 7px;
  height: 7px;
  background: #8a94a1;
  border-radius: 50%;
  animation: support-dot 900ms ease-in-out infinite;
}

.slack-typing span:nth-child(2) {
  animation-delay: 120ms;
}

.slack-typing span:nth-child(3) {
  animation-delay: 240ms;
}

.slack-composer {
  margin: 0 24px 24px;
  border: 1px solid #cfd6df;
  border-radius: 8px;
}

.composer-tools {
  display: flex;
  gap: 16px;
  padding: 10px 14px;
  color: #66707d;
  border-bottom: 1px solid #e7ebf0;
  font-size: 16px;
  font-weight: 900;
}

.composer-input {
  padding: 14px;
  color: #9aa3ad;
  font-size: 15px;
}

@keyframes support-dot {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes support-caret {
  50% {
    opacity: 0;
  }
}

.conference-resource {
  background: var(--paper);
}

.conference-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(300px, 0.72fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  overflow: hidden;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 520px;
  padding: clamp(26px, 5vw, 56px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.62) 68%, rgba(255, 255, 255, 0.82) 100%),
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.88) 42%, rgba(255, 255, 255, 0.02) 100%),
    url("assets/houston.png") center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(12, 37, 67, 0.08);
}

.conference-content {
  display: grid;
  max-width: 620px;
}

.conference-preview {
  justify-self: end;
  width: min(100%, 460px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(12, 37, 67, 0.12);
}

.conference-card h2 {
  max-width: 680px;
  font-size: clamp(30px, 3.45vw, 48px);
}

.conference-card p:not(.eyebrow) {
  max-width: 680px;
  color: var(--steel);
  font-size: 18px;
  line-height: 1.65;
}

.conference-card .no-email-note {
  margin-top: 8px;
  color: #8a95a3;
  font-size: 14px;
  font-weight: 800;
}

.conference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.linkedin-button,
.contact-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid #cbd8e5;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(12, 37, 67, 0.08);
  font-size: 14px;
  font-weight: 900;
}

.linkedin-button {
  color: #0a66c2;
}

.contact-button {
  color: #ffffff;
  background: var(--sw-red);
  border-color: var(--sw-red);
}

.linkedin-button:hover,
.contact-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(12, 37, 67, 0.12);
}

.linkedin-button img {
  width: 72px;
  height: auto;
  max-height: 16px;
  object-fit: contain;
}

.proof-list {
  margin: 0;
  padding-left: 20px;
}

.proof-list li + li {
  margin-top: 14px;
}

.proof-list a {
  color: var(--sw-red-dark);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.company-band {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 0.92fr) minmax(260px, 0.74fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  background: var(--white);
  border-block: 1px solid var(--line);
}

.company-logo-link {
  display: inline-flex;
}

.company-logo-link img {
  width: min(100%, 300px);
}

.company-band h2 {
  max-width: 680px;
  font-size: clamp(28px, 3vw, 44px);
}

.company-band p:not(.eyebrow) {
  max-width: 720px;
  color: var(--steel);
  font-size: 17px;
  line-height: 1.6;
}

.company-band ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-band li {
  position: relative;
  padding-left: 16px;
  color: var(--steel);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
}

.company-band li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--sw-red);
  border-radius: 999px;
  content: "";
}

.path-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.path-steps li {
  min-height: 170px;
  padding: 26px;
  border-left: 4px solid var(--sw-red);
  background: var(--white);
  border-radius: 8px;
}

.pricing {
  background: #F2F8FF;
}

.pricing-heading {
  max-width: 780px;
  margin: 0 auto 32px;
  text-align: center;
}

.pricing-heading h2 {
  margin-bottom: 14px;
}

.pricing-heading p:not(.eyebrow) {
  color: var(--steel);
  font-size: 18px;
  line-height: 1.6;
}

.pricing-compare {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 5vw, 54px);
}

.pricing-card-featured {
  border-color: rgba(10, 102, 194, 0.42);
  box-shadow: 0 24px 70px rgba(7, 75, 143, 0.18);
}

.pricing-card-muted {
  background: rgba(255, 255, 255, 0.72);
}

.pricing-pill {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  color: #ffffff;
  background: var(--sw-red);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pricing-label {
  margin-bottom: 12px;
  color: var(--sw-red-dark);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.pricing-card .billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  background: #F2F8FF;
  border: 1px solid #BFD9F4;
  border-radius: 8px;
}

.pricing-card .billing-option {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  color: var(--sw-red-dark);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.pricing-card .billing-option span {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.75;
}

.pricing-card .billing-option.is-active {
  color: #ffffff;
  background: var(--sw-red);
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.18);
}

.pricing-card h3 {
  margin-bottom: 6px;
  color: var(--sw-red-dark);
  font-size: clamp(42px, 5vw, 64px);
  line-height: 0.95;
}

.pricing-card h3 span {
  color: var(--steel);
  font-size: 24px;
}

.pricing-card h3 span:first-child {
  color: var(--sw-red-dark);
  font-size: inherit;
}

.included-summary {
  margin: 16px 0 6px;
  padding: 11px 12px;
  color: var(--sw-red-dark);
  background: #F2F8FF;
  border: 1px solid #BFD9F4;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.included-summary-muted {
  color: var(--steel);
  background: #ffffff;
  border-color: var(--line);
}

.pricing-top-cta {
  min-height: 42px;
  margin: 4px 0 14px;
  font-size: 14px;
}

.pricing-card .btn.primary {
  width: 100%;
  justify-content: center;
  box-shadow: none;
}

.pricing-card > .btn:not(.pricing-top-cta) {
  margin-top: auto;
}

.secure-checkout {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  color: #c5cbd3;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  justify-items: center;
}

.secure-checkout p {
  margin: 0;
}

.payment-methods {
  width: min(100%, 230px);
  height: auto;
  opacity: 0.78;
}

.certificate-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(320px, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  background: var(--paper);
}

.certificate-copy {
  max-width: 620px;
}

.certificate-copy h2 {
  font-size: clamp(32px, 4vw, 56px);
}

.certificate-copy p:not(.eyebrow) {
  color: var(--steel);
  font-size: 18px;
  line-height: 1.65;
}

.certificate-proof img {
  width: min(100%, 640px);
  justify-self: center;
  filter: blur(1.2px);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(12, 37, 67, 0.12);
}

.regional-price,
.course-local-price {
  display: block;
  margin: 0 0 14px;
  color: var(--steel);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.course-local-price {
  flex-basis: 100%;
  margin: 0;
  color: #355E86;
}

.local-currency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.currency-flag {
  width: 18px;
  height: 13px;
  flex: 0 0 auto;
  margin: 0;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(20, 30, 44, 0.12);
}

.pricing-card ul {
  margin: 24px 0 32px;
  padding: 0;
}

.check-list {
  display: grid;
  gap: 12px;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 30px;
}

.check-list li::before {
  position: absolute;
  top: 0.2em;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #ffffff;
  background: #2da85f;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  content: "✓";
}

.check-list li.is-disabled {
  color: #7b8390;
}

.check-list li.is-disabled::before {
  color: #ffffff;
  background: #a3aab4;
  content: "×";
}

.value-box {
  display: grid;
  gap: 6px;
  margin: 26px 0 28px;
  padding: 16px 18px;
  background: #F2F8FF;
  border: 1px solid #BFD9F4;
  border-radius: 8px;
}

.value-box strong {
  color: var(--sw-red-dark);
  font-size: 18px;
  font-weight: 900;
}

.value-box span {
  color: var(--steel);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  max-width: 1180px;
}

.faq-pair {
  min-width: 0;
}

.faq-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 18px 20px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.faq-answer {
  margin: -6px 0 0;
  padding: 18px 20px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.faq-answer[hidden] {
  display: none;
}

.faq-item.is-open {
  border-bottom-color: transparent;
  border-radius: 8px 8px 0 0;
}

.faq-answer a {
  color: var(--sw-red-dark);
  font-weight: 900;
}

.final-cta {
  color: var(--white);
  text-align: center;
  background: linear-gradient(135deg, #0A66C2, #074B8F);
}

.final-cta h2,
.final-cta p {
  color: var(--white);
}

.disclaimer {
  padding-top: 46px;
  padding-bottom: 42px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 34%),
    linear-gradient(180deg, #074B8F 0%, #052F5F 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 18px 48px rgba(44, 0, 0, 0.18);
}

.disclaimer img {
  width: clamp(420px, 45vw, 660px);
  max-height: 123px;
  margin: 0 auto 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.disclaimer h2 {
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.2;
}

.disclaimer p {
  max-width: 1180px;
  margin: 0 auto 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.6;
}

.disclaimer p:last-child {
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .nav {
    display: none;
  }

  .hero,
  .course-band,
  .course-copy,
  .pricing-compare,
  .preview-grid,
  .company-band,
  .split,
  .instructor-card,
  .support-proof,
  .conference-card,
  .certificate-proof {
    grid-template-columns: 1fr;
  }

  .slack-demo {
    grid-template-columns: 1fr;
  }

  .slack-sidebar {
    display: none;
  }

  .hero::after {
    display: none;
  }

  .hero-api-texture {
    display: none;
  }

  .code-panel {
    max-width: 680px;
  }

  .review-grid,
  .faq-list,
  .course-list,
  .preview-grid,
  .path-steps {
    grid-template-columns: 1fr;
  }

  .workflow-showcase {
    grid-template-columns: 1fr;
  }

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

  .tool-strip-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .in-person-note {
    grid-column: auto;
  }

  .course-group-heading {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 12px 16px;
  }

  .brand img {
    width: 112px;
  }

  .header-cta {
    display: none;
  }

  .hero {
    width: 100vw;
    padding-top: 42px;
  }

  .hero-copy,
  .code-panel {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }

  .logos,
  .section-heading,
  .course-copy,
  .course-groups {
    min-width: 0;
    max-width: 100%;
  }

  h1 {
    font-size: 42px;
    line-height: 1;
  }

  .hero-title-row {
    display: block;
  }

  .solidworks-word {
    width: 3.95em;
    height: 0.78em;
    margin: 0.02em 0 0.02em;
    transform: none;
  }

  .api-title {
    display: block;
    white-space: normal;
  }

  .api-title-wrap {
    display: block;
    width: fit-content;
    max-width: 100%;
  }

  .typed-orbit {
    display: none;
  }

  .hero-proof {
    display: block;
    width: min(100%, 320px);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hero-desc,
  .cta-note,
  .section-heading p:not(.eyebrow),
  .section-lead,
  .logos p {
    width: min(100%, 320px);
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  h2 {
    width: min(100%, 320px);
    font-size: 30px;
    overflow-wrap: anywhere;
  }

  .code-quiz h3 {
    width: min(100%, 300px);
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .logos img {
    width: min(100%, 260px);
  }

  .tool-strip-items {
    grid-template-columns: 1fr;
  }

  .tool-card {
    min-height: 68px;
  }

  .support-proof {
    padding-inline: 16px;
  }

  .slack-demo {
    min-height: auto;
  }

  .slack-topbar,
  .slack-thread {
    padding-inline: 16px;
  }

  .slack-composer {
    margin-inline: 16px;
  }

  .slack-status {
    display: none;
  }

  .typed-line {
    font-size: 15px;
  }

  .quiz-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .quiz-options {
    grid-template-columns: 1fr;
  }

  .workflow-showcase {
    gap: 24px;
  }

  .feature-carousel {
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }

  .feature-card {
    flex-basis: min(82vw, 330px);
  }

  .course-meta {
    gap: 7px;
  }

  .course-meta span,
  .course-platform {
    max-width: 100%;
    min-height: 32px;
  }

  .website-chip img {
    width: 36px;
  }

  .udemy-chip img {
    width: 42px;
  }

  pre {
    padding: 20px;
    font-size: 12px;
  }

  .disclaimer img {
    width: min(100%, 450px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before {
    animation: none;
  }

  .hero-actions .btn.primary {
    animation: none;
  }

  .slack-demo,
  .mentor-message {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .typed-line::after,
  .slack-typing span,
  .typed-icon {
    animation: none;
  }

  .typed-orbit {
    display: none;
  }
}