:root {
  /* BRAND */
  --naumen-orange:        #ff6720;
  --naumen-orange-bright: #f08b1d;
  --naumen-orange-deep:   #ff6611;
  --naumen-blue:          #2050ff;
  --naumen-blue-bright:   #2090ff;
  --naumen-teal:          #19a89d;
  --naumen-magenta:       #ed145c;
  --naumen-yellow:        #ff9d00;

  /* NEUTRALS */
  --ink-1: #000000; --ink-2: #292929; --ink-3: #404040; --ink-4: #464646;
  --ink-5: #545658; --ink-6: #838487; --ink-7: #939393; --ink-8: #9D9D9D;

  --line-1: #DEDEDE; --line-2: #C4C4C4; --line-3: #ECECEC; --line-4: #E5E5E5;

  --bg-page: #ffffff; --bg-mute-1: #F1F2F5; --bg-mute-2: #F7F7F7;
  --bg-mute-3: #F9F9F9; --bg-cool: #E2E5E6;

  /* SEMANTIC */
  --fg-default: var(--ink-3); --fg-strong: var(--ink-2); --fg-muted: var(--ink-5);
  --fg-subtle: var(--ink-6); --fg-on-brand: #ffffff;
  --bg-default: var(--bg-page); --bg-subtle: var(--bg-mute-1); --bg-card: var(--bg-mute-2);
  --border-default: var(--line-1); --border-strong: var(--line-2); --border-subtle: var(--line-3);
  --accent: var(--naumen-orange); --accent-hover: var(--naumen-orange-deep);
  --link: var(--naumen-orange); --link-info: var(--naumen-blue-bright);

  /* TYPE */
  --font-display: 'Aeroport', 'Open Sans', system-ui, sans-serif;
  --font-body:    'Open Sans', 'Aeroport', system-ui, sans-serif;
  --font-alt:     'Aeroport', 'Geometria', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1: 50px; --fs-h1-mobile: 32px; --fs-h2: 40px; --fs-h3: 28px;
  --fs-h4: 24px; --fs-h5: 20px; --fs-lead: 22px; --fs-body: 16px;
  --fs-small: 14px; --fs-meta: 12px;

  --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.45; --lh-loose: 1.6;

  /* RADIUS */
  --r-xs: 2px; --r-sm: 4px; --r-md: 7px; --r-lg: 16px; --r-pill: 42px; --r-circle: 50%;

  /* SHADOW */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.06);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.07);
  --shadow-lift: 0 16px 40px rgba(0,0,0,0.10);

  /* SPACING */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px; --sp-11: 100px;

  --container-max: 1440px;
  --container-pad: 32px;

  /* MOTION */
  --t-fast: 160ms; --t-base: 240ms; --t-slow: 320ms;
  --ease-default: cubic-bezier(.2,.6,.2,1);
  --ease-linear: linear;
}

.loy-block{padding:84px 0}


.loy-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}

.loy-text h2{
  font-family:var(--font-display);font-weight:600;color:var(--ink-2);
  font-size:38px;line-height:1.15;letter-spacing:-.01em;margin:0 0 28px;
}
.loy-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.loy-list li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.5;color:var(--ink-4)}
.loy-list li::before{
  content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,103,32,.1);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6720' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5 11-11'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:13px;
}

/* right visual — flat light-gray panel instead of gradient */
.loy-art{
  position:relative;border-radius:var(--r-lg);padding:36px 32px;
  background:var(--bg-mute-3);
  min-height:420px;display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.loy-card{background:var(--bg-page);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-md);animation:loyCard 5.5s ease-in-out infinite}

.loy-tier{
  background:linear-gradient(135deg,var(--ink-2) 0%,var(--ink-4) 100%);
  border-radius:var(--r-lg);padding:22px 24px;color:#fff;box-shadow:var(--shadow-lift);
  animation:loyTier 5.5s ease-in-out infinite;
}
.loy-tier-row{display:flex;align-items:center;justify-content:space-between}
.loy-tier-lvl{font-family:var(--font-display);font-size:13px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.loy-tier-name{font-family:var(--font-display);font-size:20px;font-weight:600;margin-top:4px}
.loy-tier-bonus{font-family:var(--font-display);font-size:26px;font-weight:600}
.loy-tier-bonus span{font-size:14px;font-weight:500;opacity:.7;margin-left:6px;font-family:var(--font-body)}
.loy-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.22);margin-top:18px;overflow:hidden}
.loy-bar i{display:block;height:100%;width:0;border-radius:6px;background:var(--naumen-orange);animation:loyBar 5.5s ease-in-out infinite}
.loy-tier-hint{font-size:12px;opacity:.7;margin-top:8px}

.loy-mech-title{
  font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink-6);
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:14px;
}
.loy-chips{display:flex;flex-wrap:wrap;gap:8px}
.loy-chip{
  font-family:var(--font-body);font-size:13px;font-weight:500;padding:7px 12px;
  border-radius:var(--r-pill);background:var(--bg-mute-2);color:var(--ink-5);border:1px solid var(--line-3);
}
.loy-chip.on{background:rgba(255,103,32,.1);color:var(--naumen-orange);font-weight:600;border-color:transparent}

.loy-metric{
  position:absolute;right:18px;bottom:22px;background:var(--bg-page);border-radius:var(--r-md);
  padding:14px 18px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:12px;
  animation:loyMetric 5.5s ease-in-out infinite;
}
.loy-metric svg{color:var(--naumen-orange);flex:none}
.loy-metric-cap{font-size:12px;color:var(--ink-6);line-height:1.3}
.loy-metric-val{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--naumen-orange);white-space:nowrap}

@keyframes loyTier{
  0%,4%{opacity:0;transform:translateY(16px)}
  13%,92%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(16px)}
}
@keyframes loyBar{
  0%,22%{width:0}
  34%,92%{width:68%}
  100%{width:0}
}
@keyframes loyCard{
  0%,37%{opacity:0;transform:translateY(16px)}
  46%,92%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(16px)}
}
@keyframes loyMetric{
  0%,57%{opacity:0;transform:translateY(10px) scale(.96)}
  66%,92%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(10px) scale(.96)}
}
@media (prefers-reduced-motion:reduce){
  .loy-tier,.loy-card,.loy-metric{animation:none;opacity:1;transform:none}
  .loy-bar i{animation:none;width:68%}
}

@media (max-width:900px){
  .loy-grid{grid-template-columns:1fr;gap:36px}
  .loy-text h2{font-size:30px}
}