@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.35s ease both ration-vt-out; }
::view-transition-new(root) { animation: 0.45s ease both ration-vt-in; }
@keyframes ration-vt-out { to { opacity: 0; } }
@keyframes ration-vt-in { from { opacity: 0; } }

@property --ration-mx1 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --ration-my1 { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --ration-mx2 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --ration-my2 { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@property --ration-mx3 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --ration-my3 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }

:root {
  --ration-bg: #0D1117;
  --ration-surface: #161C27;
  --ration-tone: #2EE6C5;
  --ration-tone-hover: #7DF5DE;
  --ration-ink: #F1F5F9;
  --ration-muted: #B4BFCC;
  --ration-violet: #A99BFF;
  --ration-gold: #FFB84D;
  --ration-rose: #FF8AA8;
  --ration-deep: #080B10;
  --ration-line: rgba(255, 255, 255, 0.15);
  --ration-gradient: linear-gradient(120deg, #2EE6C5 0%, #7C6CFF 100%);
  --ration-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --ration-glow: 0 0 24px rgba(46, 230, 197, 0.35);
  --ration-radius: 16px;
  --ration-pad: 10dvh;
  --font-display: 'Montserrat', 'Tahoma', 'Arial', sans-serif;
  --font-body: 'Open Sans', 'Tahoma', 'Arial', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ration-bg);
  color: var(--ration-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  direction: rtl;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--ration-tone); text-decoration: none; }
a:hover { color: var(--ration-tone-hover); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.9rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 3px solid var(--ration-gold); outline-offset: 3px; }

.ration-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.ration-top-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(13, 17, 23, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ration-line);
}
.ration-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ration-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.ration-brand:hover { color: var(--ration-ink); }
.ration-brand svg { color: var(--ration-tone); filter: drop-shadow(0 0 8px rgba(46, 230, 197, 0.6)); flex: none; }
.ration-site-nav { display: flex; gap: clamp(14px, 2.5vw, 32px); }
.ration-site-nav a { color: var(--ration-ink); font-weight: 600; padding: 6px 2px; }
.ration-site-nav a:hover, .ration-site-nav a[aria-current="page"] { color: var(--ration-tone); }
.ration-menu-check { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.ration-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}
.ration-burger span { display: block; width: 24px; height: 2px; background: var(--ration-ink); border-radius: 2px; }
.ration-menu-check:focus-visible + .ration-burger { outline: 3px solid var(--ration-gold); outline-offset: 3px; }
.ration-scroll-bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--ration-gradient);
  transform-origin: right;
  transform: scaleX(0);
  animation: ration-read-progress linear both;
  animation-timeline: scroll();
}
@keyframes ration-read-progress { to { transform: scaleX(1); } }

@media (max-width: 820px) {
  .ration-burger { display: flex; }
  .ration-site-nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    background: var(--ration-surface);
    padding: 8px clamp(16px, 4vw, 48px) 16px;
    border-bottom: 1px solid var(--ration-line);
  }
  .ration-site-nav a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .ration-menu-check:checked ~ .ration-site-nav { display: flex; }
}

/* ---------- Decor layers ---------- */
.ration-mesh-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--ration-mx1) var(--ration-my1), rgba(46, 230, 197, 0.32), transparent 45%),
    radial-gradient(circle at var(--ration-mx2) var(--ration-my2), rgba(124, 108, 255, 0.28), transparent 50%),
    radial-gradient(circle at var(--ration-mx3) var(--ration-my3), rgba(255, 184, 77, 0.18), transparent 45%);
  animation: ration-mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes ration-mesh-drift {
  0% {
    --ration-mx1: 15%; --ration-my1: 25%;
    --ration-mx2: 85%; --ration-my2: 30%;
    --ration-mx3: 50%; --ration-my3: 85%;
  }
  100% {
    --ration-mx1: 35%; --ration-my1: 10%;
    --ration-mx2: 65%; --ration-my2: 60%;
    --ration-mx3: 20%; --ration-my3: 70%;
  }
}

