/* ============================================================
   PRIME LEDGER — Website styles (site.css)
   RTL-first marketing site + client portal. Built on tokens.
   ============================================================ */
@import url('colors_and_type.css');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-sans);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;direction:rtl;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--brand-200)}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 28px}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(246,243,236,0.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out);
}
.site-header.scrolled{background:rgba(246,243,236,0.94);box-shadow:0 8px 24px -16px rgba(28,26,20,.35);border-bottom-color:transparent}
.header-inner{display:flex;align-items:center;gap:24px;height:74px;transition:height .3s var(--ease-out)}
.site-header.scrolled .header-inner{height:64px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;transition:opacity var(--dur)}
.brand:hover{opacity:.82}
.brand .logo-mark{width:48px;height:42px;transition:width .3s var(--ease-out),height .3s var(--ease-out)}
.site-header.scrolled .brand .logo-mark{width:43px;height:38px}
.brand b{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.01em;white-space:nowrap;background:var(--grad-wordmark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand-wordmark)}
.brand small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--ink-4);text-transform:uppercase;margin-top:1px}
.nav{display:flex;align-items:center;gap:1px;margin-inline-start:auto}
.nav a{
  font-size:14px;font-weight:600;color:var(--ink-2);padding:8px 10px;border-radius:var(--r-sm);
  transition:all var(--dur) var(--ease-out);white-space:nowrap;position:relative;
}
.nav a:hover{color:var(--ink);background:var(--n-100)}
.nav a.active{color:var(--brand-600)}
.nav a.active::after{content:"";position:absolute;inset-inline:10px;bottom:2px;height:2px;background:var(--brand-500);border-radius:2px}
.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.menu-more{position:relative}
.menu-more>button{display:flex;align-items:center;gap:5px;font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--ink-2);background:none;border:none;cursor:pointer;padding:9px 13px;border-radius:var(--r-sm)}
.menu-more>button:hover{background:var(--n-100);color:var(--ink)}
.menu-more svg{width:15px;height:15px}
.dropdown{
  position:absolute;inset-inline-start:0;top:calc(100% + 6px);min-width:200px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all var(--dur) var(--ease-out);
}
.menu-more.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);font-size:15px;font-weight:600;color:var(--ink-2)}
.dropdown a:hover{background:var(--brand-50);color:var(--brand-600)}
.dropdown a svg{width:17px;height:17px;color:var(--ink-3)}
.burger{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px}
.burger svg{width:26px;height:26px}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--font-sans);font-weight:700;font-size:15px;border:none;border-radius:var(--r-md);
  padding:11px 20px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;
  transition:all var(--dur) var(--ease-out);text-decoration:none}
