/* ============================================================
   PLAN Mogilev — smartstudios landing
   Faithful reproduction of Figma frame 1696:280 (1024 × 3789)
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p, h1, h2, h3, figure { margin: 0; }

/* ---- Design tokens ---- */
:root {
  --cream:    #FFFCE6;  /* page background / light text on dark   (fill_MVIFBZ) */
  --charcoal: #564949;  /* dark brown — booking band, icons        (fill_GXMA2R) */
  --brown:    #7C4C2A;  /* primary accent — buttons, badges        (fill_95IMG3) */
  --black:    #000000;  /* body text                               (fill_H27CBR) */
  --white:    #FFFFFF;  /* white text / light button               (fill_7T0J7P) */
  --grey:     #D9D9D9;  /* placeholder grey                        (fill_G8BL7X) */

  --sans:   'TikTok Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
  --serif:  Georgia, 'Times New Roman', serif;
  --script: 'Playball', cursive;

  --canvas-w: 1024px;
  --canvas-h: 4549px;   /* hero +100, then +660 for the advantages section */
}

/* ---- Page shell & responsive scaling ----
   The whole design is a fixed 1024px canvas. `.stage` clamps width and the
   inline script in index.html scales `.canvas` to fit narrower viewports,
   keeping the layout pixel-faithful at every width. */
body { background: var(--cream); font-family: var(--sans); color: var(--black); }

.stage { position: relative; width: 100%; overflow: hidden; }

.canvas {
  position: relative;
  width: var(--canvas-w);
  height: var(--canvas-h);
  background: var(--cream);
  transform-origin: top left;
  /* visible (not hidden) so the booking band can full-bleed past the 1024px
     box; .stage's overflow:hidden still clips everything to the viewport. */
  overflow: visible;
}

/* ---- Section base ----
   Every top-level section is absolutely positioned on the canvas.
   Children inside each section are also absolutely positioned relative
   to the section's top-left. */
.sec { position: absolute; }
.sec > * { position: absolute; }

/* Section offsets on the 1024×3889 canvas (left, top, width, height).
   Everything below the hero is shifted +100px vs the original to make room for
   the taller stacked hero. */
.sec--hero       { left: 67px;  top: 0;     width: 893px;  height: 500px; }
.sec--main       { left: 67px;  top: 512px; width: 891px;  height: 900px; }
.sec--advantages { left: 67px;  top: 1460px;width: 890px;  height: 660px; }
.sec--mission    { left: 67px;  top: 2145px;width: 890px;  height: 146px; }
.sec--steps      { left: 67px;  top: 2397px;width: 890px;  height: 331px; }
.sec--icons      { left: 67px;  top: 2775px;width: 810px;  height: 490px; }
.sec--maps       { left: 67px;  top: 3332px;width: 445px;  height: 461px; }
.sec--rules      { left: 571px; top: 3332px;width: 347px;  height: 459px; }
.sec--booking    { left: 0;     top: 3862px;width: 1024px; height: 420px; }
.sec--footer     { left: 67px;  top: 4351px;width: 886px;  height: 147px; }

/* ============================================================
   Typography utilities — one class per Figma text style.
   Section CSS should apply these for type, and only add
   position / width / color overrides.
   ============================================================ */
