/* =================================================================
   Plya Landing v5 - "Day Stage, long form"
   Light brand palette · Google Sans · Hebrew RTL · real app screenshots
   in device frames · editorial photography · scroll reveals.
   -----------------------------------------------------------------
   Shape rule: buttons + chips = pill · cards = 20px · inner = 12px
   Z-scale: header 100 · mobile-menu 99 · wa-fab 900
   Used by index.html only - secondary pages keep landing.css.
   ================================================================= */

/* -------- Google Sans font (brand) - self-hosted, variable wght 400..700, split by script -------- */
@font-face {
  font-family: 'Google Sans';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/google-sans/google-sans-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Google Sans';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/google-sans/google-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/google-sans/google-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =================================================================
   Tokens
   ================================================================= */
:root {
  --bg:        #FAFAFC;
  --bg-soft:   #F3F4FA;
  --surface:   #FFFFFF;
  --border:    #E8E8F1;
  --border-strong: #D9D9E8;

  --ink-900: #0F0B1F;
  --ink-800: #1E1829;
  --ink-700: #322B47;
  --ink-500: #5C566B;
  --ink-400: #6B6579;

  --brand-100: #EEEFFD;
  --brand-200: #DADCFB;
  --brand-300: #B5BAF8;
  --brand-500: #7D87F5;
  --brand-600: #6A74E8;

  --accent:       #3F47B0;  /* text accent on light */
  --accent-fill:  #5B63E0;  /* action fill, white ink */
  --accent-hover: #4A52CF;
  --accent-ink:   #FFFFFF;

  --stage-900: #110E24;     /* dark section base */
  --stage-800: #1B1733;

  --success: #1FA56E;
  --star:    #F2A51A;

  --shadow-sm: 0 1px 2px rgba(30,24,41,.06), 0 2px 8px -2px rgba(30,24,41,.06);
  --shadow-md: 0 10px 28px -10px rgba(40,33,80,.16), 0 4px 10px -6px rgba(40,33,80,.08);
  --shadow-lg: 0 32px 64px -24px rgba(40,33,80,.28), 0 12px 24px -12px rgba(40,33,80,.12);
  --shadow-device: 0 40px 80px -30px rgba(17,14,36,.45), 0 16px 32px -16px rgba(17,14,36,.25);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --font-sans: 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --container: 1200px;
  --header-h: 68px;

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  color-scheme: light;
}

/* =================================================================
   Reset
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--bg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--accent-fill); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 1001;
  transform: translateY(-200%);
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* =================================================================
   Layout primitives
   ================================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.section { padding-block: clamp(72px, 8vw, 120px); position: relative; scroll-margin-top: calc(-1 * clamp(28px, 4vw, 56px)); }
.section--tint { background: var(--bg-soft); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.12; color: var(--ink-900); text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 3.6vw, 46px); }
h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; }
.display-1 { font-size: clamp(34px, 3.8vw, 50px); line-height: 1.08; }
.mark { color: var(--accent); }
.lead { font-size: clamp(17px, 1.35vw, 19.5px); color: var(--ink-500); line-height: 1.6; text-wrap: pretty; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 720px; }
.section-head .lead { margin-top: var(--sp-4); }
.section-head--center { margin-inline: auto; text-align: center; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  min-height: 46px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn .arrow { width: 18px; height: 18px; }
.btn--primary { background: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 10px 24px -10px rgba(91,99,224,.55); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--surface); color: var(--ink-800); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--ink-400); background: var(--bg-soft); }
.btn--ghost { background: transparent; color: var(--ink-700); }
.btn--ghost:hover { background: var(--bg-soft); }
.btn--light { background: #fff; color: var(--ink-900); }
.btn--light:hover { background: var(--brand-100); }
.btn--sm { padding: 9px 18px; font-size: 14.5px; min-height: 38px; }
.btn--lg { padding: 17px 34px; font-size: 17.5px; min-height: 58px; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-6);
  font-weight: 600;
  color: var(--accent);
}
.link-more svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.link-more:hover svg { transform: translateX(-4px); }

/* -------- Checklist -------- */
.checks { display: grid; gap: 12px; margin-top: var(--sp-6); }
.checks li {
  position: relative;
  padding-inline-start: 34px;
  font-size: 17px;
  color: var(--ink-800);
}
.checks li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F47B0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;
}
.checks--light li { color: #fff; }
.checks--light li::before { background-color: rgba(255,255,255,.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5BAF8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); }

/* =================================================================
   Header
   ================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(250,250,252,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--sp-4); }
.brand { display: inline-flex; align-items: center; }
.brand__logo { width: 40px; height: 40px; }
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-700);
}
.site-nav a:hover { background: var(--bg-soft); color: var(--ink-900); }
.site-nav a.is-active { color: var(--accent); }
.site-header__cta { display: flex; align-items: center; gap: var(--sp-2); }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle:hover { background: var(--bg-soft); }

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h);
  inset-inline: 0;
  z-index: 99;
  padding: var(--sp-4) var(--sp-6) var(--sp-8);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  flex-direction: column;
  gap: 2px;
}
.mobile-menu.is-open { display: flex; animation: menuDown var(--t-base) var(--ease-out); }
@keyframes menuDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-menu a { padding: 14px 16px; font-size: 18px; font-weight: 500; color: var(--ink-800); border-radius: var(--r-md); }
.mobile-menu a:hover, .mobile-menu a:focus-visible { background: var(--bg-soft); }
.mobile-menu .btn { margin-top: var(--sp-3); justify-content: center; }

@media (max-width: 960px) {
  .site-nav, .login-link { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* =================================================================
   Device frames
   ================================================================= */
.laptop {
  position: relative;
  padding: 4px 4px 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, #2A2540, #15122A);
  box-shadow: var(--shadow-device), inset 0 1px 0 rgba(255,255,255,.08);
}
.laptop > img { border-radius: 12px; width: 100%; height: auto; }
.laptop::after {
  content: '';
  position: absolute;
  inset-inline: -4%;
  bottom: -14px;
  height: 14px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #D9D9E6, #B9B9CC);
  box-shadow: 0 10px 20px -10px rgba(17,14,36,.4);
}
.phone {
  position: relative;
  padding: 5px;
  border-radius: 22px;
  background: linear-gradient(180deg, #2A2540, #15122A);
  box-shadow: var(--shadow-device), inset 0 1px 0 rgba(255,255,255,.08);
}
.phone > img { border-radius: 17px; width: 100%; height: auto; }

/* =================================================================
   Hero
   ================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px);
  background:
    radial-gradient(70% 60% at 0% 10%, rgba(125,135,245,.20) 0%, rgba(125,135,245,.06) 45%, transparent 72%),
    radial-gradient(40% 40% at 90% 100%, rgba(181,186,248,.18) 0%, transparent 60%),
    var(--bg);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.hero__copy { max-width: 640px; }
.hero__sub {
  margin-top: var(--sp-6);
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--ink-500);
  max-width: 44ch;
  line-height: 1.55;
  text-wrap: pretty;
}
.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-8); }
.hero__visual {
  position: relative;
  padding-block: 24px 48px;
  padding-inline-end: clamp(48px, 7vw, 96px);
}
.hero__visual .laptop { width: 100%; }
.phone--hero {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 27%;
  min-width: 150px;
}
.anim .hero__copy > * { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease-out) forwards; }
.anim .hero__copy > :nth-child(2) { animation-delay: .1s; }
.anim .hero__copy > :nth-child(3) { animation-delay: .2s; }
.anim .hero__visual { opacity: 0; transform: translateY(24px) scale(.98); animation: rise 1s .15s var(--ease-out) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 620px; }
  .hero__visual { padding-inline-end: 56px; max-width: 640px; }
}
@media (max-width: 520px) {
  .hero { padding-top: var(--sp-8); }
  .hero__visual { padding-inline-end: 40px; padding-bottom: 36px; }
  .phone--hero { width: 31%; min-width: 120px; }
  .phone { padding: 3px; border-radius: 16px; }
  .phone > img { border-radius: 13px; }
  .laptop { padding: 2px 2px 3px; border-radius: 12px; }
  .laptop > img { border-radius: 10px; }
  .laptop::after { height: 10px; bottom: -10px; }
}


/* -------- Breadcrumb (sub pages) -------- */
.crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-5); font-size: 14px; color: var(--ink-400); }
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { opacity: .5; }
.anim .hero__copy > .crumbs { animation-delay: 0s; }
.anim .hero__copy > :nth-child(2) { animation-delay: .05s; }
.anim .hero__copy > :nth-child(3) { animation-delay: .12s; }
.anim .hero__copy > :nth-child(4) { animation-delay: .2s; }

