/* ==========================================================================
   KOMA BUSINESS · Successful Entrepreneur
   A product page inside the ecosystem. Type scale follows the live
   insidekoma.com/products/successful-entrepreneur build.
   ========================================================================== */

.page-se {
  --se-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --se-rise: 12px;
  --se-duration: 1650ms;
  --se-teal: #021e1c;
  --se-red: #911414;
  --se-muted: var(--text-muted);
}

/* Hero: black settling into a deep teal floor, handed to the next section
   ========================================================================== */

.se-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(820px, 100svh);
  padding: 140px 31px 120px;
  text-align: center;
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    var(--bg) 36%,
    #091110 58%,
    #061614 76%,
    #041a18 90%,
    var(--se-teal) 100%
  );
}

/* A faint teal breath in the upper corner, echoing the live hero's angle */
.se-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 60% at 100% 0%, rgba(0, 43, 36, 0.55) 0%, rgba(0, 43, 36, 0) 70%);
}

.se-hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.se-hero__eyebrow {
  font-size: 16px;
}

.se-hero__title {
  margin-bottom: 22px;
  color: var(--text);
  font-size: 76px;
  font-weight: 600;
  line-height: 1.3;
}

.se-hero__lead {
  color: var(--se-muted);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
}

/* Load-in: one slow rise, lightly staggered (eyebrow, headline, lead) */
@keyframes se-rise {
  from {
    opacity: 0;
    transform: translate3d(0, var(--se-rise), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .se-in {
    animation: se-rise var(--se-duration) var(--se-ease) var(--d, 0ms) both;
  }
}

/* The Most Powerful Business Guide
   ========================================================================== */

.se-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 820px;
  padding: 220px 31px;
  text-align: center;
  background: linear-gradient(180deg, var(--se-teal) 0%, #061614 14%, #090e0d 34%, var(--bg) 56%, var(--bg) 100%);
}

.se-guide__title {
  margin-bottom: 26px;
  color: var(--text);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
}

.se-guide__text {
  max-width: 584px;
  margin: 0 auto;
  color: var(--se-muted);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
}

/* The book itself
   ========================================================================== */

.se-book {
  padding: 200px 31px 240px;
  background: var(--bg);
}

.se-book__head {
  margin-bottom: 120px;
  text-align: center;
}

.se-book__eyebrow {
  margin-bottom: 20px;
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}

.se-book__title {
  color: var(--text);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
}

.se-book__body {
  display: grid;
  grid-template-columns: 350px minmax(0, 590px);
  justify-content: center;
  align-items: center;
  gap: 120px;
  max-width: 1100px;
  margin: 0 auto;
}

.se-cover {
  margin: 0;
}

.se-cover__frame {
  padding: 24px;
  background: linear-gradient(160deg, #151716 0%, #0f1110 55%, #121614 100%);
  border: 1px solid #232826;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
  transition:
    transform 700ms var(--se-ease),
    border-color 700ms var(--se-ease),
    box-shadow 700ms var(--se-ease);
}

.se-cover__img {
  width: 100%;
  border-radius: 8px;
}

.se-details__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.se-details__list li {
  position: relative;
  padding-left: 32px;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}

.se-details__list li::before {
  content: "";
  position: absolute;
  top: calc(0.9em - 3px);
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-eyebrow);
}

.se-details__note {
  margin-top: 48px;
  color: var(--se-muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
}

/* Where it lives
   ========================================================================== */

.se-core {
  padding: 200px 31px 240px;
  background: var(--bg);
  text-align: center;
}

.se-core__head {
  margin-bottom: 110px;
}

.se-core__title {
  margin-bottom: 26px;
  color: var(--text);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
}

.se-core__text {
  color: var(--se-muted);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
}

.se-core__text strong,
.se-final__text strong {
  color: var(--text);
  font-weight: 500;
}

.se-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 450px));
  justify-content: center;
  gap: 31px;
  max-width: 931px;
  margin: 0 auto 64px;
  text-align: left;
}

.se-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 25px 24px 30px;
  background: var(--bg-card);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
}

/* Localised light (desktop hover only); position is set by the pointer */
.se-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 30%),
    var(--se-card-light, rgba(255, 255, 255, 0.035)),
    transparent 70%
  );
  transition: opacity 600ms var(--se-ease);
}

.se-card--operator {
  --se-card-light: rgba(10, 168, 89, 0.06);
  border-color: #24302a;
  box-shadow: 0 0 40px 0 rgba(10, 168, 89, 0.05);
}

.se-card--inner {
  --se-card-light: rgba(145, 20, 20, 0.08);
  border-color: #2e2323;
  box-shadow: 0 0 40px 0 rgba(107, 0, 0, 0.08);
}

.se-card__label,
.se-card__title,
.se-card__body {
  transition:
    transform 600ms var(--se-ease),
    color 600ms var(--se-ease);
}

