/* ── reset & tokens ── */
 *, *::before, *::after { box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 body {
 margin: 0;
 font-family: "Rubik", system-ui, sans-serif;
 color: #0d1929;
 background: #fff;
 }
 /* Anchor the chat preview to Heebo (intentional separation from page font) */
.chat-phone,.chat-phone * { font-family: "Heebo", system-ui, sans-serif !important; }
 a { text-decoration: none; color: inherit; }
 img { display: block; max-width: 100%; }

 :root {
 --navy: #0d1929;
 --navy2: #11223a;
 --navy3: #172d48;
 --gold: #c9a84c;
 --gold2: #e6c97a;
 --gold-bg: rgba(201,168,76,.10);
 --gold-line: rgba(201,168,76,.22);
 --off: #f6f8fb;
 --muted: #6b7a93;
 --line: #e4e9f0;
 --r: 18px;
 --rlg: 28px;
 --sh: 0 4px 24px rgba(13,25,41,.08);
 --sh2: 0 12px 48px rgba(13,25,41,.13);
 }

 /* ── shell ── */
.w { width: min(1180px, calc(100% - clamp(20px, 4vw, 64px))); margin: 0 auto; }

 /* ── header ── */
 /* Top dark stack. banner + nav share the SAME bg as hero (seamless flow) */
.top-stack {
 position: relative;
 background:
 radial-gradient(ellipse 60% 50% at 50% 100%, rgba(201,168,76,.13) 0%, transparent 65%),
 linear-gradient(180deg, #0b1826 0%, #0d1929 55%, #0f1e36 100%);
 min-height: 100vh;
 min-height: 100dvh; /* modern dynamic viewport height (handles mobile address bar) */
 display: flex;
 flex-direction: column;
 }
 /* Minimal gold-tinted inset frame around the opening screen */
.top-stack::before {
 content: '';
 position: absolute;
 inset: clamp(8px, 1.4vw, 18px);
 border: 1px solid rgba(201,168,76,.16);
 border-radius: clamp(14px, 1.8vw, 22px);
 pointer-events: none;
 z-index: 0;
 }
.top-stack > * { position: relative; z-index: 1; }
.anim-logo-banner { flex-shrink: 0; }
.site-header { flex-shrink: 0; }
.top-stack > .hero {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;     /* vertically center the grid content */
}
.top-stack > .hero > .hero-scroll-bar {
 margin-top: auto;             /* always push to bottom of hero */
}
 /* Hero loses the top portion of its gradient. top-stack covers it now.
 Just keeps the right-bottom green glow accent. */
.hero { background: transparent !important; padding-top: 24px !important; padding-bottom: 0 !important; padding-inline: clamp(8px, 2vw, 16px) !important; }
.hero::before {
 content:''; position:absolute; inset:0;
 background:
 radial-gradient(ellipse 80% 60% at 100% 100%, rgba(31,140,99,.07) 0%, transparent 60%);
 pointer-events:none;
 }
.site-header {
 position: relative;
 background: transparent;
 backdrop-filter: none;
 border: none;
 box-shadow: none;
 }
 /* Navbar. empty by design. Menu is a floating fixed button (below). */
.nav {
 display: flex; align-items: center;
 justify-content: flex-start; gap: 4px; padding: 0;
 min-height: 0;
 }
.nav-cta-group { display: none !important; }
.nav-mobile-cta { display: none !important; }
.nav-links { display: none !important; }

 /* Hide the original nav-toggle entirely. using new menu buttons */
.nav-toggle { display: none !important; }

 /* In-hero menu button. sits above the eyebrow at right column top */
.hero-menu-btn {
 align-self: flex-start;
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 8px 16px 8px 14px;
 background: rgba(201,168,76,.12);
 border: 1px solid rgba(201,168,76,.42);
 border-radius: 999px;
 color: var(--gold2);
 font-family: "Rubik", sans-serif;
 font-size: 0.88rem;
 font-weight: 700;
 line-height: 1;
 letter-spacing: 0.02em;
 cursor: pointer;
 margin-bottom: 14px;
 transition: all 200ms ease;
 box-shadow: 0 2px 10px rgba(0,0,0,.18);
 }
.hero-menu-btn:hover {
 background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
 border-color: rgba(230,201,122,.8);
 color: var(--navy);
 transform: translateY(-1px);
 box-shadow: 0 6px 18px rgba(201,168,76,.30);
 }
.menu-icon {
 display: flex;
 flex-direction: column;
 gap: 3px;
 width: 16px;
 }
.menu-icon span {
 display: block;
 height: 2px;
 width: 100%;
 background: currentColor;
 border-radius: 1px;
 }

 /* Sticky compact top-bar. appears when scrolled past banner */
.sticky-top-bar {
 position: fixed;
 top: 0; left: 0; right: 0;
 z-index: 150;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 8px clamp(12px, 2.5vw, 28px);
 background: rgba(11,24,38,.92);
 border-bottom: 1px solid rgba(201,168,76,.30);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 box-shadow: 0 4px 16px rgba(0,0,0,.25);
 transform: translateY(-110%);
 transition: transform 320ms cubic-bezier(.4,0,.2,1);
 pointer-events: none;
 }
 body.scrolled .sticky-top-bar {
 transform: translateY(0);
 pointer-events: auto;
 }
.stb-logo { height: 32px; width: auto; display: block; }
.stb-menu {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 6px 14px 6px 12px;
 background: rgba(201,168,76,.14);
 border: 1px solid rgba(201,168,76,.45);
 border-radius: 999px;
 color: var(--gold2);
 font-family: "Rubik", sans-serif;
 font-size: 0.82rem; font-weight: 700;
 cursor: pointer;
 transition: all 180ms ease;
 }
.stb-menu:hover {
 background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
 color: var(--navy);
 border-color: rgba(230,201,122,.8);
 }
 @media (max-width: 600px) {
.stb-logo { height: 26px; }
.stb-menu { padding: 5px 12px 5px 10px; font-size: 0.76rem; }
.hero-menu-btn { font-size: 0.82rem; padding: 7px 14px 7px 12px; }
 }
.nav-links {
 display: flex; align-items: center; gap: 4px;
 font-size:.88rem; font-weight: 600;
 }
.nav-links a {
 color: var(--muted); padding: 8px 15px; border-radius: 999px;
 border: 1px solid transparent;
 transition: color 180ms, background 180ms, border-color 180ms, transform 160ms;
 }
.nav-links a:hover {
 color: var(--navy); background: rgba(13,25,41,.06);
 border-color: var(--line); transform: translateY(-1px);
 }
.nav-scroll-top {
 color: var(--gold2) !important;
 font-weight: 700;
 }
.nav-cta {
 background: var(--navy); color: #fff;
 font-weight: 700; font-size:.88rem;
 padding: 10px 22px; border-radius: 999px; white-space: nowrap;
 transition: background 160ms, box-shadow 160ms, transform 160ms;
 }
.nav-cta:hover {
 background: var(--navy2);
 box-shadow: 0 6px 22px rgba(13,25,41,.22);
 transform: translateY(-1px);
 }

 /* ── HERO ── */
.hero {
 padding: 80px 0 72px;
 background:
 radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,168,76,.13) 0%, transparent 65%),
 linear-gradient(180deg, #0b1826 0%, #0d1929 55%, #0f1e36 100%);
 overflow: hidden; position: relative;
 }
.hero::after {
 content: ''; position: absolute; inset: 0;
 background: radial-gradient(ellipse 80% 60% at 100% 100%, rgba(31,140,99,.07) 0%, transparent 60%);
 pointer-events: none;
 }
.hero-inner {
 display: grid;
 grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.2fr);
 gap: clamp(28px, 4vw, 64px);
 align-items: center;
 }
 /* Right text column distributes content evenly to match phone height */
.hero-inner > div:first-child {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 gap: 14px;
 min-width: 0;
 }
.hero-eyebrow {
 display: inline-block; text-align: center;
 align-self: flex-start;
 padding: 3px 10px 3px 8px;
 background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.25);
 border-radius: 999px; color: var(--gold2);
 font-size: clamp(0.72rem, 0.95vw, 0.88rem); font-weight: 600; margin-bottom: clamp(14px, 2vw, 22px);
 }
.hero-eyebrow span {
 display: inline-block; width: 6px; height: 6px; border-radius: 50%;
 background: var(--gold); vertical-align: middle;
 }