/* -------- Stage with a laptop instead of a phone (music page) -------- */
.stage__grid--wide { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.laptop--stage { width: 100%; }
@media (max-width: 960px) { .stage__grid--wide { grid-template-columns: 1fr; } }

/* =================================================================
   Trust chips
   ================================================================= */
.chips { padding-block: var(--sp-2) var(--sp-10); }
.chips__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.chips__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink-800);
}
.chips__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-100);
  color: var(--accent);
}
.chips__icon svg { width: 22px; height: 22px; }
@media (max-width: 960px) { .chips__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .chips__list { grid-template-columns: 1fr; } }

/* =================================================================
   Stats strip
   ================================================================= */
.stats { border-block: 1px solid var(--border); }
.stats__inner {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  align-items: center;
  gap: var(--sp-10);
  padding-block: var(--sp-10);
}
.stats__intro { font-size: 16px; color: var(--ink-500); max-width: 20ch; line-height: 1.45; }
.stats__item { border-inline-start: 1px solid var(--border); padding-inline-start: var(--sp-8); }
.stats__num {
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.star { color: var(--star); font-size: .6em; }
.stats__label { margin-top: 8px; color: var(--ink-500); font-size: 15.5px; }
@media (max-width: 960px) {
  .stats__inner { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .stats__intro { grid-column: 1 / -1; max-width: none; }
  .stats__item:first-of-type { border: 0; padding: 0; }
}
@media (max-width: 520px) {
  .stats__inner { grid-template-columns: 1fr 1fr; }
  .stats__item { padding-inline-start: var(--sp-4); }
}

/* =================================================================
   Story (photo + phone)
   ================================================================= */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.story__copy .lead { margin-top: var(--sp-5); }
.story__visual { position: relative; padding-inline-start: 56px; padding-bottom: 40px; }
.story__photo {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.phone--story {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 33%;
  min-width: 150px;
}
@media (max-width: 960px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__visual { max-width: 560px; }
}
@media (max-width: 520px) {
  .story__visual { padding-inline-start: 40px; padding-bottom: 28px; }
  .phone--story { width: 30%; min-width: 0; max-width: 112px; }
}

/* =================================================================
   Features grid
   ================================================================= */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.feature {
  padding: 28px 26px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature--accent {
  background: linear-gradient(160deg, var(--brand-100), #fff 70%);
  border-color: var(--brand-200);
}
.feature__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-100);
  color: var(--accent);
  margin-bottom: var(--sp-5);
}
.feature--accent .feature__icon { background: var(--accent-fill); color: #fff; }
.feature__icon svg { width: 24px; height: 24px; }
.feature p { margin-top: 10px; color: var(--ink-500); font-size: 16px; line-height: 1.55; }
@media (max-width: 960px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

/* =================================================================
   Stage (dark, photo)
   ================================================================= */
.stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--stage-900);
  color: #fff;
}
.stage__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
  z-index: -2;
  opacity: .9;
}
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(17,14,36,.92) 0%, rgba(17,14,36,.78) 45%, rgba(17,14,36,.35) 100%),
    linear-gradient(180deg, rgba(17,14,36,.4), rgba(17,14,36,.55));
}
.stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.stage h2 { color: #fff; }
.stage .lead { color: rgba(255,255,255,.78); margin-top: var(--sp-5); }
.stage .btn { margin-top: var(--sp-8); }
.stage__visual { display: flex; justify-content: center; }
.phone--stage { width: min(300px, 70%); }
@media (max-width: 960px) {
  .stage__grid { grid-template-columns: 1fr; }
  .stage::before { background: linear-gradient(180deg, rgba(17,14,36,.9) 0%, rgba(17,14,36,.78) 100%); }
  .phone--stage { width: min(260px, 60%); }
}

/* =================================================================
   Inside look
   ================================================================= */
.inside {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.inside__main { position: relative; padding-inline-start: var(--sp-4); }
.laptop--inside { margin-bottom: 18px; }
.callout {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 0 0 6px rgba(91,99,224,.28), 0 8px 18px -6px rgba(17,14,36,.5);
  z-index: 2;
}
.anim .callout:not(.callout--static) { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(91,99,224,.28), 0 8px 18px -6px rgba(17,14,36,.5); } 50% { box-shadow: 0 0 0 12px rgba(91,99,224,.12), 0 8px 18px -6px rgba(17,14,36,.5); } }
.callout--static { position: static; transform: none; flex: none; box-shadow: none; }
.inside__legend { display: grid; gap: var(--sp-5); }
.inside__legend li { display: flex; gap: 14px; align-items: flex-start; }
.inside__legend h3 { font-size: 18px; }
.inside__legend p { margin-top: 4px; color: var(--ink-500); font-size: 15.5px; line-height: 1.5; }
.inside__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: clamp(48px, 6vw, 80px);
}
.shot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.shot img { border-radius: 10px; width: 100%; height: auto; border: 1px solid var(--border); }
.shot figcaption { padding: 16px 10px 8px; color: var(--ink-500); font-size: 15.5px; line-height: 1.5; }
.shot figcaption strong { display: block; color: var(--ink-900); font-size: 17px; margin-bottom: 2px; }
@media (max-width: 960px) {
  .inside { grid-template-columns: 1fr; }
  .inside__main { padding-inline-start: 0; }
  .inside__legend { grid-template-columns: repeat(3, 1fr); }
  .inside__legend li { flex-direction: column; }
}
@media (max-width: 640px) {
  .inside__legend, .inside__grid { grid-template-columns: 1fr; }
  .callout { width: 26px; height: 26px; font-size: 13px; }
}