.se-card__label {
  color: rgba(230, 230, 230, 0.82);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.se-card--operator .se-card__label {
  color: var(--green-eyebrow);
}

.se-card--inner .se-card__label {
  color: var(--se-red);
}

.se-card__title {
  margin: 14px 0 12px;
  color: var(--text);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.3;
}

.se-card__body {
  color: var(--text);
  font-size: 15px;
  font-weight: 200;
  line-height: 1.8;
}

/* Final
   ========================================================================== */

.se-final {
  padding: 280px 31px 320px;
  background: var(--bg);
  text-align: center;
}

.se-final__eyebrow {
  margin-bottom: 20px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
}

.se-final__title {
  margin-bottom: 30px;
  color: var(--text);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
}

.se-final__text {
  margin-bottom: 72px;
  color: var(--se-muted);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
}

/* Section reveals: groups rise once, slowly
   ========================================================================== */

.js .se-reveal,
.js .se-card {
  opacity: 0;
  transform: translate3d(0, var(--se-rise), 0);
  transition:
    opacity var(--se-duration) var(--se-ease),
    transform var(--se-duration) var(--se-ease);
}

.js .se-card {
  transition-delay: calc(var(--i, 0) * 150ms);
}

.js .se-reveal.is-in,
.js .se-card.is-in {
  opacity: 1;
  transform: none;
}

/* Once settled, cards hand their transitions to the hover styles */
.js .se-card.is-settled {
  transition:
    border-color 600ms var(--se-ease),
    box-shadow 600ms var(--se-ease);
  transition-delay: 0ms;
}

/* Hover (desktop pointers only)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .se-cover:hover .se-cover__frame {
    transform: translate3d(0, -3px, 0);
    border-color: #2c3430;
    box-shadow: 0 30px 56px -28px rgba(0, 0, 0, 0.75);
  }

  .se-card:hover {
    border-color: var(--line-card-hover);
  }

  .se-card--operator:hover {
    border-color: #2f4036;
  }

  .se-card--inner:hover {
    border-color: #3d2a2a;
  }

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

  .se-card:hover .se-card__label {
    color: var(--text-bright);
  }

  .se-card--operator:hover .se-card__label {
    color: var(--green-hover);
  }

  .se-card--inner:hover .se-card__label {
    color: #a82020;
  }

  .se-card:hover .se-card__label,
  .se-card:hover .se-card__title,
  .se-card:hover .se-card__body {
    transform: translate3d(0, -1px, 0);
  }
}

/* Tablet / small laptop
   ========================================================================== */

@media (max-width: 1100px) {
  .se-hero__title {
    font-size: clamp(52px, 6.4vw, 76px);
  }

  .se-hero__lead {
    font-size: 19px;
  }

  .se-guide__title {
    font-size: clamp(46px, 5.4vw, 60px);
  }

  .se-book__body {
    grid-template-columns: 300px minmax(0, 480px);
    gap: 72px;
  }
}

@media (max-width: 900px) {
  .se-hero {
    min-height: max(760px, 100svh);
  }

  .se-book__body {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
  }

  .se-cover__frame {
    padding: 18px;
  }

  .se-details__list li {
    font-size: 17px;
  }

  .se-cards {
    gap: 20px;
  }
}

/* Mobile: large editorial type, long calm rhythm
   ========================================================================== */

@media (max-width: 767px) {
  .se-hero {
    min-height: max(720px, 100svh);
    padding: 150px 20px 110px;
  }

  .se-hero__eyebrow {
    font-size: 15px;
  }

  .se-hero__title {
    margin-bottom: 26px;
    font-size: min(46px, 11.4vw);
  }

  .se-hero__lead {
    font-size: 18px;
    line-height: 1.8;
  }

  .se-guide {
    min-height: 0;
    padding: 200px 34px 240px;
  }

  .se-guide__title {
    margin-bottom: 24px;
    font-size: min(31px, 8vw);
    line-height: 1.3;
  }

  .se-guide__text {
    font-size: 18px;
    line-height: 1.8;
  }

  .se-book {
    padding: 160px 16px 200px;
  }

  .se-book__head {
    margin-bottom: 80px;
  }

  .se-book__eyebrow {
    font-size: 14px;
  }

  .se-book__title {
    font-size: 41px;
    line-height: 1.3;
  }

  .se-book__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 70px;
  }

  .se-cover {
    width: 230px;
  }

  .se-cover__frame {
    padding: 14px;
  }

  .se-cover__img {
    border-radius: 6px;
  }

  .se-details {
    max-width: 320px;
  }

  .se-details__list {
    gap: 18px;
  }

  .se-details__list li {
    padding-left: 26px;
    font-size: 14px;
  }

  .se-details__note {
    margin-top: 44px;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
  }

  .se-core {
    padding: 200px 16px 200px;
  }

  .se-core__head {
    margin-bottom: 80px;
  }

  .se-core__title {
    margin-bottom: 24px;
    font-size: 41px;
    line-height: 1.3;
  }

  .se-core__text {
    font-size: 14px;
    line-height: 1.8;
  }

  .se-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    margin-bottom: 60px;
  }

  .se-card {
    padding: 24px 17px 30px;
  }

  .se-card__label {
    font-size: 14px;
  }

  .se-card__title {
    margin: 10px 0 14px;
    font-size: 41px;
  }

  .se-card__body {
    font-size: 14px;
  }

  .se-final {
    padding: 260px 16px 300px;
  }

  .se-final__eyebrow {
    font-size: 14px;
  }

  .se-final__title {
    margin-bottom: 24px;
    font-size: 41px;
    line-height: 1.3;
  }

  .se-final__text {
    margin-bottom: 56px;
    font-size: 17px;
    line-height: 1.8;
  }

  /* Full-width CTA inside the 16px gutter; label stays on one line */
  .se-final__btn {
    width: 100%;
    max-width: 420px;
    padding: 12px 24px;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .se-book__title,
  .se-core__title,
  .se-card__title,
  .se-final__title {
    font-size: 36px;
  }
}

/* Reduced motion: everything present, nothing moves
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js .se-in {
    animation: none;
  }

  .js .se-reveal,
  .js .se-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .se-cover__frame,
  .se-card__label,
  .se-card__title,
  .se-card__body {
    transition: none;
  }
}