/* ---------- Hero (index) ---------- */
.ration-hero-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  padding: 12dvh clamp(16px, 5vw, 64px);
}
.ration-hero-photo, .ration-hero-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.ration-hero-veil {
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.55), rgba(13, 17, 23, 0.92));
}
.ration-hero-glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--ration-radius);
  box-shadow: var(--ration-shadow);
}
.ration-hero-inner {
  position: relative;
  z-index: 1;
  width: min(60%, 720px);
  padding: clamp(28px, 4vw, 48px);
}
.ration-hero-inner .ration-lead { font-size: 1.05rem; color: var(--ration-muted); }

/* ---------- Inner heroes ---------- */
.ration-inner-hero {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: calc(var(--ration-pad) * 0.9) clamp(16px, 5vw, 64px);
  background: linear-gradient(180deg, #121826 0%, var(--ration-bg) 100%);
}
.ration-inner-hero .ration-wrap-narrow { max-width: 900px; }
.ration-lead { font-size: 1.08rem; color: var(--ration-muted); max-width: 66ch; }

.ration-wrap-narrow { max-width: 1180px; margin-inline: auto; position: relative; z-index: 1; }
.ration-band {
  position: relative;
  overflow: clip;
  padding: var(--ration-pad) clamp(16px, 5vw, 64px);
  background: var(--ration-bg);
}
.ration-band-alt { background: var(--ration-surface); }
.ration-section-head { margin-bottom: 28px; }
.ration-section-head h2 { margin-bottom: 0; }
.ration-kicker {
  display: inline-block;
  color: var(--ration-tone);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

/* ---------- Split (image + text) ---------- */
.ration-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  direction: ltr;
  max-width: 1180px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.ration-split-text { direction: rtl; }
.ration-figure-frame { margin: 0; }
.ration-figure-frame img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: var(--ration-radius);
  box-shadow: var(--ration-shadow);
}
.ration-dots { list-style: none; padding: 0; margin: 20px 0 0; }
.ration-dots li {
  position: relative;
  padding-inline-start: 26px;
  margin-bottom: 12px;
  color: var(--ration-muted);
}
.ration-dots li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ration-tone);
  box-shadow: 0 0 10px rgba(46, 230, 197, 0.6);
}

/* ---------- Glass tiles / features ---------- */
.ration-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.ration-glass-tile {
  height: 100%;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ration-line);
  border-top: 3px solid var(--ration-tone);
  border-radius: var(--ration-radius);
  box-shadow: var(--ration-shadow);
  transform: perspective(900px) rotateX(calc((var(--my, 0.5) - 0.5) * -6deg)) rotateY(calc((var(--mx, 0.5) - 0.5) * 6deg));
  transition: border-color 0.4s ease, transform 0.3s ease-out;
}
.ration-glass-tile:hover { border-color: var(--ration-violet); border-top-color: var(--ration-violet); }
.ration-glass-tile p { color: var(--ration-muted); margin: 0; }
.ration-tile-icon { color: var(--ration-tone); margin-bottom: 14px; }
.ration-tile-icon svg { filter: drop-shadow(0 0 6px rgba(46, 230, 197, 0.45)); }

/* ---------- Timeline (vertical steps) ---------- */
.ration-timeline { list-style: none; padding: 0; margin: 8px 0 0; position: relative; }
.ration-timeline::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  inset-inline-start: 23px;
  width: 3px;
  background: var(--ration-tone);
  box-shadow: 0 0 14px rgba(46, 230, 197, 0.5);
  border-radius: 3px;
}
.ration-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding-bottom: 36px;
}
.ration-timeline li:last-child { padding-bottom: 0; }
.ration-timeline-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ration-bg);
  border: 3px solid var(--ration-tone);
  color: var(--ration-tone);
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 0 18px rgba(46, 230, 197, 0.45);
  position: relative;
  z-index: 1;
}
.ration-timeline p { color: var(--ration-muted); margin: 0; }

/* ---------- Accordion (about) ---------- */
.ration-accordion { display: grid; gap: 16px; margin-top: 8px; }
.ration-accordion details {
  position: relative;
  overflow: hidden;
  background: var(--ration-surface);
  border: 1px solid var(--ration-line);
  border-radius: var(--ration-radius);
  padding: 22px 24px;
}
.ration-accordion details::before {
  content: attr(data-n);
  position: absolute;
  inset-inline-end: 18px;
  top: 10px;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: rgba(46, 230, 197, 0.16);
  pointer-events: none;
}
.ration-accordion summary {
  cursor: default;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  padding-inline-end: 64px;
}
.ration-accordion summary::-webkit-details-marker { display: none; }
.ration-accordion details p { color: var(--ration-muted); margin: 12px 0 0; }

