/* ==========================================================================
   u4-site.css — Up-4ever public design system (Claude Design "Up4ever Landing"
   language). Light #FBF9FF canvas, deep-purple #271646 ink, purple→magenta→
   yellow brand gradient, Changa (display) + Poppins (body), Phosphor icons.
   Loaded on public pages flagged u4_layout (main.html). Self-contained — does
   NOT depend on Bootstrap/style.min.css. All classes are u4- prefixed to avoid
   collisions.
   ========================================================================== */
:root{
  --u4-ink:#271646; --u4-ink-2:#3D3458; --u4-muted:#6A6188; --u4-muted-2:#8B82A3; --u4-faint:#A49CBC;
  --u4-bg:#FBF9FF; --u4-soft:#F4EDFF; --u4-line:rgba(54,37,99,.08); --u4-line-2:rgba(54,37,99,.14);
  --u4-purple:#7A3FE0; --u4-purple-2:#6139B7; --u4-magenta:#C257E5; --u4-orange:#EA8E3B; --u4-gold:#FFCB3E;
  --u4-green:#2E9E59; --u4-danger:#D7344B;
  --u4-grad:linear-gradient(135deg,#7A3FE0,#C257E5);
  --u4-grad-3:linear-gradient(135deg,#6139B7,#C257E5 55%,#EA8E3B);
  --u4-grad-text:linear-gradient(120deg,#7A3FE0 5%,#C257E5 50%,#EA8E3B 95%);
}
body.u4site{ margin:0; font-family:'Poppins',sans-serif; background:var(--u4-bg); color:var(--u4-ink); -webkit-font-smoothing:antialiased; }
body.u4site *{ box-sizing:border-box; }
body.u4site ::selection{ background:#C257E5; color:#fff; }
.u4-x h1,.u4-x h2,.u4-x h3,.u4-x h4,.u4-display{ font-family:'Changa',sans-serif; }
.u4-x a{ text-decoration:none; }
.u4-wrap{ max-width:1280px; margin:0 auto; padding-inline:40px; }
.u4-grad-text{ background:var(--u4-grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes u4-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes u4-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ---- buttons ---- */
.u4-btn{ display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  padding:13px 26px; border-radius:13px; border:none; transition:transform .2s, border-color .2s, filter .2s; line-height:1; }
.u4-btn--primary{ color:#fff; background:var(--u4-grad); box-shadow:0 16px 34px -14px rgba(122,63,224,.75); }
.u4-btn--primary:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.04); }
.u4-btn--ghost{ color:var(--u4-ink); background:#fff; border:1px solid var(--u4-line-2); box-shadow:0 6px 18px -12px rgba(54,37,99,.18); }
.u4-btn--ghost:hover{ border-color:var(--u4-magenta); }
.u4-btn--white{ color:var(--u4-purple-2); background:#fff; }
.u4-btn--white:hover{ color:var(--u4-purple); transform:translateY(-2px); }
.u4-btn--lg{ font-size:16px; padding:16px 30px; border-radius:14px; }
.u4-btn--block{ width:100%; justify-content:center; }

/* ---- nav (header.html) ---- */
.u4-nav{ position:sticky; top:0; z-index:50; background:rgba(251,249,255,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(54,37,99,.07); }
.u4-nav__row{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 40px; }
.u4-nav__logo img{ height:34px; width:auto; display:block; }
.u4-nav__links{ display:flex; align-items:center; gap:4px; padding:6px; border-radius:999px; background:#F1EBFC; border:1px solid rgba(54,37,99,.05); }
.u4-nav__links a{ color:#5A5175; font-size:14.5px; font-weight:500; padding:9px 18px; border-radius:999px; transition:.18s; white-space:nowrap; }
.u4-nav__links a:hover, .u4-nav__links a.active{ background:#fff; color:var(--u4-ink); }
.u4-nav__right{ display:flex; align-items:center; gap:14px; }
.u4-nav__lang{ display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; cursor:pointer; color:#5A5175; }
.u4-nav__lang:hover{ background:#F1EBFC; }
.u4-nav__login{ color:var(--u4-ink); font-size:14.5px; font-weight:600; padding:10px 6px; }
.u4-nav__login:hover{ color:var(--u4-purple-2); }
.u4-nav__burger{ display:none; border:none; background:none; cursor:pointer; color:var(--u4-ink); font-size:26px; line-height:1; }
.u4-nav__mobile{ display:none; }

/* ---- page header (inner pages breadcrumb/hero) ---- */
.u4-pagehead{ position:relative; overflow:hidden; padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); text-align:center;
  background:
    radial-gradient(46% 60% at 88% -10%, rgba(194,87,229,.18), transparent 62%),
    radial-gradient(40% 55% at 4% 120%, rgba(255,203,62,.16), transparent 60%),
    radial-gradient(130% 95% at 50% -25%, #F0E6FF 0%, var(--u4-bg) 58%); }
.u4-pagehead::after{ content:""; position:absolute; right:-90px; top:-70px; width:360px; height:360px; pointer-events:none;
  border-radius:50%; background:conic-gradient(from 200deg,#7A3FE0,#C257E5,#FFCB3E,#7A3FE0); opacity:.10; filter:blur(30px); }
.u4-pagehead > *{ position:relative; z-index:1; }
.u4-pagehead__eyebrow{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--u4-magenta); }
.u4-pagehead h1{ font-family:'Changa',sans-serif; font-weight:800; font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.08; letter-spacing:-.02em; color:var(--u4-ink); margin:12px 0 0; }
.u4-pagehead p{ color:var(--u4-muted); font-size:18px; line-height:1.6; max-width:620px; margin:16px auto 0; }

/* ---- sections / typography ---- */
.u4-sec{ padding:clamp(3.5rem,7vw,6rem) 0; }
.u4-sec--soft{ background:linear-gradient(180deg,var(--u4-soft),var(--u4-bg)); }
.u4-sec--white{ background:#fff; }
.u4-eyebrow{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--u4-magenta); }
.u4-h2{ font-family:'Changa',sans-serif; font-weight:800; font-size:clamp(1.8rem,3.6vw,2.75rem); line-height:1.1; letter-spacing:-.02em; color:var(--u4-ink); margin-top:14px; }
.u4-lead{ color:var(--u4-muted); font-size:17px; line-height:1.6; max-width:620px; }
.u4-center{ text-align:center; } .u4-center .u4-lead{ margin-inline:auto; }

/* ---- cards ---- */
.u4-grid{ display:grid; gap:24px; } .u4-grid--2{ grid-template-columns:repeat(2,1fr); } .u4-grid--3{ grid-template-columns:repeat(3,1fr); } .u4-grid--4{ grid-template-columns:repeat(4,1fr); }
.u4-card{ background:#fff; border:1px solid var(--u4-line); border-radius:22px; padding:32px; box-shadow:0 14px 36px -22px rgba(54,37,99,.25); }
.u4-card--soft{ background:var(--u4-bg); box-shadow:none; }
.u4-card--hover{ transition:transform .25s, box-shadow .25s, border-color .25s; }
.u4-card--hover:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(54,37,99,.45); border-color:rgba(194,87,229,.35); }
.u4-ic{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; }
.u4-ic--grad{ background:var(--u4-grad); color:#fff; box-shadow:0 12px 24px -12px rgba(138,73,253,.55); }
.u4-ic--soft{ background:rgba(138,73,253,.12); color:var(--u4-purple); }
.u4-card h3{ font-family:'Changa',sans-serif; font-weight:700; font-size:20px; color:var(--u4-ink); margin:16px 0 10px; }
.u4-card p{ font-size:14.5px; line-height:1.62; color:var(--u4-muted); margin:0; }

/* ---- forms ---- */
.u4-field{ margin-bottom:16px; }
.u4-field label{ display:block; font-size:13px; font-weight:600; color:var(--u4-ink-2); margin-bottom:7px; }
.u4-input, .u4-field input, .u4-field select, .u4-field textarea{ width:100%; font-family:inherit; font-size:15px; color:var(--u4-ink);
  padding:13px 15px; border-radius:12px; background:#fff; border:1px solid var(--u4-line-2); outline:none; transition:border-color .18s, box-shadow .18s; }
.u4-field input:focus, .u4-field select:focus, .u4-field textarea:focus, .u4-input:focus{ border-color:var(--u4-magenta); box-shadow:0 0 0 4px rgba(194,87,229,.14); }
.u4-alert{ font-size:14px; padding:12px 15px; border-radius:12px; margin-bottom:18px; }
.u4-alert--err{ background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.3); color:var(--u4-danger); }
.u4-alert--ok{ background:rgba(63,184,106,.1); border:1px solid rgba(63,184,106,.25); color:var(--u4-green); }

/* ---- panel / box ---- */
.u4-panel{ background:#fff; border:1px solid var(--u4-line); border-radius:22px; box-shadow:0 30px 70px -40px rgba(54,37,99,.4); padding:clamp(1.4rem,3vw,2.2rem); }
.u4-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:700; }
.u4-chip--soft{ background:rgba(138,73,253,.1); color:var(--u4-purple); }
.u4-chip--ok{ background:rgba(63,184,106,.12); color:var(--u4-green); }

/* ---- table ---- */
.u4-table{ width:100%; border-collapse:collapse; }
.u4-table th{ text-align:left; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--u4-faint); padding:12px 14px; border-bottom:1px solid var(--u4-line); }
.u4-table td{ font-size:14.5px; color:var(--u4-ink-2); padding:14px; border-bottom:1px solid var(--u4-line); }
.u4-table tr:hover td{ background:var(--u4-soft); }

/* ---- footer (footer.html) ---- */
.u4-foot{ padding:72px 40px 40px; background:#1E1140; color:#fff; }
.u4-foot__grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; margin-bottom:52px; }
.u4-foot__logo img{ height:32px; width:auto; margin-bottom:18px; }
.u4-foot p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.5); max-width:280px; }
.u4-foot h4{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.u4-foot__col a{ display:block; font-size:14.5px; color:rgba(255,255,255,.55); margin-bottom:12px; transition:color .2s; }
.u4-foot__col a:hover{ color:#fff; }
.u4-foot__soc{ display:flex; gap:11px; margin-top:18px; }
.u4-foot__soc a{ width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:.2s; }
.u4-foot__soc a:hover{ background:rgba(255,255,255,.13); }
.u4-foot__bottom{ max-width:1280px; margin:0 auto; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13.5px; color:rgba(255,255,255,.4); }

/* ---- CTA band ---- */
.u4-ctaband{ position:relative; overflow:hidden; border-radius:30px; color:#fff; text-align:center; padding:clamp(2.4rem,5vw,4rem) 1.5rem; background:var(--u4-grad-3); }
.u4-ctaband h2{ font-family:'Changa',sans-serif; font-weight:800; color:#fff; font-size:clamp(1.7rem,3.4vw,2.5rem); }

/* ---- prose (static legal/faq/doc pages) ---- */
.u4-prose{ max-width:820px; margin:0 auto; color:var(--u4-ink-2); font-size:16px; line-height:1.75; }
.u4-prose h1,.u4-prose h2,.u4-prose h3,.u4-prose h4{ font-family:'Changa',sans-serif; color:var(--u4-ink); margin:1.5em 0 .5em; line-height:1.25; }
.u4-prose h2{ font-size:1.5rem; } .u4-prose h3{ font-size:1.2rem; }
.u4-prose p{ margin:0 0 1em; } .u4-prose ul,.u4-prose ol{ margin:0 0 1em 1.3em; } .u4-prose li{ margin:.35em 0; }
.u4-prose a{ color:var(--u4-purple); } .u4-prose a:hover{ text-decoration:underline; }
.u4-prose table{ width:100%; border-collapse:collapse; margin:1em 0; }
.u4-prose th,.u4-prose td{ border:1px solid var(--u4-line); padding:10px 12px; text-align:left; }
.u4-prose img{ max-width:100%; height:auto; }

/* ---- premium comparison table (comparison.html) ---- */
.u4-cmp-wrap{ overflow-x:auto; border:1px solid var(--u4-line); border-radius:20px; background:#fff; box-shadow:0 18px 40px -26px rgba(54,37,99,.3); }
.u4-cmp{ width:100%; border-collapse:collapse; min-width:680px; }
.u4-cmp th,.u4-cmp td{ padding:15px 18px; text-align:center; border-bottom:1px solid var(--u4-line); font-size:14.5px; color:var(--u4-ink-2); }
.u4-cmp thead th{ font-family:'Changa',sans-serif; font-weight:700; font-size:15px; color:var(--u4-ink); background:var(--u4-soft); }
.u4-cmp tbody tr:last-child td{ border-bottom:none; }
.u4-cmp tbody tr:hover td{ background:rgba(122,63,224,.03); }
.u4-cmp__feat{ text-align:left !important; font-weight:600; color:var(--u4-ink); }
.u4-cmp__prem{ background:rgba(194,87,229,.06); }
.u4-cmp thead .u4-cmp__prem{ color:var(--u4-magenta); background:rgba(194,87,229,.12); }
.u4-cmp .u4-yes{ color:var(--u4-green); } .u4-cmp .u4-no{ color:#C9C2DB; }
.u4-cmp__dash{ color:var(--u4-faint); }

/* ---- buy-premium packages (payment_buy_with.html, inside bootstrap modal) ---- */
.u4p-pkgsec{ padding:6px 0; }
.u4p-pkgtabs{ display:flex; flex-wrap:wrap; gap:8px; border:none; margin-bottom:18px; }
.u4p-pkgtab{ border:1px solid var(--u4-line-2); background:#fff; color:var(--u4-ink-2); font-weight:600; font-size:14px; padding:9px 18px; border-radius:999px; cursor:pointer; }
.u4p-pkgtab.active{ background:var(--u4-grad); color:#fff !important; border-color:transparent; }
.u4p-pkgs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; list-style:none; padding:0; }
.u4p-pkg{ border:1px solid var(--u4-line); border-radius:18px; padding:22px 18px; text-align:center; background:#fff; transition:border-color .2s, transform .2s; }
.u4p-pkg:hover{ border-color:var(--u4-magenta); transform:translateY(-3px); }
.u4p-pkg__term{ font-weight:700; color:var(--u4-ink); font-size:15px; }
.u4p-pkg__price{ font-family:'Changa',sans-serif; font-weight:800; font-size:1.9rem; color:var(--u4-ink); margin:6px 0; }
.u4p-pkg__note{ font-size:12.5px; color:var(--u4-muted); margin-bottom:14px; }
.u4p-paymodal{ border:none; border-radius:22px; overflow:hidden; }
.u4p-paymodal__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.u4p-paymodal__hint{ font-size:13px; color:var(--u4-muted); margin-top:14px; }

/* ---- responsive ---- */
@media (max-width:1024px){ .u4-grid--3,.u4-grid--4{ grid-template-columns:1fr 1fr; } .u4-grid--2{ grid-template-columns:1fr; } .u4-nav__links{ display:none; } .u4-nav__burger{ display:block; } }
@media (max-width:760px){ .u4-wrap{ padding-inline:20px; } .u4-grid--3,.u4-grid--4{ grid-template-columns:1fr; } .u4-foot__grid{ grid-template-columns:1fr 1fr; } .u4-nav__lang{ display:none; } }
@media (prefers-reduced-motion:reduce){ body.u4site *{ animation:none !important; transition:none !important; } }