.btn svg{width:17px;height:17px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand-500);color:#fff;box-shadow:var(--shadow-brand);position:relative;overflow:hidden}
.btn-primary:hover{background:var(--brand-600)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);transition:inset-inline-start .6s var(--ease-out)}
.btn-primary:hover::after{inset-inline-start:130%}
.btn-accent{background:var(--grad-gold);color:#2A1E06;font-weight:800;box-shadow:var(--shadow-accent)}
.btn-accent:hover{filter:brightness(1.04) saturate(1.05)}
.btn-secondary{background:var(--surface);color:var(--ink);border:1.5px solid var(--border-strong)}
.btn-secondary:hover{border-color:var(--ink-3);background:var(--n-50)}
.btn-ghost{background:transparent;color:var(--brand-600);padding-inline:12px}
.btn-ghost:hover{background:var(--brand-50)}
.btn-lg{font-size:17px;padding:14px 26px}
.btn-sm{font-size:13px;padding:8px 14px}
.btn-block{width:100%;justify-content:center}

/* ---------- ELEMENTS ---------- */
.eyebrow{font-family:var(--font-sans);font-size:14px;font-weight:700;letter-spacing:.04em;
  color:var(--brand-600);unicode-bidi:plaintext;display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.55;flex-shrink:0}
.sec-head.center .eyebrow,.center .eyebrow{justify-content:center}
.eyebrow.accent{color:var(--accent-600)}
.h-display{font-family:var(--font-display);font-weight:800;font-size:var(--t-display);line-height:1.06;letter-spacing:-.02em}
.h1{font-family:var(--font-display);font-weight:700;font-size:var(--t-h1);line-height:1.12;letter-spacing:-.015em}
.h2{font-family:var(--font-display);font-weight:700;font-size:var(--t-h2);line-height:1.16}
.h3{font-weight:700;font-size:var(--t-h3);line-height:1.3}
.lead{font-size:var(--t-body-lg);line-height:1.6;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.section{padding:96px 0}
.section-sm{padding:64px 0}
.center{text-align:center}
.tag{font-family:var(--font-mono);font-size:12px;font-weight:500;padding:4px 10px;border-radius:var(--r-sm);
  background:var(--n-100);color:var(--ink-2);border:1px solid var(--border);unicode-bidi:plaintext}
.badge{font-size:13px;font-weight:700;padding:5px 12px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px}
.badge-dot{width:7px;height:7px;border-radius:50%}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.card-hover{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

.icon-chip{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand-600);flex-shrink:0}
.icon-chip svg{width:24px;height:24px}
.icon-chip.accent{background:var(--accent-50);color:var(--accent-600)}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink);color:#fff;padding:72px 0 36px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-grid h4{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 16px}
.footer-grid a{display:block;color:rgba(255,255,255,.78);font-size:15px;padding:6px 0;transition:color var(--dur)}
.footer-grid a:hover{color:#fff}
.footer-brand b{font-family:var(--font-display);font-weight:800;font-size:22px}
.footer-brand p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.6;max-width:280px;margin:14px 0 0}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;flex-wrap:wrap;gap:14px}
.footer-bottom span{color:rgba(255,255,255,.45);font-size:13px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;border-radius:var(--r-sm);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;padding:0}
.footer-social a:hover{background:var(--brand-500)}
.footer-social svg{width:18px;height:18px}

