/* ═══════════════════════════════════════════════════════════
Lycium — marketing site
Dark nightclub theme · warm amber-gold accent (brand-matched)
═══════════════════════════════════════════════════════════ */
/* First-paint flash guard: index.html's inline script sets
html.lang-loading before paint; site.js removes it after the first
translation pass. Hides the body for ≤120ms in practice so users
never see TR text repaint to EN (or vice versa). */
html.lang-loading body { visibility: hidden; }
:root {
/* Warm nightclub dark — neutrals tinted toward amber (hue 58) */
--bg: oklch(9% 0.010 58);
--bg-2: oklch(12% 0.012 58);
--surface: oklch(14% 0.013 58);
--card: oklch(18% 0.015 58);
--card-hover: oklch(22% 0.017 58);
/* Accent: warm amber gold (matches the Lycium apps) */
--accent: oklch(76% 0.13 78);
--accent-deep: oklch(68% 0.14 70);
--accent-dim: oklch(76% 0.13 78 / 0.14);
--accent-glow: oklch(76% 0.13 78 / 0.32);
--green: oklch(74% 0.15 158);
/* Text */
--text: oklch(96% 0.009 58);
--text-2: oklch(70% 0.012 58);
--text-3: oklch(58% 0.010 58);
--border: oklch(96% 0.009 58 / 0.10);
--border-2: oklch(96% 0.009 58 / 0.18);
--r: 18px;
--r-sm: 12px;
--maxw: 1180px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Onest', system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--accent); }
.gold { color: var(--accent); }
/* ─── Layout ─────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; }
.section { padding: 110px 0; }
.section-alt { background: var(--bg-2); }
/* ─── Typography helpers ─────────────────────────────────── */
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.eyebrow.center { display: block; }
.section-title {
font-family: 'Anton', 'Onest', sans-serif;
font-weight: 400;
font-size: clamp(34px, 5vw, 58px);
line-height: 1.16;
letter-spacing: 0.01em;
text-transform: uppercase;
/* Constrain so headings wrap naturally instead of needing hard
. */
max-width: 18ch;
}
.section-head.center .section-title { margin-inline: auto; }
.section-head { margin-bottom: 56px; }
.section-head.center { text-align: center; }
.section-lead { color: var(--text-2); margin-top: 16px; max-width: 520px; }
.section-head.center .section-lead { margin-inline: auto; }
/* ─── Buttons ────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
padding: 14px 28px;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
transition: transform .2s var(--ease), box-shadow .2s var(--ease),
background .2s var(--ease), border-color .2s var(--ease);
}
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-primary {
background: linear-gradient(180deg, var(--accent), var(--accent-deep));
color: oklch(20% 0.04 70);
box-shadow: 0 8px 28px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px var(--accent-glow); }
.btn-ghost {
background: transparent;
color: var(--text);
border-color: var(--border-2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
/* ─── Nav ────────────────────────────────────────────────── */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
transition: background .25s var(--ease), border-color .25s var(--ease);
border-bottom: 1px solid transparent;
}
.nav.scrolled {
background: oklch(9% 0.010 58 / 0.86);
backdrop-filter: blur(14px);
border-bottom-color: var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
display: grid; place-items: center;
width: 34px; height: 34px;
border-radius: 9px;
background: var(--accent-dim);
color: var(--accent);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-name {
font-family: 'Anton', sans-serif;
font-size: 22px;
letter-spacing: 0.07em;
}
.nav-links { display: flex; gap: 32px; }
.nav-links a {
font-size: 14.5px;
font-weight: 500;
color: var(--text-2);
transition: color .15s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-toggle span {
width: 22px; height: 2px; border-radius: 2px;
background: var(--text);
transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ─── Hero ───────────────────────────────────────────────── */
.hero { position: relative; padding: 150px 0 100px; overflow: hidden; }
.hero-glow {
position: absolute;
top: -180px; right: -120px;
width: 620px; height: 620px;
background: radial-gradient(circle, var(--accent-glow), transparent 62%);
filter: blur(28px);
pointer-events: none;
}
.hero-inner {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 56px;
align-items: center;
position: relative;
}
.hero-title {
font-family: 'Anton', sans-serif;
font-weight: 400;
font-size: clamp(44px, 6.2vw, 78px);
line-height: 1.05;
letter-spacing: 0.01em;
text-transform: uppercase;
margin-bottom: 24px;
/* Wrap responsively instead of via hard
. */
max-width: 11ch;
}
.hero-sub { color: var(--text-2); font-size: 17.5px; max-width: 460px; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.hero-trust {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 14px; color: var(--text-3);
}
.hero-trust strong { color: var(--text); font-weight: 700; }
.hero-trust .dot { color: var(--text-3); }
/* ─── Phone mockup ───────────────────────────────────────── */
.hero-art { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.phone {
position: relative;
width: 300px;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: 38px;
padding: 14px;
box-shadow: 0 40px 90px -30px #000, 0 0 0 8px oklch(16% 0.012 58);
}
.phone-notch {
position: absolute;
top: 14px; left: 50%; transform: translateX(-50%);
width: 110px; height: 22px;
background: var(--bg);
border-radius: 0 0 14px 14px;
z-index: 2;
}
.phone-screen {
background: var(--surface);
border-radius: 26px;
padding: 20px 16px 18px;
}
.ph-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.ph-venue { display: flex; align-items: center; gap: 9px; }
.ph-avatar {
width: 36px; height: 36px; border-radius: 10px;
display: grid; place-items: center;
background: var(--accent-dim); color: var(--accent);
font-family: 'Anton', sans-serif; font-size: 17px;
}
.ph-venue-name { font-size: 14px; font-weight: 700; }
.ph-venue-sub { font-size: 11px; color: var(--text-3); }
.ph-live {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
color: var(--green);
}
.ph-live i {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green);
animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.ph-songcard {
display: flex; align-items: center; gap: 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 12px;
margin-bottom: 16px;
}
.ph-art {
width: 46px; height: 46px; border-radius: 9px;
background: var(--accent-dim);
display: grid; place-items: center; font-size: 22px;
}
.ph-song { font-size: 14px; font-weight: 700; }
.ph-artist { font-size: 12px; color: var(--text-3); }
.ph-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--text-3);
margin-bottom: 9px;
}
.ph-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.ph-tip {
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 4px;
text-align: center;
}
.ph-tip b { display: block; font-size: 15px; }
.ph-tip span { font-size: 9px; color: var(--text-3); }
.ph-tip.active {
border-color: var(--accent);
background: var(--accent-dim);
}
.ph-tip.active b { color: var(--accent); }
.ph-total {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--text-2);
padding: 12px 0;
border-top: 1px solid var(--border);
}
.ph-total-amt { font-size: 18px; font-weight: 800; }
.ph-send {
width: 100%;
font-family: inherit; font-size: 14px; font-weight: 700;
padding: 12px;
border: none; border-radius: 999px;
background: linear-gradient(180deg, var(--accent), var(--accent-deep));
color: oklch(20% 0.04 70);
cursor: pointer;
}
.hero-art-tag { font-size: 13px; color: var(--text-3); }
/* ─── Intro ──────────────────────────────────────────────── */
.intro { padding: 96px 0; text-align: center; }
.intro-text {
font-size: clamp(19px, 2.4vw, 26px);
line-height: 1.5;
color: var(--text);
margin-bottom: 30px;
}
/* ─── Steps ──────────────────────────────────────────────── */
.steps {
list-style: none;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
counter-reset: step;
}
.step {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 26px 22px;
transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.step:hover { transform: translateY(-5px); border-color: var(--border-2); }
.step-num {
font-family: 'Anton', sans-serif;
font-size: 30px;
color: var(--accent);
display: block;
margin-bottom: 14px;
}
.step h3 { font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
/* ─── Grids / cards ──────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card, .feature {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 32px;
transition: transform .25s var(--ease), border-color .25s var(--ease),
background .25s var(--ease);
}
.card:hover, .feature:hover {
transform: translateY(-6px);
border-color: var(--accent);
background: var(--card-hover);
}
.card-icon {
display: grid; place-items: center;
width: 52px; height: 52px;
border-radius: 14px;
background: var(--accent-dim);
color: var(--accent);
margin-bottom: 20px;
}
.card-icon svg { width: 26px; height: 26px; }
.card h3, .feature h3 {
font-size: 21px;
margin-bottom: 10px;
}
.card p, .feature p { color: var(--text-2); font-size: 15px; }
/* ─── Stats ──────────────────────────────────────────────── */
.stats-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.stats-copy p { color: var(--text-2); margin: 16px 0 28px; max-width: 420px; }
.stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 30px;
}
.stat {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 20px;
}
.stat b {
font-family: 'Anton', sans-serif;
font-size: 38px;
color: var(--accent);
display: block;
line-height: 1;
margin-bottom: 6px;
}
.stat span { font-size: 13px; color: var(--text-2); }
/* ─── Live monitor mockup ────────────────────────────────── */
.monitor {
background: var(--surface);
border: 1px solid var(--border-2);
border-radius: var(--r);
padding: 22px;
box-shadow: 0 36px 80px -34px #000;
}
.mon-head {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 16px; margin-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.mon-title { font-weight: 700; font-size: 15px; }
.mon-row {
display: flex; align-items: center; gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.mon-table {
width: 38px; height: 38px; flex-shrink: 0;
border-radius: 10px;
background: var(--accent-dim); color: var(--accent);
display: grid; place-items: center;
font-weight: 800; font-size: 13px;
}
.mon-info { flex: 1; min-width: 0; }
.mon-info b { display: block; font-size: 14px; }
.mon-info span { font-size: 12px; color: var(--text-3); }
.mon-tip { font-weight: 800; font-size: 15px; color: var(--accent); }
.mon-badge {
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
padding: 5px 9px; border-radius: 999px;
}
.mon-badge.pending { background: var(--accent-dim); color: var(--accent); }
.mon-badge.accepted { background: oklch(74% 0.15 158 / 0.16); color: var(--green); }
.mon-foot {
display: flex; justify-content: space-between;
padding-top: 14px;
font-size: 12.5px; color: var(--text-3);
}
/* ─── Pricing ────────────────────────────────────────────── */
.pricing-grid { align-items: start; }
.plan {
position: relative;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 36px 30px;
transition: transform .25s var(--ease), border-color .25s var(--ease);
/* Equal-height cards with the CTA pinned to the bottom of each card. */
display: flex;
flex-direction: column;
min-height: 580px;
}
.plan:hover { transform: translateY(-6px); }
.plan-featured {
border-color: var(--accent);
background: linear-gradient(180deg, var(--accent-dim), var(--card) 42%);
box-shadow: 0 30px 70px -36px var(--accent-glow);
}
.plan-badge {
position: absolute;
top: -13px; left: 30px;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
background: linear-gradient(180deg, var(--accent), var(--accent-deep));
color: oklch(20% 0.04 70);
}
.plan-name {
font-family: 'Anton', sans-serif;
font-size: 26px; letter-spacing: 0.03em;
text-transform: uppercase;
min-height: 30px;
}
.plan-for { font-size: 13.5px; color: var(--text-3); margin: 4px 0 22px; min-height: 38px; }
.plan-price-was {
font-size: 14px;
color: var(--text-3);
margin-bottom: 6px;
min-height: 20px;
}
.plan-price-was s { color: var(--text-2); text-decoration-thickness: 1.5px; }
.plan-price {
font-family: 'Anton', sans-serif;
font-size: 62px; line-height: 1;
margin-bottom: 6px;
min-height: 62px;
}
.plan-price .cur { font-size: 28px; vertical-align: super; color: var(--text-2); }
.plan-price .per { font-size: 17px; color: var(--text-3); font-family: 'Onest'; }
.plan-total {
font-size: 13px;
color: var(--text-3);
margin-bottom: 24px;
letter-spacing: 0.01em;
min-height: 18px;
}
.plan-list { list-style: none; margin-bottom: 28px; flex: 1; }
.plan-list li {
font-size: 14.5px;
color: var(--text-2);
padding: 9px 0 9px 26px;
position: relative;
border-bottom: 1px solid var(--border);
}
.plan-list li:last-child { border-bottom: none; }
.plan-list li strong { color: var(--text); }
.plan-list li::before {
content: "";
position: absolute;
left: 2px; top: 14px;
width: 13px; height: 8px;
border-left: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
.pricing-note {
max-width: 640px;
margin: 32px auto 0;
padding: 14px 18px;
border: 1px dashed var(--border-2);
border-radius: var(--r-sm);
text-align: center;
font-size: 14px;
color: var(--text-2);
}
.pricing-note strong { color: var(--text); font-weight: 700; }
.pricing-note a { color: var(--accent); }
/* ─── FAQ ────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 4px 22px;
}
.faq-item summary {
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
list-style: none;
cursor: pointer;
padding: 18px 0;
font-size: 16.5px; font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev {
flex-shrink: 0;
width: 11px; height: 11px;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(45deg);
transition: transform .2s var(--ease);
}
.faq-item[open] .faq-chev { transform: rotate(-135deg); }
.faq-item p { color: var(--text-2); font-size: 15px; padding: 0 0 20px; }
/* ─── CTA band ───────────────────────────────────────────── */
.cta-band {
padding: 100px 0;
text-align: center;
background:
radial-gradient(circle at 50% 0%, var(--accent-glow), transparent 60%),
var(--bg-2);
border-top: 1px solid var(--border);
}
.cta-inner p { color: var(--text-2); margin: 16px 0 30px; font-size: 17px; }
/* ─── Footer ─────────────────────────────────────────────── */
.footer { background: var(--bg); border-top: 1px solid var(--border); padding-top: 64px; }
.footer-inner {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
gap: 40px;
padding-bottom: 48px;
}
.footer-brand p { color: var(--text-3); font-size: 14px; margin-top: 16px; max-width: 300px; }
.footer-loc { color: var(--text-2) !important; font-weight: 600; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 {
font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--text-3);
margin-bottom: 4px;
}
.footer-col a { font-size: 14.5px; color: var(--text-2); transition: color .15s var(--ease); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding: 24px 28px;
border-top: 1px solid var(--border);
font-size: 13px; color: var(--text-3);
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { color: var(--text-3); transition: color .15s var(--ease); }
.footer-legal a:hover { color: var(--text); }
/* ─── Reveal animation ───────────────────────────────────── */
[data-reveal] {
opacity: 0;
transform: translateY(26px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
[data-reveal] { opacity: 1; transform: none; transition: none; }
.ph-live i { animation: none; }
}
/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1000px) {
.steps { grid-template-columns: repeat(2, 1fr); }
.hero-inner { grid-template-columns: 1fr; gap: 50px; }
.hero-art { order: -1; }
.stats-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
.section { padding: 76px 0; }
.container { padding: 0 20px; }
.nav-links {
position: fixed;
inset: 74px 0 auto 0;
flex-direction: column;
gap: 0;
background: var(--bg-2);
border-bottom: 1px solid var(--border);
padding: 8px 20px 20px;
transform: translateY(-130%);
transition: transform .3s var(--ease);
}
.nav-links.open { transform: translateY(0); }
.nav-links a { padding: 14px 0; border-bottom: 1px solid var(--border); }
.nav-toggle { display: flex; }
.grid-2, .grid-3 { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; }
.stat-grid { grid-template-columns: 1fr 1fr; }
.footer-inner { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
.card, .feature { padding: 26px; }
.hero { padding-top: 120px; }
}
@media (max-width: 420px) {
.footer-inner { grid-template-columns: 1fr; }
.phone { width: 270px; }
}
/* ═══════════════════════════════════════════════════════════
Promo strip · Language switch · Promotional callouts
(Appended for "first 10 events free" launch + TR/EN i18n)
═══════════════════════════════════════════════════════════ */
/* ─── Top promo strip (inside fixed .nav) ─────────────────── */
.promo-strip {
background: linear-gradient(90deg, var(--accent-deep), var(--accent));
color: oklch(15% 0.03 58);
font-weight: 600;
font-size: 13px;
letter-spacing: .01em;
border-bottom: 1px solid oklch(96% 0.009 58 / 0.18);
}
.promo-strip .container {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding-top: 9px;
padding-bottom: 9px;
flex-wrap: wrap;
text-align: center;
}
.promo-strip .promo-tag {
display: inline-block;
background: oklch(15% 0.03 58);
color: var(--accent);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
}
.promo-strip a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 700;
white-space: nowrap;
}
.promo-strip a:hover { opacity: .8; }
/* The promo strip adds ~38px (desktop) / ~34px (mobile) on top of the
fixed nav. Push the hero and the scroll-padding down accordingly so
the title clears the now-taller nav. */
.hero { padding-top: 188px; }
html { scroll-padding-top: 128px; }
/* ─── Hero promo callout (below CTAs) ─────────────────────── */
/* Promo callout below the hero CTAs.
Structure: .hero-promo-row { .hero-promo-icon + .hero-promo (translated) }
The icon lives in its own element so the data-i18n-html innerHTML swap on
.hero-promo doesn't wipe it. */
.hero-promo-row {
margin-top: 18px;
padding: 10px 14px;
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--accent-dim);
border: 1px solid oklch(76% 0.13 78 / 0.35);
border-radius: var(--r-sm);
max-width: 100%;
}
.hero-promo-icon {
width: 18px; height: 18px;
flex: 0 0 18px;
border-radius: 999px;
background: var(--accent);
position: relative;
}
.hero-promo-icon::after {
/* Reuses the checkmark technique from .plan-list li::before. */
content: "";
position: absolute;
left: 4px; top: 6px;
width: 9px; height: 5px;
border-left: 2px solid oklch(15% 0.03 58);
border-bottom: 2px solid oklch(15% 0.03 58);
transform: rotate(-45deg);
}
.hero-promo {
font-size: 14px;
color: var(--text);
line-height: 1.45;
margin: 0;
}
.hero-promo strong { color: var(--accent); }
/* ─── Pricing promo banner (above plan cards) ─────────────── */
.pricing-promo {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px;
margin: 0 0 28px;
background: linear-gradient(135deg, var(--accent-dim), oklch(76% 0.13 78 / 0.05));
border: 1px solid oklch(76% 0.13 78 / 0.35);
border-radius: var(--r);
}
.pricing-promo .promo-tag {
flex-shrink: 0;
background: var(--accent);
color: oklch(15% 0.03 58);
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
}
.pricing-promo h3 {
font-size: 19px;
font-weight: 700;
margin-bottom: 4px;
color: var(--text);
}
.pricing-promo p {
font-size: 14px;
color: var(--text-2);
line-height: 1.55;
}
/* ─── Language switcher (in nav-actions) ──────────────────── */
.lang-switch {
display: inline-flex;
border: 1px solid var(--border-2);
border-radius: 999px;
overflow: hidden;
background: oklch(96% 0.009 58 / 0.04);
}
.lang-switch button {
border: 0;
background: transparent;
color: var(--text-2);
font: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
padding: 6px 10px;
cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease);
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active {
background: var(--accent);
color: oklch(15% 0.03 58);
}
/* ─── Responsive adjustments ──────────────────────────────── */
@media (max-width: 760px) {
.promo-strip { font-size: 12px; }
.promo-strip .container { gap: 8px; padding-top: 7px; padding-bottom: 7px; }
.promo-strip .promo-tag { font-size: 9.5px; padding: 2px 7px; }
.promo-strip a { display: none; } /* keep the strip slim on phones */
.hero { padding-top: 156px; }
html { scroll-padding-top: 120px; }
.pricing-promo { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; padding: 16px 18px; }
.pricing-promo h3 { font-size: 17px; }
/* Mobile menu offset moves down to clear the strip + nav */
.nav-links.open { inset: calc(74px + 34px) 0 auto 0 !important; }
/* Keep the TR/EN pill at a comfortable tap target (≥40px) and hide
the CTA on tight viewports so the lang switch + hamburger fit. */
.lang-switch button { padding: 10px 14px; font-size: 12px; min-height: 40px; min-width: 40px; }
.nav-actions .btn-primary.btn-sm { display: none; }
}