/* START.CSS - Story-led introduction reached from the printed HostHavn flyer. */

.start-page {
  --start-ink: #10261a;
  --start-muted: #607068;
  --start-green: #087c3d;
  --start-green-dark: #0c4329;
  --start-line: #dce8e0;
  --start-cream: #fbfaf5;
  color: var(--start-ink);
  overflow: hidden;
  padding-top: 60px;
}

.start-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.start-eyebrow {
  margin: 0 0 1rem;
  color: var(--start-green);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.start-hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  padding: 5.5rem 0;
  background:
    radial-gradient(circle at 84% 25%, rgba(42, 153, 91, .14), transparent 28%),
    linear-gradient(145deg, #fdfcf8 0%, #f5faf6 55%, #edf7f0 100%);
  border-bottom: 1px solid var(--start-line);
}

.start-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  bottom: -220px;
  border: 1px solid rgba(8, 124, 61, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(8, 124, 61, .035), 0 0 0 108px rgba(8, 124, 61, .025);
}

.start-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
  gap: 5rem;
  align-items: center;
}

.start-hero h1 {
  max-width: 650px;
  margin: 0;
  color: #0b2216;
  font-size: clamp(3rem, 5.8vw, 5.35rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.start-hero h1 span {
  display: block;
  color: var(--start-green);
}

.start-hero__lead {
  max-width: 650px;
  margin: 1.75rem 0 0;
  color: #46574e;
  font-size: 1.13rem;
  line-height: 1.75;
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.start-button {
  appearance: none;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.start-button:hover { transform: translateY(-2px); }
.start-button--primary { background: var(--start-green); color: #fff; box-shadow: 0 10px 24px rgba(8, 124, 61, .18); }
.start-button--primary:hover { background: #066d35; }
.start-button--secondary { background: #fff; color: var(--start-green-dark); border-color: #b7cbbd; }
.start-button--secondary:hover { box-shadow: 0 8px 22px rgba(16, 38, 26, .09); }

.start-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.2rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  color: #4b5f54;
  font-size: .83rem;
  font-weight: 600;
}

.start-proof li::before { content: "✓"; margin-right: .45rem; color: var(--start-green); font-weight: 700; }

.start-workspace {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(13, 86, 45, .16);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(20, 62, 37, .14), 0 3px 12px rgba(20, 62, 37, .08);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}

.start-workspace__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  padding: .75rem 1rem;
  background: #135c36;
  color: #fff;
  font-weight: 700;
}

.start-workspace__mark, .start-workspace__user {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
}

.start-workspace__user { margin-left: auto; border-radius: 50%; font-size: .7rem; }

.start-workspace__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  padding: 1.2rem;
  background: linear-gradient(145deg, #f7faf8, #eef5f0);
}

.start-service {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: .7rem;
  align-items: center;
  min-height: 88px;
  padding: .9rem;
  background: #fff;
  border: 1px solid #dfe8e2;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(20, 62, 37, .045);
}

.start-service > span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; background: #e7f5eb; color: var(--start-green); font-size: 1.2rem; }
.start-service strong { align-self: end; font-size: .9rem; }
.start-service small { align-self: start; color: #718078; font-size: .7rem; }
.start-service--calendar > span, .start-service--contacts > span { background: #eef2fb; color: #3e5b8f; }
.start-service--board > span { background: #f4effb; color: #715399; }
.start-service--web > span { background: #fff5df; color: #9b6712; }

.start-workspace__footer {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.2rem;
  color: #66776d;
  font-size: .72rem;
}

.start-workspace__footer span { width: 8px; height: 8px; border-radius: 50%; background: #25a55b; box-shadow: 0 0 0 4px #e4f5ea; }

.start-section { padding: 7rem 0; }
.start-section__header { max-width: 760px; margin-bottom: 3.2rem; }
.start-section__header h2, .start-simple h2, .start-control h2, .start-contact h2 { margin: 0; color: var(--start-ink); font-size: clamp(2rem, 3.5vw, 3.2rem); letter-spacing: -.035em; }
.start-section__header > p:last-child, .start-simple__copy > p, .start-control > div:last-child > p, .start-contact p { max-width: 720px; margin-top: 1rem; color: var(--start-muted); font-size: 1.05rem; line-height: 1.75; }

.start-section--story { background: #fff; }
.start-day { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.start-day::before { content: ""; position: absolute; top: 62px; left: 5%; right: 5%; height: 1px; background: #b9d1c1; }
.start-day li { position: relative; padding-right: 2rem; }
.start-day time { display: block; margin-bottom: 1rem; color: #7b8b82; font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.start-day__icon { position: relative; z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 1.35rem; border: 6px solid #fff; border-radius: 50%; background: var(--start-green); color: #fff; font-size: .76rem; font-weight: 700; box-shadow: 0 0 0 1px #a9c8b3; }
.start-day h3 { margin-bottom: .65rem; font-size: 1.08rem; }
.start-day p { color: var(--start-muted); font-size: .9rem; line-height: 1.65; }
.start-day li span { color: var(--start-green); font-size: .72rem; font-weight: 700; }

.start-section--simple { background: var(--start-cream); border-block: 1px solid #ece9df; }
.start-simple { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7rem; align-items: start; }
.start-text-link { display: inline-block; margin-top: 1rem; color: var(--start-green); font-weight: 700; text-decoration: none; }
.start-text-link:hover { text-decoration: underline; }
.start-simple__steps { display: grid; gap: 0; border-top: 1px solid #d7e2da; }
.start-simple__steps article { display: grid; grid-template-columns: 54px 1fr; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid #d7e2da; }
.start-simple__steps article > span { color: var(--start-green); font-size: .76rem; font-weight: 700; letter-spacing: .1em; }
.start-simple__steps h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.start-simple__steps p { margin: 0; color: var(--start-muted); font-size: .9rem; line-height: 1.65; }

.start-section--guides { background: #f3f7f4; }
.start-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.start-guide { overflow: hidden; background: #fff; border: 1px solid #dce7df; border-radius: 12px; box-shadow: 0 8px 28px rgba(23, 65, 40, .06); }
.start-guide__visual { position: relative; display: grid; height: 190px; place-items: center; background-color: #e7f1ea; background-image: linear-gradient(135deg, rgba(8,124,61,.04) 25%, transparent 25%), linear-gradient(225deg, rgba(8,124,61,.05) 25%, transparent 25%); background-size: 44px 44px; }
.start-guide__visual--work { background-color: #edf1f6; }
.start-guide__visual--admin { background-color: #f3efe8; }
.start-guide__play { display: grid; width: 56px; height: 56px; place-items: center; padding-left: 4px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(12, 67, 41, .88); color: white; box-shadow: 0 9px 25px rgba(12,67,41,.2); }
.start-guide > div:last-child { padding: 1.35rem 1.4rem 1.55rem; }
.start-guide__status { display: inline-block; margin-bottom: .75rem; color: #718078; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.start-guide h3 { margin-bottom: .5rem; font-size: 1.05rem; }
.start-guide p { margin: 0; color: var(--start-muted); font-size: .86rem; line-height: 1.6; }

.start-section--control { background: #fff; }
.start-control { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.start-control__visual { min-height: 310px; display: grid; place-items: center; position: relative; padding: 3rem; border-radius: 16px; background: #0d3f28; }
.start-control__shield { display: grid; width: 88px; height: 100px; place-items: center; color: #fff; font-size: 2rem; font-weight: 700; background: #168b4a; clip-path: polygon(50% 0, 92% 15%, 88% 70%, 50% 100%, 12% 70%, 8% 15%); }
.start-control__line { width: 70%; height: 1px; margin-top: -1rem; background: rgba(255,255,255,.3); }
.start-control__nodes { display: flex; gap: .8rem; margin-top: -2rem; }
.start-control__nodes span { padding: .55rem .85rem; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; color: #dcebe2; font-size: .72rem; }
.start-checks { display: grid; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.start-checks li { font-size: .9rem; font-weight: 600; }
.start-checks li::before { content: "✓"; display: inline-grid; width: 22px; height: 22px; place-items: center; margin-right: .65rem; border-radius: 50%; background: #e5f4e9; color: var(--start-green); font-size: .7rem; }

.start-contact { padding: 5.5rem 0; background: #0d432a; color: #fff; }
.start-contact__grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 5rem; align-items: center; }
.start-contact .start-eyebrow { color: #8dd7aa; }
.start-contact h2 { color: #fff; }
.start-contact p { color: #c8dbcf; }
.start-button--light { background: #fff; color: #0d432a; }
.start-button--ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.start-button--ghost:hover { background: rgba(255,255,255,.08); }
.start-contact__details { display: flex; flex-direction: column; gap: .45rem; padding: 1.5rem; border-left: 1px solid rgba(255,255,255,.25); font-style: normal; }
.start-contact__details span { margin-bottom: .35rem; color: #8dd7aa; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.start-contact__details a { color: #fff; font-size: 1.08rem; font-weight: 700; text-decoration: none; }
.start-contact__details a:hover { text-decoration: underline; }
.start-contact__details small { max-width: 330px; margin-top: .7rem; color: #b8d0c0; line-height: 1.55; }

@media (max-width: 980px) {
  .start-hero__grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .start-workspace { max-width: 680px; transform: none; }
  .start-day { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .start-day::before { display: none; }
  .start-simple { grid-template-columns: 1fr; gap: 3.5rem; }
  .start-guides { grid-template-columns: 1fr; }
  .start-guide { display: grid; grid-template-columns: 280px 1fr; }
  .start-guide__visual { height: 100%; min-height: 180px; }
  .start-control { gap: 3rem; }
}

@media (max-width: 720px) {
  .start-page { padding-top: 60px; }
  .start-shell { width: min(100% - 30px, 1180px); }
  .start-hero { min-height: 0; padding: 4rem 0; }
  .start-hero h1 { font-size: clamp(2.7rem, 14vw, 4.1rem); }
  .start-hero__lead { font-size: 1rem; }
  .start-section { padding: 4.5rem 0; }
  .start-workspace__body { grid-template-columns: 1fr; }
  .start-day { grid-template-columns: 1fr; }
  .start-day li { display: grid; grid-template-columns: 56px 1fr; padding: 0; }
  .start-day time { grid-column: 2; margin: 0 0 .3rem; }
  .start-day__icon { grid-column: 1; grid-row: 1 / 4; }
  .start-day li > div:last-child { grid-column: 2; }
  .start-guide { display: block; }
  .start-guide__visual { min-height: 175px; }
  .start-control, .start-contact__grid { grid-template-columns: 1fr; gap: 3rem; }
  .start-control__visual { min-height: 250px; }
  .start-contact__details { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.25); padding-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .start-button { transition: none; }
}