/* ---------- Photo band (about) ---------- */
.ration-photo-band {
  position: relative;
  min-height: 70vh;
  min-height: 70dvh;
  display: flex;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  padding: var(--ration-pad) clamp(16px, 5vw, 64px);
}
.ration-photo-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.ration-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 17, 23, 0.94), rgba(13, 17, 23, 0.6));
  z-index: 0;
  pointer-events: none;
}
.ration-photo-text { max-width: 640px; margin-inline: 0; }
.ration-photo-text p { color: var(--ration-ink); }

/* ---------- Buttons (static, color/scale hover only) ---------- */
.ration-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.ration-btn-center { justify-content: center; }
.ration-cta-btn, .ration-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ration-cta-btn {
  background: var(--ration-tone);
  color: #0D1117;
  border: 2px solid var(--ration-tone);
}
.ration-cta-btn:hover, .ration-cta-btn:focus-visible {
  background: var(--ration-tone-hover);
  border-color: var(--ration-tone-hover);
  color: #0D1117;
  box-shadow: 0 0 0 6px rgba(46, 230, 197, 0.15);
}
.ration-cta-btn:active { transform: scale(0.98); }
.ration-ghost-btn {
  background: transparent;
  border: 2px solid var(--ration-tone);
  color: var(--ration-tone);
}
.ration-ghost-btn:hover, .ration-ghost-btn:focus-visible {
  background: rgba(46, 230, 197, 0.1);
  color: var(--ration-tone-hover);
  border-color: var(--ration-tone-hover);
}

/* ---------- CTA strip ---------- */
.ration-cta-strip {
  position: relative;
  text-align: center;
  padding: var(--ration-pad) clamp(16px, 5vw, 64px);
  background: var(--ration-bg);
  border-top: 1px solid var(--ration-line);
}
.ration-cta-strip h2 { margin-inline: auto; max-width: 22ch; }
.ration-cta-strip p { color: var(--ration-muted); max-width: 60ch; margin-inline: auto; }

/* ---------- Reserve page ---------- */
.ration-reserve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.ration-reserve-grid > div p:last-child { margin-bottom: 0; }
.ration-form-shell {
  display: grid;
  gap: 12px;
  background: rgba(22, 28, 39, 0.94);
  border: 1px solid var(--ration-line);
  border-radius: var(--ration-radius);
  box-shadow: var(--ration-shadow);
  padding: clamp(22px, 4vw, 36px);
}
.ration-form-shell label { font-weight: 600; }
.ration-form-shell input[type="text"],
.ration-form-shell input[type="tel"],
.ration-form-shell textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #0D1117;
  color: var(--ration-ink);
  font: inherit;
}
.ration-form-shell input:focus-visible,
.ration-form-shell textarea:focus-visible { outline: 3px solid var(--ration-gold); outline-offset: 1px; }
.ration-form-shell .ration-cta-btn { justify-self: start; margin-top: 8px; }
.ration-check {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400 !important;
  color: var(--ration-muted);
}
.ration-check input { margin-top: 6px; width: 20px; height: 20px; accent-color: var(--ration-tone); flex: none; }
.ration-check a { text-decoration: underline; }

.ration-info-grid { margin-top: 0; }
.ration-badge-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.ration-badge-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ration-muted); font-size: 0.97rem; }
.ration-badge {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #0D1117;
  font-weight: 800;
  font-size: 0.85rem;
  font-family: var(--font-display);
}
.ration-badge-a { background: var(--ration-tone); }
.ration-badge-b { background: var(--ration-violet); }
.ration-badge-c { background: var(--ration-gold); }
.ration-badge-d { background: var(--ration-rose); }

.ration-faq { display: grid; gap: 12px; margin-top: 8px; max-width: 860px; }
.ration-faq details {
  background: var(--ration-bg);
  border: 1px solid var(--ration-line);
  border-radius: var(--ration-radius);
  padding: 18px 22px;
}
.ration-faq summary {
  cursor: default;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
}
.ration-faq summary::-webkit-details-marker { display: none; }
.ration-faq p { margin: 10px 0 0; color: var(--ration-muted); }