.ty-h2      { font: 500 32px/50px var(--sans); }            /* style_FNHQUZ  section headings   */
.ty-body    { font: 500 14px/20px var(--sans); }            /* style_3WCFK0  body               */
.ty-body-c  { font: 500 14px/20px var(--sans); text-align: center; } /* style_E9JQ1F        */
.ty-btn     { font: 500 16px/20px var(--sans); }            /* style_2ZYK56  button label       */
.ty-small   { font: 500 10px/20px var(--sans); }            /* style_8OJS1T  footer / 360 label */
.ty-stepnum { font: 700 32px/35px var(--sans); }            /* style_8O4WEG  step / badge number */
.ty-hero    { font: 500 48px/34px var(--sans); }            /* style_9ZR96Z  hero heading        */
.ty-mission { font: 500 24px/28px var(--sans); }            /* style_Y76MP5  mission paragraph    */
.ty-subhead { font: 500 32px/20px var(--sans); }            /* style_G9G0FB  "П'ять простих..."   */
.ty-quote   { font: italic 400 14px/20px var(--sans); }     /* style_WW4ZMD  subtitle (italic)    */
.ty-rulenum { font: 700 20px/20px var(--sans); }            /* style_ALYK3X  rule numbers 01–05    */
.ty-lang    { font: 500 12px/33px var(--sans); }            /* style_L5NIIC  language switcher      */
.ty-price   { font: 700 40px/20px var(--sans); }            /* style_EBZX3C  "4000"                */
.ty-week    { font: 500 24px/36px var(--sans); }            /* style_SUGINP  "тиждень"             */
.ty-bold    { font: 700 14px/20px var(--sans); }            /* style_3JJN3T  bold body              */
.ty-lead    { font: 500 24px/20px var(--sans); }            /* style_Q8E9ZD  "Бронюйте в пару..."  */
.ty-card7   { font: 500 14px/13px var(--sans); text-align: center; } /* style_MOWZJH          */
.ty-logo    { font: 500 82px/1 var(--sans); letter-spacing: -0.05em; } /* style_MBMHDB        */
.ty-script  { font: 400 170px/50px var(--script); }         /* style_K0E05X  big "7"               */

/* Inline emphasis helpers used inside rich-text blocks */
.em-serif   { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--brown); }
.em-32      { font-size: 32px; }
.em-bold    { font-weight: 700; }

/* Generic pill button (brown bg, light label) used in several sections */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brown); color: var(--white);
  border-radius: 30.5px;
}

/* Telegram paper-plane icon. Source SVG is dark (#564949); we recolour it
   per context via CSS mask + currentColor (light on brown buttons,
   charcoal on the cream booking button). */
.icon-tg {
  display: inline-block;
  /* Default: white paper-plane for brown/dark buttons.
     Booking section overrides this with the dark version (see sections.css fix). */
  background: url('assets/icons/telegram-mask.svg') no-repeat center / contain;
}
/* Booking button face is cream → use the dark paper-plane. */
.sec--booking .icon-tg { background-image: url('assets/icons/telegram.svg'); }

/* ---- Hover/active feedback on the in-page CTA buttons ---- */
.sec--hero .hero-cta,
.sec--steps .steps__cta,
.sec--maps .maps__btn,
.sec--booking .booking__btn {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
}
.sec--hero .hero-cta:hover,
.sec--steps .steps__cta:hover,
.sec--maps .maps__btn:hover {
  background-color: #6b4124;                       /* darker brown */
  box-shadow: 0 8px 22px rgba(86, 73, 73, .30);
  transform: translateY(-2px);
}
.sec--booking .booking__btn:hover {
  filter: brightness(.93);                         /* darken the cream face */
  box-shadow: 0 8px 22px rgba(0, 0, 0, .20);
  transform: translateY(-2px);
}
.sec--hero .hero-cta:active,
.sec--steps .steps__cta:active,
.sec--maps .maps__btn:active,
.sec--booking .booking__btn:active { transform: translateY(0); }

/* ---- Sticky floating CTA (fixed to the viewport bottom-right) ---- */
.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px;
  background: var(--brown);
  color: var(--white);
  border-radius: 56px;
  font: 500 16px/1 var(--sans);
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(86, 73, 73, .28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fab:hover  { background: #6b4124; box-shadow: 0 12px 30px rgba(86, 73, 73, .36); transform: translateY(-2px); }
.fab:active { transform: translateY(0); }
.fab__icon  { width: 24px; height: 24px; flex: none; }   /* .icon-tg paints it white */

@media (max-width: 480px) {
  .fab { right: 12px; bottom: 12px; height: 50px; padding: 0 18px; gap: 10px; font-size: 15px; }
  .fab__icon { width: 22px; height: 22px; }
}