/* =================================================================
   Event types
   ================================================================= */
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.type {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.type:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.type img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; transition: transform .8s var(--ease-out); }
.type:hover img { transform: scale(1.03); }
.type__body { padding: 22px 24px 26px; }
.type__body p { margin-top: 8px; color: var(--ink-500); font-size: 16px; line-height: 1.55; }
@media (max-width: 960px) { .types { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* =================================================================
   Steps
   ================================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  counter-reset: step;
}
.step { position: relative; padding-top: var(--sp-2); }
.step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: var(--sp-5);
}
.step::before {
  content: '';
  position: absolute;
  top: calc(var(--sp-2) + 22px);
  inset-inline-start: 56px;
  inset-inline-end: -12px;
  height: 1px;
  border-top: 2px dashed var(--brand-200);
}
.step:last-child::before { display: none; }
.step h3 { font-size: 19px; }
.step p { margin-top: 8px; color: var(--ink-500); font-size: 16px; line-height: 1.55; }
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-10); }
  .step:nth-child(2)::before { display: none; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; row-gap: var(--sp-8); }
  .step::before { display: none; }
}

/* =================================================================
   Pricing
   ================================================================= */
.pricing-toggle {
  display: inline-flex;
  margin-top: var(--sp-6);
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.pricing-toggle button {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}
.pricing-toggle button.is-active { background: var(--ink-900); color: #fff; }
.badge-save { font-size: 12.5px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--success); color: #fff; font-weight: 600; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 26px 30px;
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, var(--brand-100), #fff 38%);
}
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.plan__name { font-size: 20px; font-weight: 700; color: var(--ink-900); }
.plan__badge { font-size: 13px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--bg-soft); color: var(--ink-500); font-weight: 600; }
.plan__badge--hot { background: var(--accent-fill); color: #fff; }
.plan__price-row { display: flex; align-items: baseline; gap: 4px; margin-top: var(--sp-5); font-variant-numeric: tabular-nums; }
.plan__currency { font-size: 22px; font-weight: 600; color: var(--ink-700); margin-inline-end: 2px; }
.plan__price { font-size: 52px; font-weight: 700; line-height: 1; color: var(--ink-900); }
.plan__period { color: var(--ink-500); font-size: 16px; }
.plan__original { margin-inline-start: 8px; color: var(--ink-400); text-decoration: line-through; font-size: 17px; }
.plan__original:empty { display: none; }
.plan__note { margin-top: 8px; color: var(--ink-500); font-size: 14.5px; min-height: 22px; }
.plan__cta { width: 100%; margin-top: var(--sp-5); }
.plan__features { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); display: grid; gap: 11px; }
.plan__features li { position: relative; padding-inline-start: 30px; font-size: 16px; color: var(--ink-800); }
.plan__features li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F47B0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan__features li.is-off { color: var(--ink-400); }
.plan__features li.is-off::before {
  background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6579' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/12px no-repeat;
}
.pricing-note { margin-top: var(--sp-8); text-align: center; color: var(--ink-500); font-size: 14.5px; }
@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan--featured { order: -1; }
}

