:root {
  /* Colors pulled from the Canva draft — change freely */
  --hero-bg: #cdd5df;
  --plans-bg: #7a6438;
  /* The whole page uses ONE background color at a time.
     Upper page = --hero-bg, lower page = --plans-bg.
     It swaps while the screen is fully dark during the drop. */
  --page-bg: var(--hero-bg);
  --card-bg: rgba(200, 200, 200, 0.55);
  --button-bg: #b9d6f2;
  --text: #1d1d1f;
  --bar-height: 64px;

  /* TODO: put your background picture here */
  --hero-image: none; /* e.g. url("images/hero.jpg") */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html.locked, html.locked body { overflow: hidden; }
/* no scrollbar on the right of the home page (scrolling with the wheel / touch / keys still works) */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--page-bg);
}
body.theme-bottom { --page-bg: var(--plans-bg); }
.hero, .abyss, .plans { transition: background-color 0.3s; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; }

/* ---------- Bars (upper + lower) ----------
   Upper bar follows the screen only on the upper page,
   lower bar only on the lower page. In the abyss they stop following
   and slide back to their home spot (top / bottom of the page).
   JS switches position + plays the slide. */
.bar {
  position: fixed;
  left: 0; right: 0;
  will-change: transform;
  height: var(--bar-height);
  color: #fff;
  background: rgba(12, 12, 14, 0.62);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  z-index: 10;
}
/* Upper bar: fully transparent, floats over the hero.
   Text is dark to read on the light hero — if your background picture is dark,
   set --top-ink to #fff and --top-ink-soft to rgba(255,255,255,0.35) */
.bar--top {
  top: 0;
  --top-ink: #1d1d1f;
  --top-ink-soft: rgba(0, 0, 0, 0.2);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--top-ink);
}
.bar--top .bar-btn--ghost { color: var(--top-ink); border-color: var(--top-ink-soft); }
.bar--top .bar-btn--ghost:hover { background: rgba(0, 0, 0, 0.06); border-color: var(--top-ink); }
.bar--top .bar-btn--solid { color: #fff; background: var(--top-ink); border-color: var(--top-ink); }
.bar--top .bar-btn--solid:hover { background: #333; }
.bar--top .logo { box-shadow: 0 0 0 1px var(--top-ink-soft); }
.bar--bottom { top: 0; border-top:    1px solid rgba(255, 255, 255, 0.08); }

/* Same width + side padding for both bars so their edges line up */
.bar-inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bar-group { display: flex; align-items: center; gap: 12px; }

img.logo { object-fit: cover; display: block; }
.logo {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #222;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.2s;
}
.logo:hover { transform: scale(1.06); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }

/* Buttons: Dashboard = quiet outline, Log in = main filled button */
.bar-btn {
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 500;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.bar-btn--ghost {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.bar-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); }
.bar-btn--solid {
  color: #111;
  background: #fff;
  border: 1px solid #fff;
}
.bar-btn--solid:hover { background: #e9eef5; transform: translateY(-1px); }

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  display: grid; place-items: center;
  transition: background 0.2s, color 0.2s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.icon-btn svg { width: 18px; height: 18px; }
.footer-label { font-size: 14px; font-weight: 500; margin-right: 4px; }
.footer-link { font-size: 14px; color: rgba(255, 255, 255, 0.7); transition: color 0.2s; }
.footer-link:hover { color: #fff; }
.dot { color: rgba(255, 255, 255, 0.3); }

/* ---------- Darkness overlay (the "abyss") ---------- */
/* Covers the whole screen, under the bars. JS sets its opacity. */
#darkness {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
/* Light coming back after the drop (later: lamp light / picture) */
#darkness.light-return { transition: opacity 0.9s ease-out; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  background: var(--page-bg) var(--hero-image) center / cover no-repeat;
  display: grid;
  place-items: end center;               /* button sits in the lower part */
  padding: var(--bar-height) 24px var(--invite-gap);
}
/* Distance from the bottom of the screen to the invite button — bigger = higher */
:root { --invite-gap: 24vh; }
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
}
.hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4a5a6e;
  margin-bottom: 10px;
}
.hero-title {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(44px, 7vw, 76px);
  line-height: 1.05;
  color: #1d2633;
  margin-bottom: 16px;
}
.hero-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: #3d4a5c;
  max-width: 520px;
  margin-bottom: 32px;
}
/* Hero text + button appear one after another (quick, so the blurry text doesn't linger) */
.hero-content.appear > * { animation: softAppear 0.7s ease-out backwards;  /* backwards: no leftover style, so hover still works */ }
.hero-content.appear > :nth-child(1) { animation-delay: 0.1s; }
.hero-content.appear > :nth-child(2) { animation-delay: 0.3s; }
.hero-content.appear > :nth-child(3) { animation-delay: 0.5s; }
.hero-content.appear > :nth-child(4) { animation-delay: 0.75s; }
@keyframes softAppear {
  from { opacity: 0; filter: blur(3px); }
  to   { opacity: 1; filter: blur(0); }
}
.invite-btn {
  background: var(--button-bg);
  color: #1f2d3d;
  padding: 14px 40px;
  border-radius: 999px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.01em;
  transition: filter 0.2s, transform 0.2s;
}
.invite-btn:hover { filter: brightness(1.1); transform: scale(1.04); }