/* ---------- NEWSLETTER STRIP ---------- */
.newsletter{background:var(--grad-ink);border-radius:var(--r-2xl);padding:52px 56px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden}
.newsletter::after{content:"";position:absolute;inset-block:0;inset-inline-start:-10%;width:50%;background:radial-gradient(circle at center,rgba(0,84,168,.4),transparent 70%);pointer-events:none}
.news-form{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.news-form input{font-family:var(--font-sans);font-size:15px;padding:13px 18px;border-radius:var(--r-md);border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;min-width:240px}
.news-form input::placeholder{color:rgba(255,255,255,.55)}
.news-form input:focus{outline:none;border-color:var(--brand-400);background:rgba(255,255,255,.14)}

/* ---------- MOBILE ---------- */
.mobile-menu{display:none}
@media(max-width:1100px){
  .nav,.menu-more,.header-cta .btn-ghost{display:none}
  .burger{display:flex}
  .header-inner{gap:14px;height:64px}
  .section{padding:64px 0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .newsletter{padding:36px 28px}
  .mobile-menu{position:fixed;inset:0;top:64px;background:var(--paper);z-index:55;padding:20px 28px;display:none;flex-direction:column;gap:4px;overflow-y:auto}
  .mobile-menu.open{display:flex}
  .mobile-menu a{font-size:18px;font-weight:600;padding:14px 8px;border-bottom:1px solid var(--border);color:var(--ink)}
}
@media(max-width:560px){
  .wrap,.wrap-narrow{padding:0 18px}
  .footer-grid{grid-template-columns:1fr}
}

/* ---------- REVEAL ANIMATION (transform-only: content always visible at rest) ---------- */
@keyframes rise{from{transform:translateY(16px)}to{transform:translateY(0)}}
.reveal{animation:rise .7s var(--ease-out) both}
.reveal.d1{animation-delay:.07s}.reveal.d2{animation-delay:.14s}.reveal.d3{animation-delay:.21s}
.reveal.d4{animation-delay:.28s}.reveal.d5{animation-delay:.35s}
@media(prefers-reduced-motion:reduce){.reveal{animation:none}}

/* ---------- SCROLL REVEAL (JS-gated; content always visible without JS) ---------- */
.has-js .reveal-up{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.has-js .reveal-up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.has-js .reveal-up{opacity:1;transform:none;transition:none}}

/* ---------- GENTLE FLOAT (hero badges) ---------- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.float-badge{will-change:transform}
.float-badge.float-1{animation:floatY 4.2s var(--ease-in-out) infinite}
.float-badge.float-2{animation:floatY 5s var(--ease-in-out) infinite .6s}
@media(prefers-reduced-motion:reduce){.float-badge{animation:none}}

/* ---------- COUNT-UP numerals stay tabular while animating ---------- */
.counting{font-variant-numeric:tabular-nums}

/* ============================================================
   MAX-WOW MOTION LAYER
   ============================================================ */
/* top scroll-progress bar */
.scroll-progress{
  position:fixed;top:0;inset-inline:0;height:3px;z-index:200;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:right center;
  will-change:transform;box-shadow:0 1px 6px rgba(0,84,168,.45);
}
[dir="ltr"] .scroll-progress{transform-origin:left center}

/* directional reveal variants (JS-gated; visible without JS) */
.has-js .reveal-zoom{opacity:0;transform:scale(.92);transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
.has-js .reveal-zoom.in{opacity:1;transform:none}
.has-js .reveal-scale{opacity:0;transform:scale(.95) translateY(20px);transition:opacity .8s var(--ease-out),transform .9s var(--ease-spring)}
.has-js .reveal-scale.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .has-js .reveal-zoom,.has-js .reveal-scale{opacity:1;transform:none;transition:none}
  .scroll-progress{display:none}
}

/* deepen the base reveal-up travel for a more pronounced ride */
.has-js .reveal-up{transform:translateY(34px)}

/* parallax elements get GPU hint */
.hero-blob,.page-hero .blob,.mock{will-change:transform}

/* animated sheen on the brand gradient wordmark */
@keyframes wordmarkShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.brand b{background-size:160% 100%;animation:wordmarkShift 9s var(--ease-in-out) infinite}
@media(prefers-reduced-motion:reduce){.brand b{animation:none}}

/* card hover gets a touch more lift + faster snap-back */
.card-hover:hover{box-shadow:var(--shadow-lg)}

/* icon chips gently scale when their card is revealed */
.has-js .reveal-up .icon-chip,.has-js .reveal-zoom .icon-chip{transition:transform .5s var(--ease-spring) .15s}
.has-js .reveal-up.in .icon-chip{transform:scale(1)}

/* ---- LUXE LAYER ---- */
/* soft-focus on every reveal — content resolves into clarity */
.has-js .reveal-up,.has-js .reveal-zoom,.has-js .reveal-scale{filter:blur(6px)}
.has-js .reveal-up.in,.has-js .reveal-zoom.in,.has-js .reveal-scale.in{filter:blur(0)}

/* 3D tilt on interactive cards (driven by JS inline transform) */
.card-hover{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);transform-style:preserve-3d}
.card-hover.tilting{transition:transform .08s linear,box-shadow .35s var(--ease-out)}

/* gold sheen sweep on accent buttons */
.btn-accent{position:relative;overflow:hidden}
.btn-accent::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:inset-inline-start .7s var(--ease-out)}
.btn-accent:hover::after{inset-inline-start:130%}

/* hero word-by-word rise — TRANSFORM-ONLY so words are always visible even if the timeline is paused */
.has-js .hw{display:inline-block;transform:translateY(.55em);transition:transform .7s var(--ease-out);transition-delay:calc(var(--i,0)*.06s)}
.has-js .hw.in{transform:none}

/* animated aurora drift on dark sections */
.svc-visual.dark,.sim-band,.section.ink,.grad-ink-bg{position:relative;overflow:hidden}
.svc-visual.dark::before,.sim-band::before{content:"";position:absolute;inset:-40%;background:
  radial-gradient(60% 50% at 20% 20%, rgba(42,159,224,.18), transparent 60%),
  radial-gradient(50% 45% at 85% 75%, rgba(217,181,89,.14), transparent 60%);
  animation:aurora 14s var(--ease-in-out) infinite alternate;pointer-events:none}
@keyframes aurora{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.12)}}

/* gentle float loop for hero floating badges */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.float-badge{animation:floatY 5.5s var(--ease-in-out) infinite}
.float-badge.float-2{animation-duration:6.5s;animation-delay:.6s}

@media(prefers-reduced-motion:reduce){
  .has-js .reveal-up,.has-js .reveal-zoom,.has-js .reveal-scale{filter:none}
  .has-js .hw{transform:none;transition:none}
  .svc-visual.dark::before,.sim-band::before,.float-badge{animation:none}
  .card-hover{transform:none!important}
}