/* =================================================================
   Testimonials
   ================================================================= */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.quote {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.quote__stars { color: var(--star); letter-spacing: 2px; font-size: 16px; }
.quote p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--ink-800); flex: 1; }
.quote footer { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-5); }
.quote__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-100);
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
  flex: none;
}
.quote__name { font-weight: 700; color: var(--ink-900); font-size: 16px; }
.quote__role { color: var(--ink-500); font-size: 14.5px; }
@media (max-width: 960px) { .quotes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* =================================================================
   FAQ
   ================================================================= */
.faq { max-width: 760px; margin-inline: auto; display: grid; gap: var(--sp-3); }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 22px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.faq details[open] { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  padding-inline-end: 36px;
  position: relative;
  font-weight: 600;
  font-size: 17.5px;
  color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F47B0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform var(--t-base) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 0 20px; color: var(--ink-500); font-size: 16.5px; line-height: 1.6; max-width: 62ch; }

/* =================================================================
   Finale
   ================================================================= */
.finale { position: relative; overflow: hidden; isolation: isolate; background: var(--stage-900); }
.finale__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.finale::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17,14,36,.55), rgba(17,14,36,.85)); }
.finale__card {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  background: rgba(250,250,252,.96);
  border-radius: 28px;
  padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 56px);
  box-shadow: var(--shadow-lg);
}
.finale__card p { margin-top: var(--sp-4); color: var(--ink-500); font-size: 18px; max-width: 46ch; margin-inline: auto; }
.finale__btns { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-8); }
.finale__contact { display: flex; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-6); color: var(--ink-500); font-size: 15.5px; flex-wrap: wrap; }
.finale__contact a { font-weight: 600; color: var(--ink-700); direction: ltr; unicode-bidi: isolate; }
.finale__contact a:hover { color: var(--accent); }