/* ---------- Abyss (scroll distance where the screen gets darker) ---------- */
.abyss {
  height: 250vh;           /* longer = slower fall */
  background: var(--page-bg);
}

/* ---------- Plans (bottom page) ---------- */
.plans {
  min-height: 100vh;
  background: var(--page-bg);
  display: grid;
  align-items: center;
  align-content: center;
  /* space shrinks on short screens so the switch + cards still fit without scrolling */
  gap: clamp(14px, 2.5vh, 32px);
  padding: calc(var(--bar-height) + clamp(8px, 1.5vh, 28px)) 24px calc(var(--bar-height) + clamp(12px, 3vh, 40px));
}
.plan-grid {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* ---------- Plan cards — "Price tag" style ---------- */
.plan-grid { align-items: stretch; }
.plan-card {
  position: relative;
  /* half see-through until you point at it */
  background: rgba(245, 241, 233, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2), background 0.35s, box-shadow 0.35s, border-color 0.35s;
}
/* point at it: becomes bright and lifts up */
.plan-card:hover {
  background: rgba(255, 253, 248, 0.97);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-14px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.25);
}
/* Pro stands out a little even before hover (uses "top" so it doesn't fight the animations) */
.plan-card.featured {
  top: -10px;
  background: rgba(255, 253, 248, 0.62);
  outline: 2px solid var(--button-bg);
}
.plan-card.featured:hover { background: rgba(255, 253, 248, 0.98); }
.ribbon {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: #1f2d3d;
  color: #fff;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2);
}
.plan-card:hover .ribbon { transform: translate(-50%, -6px); }
.plan-card h3, .modal h3 {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #1f2d3d;
}
.plan-tagline { font-size: 13.5px; color: #6b6458; margin: 2px 0 16px; }
.plan-price {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: #1f2d3d;
}
.plan-price small { font-size: 16px; font-weight: 500; color: #8a8273; margin-left: 6px; }
.plan-price.swap { animation: priceSwap 0.35s ease-out; }
@keyframes priceSwap { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Monthly / Yearly switch above the cards ---------- */
.billing {
  position: relative;
  justify-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: rgba(245, 241, 233, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  margin-bottom: 14px;     /* room for the "Most popular" tag on Pro */
  opacity: 0;
}
.billing-opt {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  padding: 7px 24px;
  border-radius: 999px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 500; font-size: 15px;
  color: #1f2d3d;
  white-space: nowrap;
  transition: color 0.3s;
}
.billing-opt[aria-pressed="true"] { color: #fff; }
.billing-opt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.billing-save {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--button-bg);
  color: #1f2d3d;
  font-size: 11.5px; font-weight: 600;
  vertical-align: 2px;
}
/* the dark knob slides left (Monthly) / right (Yearly) */
.billing-knob {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: #1f2d3d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2);
}
.billing.yearly .billing-knob { transform: translateX(100%); }
.plans.arrived .billing { opacity: 1; animation: whooshTop 0.7s cubic-bezier(.2,1.3,.4,1) 0.1s backwards; }
@keyframes whooshTop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
.plan-divider { border: none; height: 1px; background: rgba(0, 0, 0, 0.1); margin: 18px 0 16px; }
.plan-intro { font-size: 14px; line-height: 1.6; color: #3a3a3a; }
.plan-label { font-size: 12px; font-weight: 700; margin: 18px 0 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8273; }
.plan-list { list-style: none; flex: 1; display: grid; gap: 10px; align-content: start; }
.plan-list li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
.plan-list li b { color: #1f2d3d; }
.plan-list li::before {   /* round check icon */
  content: "";
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23b9d6f2'/%3E%3Cpath d='M6 10.3l2.6 2.5L14 7.5' fill='none' stroke='%231f2d3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.price { font-weight: 700; }
.apply-btn {
  align-self: center;
  margin-top: 18px;
  background: var(--button-bg);
  color: #1f2d3d;
  padding: 11px 30px;
  border-radius: 999px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  transition: filter 0.2s, transform 0.2s;
}
.apply-btn:hover { filter: brightness(1.08); transform: scale(1.04); }

/* Short card: no long intro / label, only the first 3 features */
.plan-card .plan-intro,
.plan-card .plan-label { display: none; }
.plan-card .plan-list li:nth-child(n+4) { display: none; }
.read-more {
  align-self: flex-start;
  margin-top: 14px;
  background: none;
  color: #2f5d8a;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}
.read-more::after { content: "\2192"; display: inline-block; margin-left: 5px; transition: transform 0.2s; }
.read-more:hover::after { transform: translateX(4px); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  right: 24px;
  bottom: calc(var(--bar-height) + 20px);   /* stays above the lower bar */
  z-index: 15;
  width: min(380px, calc(100% - 48px));
  padding: 18px 18px 16px;
  background: rgba(20, 20, 24, 0.9);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.cookie-banner.show { opacity: 1; visibility: visible; transform: none; }
.cookie-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.cookie-btn { height: 34px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: background 0.2s; }
.cookie-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.cookie-btn--ghost:hover { background: rgba(255,255,255,0.1); }
.cookie-btn--solid { background: #fff; color: #111; }
.cookie-btn--solid:hover { background: #e9eef5; }

/* ---------- "Read more" window ---------- */
html.modal-open, html.modal-open body { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.modal.open { opacity: 1; visibility: visible; }
.modal-box {
  position: relative;
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  color: var(--text);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  transform: scale(0.94) translateY(12px);
  transition: transform 0.25s ease-out;
}
.modal.open .modal-box { transform: none; }
.modal-scroll {
  overflow-y: auto;
  padding: 32px 30px 28px;
  overscroll-behavior: contain;
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #333;
  display: grid; place-items: center;
  transition: background 0.2s;
  z-index: 1;
}
.modal-close:hover { background: rgba(0, 0, 0, 0.14); }
.modal-close svg { width: 18px; height: 18px; }
.modal h3 { font-size: 30px; padding-right: 40px; }
.modal .plan-intro { font-size: 15px; }
.modal .plan-list li { font-size: 14.5px; }
.modal .apply-btn { display: block; margin: 24px auto 0; }

/* "Whoosh": all cards land at the same time — Lite from left, Mid from below, Full from right */
.plans.arrived .plan-card { opacity: 1; }
/* slow enough to see them fly in, one after another, as the light comes back */
.plans.arrived .from-left   { animation: whooshLeft   0.8s cubic-bezier(.2,1.3,.4,1) 0.15s backwards; }
.plans.arrived .from-bottom { animation: whooshBottom 0.8s cubic-bezier(.2,1.3,.4,1) 0.3s  backwards; }
.plans.arrived .from-right  { animation: whooshRight  0.8s cubic-bezier(.2,1.3,.4,1) 0.45s backwards; }
@keyframes whooshLeft   { from { opacity: 0; transform: translateX(-140px); } to { opacity: 1; transform: none; } }
@keyframes whooshBottom { from { opacity: 0; transform: translateY(140px); }  to { opacity: 1; transform: none; } }
@keyframes whooshRight  { from { opacity: 0; transform: translateX(140px); }  to { opacity: 1; transform: none; } }

@media (max-width: 780px) {
  .plan-grid { grid-template-columns: 1fr; }
  .footer-label { display: none; }
}
/* phones: Servers + Dashboard + Log in must fit next to the logo */
@media (max-width: 520px) {
  .bar-inner { padding: 0 12px; }
  .bar-group { gap: 6px; }
  .bar-group .bar-btn { padding: 0 10px; font-size: 13px; }
  .bar--top .brand-name, .bar--top .brand-sep { display: none; }
}
/* short screens (small laptops): tighter cards so the plans page still fits without scrolling */
@media (min-width: 781px) and (max-height: 680px) {
  .plan-card { padding: 20px 22px 18px; }
  .plan-price { font-size: 34px; }
  .plan-tagline { margin-bottom: 10px; }
  .plan-divider { margin: 12px 0 10px; }
  .plan-list { gap: 6px; }
  .plans { padding-top: calc(var(--bar-height) + 6px); padding-bottom: calc(var(--bar-height) + 8px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .plan-card, .billing { opacity: 1; }
}

/* "Email copied" bubble above the Contact us email button (js/home/contact.js) */
button.icon-btn { border: 0; background: none; cursor: pointer; font: inherit; }
button.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.copy-tip {
  position: fixed; z-index: 1000;
  transform: translate(-50%, calc(-100% + 6px));
  padding: 7px 12px; border-radius: 8px;
  background: #fff; color: #111; font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.copy-tip.show { opacity: 1; transform: translate(-50%, -100%); }

/* "Yuuri | Home" at the top left on every page: the whole thing goes to the home page; "Home" looks like a button */
.brand-sep { opacity: .35; font-weight: 400; margin: 0 -2px; }
.brand-home { padding: 4px 10px; margin-left: -6px; border-radius: 999px; font-weight: 600; transition: background .2s, color .2s; }
.brand:hover .brand-home, .brand:focus-visible .brand-home { background: color-mix(in srgb, currentColor 12%, transparent); }