/* ---------- Thanks page ---------- */
.ration-thanks-stage {
  position: relative;
  overflow: clip;
  isolation: isolate;
  min-height: 80vh;
  min-height: 80dvh;
  display: flex;
  align-items: center;
  padding: calc(var(--ration-pad) * 1.2) clamp(16px, 5vw, 64px);
}
.ration-thanks-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
.ration-thanks-card { padding: clamp(28px, 4vw, 48px); position: relative; z-index: 1; }
.ration-thanks-card .ration-lead { margin-bottom: 0; }
.ration-thanks-figure { position: relative; z-index: 1; }
.ration-thanks-figure img { min-height: 300px; height: 100%; object-fit: cover; border-radius: var(--ration-radius); box-shadow: var(--ration-shadow); }

/* ---------- Legal pages ---------- */
.ration-legal {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--ration-pad) * 0.9) clamp(16px, 5vw, 64px);
  background: var(--ration-bg);
}
.ration-legal-body { max-width: 860px; margin-inline: auto; }
.ration-updated { color: var(--ration-muted); font-size: 0.95rem; margin-bottom: 32px; }
.ration-legal-part {
  padding: 26px 0;
  border-top: 1px solid var(--ration-line);
}
.ration-legal-part p { color: var(--ration-muted); }
.ration-legal-part h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); color: var(--ration-ink); }

/* ---------- Footer ---------- */
.ration-foot {
  background: var(--ration-deep);
  border-top: 1px solid var(--ration-line);
  padding: 48px clamp(16px, 5vw, 64px) 28px;
  color: var(--ration-muted);
}
.ration-foot-inner { max-width: 1180px; margin-inline: auto; display: grid; gap: 18px; justify-items: start; }
.ration-foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ration-foot-links a { color: var(--ration-ink); }
.ration-foot-links a:hover { color: var(--ration-tone); }
.ration-disclaimer { margin: 0; font-size: 0.95rem; color: var(--ration-muted); }
.ration-copy { margin: 0; font-size: 0.9rem; color: var(--ration-muted); }

/* ---------- Cookie banner ---------- */
.ration-cookie-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 48px);
  background: var(--ration-surface);
  border-top: 1px solid var(--ration-line);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
}
.ration-cookie-bar[hidden] { display: none; }
.ration-cookie-bar p { margin: 0; color: var(--ration-muted); }
.ration-cookie-bar .ration-cta-btn,
.ration-cookie-bar .ration-ghost-btn { min-height: 44px; padding: 10px 20px; margin-top: 0; }

/* ---------- Scroll-driven view reveal (only where supported) ---------- */
@supports (animation-timeline: view()) {
  .ration-view-fade {
    animation: ration-view-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}
@keyframes ration-view-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Stagger reveal (JS-driven, only with .js on html) ---------- */
[data-ration-reveal] { transition: opacity 0.7s ease, transform 0.7s ease; }
.js [data-ration-reveal]:not(.is-in) { opacity: 0; transform: translateY(24px); }
[data-ration-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .ration-split, .ration-reserve-grid, .ration-thanks-inner { grid-template-columns: 1fr; }
  .ration-figure-frame img { min-height: 260px; }
  .ration-hero-inner { width: min(78%, 720px); }
}
@media (max-width: 560px) {
  .ration-hero-inner { width: 100%; }
  .ration-hero-stage { padding-top: 10dvh; }
  .ration-tile-grid { grid-template-columns: 1fr; }
  .ration-timeline li { grid-template-columns: 40px 1fr; gap: 14px; }
  .ration-timeline-num { width: 40px; height: 40px; font-size: 0.9rem; }
  .ration-timeline::before { inset-inline-start: 19px; }
  .ration-btn-row .ration-cta-btn, .ration-btn-row .ration-ghost-btn { width: 100%; }
  .ration-form-shell .ration-cta-btn { width: 100%; justify-self: stretch; }
  .ration-cookie-bar .ration-btn-row { width: 100%; margin-top: 0; }
  .ration-cookie-bar .ration-btn-row > button { flex: 1; }
  .ration-accordion summary { padding-inline-end: 48px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html { view-transition-name: none; }
  .js [data-ration-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .ration-glass-tile { transform: none; }
}