/* =================================================================
   Footer - brand + social, three link columns, ACUM credit, bottom bar
   ================================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink-500);
  padding: clamp(64px, 7vw, 96px) 0 var(--sp-8);
}
.site-footer a { color: var(--ink-500); transition: color var(--t-fast) var(--ease); }
.site-footer a:hover { color: var(--ink-900); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--sp-10);
}
.footer-brand .brand { color: var(--ink-900); }
.footer-brand .brand__logo { width: 40px; height: 40px; }
.footer-brand p { margin-top: var(--sp-5); font-size: 15.5px; max-width: 34ch; line-height: 1.65; color: var(--ink-500); }
.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); list-style: none; padding: 0; }
.footer-social a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--ink-700);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.footer-social a:hover { border-color: var(--ink-900); color: var(--ink-900); background: var(--surface); }
.footer-social svg { width: 20px; height: 20px; }
.footer-col h4 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin-bottom: var(--sp-5); letter-spacing: 0; text-transform: none; }
.footer-col ul { display: grid; gap: 14px; list-style: none; padding: 0; }
.footer-col a { font-size: 16px; }
.footer-acum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.footer-acum img { width: 60px; height: auto; }
.footer-acum p { font-size: 15.5px; color: var(--ink-500); margin: 0; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-6);
  font-size: 14.5px;
  color: var(--ink-400);
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* =================================================================
   Sub-page head (legal pages)
   ================================================================= */