.hero h1 {
 font-family: "Space Grotesk", sans-serif;
 font-size: clamp(2.0rem, 4.6vw, 4.0rem); font-weight: 700;
 line-height: 1.05; letter-spacing: -.04em;
 color: #fff; margin: 0 0 clamp(14px, 2vw, 22px);
 }
.hero h1 em {
 font-style: normal;
 background: linear-gradient(130deg, var(--gold) 0%, var(--gold2) 100%);
 -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 }
.hero-sub {
 color: rgba(255,255,255,.58);
 font-size: clamp(0.98rem, 1.2vw, 1.15rem);
 line-height: 1.65; max-width: 42ch;
 margin: 0 0 clamp(20px, 2.5vw, 32px);
 }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; position: relative; justify-content: center; align-self: center; }
.btn-quick-entry {
 display: inline-flex; align-items: center; gap: 7px;
 background: linear-gradient(135deg, #e6c97a 0%, #c9a84c 50%, #b08534 100%);
 color: #0d1929; font-weight: 800; font-size: 0.88rem;
 padding: 6px 14px; border-radius: 999px;
 box-shadow: 0 4px 14px rgba(201,168,76,.25);
 transition: transform 160ms, box-shadow 160ms;
 cursor: pointer; border: none;
 font-family: "Rubik", system-ui, sans-serif;
}
.btn-quick-entry:hover {
 transform: translateY(-2px);
 box-shadow: 0 14px 38px rgba(201,168,76,.45);
}
.quick-entry-popup {
 position: absolute; top: calc(100% + 10px); right: 0;
 display: none; flex-direction: column; gap: 8px;
 background: rgba(13,25,41,.95);
 border: 1px solid rgba(201,168,76,.30);
 border-radius: 16px; padding: 14px 16px;
 backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
 box-shadow: 0 12px 40px rgba(0,0,0,.45);
 z-index: 20; min-width: 220px;
 animation: qe-pop-in 200ms ease-out;
}
.quick-entry-popup.open { display: flex; }
@keyframes qe-pop-in {
 from { opacity: 0; transform: translateY(-8px); }
 to { opacity: 1; transform: translateY(0); }
}
.quick-entry-popup .btn-tg,
.quick-entry-popup .btn-wa {
 justify-content: center; text-align: center; width: 100%;
}
.btn-primary {
 display: inline-flex; align-items: center; gap: 9px;
 background: linear-gradient(135deg, var(--gold) 0%, #b08534 100%);
 color: #0d1929; font-weight: 800; font-size:.96rem;
 padding: 14px 28px; border-radius: 999px;
 box-shadow: 0 8px 32px rgba(201,168,76,.28);
 transition: transform 160ms, box-shadow 160ms;
 }
.btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 14px 40px rgba(201,168,76,.38);
 }
.btn-outline {
 display: inline-flex; align-items: center; gap: 9px;
 border: 1.5px solid rgba(255,255,255,.2); color: rgba(255,255,255,.88);
 font-weight: 600; font-size:.94rem;
 padding: 13px 24px; border-radius: 999px;
 transition: border-color 160ms, background 160ms;
 }
.btn-outline:hover {
 border-color: rgba(255,255,255,.5);
 background: rgba(255,255,255,.06);
 }
.hero-trust {
 display: flex; align-items: center; gap: 14px;
 margin-top: 22px; color: rgba(255,255,255,.38); font-size:.8rem;
 }
.hero-trust strong { color: rgba(255,255,255,.6); }
.hero-soon {
 margin-top: 8px; font-size:.76rem;
 color: rgba(255,255,255,.35);
 }

 /* hero card */
.hero-card {
 background: rgba(255,255,255,.05);
 border: 1px solid rgba(201,168,76,.2);
 border-radius: var(--rlg); padding: 28px;
 backdrop-filter: blur(8px);
 }
.hero-card-badge {
 display: inline-flex; align-items: center; gap: 7px;
 background: var(--gold-bg); border: 1px solid var(--gold-line);
 border-radius: 999px; padding: 5px 13px;
 color: var(--gold2); font-size:.78rem; font-weight: 700;
 letter-spacing:.04em; margin-bottom: 20px;
 }
.hc-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.hc-step {
 display: flex; align-items: flex-start; gap: 14px;
 padding: 14px 16px; border-radius: 14px;
 background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
 }
.hc-num {
 width: 28px; height: 28px; border-radius: 50%;
 background: rgba(201,168,76,.18); border: 1px solid rgba(201,168,76,.3);
 color: var(--gold2); font-size:.78rem; font-weight: 800;
 display: flex; align-items: center; justify-content: center; flex-shrink: 0;
 }
.hc-step-text strong { display: block; font-size:.9rem; color: #fff; margin-bottom: 2px; }
.hc-step-text span { font-size:.82rem; color: rgba(255,255,255,.45); }
.hc-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.hcm {
 text-align: center; padding: 12px 8px;
 background: rgba(255,255,255,.04); border-radius: 12px;
 border: 1px solid rgba(255,255,255,.07);
 }
.hcm strong {
 display: block; font-family: "Space Grotesk", sans-serif;
 font-size: 1.6rem; font-weight: 700; color: var(--gold2); line-height: 1;
 }
.hcm span { font-size:.7rem; color: rgba(255,255,255,.4); margin-top: 3px; display: block; }

 /* ── section base ── */
 section { padding: 80px 0; }
.sec-label {
 display: inline-block; font-size:.73rem; font-weight: 700;
 letter-spacing:.13em; text-transform: uppercase;
 color: var(--gold); margin-bottom: 10px;
 }
 h2.sec-title {
 font-family: "Space Grotesk", sans-serif;
 font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700;
 letter-spacing: -.04em; line-height: 1.06;
 color: var(--navy); margin: 0 0 14px;
 }
 h2.sec-title .on-dark { color: #fff; }
.sec-sub {
 color: var(--muted); font-size: 1.02rem;
 line-height: 1.75; max-width: 46ch; margin: 0 0 44px;
 }
.sec-sub .on-dark { color: rgba(255,255,255,.48); }
.sec-title-row {
 display: flex; align-items: flex-end;
 justify-content: space-between; gap: 20px;
 flex-wrap: wrap; margin-bottom: 40px;
 }
.sec-title-col { flex: 1; }

 /* ── FEATURES ── */
.features-bg { background: var(--off); }
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.feat {
 padding: 26px 24px; background: #fff;
 border-radius: var(--r); border: 1px solid var(--line);
 transition: box-shadow 200ms, transform 200ms;
 }
.feat:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
.feat-icon {
 width: 46px; height: 46px; border-radius: 13px;
 background: var(--gold-bg); border: 1px solid var(--gold-line);
 display: flex; align-items: center; justify-content: center;
 font-size: 1.35rem; margin-bottom: 16px;
 }
.feat h3 { font-size: 1.03rem; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.feat p { font-size:.9rem; color: var(--muted); line-height: 1.72; margin: 0; }

 /* ── HOW IT WORKS ── */
.steps {
 display: grid; grid-template-columns: repeat(3,1fr);
 gap: 0; position: relative;
 }
.steps::before {
 content: ''; position: absolute;
 top: 28px; right: calc(100%/6); left: calc(100%/6);
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold-line), var(--gold-line), transparent);
 }
.step { padding: 0 24px; text-align: center; }
.step-num {
 width: 56px; height: 56px; border-radius: 50%;
 background: var(--navy); color: var(--gold2);
 font-family: "Space Grotesk", sans-serif;
 font-size: 1.1rem; font-weight: 700;
 display: flex; align-items: center; justify-content: center;
 margin: 0 auto 20px;
 border: 3px solid var(--gold-line);
 box-shadow: 0 0 0 6px rgba(201,168,76,.07);
 }
.step h3 { font-size: 1.08rem; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.step p { font-size:.9rem; color: var(--muted); line-height: 1.72; margin: 0; }

 /* ── PLANS ── */
.plans-bg { background: linear-gradient(180deg, #0b1826 0%, #0d1929 100%); }
.plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.plan {
 padding: 26px 22px;
 background: rgba(255,255,255,.04);
 border: 1px solid rgba(255,255,255,.09);
 border-radius: var(--r); position: relative;
 transition: border-color 200ms, background 200ms;
 }
.plan:hover { background: rgba(255,255,255,.07); border-color: rgba(201,168,76,.3); }
.plan .best {
 background: rgba(201,168,76,.09);
 border-color: rgba(201,168,76,.4);
 box-shadow: 0 0 0 1px rgba(201,168,76,.15);
 }
.plan-tag {
 position: absolute; top: -11px; right: 16px;
 background: var(--gold); color: var(--navy);
 font-size:.76rem; font-weight: 800; letter-spacing:.06em;
 padding: 4px 12px; border-radius: 999px;
 }
.plan-type { font-size:.76rem; font-weight: 700; letter-spacing:.1em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.plan-name { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 4px; }
.plan-price {
 font-family: "Space Grotesk", sans-serif;
 font-size: 2rem; font-weight: 700; color: var(--gold2);
 margin: 14px 0 4px; line-height: 1;
 }
.plan-price small { font-size:.85rem; font-weight: 400; color: rgba(255,255,255,.35); }
.plan-desc { font-size:.86rem; color: rgba(255,255,255,.42); line-height: 1.65; margin: 0; }
.plan-section-label {
 font-size:.76rem; font-weight: 700; letter-spacing:.1em; text-transform: uppercase;
 color: rgba(255,255,255,.3); margin: 28px 0 12px;
 }
.plan-note {
 grid-column: 1/-1; text-align: center; padding: 20px;
 border: 1px dashed rgba(201,168,76,.2);
 border-radius: var(--r); color: rgba(255,255,255,.45); font-size:.9rem;
 }
.plan-note strong { color: var(--gold2); }

 /* ── TESTIMONIALS ── */
.testi-bg { background: var(--off); }
/* ── FAQ ── */
.faq-section { background: #fff; }
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
 background: #fff; border: 1px solid var(--line); border-radius: var(--r);
 padding: 0 22px; transition: box-shadow 200ms, border-color 200ms;
 }
.faq-item[open] { box-shadow: var(--sh); border-color: var(--gold-line); }
.faq-item summary {
 list-style: none; cursor: pointer; display: flex; align-items: center;
 justify-content: space-between; gap: 16px; padding: 18px 0;
 }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--navy); }
.faq-chev {
 flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--gold);
 border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform 200ms;
 }
.faq-item[open] .faq-chev { transform: rotate(-135deg); }
.faq-item p { margin: 0 0 20px; color: var(--muted); line-height: 1.75; font-size: .98rem; }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.testi {
 padding: 26px 24px; background: #fff;
 border-radius: var(--r); border: 1px solid var(--line);
 }
.testi-stars { color: var(--gold); font-size:.8rem; margin-bottom: 10px; letter-spacing: 1px; }
.testi-quote { font-size: 2.4rem; line-height: 1; color: var(--gold); font-family: Georgia,serif; margin-bottom: 12px; }
.testi p { font-size:.94rem; color: #3a4557; line-height: 1.75; margin: 0 0 18px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
 width: 40px; height: 40px; border-radius: 50%;
 background: linear-gradient(135deg, var(--navy) 0%, var(--navy3) 100%);
 color: var(--gold2); font-weight: 700; font-size:.9rem;
 display: flex; align-items: center; justify-content: center; flex-shrink: 0;
 }
.testi-author-info strong { display: block; font-size:.88rem; color: var(--navy); font-weight: 700; }
.testi-author-info span { font-size:.78rem; color: var(--muted); }

 /* ── CTA ── */
.cta-band {
 padding: 80px 0;
 background: linear-gradient(135deg, #08111e 0%, #0d1929 50%, #112438 100%);
 position: relative; overflow: hidden;
 }
.cta-band::before {
 content: ''; position: absolute;
 width: 600px; height: 400px;
 background: radial-gradient(ellipse, rgba(201,168,76,.10) 0%, transparent 65%);
 top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none;
 }
.cta-inner { position: relative; z-index: 1; text-align: center; }
.cta-inner h2 {
 font-family: "Space Grotesk", sans-serif;
 font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 700;
 letter-spacing: -.04em; color: #fff; margin: 0 0 14px;
 }
.cta-inner p { color: rgba(255,255,255,.5); font-size: 1.05rem; margin: 0 auto 32px; max-width: 44ch; line-height: 1.75; }
.cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.btn-primary-dark {
 display: inline-flex; align-items: center; gap: 9px;
 background: linear-gradient(135deg, var(--gold) 0%, #b08534 100%);
 color: var(--navy); font-weight: 800; font-size:.96rem;
 padding: 14px 30px; border-radius: 999px;
 box-shadow: 0 8px 32px rgba(201,168,76,.3);
 transition: transform 160ms, box-shadow 160ms;
 }
.btn-primary-dark:hover { transform: translateY(-2px); box-shadow: 0 14px 42px rgba(201,168,76,.4); }
.btn-outline-light {
 display: inline-flex; align-items: center; gap: 9px;
 border: 1.5px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85);
 font-weight: 600; font-size:.94rem; padding: 13px 26px; border-radius: 999px;
 transition: border-color 160ms;
 }
.btn-outline-light:hover { border-color: rgba(255,255,255,.5); }

 /* ── LEGAL SECTIONS ── */
.legal-section { padding: 72px 0; border-top: 1px solid var(--line); }
.legal-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 28px; }
.legal-note { padding: 22px 0; border-top: 1px solid var(--line); }
.legal-note h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.legal-note p { font-size:.92rem; color: var(--muted); line-height: 1.75; margin: 0; }

 /* ── CONTACT ── */
.contact-section { padding: 72px 0; background: var(--off); }
.contact-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 28px; }
.contact-block { padding: 22px 0; border-top: 1px solid var(--line); }
.contact-block h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.contact-list { display: flex; flex-direction: column; gap: 8px; }
.contact-list a,
.contact-list span { font-size:.92rem; color: var(--muted); line-height: 1.7; transition: color 150ms; }
.contact-list a:hover { color: var(--navy); }

 /* ── FOOTER ── */
 footer {
 background: #07101c; padding: 52px 0 28px;
 color: rgba(255,255,255,.38);
 border-top: 1px solid rgba(201,168,76,.1);
 }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-brand strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; color: #fff; margin-bottom: 10px; }
.footer-brand p { font-size:.87rem; line-height: 1.75; margin: 0; }
.footer-col h4 { font-size:.78rem; font-weight: 700; letter-spacing:.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.footer-col a { display: block; font-size:.88rem; color: rgba(255,255,255,.38); margin-bottom: 9px; transition: color 150ms; }
.footer-col a:hover { color: rgba(255,255,255,.8); }
.footer-bar {
 border-top: 1px solid rgba(255,255,255,.06);
 padding-top: 22px; display: flex;
 justify-content: space-between; font-size:.8rem;
 flex-wrap: wrap; gap: 10px;
 }

 /* ── scroll reveal ── */
.reveal {
 opacity: 0; transform: translateY(28px);
 transition: opacity.62s ease, transform.62s ease;
 }
.reveal.in { opacity: 1; transform: translateY(0); }

 /* ── floating back to top ── */
.back-to-top {
 position: fixed;
 inset-inline-end: 24px;
 bottom: 24px;
 z-index: 140;
 height: 48px;
 padding: 0 18px;
 border: 0;
 border-radius: 999px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
 color: var(--gold2);
 font-family: "Rubik", sans-serif;
 font-size:.85rem;
 font-weight: 500;
 box-shadow: 0 16px 34px rgba(13,25,41,.22);
 cursor: pointer;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(12px);
 transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, box-shadow 180ms ease;
 }
.back-to-top:hover {
 transform: translateY(-2px);
 box-shadow: 0 20px 38px rgba(13,25,41,.28);
 }
.back-to-top.show {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateY(0);
 }

 /* ── Telegram button (brand blue) ── */
.btn-tg {
 display: inline-flex; align-items: center; gap: 9px;
 background: linear-gradient(135deg, #2AABEE 0%, #1a8fc7 100%);
 color: #fff; font-weight: 800; font-size:.96rem;
 padding: 14px 28px; border-radius: 999px;
 box-shadow: 0 8px 28px rgba(42,171,238,.30);
 transition: transform 160ms, box-shadow 160ms;
 }
.btn-tg:hover {
 transform: translateY(-2px);
 box-shadow: 0 14px 38px rgba(42,171,238,.42);
 }
 /* ── WhatsApp button ── */
.btn-wa {
 display: inline-flex; align-items: center; gap: 9px;
 background: linear-gradient(135deg, #25d366 0%, #1da851 100%);
 color: #fff; font-weight: 800; font-size:.96rem;
 padding: 14px 28px; border-radius: 999px;
 box-shadow: 0 8px 28px rgba(37,211,102,.28);
 transition: transform 160ms, box-shadow 160ms;
 }
.btn-wa:hover {
 transform: translateY(-2px);
 box-shadow: 0 14px 38px rgba(37,211,102,.38);
 }
 /* app logo svgs inside buttons */
.app-logo { width:20px; height:20px; flex-shrink:0; }

 /* ── Nav CTA group ── */
.nav-cta-group {
 display: flex; align-items: center; gap: 8px;
 }

 /* ── Mobile nav toggle ── */
.nav-toggle {
 display: none;
 background: none; border: 1.5px solid var(--line);
 border-radius: 10px; padding: 7px 11px;
 cursor: pointer; color: var(--navy);
 font-size: 1.1rem; line-height: 1;
 transition: background 150ms;
 }
.nav-toggle:hover { background: var(--off); }
.nav-mobile-drawer {
 display: none;
 position: fixed; inset: 0; z-index: 200;
 }
.nav-mobile-overlay {
 position: absolute; inset: 0;
 background: rgba(13,25,41,.45);
 }
.nav-mobile-panel {
 position: absolute; top: 0; right: 0;
 width: min(300px, 86vw);
 height: 100%;
 background: #fff;
 box-shadow: -8px 0 40px rgba(13,25,41,.18);
 display: flex; flex-direction: column;
 padding: 24px 20px;
 gap: 6px;
 overflow-y: auto;
 }
.nav-mobile-panel .close-btn {
 align-self: flex-start;
 background: none; border: none; cursor: pointer;
 font-size: 1.4rem; color: var(--muted); padding: 4px 8px;
 margin-bottom: 8px;
 }
.nav-mobile-panel a {
 display: block; padding: 13px 16px;
 border-radius: 12px; font-size: 1rem; font-weight: 600;
 color: var(--navy);
 transition: background 150ms;
 }
.nav-mobile-panel a:hover { background: var(--off); }
.nav-mobile-panel .nav-mobile-cta {
 margin-top: 10px; display: flex; flex-direction: column; gap: 10px;
 }
.nav-mobile-panel .nav-mobile-cta a {
 text-align: center; padding: 13px; border-radius: 999px;
 font-weight: 800; font-size:.95rem;
 }
.nav-mobile-drawer.open { display: block; }

 /* ── responsive ── */
 /* Tablet (601-900px): text-favored 2-col with breathing gap */
 @media (max-width: 900px) and (min-width: 601px) {
.hero-inner { grid-template-columns: minmax(0, 0.8fr) minmax(200px, 1.2fr) !important; gap: clamp(16px, 2.5vw, 28px) !important; }
 }
 /* Mobile <=900 — refined sizes */
 @media (max-width: 900px) {
.hero-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important; gap: clamp(12px, 2vw, 22px) !important; }
.hero h1 { font-size: clamp(1.85rem, 6vw, 3rem) !important; line-height: 1.08 !important; margin-bottom: 14px; }
.hero h1 br { display: inline; }
.hero-sub { font-size: clamp(1rem, 2.5vw, 1.18rem) !important; line-height: 1.55; margin-bottom: 18px; max-width: 38ch; }
.hero-eyebrow { font-size: 0.74rem !important; padding: 5px 12px 5px 10px !important; margin-bottom: 14px; }
.hero-btns { flex-direction: column; gap: 8px; }
.btn-quick-entry { font-size: clamp(0.85rem, 2.2vw, 1rem) !important; padding: 12px 22px !important; }
.quick-entry-popup .btn-tg,.quick-entry-popup .btn-wa {
 font-size: clamp(0.78rem, 2vw, 0.95rem) !important;
 padding: 10px 14px !important;
 white-space: nowrap;
 justify-content: center;
 }
.hero-trust { flex-direction: column; gap: 4px; align-items: flex-start; font-size: clamp(0.7rem, 1.5vw, 0.82rem); }
 }
 /* Stack vertically below 440px (phone above text) */
 @media (max-width: 440px) {
.hero-inner { grid-template-columns: 1fr !important; gap: 22px !important; }
.hero-inner > div:first-child { order: 1; }   /* value proposition + CTAs first */
.chat-sim { order: 2; }
.iphone17-stage { max-width: 380px; margin: 0 auto; }
 }
 @media (max-width: 600px) {
.feat-grid,.steps,
.testi-grid,.footer-grid,.legal-grid,.contact-grid {
 grid-template-columns: 1fr;
 }
.plans-grid { grid-template-columns: repeat(2, 1fr); }
.steps::before { display: none; }
.nav-links { display: none; }
 /* hamburger moves to the right (RTL start side) */
.nav-toggle {
 display: inline-flex; align-items: center; justify-content: center;
 order: -1; /* in RTL flex, order -1 = rightmost */
 }
 /* CTA buttons: smaller, stacked vertically, on the left */
.nav-cta-group {
 flex-direction: column;
 gap: 4px;
 align-items: stretch;
 }
.nav-cta-group .nav-cta {
 font-size:.7rem !important;
 padding: 5px 10px !important;
 border-radius: 8px !important;
 white-space: nowrap;
 justify-content: center;
 }
.nav-cta-group .app-logo {
 width: 14px; height: 14px;
 }
.hero { padding: 52px 0 0; }
.hero-btns { flex-direction: column; align-items: center; }
.quick-entry-popup a { text-align: center; justify-content: center; }
.hero-trust { flex-wrap: wrap; gap: 8px; }
.back-to-top {
 inset-inline-end: 16px;
 bottom: 16px;
 height: 42px;
 padding: 0 14px;
 font-size:.78rem;
 }
 }
 @media (max-width: 520px) {
.plans-grid { grid-template-columns: 1fr; }
 }

 /* ── CHAT SIMULATION ── */
.chat-sim { position: relative; direction: ltr; }
.chat-toggle-wrap {
 display: flex; gap: 4px; margin-bottom: 10px; justify-content: center;
 }
.chat-toggle-btn {
 display: inline-flex; align-items: center; gap: 5px;
 padding: 5px 12px; border-radius: 999px;
 border: 1px solid rgba(255,255,255,.12);
 background: rgba(255,255,255,.04); color: rgba(255,255,255,.45);
 font-family: "Rubik", sans-serif; font-size:.68rem; font-weight: 600;
 cursor: pointer; transition: all 220ms; outline: none;
 }
.chat-toggle-btn:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.65); }
.chat-toggle-btn.active[data-platform="whatsapp"] {
 background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.4); color: #25d366;
 }
.chat-toggle-btn.active[data-platform="telegram"] {
 background: rgba(42,171,238,.12); border-color: rgba(42,171,238,.4); color: #2AABEE;
 }
.chat-toggle-btn svg { width: 12px; height: 12px; }

.chat-phone {
 border-radius: 22px; overflow: hidden;
 border: 1.5px solid rgba(255,255,255,.1);
 box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
 display: flex; flex-direction: column;
 transition: border-color 300ms;
 }
.chat-phone.wa-theme { background: #0b141a; border-color: rgba(37,211,102,.15); }
.chat-phone.tg-theme { background: #0e1621; border-color: rgba(42,171,238,.15); }

.chat-hdr {
 padding: 10px 14px; display: flex; align-items: center; gap: 10px;
 border-bottom: 1px solid rgba(255,255,255,.06);
 }
.chat-hdr.wa-hdr { background: #1f2c34; }
.chat-hdr.tg-hdr { background: linear-gradient(135deg, #2AABEE, #1a8fc7); }
.chat-hdr-back { color: rgba(255,255,255,.6); font-size: 1.1rem; cursor: default; }
.chat-avatar {
 width: 36px; height: 36px; border-radius: 50%;
 flex-shrink: 0; overflow: hidden;
 border: 1.5px solid rgba(255,255,255,.15);
 background: #fff;
 }
.chat-avatar img {
 width: 100%; height: 100%; object-fit: cover;
 }
.chat-hdr-info { flex: 1; min-width: 0; }
.chat-hdr-name { font-size:.86rem; font-weight: 700; color: #fff; line-height: 1.2; }
.chat-hdr-status { font-size:.68rem; color: rgba(255,255,255,.5); }
.chat-hdr-status.typing-status { color: #25d366; }
.chat-hdr-actions { display: flex; gap: 14px; color: rgba(255,255,255,.55); font-size: 1rem; }

.chat-body {
 flex: 1; overflow-y: auto; padding: 10px 10px 14px;
 display: flex; flex-direction: column; gap: 5px;
 min-height: 370px; max-height: 370px;
 scrollbar-width: thin;
 scrollbar-color: rgba(255,255,255,.08) transparent;
 }
.chat-body::-webkit-scrollbar { width: 4px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.chat-date-pill {
 align-self: center; padding: 4px 12px; border-radius: 8px;
 background: rgba(255,255,255,.06); color: rgba(255,255,255,.4);
 font-size:.68rem; font-weight: 500; margin: 4px 0 6px;
 }

.chat-msg {
 max-width: 86%; padding: 6px 8px 3px; border-radius: 8px;
 font-size:.78rem; line-height: 1.55; position: relative;
 direction: rtl; text-align: right; word-break: break-word;
 animation: chatMsgIn.32s cubic-bezier(.22,.61,.36,1);
 }
 @keyframes chatMsgIn {
 from { opacity: 0; transform: translateY(10px) scale(.97); }
 to { opacity: 1; transform: translateY(0) scale(1); }
 }
.chat-msg.bot { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }
.chat-msg.bot.wa { background: #1f2c34; color: #e9edef; border-top-left-radius: 2px; }
.chat-msg.user.wa { background: #005c4b; color: #e9edef; border-top-right-radius: 2px; }
.chat-msg.bot.tg { background: #182533; color: #e4e6eb; border-top-left-radius: 2px; }
.chat-msg.user.tg { background: #2b5278; color: #e4e6eb; border-top-right-radius: 2px; }

.chat-msg-text { white-space: pre-line; }
.chat-msg-meta {
 display: flex; align-items: center; justify-content: flex-start;
 gap: 4px; margin-top: 2px; direction: ltr;
 }
.chat-msg-time { font-size:.6rem; color: rgba(255,255,255,.3); }
.chat-msg-checks { font-size:.65rem; color: #53bdeb; }

.chat-btns-wrap {
 display: flex; flex-direction: column; gap: 3px; margin-top: 5px;
 animation: chatMsgIn.32s cubic-bezier(.22,.61,.36,1);
 }
.chat-btns-row { display: flex; gap: 3px; }
.chat-btn-wa {
 flex: 1; padding: 8px 6px; text-align: center;
 background: transparent; border: 1px solid rgba(0,168,132,.2);
 border-radius: 8px; color: #00a884; font-size:.74rem;
 font-weight: 600; font-family: "Rubik", sans-serif;
 cursor: default; direction: rtl; transition: background 200ms;
 }
.chat-btn-tg {
 flex: 1; padding: 8px 6px; text-align: center;
 background: rgba(42,171,238,.08); border: none;
 border-radius: 6px; color: #64b5ef; font-size:.74rem;
 font-weight: 600; font-family: "Rubik", sans-serif;
 cursor: default; direction: rtl; transition: background 200ms;
 }
.chat-btn-wa.pulse,.chat-btn-tg.pulse {
 animation: btnPulse 1s ease-in-out;
 }
 @keyframes btnPulse {
 0%,100% { opacity: 1; }
 50% { opacity:.5; }
 }

.chat-file-bubble {
 display: flex; align-items: center; gap: 8px;
 padding: 8px; border-radius: 6px; margin-bottom: 3px;
 background: rgba(255,255,255,.05); direction: ltr;
 }
.chat-file-icon {
 width: 34px; height: 40px; border-radius: 4px;
 display: flex; align-items: center; justify-content: center;
 font-size:.55rem; font-weight: 900; letter-spacing:.02em;
 flex-shrink: 0; color: #fff;
 }
.chat-file-icon.pdf { background: #c4453c; }
.chat-file-icon.img { background: #4a90d9; }
.chat-file-details { min-width: 0; direction: rtl; }
.chat-file-name { font-size:.76rem; color: #e9edef; font-weight: 600; }
.chat-file-size { font-size:.64rem; color: rgba(255,255,255,.35); }

.chat-typing-indicator {
 align-self: flex-start; padding: 10px 16px; border-radius: 10px;
 display: flex; gap: 4px; align-items: center;
 animation: chatMsgIn.25s ease-out;
 }
.chat-typing-indicator.wa { background: #1f2c34; }
.chat-typing-indicator.tg { background: #182533; }
.chat-tdot {
 width: 6px; height: 6px; border-radius: 50%;
 background: rgba(255,255,255,.35);
 animation: tdotBounce 1.3s ease-in-out infinite;
 }
.chat-tdot:nth-child(2) { animation-delay:.15s; }
.chat-tdot:nth-child(3) { animation-delay:.3s; }
 @keyframes tdotBounce {
 0%,60%,100% { transform: translateY(0); opacity:.35; }
 30% { transform: translateY(-6px); opacity: 1; }
 }

 /* Fade for restart */
.chat-body.fading { opacity: 0; transition: opacity.5s ease; }
.chat-body.visible { opacity: 1; transition: opacity.3s ease; }

 /* Smaller chat-body on narrow widths so 2-col fits */
 @media (max-width: 700px) {
.chat-body { min-height: 280px; max-height: 280px; }
 }
 @media (max-width: 360px) {
.chat-sim { margin-top: 16px; }
 }

 /* ── ANIMATED LOGO BANNER ─────────────────────────────────────── */
.anim-logo-banner {
 position: relative;
 margin: 16px clamp(16px, 4vw, 56px) 8px;
 height: clamp(170px, 18vw, 230px);
 background:
 radial-gradient(ellipse 55% 65% at 50% 50%, rgba(255,255,255,.10) 0%, transparent 65%),
 linear-gradient(180deg, #0b1826 0%, #0d1929 55%, #0f1e36 100%);
 border: 1px solid rgba(255,255,255,.20);
 border-radius: 16px;
 box-shadow:
 0 14px 40px rgba(13,25,41,.18),
 0 4px 12px rgba(13,25,41,.10),
 inset 0 1px 0 rgba(255,255,255,.18);
 overflow: hidden;
 isolation: isolate;
 }
.anim-logo-banner .anim-bg-glow {
 position: absolute; inset: 0;
 background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255,255,255,.06) 0%, transparent 65%);
 pointer-events: none;
 animation: anim-glow-pulse 6s ease-in-out infinite;
 }
 @keyframes anim-glow-pulse {
 0%, 100% { opacity:.55; }
 50% { opacity: 1; }
 }

.anim-logo-banner .anim-corner {
 position: absolute;
 width: clamp(48px, 5vw, 80px);
 height: clamp(48px, 5vw, 80px);
 border: 2px solid rgba(255,255,255,.15);
 animation: anim-corner-pulse 6s ease-in-out infinite;
 }
.anim-logo-banner .anim-corner-tl { top: 6%; left: 3%; border-right:none; border-bottom:none; }
.anim-logo-banner .anim-corner-tr { top: 6%; right: 3%; border-left:none; border-bottom:none; }
.anim-logo-banner .anim-corner-bl { bottom: 6%; left: 3%; border-right:none; border-top:none; }
.anim-logo-banner .anim-corner-br { bottom: 6%; right: 3%; border-left:none; border-top:none; }
 @keyframes anim-corner-pulse {
 0%, 100% { opacity:.65; }
 50% { opacity: 1; }
 }

.anim-logo-banner .anim-aura {
 position: absolute;
 left: 50%; top: 45%;
 width: min(80%, 1100px);
 height: 90%;
 background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.07) 38%, transparent 70%);
 filter: blur(40px);
 transform: translate(-50%, -50%) scale(1);
 animation: anim-aura-pulse 6s ease-in-out infinite;
 z-index: 1;
 pointer-events: none;
 }
 @keyframes anim-aura-pulse {
 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity:.55; }
 50% { transform: translate(-50%, -50%) scale(1.08); opacity:.95; }
 }

.anim-logo-banner .anim-logo {
 position: absolute;
 left: 50%; top: 42%;
 max-height: 78%;
 max-width: clamp(58%, 42vw, 72%);
 width: auto;
 height: auto;
 filter: drop-shadow(0 12px 28px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(255,255,255,.08));
 transform: translate(-50%, -50%);
 animation: anim-logo-bob 6s ease-in-out infinite;
 z-index: 3;
 user-select: none;
 -webkit-user-drag: none;
 }
 @keyframes anim-logo-bob {
 0%, 100% { transform: translate(-50%, -50%); }
 50% { transform: translate(-50%, calc(-50% - 8px)); }
 }

.anim-logo-banner .anim-underline-wrap {
 position: absolute;
 left: 50%; bottom: 24%;
 width: min(34%, 280px);
 height: 1.5px;
 transform: translateX(-50%);
 z-index: 4;
 pointer-events: none;
 }
.anim-logo-banner .anim-underline {
 position: absolute; inset: 0;
 background: linear-gradient(90deg,
 transparent 0%,
 rgba(255,255,255,.45) 20%,
 rgba(255,255,255,.85) 50%,
 rgba(255,255,255,.45) 80%,
 transparent 100%);
 box-shadow: 0 0 12px rgba(255,255,255,.5);
 transform-origin: 50% 50%;
 animation: anim-underline-cycle 6s ease-in-out infinite;
 }
 @keyframes anim-underline-cycle {
 0% { transform: scaleX(0); }
 22% { transform: scaleX(1); }
 82% { transform: scaleX(1); }
 100% { transform: scaleX(0); }
 }

/* Frosted pill behind the Hebrew tagline — syncs with logo bob */
.anim-logo-banner .anim-text-backdrop {
 position: absolute;
 left: 50%;
 top: 62%;
 width: clamp(170px, 25vw, 310px);
 height: clamp(22px, 2.6vw, 30px);
 transform: translate(-50%, -50%);
 background: rgba(255,255,255,.07);
 border: 1px solid rgba(255,255,255,.12);
 border-radius: 999px;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 box-shadow: 0 2px 12px rgba(0,0,0,.3);
 z-index: 2;
 pointer-events: none;
 animation: anim-logo-bob 6s ease-in-out infinite;
}

.anim-logo-banner .anim-brand-strip {
 position: absolute;
 left: 0; right: 0; bottom: 7%;
 display: flex; justify-content: center; align-items: center;
 gap: 14px;
 font-family: "Space Grotesk", sans-serif;
 font-size: clamp(11px, 1.2vw, 18px);
 font-weight: 600;
 letter-spacing:.42em;
 color: rgba(255,255,255,.65);
 pointer-events: none;
 z-index: 4;
 animation: anim-strip-fade 6s ease-in-out infinite;
 }
.anim-logo-banner .anim-bs-dot {
 width: 6px; height: 6px;
 border-radius: 50%;
 background: rgba(255,255,255,.75);
 box-shadow: 0 0 10px rgba(255,255,255,.5);
 }
 @keyframes anim-strip-fade {
 0%, 100% { opacity: 0; transform: translateY(8px); }
 22%, 87% { opacity: 1; transform: translateY(0); }
 }

.anim-logo-banner .anim-pt {
 position: absolute;
 width: 5px; height: 5px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,.5) 60%, transparent 90%);
 box-shadow: 0 0 14px rgba(255,255,255,.5);
 z-index: 2;
 pointer-events: none;
 opacity: 0;
 }
.anim-logo-banner .anim-pt1 { top: 22%; animation: anim-drift-rtl 6s linear infinite; }
.anim-logo-banner .anim-pt2 { top: 70%; width: 4px; height: 4px;
 animation: anim-drift-ltr 6s linear infinite; animation-delay: -3s; }
.anim-logo-banner .anim-pt3 { top: 38%; width: 7px; height: 7px;
 animation: anim-drift-rtl 6s linear infinite; animation-delay: -1.5s; }
.anim-logo-banner .anim-pt4 { top: 78%; animation: anim-drift-ltr 6s linear infinite; animation-delay: -4.5s; }
.anim-logo-banner .anim-pt5 { top: 30%; width: 4px; height: 4px;
 animation: anim-drift-rtl 6s linear infinite; animation-delay: -2s; }
.anim-logo-banner .anim-pt6 { top: 65%; width: 6px; height: 6px;
 animation: anim-drift-ltr 6s linear infinite; animation-delay: -1s; }
 @keyframes anim-drift-rtl {
 0% { left: -3%; opacity: 0; }
 25% { opacity:.85; }
 75% { opacity:.85; }
 100% { left: 103%; opacity: 0; }
 }
 @keyframes anim-drift-ltr {
 0% { left: 103%; opacity: 0; }
 25% { opacity:.85; }
 75% { opacity:.85; }
 100% { left: -3%; opacity: 0; }
 }

 @media (max-width: 600px) {
.anim-logo-banner { height: clamp(170px, 36vw, 210px); }
.anim-logo-banner .anim-corner { display: none; }
.anim-logo-banner .anim-underline-wrap { bottom: 14%; width: 60%; }
.anim-logo-banner .anim-brand-strip { bottom: 5%; font-size: 10px; letter-spacing:.3em; gap: 10px; }
.anim-logo-banner .anim-logo { max-width: 82%; max-height: 70%; }
 }

 @media (prefers-reduced-motion: reduce) {
.anim-logo-banner *,
.anim-logo-banner .anim-pt { animation: none !important; }
.anim-logo-banner .anim-underline { transform: scaleX(1); }
.anim-logo-banner .anim-brand-strip { opacity: 1; transform: none; }
.anim-logo-banner .anim-pt { display: none; }
 }

 /* ── Chat sizing inside the iPhone screen (compact, fits 225–258px) ── */
.iphone17-screen .chat-hdr { padding: 8px 10px; gap: 8px; }
.iphone17-screen .chat-avatar { width: 28px; height: 28px; border-width: 1px; }
.iphone17-screen .chat-hdr-name { font-size:.74rem; }
.iphone17-screen .chat-hdr-status { font-size:.58rem; }
.iphone17-screen .chat-hdr-actions { gap: 10px; font-size:.82rem; }
.iphone17-screen .chat-hdr-back { font-size:.92rem; }
.iphone17-screen .chat-body { padding: 8px 8px 12px; gap: 4px; }
.iphone17-screen .chat-msg {
 max-width: 92%;
 padding: 5px 8px 3px;
 font-size:.68rem;
 line-height: 1.5;
 border-radius: 7px;
 word-break: normal;
 overflow-wrap: anywhere;
 }
.iphone17-screen .chat-msg-text { font-size:.68rem; }
.iphone17-screen .chat-msg-time { font-size:.52rem; }
.iphone17-screen .chat-msg-checks { font-size:.56rem; }
.iphone17-screen .chat-date-pill { font-size:.58rem; padding: 3px 10px; }
.iphone17-screen .chat-btn-wa,
.iphone17-screen .chat-btn-tg { padding: 6px 5px; font-size:.64rem; border-radius: 6px; }
.iphone17-screen .chat-btns-row { gap: 3px; }
.iphone17-screen .chat-file-bubble { padding: 6px 7px; gap: 6px; border-radius: 5px; }
.iphone17-screen .chat-file-icon { width: 30px; height: 30px; font-size:.58rem; border-radius: 5px; }
.iphone17-screen .chat-file-name { font-size:.66rem; }
.iphone17-screen .chat-file-size { font-size:.56rem; }
.iphone17-screen .chat-typing-indicator { padding: 6px 10px; }
.iphone17-screen .chat-tdot { width: 5px; height: 5px; }

 /* ── iPhone 17 (orange titanium). SVG body + HTML screen ──────── */
.iphone17-stage {
 position: relative;
 width: 100%;
 max-width: clamp(280px, 34vw, 420px);
 aspect-ratio: 320 / 660;
 margin: 0 auto;
 filter:
 drop-shadow(0 28px 50px rgba(0,0,0,.55))
 drop-shadow(0 8px 20px rgba(155,74,34,.4));
 }
.iphone17-frame {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 3;
 }
.iphone17-screen {
 position: absolute;
 left: 2.5%; /* 8/320. thin side bezel */
 top: 2.42%; /* 16/660. thin top bezel */
 right: 2.5%;
 bottom: 2.42%;
 border-radius: 13%/6.5%;
 overflow: hidden;
 z-index: 1;
 background: #0b141a;
 }
.iphone17-screen .chat-phone {
 width: 100%;
 height: 100%;
 border: none !important;
 border-radius: 0 !important;
 box-shadow: none !important;
 display: flex;
 flex-direction: column;
 padding-top: 36px; /* clear dynamic island */
 }
.iphone17-screen .chat-body {
 flex: 1;
 min-height: 0 !important;
 max-height: none !important;
 }
 @media (max-width: 760px) {
.iphone17-stage { max-width: clamp(240px, 48vw, 380px); }
.iphone17-screen .chat-phone { padding-top: 30px; }
 }
 
    /* === Accessibility (IS 5568) — floating button + panel + active modes === */
    .a11y-fab {
      position: fixed;
      bottom: 16px;
      inset-inline-end: 16px;
      z-index: 200;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0078d4 0%, #00509d 100%);
      border: 2px solid #fff;
      color: #fff;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 0 0 rgba(0,120,212,0);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 200ms ease, box-shadow 200ms ease;
    }
    .a11y-fab:hover {
      transform: scale(1.06);
      box-shadow: 0 10px 28px rgba(0,0,0,.42), 0 0 0 6px rgba(0,120,212,.18);
    }
    .a11y-fab:focus-visible { outline: 3px solid var(--gold2); outline-offset: 3px; }
    .a11y-fab svg { width: 24px; height: 24px; fill: #fff; }


    .a11y-panel {
      position: fixed;
      bottom: 76px;
      inset-inline-end: 16px;
      z-index: 201;
      width: 320px;
      max-width: calc(100vw - 32px);
      max-height: calc(100vh - 110px);
      overflow-y: auto;
      background: #fff;
      color: #0d1929;
      border: 2px solid #0078d4;
      border-radius: 14px;
      box-shadow: 0 16px 44px rgba(0,0,0,.32);
      padding: 16px;
      font-family: "Rubik", system-ui, sans-serif;
      transform: translateY(20px);
      opacity: 0;
      pointer-events: none;
      transition: transform 240ms ease, opacity 240ms ease;
    }
    .a11y-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .a11y-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .a11y-head h2 { font-size: 1.05rem; margin: 0; color: #0078d4; font-weight: 700; }
    .a11y-close { background: transparent; border: 0; cursor: pointer; font-size: 1.15rem; color: #555; padding: 4px 8px; border-radius: 6px; }
    .a11y-close:hover { background: #f0f0f0; color: #000; }
    .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .a11y-opt {
      padding: 10px 8px;
      background: #f0f4f8;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      font-size: .8rem;
      font-weight: 500;
      color: #0d1929;
      text-align: center;
      transition: background 150ms, border-color 150ms;
    }
    .a11y-opt:hover { background: #d8e8f5; }
    .a11y-opt:focus-visible { outline: 2px solid #0078d4; outline-offset: 1px; }
    .a11y-opt[aria-pressed="true"] { background: #0078d4; color: #fff; border-color: #00509d; }
    .a11y-opt.a11y-reset { grid-column: 1 / -1; background: #d32f2f; color: #fff; margin-top: 6px; font-weight: 700; }
    .a11y-opt.a11y-reset:hover { background: #b71c1c; }
    .a11y-foot {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid #eee;
      font-size: .78rem;
    }
    .a11y-foot a { color: #0078d4; text-decoration: underline; }
    .a11y-foot a:hover { color: #00509d; }

    /* Active accessibility modes (toggled on <html>) */
    html.a11y-font-larger  { font-size: 112.5% !important; }
    html.a11y-font-smaller { font-size: 87.5% !important; }
    html.a11y-contrast-high { filter: contrast(1.45) brightness(1.06); }
    html.a11y-contrast-negative,
    html.a11y-contrast-negative body { background: #000 !important; color: #fff !important; }
    html.a11y-contrast-negative img,
    html.a11y-contrast-negative svg:not(.a11y-fab svg) { filter: invert(1) hue-rotate(180deg); }
    html.a11y-grayscale { filter: grayscale(1) !important; }
    html.a11y-readable, html.a11y-readable * { font-family: Arial, "Helvetica Neue", sans-serif !important; letter-spacing: 0 !important; }
    html.a11y-links a:not(.a11y-fab):not(.a11y-close):not(.a11y-opt) {
      background: #ffeb3b !important; color: #000 !important;
      text-decoration: underline !important; font-weight: 800 !important;
      box-shadow: 0 0 0 2px #000 !important;
    }
    html.a11y-cursor, html.a11y-cursor * {
      cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42'><polygon points='2,2 38,18 22,20 28,38 18,40 12,22 2,18' fill='black' stroke='white' stroke-width='2'/></svg>") 2 2, auto !important;
    }
    html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0s !important;
      scroll-behavior: auto !important;
    }

    /* === Live-chat widget (visitor side) =============================== */
    .lc-fab {
      position: fixed;
      bottom: 16px;             /* the only floating button (a11y moved to header/footer) */
      inset-inline-end: 16px;
      z-index: 199;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #25d366 0%, #1da851 100%);
      border: 2px solid #fff;
      color: #fff;
      cursor: pointer;
      box-shadow: 0 10px 28px rgba(37,211,102,.4), 0 4px 12px rgba(0,0,0,.25);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 200ms ease, box-shadow 200ms ease;
    }
    .lc-fab:hover { transform: scale(1.06); box-shadow: 0 14px 36px rgba(37,211,102,.5); }
    .lc-fab.lc-fab-pulse {
      animation: lc-fab-notify .6s ease;
    }
    @keyframes lc-fab-notify {
      0%   { transform: scale(1); }
      15%  { transform: scale(1.18) rotate(-8deg); }
      30%  { transform: scale(1.18) rotate(8deg); }
      45%  { transform: scale(1.12) rotate(-5deg); }
      60%  { transform: scale(1.12) rotate(5deg); }
      80%  { transform: scale(1.05) rotate(0); }
      100% { transform: scale(1); }
    }
    .lc-fab:focus-visible { outline: 3px solid var(--gold2); outline-offset: 3px; }
    .lc-fab svg { width: 26px; height: 26px; fill: #fff; }
    .lc-fab-badge {
      position: absolute;
      top: -3px;
      inset-inline-end: -3px;
      min-width: 22px;
      height: 22px;
      background: #d32f2f;
      color: #fff;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 800;
      font-family: "Rubik", sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 6px;
      border: 2px solid #fff;
    }
    @media (max-width: 600px) {
      .lc-fab { width: 50px; height: 50px; bottom: 130px; }
      .lc-fab svg { width: 22px; height: 22px; }
    }

    .lc-backdrop {
      position: fixed; inset: 0; z-index: 299;
      background: rgba(0,0,0,.55);
      opacity: 0; pointer-events: none;
      transition: opacity 240ms ease;
    }
    .lc-backdrop.open { opacity: 1; pointer-events: auto; }
    .lc-panel {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) scale(0.92);
      z-index: 300;
      width: min(420px, calc(100vw - 32px));
      height: min(600px, calc(100vh - 60px));
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 24px 80px rgba(0,0,0,.50);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: transform 260ms ease, opacity 260ms ease;
      font-family: "Rubik", system-ui, sans-serif;
    }
    .lc-panel.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
    @media (max-width: 600px) {
      .lc-panel { width: calc(100vw - 16px); height: calc(100vh - 40px); border-radius: 14px; }
    }
    .lc-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: linear-gradient(135deg, #1f2c34 0%, #0d1929 100%);
      color: #fff;
    }
    .lc-panel-head h2 { font-size: 1rem; font-weight: 700; margin: 0; }
    .lc-panel-status { display: block; font-size: 0.74rem; color: rgba(255,255,255,.6); margin-top: 2px; }
    .lc-close {
      background: transparent;
      border: 0;
      color: rgba(255,255,255,.7);
      font-size: 1.15rem;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
    }
    .lc-close:hover { background: rgba(255,255,255,.1); color: #fff; }

    .lc-prechat {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      overflow-y: auto;
    }
    .lc-pre-intro { color: #555; font-size: 0.88rem; margin: 0 0 4px; line-height: 1.5; }
    .lc-prechat input,
    .lc-prechat textarea,
    .lc-reply input {
      font-family: inherit;
      font-size: 0.92rem;
      padding: 10px 12px;
      border: 1.5px solid #d4dbe5;
      border-radius: 10px;
      color: #0d1929;
      background: #f7f9fc;
      direction: rtl;
      transition: border-color 160ms;
    }
    .lc-prechat input:focus,
    .lc-prechat textarea:focus,
    .lc-reply input:focus { outline: none; border-color: #25d366; background: #fff; }
    .lc-prechat textarea { resize: vertical; min-height: 80px; }
    .lc-submit {
      padding: 11px;
      background: linear-gradient(135deg, #25d366 0%, #1da851 100%);
      color: #fff;
      border: 0;
      border-radius: 10px;
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      transition: transform 160ms;
    }
    .lc-submit:hover { transform: translateY(-1px); }
    .lc-submit:disabled { opacity: 0.6; cursor: wait; }

    .lc-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .lc-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #ece5dd;
    }
    .lc-msg {
      max-width: 85%;
      padding: 7px 11px 4px;
      border-radius: 8px;
      font-size: 0.88rem;
      line-height: 1.45;
      word-break: break-word;
      direction: rtl;
      text-align: right;
    }
    .lc-msg .lc-mt { font-size: 0.62rem; color: rgba(0,0,0,.4); margin-top: 2px; text-align: end; direction: ltr; }
    .lc-msg.visitor { align-self: flex-end; background: #d9fdd3; color: #111; border-top-left-radius: 2px; }
    .lc-msg.admin { align-self: flex-start; background: #fff; color: #111; border-top-right-radius: 2px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
    .lc-msg.system { align-self: center; background: rgba(0,0,0,.05); color: #555; font-size: 0.78rem; padding: 4px 10px; border-radius: 6px; }

    .lc-reply { display: flex; gap: 6px; padding: 10px 12px; background: #f7f9fc; border-top: 1px solid #e4e9f0; }
    .lc-reply input { flex: 1; }
    .lc-reply-btn {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: #25d366;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lc-reply-btn:hover { background: #1da851; }
    .lc-reply-btn svg { width: 20px; height: 20px; transform: rotate(180deg); /* point left in RTL */ }

    @media (prefers-reduced-motion: reduce) {
      .lc-panel { transition: none; }
      .lc-fab { transition: none; }
    }

    /* === Hero scroll bar — wide, full-bleed transition into features === */
    .hero-scroll-bar {
      display: flex;
      align-items: center;
      gap: clamp(14px, 2.5vw, 28px);
      margin: clamp(80px, 12vw, 180px) 0 0;
      padding: clamp(18px, 2vw, 26px) clamp(14px, 3vw, 36px);
      width: 100%;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(201,168,76,.06) 28%,
        rgba(201,168,76,.12) 50%,
        rgba(201,168,76,.06) 72%,
        transparent 100%);
      border: none;
      text-decoration: none;
      color: rgba(255,255,255,.62);
      font-size: clamp(0.82rem, 1.1vw, 1rem);
      font-weight: 600;
      letter-spacing: 0.14em;
      transition: all 280ms ease;
      opacity: 0;
      animation: hsb-fade-in 600ms 800ms ease forwards;
    }
    .hero-scroll-bar:hover {
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(201,168,76,.14) 28%,
        rgba(201,168,76,.28) 50%,
        rgba(201,168,76,.14) 72%,
        transparent 100%);
      color: var(--gold2);
    }
    .hero-scroll-bar:hover .hsb-arrow { transform: translateY(3px); }
    .hsb-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201,168,76,.45), transparent);
      min-width: 0;
    }
    .hsb-content {
      display: inline-flex;
      align-items: center;
      gap: clamp(10px, 1.5vw, 16px);
      text-transform: uppercase;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .hsb-arrow {
      width: clamp(20px, 2vw, 26px);
      height: clamp(20px, 2vw, 26px);
      stroke: var(--gold2);
      fill: none;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      animation: hsb-bounce 2.2s ease-in-out infinite;
      transition: transform 280ms ease;
    }
    @keyframes hsb-bounce {
      0%, 100% { transform: translateY(0); }
      40% { transform: translateY(6px); }
      60% { transform: translateY(2px); }
    }
    @keyframes hsb-fade-in { to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .hero-scroll-bar { animation: none; opacity: 1; }
      .hsb-arrow { animation: none; }
    }
    @media (max-width: 600px) {
      .hsb-line { display: none; }
      .hero-scroll-bar { justify-content: center; gap: 12px; padding: 16px 12px; }
    }

    /* === Desktop polish 1200+ === */
    @media (min-width: 1200px) {
      .hero { padding: 100px 0 0; }
      .hero-inner { gap: 72px; align-items: center; }
      .anim-logo-banner { height: 230px; margin-block: 18px 12px; }
      .iphone17-stage { max-width: 440px; }
      .hero h1 { font-size: clamp(3.6rem, 4.4vw, 4.6rem); }
      .hero-sub { font-size: 1.15rem; max-width: 44ch; }
      .hero-scroll-bar { margin-top: clamp(100px, 12vw, 200px); }
    }
    /* === Ultra-wide 1400+ === */
    @media (min-width: 1400px) {
      .hero-inner { grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.2fr); }
      .iphone17-stage { max-width: 460px; }
    }

/* ── cross-links added in stage B (FAQ / pricing / legal subpages) ── */
.faq-more { text-align: center; margin: 22px 0 0; }
.faq-more a, .legal-more, .plan-note a {
 color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
 }
.legal-more { display: inline-block; margin-top: 10px; }

/* ══════ Stage C (12/09/2026): single FAB, a11y triggers, mobile CTA bar, plans ══════ */
/* a11y trigger buttons (hero top line, sticky bar, drawer) — the panel is unchanged */
.hero-topline { display: flex; align-items: center; gap: 10px; align-self: center; }
.a11y-trigger {
 width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22);
 background: rgba(0,120,212,.85); color: #fff; cursor: pointer; display: inline-flex;
 align-items: center; justify-content: center; padding: 0; transition: transform 160ms, background 160ms;
 }
.a11y-trigger svg { width: 20px; height: 20px; fill: #fff; }
.a11y-trigger:hover { transform: scale(1.06); background: #0078d4; }
.a11y-trigger:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
.stb-a11y { width: 34px; height: 34px; margin-inline-start: auto; }
.stb-a11y svg { width: 18px; height: 18px; }
/* the original #a11yFab now lives in the footer bar as an inline pill */
.a11y-fab.a11y-fab--inline {
 position: static; width: auto; height: 36px; border-radius: 999px; padding: 0 14px 0 10px;
 gap: 8px; font-family: "Rubik", system-ui, sans-serif; font-size: .82rem; font-weight: 600;
 box-shadow: none; border-color: rgba(255,255,255,.35);
 }
.a11y-fab.a11y-fab--inline svg { width: 18px; height: 18px; }
.a11y-panel { bottom: 84px; }
/* plans */
.plan-per { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--gold2);
 background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: 999px;
 padding: 2px 10px; margin: 0 0 8px; }
.plans-extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.plans-extras .plan-note { margin: 0; }
.plans-extras .plan-note:last-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .plans-extras { grid-template-columns: 1fr; } }
/* sticky mobile CTA bar */
.mcta { display: none; }
@media (max-width: 600px) {
 .mcta {
 display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 150; gap: 8px;
 padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
 background: rgba(13,25,41,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
 border-top: 1px solid rgba(201,168,76,.28); box-shadow: 0 -8px 24px rgba(0,0,0,.25);
 }
 .mcta a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px;
 border-radius: 12px; color: #fff; font-weight: 800; font-size: .95rem; }
 .mcta svg { width: 20px; height: 20px; }
 .mcta-wa { flex: 1; background: linear-gradient(135deg,#25d366 0%,#1da851 100%); }
 .mcta-tg { flex: 0 0 52px; background: linear-gradient(135deg,#2AABEE 0%,#1a8fc7 100%); }
 body { padding-bottom: 66px; }
 .lc-fab { bottom: 78px; }
 .a11y-panel { bottom: 146px; max-height: calc(100vh - 170px); }
 .hero-btns { flex-direction: row !important; justify-content: center; }
 .hero-btns .btn-tg, .hero-btns .btn-wa { flex: 1 1 0; justify-content: center; padding: 12px 14px; font-size: .9rem; }
 }