.page-head {
  padding-block: clamp(40px, 5vw, 64px) clamp(28px, 3vw, 40px);
  background:
    radial-gradient(70% 60% at 0% 10%, rgba(125,135,245,.18) 0%, rgba(125,135,245,.05) 45%, transparent 72%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.page-head h1 { font-size: clamp(32px, 4vw, 46px); }
.page-head .crumbs { margin-bottom: var(--sp-4); }

/* =================================================================
   Legal pages - reading column
   ================================================================= */
.legal { padding-bottom: clamp(64px, 7vw, 96px); }
.legal__shell { max-width: 780px; margin-inline: auto; padding-top: clamp(32px, 4vw, 48px); }
.legal__updated {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--sp-4);
  background: var(--brand-100);
  color: var(--accent);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 600;
}
.legal__updated svg { width: 14px; height: 14px; }
.legal h2 {
  font-size: 23px;
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 18px; margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.legal p, .legal ul, .legal ol, .legal table { font-size: 16.5px; line-height: 1.75; color: var(--ink-700); margin-bottom: var(--sp-4); }
.legal ul, .legal ol { padding-inline-start: var(--sp-6); }
.legal ul li, .legal ol li { margin-bottom: 6px; list-style: disc; }
.legal ol li { list-style: decimal; }
.legal a { color: var(--accent); border-bottom: 1px solid rgba(125,135,245,.35); }
.legal a:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.legal strong { color: var(--ink-900); }
.legal table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.legal th, .legal td { text-align: start; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 15px; vertical-align: top; }
.legal th { background: var(--bg-soft); font-weight: 600; color: var(--ink-900); font-size: 14px; }
.legal tbody tr:last-child td { border-bottom: none; }
.legal__contact-card {
  margin-top: var(--sp-10);
  padding: var(--sp-6);
  background: var(--brand-100);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-lg);
}
.legal__contact-card h3 { margin-top: 0; color: var(--accent); }
@media (max-width: 640px) {
  .legal table { display: block; overflow-x: auto; }
}

/* =================================================================
   404
   ================================================================= */
.notfound {
  position: relative;
  min-height: calc(100dvh - var(--header-h));
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(56px, 8vw, 120px) var(--sp-6);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(125,135,245,.20) 0%, rgba(125,135,245,.05) 50%, transparent 75%),
    var(--bg);
}
.notfound__aurora { display: none; }
.notfound__big {
  font-size: clamp(88px, 18vw, 180px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-200);
  letter-spacing: -.04em;
}
.notfound h1 { margin-top: var(--sp-3); font-size: clamp(28px, 3.5vw, 40px); }
.notfound p { margin: var(--sp-4) auto 0; max-width: 42ch; color: var(--ink-500); font-size: 18px; }
.notfound__btns { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-8); }

/* =================================================================
   WhatsApp FAB
   ================================================================= */
.wa-fab {
  position: fixed;
  inset-inline-start: 20px;
  bottom: 20px;
  z-index: 900;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(37,211,102,.6);
  transition: transform var(--t-fast) var(--ease);
}
.wa-fab:hover { transform: translateY(-2px) scale(1.04); }
.wa-fab svg { width: 28px; height: 28px; }

/* =================================================================
   Scroll reveal (motion gated)
   ================================================================= */
.anim [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.anim [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}