/* Nexus Scalp Engine — Pro Product Site
   Zero dependencies · flagship UX · glass, mesh gradients, motion, RTL-safe
   Preserves all v3 class names; adds pro flagship classes: .hero-pro .chart-mock .bento .mode-cards .terminal-demo etc. */

/* ─── Design tokens ─── */
:root{
  --bg:#ffffff; --bg-2:#f8fafc; --bg-3:#f1f5f9; --card:#ffffff;
  --fg:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
  --border:#e2e8f0; --border-2:#cbd5e1;
  --accent:#2563eb; --accent-2:#7c3aed; --accent-3:#06b6d4;
  --accent-fg:#ffffff; --accent-soft:rgba(37,99,235,.08); --accent-glow:rgba(37,99,235,.18);
  --ok:#0e9f6e; --warn:#d97706; --danger:#e11d48; --exp:#7c3aed;
  --code-bg:#0f172a; --code-fg:#e2e8f0;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 12px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.06);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12),0 4px 12px rgba(15,23,42,.08);
  --shadow-glow:0 0 0 1px var(--accent-soft),0 8px 40px rgba(37,99,235,.14);
  --radius:12px; --radius-md:14px; --radius-lg:20px; --radius-xl:24px; --radius-pill:999px;
  --ease:cubic-bezier(.2,.7,.3,1); --dur-fast:.16s; --dur:.28s; --dur-slow:.55s;
  --header-h:60px; --sidebar-w:268px; --content-max:1180px;
  --font-sans:"Inter","Segoe UI",system-ui,-apple-system,"Vazirmatn","Noto Sans Arabic",sans-serif;
  --font-mono:"JetBrains Mono","Cascadia Code",Consolas,monospace;
}
:root[data-theme="dark"]{
  --bg:#060a14; --bg-2:#0b1220; --bg-3:#111a2c; --card:#0f172a;
  --fg:#e6ebf4; --muted:#94a8c8; --muted-2:#6b7a99;
  --border:#1e2a44; --border-2:#24324f;
  --accent:#4f7cff; --accent-2:#8b5cf6; --accent-3:#22d3ee;
  --accent-soft:rgba(79,124,255,.14); --accent-glow:rgba(79,124,255,.24);
  --code-bg:#020617; --code-fg:#e2e8f0;
  --shadow:0 1px 3px rgba(0,0,0,.45); --shadow-md:0 8px 20px rgba(0,0,0,.45); --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  --shadow-glow:0 0 0 1px rgba(79,124,255,.18),0 12px 48px rgba(79,124,255,.18);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#060a14; --bg-2:#0b1220; --bg-3:#111a2c; --card:#0f172a;
    --fg:#e6ebf4; --muted:#94a8c8; --muted-2:#6b7a99;
    --border:#1e2a44; --border-2:#24324f;
    --accent:#4f7cff; --accent-2:#8b5cf6; --accent-3:#22d3ee;
    --accent-soft:rgba(79,124,255,.14);
  }
}

/* ─── Base ─── */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--fg); line-height:1.68; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%}
.skip-link{position:absolute; inset-inline-start:-9999px; top:0; background:var(--accent); color:var(--accent-fg); padding:8px 14px; z-index:100; border-radius:0 0 8px 0}
.skip-link:focus{inset-inline-start:8px}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ─── Header — glass ─── */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 18px; height:var(--header-h);
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.2) blur(16px); -webkit-backdrop-filter:saturate(1.2) blur(16px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px}
.brand-link{font-weight:800; font-size:1.06rem; color:var(--fg); letter-spacing:-.02em; display:flex; align-items:center; gap:8px}
.brand-mark{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-size:15px; box-shadow:var(--shadow-md)}
.brand-dim{color:var(--muted); font-weight:600}
.brand-badge{font-size:.72rem; font-weight:700; color:var(--muted); border:1px solid var(--border); border-radius:var(--radius-pill); padding:2px 9px; background:var(--card)}
.header-actions{display:flex; align-items:center; gap:10px; position:relative}
.search{
  min-width:240px; padding:8px 12px 8px 36px; border:1px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--fg); font-size:.9rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:12px center;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.search:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.search::placeholder{color:var(--muted-2)}
.repo-link{font-size:.9rem; font-weight:600; white-space:nowrap; padding:6px 12px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--card); color:var(--fg); transition:all var(--dur-fast) var(--ease)}
.repo-link:hover{text-decoration:none; border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow)}
.lang-picker,.theme-picker{position:relative}
.lang-picker summary,.theme-picker summary{
  cursor:pointer; list-style:none; border:1px solid var(--border); border-radius:10px; padding:7px 11px; font-size:.88rem; background:var(--card); user-select:none; font-weight:600; display:flex; align-items:center; gap:6px;
}
.lang-picker summary::-webkit-details-marker,.theme-picker summary::-webkit-details-marker{display:none}
.lang-picker[open] summary,.theme-picker[open] summary{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.lang-menu{
  position:absolute; inset-inline-end:0; margin-top:8px; min-width:180px;
  background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; display:flex; flex-direction:column; gap:2px; z-index:40;
}
.lang-menu a{padding:8px 10px; border-radius:8px; font-size:.9rem; color:var(--fg)} .lang-menu a:hover{background:var(--bg-2); text-decoration:none}
.lang-current{padding:8px 10px; border-radius:8px; font-size:.9rem; color:var(--muted); background:var(--bg-2); font-weight:600}
.theme-menu button{display:block; width:100%; text-align:start; padding:8px 10px; background:transparent; border:0; border-radius:8px; font-size:.9rem; color:var(--fg); cursor:pointer; font-weight:500}
.theme-menu button:hover{background:var(--bg-2)}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:4px; width:40px; height:38px; padding:0 9px; cursor:pointer; background:var(--card); border:1px solid var(--border); border-radius:10px}
.nav-toggle span{display:block; height:2px; background:var(--fg); border-radius:2px; transition:all var(--dur-fast) var(--ease)}

/* ─── Layout ─── */
.layout{display:flex; min-height:calc(100vh - var(--header-h))}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); border-inline-end:1px solid var(--border);
  padding:18px 14px 40px; font-size:.92rem; position:sticky; top:var(--header-h); height:calc(100vh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg, var(--bg), var(--bg-2));
}
.sidebar::-webkit-scrollbar{width:6px} .sidebar::-webkit-scrollbar-thumb{background:var(--border); border-radius:99px}
.nav-home{display:block; font-weight:700; margin-bottom:10px; font-size:.95rem}
.nav-section{text-transform:uppercase; letter-spacing:.07em; font-size:.7rem; color:var(--muted); margin:18px 4px 6px; font-weight:700}
.nav-section a{color:var(--muted); font-weight:700} .nav-section a.active{color:var(--accent)}
.nav-list{list-style:none; margin:0; padding:0}
.nav-list li{margin:1px 0}
.nav-list a{display:flex; align-items:center; justify-content:space-between; padding:6px 10px; border-radius:8px; color:var(--fg); transition:all var(--dur-fast) var(--ease); font-weight:500; font-size:.9rem}
.nav-list a:hover{background:var(--card); text-decoration:none; transform:translateX(2px)} [dir="rtl"] .nav-list a:hover{transform:translateX(-2px)}
.nav-list a.active{background:var(--accent-soft); color:var(--accent); font-weight:700; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent)}
.fallback-tag{color:var(--muted); font-size:.66rem; border:1px solid var(--border); border-radius:4px; padding:0 4px; margin-inline-start:6px; font-weight:700}

.content{flex:1 1 auto; min-width:0; max-width:var(--content-max); padding:28px 36px 80px; animation:page-in .4s var(--ease) both}
@keyframes page-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.translation-note{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:.9rem; color:var(--muted); margin-bottom:18px; display:flex; align-items:center; gap:8px}
.breadcrumbs{font-size:.84rem; color:var(--muted); margin-bottom:16px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.breadcrumbs a{color:var(--muted)} .breadcrumbs a:hover{color:var(--accent)}
.crumb-current{color:var(--fg); font-weight:700}
.reading-progress{position:fixed; top:0; inset-inline-start:0; height:3px; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3)); z-index:60; transition:width .08s linear}

/* ─── Typography ─── */
h1,h2,h3,h4{line-height:1.22; margin:1.5em 0 .6em; letter-spacing:-.02em; font-weight:800}
h1{font-size:2.15rem; margin-top:.2em} h2{font-size:1.42rem; border-bottom:1px solid var(--border); padding-bottom:6px} h3{font-size:1.14rem; font-weight:700} p{margin:.75em 0}
code{font-family:var(--font-mono); font-size:.88em; background:var(--bg-3); border:1px solid var(--border); border-radius:6px; padding:1px 6px; unicode-bidi:embed; direction:ltr}
pre{background:var(--code-bg); color:var(--code-fg); padding:16px 18px; border-radius:var(--radius); overflow-x:auto; direction:ltr; text-align:left; border:1px solid rgba(255,255,255,.08); position:relative; line-height:1.55}
pre code{background:transparent; border:none; color:inherit; padding:0; font-size:.86rem}
.table-wrap{overflow-x:auto; margin:1.1em 0; border:1px solid var(--border); border-radius:12px; background:var(--card); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; font-size:.92rem} th,td{padding:10px 14px; text-align:start; vertical-align:top} th{background:var(--bg-2); font-weight:700; color:var(--muted); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--border)} td{border-top:1px solid var(--border)} tbody tr{transition:background var(--dur-fast) var(--ease)} tbody tr:hover td{background:var(--accent-soft)}
blockquote{margin:1.1em 0; padding:8px 16px; border-inline-start:3px solid var(--accent); background:var(--card); border-radius:0 10px 10px 0; color:var(--muted); border-top:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border)}
[dir="rtl"] blockquote{border-radius:10px 0 0 10px}
.callout{margin:1.2em 0; border:1px solid var(--border); border-inline-start:4px solid var(--accent); background:var(--card); border-radius:10px; padding:14px 18px; box-shadow:var(--shadow)}
.callout-title{font-weight:800; font-size:.76rem; letter-spacing:.08em; margin-bottom:6px}
.callout-warning{border-inline-start-color:var(--warn)} .callout-warning .callout-title{color:var(--warn)}
.callout-important{border-inline-start-color:var(--exp)} .callout-important .callout-title{color:var(--exp)}
.page-footer{margin-top:48px; padding-top:14px; border-top:1px solid var(--border); font-size:.85rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.prev-next{display:flex; justify-content:space-between; gap:12px; margin-top:40px}
.pn{flex:1 1 0; border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; color:var(--fg); display:flex; flex-direction:column; gap:3px; transition:all var(--dur-fast) var(--ease); min-height:56px; background:var(--card)}
a.pn:hover{text-decoration:none; border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-1px)}
.pn-next{text-align:end; align-items:flex-end} [dir="rtl"] .pn-next{text-align:start; align-items:flex-start} [dir="rtl"] .pn-prev{text-align:end; align-items:flex-end}
.pn-label{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700} .pn-name{font-weight:700; font-size:.96rem} .pn-empty{visibility:hidden}

/* ─── Buttons ─── */
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:11px; background:var(--card); color:var(--fg); padding:10px 18px; font-size:.94rem; font-weight:700; transition:all var(--dur-fast) var(--ease); cursor:pointer; line-height:1; box-shadow:var(--shadow)}
.btn:hover{text-decoration:none; border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-fg); border-color:transparent; box-shadow:0 8px 20px var(--accent-glow)}
.btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px) scale(1.01)}
.btn-ghost{background:transparent; box-shadow:none} .btn-lg{padding:12px 22px; font-size:1rem; border-radius:12px}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:800; letter-spacing:.05em; border:1px solid var(--border); color:var(--muted); border-radius:var(--radius-pill); padding:3px 11px; background:var(--card)}
.chip-cert{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, var(--border)); background:color-mix(in srgb, var(--ok) 10%, transparent)}
.chip-impl{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 28%, var(--border)); background:var(--accent-soft)}
.chip-exp{color:var(--exp); border-color:color-mix(in srgb, var(--exp) 28%, var(--border)); background:color-mix(in srgb, var(--exp) 10%, transparent)}
.chip-res{color:var(--exp); border-color:var(--exp)}

/* ─── Hero — PRO flagship ─── */
.hero-pro{
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; position:relative;
  background:
    radial-gradient(900px 500px at 78% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(700px 400px at 10% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--card), var(--bg));
  display:grid; grid-template-columns:1.05fr .95fr; gap:0; margin:6px 0 26px; box-shadow:var(--shadow-lg);
}
.hero-pro::before{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size:32px 32px; opacity:.35;
  mask-image:radial-gradient(75% 85% at 65% 20%, #000 35%, transparent 75%);
  -webkit-mask-image:radial-gradient(75% 85% at 65% 20%, #000 35%, transparent 75%);
  pointer-events:none;
}
.hero-copy{padding:36px 32px 30px; position:relative; z-index:1}
.hero-kicker{font-size:.72rem; letter-spacing:.18em; color:var(--accent); font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.hero-kicker::before{content:""; width:28px; height:2px; background:var(--accent); border-radius:99px}
.hero-pro h1{font-size:clamp(2rem, 3.6vw, 3rem); margin:0 0 12px; line-height:.98; letter-spacing:-.03em}
.hero-pro h1 .grad{background:linear-gradient(135deg,var(--accent),var(--accent-2) 55%, var(--accent-3)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.hero-sub{font-size:1.08rem; color:var(--muted); max-width:56ch; margin:0 0 18px; line-height:1.6}
.hero-stats{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.hero-stats .chip{backdrop-filter:blur(6px)}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px}
.hero-actions .btn{backdrop-filter:blur(8px)}
.trust-mini{display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; color:var(--muted); font-size:.84rem; align-items:center}
.trust-mini strong{color:var(--fg)}
.hero-visual{position:relative; padding:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 50%, transparent), var(--bg-2)); border-inline-start:1px solid var(--border); min-height:380px; overflow:hidden}
.hero-visual::after{content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); top:-40px; inset-inline-end:-60px; pointer-events:none}
.chart-mock{width:100%; max-width:520px; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); position:relative; z-index:1}
.chart-top{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--card),var(--bg-2))}
.chart-top-left{display:flex; align-items:center; gap:10px; font-weight:800; font-size:.88rem}
.chart-dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 6px color-mix(in srgb, var(--ok) 16%, transparent); animation:pulse-dot 1.6s infinite}
@keyframes pulse-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.chart-badge{font-size:.7rem; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:99px; background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent)}
.chart-canvas{height:190px; position:relative; background:
  linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:100% 38px, 52px 100%; background-position:0 0; overflow:hidden}
.chart-svg{position:absolute; inset:0; width:100%; height:100%}
.chart-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--border); background:var(--bg-2)}
.chart-stat{padding:10px 12px; text-align:center; border-inline-end:1px solid var(--border)} .chart-stat:last-child{border:0}
.chart-stat b{display:block; font-size:1.05rem; font-weight:800; color:var(--fg)}
.chart-stat span{font-size:.72rem; color:var(--muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase}

/* classic hero fallback */
.hero{border:1px solid var(--border); border-radius:14px; padding:34px 30px 26px; margin:4px 0 26px; background:radial-gradient(1200px 320px at 85% -40%, var(--accent-soft), transparent), linear-gradient(180deg, var(--card), var(--bg)); position:relative; overflow:hidden}
.hero h1{font-size:2.5rem; margin:0 0 10px; letter-spacing:-.02em} .hero .grad{color:var(--accent)} .hero-meta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}

/* ─── Sections ─── */
.section-head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.section-head h2{border:0; margin:0; font-size:1.35rem; display:flex; align-items:center; gap:10px}
.section-head h2 .sec-ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 14%, var(--border)); font-size:18px}
.section-desc{color:var(--muted); font-size:.95rem; margin:0 0 14px; max-width:70ch}
.wn-more{font-size:.9rem; font-weight:700; white-space:nowrap}

/* Pillars */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:18px 0 26px}
.pillar{border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:18px 18px 16px; transition:all var(--dur-fast) var(--ease); position:relative; overflow:hidden}
.pillar::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--accent-soft), transparent); opacity:0; transition:opacity var(--dur-fast) var(--ease)}
.pillar:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 22%, var(--border))} .pillar:hover::before{opacity:1}
.pillar h3{margin:0 0 8px; font-size:1rem; position:relative} .pillar p{margin:0; color:var(--muted); font-size:.92rem; position:relative}

/* Capability highlights */
.cap-highlights,.whats-new,.timeline-block,.release-card{margin:26px 0}
.wn-list{margin:8px 0; padding-inline-start:20px} .wn-list li{margin:6px 0; color:var(--fg); font-size:.94rem}
.release-card{border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; background:var(--card); box-shadow:var(--shadow)}
.timeline{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch}
.tl-item{display:flex; flex-direction:column; gap:2px; min-width:110px; border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--fg); background:var(--card); transition:all var(--dur-fast) var(--ease)}
.tl-item:hover{text-decoration:none; border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md)} .tl-tag{font-weight:800; font-size:.9rem} .tl-date{color:var(--muted); font-size:.78rem}
.nf404{text-align:center; padding:60px 0} .nf404-lead{color:var(--muted); font-size:1.05rem} .nf404-actions{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:18px}

/* ─── Bento / feature grid ─── */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin:16px 0 28px}
.bento-card{grid-column:span 6; border:1px solid var(--border); border-radius:16px; background:var(--card); padding:18px 18px 16px; transition:all var(--dur-fast) var(--ease); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px}
.bento-card.wide{grid-column:span 12} .bento-card.narrow{grid-column:span 4} .bento-card.tall{grid-column:span 6; grid-row:span 2}
.bento-card::after{content:""; position:absolute; inset:auto -20% -40% auto; width:60%; height:60%; background:radial-gradient(circle, var(--accent-soft), transparent 70%); opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none}
.bento-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 22%, transparent)} .bento-card:hover::after{opacity:1}
.bento-card h3{margin:0; font-size:1.02rem; display:flex; align-items:center; gap:9px} .bento-card p{margin:0; color:var(--muted); font-size:.92rem; line-height:1.6}
.bento-icon{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 14%, var(--border)); font-size:16px; flex:0 0 auto}
.bento-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}

/* Sec grid (existing) — upgraded */
.sec-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.sec-card{border:1px solid var(--border); border-radius:14px; background:var(--card); padding:18px 18px 14px; color:var(--fg); transition:all var(--dur-fast) var(--ease); display:flex; flex-direction:column; gap:6px}
.sec-card:hover{text-decoration:none; transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent)}
.sec-card h3{margin:0; font-size:1rem} .sec-card p{margin:0; color:var(--muted); font-size:.9rem}
.sec-icon{font-size:22px}
.sec-grid-wide{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* ─── Pipeline (HOW NEXUS WORKS) — interactive ─── */
.pipe-block{margin:28px 0}
.pipe{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; align-items:stretch; counter-reset:pipe}
.pipe::before{content:""; position:absolute; top:42px; inset-inline:12px 12px; height:2px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:.18; border-radius:99px}
.pipe-node{
  position:relative; border:1px solid var(--border); border-radius:14px; background:var(--card); padding:16px 10px 14px; color:var(--fg);
  text-align:center; font-size:.84rem; font-weight:800; line-height:1.3;
  transition:all var(--dur-fast) var(--ease); display:flex; flex-direction:column; align-items:center; gap:6px; isolation:isolate;
}
.pipe-node::before{counter-increment:pipe; content:"0" counter(pipe); font-size:.68rem; letter-spacing:.14em; color:var(--accent); font-weight:800}
.pipe-num{display:none}
.pipe-node .pipe-ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--bg-2); border:1px solid var(--border); font-size:18px}
.pipe-node:hover{text-decoration:none; transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-glow)}
.pipe-node.is-active{border-color:var(--accent); box-shadow:var(--shadow-glow); transform:translateY(-2px)}
.pipe-arrow{position:absolute; top:42px; width:22px; height:22px; border-radius:50%; background:var(--card); border:1px solid var(--border); display:grid; place-items:center; font-size:12px; color:var(--accent); transform:translateY(-50%); z-index:1}

/* modes */
.mode-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0 26px}
.mode-card{border:1px solid var(--border); border-radius:16px; background:var(--card); padding:18px; position:relative; overflow:hidden; transition:all var(--dur-fast) var(--ease)}
.mode-card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2))}
.mode-card.paper::before{background:linear-gradient(90deg,#64748b,#94a3b8)} .mode-card.shadow::before{background:linear-gradient(90deg,var(--accent),var(--accent-3))} .mode-card.live::before{background:linear-gradient(90deg,#e11d48,#f97316)}
.mode-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.mode-card h3{margin:0 0 6px; font-size:1rem} .mode-card p{margin:0; color:var(--muted); font-size:.9rem}
.mode-badge{position:absolute; inset-inline-end:12px; top:14px; font-size:.68rem; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:99px; border:1px solid var(--border); background:var(--bg-2); color:var(--muted)}

/* terminal demo */
.terminal-demo{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--code-bg); box-shadow:var(--shadow-lg); margin:18px 0}
.terminal-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08); color:#94a3b8; font-size:.82rem; font-weight:600}
.terminal-dots{display:flex; gap:6px; margin-inline-end:8px} .terminal-dots i{width:10px; height:10px; border-radius:50%; display:block} .terminal-dots i:nth-child(1){background:#ff5f57} i:nth-child(2){background:#febc2e} i:nth-child(3){background:#28c840}
.terminal-body{padding:16px 18px; font-family:var(--font-mono); font-size:.88rem; line-height:1.7; color:#cbd5e1}
.terminal-body .cmd{color:#7dd3fc} .terminal-body .ok{color:#4ade80} .terminal-body .mut{color:#64748b}
.terminal-body .typed{border-inline-end:2px solid #38bdf8; animation:blink .9s step-end infinite}
@keyframes blink{50%{border-color:transparent}}

/* screenshot carousel */
.shot-wrap{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--card); box-shadow:var(--shadow-lg); margin:16px 0}
.shot-tabs{display:flex; gap:6px; padding:10px; background:var(--bg-2); border-bottom:1px solid var(--border); overflow-x:auto}
.shot-tab{padding:7px 14px; border-radius:99px; border:1px solid var(--border); background:var(--card); font-size:.84rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:all var(--dur-fast) var(--ease)}
.shot-tab.is-active{background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 6px 16px var(--accent-glow)}
.shot-stage{position:relative; background:var(--bg-2); aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden}
.shot-stage img{width:100%; height:100%; object-fit:contain; background:var(--bg-2)}
.shot-nav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:12px; pointer-events:none}
.shot-nav button{pointer-events:auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter:blur(10px); display:grid; place-items:center; cursor:pointer; font-size:18px; transition:all var(--dur-fast) var(--ease)}
.shot-nav button:hover{transform:scale(1.06); border-color:var(--accent)}

/* evidence banner */
.evidence-banner{border:1px solid color-mix(in srgb, var(--warn) 22%, var(--border)); background:linear-gradient(180deg, color-mix(in srgb, var(--warn) 10%, var(--card)), var(--card)); border-radius:16px; padding:16px 18px; display:flex; gap:14px; align-items:start; margin:18px 0}
.evidence-banner .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb, var(--warn) 16%, var(--card)); border:1px solid color-mix(in srgb, var(--warn) 20%, var(--border))}

/* KPI */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0}
.kpi{border:1px solid var(--border); border-radius:14px; background:var(--card); padding:16px; text-align:center}
.kpi b{font-size:1.55rem; font-weight:800; letter-spacing:-.03em; display:block; background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.kpi span{font-size:.78rem; color:var(--muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase}

/* code + copy */
.codeblock{position:relative}
.copy-btn{position:absolute; inset-inline-end:10px; top:10px; z-index:2; border:1px solid rgba(255,255,255,.18); background:rgba(15,23,42,.6); color:#e2e8f0; border-radius:8px; padding:4px 10px; cursor:pointer; font-size:.8rem; font-weight:700; backdrop-filter:blur(8px); transition:all var(--dur-fast) var(--ease)}
.copy-btn:hover{background:rgba(15,23,42,.85); transform:scale(1.03)} .copy-btn.copied{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent)} .copy-btn.copy-err{color:var(--warn)}

/* search */
.search-results{position:absolute; top:100%; inset-inline-start:0; min-width:min(440px,90vw); border:1px solid var(--border); border-radius:12px; margin-top:8px; background:var(--card); box-shadow:var(--shadow-lg); max-height:380px; overflow-y:auto; z-index:40; animation:pop .14s var(--ease) both}
@keyframes pop{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.search-results a{display:block; padding:11px 14px; font-size:.9rem; color:var(--fg); border-bottom:1px solid var(--border)} .search-results a:last-child{border:0}
.search-results a:hover{background:var(--bg-2); text-decoration:none} .search-results .hit-lang{color:var(--muted); font-size:.78rem}
.search-empty{padding:12px 14px; color:var(--muted); font-size:.9rem}
.cmdk{position:fixed; inset:0; background:rgba(2,6,23,.55); backdrop-filter:blur(10px); z-index:50; display:none; place-items:start center; padding:10vh 16px}
.cmdk.open{display:grid} .cmdk-box{width:min(640px,100%); background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden}
.cmdk-input{width:100%; padding:16px 18px; border:0; border-bottom:1px solid var(--border); font-size:1rem; background:var(--card); color:var(--fg)} .cmdk-input:focus{outline:none}
.cmdk-list{max-height:360px; overflow-y:auto} .cmdk-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer} .cmdk-item:hover,.cmdk-item.is-active{background:var(--bg-2)} .cmdk-item:last-child{border:0}

/* reveal + counters */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease)} .reveal.in{opacity:1; transform:none}
.count{font-variant-numeric:tabular-nums}

/* CTA */
.cta{border:1px solid var(--border); border-radius:var(--radius-lg); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--card)), var(--card)); padding:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:28px 0; box-shadow:var(--shadow-md)}
.cta h3{margin:0; font-size:1.25rem} .cta p{margin:4px 0 0; color:var(--muted)}

/* ─── Responsive ─── */
@media (max-width:1100px){
  .hero-pro{grid-template-columns:1fr}
  .hero-visual{border-inline-start:0; border-top:1px solid var(--border); min-height:340px}
  .bento{grid-template-columns:repeat(6,1fr)} .bento-card{grid-column:span 6} .bento-card.narrow{grid-column:span 3}
  .pipe{grid-template-columns:repeat(3,1fr)} .pipe::before{display:none}
  .mode-cards{grid-template-columns:1fr} .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .sidebar{
    position:fixed; inset-block:var(--header-h) 0; inset-inline-start:0; z-index:25;
    width:min(86vw,320px); background:var(--bg); transform:translateX(-110%); transition:transform var(--dur) var(--ease); overflow-y:auto; box-shadow:var(--shadow-lg); border-inline-end:1px solid var(--border);
    height:auto;
  }
  [dir="rtl"] .sidebar{transform:translateX(110%)}
  body.nav-open .sidebar{transform:translateX(0)}
  #sidebar-backdrop{position:fixed; inset:var(--header-h) 0 0 0; background:rgba(2,6,23,.42); backdrop-filter:blur(6px); z-index:24; opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease)}
  body.nav-open #sidebar-backdrop{opacity:1; pointer-events:auto}
  .content{padding:18px 16px 60px}
  .search{min-width:120px; flex:1 1 auto}
  .header-actions{flex-wrap:wrap}
  .hero-copy{padding:24px 18px 20px} .hero-pro h1{font-size:2rem}
  .bento{grid-template-columns:1fr} .bento-card,.bento-card.narrow,.bento-card.wide{grid-column:span 1}
  .pipe{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  h1{font-size:1.6rem} .hero-pro h1{font-size:1.75rem}
  .brand-dim{display:none} .brand-badge{display:none}
  .content{padding:14px 12px 50px}
  pre{font-size:.8rem}
  .site-header{padding:8px 12px; gap:8px}
  .search{min-width:92px}
  .repo-link{display:none}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .hero-visual{min-height:300px}
}
@media print{.site-header,.sidebar,.prev-next,.search-results,.cmdk,.reading-progress{display:none}}

/* RTL */
[dir="rtl"]{text-align:right} [dir="rtl"] .content{text-align:right}
[dir="rtl"] pre,[dir="rtl"] code,[dir="rtl"] .code-ltr{direction:ltr; text-align:left; unicode-bidi:embed}
[dir="rtl"] th,[dir="rtl"] td{text-align:right}

/* Premium extras */
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* =======================================================================
   NEXUS SCALP ENGINE — CINEMATIC PRO DESIGN SYSTEM EXTENSION v4.0
   2800+ lines · OKLCH · glass · mesh · motion · docs · a11y · RTL · print
   Appended — preserves every base selector. Production-valid CSS.
   ======================================================================= */

/* ─── 1. OKLCH Extended Tokens ─── */
:root{
  --oklch-accent: oklch(0.58 0.22 264); --oklch-accent-2: oklch(0.58 0.21 290); --oklch-accent-3: oklch(0.72 0.14 195);
  --oklch-ok: oklch(0.62 0.16 155); --oklch-warn: oklch(0.72 0.16 55); --oklch-danger: oklch(0.59 0.22 25); --oklch-exp: oklch(0.55 0.24 295);
  --oklch-n50: oklch(0.98 0.005 255); --oklch-n100: oklch(0.96 0.01 255); --oklch-n200: oklch(0.92 0.012 255);
  --oklch-n300: oklch(0.88 0.015 255); --oklch-n400: oklch(0.72 0.02 255); --oklch-n500: oklch(0.58 0.02 255);
  --oklch-n600: oklch(0.45 0.025 255); --oklch-n700: oklch(0.32 0.03 265); --oklch-n800: oklch(0.22 0.03 265);
  --oklch-n900: oklch(0.16 0.03 265); --oklch-n950: oklch(0.12 0.02 265);
  --surface-0: oklch(1 0 0); --surface-1: oklch(0.98 0.01 255); --surface-2: oklch(0.96 0.015 255); --surface-3: oklch(0.94 0.02 255); --surface-ink: oklch(0.18 0.03 265);
  --text-1: oklch(0.20 0.03 265); --text-2: oklch(0.45 0.03 255); --text-3: oklch(0.58 0.02 255); --text-inverse: oklch(0.98 0.01 255);
  --border-oklch: oklch(0.92 0.01 255); --border-strong-oklch: oklch(0.88 0.015 255);
  --glass-bg: color-mix(in oklch, var(--surface-0) 72%, transparent); --glass-border: color-mix(in oklch, var(--border-oklch) 60%, transparent); --glass-blur: 18px; --glass-saturate: 1.35;
  --mesh-1: radial-gradient(800px 600px at 20% 10%, oklch(0.70 0.15 264 / 0.18), transparent 60%);
  --mesh-2: radial-gradient(700px 500px at 85% 15%, oklch(0.65 0.18 290 / 0.16), transparent 60%);
  --mesh-3: radial-gradient(900px 600px at 50% 100%, oklch(0.75 0.12 195 / 0.14), transparent 65%);
  --mesh-4: radial-gradient(600px 400px at 10% 90%, oklch(0.68 0.14 155 / 0.10), transparent 60%);
  --shadow-sm-oklch: 0 1px 2px oklch(0.20 0.02 265 / 0.06), 0 1px 3px oklch(0.20 0.02 265 / 0.08);
  --shadow-md-oklch: 0 4px 16px oklch(0.20 0.02 265 / 0.08), 0 2px 8px oklch(0.20 0.02 265 / 0.06);
  --shadow-lg-oklch: 0 12px 40px oklch(0.20 0.02 265 / 0.12), 0 4px 16px oklch(0.20 0.02 265 / 0.08);
  --shadow-xl-oklch: 0 24px 64px oklch(0.20 0.02 265 / 0.16), 0 8px 24px oklch(0.20 0.02 265 / 0.10);
  --glow-accent: 0 0 0 1px oklch(0.58 0.22 264 / 0.12), 0 8px 40px oklch(0.58 0.22 264 / 0.16);
  --glow-accent-strong: 0 0 0 1px oklch(0.58 0.22 264 / 0.18), 0 16px 56px oklch(0.58 0.22 264 / 0.22);
  --text-xs: 0.74rem; --text-sm: 0.84rem; --text-base: 1rem; --text-lg: 1.12rem; --text-xl: 1.28rem; --text-2xl: 1.56rem; --text-3xl: 1.96rem;
  --text-4xl: clamp(2rem, 4vw, 2.85rem); --text-5xl: clamp(2.4rem, 5vw, 3.6rem);
  --leading-tight: 1.15; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.03em; --tracking-normal: -0.015em;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 30; --z-dropdown: 40; --z-overlay: 50; --z-modal: 60; --z-toast: 70; --z-tooltip: 80;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-100: 100ms; --dur-150: 150ms; --dur-200: 200ms; --dur-300: 300ms; --dur-500: 500ms; --dur-700: 700ms; --dur-1000: 1000ms;
  --content-max: 1180px; --prose-max: 72ch; --radius-sm: 8px; --radius-base: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 999px;
  --ring: 0 0 0 3px color-mix(in oklch, var(--oklch-accent) 18%, transparent); --ring-strong: 0 0 0 3px color-mix(in oklch, var(--oklch-accent) 28%, transparent);
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-2)); --gradient-accent-3: linear-gradient(135deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  --gradient-mesh: var(--mesh-1), var(--mesh-2), var(--mesh-3);
}
:root[data-theme=dark]{ --surface-0: oklch(0.14 0.02 265); --surface-1: oklch(0.17 0.02 265); --surface-2: oklch(0.20 0.02 265); --surface-3: oklch(0.23 0.025 265); --text-1: oklch(0.96 0.01 255); --text-2: oklch(0.78 0.02 255); --text-3: oklch(0.62 0.02 255); --border-oklch: oklch(0.25 0.02 265); --border-strong-oklch: oklch(0.30 0.02 265); --glass-bg: color-mix(in oklch, oklch(0.14 0.02 265) 72%, transparent); --glass-border: oklch(0.25 0.02 265 / 0.6); --mesh-1: radial-gradient(800px 600px at 20% 10%, oklch(0.60 0.20 264 / 0.22), transparent 60%); --mesh-2: radial-gradient(700px 500px at 85% 15%, oklch(0.58 0.20 290 / 0.18), transparent 60%); --mesh-3: radial-gradient(900px 600px at 50% 100%, oklch(0.65 0.14 195 / 0.16), transparent 65%); --shadow-sm-oklch: 0 1px 3px oklch(0 0 0 / 0.45); --shadow-md-oklch: 0 8px 24px oklch(0 0 0 / 0.45); --shadow-lg-oklch: 0 16px 48px oklch(0 0 0 / 0.55); --shadow-xl-oklch: 0 24px 72px oklch(0 0 0 / 0.65); --glow-accent: 0 0 0 1px oklch(0.62 0.20 264 / 0.18), 0 12px 48px oklch(0.62 0.20 264 / 0.22); }
@media (prefers-color-scheme: dark){ :root:not([data-theme=light]){ --surface-0: oklch(0.14 0.02 265); --surface-1: oklch(0.17 0.02 265); --surface-2: oklch(0.20 0.02 265); --surface-3: oklch(0.23 0.025 265); --text-1: oklch(0.96 0.01 255); --text-2: oklch(0.78 0.02 255); --text-3: oklch(0.62 0.02 255); --border-oklch: oklch(0.25 0.02 265); --border-strong-oklch: oklch(0.30 0.02 265); --glass-bg: color-mix(in oklch, oklch(0.14 0.02 265) 72%, transparent); }}

/* ─── 2. Glass Morphism & Mesh Gradients ─── */
.glass{ background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); }
.glass-strong{ background: color-mix(in oklch, var(--surface-0) 82%, transparent); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid color-mix(in oklch, var(--border-oklch) 70%, transparent); }
.glass-subtle{ background: color-mix(in oklch, var(--surface-0) 58%, transparent); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border: 1px solid color-mix(in oklch, var(--border-oklch) 45%, transparent); }
.glass-dark{ background: color-mix(in oklch, oklch(0.14 0.02 265) 68%, transparent); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid oklch(0.25 0.02 265 / 0.5); color: var(--text-inverse); }
.glass-card{ background: var(--glass-bg); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg-oklch); }
.glass-nav{ background: color-mix(in oklch, var(--surface-0) 78%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--glass-border); }
.glass-overlay{ background: oklch(0.08 0.02 265 / 0.55); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.mesh-bg{ background: var(--mesh-1), var(--mesh-2), var(--mesh-3), linear-gradient(180deg, var(--surface-0), var(--surface-1)); }
.mesh-bg-strong{ background: var(--mesh-1), var(--mesh-2), var(--mesh-3), var(--mesh-4), linear-gradient(180deg, var(--surface-0), var(--surface-1)); }
.mesh-accent{ background: radial-gradient(900px 500px at 50% -10%, oklch(0.62 0.20 264 / 0.14), transparent 60%), radial-gradient(700px 400px at 90% 90%, oklch(0.60 0.18 290 / 0.12), transparent 60%), linear-gradient(180deg, var(--surface-0), var(--surface-1)); }
.mesh-dark{ background: radial-gradient(800px 500px at 20% 0%, oklch(0.55 0.20 264 / 0.28), transparent 60%), radial-gradient(700px 500px at 85% 30%, oklch(0.52 0.18 290 / 0.22), transparent 60%), radial-gradient(900px 600px at 50% 100%, oklch(0.60 0.14 195 / 0.18), transparent 65%), linear-gradient(180deg, oklch(0.14 0.02 265), oklch(0.10 0.02 265)); color: var(--text-inverse); }
.mesh-hero{ position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 70% -10%, oklch(0.65 0.18 264 / 0.16), transparent 60%), radial-gradient(800px 500px at 10% 100%, oklch(0.60 0.16 290 / 0.14), transparent 60%), linear-gradient(180deg, var(--surface-0), var(--surface-1)); }
.mesh-hero::before{ content:""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in oklch, var(--oklch-accent) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--oklch-accent) 6%, transparent) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.35; mask-image: radial-gradient(80% 80% at 60% 20%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(80% 80% at 60% 20%, #000 30%, transparent 75%); pointer-events: none; }
.mesh-hero::after{ content:""; position: absolute; inset: auto -10% -30% auto; width: 70%; height: 70%; background: radial-gradient(ellipse at center, oklch(0.62 0.18 264 / 0.12), transparent 70%); pointer-events: none; }
.orbs{ position: relative; overflow: hidden; } .orbs::before,.orbs::after{ content:""; position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.14; pointer-events: none; }
.orbs::before{ width: 420px; height: 420px; background: oklch(0.62 0.20 264); top: -80px; right: -60px; } .orbs::after{ width: 320px; height: 320px; background: oklch(0.60 0.18 290); bottom: -60px; left: -40px; }
.gradient-border{ position: relative; border: 1px solid transparent; background: linear-gradient(var(--surface-0), var(--surface-0)) padding-box, linear-gradient(135deg, var(--accent), var(--accent-2)) border-box; }
.gradient-border-2{ position: relative; border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, oklch(0.62 0.20 264 / 0.6), oklch(0.60 0.18 290 / 0.6)) border-box; }
.frosted{ backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); background: color-mix(in oklch, var(--surface-0) 68%, transparent); border: 1px solid color-mix(in oklch, var(--border-oklch) 55%, transparent); }
.aurora{ position: relative; overflow: hidden; } .aurora::before{ content:""; position: absolute; inset: -40% -20%; background: conic-gradient(from 180deg at 50% 50%, oklch(0.65 0.18 264 / 0.14), oklch(0.60 0.16 290 / 0.14), oklch(0.72 0.12 195 / 0.10), oklch(0.65 0.18 264 / 0.14)); filter: blur(48px); animation: aurora-rotate 18s linear infinite; pointer-events: none; }
@keyframes aurora-rotate{ to{ transform: rotate(360deg); } }
.glow{ box-shadow: var(--glow-accent); } .glow-strong{ box-shadow: var(--glow-accent-strong); }
.glow-hover{ transition: box-shadow var(--dur-300) var(--ease-out); } .glow-hover:hover{ box-shadow: var(--glow-accent-strong); }
/* ─── 3. Hero — Cinematic Pro ─── */
.hero-cinematic{ position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-2xl); background: radial-gradient(1100px 600px at 75% -10%, oklch(0.65 0.18 264 / 0.18), transparent 60%), radial-gradient(800px 500px at 10% 100%, oklch(0.60 0.16 290 / 0.14), transparent 60%), linear-gradient(180deg, var(--surface-0), var(--surface-1)); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; margin: 8px 0 28px; box-shadow: var(--shadow-xl-oklch); isolation: isolate; }
.hero-cinematic::before{ content:""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in oklch, var(--oklch-accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--oklch-accent) 7%, transparent) 1px, transparent 1px); background-size: 36px 36px; opacity: 0.30; mask-image: radial-gradient(75% 85% at 65% 20%, #000 35%, transparent 75%); -webkit-mask-image: radial-gradient(75% 85% at 65% 20%, #000 35%, transparent 75%); pointer-events: none; z-index: 0; }
.hero-cinematic::after{ content:""; position: absolute; inset: auto -12% -35% auto; width: 65%; height: 70%; background: radial-gradient(ellipse at center, oklch(0.62 0.20 264 / 0.12), transparent 70%); pointer-events: none; z-index: 0; }
.hero-cinematic .hero-bg-canvas{ position: absolute; inset: 0; z-index: 0; opacity: 0.45; }
.hero-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.hero-cinematic .hero-copy{ position: relative; z-index: 1; padding: 42px 36px 36px; }
.hero-cinematic .hero-kicker{ font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.hero-cinematic .hero-kicker::before{ content:""; width: 28px; height: 2px; background: var(--accent); border-radius: 999px; }
.hero-cinematic .hero-kicker .kicker-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in oklch, var(--oklch-accent) 14%, transparent); animation: hero-dot-pulse 1.8s ease-in-out infinite; }
@keyframes hero-dot-pulse{ 0%,100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.15); opacity: 0.85; } }
.hero-cinematic h1{ font-size: clamp(2rem, 4vw, 3.4rem); line-height: 0.98; letter-spacing: var(--tracking-tight); margin: 0 0 14px; font-weight: 900; }
.hero-cinematic h1 .grad{ background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-cinematic h1 .grad-animate{ background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: grad-shift 6s ease infinite; }
@keyframes grad-shift{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
.hero-cinematic .hero-sub{ font-size: 1.12rem; color: var(--text-2); max-width: 58ch; margin: 0 0 20px; line-height: 1.65; }
.hero-cinematic .hero-sub strong{ color: var(--text-1); font-weight: 700; }
.hero-cinematic .hero-stats{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.hero-cinematic .hero-stats .chip{ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: color-mix(in oklch, var(--surface-0) 70%, transparent); }
.hero-cinematic .hero-actions{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-cinematic .hero-actions .btn{ backdrop-filter: blur(8px); }
.hero-cinematic .hero-trust{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; color: var(--text-2); font-size: 0.86rem; align-items: center; }
.hero-cinematic .hero-trust strong{ color: var(--text-1); }
.hero-cinematic .hero-trust .trust-logos{ display: flex; gap: 10px; align-items: center; opacity: 0.7; }
.hero-cinematic .hero-trust .trust-logos img{ height: 20px; filter: grayscale(1) opacity(0.8); }
.hero-cinematic .hero-visual{ position: relative; z-index: 1; padding: 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, color-mix(in oklch, var(--surface-0) 40%, transparent), var(--surface-1)); border-inline-start: 1px solid var(--border); min-height: 420px; overflow: hidden; }
.hero-cinematic .hero-visual::before{ content:""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, oklch(0.62 0.18 264 / 0.10), transparent 70%); top: -60px; inset-inline-end: -80px; pointer-events: none; }
.hero-mesh-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.18; background: radial-gradient(600px 400px at 70% 20%, var(--accent) 0%, transparent 60%), radial-gradient(500px 400px at 20% 80%, var(--accent-2) 0%, transparent 60%); filter: blur(28px); }
.hero-orb{ position: absolute; border-radius: 50%; filter: blur(28px); opacity: 0.12; }
.hero-orb-1{ width: 380px; height: 380px; background: var(--accent); top: -80px; right: -40px; animation: orb-float 8s ease-in-out infinite; }
.hero-orb-2{ width: 300px; height: 300px; background: var(--accent-2); bottom: -40px; left: 10%; animation: orb-float 9s ease-in-out infinite reverse; }
.hero-orb-3{ width: 220px; height: 220px; background: var(--accent-3); top: 40%; right: 20%; animation: orb-float 7s ease-in-out infinite; }
@keyframes orb-float{ 0%,100%{ transform: translate(0,0) scale(1); } 33%{ transform: translate(12px,-14px) scale(1.05); } 66%{ transform: translate(-8px,10px) scale(0.98); } }
.hero-badge-float{ position: absolute; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: color-mix(in oklch, var(--surface-0) 78%, transparent); border: 1px solid var(--glass-border); border-radius: var(--radius-full); padding: 6px 12px; font-size: 0.78rem; font-weight: 700; box-shadow: var(--shadow-md-oklch); z-index: 2; display: flex; align-items: center; gap: 6px; }
.hero-badge-float.top{ top: 18px; inset-inline-end: 18px; } .hero-badge-float.bottom{ bottom: 18px; inset-inline-start: 18px; }
.hero-badge-float .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--oklch-ok); box-shadow: 0 0 0 5px oklch(0.62 0.16 155 / 0.14); }

/* ─── 4. Feature Cards — 3D Tilt & Spotlight ─── */
.feature-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 20px 0 28px; }
.feature-grid-2{ grid-template-columns: repeat(2, 1fr); } .feature-grid-3{ grid-template-columns: repeat(3, 1fr); } .feature-grid-4{ grid-template-columns: repeat(4, 1fr); }
.feature-card{ position: relative; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); padding: 22px 20px 18px; overflow: hidden; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.25s var(--ease-out); transform-style: preserve-3d; }
.feature-card::before{ content:""; position: absolute; inset: 0; background: radial-gradient(600px 300px at var(--mx, 50%) var(--my, 0%), oklch(0.62 0.18 264 / 0.10), transparent 60%); opacity: 0; transition: opacity 0.35s var(--ease-out); pointer-events: none; }
.feature-card::after{ content:""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklch, var(--oklch-accent) 6%, transparent), transparent 55%); opacity: 0; transition: opacity 0.35s var(--ease-out); pointer-events: none; }
.feature-card:hover{ transform: translateY(-4px) rotateX(1.2deg) rotateY(-1.2deg); box-shadow: var(--shadow-xl-oklch); border-color: color-mix(in oklch, var(--oklch-accent) 22%, var(--border)); }
.feature-card:hover::before{ opacity: 1; } .feature-card:hover::after{ opacity: 1; }
.feature-card.tilt{ transform-style: preserve-3d; perspective: 1200px; }
.feature-card.tilt:hover{ transform: translateY(-4px) rotateX(2deg) rotateY(-2deg); }
.feature-card.tilt .feature-icon{ transform: translateZ(18px); } .feature-card.tilt h3{ transform: translateZ(12px); } .feature-card.tilt p{ transform: translateZ(6px); }
.feature-icon{ width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklch, var(--oklch-accent) 10%, var(--surface-1)); border: 1px solid color-mix(in oklch, var(--oklch-accent) 14%, var(--border)); font-size: 20px; margin-bottom: 14px; transition: transform 0.35s var(--ease-out), background 0.25s; }
.feature-card:hover .feature-icon{ background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.05) translateZ(18px); }
.feature-icon-sm{ width: 34px; height: 34px; border-radius: 9px; font-size: 16px; }
.feature-icon-lg{ width: 52px; height: 52px; border-radius: 14px; font-size: 24px; }
.feature-icon-gradient{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; }
.feature-card h3{ margin: 0 0 8px; font-size: 1.06rem; font-weight: 800; letter-spacing: var(--tracking-normal); }
.feature-card p{ margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.6; }
.feature-card .feature-link{ display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.88rem; font-weight: 700; color: var(--accent); }
.feature-card .feature-link::after{ content:"→"; transition: transform 0.2s var(--ease-out); } .feature-card:hover .feature-link::after{ transform: translateX(4px); } [dir=rtl] .feature-card:hover .feature-link::after{ transform: translateX(-4px); }
.feature-card .feature-meta{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.feature-card .feature-badge{ font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-1); color: var(--text-2); }
.feature-card .feature-badge.accent{ background: color-mix(in oklch, var(--oklch-accent) 10%, transparent); color: var(--accent); border-color: color-mix(in oklch, var(--oklch-accent) 18%, transparent); }
.feature-card-highlight{ border-color: color-mix(in oklch, var(--oklch-accent) 28%, var(--border)); box-shadow: var(--glow-accent); }
.feature-card-highlight::before{ opacity: 1; background: radial-gradient(700px 400px at 50% 0%, oklch(0.62 0.18 264 / 0.12), transparent 70%); }
.feature-card-glass{ background: var(--glass-bg); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border: 1px solid var(--glass-border); }
.feature-card-dark{ background: linear-gradient(180deg, oklch(0.20 0.02 265), oklch(0.14 0.02 265)); color: var(--text-inverse); border-color: oklch(0.25 0.02 265); }
.feature-card-dark p{ color: oklch(0.78 0.02 255); } .feature-card-dark h3{ color: var(--text-inverse); }
.card-3d-wrap{ perspective: 1200px; } .card-3d{ transform-style: preserve-3d; transition: transform 0.4s var(--ease-out); }
.card-3d:hover{ transform: rotateX(3deg) rotateY(-3deg) translateZ(8px); }
.spotlight{ position: relative; overflow: hidden; } .spotlight::before{ content:""; position: absolute; inset: 0; background: radial-gradient(500px 300px at var(--x,50%) var(--y,50%), oklch(0.62 0.18 264 / 0.10), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .spotlight:hover::before{ opacity: 1; }
/* ─── 5. Pricing, Stats, Comparison Tables ─── */
.pricing-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 20px 0 28px; align-items: start; }
.pricing-tier{ position: relative; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.2s; }
.pricing-tier:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg-oklch); border-color: color-mix(in oklch, var(--oklch-accent) 18%, var(--border)); }
.pricing-tier.featured{ border-color: var(--accent); box-shadow: var(--glow-accent-strong); transform: scale(1.02); }
.pricing-tier.featured:hover{ transform: scale(1.02) translateY(-4px); }
.pricing-tier.featured::before{ content:""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient-accent); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.pricing-badge{ position: absolute; top: -10px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--gradient-accent); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-full); box-shadow: var(--shadow-md-oklch); white-space: nowrap; }
[dir=rtl] .pricing-badge{ transform: translateX(50%); }
.pricing-tier h3{ margin: 0; font-size: 1.18rem; font-weight: 800; }
.pricing-tier .pricing-desc{ margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
.pricing-price{ display: flex; align-items: baseline; gap: 6px; margin: 4px 0; }
.pricing-price .amount{ font-size: 2.4rem; font-weight: 900; letter-spacing: var(--tracking-tight); line-height: 1; }
.pricing-price .currency{ font-size: 1rem; font-weight: 700; color: var(--text-2); }
.pricing-price .period{ font-size: 0.88rem; color: var(--text-2); }
.pricing-price .original{ font-size: 0.92rem; color: var(--text-3); text-decoration: line-through; margin-inline-start: 6px; }
.pricing-features{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pricing-features li{ display: flex; align-items: start; gap: 8px; font-size: 0.90rem; color: var(--text-1); }
.pricing-features li::before{ content:"✓"; width: 20px; height: 20px; border-radius: 50%; background: oklch(0.62 0.16 155 / 0.14); color: oklch(0.55 0.16 155); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: 0 0 20px; margin-top: 1px; }
.pricing-features li.muted{ color: var(--text-3); } .pricing-features li.muted::before{ content:"—"; background: var(--surface-2); color: var(--text-3); }
.pricing-cta{ margin-top: auto; } .pricing-cta .btn{ width: 100%; justify-content: center; }
.pricing-note{ text-align: center; color: var(--text-2); font-size: 0.84rem; margin-top: 6px; }
.pricing-compare{ margin: 14px 0 0; font-size: 0.86rem; text-align: center; } .pricing-compare a{ font-weight: 700; }
.stats-table{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm-oklch); }
.stats-table th{ background: var(--surface-1); font-weight: 700; color: var(--text-2); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: start; }
.stats-table td{ padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: middle; }
.stats-table tbody tr{ transition: background 0.15s; } .stats-table tbody tr:hover td{ background: color-mix(in oklch, var(--oklch-accent) 6%, transparent); }
.stats-table .metric{ font-weight: 700; color: var(--text-1); } .stats-table .value{ font-weight: 800; font-variant-numeric: tabular-nums; }
.stats-table .delta{ font-size: 0.82rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-full); }
.stats-table .delta.up{ background: oklch(0.62 0.16 155 / 0.14); color: oklch(0.55 0.16 155); } .stats-table .delta.down{ background: oklch(0.59 0.22 25 / 0.12); color: oklch(0.55 0.20 25); }
.stats-table .progress-cell{ width: 140px; } .stats-table .bar{ height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.stats-table .bar-fill{ height: 100%; border-radius: 999px; background: var(--gradient-accent); transition: width 0.6s var(--ease-out); }
.comparison{ border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm-oklch); margin: 18px 0; }
.comparison table{ width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.comparison th{ padding: 12px 16px; background: var(--surface-1); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--border); text-align: start; }
.comparison th.highlight{ background: color-mix(in oklch, var(--oklch-accent) 10%, var(--surface-1)); color: var(--accent); }
.comparison td{ padding: 12px 16px; border-top: 1px solid var(--border); }
.comparison tbody tr:hover td{ background: color-mix(in oklch, var(--oklch-accent) 5%, transparent); }
.comparison .check{ color: oklch(0.55 0.16 155); font-weight: 800; } .comparison .cross{ color: var(--text-3); }
.comparison .check::before{ content:"✓ "; } .comparison .cross::before{ content:"—"; }
.kpi-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.kpi-card{ border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 18px 16px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
.kpi-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md-oklch); }
.kpi-card .kpi-value{ font-size: 1.85rem; font-weight: 900; letter-spacing: var(--tracking-tight); background: var(--gradient-accent-3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; font-variant-numeric: tabular-nums; }
.kpi-card .kpi-label{ font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); margin-top: 4px; display: block; }
.kpi-card .kpi-delta{ font-size: 0.78rem; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); background: oklch(0.62 0.16 155 / 0.12); color: oklch(0.55 0.16 155); }
.kpi-card .kpi-delta.down{ background: oklch(0.59 0.22 25 / 0.12); color: oklch(0.55 0.20 25); }

/* ─── 6. Code Blocks — Line Numbers, Copy, Syntax, Tabs ─── */
.codeblock{ position: relative; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); overflow: hidden; background: var(--code-bg); box-shadow: var(--shadow-lg-oklch); margin: 16px 0; }
.codeblock-header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.08); color: #94a3b8; font-size: 0.82rem; font-weight: 600; }
.codeblock-header .lang{ display: flex; align-items: center; gap: 8px; font-weight: 700; color: #cbd5e1; }
.codeblock-header .lang::before{ content:""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in oklch, var(--oklch-accent) 16%, transparent); }
.codeblock-header .actions{ display: flex; gap: 6px; }
.codeblock pre{ margin: 0; padding: 16px 18px; background: transparent; border: none; border-radius: 0; overflow-x: auto; line-height: 1.65; font-size: 0.86rem; }
.codeblock pre code{ background: transparent; border: none; padding: 0; color: #e2e8f0; }
.codeblock .line-numbers{ display: flex; }
.codeblock .line-numbers .gutter{ user-select: none; text-align: end; padding: 16px 12px 16px 14px; color: #475569; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.65; border-inline-end: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); min-width: 44px; }
.codeblock .line-numbers .gutter span{ display: block; }
.codeblock .line-numbers pre{ flex: 1; }
.copy-btn{ position: absolute; inset-inline-end: 10px; top: 10px; z-index: 2; border: 1px solid rgba(255,255,255,0.16); background: rgba(15,23,42,0.6); color: #e2e8f0; border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 0.78rem; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.15s var(--ease-out); display: inline-flex; align-items: center; gap: 6px; }
.copy-btn:hover{ background: rgba(15,23,42,0.9); transform: scale(1.03); border-color: rgba(255,255,255,0.22); }
.copy-btn.copied{ color: oklch(0.70 0.16 155); border-color: oklch(0.62 0.16 155 / 0.4); } .copy-btn.copy-err{ color: oklch(0.72 0.16 55); }
.copy-btn .icon{ width: 14px; height: 14px; opacity: 0.9; }
.codeblock .highlight-line{ background: rgba(255,255,255,0.06); display: block; margin: 0 -18px; padding: 0 18px; border-inline-start: 3px solid var(--accent); }
.codeblock .added{ background: oklch(0.62 0.16 155 / 0.14); display: block; margin: 0 -18px; padding: 0 18px; }
.codeblock .removed{ background: oklch(0.59 0.22 25 / 0.14); display: block; margin: 0 -18px; padding: 0 18px; }
.code-tabs{ border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); margin: 16px 0; }
.code-tabs .tab-bar{ display: flex; gap: 2px; padding: 8px 8px 0; background: var(--surface-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.code-tabs .tab-bar button{ padding: 8px 14px; border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: none; background: transparent; font-size: 0.84rem; font-weight: 700; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.code-tabs .tab-bar button.is-active{ background: var(--card); color: var(--text-1); border-color: var(--border); box-shadow: 0 -2px 8px rgba(0,0,0,0.06); }
.code-tabs .tab-panel{ display: none; } .code-tabs .tab-panel.is-active{ display: block; }
.code-tabs .tab-panel .codeblock{ margin: 0; border: none; border-radius: 0; box-shadow: none; }
.inline-code{ font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; color: var(--text-1); }
:root[data-theme=dark] .inline-code{ background: oklch(0.20 0.02 265); border-color: oklch(0.25 0.02 265); }
/* ─── 7. Callouts & Admonitions ─── */
.callout{ margin: 16px 0; border: 1px solid var(--border); border-inline-start-width: 4px; background: var(--card); border-radius: var(--radius-base); padding: 16px 18px; box-shadow: var(--shadow-sm-oklch); }
.callout-title{ font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.callout-title .icon{ width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; }
.callout p{ margin: 0.5em 0 0; color: var(--text-1); font-size: 0.92rem; line-height: 1.6; } .callout p:first-of-type{ margin-top: 0; }
.callout-note{ border-inline-start-color: var(--accent); } .callout-note .callout-title{ color: var(--accent); } .callout-note .callout-title .icon{ background: color-mix(in oklch, var(--oklch-accent) 14%, transparent); }
.callout-tip{ border-inline-start-color: var(--oklch-ok); } .callout-tip .callout-title{ color: oklch(0.55 0.16 155); } .callout-tip .callout-title .icon{ background: oklch(0.62 0.16 155 / 0.14); }
.callout-warning{ border-inline-start-color: var(--oklch-warn); } .callout-warning .callout-title{ color: oklch(0.65 0.16 55); } .callout-warning .callout-title .icon{ background: oklch(0.72 0.16 55 / 0.14); }
.callout-danger{ border-inline-start-color: var(--oklch-danger); } .callout-danger .callout-title{ color: oklch(0.55 0.20 25); } .callout-danger .callout-title .icon{ background: oklch(0.59 0.22 25 / 0.12); }
.callout-important{ border-inline-start-color: var(--oklch-exp); } .callout-important .callout-title{ color: var(--oklch-exp); } .callout-important .callout-title .icon{ background: oklch(0.55 0.24 295 / 0.12); }
.callout-info{ border-inline-start-color: var(--oklch-accent-3); } .callout-info .callout-title{ color: oklch(0.62 0.14 195); } .callout-info .callout-title .icon{ background: oklch(0.72 0.14 195 / 0.14); }
.callout-success{ border-inline-start-color: var(--oklch-ok); background: linear-gradient(180deg, oklch(0.62 0.16 155 / 0.06), var(--card)); }
.callout-error{ border-inline-start-color: var(--oklch-danger); background: linear-gradient(180deg, oklch(0.59 0.22 25 / 0.06), var(--card)); }
.callout-compact{ padding: 10px 14px; font-size: 0.88rem; } .callout-compact .callout-title{ font-size: 0.72rem; margin-bottom: 4px; }
.callout-glass{ background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-inline-start-width: 4px; }
.admonition{ margin: 16px 0; border-radius: var(--radius-base); padding: 14px 16px; border: 1px solid var(--border); display: flex; gap: 12px; align-items: start; }
.admonition-icon{ width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; flex: 0 0 30px; }
.admonition-content{ flex: 1; } .admonition-content strong{ display: block; font-size: 0.84rem; margin-bottom: 4px; } .admonition-content p{ margin: 0; font-size: 0.90rem; color: var(--text-1); line-height: 1.6; }
.admonition-note .admonition-icon{ background: color-mix(in oklch, var(--oklch-accent) 14%, transparent); color: var(--accent); }
.admonition-warn .admonition-icon{ background: oklch(0.72 0.16 55 / 0.14); color: oklch(0.65 0.16 55); }
.admonition-danger .admonition-icon{ background: oklch(0.59 0.22 25 / 0.12); color: oklch(0.55 0.20 25); }
.admonition-success .admonition-icon{ background: oklch(0.62 0.16 155 / 0.14); color: oklch(0.55 0.16 155); }
/* ─── 8. Tabs ─── */
.tabs{ margin: 18px 0; }
.tabs-list{ display: flex; gap: 4px; border-bottom: 2px solid var(--border); overflow-x: auto; scrollbar-width: none; } .tabs-list::-webkit-scrollbar{ display: none; }
.tabs-trigger{ padding: 10px 16px; font-size: 0.90rem; font-weight: 700; color: var(--text-2); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s, background 0.15s; border-radius: 8px 8px 0 0; }
.tabs-trigger:hover{ color: var(--text-1); background: var(--surface-1); }
.tabs-trigger.is-active{ color: var(--accent); border-bottom-color: var(--accent); background: color-mix(in oklch, var(--oklch-accent) 6%, transparent); }
.tabs-trigger:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.tabs-panel{ display: none; padding: 18px 2px 4px; animation: tabs-in 0.2s var(--ease-out); } .tabs-panel.is-active{ display: block; }
@keyframes tabs-in{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: none; } }
.tabs-boxed .tabs-list{ background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-base) var(--radius-base) 0 0; padding: 6px 6px 0; gap: 4px; }
.tabs-boxed .tabs-trigger{ border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: none; margin-bottom: 0; }
.tabs-boxed .tabs-trigger.is-active{ background: var(--card); border-color: var(--border); color: var(--text-1); }
.tabs-boxed .tabs-panel{ border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-base) var(--radius-base); padding: 18px; background: var(--card); }
.tabs-pills .tabs-list{ border: none; gap: 6px; padding: 4px; background: var(--surface-1); border-radius: var(--radius-full); width: fit-content; }
.tabs-pills .tabs-trigger{ border: none; border-radius: var(--radius-full); padding: 7px 16px; margin: 0; }
.tabs-pills .tabs-trigger.is-active{ background: var(--card); color: var(--text-1); box-shadow: var(--shadow-sm-oklch); border: none; }
.tabs-vertical{ display: grid; grid-template-columns: 200px 1fr; gap: 18px; }
.tabs-vertical .tabs-list{ flex-direction: column; border-bottom: none; border-inline-end: 2px solid var(--border); gap: 2px; }
.tabs-vertical .tabs-trigger{ text-align: start; border-bottom: none; border-inline-end: 2px solid transparent; margin-bottom: 0; margin-inline-end: -2px; border-radius: 8px 0 0 8px; }
.tabs-vertical .tabs-trigger.is-active{ border-inline-end-color: var(--accent); background: color-mix(in oklch, var(--oklch-accent) 6%, transparent); }
[dir=rtl] .tabs-vertical{ grid-template-columns: 1fr 200px; } [dir=rtl] .tabs-vertical .tabs-list{ order: 2; }
/* ─── 9. Accordions ─── */
.accordion{ border: 1px solid var(--border); border-radius: var(--radius-base); overflow: hidden; background: var(--card); margin: 16px 0; }
.accordion-item{ border-bottom: 1px solid var(--border); } .accordion-item:last-child{ border-bottom: none; }
.accordion-trigger{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: transparent; border: none; font-size: 0.96rem; font-weight: 700; color: var(--text-1); cursor: pointer; text-align: start; transition: background 0.15s; }
.accordion-trigger:hover{ background: var(--surface-1); }
.accordion-trigger .icon{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-size: 12px; color: var(--text-2); transition: transform 0.25s var(--ease-out), background 0.15s, color 0.15s; flex: 0 0 26px; }
.accordion-item.is-open .accordion-trigger .icon{ transform: rotate(180deg); background: var(--accent); color: #fff; border-color: var(--accent); }
.accordion-panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-out); }
.accordion-item.is-open .accordion-panel{ grid-template-rows: 1fr; }
.accordion-panel-inner{ overflow: hidden; } .accordion-panel-body{ padding: 0 18px 16px; color: var(--text-2); font-size: 0.92rem; line-height: 1.65; }
.accordion-panel-body p{ margin: 0.6em 0; } .accordion-panel-body p:first-child{ margin-top: 0; }
.accordion-glass{ background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* ─── 10. Timeline & Changelog ─── */
.timeline{ display: flex; flex-direction: column; gap: 0; margin: 20px 0; position: relative; }
.timeline::before{ content:""; position: absolute; inset-inline-start: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2) 50%, transparent); border-radius: 999px; opacity: 0.35; }
[dir=rtl] .timeline::before{ inset-inline-start: auto; inset-inline-end: 15px; }
.timeline-item{ display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 14px 0; position: relative; }
.timeline-dot{ width: 32px; height: 32px; border-radius: 50%; background: var(--card); border: 2px solid var(--accent); display: grid; place-items: center; font-size: 13px; box-shadow: 0 0 0 4px color-mix(in oklch, var(--oklch-accent) 12%, transparent); position: relative; z-index: 1; }
.timeline-dot.done{ background: var(--accent); color: #fff; } .timeline-dot.current{ background: var(--accent); color: #fff; box-shadow: 0 0 0 6px color-mix(in oklch, var(--oklch-accent) 18%, transparent), 0 0 20px color-mix(in oklch, var(--oklch-accent) 22%, transparent); animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{ box-shadow: 0 0 0 6px color-mix(in oklch, var(--oklch-accent) 18%, transparent), 0 0 20px color-mix(in oklch, var(--oklch-accent) 22%, transparent); } 50%{ box-shadow: 0 0 0 10px color-mix(in oklch, var(--oklch-accent) 10%, transparent), 0 0 28px color-mix(in oklch, var(--oklch-accent) 30%, transparent); } }
.timeline-content{ border: 1px solid var(--border); border-radius: var(--radius-base); background: var(--card); padding: 14px 16px; box-shadow: var(--shadow-sm-oklch); }
.timeline-content h4{ margin: 0 0 6px; font-size: 0.96rem; } .timeline-content p{ margin: 0; color: var(--text-2); font-size: 0.90rem; line-height: 1.6; }
.timeline-meta{ display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 0.78rem; color: var(--text-3); }
.timeline-meta .badge{ padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-1); border: 1px solid var(--border); font-weight: 700; }
.timeline-horizontal{ display: flex; gap: 16px; overflow-x: auto; padding: 12px 0; scrollbar-width: thin; }
.timeline-horizontal::before{ display: none; }
.timeline-horizontal .timeline-item{ grid-template-columns: 1fr; gap: 10px; min-width: 220px; flex: 0 0 auto; text-align: center; }
.timeline-horizontal .timeline-dot{ margin: 0 auto; }
.changelog{ margin: 20px 0; }
.changelog-entry{ display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.changelog-entry:last-child{ border-bottom: none; }
.changelog-date{ font-size: 0.84rem; color: var(--text-2); } .changelog-date strong{ display: block; font-size: 1rem; color: var(--text-1); }
.changelog-tag{ display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border); }
.changelog-tag.major{ background: oklch(0.59 0.22 25 / 0.12); color: oklch(0.55 0.20 25); border-color: oklch(0.59 0.22 25 / 0.18); }
.changelog-tag.minor{ background: oklch(0.62 0.16 155 / 0.12); color: oklch(0.55 0.16 155); border-color: oklch(0.62 0.16 155 / 0.18); }
.changelog-tag.patch{ background: color-mix(in oklch, var(--oklch-accent) 10%, transparent); color: var(--accent); border-color: color-mix(in oklch, var(--oklch-accent) 18%, transparent); }
.changelog-content h3{ margin: 0 0 8px; font-size: 1.12rem; } .changelog-content ul{ margin: 8px 0 0; padding-inline-start: 18px; } .changelog-content li{ margin: 4px 0; font-size: 0.92rem; color: var(--text-1); }
/* ─── 11. Docs Article Layouts ─── */
.docs-layout{ display: grid; grid-template-columns: 1fr 240px; gap: 32px; align-items: start; }
.docs-article{ min-width: 0; max-width: var(--prose-max); }
.docs-article h1{ font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1; letter-spacing: var(--tracking-tight); margin: 0 0 10px; }
.docs-article .lead{ font-size: 1.14rem; color: var(--text-2); line-height: 1.6; margin: 0 0 18px; }
.docs-article h2{ font-size: 1.42rem; margin-top: 2em; padding-bottom: 6px; border-bottom: 1px solid var(--border); scroll-margin-top: 80px; }
.docs-article h3{ font-size: 1.14rem; scroll-margin-top: 80px; }
.docs-article h4{ font-size: 1rem; }
.docs-article p{ margin: 0.85em 0; line-height: 1.72; }
.docs-article ul, .docs-article ol{ margin: 0.8em 0; padding-inline-start: 22px; } .docs-article li{ margin: 0.35em 0; line-height: 1.65; }
.docs-article hr{ border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.docs-article img{ border-radius: var(--radius-base); border: 1px solid var(--border); box-shadow: var(--shadow-md-oklch); }
.docs-article blockquote{ margin: 16px 0; padding: 12px 18px; border-inline-start: 3px solid var(--accent); background: var(--surface-1); border-radius: 0 var(--radius-base) var(--radius-base) 0; color: var(--text-2); }
.anchor-link{ opacity: 0; margin-inline-start: 8px; font-size: 0.86rem; color: var(--text-3); text-decoration: none; transition: opacity 0.15s, color 0.15s; }
h2:hover .anchor-link, h3:hover .anchor-link, h4:hover .anchor-link{ opacity: 1; }
.anchor-link:hover{ color: var(--accent); } .anchor-link::before{ content:"#"; }
.heading-anchor{ scroll-margin-top: 80px; }
.toc{ position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; font-size: 0.86rem; padding: 16px 14px; border: 1px solid var(--border); border-radius: var(--radius-base); background: var(--card); box-shadow: var(--shadow-sm-oklch); }
.toc-title{ font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin: 0 0 10px; }
.toc-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc-list li{ margin: 0; } .toc-list a{ display: block; padding: 5px 10px; border-radius: 8px; color: var(--text-2); font-weight: 500; line-height: 1.4; border-inline-start: 2px solid transparent; margin-inline-start: -2px; transition: all 0.15s; }
.toc-list a:hover{ color: var(--text-1); background: var(--surface-1); text-decoration: none; }
.toc-list a.is-active{ color: var(--accent); background: color-mix(in oklch, var(--oklch-accent) 8%, transparent); border-inline-start-color: var(--accent); font-weight: 700; }
.toc-list .toc-h3{ padding-inline-start: 22px; font-size: 0.82rem; } .toc-list .toc-h4{ padding-inline-start: 32px; font-size: 0.80rem; }
.toc::-webkit-scrollbar{ width: 4px; } .toc::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; }
.reading-progress{ position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); z-index: 60; transition: width 0.08s linear; }
.reading-progress-circle{ position: fixed; bottom: 20px; inset-inline-end: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: grid; place-items: center; box-shadow: var(--shadow-md-oklch); z-index: 30; }
.reading-progress-circle svg{ width: 36px; height: 36px; transform: rotate(-90deg); }
.reading-progress-circle circle{ fill: none; stroke-width: 3; } .reading-progress-circle .track{ stroke: var(--border); } .reading-progress-circle .fill{ stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }
.breadcrumbs{ font-size: 0.84rem; color: var(--text-2); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumbs a{ color: var(--text-2); } .breadcrumbs a:hover{ color: var(--accent); }
.breadcrumbs .sep{ color: var(--text-3); font-size: 0.72rem; }
.breadcrumbs .crumb-current{ color: var(--text-1); font-weight: 700; }
.breadcrumbs .crumb-home{ display: inline-flex; align-items: center; gap: 4px; }
.edit-on-github{ display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 5px 12px; background: var(--card); transition: all 0.15s; }
.edit-on-github:hover{ color: var(--text-1); border-color: var(--accent); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm-oklch); }
.page-meta{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 18px; font-size: 0.84rem; color: var(--text-2); }
.page-meta .meta-item{ display: inline-flex; align-items: center; gap: 6px; }
.page-meta .meta-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.prev-next{ display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; }
.pn{ flex: 1 1 0; border: 1px solid var(--border); border-radius: var(--radius-base); padding: 14px 16px; color: var(--text-1); display: flex; flex-direction: column; gap: 3px; transition: all 0.15s var(--ease-out); min-height: 64px; background: var(--card); text-decoration: none; }
a.pn:hover{ text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-md-oklch); transform: translateY(-1px); }
.pn-next{ text-align: end; align-items: flex-end; } [dir=rtl] .pn-next{ text-align: start; align-items: flex-start; } [dir=rtl] .pn-prev{ text-align: end; align-items: flex-end; }
.pn-label{ font-size: 0.72rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pn-name{ font-weight: 700; font-size: 0.96rem; } .pn-empty{ visibility: hidden; }
.doc-footer{ margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-size: 0.84rem; color: var(--text-2); }
.doc-footer .links{ display: flex; gap: 10px; }
.feedback{ border: 1px solid var(--border); border-radius: var(--radius-base); padding: 14px 16px; background: var(--surface-1); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 24px; }
.feedback p{ margin: 0; font-size: 0.90rem; font-weight: 600; } .feedback .btn{ padding: 7px 14px; font-size: 0.84rem; }

/* ─── 12. Interactive — Command Palette, Search, Drawer, Pickers ─── */
.cmdk{ position: fixed; inset: 0; background: oklch(0.08 0.02 265 / 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 50; display: none; place-items: start center; padding: 10vh 16px; }
.cmdk.open{ display: grid; animation: cmdk-in 0.18s var(--ease-out); }
@keyframes cmdk-in{ from{ opacity: 0; } to{ opacity: 1; } }
.cmdk-box{ width: min(640px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl-oklch); overflow: hidden; animation: cmdk-box-in 0.22s var(--ease-out); }
@keyframes cmdk-box-in{ from{ opacity: 0; transform: translateY(8px) scale(0.98); } to{ opacity: 1; transform: none; } }
.cmdk-input{ width: 100%; padding: 16px 18px 16px 42px; border: none; border-bottom: 1px solid var(--border); font-size: 1rem; background: var(--card); color: var(--text-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 16px center; }
.cmdk-input:focus{ outline: none; } .cmdk-input::placeholder{ color: var(--text-3); }
.cmdk-list{ max-height: 360px; overflow-y: auto; padding: 6px; }
.cmdk-item{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background 0.12s; }
.cmdk-item:hover, .cmdk-item.is-active{ background: var(--surface-1); }
.cmdk-item .left{ display: flex; align-items: center; gap: 10px; }
.cmdk-item .icon{ width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: 14px; }
.cmdk-item.is-active .icon{ background: var(--accent); color: #fff; }
.cmdk-item .title{ font-weight: 700; font-size: 0.90rem; } .cmdk-item .desc{ font-size: 0.78rem; color: var(--text-2); }
.cmdk-item .kbd{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; background: var(--surface-1); }
.cmdk-empty{ padding: 24px; text-align: center; color: var(--text-2); font-size: 0.92rem; }
.cmdk-footer{ display: flex; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 0.74rem; color: var(--text-3); background: var(--surface-1); }
.cmdk-footer span{ display: inline-flex; align-items: center; gap: 4px; } .cmdk-footer kbd{ font-family: var(--font-mono); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: var(--card); font-size: 0.70rem; }
.search-wrap{ position: relative; }
.search{ min-width: 240px; padding: 8px 12px 8px 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text-1); font-size: 0.90rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; transition: border-color 0.15s, box-shadow 0.15s; }
.search:focus{ outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.search::placeholder{ color: var(--text-3); }
.search-results{ position: absolute; top: 100%; inset-inline-start: 0; min-width: min(440px, 90vw); border: 1px solid var(--border); border-radius: var(--radius-base); margin-top: 8px; background: var(--card); box-shadow: var(--shadow-lg-oklch); max-height: 380px; overflow-y: auto; z-index: 40; animation: pop 0.14s var(--ease-out) both; }
@keyframes pop{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
.search-results a{ display: block; padding: 11px 14px; font-size: 0.90rem; color: var(--text-1); border-bottom: 1px solid var(--border); transition: background 0.12s; } .search-results a:last-child{ border: none; }
.search-results a:hover{ background: var(--surface-1); text-decoration: none; } .search-results .hit-title{ font-weight: 700; } .search-results .hit-desc{ font-size: 0.82rem; color: var(--text-2); margin-top: 2px; } .search-results .hit-lang{ color: var(--text-3); font-size: 0.78rem; }
.search-results .hit-highlight{ background: color-mix(in oklch, var(--oklch-accent) 14%, transparent); padding: 0 2px; border-radius: 3px; }
.search-empty{ padding: 14px; color: var(--text-2); font-size: 0.90rem; text-align: center; }
.search-kbd{ position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 3px; pointer-events: none; }
.search-kbd kbd{ font-family: var(--font-mono); font-size: 0.68rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; background: var(--surface-1); color: var(--text-2); }
.mobile-drawer{ position: fixed; inset: 0; z-index: 45; display: none; }
.mobile-drawer.open{ display: block; }
.mobile-drawer-backdrop{ position: absolute; inset: 0; background: oklch(0.08 0.02 265 / 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade-in 0.2s var(--ease-out); }
@keyframes fade-in{ from{ opacity: 0; } to{ opacity: 1; } }
.mobile-drawer-panel{ position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 340px); background: var(--surface-0); border-inline-end: 1px solid var(--border); box-shadow: var(--shadow-xl-oklch); overflow-y: auto; animation: drawer-in 0.28s var(--ease-out); }
[dir=rtl] .mobile-drawer-panel{ inset-inline-start: auto; inset-inline-end: 0; }
@keyframes drawer-in{ from{ transform: translateX(-100%); } to{ transform: none; } }
[dir=rtl] @keyframes drawer-in{ from{ transform: translateX(100%); } to{ transform: none; } }
.mobile-drawer-header{ display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.mobile-drawer-close{ width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); display: grid; place-items: center; cursor: pointer; font-size: 16px; }
.mobile-drawer-nav{ padding: 12px; }
.mobile-drawer-nav a{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text-1); font-weight: 600; font-size: 0.92rem; transition: background 0.12s; }
.mobile-drawer-nav a:hover{ background: var(--surface-1); text-decoration: none; } .mobile-drawer-nav a.is-active{ background: color-mix(in oklch, var(--oklch-accent) 10%, transparent); color: var(--accent); }
.lang-switcher{ position: relative; }
.lang-switcher summary{ cursor: pointer; list-style: none; border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; font-size: 0.88rem; background: var(--card); user-select: none; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lang-switcher summary::-webkit-details-marker{ display: none; }
.lang-switcher[open] summary{ border-color: var(--accent); box-shadow: var(--ring); }
.lang-menu{ position: absolute; inset-inline-end: 0; margin-top: 8px; min-width: 180px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-base); box-shadow: var(--shadow-lg-oklch); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 40; animation: pop 0.14s var(--ease-out); }
.lang-menu a{ padding: 8px 10px; border-radius: 8px; font-size: 0.90rem; color: var(--text-1); display: flex; align-items: center; justify-content: space-between; } .lang-menu a:hover{ background: var(--surface-1); text-decoration: none; }
.lang-menu .active{ background: color-mix(in oklch, var(--oklch-accent) 10%, transparent); color: var(--accent); font-weight: 700; }
.lang-menu .check{ color: var(--accent); }
.theme-picker{ position: relative; }
.theme-picker summary{ cursor: pointer; list-style: none; border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; font-size: 0.88rem; background: var(--card); user-select: none; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.theme-picker summary::-webkit-details-marker{ display: none; }
.theme-picker[open] summary{ border-color: var(--accent); box-shadow: var(--ring); }
.theme-menu{ position: absolute; inset-inline-end: 0; margin-top: 8px; min-width: 160px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-base); box-shadow: var(--shadow-lg-oklch); padding: 6px; z-index: 40; animation: pop 0.14s var(--ease-out); }
.theme-menu button{ display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 8px 10px; background: transparent; border: none; border-radius: 8px; font-size: 0.90rem; color: var(--text-1); cursor: pointer; font-weight: 500; }
.theme-menu button:hover{ background: var(--surface-1); } .theme-menu button.is-active{ background: color-mix(in oklch, var(--oklch-accent) 10%, transparent); color: var(--accent); font-weight: 700; }
.theme-menu .icon{ width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); font-size: 12px; }
/* ─── 13. Animations — Scroll Reveal, Parallax, Pulse, Shimmer, Pipeline, Chart ─── */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal.in{ opacity: 1; transform: none; }
.reveal-up{ opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } .reveal-up.in{ opacity: 1; transform: none; }
.reveal-left{ opacity: 0; transform: translateX(-18px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } .reveal-left.in{ opacity: 1; transform: none; }
.reveal-right{ opacity: 0; transform: translateX(18px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } .reveal-right.in{ opacity: 1; transform: none; }
.reveal-scale{ opacity: 0; transform: scale(0.96); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .reveal-scale.in{ opacity: 1; transform: none; }
.reveal-delay-1{ transition-delay: 0.08s; } .reveal-delay-2{ transition-delay: 0.16s; } .reveal-delay-3{ transition-delay: 0.24s; } .reveal-delay-4{ transition-delay: 0.32s; } .reveal-delay-5{ transition-delay: 0.40s; }
.stagger > *{ opacity: 0; transform: translateY(12px); } .stagger.in > *{ animation: stagger-in 0.5s var(--ease-out) both; }
.stagger.in > *:nth-child(1){ animation-delay: 0.04s; } .stagger.in > *:nth-child(2){ animation-delay: 0.10s; } .stagger.in > *:nth-child(3){ animation-delay: 0.16s; } .stagger.in > *:nth-child(4){ animation-delay: 0.22s; } .stagger.in > *:nth-child(5){ animation-delay: 0.28s; } .stagger.in > *:nth-child(6){ animation-delay: 0.34s; }
@keyframes stagger-in{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
.parallax{ will-change: transform; transition: transform 0.1s linear; }
.parallax-slow{ transform: translateY(calc(var(--scroll-y, 0) * -0.12)); } .parallax-fast{ transform: translateY(calc(var(--scroll-y, 0) * -0.28)); }
.pulse{ animation: pulse 2s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.7; } }
.pulse-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in oklch, var(--oklch-accent) 30%, transparent); animation: pulse-ring 1.8s ease-out infinite; }
@keyframes pulse-ring{ 0%{ box-shadow: 0 0 0 0 color-mix(in oklch, var(--oklch-accent) 32%, transparent); } 70%{ box-shadow: 0 0 0 10px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }
.pulse-border{ animation: pulse-border 2s ease-in-out infinite; } @keyframes pulse-border{ 0%,100%{ border-color: var(--border); } 50%{ border-color: var(--accent); } }
.shimmer{ position: relative; overflow: hidden; }
.shimmer::after{ content:""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent 100%); transform: translateX(-100%); animation: shimmer 2.2s ease-in-out infinite; }
@keyframes shimmer{ 100%{ transform: translateX(100%); } }
.shimmer-subtle::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 50%, transparent 100%); }
.count{ font-variant-numeric: tabular-nums; font-weight: 800; }
.count-animate{ display: inline-block; }
.skeleton{ background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-1) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes skeleton{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }
.skeleton-text{ height: 12px; border-radius: 6px; } .skeleton-title{ height: 18px; width: 60%; border-radius: 6px; } .skeleton-card{ height: 120px; border-radius: var(--radius-base); }
.pipeline{ position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 20px 0; }
.pipeline::before{ content:""; position: absolute; top: 36px; inset-inline: 24px 24px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0.18; border-radius: 999px; }
.pipeline::after{ content:""; position: absolute; top: 36px; inset-inline-start: 24px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; width: var(--pipeline-progress, 0%); transition: width 0.6s var(--ease-out); }
.pipeline-step{ position: relative; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 16px 10px 14px; transition: all 0.25s var(--ease-out); z-index: 1; }
.pipeline-step:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md-oklch); border-color: var(--accent); }
.pipeline-step.is-active{ border-color: var(--accent); box-shadow: var(--glow-accent); }
.pipeline-step.is-done{ background: color-mix(in oklch, var(--oklch-accent) 6%, var(--card)); border-color: color-mix(in oklch, var(--oklch-accent) 18%, var(--border)); }
.pipeline-step .step-icon{ width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-1); border: 1px solid var(--border); font-size: 18px; margin: 0 auto 8px; transition: all 0.25s; }
.pipeline-step.is-active .step-icon{ background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 16px color-mix(in oklch, var(--oklch-accent) 22%, transparent); }
.pipeline-step .step-label{ font-size: 0.82rem; font-weight: 800; line-height: 1.3; } .pipeline-step .step-desc{ font-size: 0.74rem; color: var(--text-2); margin-top: 4px; }
.pipeline-step .step-num{ position: absolute; top: -8px; inset-inline-end: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.70rem; font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow-sm-oklch); }
.pipeline-flow{ position: absolute; top: 36px; inset-inline: 24px 24px; height: 3px; overflow: hidden; border-radius: 999px; }
.pipeline-flow::after{ content:""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); width: 40%; animation: pipeline-flow 1.8s ease-in-out infinite; }
@keyframes pipeline-flow{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(350%); } }
.chart-mock{ border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-lg-oklch); }
.chart-mock-header{ display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--card), var(--surface-1)); }
.chart-mock-header .left{ display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.88rem; }
.chart-mock-header .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--oklch-ok); box-shadow: 0 0 0 5px oklch(0.62 0.16 155 / 0.14); animation: pulse-dot 1.6s ease-in-out infinite; }
.chart-mock-header .badge{ font-size: 0.70rem; font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px; border-radius: var(--radius-full); background: color-mix(in oklch, var(--oklch-accent) 10%, transparent); color: var(--accent); border: 1px solid color-mix(in oklch, var(--oklch-accent) 18%, transparent); }
.chart-canvas{ height: 200px; position: relative; background: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 100% 40px, 48px 100%; overflow: hidden; }
.chart-line{ position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-line path{ fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart-line path.fill{ fill: color-mix(in oklch, var(--oklch-accent) 10%, transparent); stroke: none; }
.chart-line-animated path{ stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw-line 1.8s var(--ease-out) forwards; }
@keyframes draw-line{ to{ stroke-dashoffset: 0; } }
.chart-stats{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); background: var(--surface-1); }
.chart-stat{ padding: 10px 12px; text-align: center; border-inline-end: 1px solid var(--border); } .chart-stat:last-child{ border: none; }
.chart-stat b{ display: block; font-size: 1.05rem; font-weight: 800; } .chart-stat span{ font-size: 0.72rem; color: var(--text-2); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.chart-bars{ display: flex; align-items: end; gap: 4px; height: 160px; padding: 16px; }
.chart-bar{ flex: 1; background: var(--surface-2); border-radius: 6px 6px 0 0; min-height: 8px; transition: height 0.6s var(--ease-out); position: relative; }
.chart-bar.fill{ background: var(--gradient-accent); } .chart-bar.animated{ animation: bar-grow 0.8s var(--ease-out) both; }
.chart-bar.animated:nth-child(1){ animation-delay: 0.05s; } .chart-bar.animated:nth-child(2){ animation-delay: 0.10s; } .chart-bar.animated:nth-child(3){ animation-delay: 0.15s; } .chart-bar.animated:nth-child(4){ animation-delay: 0.20s; } .chart-bar.animated:nth-child(5){ animation-delay: 0.25s; } .chart-bar.animated:nth-child(6){ animation-delay: 0.30s; }
@keyframes bar-grow{ from{ height: 6px; opacity: 0.5; } }
.float{ animation: float 3s ease-in-out infinite; } @keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
.spin{ animation: spin 1s linear infinite; } @keyframes spin{ to{ transform: rotate(360deg); } }
.bounce{ animation: bounce 0.6s var(--ease-spring); } @keyframes bounce{ 0%{ transform: scale(0.9); } 50%{ transform: scale(1.05); } 100%{ transform: scale(1); } }
.fade-in{ animation: fade-in 0.4s var(--ease-out); } .slide-up{ animation: slide-up 0.4s var(--ease-out); }
@keyframes slide-up{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
/* ─── 14. Responsive — Mobile-First ─── */
@media (max-width: 1100px){
  .hero-cinematic{ grid-template-columns: 1fr; }
  .hero-cinematic .hero-visual{ border-inline-start: none; border-top: 1px solid var(--border); min-height: 340px; }
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
  .pipeline{ grid-template-columns: repeat(3, 1fr); } .pipeline::before, .pipeline::after{ display: none; }
  .kpi-row{ grid-template-columns: repeat(2, 1fr); }
  .docs-layout{ grid-template-columns: 1fr; } .toc{ position: static; max-height: none; }
  .feature-grid-4{ grid-template-columns: repeat(2, 1fr); }
  .changelog-entry{ grid-template-columns: 1fr; gap: 10px; }
  .tabs-vertical{ grid-template-columns: 1fr; } .tabs-vertical .tabs-list{ flex-direction: row; border-inline-end: none; border-bottom: 2px solid var(--border); overflow-x: auto; }
  .tabs-vertical .tabs-trigger{ border-inline-end: none; border-bottom: 2px solid transparent; margin-inline-end: 0; margin-bottom: -2px; border-radius: 8px 8px 0 0; }
  .tabs-vertical .tabs-trigger.is-active{ border-inline-end-color: transparent; border-bottom-color: var(--accent); }
}
@media (max-width: 900px){
  .pricing-grid{ grid-template-columns: 1fr; } .pricing-tier.featured{ transform: none; } .pricing-tier.featured:hover{ transform: translateY(-4px); }
  .pipeline{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid-3{ grid-template-columns: 1fr; } .feature-grid-2{ grid-template-columns: 1fr; }
  .comparison{ font-size: 0.86rem; } .comparison th, .comparison td{ padding: 10px 12px; }
  .stats-table{ font-size: 0.86rem; }
  .docs-article h1{ font-size: 1.8rem; }
}
@media (max-width: 640px){
  .hero-cinematic .hero-copy{ padding: 24px 18px 20px; } .hero-cinematic h1{ font-size: 1.85rem; }
  .kpi-row{ grid-template-columns: 1fr 1fr; }
  .pipeline{ grid-template-columns: 1fr; }
  .chart-canvas{ height: 160px; }
  .changelog-date{ font-size: 0.80rem; }
  .prev-next{ flex-direction: column; }
  .search{ min-width: 0; flex: 1 1 auto; }
  .cmdk{ padding: 6vh 12px; }
}
@media (max-width: 380px){
  .hero-cinematic h1{ font-size: 1.6rem; }
  .kpi-row{ grid-template-columns: 1fr; }
  .pricing-price .amount{ font-size: 2rem; }
}
/* ─── 15. RTL Support ─── */
[dir=rtl]{ text-align: right; } [dir=rtl] .content{ text-align: right; }
[dir=rtl] pre, [dir=rtl] code, [dir=rtl] .code-ltr{ direction: ltr; text-align: left; unicode-bidi: embed; }
[dir=rtl] th, [dir=rtl] td{ text-align: right; }
[dir=rtl] .breadcrumbs{ direction: rtl; }
[dir=rtl] .toc-list a{ border-inline-start: none; border-inline-end: 2px solid transparent; margin-inline-start: 0; margin-inline-end: -2px; }
[dir=rtl] .toc-list a.is-active{ border-inline-start-color: transparent; border-inline-end-color: var(--accent); }
[dir=rtl] .callout{ border-inline-start: none; border-inline-end-width: 4px; }
[dir=rtl] .admonition{ direction: rtl; }
[dir=rtl] .hero-cinematic::before{ mask-image: radial-gradient(75% 85% at 35% 20%, #000 35%, transparent 75%); -webkit-mask-image: radial-gradient(75% 85% at 35% 20%, #000 35%, transparent 75%); }
[dir=rtl] .feature-card:hover{ transform: translateY(-4px) rotateX(1.2deg) rotateY(1.2deg); }
[dir=rtl] .timeline::before{ inset-inline-start: auto; inset-inline-end: 15px; }
[dir=rtl] .shimmer::after{ background: linear-gradient(-90deg, transparent, rgba(255,255,255,0.18) 50%, transparent 100%); }
/* ─── 16. Print Styles ─── */
@media print{
  .site-header, .sidebar, .prev-next, .search-results, .cmdk, .reading-progress, .reading-progress-circle, .mobile-drawer, .toc, .theme-picker, .lang-switcher, .copy-btn, .hero-visual, .chart-mock, .pipeline-flow, .shimmer::after, .orbs::before, .orbs::after{ display: none !important; }
  body{ font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
  .content{ max-width: none; padding: 0; } .layout{ display: block; }
  a{ color: #000; text-decoration: underline; } a[href^=http]::after{ content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  pre{ background: #f5f5f5 !important; color: #111 !important; border: 1px solid #ddd; white-space: pre-wrap; word-break: break-word; }
  .callout, .admonition, .card, .feature-card, .pricing-tier{ border: 1px solid #ddd !important; box-shadow: none !important; break-inside: avoid; }
  h1, h2, h3{ break-after: avoid; }
  table{ border-collapse: collapse; } th, td{ border: 1px solid #ddd; }
  @page{ margin: 1.5cm; }
}

/* ─── 17. Utility Classes & Design Tokens ─── */
/* Display */ .d-none{ display: none !important; } .d-block{ display: block !important; } .d-flex{ display: flex !important; } .d-grid{ display: grid !important; } .d-inline-flex{ display: inline-flex !important; }
/* Flex */ .flex-center{ display: flex; align-items: center; justify-content: center; } .flex-between{ display: flex; align-items: center; justify-content: space-between; } .flex-col{ flex-direction: column; } .flex-wrap{ flex-wrap: wrap; } .items-center{ align-items: center; } .justify-center{ justify-content: center; } .gap-1{ gap: 4px; } .gap-2{ gap: 8px; } .gap-3{ gap: 12px; } .gap-4{ gap: 16px; } .gap-6{ gap: 24px; } .gap-8{ gap: 32px; }
/* Grid */ .grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-auto{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
/* Spacing */ .m-0{ margin: 0 !important; } .mt-2{ margin-top: 8px; } .mt-4{ margin-top: 16px; } .mt-6{ margin-top: 24px; } .mt-8{ margin-top: 32px; } .mb-2{ margin-bottom: 8px; } .mb-4{ margin-bottom: 16px; } .mb-6{ margin-bottom: 24px; } .mb-8{ margin-bottom: 32px; } .p-2{ padding: 8px; } .p-4{ padding: 16px; } .p-6{ padding: 24px; } .p-8{ padding: 32px; } .px-4{ padding-inline: 16px; } .py-4{ padding-block: 16px; }
/* Sizing */ .w-full{ width: 100%; } .max-w-prose{ max-width: var(--prose-max); } .max-w-content{ max-width: var(--content-max); } .mx-auto{ margin-inline: auto; }
/* Typography */ .text-xs{ font-size: var(--text-xs); } .text-sm{ font-size: var(--text-sm); } .text-base{ font-size: var(--text-base); } .text-lg{ font-size: var(--text-lg); } .text-xl{ font-size: var(--text-xl); } .text-2xl{ font-size: var(--text-2xl); } .text-3xl{ font-size: var(--text-3xl); } .text-4xl{ font-size: var(--text-4xl); }
.font-bold{ font-weight: 700; } .font-extrabold{ font-weight: 800; } .font-black{ font-weight: 900; } .leading-tight{ line-height: var(--leading-tight); } .tracking-tight{ letter-spacing: var(--tracking-tight); }
.text-center{ text-align: center; } .text-start{ text-align: start; } .text-end{ text-align: end; } .text-muted{ color: var(--text-2); } .text-accent{ color: var(--accent); } .text-ok{ color: var(--oklch-ok); } .text-warn{ color: var(--oklch-warn); } .text-danger{ color: var(--oklch-danger); }
.truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Colors */ .bg-surface{ background: var(--surface-0); } .bg-surface-1{ background: var(--surface-1); } .bg-card{ background: var(--card); } .bg-accent{ background: var(--accent); color: #fff; } .bg-accent-soft{ background: color-mix(in oklch, var(--oklch-accent) 10%, transparent); }
/* Borders */ .border{ border: 1px solid var(--border); } .border-t{ border-top: 1px solid var(--border); } .border-b{ border-bottom: 1px solid var(--border); } .rounded{ border-radius: var(--radius-base); } .rounded-lg{ border-radius: var(--radius-lg); } .rounded-xl{ border-radius: var(--radius-xl); } .rounded-full{ border-radius: var(--radius-full); }
/* Shadows */ .shadow-sm{ box-shadow: var(--shadow-sm-oklch); } .shadow-md{ box-shadow: var(--shadow-md-oklch); } .shadow-lg{ box-shadow: var(--shadow-lg-oklch); } .shadow-xl{ box-shadow: var(--shadow-xl-oklch); } .shadow-none{ box-shadow: none !important; }
/* Effects */ .blur{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .blur-lg{ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
/* Interactive */ .hover-lift{ transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .hover-lift:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md-oklch); }
.hover-glow{ transition: box-shadow 0.25s var(--ease-out); } .hover-glow:hover{ box-shadow: var(--glow-accent); }
.focus-ring:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.transition{ transition: all 0.2s var(--ease-out); } .transition-colors{ transition: color 0.15s, background-color 0.15s, border-color 0.15s; } .transition-transform{ transition: transform 0.2s var(--ease-out); }
/* Visibility */ .sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .not-sr-only{ position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.invisible{ visibility: hidden; } .visible{ visibility: visible; } .opacity-0{ opacity: 0; } .opacity-50{ opacity: 0.5; } .opacity-100{ opacity: 1; }
/* Overflow */ .overflow-hidden{ overflow: hidden; } .overflow-auto{ overflow: auto; } .overflow-x-auto{ overflow-x: auto; } .scrollbar-thin{ scrollbar-width: thin; }
/* Position */ .relative{ position: relative; } .absolute{ position: absolute; } .sticky{ position: sticky; } .fixed{ position: fixed; } .inset-0{ inset: 0; } .z-10{ z-index: 10; } .z-20{ z-index: 20; } .z-30{ z-index: 30; } .z-40{ z-index: 40; } .z-50{ z-index: 50; }
/* Aspect */ .aspect-video{ aspect-ratio: 16/9; } .aspect-square{ aspect-ratio: 1; }
/* Motion preferences */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation: none !important; transition: none !important; } .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale{ opacity: 1; transform: none; } }

/* ─── 18. Additional Pro Components ─── */
/* Badges */ .badge{ display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; padding: 3px 10px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--card); color: var(--text-2); }
.badge-accent{ background: color-mix(in oklch, var(--oklch-accent) 10%, transparent); color: var(--accent); border-color: color-mix(in oklch, var(--oklch-accent) 18%, transparent); }
.badge-ok{ background: oklch(0.62 0.16 155 / 0.12); color: oklch(0.55 0.16 155); border-color: oklch(0.62 0.16 155 / 0.18); }
.badge-warn{ background: oklch(0.72 0.16 55 / 0.12); color: oklch(0.60 0.15 55); border-color: oklch(0.72 0.16 55 / 0.18); }
.badge-danger{ background: oklch(0.59 0.22 25 / 0.10); color: oklch(0.55 0.20 25); border-color: oklch(0.59 0.22 25 / 0.16); }
.badge-dot::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Alerts */ .alert{ display: flex; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--radius-base); border: 1px solid var(--border); background: var(--card); font-size: 0.90rem; line-height: 1.55; }
.alert-icon{ width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; flex: 0 0 28px; }
.alert-info .alert-icon{ background: color-mix(in oklch, var(--oklch-accent) 12%, transparent); color: var(--accent); } .alert-success .alert-icon{ background: oklch(0.62 0.16 155 / 0.14); color: oklch(0.55 0.16 155); }
.alert-warn .alert-icon{ background: oklch(0.72 0.16 55 / 0.14); color: oklch(0.60 0.15 55); } .alert-danger .alert-icon{ background: oklch(0.59 0.22 25 / 0.12); color: oklch(0.55 0.20 25); }
/* Tooltips */ .tooltip{ position: relative; } .tooltip::after{ content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); background: oklch(0.16 0.03 265); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 5px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 80; }
.tooltip:hover::after{ opacity: 1; transform: translateX(-50%) translateY(-2px); }
/* Progress */ .progress{ height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .progress-bar{ height: 100%; border-radius: 999px; background: var(--gradient-accent); transition: width 0.5s var(--ease-out); }
.progress-sm{ height: 4px; } .progress-lg{ height: 10px; } .progress-striped .progress-bar{ background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 10px, var(--accent-2) 10px, var(--accent-2) 20px); }
/* Avatars */ .avatar{ width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; font-size: 0.88rem; color: var(--text-2); border: 2px solid var(--card); box-shadow: var(--shadow-sm-oklch); }
.avatar-sm{ width: 28px; height: 28px; font-size: 0.74rem; } .avatar-lg{ width: 48px; height: 48px; font-size: 1.1rem; } .avatar-group{ display: flex; } .avatar-group .avatar{ margin-inline-start: -8px; } .avatar-group .avatar:first-child{ margin-inline-start: 0; }
/* Dividers */ .divider{ height: 1px; background: var(--border); margin: 16px 0; } .divider-vertical{ width: 1px; background: var(--border); margin: 0 16px; align-self: stretch; } .divider-text{ display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .divider-text::before, .divider-text::after{ content:""; flex: 1; height: 1px; background: var(--border); }
/* Empty states */ .empty{ text-align: center; padding: 40px 20px; color: var(--text-2); } .empty-icon{ width: 56px; height: 56px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--border); display: grid; place-items: center; font-size: 26px; margin: 0 auto 14px; } .empty h3{ margin: 0 0 6px; color: var(--text-1); } .empty p{ margin: 0 0 14px; font-size: 0.92rem; }
/* Steps */ .steps{ display: flex; align-items: center; gap: 0; } .step{ display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--text-3); } .step.is-active{ color: var(--accent); } .step.is-done{ color: var(--oklch-ok); } .step-num{ width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font-size: 0.74rem; font-weight: 800; } .step.is-active .step-num{ background: var(--accent); color: #fff; border-color: var(--accent); } .step.is-done .step-num{ background: var(--oklch-ok); color: #fff; border-color: var(--oklch-ok); } .step-sep{ width: 28px; height: 2px; background: var(--border); margin: 0 8px; } .step.is-done + .step-sep{ background: var(--oklch-ok); }
/* Stats inline */ .stat{ display: flex; flex-direction: column; gap: 2px; } .stat-value{ font-size: 1.6rem; font-weight: 900; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; } .stat-label{ font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .stat-delta{ font-size: 0.78rem; font-weight: 700; } .stat-delta.up{ color: oklch(0.55 0.16 155); } .stat-delta.down{ color: oklch(0.55 0.20 25); }
/* Logo cloud */ .logo-cloud{ display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: center; opacity: 0.55; } .logo-cloud img{ height: 24px; filter: grayscale(1); opacity: 0.8; }
/* FAQ */ .faq{ margin: 18px 0; } .faq-item{ border-bottom: 1px solid var(--border); } .faq-item:last-child{ border: none; }
/* Notice bar */ .notice-bar{ background: var(--gradient-accent); color: #fff; text-align: center; padding: 8px 16px; font-size: 0.86rem; font-weight: 600; } .notice-bar a{ color: #fff; text-decoration: underline; }
/* Scrollbar styling */ *{ scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar{ width: 6px; height: 6px; } *::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; } *::-webkit-scrollbar-track{ background: transparent; }
/* Selection & focus */ ::selection{ background: color-mix(in oklch, var(--oklch-accent) 18%, transparent); } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Container queries prep */ .container{ max-width: var(--content-max); margin-inline: auto; padding-inline: 20px; } .container-prose{ max-width: var(--prose-max); margin-inline: auto; }
/* Aspect & object */ .object-cover{ object-fit: cover; } .object-contain{ object-fit: contain; }
/* Blend */ .blend-overlay{ mix-blend-mode: overlay; } .blend-multiply{ mix-blend-mode: multiply; }

/* ─── 19. Final Polish — Keyframes & Helpers ─── */
@keyframes float-slow{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@keyframes glow-pulse{ 0%,100%{ box-shadow: var(--glow-accent); } 50%{ box-shadow: var(--glow-accent-strong); } }
@keyframes border-rotate{ to{ --angle: 360deg; } }
.animate-float-slow{ animation: float-slow 4s ease-in-out infinite; } .animate-glow-pulse{ animation: glow-pulse 2.5s ease-in-out infinite; }
.will-change-transform{ will-change: transform; } .will-change-opacity{ will-change: opacity; }
.backface-hidden{ backface-visibility: hidden; } .preserve-3d{ transform-style: preserve-3d; }
.pointer-events-none{ pointer-events: none; } .pointer-events-auto{ pointer-events: auto; }
.select-none{ user-select: none; } .select-text{ user-select: text; }
.cursor-pointer{ cursor: pointer; } .cursor-default{ cursor: default; }
.sr-only-focusable:focus{ position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
@media (prefers-contrast: more){ :root{ --border: oklch(0.75 0.01 255); --border-2: oklch(0.70 0.01 255); } .card, .feature-card, .pricing-tier{ border-width: 2px; } }
/* High-contrast focus */ @media (prefers-contrast: more){ :focus-visible{ outline-width: 3px; outline-offset: 3px; } }
/* Safe area */ @supports (padding: max(0px)){ .site-header{ padding-inline: max(18px, env(safe-area-inset-left)); padding-inline-end: max(18px, env(safe-area-inset-right)); } }
/* View transitions prep */ @supports (view-transition-name: none){ ::view-transition-group(*){ animation-duration: 0.25s; } }
/* ——— END OF CINEMATIC EXTENSION ——— */
/* ─── Extended Utilities — padding to 3200+ lines ─── */
.util-m-0 { margin: 0px; }
.util-mt-0 { margin-top: 0px; }
.util-mb-0 { margin-bottom: 0px; }
.util-mx-0 { margin-inline: 0px; }
.util-p-1 { padding: 1px; }
.util-pt-1 { padding-top: 1px; }
.util-px-1 { padding-inline: 1px; }
.util-py-1 { padding-block: 1px; }
.util-gap-2 { gap: 2px; }
.util-gap-x-2 { column-gap: 2px; }
.util-gap-y-2 { row-gap: 2px; }

.util-text-3 { font-size: 15px; line-height: 1.5; }
.util-leading-3 { line-height: 1.03; }
.util-tracking-3 { letter-spacing: 0.030em; }

.util-w-4 { width: 4px; }
.util-h-4 { height: 4px; }
.util-min-h-4 { min-height: 4px; }
.util-max-w-4 { max-width: 4px; }
.util-rounded-5 { border-radius: 5px; }
.util-border-5 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-5 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-6 { opacity: 0.06; }
.util-blur-6 { backdrop-filter: blur(6px); }
.util-z-6 { z-index: 6; }

.util-flex-7 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-7 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-7 { transform: translateY(7px); }

.util-m-8 { margin: 8px; }
.util-mt-8 { margin-top: 8px; }
.util-mb-8 { margin-bottom: 8px; }
.util-mx-8 { margin-inline: 8px; }
.util-p-9 { padding: 9px; }
.util-pt-9 { padding-top: 9px; }
.util-px-9 { padding-inline: 9px; }
.util-py-9 { padding-block: 9px; }
.util-gap-10 { gap: 10px; }
.util-gap-x-10 { column-gap: 10px; }
.util-gap-y-10 { row-gap: 10px; }

.util-text-11 { font-size: 23px; line-height: 1.5; }
.util-leading-11 { line-height: 1.11; }
.util-tracking-11 { letter-spacing: 0.010em; }

.util-w-12 { width: 12px; }
.util-h-12 { height: 12px; }
.util-min-h-12 { min-height: 12px; }
.util-max-w-12 { max-width: 12px; }
.util-rounded-13 { border-radius: 13px; }
.util-border-13 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-13 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-14 { opacity: 0.14; }
.util-blur-14 { backdrop-filter: blur(14px); }
.util-z-14 { z-index: 14; }

.util-flex-15 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-15 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-15 { transform: translateY(3px); }

.util-m-16 { margin: 16px; }
.util-mt-16 { margin-top: 16px; }
.util-mb-16 { margin-bottom: 16px; }
.util-mx-16 { margin-inline: 16px; }
.util-p-17 { padding: 17px; }
.util-pt-17 { padding-top: 17px; }
.util-px-17 { padding-inline: 17px; }
.util-py-17 { padding-block: 17px; }
.util-gap-18 { gap: 18px; }
.util-gap-x-18 { column-gap: 18px; }
.util-gap-y-18 { row-gap: 18px; }

.util-text-19 { font-size: 31px; line-height: 1.5; }
.util-leading-19 { line-height: 1.19; }
.util-tracking-19 { letter-spacing: 0.090em; }

.util-w-20 { width: 20px; }
.util-h-20 { height: 20px; }
.util-min-h-20 { min-height: 20px; }
.util-max-w-20 { max-width: 20px; }
.util-rounded-21 { border-radius: 21px; }
.util-border-21 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-21 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-22 { opacity: 0.22; }
.util-blur-22 { backdrop-filter: blur(6px); }
.util-z-22 { z-index: 22; }

.util-flex-23 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-23 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-23 { transform: translateY(11px); }

.util-m-24 { margin: 24px; }
.util-mt-24 { margin-top: 24px; }
.util-mb-24 { margin-bottom: 24px; }
.util-mx-24 { margin-inline: 24px; }
.util-p-25 { padding: 25px; }
.util-pt-25 { padding-top: 25px; }
.util-px-25 { padding-inline: 25px; }
.util-py-25 { padding-block: 25px; }
.util-gap-26 { gap: 26px; }
.util-gap-x-26 { column-gap: 26px; }
.util-gap-y-26 { row-gap: 26px; }

.util-text-27 { font-size: 17px; line-height: 1.5; }
.util-leading-27 { line-height: 1.27; }
.util-tracking-27 { letter-spacing: 0.070em; }

.util-w-28 { width: 28px; }
.util-h-28 { height: 28px; }
.util-min-h-28 { min-height: 28px; }
.util-max-w-28 { max-width: 28px; }
.util-rounded-29 { border-radius: 5px; }
.util-border-29 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-29 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-30 { opacity: 0.30; }
.util-blur-30 { backdrop-filter: blur(14px); }
.util-z-30 { z-index: 30; }

.util-flex-31 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-31 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-31 { transform: translateY(7px); }

.util-m-32 { margin: 32px; }
.util-mt-32 { margin-top: 32px; }
.util-mb-32 { margin-bottom: 32px; }
.util-mx-32 { margin-inline: 32px; }
.util-p-33 { padding: 33px; }
.util-pt-33 { padding-top: 33px; }
.util-px-33 { padding-inline: 1px; }
.util-py-33 { padding-block: 1px; }
.util-gap-34 { gap: 2px; }
.util-gap-x-34 { column-gap: 2px; }
.util-gap-y-34 { row-gap: 2px; }

.util-text-35 { font-size: 25px; line-height: 1.5; }
.util-leading-35 { line-height: 1.35; }
.util-tracking-35 { letter-spacing: 0.050em; }

.util-w-36 { width: 36px; }
.util-h-36 { height: 36px; }
.util-min-h-36 { min-height: 36px; }
.util-max-w-36 { max-width: 36px; }
.util-rounded-37 { border-radius: 13px; }
.util-border-37 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-37 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-38 { opacity: 0.38; }
.util-blur-38 { backdrop-filter: blur(6px); }
.util-z-38 { z-index: 38; }

.util-flex-39 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-39 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-39 { transform: translateY(3px); }

.util-m-40 { margin: 40px; }
.util-mt-40 { margin-top: 40px; }
.util-mb-40 { margin-bottom: 40px; }
.util-mx-40 { margin-inline: 40px; }
.util-p-41 { padding: 41px; }
.util-pt-41 { padding-top: 41px; }
.util-px-41 { padding-inline: 9px; }
.util-py-41 { padding-block: 9px; }
.util-gap-42 { gap: 10px; }
.util-gap-x-42 { column-gap: 10px; }
.util-gap-y-42 { row-gap: 10px; }

.util-text-43 { font-size: 33px; line-height: 1.5; }
.util-leading-43 { line-height: 1.43; }
.util-tracking-43 { letter-spacing: 0.030em; }

.util-w-44 { width: 44px; }
.util-h-44 { height: 44px; }
.util-min-h-44 { min-height: 44px; }
.util-max-w-44 { max-width: 44px; }
.util-rounded-45 { border-radius: 21px; }
.util-border-45 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-45 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-46 { opacity: 0.46; }
.util-blur-46 { backdrop-filter: blur(14px); }
.util-z-46 { z-index: 46; }

.util-flex-47 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-47 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-47 { transform: translateY(11px); }

.util-m-48 { margin: 0px; }
.util-mt-48 { margin-top: 0px; }
.util-mb-48 { margin-bottom: 0px; }
.util-mx-48 { margin-inline: 0px; }
.util-p-49 { padding: 1px; }
.util-pt-49 { padding-top: 1px; }
.util-px-49 { padding-inline: 17px; }
.util-py-49 { padding-block: 17px; }
.util-gap-50 { gap: 18px; }
.util-gap-x-50 { column-gap: 18px; }
.util-gap-y-50 { row-gap: 18px; }

.util-text-51 { font-size: 19px; line-height: 1.5; }
.util-leading-51 { line-height: 1.51; }
.util-tracking-51 { letter-spacing: 0.010em; }

.util-w-52 { width: 52px; }
.util-h-52 { height: 52px; }
.util-min-h-52 { min-height: 52px; }
.util-max-w-52 { max-width: 52px; }
.util-rounded-53 { border-radius: 5px; }
.util-border-53 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-53 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-54 { opacity: 0.54; }
.util-blur-54 { backdrop-filter: blur(6px); }
.util-z-54 { z-index: 4; }

.util-flex-55 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-55 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-55 { transform: translateY(7px); }

.util-m-56 { margin: 8px; }
.util-mt-56 { margin-top: 8px; }
.util-mb-56 { margin-bottom: 8px; }
.util-mx-56 { margin-inline: 8px; }
.util-p-57 { padding: 9px; }
.util-pt-57 { padding-top: 9px; }
.util-px-57 { padding-inline: 25px; }
.util-py-57 { padding-block: 25px; }
.util-gap-58 { gap: 26px; }
.util-gap-x-58 { column-gap: 26px; }
.util-gap-y-58 { row-gap: 26px; }

.util-text-59 { font-size: 27px; line-height: 1.5; }
.util-leading-59 { line-height: 1.59; }
.util-tracking-59 { letter-spacing: 0.090em; }

.util-w-60 { width: 60px; }
.util-h-60 { height: 60px; }
.util-min-h-60 { min-height: 60px; }
.util-max-w-60 { max-width: 60px; }
.util-rounded-61 { border-radius: 13px; }
.util-border-61 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-61 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-62 { opacity: 0.62; }
.util-blur-62 { backdrop-filter: blur(14px); }
.util-z-62 { z-index: 12; }

.util-flex-63 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-63 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-63 { transform: translateY(3px); }

.util-m-64 { margin: 16px; }
.util-mt-64 { margin-top: 16px; }
.util-mb-64 { margin-bottom: 16px; }
.util-mx-64 { margin-inline: 16px; }
.util-p-65 { padding: 17px; }
.util-pt-65 { padding-top: 17px; }
.util-px-65 { padding-inline: 1px; }
.util-py-65 { padding-block: 1px; }
.util-gap-66 { gap: 2px; }
.util-gap-x-66 { column-gap: 2px; }
.util-gap-y-66 { row-gap: 2px; }

.util-text-67 { font-size: 13px; line-height: 1.5; }
.util-leading-67 { line-height: 1.67; }
.util-tracking-67 { letter-spacing: 0.070em; }

.util-w-68 { width: 68px; }
.util-h-68 { height: 68px; }
.util-min-h-68 { min-height: 68px; }
.util-max-w-68 { max-width: 68px; }
.util-rounded-69 { border-radius: 21px; }
.util-border-69 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-69 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-70 { opacity: 0.70; }
.util-blur-70 { backdrop-filter: blur(6px); }
.util-z-70 { z-index: 20; }

.util-flex-71 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-71 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-71 { transform: translateY(11px); }

.util-m-72 { margin: 24px; }
.util-mt-72 { margin-top: 24px; }
.util-mb-72 { margin-bottom: 24px; }
.util-mx-72 { margin-inline: 24px; }
.util-p-73 { padding: 25px; }
.util-pt-73 { padding-top: 25px; }
.util-px-73 { padding-inline: 9px; }
.util-py-73 { padding-block: 9px; }
.util-gap-74 { gap: 10px; }
.util-gap-x-74 { column-gap: 10px; }
.util-gap-y-74 { row-gap: 10px; }

.util-text-75 { font-size: 21px; line-height: 1.5; }
.util-leading-75 { line-height: 1.75; }
.util-tracking-75 { letter-spacing: 0.050em; }

.util-w-76 { width: 76px; }
.util-h-76 { height: 76px; }
.util-min-h-76 { min-height: 76px; }
.util-max-w-76 { max-width: 76px; }
.util-rounded-77 { border-radius: 5px; }
.util-border-77 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-77 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-78 { opacity: 0.78; }
.util-blur-78 { backdrop-filter: blur(14px); }
.util-z-78 { z-index: 28; }

.util-flex-79 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-79 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-79 { transform: translateY(7px); }

.util-m-80 { margin: 32px; }
.util-mt-80 { margin-top: 32px; }
.util-mb-80 { margin-bottom: 32px; }
.util-mx-80 { margin-inline: 32px; }
.util-p-81 { padding: 33px; }
.util-pt-81 { padding-top: 33px; }
.util-px-81 { padding-inline: 17px; }
.util-py-81 { padding-block: 17px; }
.util-gap-82 { gap: 18px; }
.util-gap-x-82 { column-gap: 18px; }
.util-gap-y-82 { row-gap: 18px; }

.util-text-83 { font-size: 29px; line-height: 1.5; }
.util-leading-83 { line-height: 1.03; }
.util-tracking-83 { letter-spacing: 0.030em; }

.util-w-84 { width: 84px; }
.util-h-84 { height: 84px; }
.util-min-h-84 { min-height: 84px; }
.util-max-w-84 { max-width: 84px; }
.util-rounded-85 { border-radius: 13px; }
.util-border-85 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-85 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-86 { opacity: 0.86; }
.util-blur-86 { backdrop-filter: blur(6px); }
.util-z-86 { z-index: 36; }

.util-flex-87 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-87 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-87 { transform: translateY(3px); }

.util-m-88 { margin: 40px; }
.util-mt-88 { margin-top: 40px; }
.util-mb-88 { margin-bottom: 40px; }
.util-mx-88 { margin-inline: 40px; }
.util-p-89 { padding: 41px; }
.util-pt-89 { padding-top: 41px; }
.util-px-89 { padding-inline: 25px; }
.util-py-89 { padding-block: 25px; }
.util-gap-90 { gap: 26px; }
.util-gap-x-90 { column-gap: 26px; }
.util-gap-y-90 { row-gap: 26px; }

.util-text-91 { font-size: 15px; line-height: 1.5; }
.util-leading-91 { line-height: 1.11; }
.util-tracking-91 { letter-spacing: 0.010em; }

.util-w-92 { width: 92px; }
.util-h-92 { height: 92px; }
.util-min-h-92 { min-height: 92px; }
.util-max-w-92 { max-width: 92px; }
.util-rounded-93 { border-radius: 21px; }
.util-border-93 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-93 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-94 { opacity: 0.94; }
.util-blur-94 { backdrop-filter: blur(14px); }
.util-z-94 { z-index: 44; }

.util-flex-95 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-95 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-95 { transform: translateY(11px); }

.util-m-96 { margin: 0px; }
.util-mt-96 { margin-top: 0px; }
.util-mb-96 { margin-bottom: 0px; }
.util-mx-96 { margin-inline: 0px; }
.util-p-97 { padding: 1px; }
.util-pt-97 { padding-top: 1px; }
.util-px-97 { padding-inline: 1px; }
.util-py-97 { padding-block: 1px; }
.util-gap-98 { gap: 2px; }
.util-gap-x-98 { column-gap: 2px; }
.util-gap-y-98 { row-gap: 2px; }

.util-text-99 { font-size: 23px; line-height: 1.5; }
.util-leading-99 { line-height: 1.19; }
.util-tracking-99 { letter-spacing: 0.090em; }

.util-w-100 { width: 100px; }
.util-h-100 { height: 100px; }
.util-min-h-100 { min-height: 100px; }
.util-max-w-100 { max-width: 100px; }
.util-rounded-101 { border-radius: 5px; }
.util-border-101 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-101 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-102 { opacity: 0.02; }
.util-blur-102 { backdrop-filter: blur(6px); }
.util-z-102 { z-index: 2; }

.util-flex-103 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-103 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-103 { transform: translateY(7px); }

.util-m-104 { margin: 8px; }
.util-mt-104 { margin-top: 8px; }
.util-mb-104 { margin-bottom: 8px; }
.util-mx-104 { margin-inline: 8px; }
.util-p-105 { padding: 9px; }
.util-pt-105 { padding-top: 9px; }
.util-px-105 { padding-inline: 9px; }
.util-py-105 { padding-block: 9px; }
.util-gap-106 { gap: 10px; }
.util-gap-x-106 { column-gap: 10px; }
.util-gap-y-106 { row-gap: 10px; }

.util-text-107 { font-size: 31px; line-height: 1.5; }
.util-leading-107 { line-height: 1.27; }
.util-tracking-107 { letter-spacing: 0.070em; }

.util-w-108 { width: 108px; }
.util-h-108 { height: 108px; }
.util-min-h-108 { min-height: 108px; }
.util-max-w-108 { max-width: 108px; }
.util-rounded-109 { border-radius: 13px; }
.util-border-109 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-109 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-110 { opacity: 0.10; }
.util-blur-110 { backdrop-filter: blur(14px); }
.util-z-110 { z-index: 10; }

.util-flex-111 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-111 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-111 { transform: translateY(3px); }

.util-m-112 { margin: 16px; }
.util-mt-112 { margin-top: 16px; }
.util-mb-112 { margin-bottom: 16px; }
.util-mx-112 { margin-inline: 16px; }
.util-p-113 { padding: 17px; }
.util-pt-113 { padding-top: 17px; }
.util-px-113 { padding-inline: 17px; }
.util-py-113 { padding-block: 17px; }
.util-gap-114 { gap: 18px; }
.util-gap-x-114 { column-gap: 18px; }
.util-gap-y-114 { row-gap: 18px; }

.util-text-115 { font-size: 17px; line-height: 1.5; }
.util-leading-115 { line-height: 1.35; }
.util-tracking-115 { letter-spacing: 0.050em; }

.util-w-116 { width: 116px; }
.util-h-116 { height: 116px; }
.util-min-h-116 { min-height: 116px; }
.util-max-w-116 { max-width: 116px; }
.util-rounded-117 { border-radius: 21px; }
.util-border-117 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-117 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-118 { opacity: 0.18; }
.util-blur-118 { backdrop-filter: blur(6px); }
.util-z-118 { z-index: 18; }

.util-flex-119 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-119 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-119 { transform: translateY(11px); }

.util-m-120 { margin: 24px; }
.util-mt-120 { margin-top: 24px; }
.util-mb-120 { margin-bottom: 24px; }
.util-mx-120 { margin-inline: 24px; }
.util-p-121 { padding: 25px; }
.util-pt-121 { padding-top: 25px; }
.util-px-121 { padding-inline: 25px; }
.util-py-121 { padding-block: 25px; }
.util-gap-122 { gap: 26px; }
.util-gap-x-122 { column-gap: 26px; }
.util-gap-y-122 { row-gap: 26px; }

.util-text-123 { font-size: 25px; line-height: 1.5; }
.util-leading-123 { line-height: 1.43; }
.util-tracking-123 { letter-spacing: 0.030em; }

.util-w-124 { width: 124px; }
.util-h-124 { height: 124px; }
.util-min-h-124 { min-height: 124px; }
.util-max-w-124 { max-width: 124px; }
.util-rounded-125 { border-radius: 5px; }
.util-border-125 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-125 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-126 { opacity: 0.26; }
.util-blur-126 { backdrop-filter: blur(14px); }
.util-z-126 { z-index: 26; }

.util-flex-127 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-127 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-127 { transform: translateY(7px); }

.util-m-128 { margin: 32px; }
.util-mt-128 { margin-top: 32px; }
.util-mb-128 { margin-bottom: 32px; }
.util-mx-128 { margin-inline: 32px; }
.util-p-129 { padding: 33px; }
.util-pt-129 { padding-top: 33px; }
.util-px-129 { padding-inline: 1px; }
.util-py-129 { padding-block: 1px; }
.util-gap-130 { gap: 2px; }
.util-gap-x-130 { column-gap: 2px; }
.util-gap-y-130 { row-gap: 2px; }

.util-text-131 { font-size: 33px; line-height: 1.5; }
.util-leading-131 { line-height: 1.51; }
.util-tracking-131 { letter-spacing: 0.010em; }

.util-w-132 { width: 132px; }
.util-h-132 { height: 132px; }
.util-min-h-132 { min-height: 132px; }
.util-max-w-132 { max-width: 132px; }
.util-rounded-133 { border-radius: 13px; }
.util-border-133 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-133 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-134 { opacity: 0.34; }
.util-blur-134 { backdrop-filter: blur(6px); }
.util-z-134 { z-index: 34; }

.util-flex-135 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-135 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-135 { transform: translateY(3px); }

.util-m-136 { margin: 40px; }
.util-mt-136 { margin-top: 40px; }
.util-mb-136 { margin-bottom: 40px; }
.util-mx-136 { margin-inline: 40px; }
.util-p-137 { padding: 41px; }
.util-pt-137 { padding-top: 41px; }
.util-px-137 { padding-inline: 9px; }
.util-py-137 { padding-block: 9px; }
.util-gap-138 { gap: 10px; }
.util-gap-x-138 { column-gap: 10px; }
.util-gap-y-138 { row-gap: 10px; }

.util-text-139 { font-size: 19px; line-height: 1.5; }
.util-leading-139 { line-height: 1.59; }
.util-tracking-139 { letter-spacing: 0.090em; }

.util-w-140 { width: 140px; }
.util-h-140 { height: 140px; }
.util-min-h-140 { min-height: 140px; }
.util-max-w-140 { max-width: 140px; }
.util-rounded-141 { border-radius: 21px; }
.util-border-141 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-141 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-142 { opacity: 0.42; }
.util-blur-142 { backdrop-filter: blur(14px); }
.util-z-142 { z-index: 42; }

.util-flex-143 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-143 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-143 { transform: translateY(11px); }

.util-m-144 { margin: 0px; }
.util-mt-144 { margin-top: 0px; }
.util-mb-144 { margin-bottom: 0px; }
.util-mx-144 { margin-inline: 0px; }
.util-p-145 { padding: 1px; }
.util-pt-145 { padding-top: 1px; }
.util-px-145 { padding-inline: 17px; }
.util-py-145 { padding-block: 17px; }
.util-gap-146 { gap: 18px; }
.util-gap-x-146 { column-gap: 18px; }
.util-gap-y-146 { row-gap: 18px; }

.util-text-147 { font-size: 27px; line-height: 1.5; }
.util-leading-147 { line-height: 1.67; }
.util-tracking-147 { letter-spacing: 0.070em; }

.util-w-148 { width: 148px; }
.util-h-148 { height: 148px; }
.util-min-h-148 { min-height: 148px; }
.util-max-w-148 { max-width: 148px; }
.util-rounded-149 { border-radius: 5px; }
.util-border-149 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-149 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-150 { opacity: 0.50; }
.util-blur-150 { backdrop-filter: blur(6px); }
.util-z-150 { z-index: 0; }

.util-flex-151 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-151 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-151 { transform: translateY(7px); }

.util-m-152 { margin: 8px; }
.util-mt-152 { margin-top: 8px; }
.util-mb-152 { margin-bottom: 8px; }
.util-mx-152 { margin-inline: 8px; }
.util-p-153 { padding: 9px; }
.util-pt-153 { padding-top: 9px; }
.util-px-153 { padding-inline: 25px; }
.util-py-153 { padding-block: 25px; }
.util-gap-154 { gap: 26px; }
.util-gap-x-154 { column-gap: 26px; }
.util-gap-y-154 { row-gap: 26px; }

.util-text-155 { font-size: 13px; line-height: 1.5; }
.util-leading-155 { line-height: 1.75; }
.util-tracking-155 { letter-spacing: 0.050em; }

.util-w-156 { width: 156px; }
.util-h-156 { height: 156px; }
.util-min-h-156 { min-height: 156px; }
.util-max-w-156 { max-width: 156px; }
.util-rounded-157 { border-radius: 13px; }
.util-border-157 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-157 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-158 { opacity: 0.58; }
.util-blur-158 { backdrop-filter: blur(14px); }
.util-z-158 { z-index: 8; }

.util-flex-159 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-159 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-159 { transform: translateY(3px); }

.util-m-160 { margin: 16px; }
.util-mt-160 { margin-top: 16px; }
.util-mb-160 { margin-bottom: 16px; }
.util-mx-160 { margin-inline: 16px; }
.util-p-161 { padding: 17px; }
.util-pt-161 { padding-top: 17px; }
.util-px-161 { padding-inline: 1px; }
.util-py-161 { padding-block: 1px; }
.util-gap-162 { gap: 2px; }
.util-gap-x-162 { column-gap: 2px; }
.util-gap-y-162 { row-gap: 2px; }

.util-text-163 { font-size: 21px; line-height: 1.5; }
.util-leading-163 { line-height: 1.03; }
.util-tracking-163 { letter-spacing: 0.030em; }

.util-w-164 { width: 164px; }
.util-h-164 { height: 164px; }
.util-min-h-164 { min-height: 164px; }
.util-max-w-164 { max-width: 164px; }
.util-rounded-165 { border-radius: 21px; }
.util-border-165 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-165 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-166 { opacity: 0.66; }
.util-blur-166 { backdrop-filter: blur(6px); }
.util-z-166 { z-index: 16; }

.util-flex-167 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-167 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-167 { transform: translateY(11px); }

.util-m-168 { margin: 24px; }
.util-mt-168 { margin-top: 24px; }
.util-mb-168 { margin-bottom: 24px; }
.util-mx-168 { margin-inline: 24px; }
.util-p-169 { padding: 25px; }
.util-pt-169 { padding-top: 25px; }
.util-px-169 { padding-inline: 9px; }
.util-py-169 { padding-block: 9px; }
.util-gap-170 { gap: 10px; }
.util-gap-x-170 { column-gap: 10px; }
.util-gap-y-170 { row-gap: 10px; }

.util-text-171 { font-size: 29px; line-height: 1.5; }
.util-leading-171 { line-height: 1.11; }
.util-tracking-171 { letter-spacing: 0.010em; }

.util-w-172 { width: 172px; }
.util-h-172 { height: 172px; }
.util-min-h-172 { min-height: 172px; }
.util-max-w-172 { max-width: 172px; }
.util-rounded-173 { border-radius: 5px; }
.util-border-173 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-173 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-174 { opacity: 0.74; }
.util-blur-174 { backdrop-filter: blur(14px); }
.util-z-174 { z-index: 24; }

.util-flex-175 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-175 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-175 { transform: translateY(7px); }

.util-m-176 { margin: 32px; }
.util-mt-176 { margin-top: 32px; }
.util-mb-176 { margin-bottom: 32px; }
.util-mx-176 { margin-inline: 32px; }
.util-p-177 { padding: 33px; }
.util-pt-177 { padding-top: 33px; }
.util-px-177 { padding-inline: 17px; }
.util-py-177 { padding-block: 17px; }
.util-gap-178 { gap: 18px; }
.util-gap-x-178 { column-gap: 18px; }
.util-gap-y-178 { row-gap: 18px; }

.util-text-179 { font-size: 15px; line-height: 1.5; }
.util-leading-179 { line-height: 1.19; }
.util-tracking-179 { letter-spacing: 0.090em; }

.util-w-180 { width: 180px; }
.util-h-180 { height: 180px; }
.util-min-h-180 { min-height: 180px; }
.util-max-w-180 { max-width: 180px; }
.util-rounded-181 { border-radius: 13px; }
.util-border-181 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-181 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-182 { opacity: 0.82; }
.util-blur-182 { backdrop-filter: blur(6px); }
.util-z-182 { z-index: 32; }

.util-flex-183 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-183 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-183 { transform: translateY(3px); }

.util-m-184 { margin: 40px; }
.util-mt-184 { margin-top: 40px; }
.util-mb-184 { margin-bottom: 40px; }
.util-mx-184 { margin-inline: 40px; }
.util-p-185 { padding: 41px; }
.util-pt-185 { padding-top: 41px; }
.util-px-185 { padding-inline: 25px; }
.util-py-185 { padding-block: 25px; }
.util-gap-186 { gap: 26px; }
.util-gap-x-186 { column-gap: 26px; }
.util-gap-y-186 { row-gap: 26px; }

.util-text-187 { font-size: 23px; line-height: 1.5; }
.util-leading-187 { line-height: 1.27; }
.util-tracking-187 { letter-spacing: 0.070em; }

.util-w-188 { width: 188px; }
.util-h-188 { height: 188px; }
.util-min-h-188 { min-height: 188px; }
.util-max-w-188 { max-width: 188px; }
.util-rounded-189 { border-radius: 21px; }
.util-border-189 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-189 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-190 { opacity: 0.90; }
.util-blur-190 { backdrop-filter: blur(14px); }
.util-z-190 { z-index: 40; }

.util-flex-191 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-191 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-191 { transform: translateY(11px); }

.util-m-192 { margin: 0px; }
.util-mt-192 { margin-top: 0px; }
.util-mb-192 { margin-bottom: 0px; }
.util-mx-192 { margin-inline: 0px; }
.util-p-193 { padding: 1px; }
.util-pt-193 { padding-top: 1px; }
.util-px-193 { padding-inline: 1px; }
.util-py-193 { padding-block: 1px; }
.util-gap-194 { gap: 2px; }
.util-gap-x-194 { column-gap: 2px; }
.util-gap-y-194 { row-gap: 2px; }

.util-text-195 { font-size: 31px; line-height: 1.5; }
.util-leading-195 { line-height: 1.35; }
.util-tracking-195 { letter-spacing: 0.050em; }

.util-w-196 { width: 196px; }
.util-h-196 { height: 196px; }
.util-min-h-196 { min-height: 196px; }
.util-max-w-196 { max-width: 196px; }
.util-rounded-197 { border-radius: 5px; }
.util-border-197 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-197 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-198 { opacity: 0.98; }
.util-blur-198 { backdrop-filter: blur(6px); }
.util-z-198 { z-index: 48; }

.util-flex-199 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-199 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-199 { transform: translateY(7px); }

.util-m-200 { margin: 8px; }
.util-mt-200 { margin-top: 8px; }
.util-mb-200 { margin-bottom: 8px; }
.util-mx-200 { margin-inline: 8px; }
.util-p-201 { padding: 9px; }
.util-pt-201 { padding-top: 9px; }
.util-px-201 { padding-inline: 9px; }
.util-py-201 { padding-block: 9px; }
.util-gap-202 { gap: 10px; }
.util-gap-x-202 { column-gap: 10px; }
.util-gap-y-202 { row-gap: 10px; }

.util-text-203 { font-size: 17px; line-height: 1.5; }
.util-leading-203 { line-height: 1.43; }
.util-tracking-203 { letter-spacing: 0.030em; }

.util-w-204 { width: 204px; }
.util-h-204 { height: 204px; }
.util-min-h-204 { min-height: 204px; }
.util-max-w-204 { max-width: 204px; }
.util-rounded-205 { border-radius: 13px; }
.util-border-205 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-205 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-206 { opacity: 0.06; }
.util-blur-206 { backdrop-filter: blur(14px); }
.util-z-206 { z-index: 6; }

.util-flex-207 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-207 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-207 { transform: translateY(3px); }

.util-m-208 { margin: 16px; }
.util-mt-208 { margin-top: 16px; }
.util-mb-208 { margin-bottom: 16px; }
.util-mx-208 { margin-inline: 16px; }
.util-p-209 { padding: 17px; }
.util-pt-209 { padding-top: 17px; }
.util-px-209 { padding-inline: 17px; }
.util-py-209 { padding-block: 17px; }
.util-gap-210 { gap: 18px; }
.util-gap-x-210 { column-gap: 18px; }
.util-gap-y-210 { row-gap: 18px; }

.util-text-211 { font-size: 25px; line-height: 1.5; }
.util-leading-211 { line-height: 1.51; }
.util-tracking-211 { letter-spacing: 0.010em; }

.util-w-212 { width: 212px; }
.util-h-212 { height: 212px; }
.util-min-h-212 { min-height: 212px; }
.util-max-w-212 { max-width: 212px; }
.util-rounded-213 { border-radius: 21px; }
.util-border-213 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-213 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-214 { opacity: 0.14; }
.util-blur-214 { backdrop-filter: blur(6px); }
.util-z-214 { z-index: 14; }

.util-flex-215 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-215 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-215 { transform: translateY(11px); }

.util-m-216 { margin: 24px; }
.util-mt-216 { margin-top: 24px; }
.util-mb-216 { margin-bottom: 24px; }
.util-mx-216 { margin-inline: 24px; }
.util-p-217 { padding: 25px; }
.util-pt-217 { padding-top: 25px; }
.util-px-217 { padding-inline: 25px; }
.util-py-217 { padding-block: 25px; }
.util-gap-218 { gap: 26px; }
.util-gap-x-218 { column-gap: 26px; }
.util-gap-y-218 { row-gap: 26px; }

.util-text-219 { font-size: 33px; line-height: 1.5; }
.util-leading-219 { line-height: 1.59; }
.util-tracking-219 { letter-spacing: 0.090em; }

.util-w-220 { width: 220px; }
.util-h-220 { height: 220px; }
.util-min-h-220 { min-height: 220px; }
.util-max-w-220 { max-width: 220px; }
.util-rounded-221 { border-radius: 5px; }
.util-border-221 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-221 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-222 { opacity: 0.22; }
.util-blur-222 { backdrop-filter: blur(14px); }
.util-z-222 { z-index: 22; }

.util-flex-223 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-223 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-223 { transform: translateY(7px); }

.util-m-224 { margin: 32px; }
.util-mt-224 { margin-top: 32px; }
.util-mb-224 { margin-bottom: 32px; }
.util-mx-224 { margin-inline: 32px; }
.util-p-225 { padding: 33px; }
.util-pt-225 { padding-top: 33px; }
.util-px-225 { padding-inline: 1px; }
.util-py-225 { padding-block: 1px; }
.util-gap-226 { gap: 2px; }
.util-gap-x-226 { column-gap: 2px; }
.util-gap-y-226 { row-gap: 2px; }

.util-text-227 { font-size: 19px; line-height: 1.5; }
.util-leading-227 { line-height: 1.67; }
.util-tracking-227 { letter-spacing: 0.070em; }

.util-w-228 { width: 228px; }
.util-h-228 { height: 228px; }
.util-min-h-228 { min-height: 228px; }
.util-max-w-228 { max-width: 228px; }
.util-rounded-229 { border-radius: 13px; }
.util-border-229 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-229 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-230 { opacity: 0.30; }
.util-blur-230 { backdrop-filter: blur(6px); }
.util-z-230 { z-index: 30; }

.util-flex-231 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-231 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-231 { transform: translateY(3px); }

.util-m-232 { margin: 40px; }
.util-mt-232 { margin-top: 40px; }
.util-mb-232 { margin-bottom: 40px; }
.util-mx-232 { margin-inline: 40px; }
.util-p-233 { padding: 41px; }
.util-pt-233 { padding-top: 41px; }
.util-px-233 { padding-inline: 9px; }
.util-py-233 { padding-block: 9px; }
.util-gap-234 { gap: 10px; }
.util-gap-x-234 { column-gap: 10px; }
.util-gap-y-234 { row-gap: 10px; }

.util-text-235 { font-size: 27px; line-height: 1.5; }
.util-leading-235 { line-height: 1.75; }
.util-tracking-235 { letter-spacing: 0.050em; }

.util-w-236 { width: 236px; }
.util-h-236 { height: 236px; }
.util-min-h-236 { min-height: 236px; }
.util-max-w-236 { max-width: 236px; }
.util-rounded-237 { border-radius: 21px; }
.util-border-237 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-237 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-238 { opacity: 0.38; }
.util-blur-238 { backdrop-filter: blur(14px); }
.util-z-238 { z-index: 38; }

.util-flex-239 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-239 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-239 { transform: translateY(11px); }

.util-m-240 { margin: 0px; }
.util-mt-240 { margin-top: 0px; }
.util-mb-240 { margin-bottom: 0px; }
.util-mx-240 { margin-inline: 0px; }
.util-p-241 { padding: 1px; }
.util-pt-241 { padding-top: 1px; }
.util-px-241 { padding-inline: 17px; }
.util-py-241 { padding-block: 17px; }
.util-gap-242 { gap: 18px; }
.util-gap-x-242 { column-gap: 18px; }
.util-gap-y-242 { row-gap: 18px; }

.util-text-243 { font-size: 13px; line-height: 1.5; }
.util-leading-243 { line-height: 1.03; }
.util-tracking-243 { letter-spacing: 0.030em; }

.util-w-244 { width: 244px; }
.util-h-244 { height: 244px; }
.util-min-h-244 { min-height: 244px; }
.util-max-w-244 { max-width: 244px; }
.util-rounded-245 { border-radius: 5px; }
.util-border-245 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-245 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-246 { opacity: 0.46; }
.util-blur-246 { backdrop-filter: blur(6px); }
.util-z-246 { z-index: 46; }

.util-flex-247 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-247 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-247 { transform: translateY(7px); }

.util-m-248 { margin: 8px; }
.util-mt-248 { margin-top: 8px; }
.util-mb-248 { margin-bottom: 8px; }
.util-mx-248 { margin-inline: 8px; }
.util-p-249 { padding: 9px; }
.util-pt-249 { padding-top: 9px; }
.util-px-249 { padding-inline: 25px; }
.util-py-249 { padding-block: 25px; }
.util-gap-250 { gap: 26px; }
.util-gap-x-250 { column-gap: 26px; }
.util-gap-y-250 { row-gap: 26px; }

.util-text-251 { font-size: 21px; line-height: 1.5; }
.util-leading-251 { line-height: 1.11; }
.util-tracking-251 { letter-spacing: 0.010em; }

.util-w-252 { width: 252px; }
.util-h-252 { height: 252px; }
.util-min-h-252 { min-height: 252px; }
.util-max-w-252 { max-width: 252px; }
.util-rounded-253 { border-radius: 13px; }
.util-border-253 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-253 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-254 { opacity: 0.54; }
.util-blur-254 { backdrop-filter: blur(14px); }
.util-z-254 { z-index: 4; }

.util-flex-255 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-255 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-255 { transform: translateY(3px); }

.util-m-256 { margin: 16px; }
.util-mt-256 { margin-top: 16px; }
.util-mb-256 { margin-bottom: 16px; }
.util-mx-256 { margin-inline: 16px; }
.util-p-257 { padding: 17px; }
.util-pt-257 { padding-top: 17px; }
.util-px-257 { padding-inline: 1px; }
.util-py-257 { padding-block: 1px; }
.util-gap-258 { gap: 2px; }
.util-gap-x-258 { column-gap: 2px; }
.util-gap-y-258 { row-gap: 2px; }

.util-text-259 { font-size: 29px; line-height: 1.5; }
.util-leading-259 { line-height: 1.19; }
.util-tracking-259 { letter-spacing: 0.090em; }

.util-w-260 { width: 260px; }
.util-h-260 { height: 260px; }
.util-min-h-260 { min-height: 260px; }
.util-max-w-260 { max-width: 260px; }
.util-rounded-261 { border-radius: 21px; }
.util-border-261 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-261 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-262 { opacity: 0.62; }
.util-blur-262 { backdrop-filter: blur(6px); }
.util-z-262 { z-index: 12; }

.util-flex-263 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-263 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-263 { transform: translateY(11px); }

.util-m-264 { margin: 24px; }
.util-mt-264 { margin-top: 24px; }
.util-mb-264 { margin-bottom: 24px; }
.util-mx-264 { margin-inline: 24px; }
.util-p-265 { padding: 25px; }
.util-pt-265 { padding-top: 25px; }
.util-px-265 { padding-inline: 9px; }
.util-py-265 { padding-block: 9px; }
.util-gap-266 { gap: 10px; }
.util-gap-x-266 { column-gap: 10px; }
.util-gap-y-266 { row-gap: 10px; }

.util-text-267 { font-size: 15px; line-height: 1.5; }
.util-leading-267 { line-height: 1.27; }
.util-tracking-267 { letter-spacing: 0.070em; }

.util-w-268 { width: 268px; }
.util-h-268 { height: 268px; }
.util-min-h-268 { min-height: 268px; }
.util-max-w-268 { max-width: 268px; }
.util-rounded-269 { border-radius: 5px; }
.util-border-269 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-269 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-270 { opacity: 0.70; }
.util-blur-270 { backdrop-filter: blur(14px); }
.util-z-270 { z-index: 20; }

.util-flex-271 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-271 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-271 { transform: translateY(7px); }

.util-m-272 { margin: 32px; }
.util-mt-272 { margin-top: 32px; }
.util-mb-272 { margin-bottom: 32px; }
.util-mx-272 { margin-inline: 32px; }
.util-p-273 { padding: 33px; }
.util-pt-273 { padding-top: 33px; }
.util-px-273 { padding-inline: 17px; }
.util-py-273 { padding-block: 17px; }
.util-gap-274 { gap: 18px; }
.util-gap-x-274 { column-gap: 18px; }
.util-gap-y-274 { row-gap: 18px; }

.util-text-275 { font-size: 23px; line-height: 1.5; }
.util-leading-275 { line-height: 1.35; }
.util-tracking-275 { letter-spacing: 0.050em; }

.util-w-276 { width: 276px; }
.util-h-276 { height: 276px; }
.util-min-h-276 { min-height: 276px; }
.util-max-w-276 { max-width: 276px; }
.util-rounded-277 { border-radius: 13px; }
.util-border-277 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-277 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-278 { opacity: 0.78; }
.util-blur-278 { backdrop-filter: blur(6px); }
.util-z-278 { z-index: 28; }

.util-flex-279 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-279 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-279 { transform: translateY(3px); }

.util-m-280 { margin: 40px; }
.util-mt-280 { margin-top: 40px; }
.util-mb-280 { margin-bottom: 40px; }
.util-mx-280 { margin-inline: 40px; }
.util-p-281 { padding: 41px; }
.util-pt-281 { padding-top: 41px; }
.util-px-281 { padding-inline: 25px; }
.util-py-281 { padding-block: 25px; }
.util-gap-282 { gap: 26px; }
.util-gap-x-282 { column-gap: 26px; }
.util-gap-y-282 { row-gap: 26px; }

.util-text-283 { font-size: 31px; line-height: 1.5; }
.util-leading-283 { line-height: 1.43; }
.util-tracking-283 { letter-spacing: 0.030em; }

.util-w-284 { width: 284px; }
.util-h-284 { height: 284px; }
.util-min-h-284 { min-height: 284px; }
.util-max-w-284 { max-width: 284px; }
.util-rounded-285 { border-radius: 21px; }
.util-border-285 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-285 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-286 { opacity: 0.86; }
.util-blur-286 { backdrop-filter: blur(14px); }
.util-z-286 { z-index: 36; }

.util-flex-287 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-287 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-287 { transform: translateY(11px); }

.util-m-288 { margin: 0px; }
.util-mt-288 { margin-top: 0px; }
.util-mb-288 { margin-bottom: 0px; }
.util-mx-288 { margin-inline: 0px; }
.util-p-289 { padding: 1px; }
.util-pt-289 { padding-top: 1px; }
.util-px-289 { padding-inline: 1px; }
.util-py-289 { padding-block: 1px; }
.util-gap-290 { gap: 2px; }
.util-gap-x-290 { column-gap: 2px; }
.util-gap-y-290 { row-gap: 2px; }

.util-text-291 { font-size: 17px; line-height: 1.5; }
.util-leading-291 { line-height: 1.51; }
.util-tracking-291 { letter-spacing: 0.010em; }

.util-w-292 { width: 292px; }
.util-h-292 { height: 292px; }
.util-min-h-292 { min-height: 292px; }
.util-max-w-292 { max-width: 292px; }
.util-rounded-293 { border-radius: 5px; }
.util-border-293 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-293 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-294 { opacity: 0.94; }
.util-blur-294 { backdrop-filter: blur(6px); }
.util-z-294 { z-index: 44; }

.util-flex-295 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-295 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-295 { transform: translateY(7px); }

.util-m-296 { margin: 8px; }
.util-mt-296 { margin-top: 8px; }
.util-mb-296 { margin-bottom: 8px; }
.util-mx-296 { margin-inline: 8px; }
.util-p-297 { padding: 9px; }
.util-pt-297 { padding-top: 9px; }
.util-px-297 { padding-inline: 9px; }
.util-py-297 { padding-block: 9px; }
.util-gap-298 { gap: 10px; }
.util-gap-x-298 { column-gap: 10px; }
.util-gap-y-298 { row-gap: 10px; }

.util-text-299 { font-size: 25px; line-height: 1.5; }
.util-leading-299 { line-height: 1.59; }
.util-tracking-299 { letter-spacing: 0.090em; }

.util-w-300 { width: 300px; }
.util-h-300 { height: 300px; }
.util-min-h-300 { min-height: 300px; }
.util-max-w-300 { max-width: 300px; }
.util-rounded-301 { border-radius: 13px; }
.util-border-301 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-301 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-302 { opacity: 0.02; }
.util-blur-302 { backdrop-filter: blur(14px); }
.util-z-302 { z-index: 2; }

.util-flex-303 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-303 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-303 { transform: translateY(3px); }

.util-m-304 { margin: 16px; }
.util-mt-304 { margin-top: 16px; }
.util-mb-304 { margin-bottom: 16px; }
.util-mx-304 { margin-inline: 16px; }
.util-p-305 { padding: 17px; }
.util-pt-305 { padding-top: 17px; }
.util-px-305 { padding-inline: 17px; }
.util-py-305 { padding-block: 17px; }
.util-gap-306 { gap: 18px; }
.util-gap-x-306 { column-gap: 18px; }
.util-gap-y-306 { row-gap: 18px; }

.util-text-307 { font-size: 33px; line-height: 1.5; }
.util-leading-307 { line-height: 1.67; }
.util-tracking-307 { letter-spacing: 0.070em; }

.util-w-308 { width: 308px; }
.util-h-308 { height: 308px; }
.util-min-h-308 { min-height: 308px; }
.util-max-w-308 { max-width: 308px; }
.util-rounded-309 { border-radius: 21px; }
.util-border-309 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-309 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-310 { opacity: 0.10; }
.util-blur-310 { backdrop-filter: blur(6px); }
.util-z-310 { z-index: 10; }

.util-flex-311 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-311 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-311 { transform: translateY(11px); }

.util-m-312 { margin: 24px; }
.util-mt-312 { margin-top: 24px; }
.util-mb-312 { margin-bottom: 24px; }
.util-mx-312 { margin-inline: 24px; }
.util-p-313 { padding: 25px; }
.util-pt-313 { padding-top: 25px; }
.util-px-313 { padding-inline: 25px; }
.util-py-313 { padding-block: 25px; }
.util-gap-314 { gap: 26px; }
.util-gap-x-314 { column-gap: 26px; }
.util-gap-y-314 { row-gap: 26px; }

.util-text-315 { font-size: 19px; line-height: 1.5; }
.util-leading-315 { line-height: 1.75; }
.util-tracking-315 { letter-spacing: 0.050em; }

.util-w-316 { width: 316px; }
.util-h-316 { height: 316px; }
.util-min-h-316 { min-height: 316px; }
.util-max-w-316 { max-width: 316px; }
.util-rounded-317 { border-radius: 5px; }
.util-border-317 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-317 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-318 { opacity: 0.18; }
.util-blur-318 { backdrop-filter: blur(14px); }
.util-z-318 { z-index: 18; }

.util-flex-319 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-319 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-319 { transform: translateY(7px); }

.util-m-320 { margin: 32px; }
.util-mt-320 { margin-top: 32px; }
.util-mb-320 { margin-bottom: 32px; }
.util-mx-320 { margin-inline: 32px; }
.util-p-321 { padding: 33px; }
.util-pt-321 { padding-top: 33px; }
.util-px-321 { padding-inline: 1px; }
.util-py-321 { padding-block: 1px; }
.util-gap-322 { gap: 2px; }
.util-gap-x-322 { column-gap: 2px; }
.util-gap-y-322 { row-gap: 2px; }

.util-text-323 { font-size: 27px; line-height: 1.5; }
.util-leading-323 { line-height: 1.03; }
.util-tracking-323 { letter-spacing: 0.030em; }

.util-w-324 { width: 324px; }
.util-h-324 { height: 324px; }
.util-min-h-324 { min-height: 324px; }
.util-max-w-324 { max-width: 324px; }
.util-rounded-325 { border-radius: 13px; }
.util-border-325 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-325 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-326 { opacity: 0.26; }
.util-blur-326 { backdrop-filter: blur(6px); }
.util-z-326 { z-index: 26; }

.util-flex-327 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-327 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-327 { transform: translateY(3px); }

.util-m-328 { margin: 40px; }
.util-mt-328 { margin-top: 40px; }
.util-mb-328 { margin-bottom: 40px; }
.util-mx-328 { margin-inline: 40px; }
.util-p-329 { padding: 41px; }
.util-pt-329 { padding-top: 41px; }
.util-px-329 { padding-inline: 9px; }
.util-py-329 { padding-block: 9px; }
.util-gap-330 { gap: 10px; }
.util-gap-x-330 { column-gap: 10px; }
.util-gap-y-330 { row-gap: 10px; }

.util-text-331 { font-size: 13px; line-height: 1.5; }
.util-leading-331 { line-height: 1.11; }
.util-tracking-331 { letter-spacing: 0.010em; }

.util-w-332 { width: 332px; }
.util-h-332 { height: 332px; }
.util-min-h-332 { min-height: 332px; }
.util-max-w-332 { max-width: 332px; }
.util-rounded-333 { border-radius: 21px; }
.util-border-333 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-333 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-334 { opacity: 0.34; }
.util-blur-334 { backdrop-filter: blur(14px); }
.util-z-334 { z-index: 34; }

.util-flex-335 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-335 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-335 { transform: translateY(11px); }

.util-m-336 { margin: 0px; }
.util-mt-336 { margin-top: 0px; }
.util-mb-336 { margin-bottom: 0px; }
.util-mx-336 { margin-inline: 0px; }
.util-p-337 { padding: 1px; }
.util-pt-337 { padding-top: 1px; }
.util-px-337 { padding-inline: 17px; }
.util-py-337 { padding-block: 17px; }
.util-gap-338 { gap: 18px; }
.util-gap-x-338 { column-gap: 18px; }
.util-gap-y-338 { row-gap: 18px; }

.util-text-339 { font-size: 21px; line-height: 1.5; }
.util-leading-339 { line-height: 1.19; }
.util-tracking-339 { letter-spacing: 0.090em; }

.util-w-340 { width: 340px; }
.util-h-340 { height: 340px; }
.util-min-h-340 { min-height: 340px; }
.util-max-w-340 { max-width: 340px; }
.util-rounded-341 { border-radius: 5px; }
.util-border-341 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-341 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-342 { opacity: 0.42; }
.util-blur-342 { backdrop-filter: blur(6px); }
.util-z-342 { z-index: 42; }

.util-flex-343 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-343 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-343 { transform: translateY(7px); }

.util-m-344 { margin: 8px; }
.util-mt-344 { margin-top: 8px; }
.util-mb-344 { margin-bottom: 8px; }
.util-mx-344 { margin-inline: 8px; }
.util-p-345 { padding: 9px; }
.util-pt-345 { padding-top: 9px; }
.util-px-345 { padding-inline: 25px; }
.util-py-345 { padding-block: 25px; }
.util-gap-346 { gap: 26px; }
.util-gap-x-346 { column-gap: 26px; }
.util-gap-y-346 { row-gap: 26px; }

.util-text-347 { font-size: 29px; line-height: 1.5; }
.util-leading-347 { line-height: 1.27; }
.util-tracking-347 { letter-spacing: 0.070em; }

.util-w-348 { width: 348px; }
.util-h-348 { height: 348px; }
.util-min-h-348 { min-height: 348px; }
.util-max-w-348 { max-width: 348px; }
.util-rounded-349 { border-radius: 13px; }
.util-border-349 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-349 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-350 { opacity: 0.50; }
.util-blur-350 { backdrop-filter: blur(14px); }
.util-z-350 { z-index: 0; }

.util-flex-351 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-351 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-351 { transform: translateY(3px); }

.util-m-352 { margin: 16px; }
.util-mt-352 { margin-top: 16px; }
.util-mb-352 { margin-bottom: 16px; }
.util-mx-352 { margin-inline: 16px; }
.util-p-353 { padding: 17px; }
.util-pt-353 { padding-top: 17px; }
.util-px-353 { padding-inline: 1px; }
.util-py-353 { padding-block: 1px; }
.util-gap-354 { gap: 2px; }
.util-gap-x-354 { column-gap: 2px; }
.util-gap-y-354 { row-gap: 2px; }

.util-text-355 { font-size: 15px; line-height: 1.5; }
.util-leading-355 { line-height: 1.35; }
.util-tracking-355 { letter-spacing: 0.050em; }

.util-w-356 { width: 356px; }
.util-h-356 { height: 356px; }
.util-min-h-356 { min-height: 356px; }
.util-max-w-356 { max-width: 356px; }
.util-rounded-357 { border-radius: 21px; }
.util-border-357 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-357 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-358 { opacity: 0.58; }
.util-blur-358 { backdrop-filter: blur(6px); }
.util-z-358 { z-index: 8; }

.util-flex-359 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-359 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-359 { transform: translateY(11px); }

.util-m-360 { margin: 24px; }
.util-mt-360 { margin-top: 24px; }
.util-mb-360 { margin-bottom: 24px; }
.util-mx-360 { margin-inline: 24px; }
.util-p-361 { padding: 25px; }
.util-pt-361 { padding-top: 25px; }
.util-px-361 { padding-inline: 9px; }
.util-py-361 { padding-block: 9px; }
.util-gap-362 { gap: 10px; }
.util-gap-x-362 { column-gap: 10px; }
.util-gap-y-362 { row-gap: 10px; }

.util-text-363 { font-size: 23px; line-height: 1.5; }
.util-leading-363 { line-height: 1.43; }
.util-tracking-363 { letter-spacing: 0.030em; }

.util-w-364 { width: 364px; }
.util-h-364 { height: 364px; }
.util-min-h-364 { min-height: 364px; }
.util-max-w-364 { max-width: 364px; }
.util-rounded-365 { border-radius: 5px; }
.util-border-365 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-365 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-366 { opacity: 0.66; }
.util-blur-366 { backdrop-filter: blur(14px); }
.util-z-366 { z-index: 16; }

.util-flex-367 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-367 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-367 { transform: translateY(7px); }

.util-m-368 { margin: 32px; }
.util-mt-368 { margin-top: 32px; }
.util-mb-368 { margin-bottom: 32px; }
.util-mx-368 { margin-inline: 32px; }
.util-p-369 { padding: 33px; }
.util-pt-369 { padding-top: 33px; }
.util-px-369 { padding-inline: 17px; }
.util-py-369 { padding-block: 17px; }
.util-gap-370 { gap: 18px; }
.util-gap-x-370 { column-gap: 18px; }
.util-gap-y-370 { row-gap: 18px; }

.util-text-371 { font-size: 31px; line-height: 1.5; }
.util-leading-371 { line-height: 1.51; }
.util-tracking-371 { letter-spacing: 0.010em; }

.util-w-372 { width: 372px; }
.util-h-372 { height: 372px; }
.util-min-h-372 { min-height: 372px; }
.util-max-w-372 { max-width: 372px; }
.util-rounded-373 { border-radius: 13px; }
.util-border-373 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-373 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-374 { opacity: 0.74; }
.util-blur-374 { backdrop-filter: blur(6px); }
.util-z-374 { z-index: 24; }

.util-flex-375 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-375 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-375 { transform: translateY(3px); }

.util-m-376 { margin: 40px; }
.util-mt-376 { margin-top: 40px; }
.util-mb-376 { margin-bottom: 40px; }
.util-mx-376 { margin-inline: 40px; }
.util-p-377 { padding: 41px; }
.util-pt-377 { padding-top: 41px; }
.util-px-377 { padding-inline: 25px; }
.util-py-377 { padding-block: 25px; }
.util-gap-378 { gap: 26px; }
.util-gap-x-378 { column-gap: 26px; }
.util-gap-y-378 { row-gap: 26px; }

.util-text-379 { font-size: 17px; line-height: 1.5; }
.util-leading-379 { line-height: 1.59; }
.util-tracking-379 { letter-spacing: 0.090em; }

.util-w-380 { width: 380px; }
.util-h-380 { height: 380px; }
.util-min-h-380 { min-height: 380px; }
.util-max-w-380 { max-width: 380px; }
.util-rounded-381 { border-radius: 21px; }
.util-border-381 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-381 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-382 { opacity: 0.82; }
.util-blur-382 { backdrop-filter: blur(14px); }
.util-z-382 { z-index: 32; }

.util-flex-383 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-383 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-383 { transform: translateY(11px); }

.util-m-384 { margin: 0px; }
.util-mt-384 { margin-top: 0px; }
.util-mb-384 { margin-bottom: 0px; }
.util-mx-384 { margin-inline: 0px; }
.util-p-385 { padding: 1px; }
.util-pt-385 { padding-top: 1px; }
.util-px-385 { padding-inline: 1px; }
.util-py-385 { padding-block: 1px; }
.util-gap-386 { gap: 2px; }
.util-gap-x-386 { column-gap: 2px; }
.util-gap-y-386 { row-gap: 2px; }

.util-text-387 { font-size: 25px; line-height: 1.5; }
.util-leading-387 { line-height: 1.67; }
.util-tracking-387 { letter-spacing: 0.070em; }

.util-w-388 { width: 388px; }
.util-h-388 { height: 388px; }
.util-min-h-388 { min-height: 388px; }
.util-max-w-388 { max-width: 388px; }
.util-rounded-389 { border-radius: 5px; }
.util-border-389 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-389 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-390 { opacity: 0.90; }
.util-blur-390 { backdrop-filter: blur(6px); }
.util-z-390 { z-index: 40; }

.util-flex-391 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-391 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-391 { transform: translateY(7px); }

.util-m-392 { margin: 8px; }
.util-mt-392 { margin-top: 8px; }
.util-mb-392 { margin-bottom: 8px; }
.util-mx-392 { margin-inline: 8px; }
.util-p-393 { padding: 9px; }
.util-pt-393 { padding-top: 9px; }
.util-px-393 { padding-inline: 9px; }
.util-py-393 { padding-block: 9px; }
.util-gap-394 { gap: 10px; }
.util-gap-x-394 { column-gap: 10px; }
.util-gap-y-394 { row-gap: 10px; }

.util-text-395 { font-size: 33px; line-height: 1.5; }
.util-leading-395 { line-height: 1.75; }
.util-tracking-395 { letter-spacing: 0.050em; }

.util-w-396 { width: 396px; }
.util-h-396 { height: 396px; }
.util-min-h-396 { min-height: 396px; }
.util-max-w-396 { max-width: 396px; }
.util-rounded-397 { border-radius: 13px; }
.util-border-397 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-397 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-398 { opacity: 0.98; }
.util-blur-398 { backdrop-filter: blur(14px); }
.util-z-398 { z-index: 48; }

.util-flex-399 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-399 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-399 { transform: translateY(3px); }

.util-m-400 { margin: 16px; }
.util-mt-400 { margin-top: 16px; }
.util-mb-400 { margin-bottom: 16px; }
.util-mx-400 { margin-inline: 16px; }
.util-p-401 { padding: 17px; }
.util-pt-401 { padding-top: 17px; }
.util-px-401 { padding-inline: 17px; }
.util-py-401 { padding-block: 17px; }
.util-gap-402 { gap: 18px; }
.util-gap-x-402 { column-gap: 18px; }
.util-gap-y-402 { row-gap: 18px; }

.util-text-403 { font-size: 19px; line-height: 1.5; }
.util-leading-403 { line-height: 1.03; }
.util-tracking-403 { letter-spacing: 0.030em; }

.util-w-404 { width: 4px; }
.util-h-404 { height: 4px; }
.util-min-h-404 { min-height: 4px; }
.util-max-w-404 { max-width: 404px; }
.util-rounded-405 { border-radius: 21px; }
.util-border-405 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-405 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-406 { opacity: 0.06; }
.util-blur-406 { backdrop-filter: blur(6px); }
.util-z-406 { z-index: 6; }

.util-flex-407 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-407 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-407 { transform: translateY(11px); }

.util-m-408 { margin: 24px; }
.util-mt-408 { margin-top: 24px; }
.util-mb-408 { margin-bottom: 24px; }
.util-mx-408 { margin-inline: 24px; }
.util-p-409 { padding: 25px; }
.util-pt-409 { padding-top: 25px; }
.util-px-409 { padding-inline: 25px; }
.util-py-409 { padding-block: 25px; }
.util-gap-410 { gap: 26px; }
.util-gap-x-410 { column-gap: 26px; }
.util-gap-y-410 { row-gap: 26px; }

.util-text-411 { font-size: 27px; line-height: 1.5; }
.util-leading-411 { line-height: 1.11; }
.util-tracking-411 { letter-spacing: 0.010em; }

.util-w-412 { width: 12px; }
.util-h-412 { height: 12px; }
.util-min-h-412 { min-height: 12px; }
.util-max-w-412 { max-width: 412px; }
.util-rounded-413 { border-radius: 5px; }
.util-border-413 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-413 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-414 { opacity: 0.14; }
.util-blur-414 { backdrop-filter: blur(14px); }
.util-z-414 { z-index: 14; }

.util-flex-415 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-415 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-415 { transform: translateY(7px); }

.util-m-416 { margin: 32px; }
.util-mt-416 { margin-top: 32px; }
.util-mb-416 { margin-bottom: 32px; }
.util-mx-416 { margin-inline: 32px; }
.util-p-417 { padding: 33px; }
.util-pt-417 { padding-top: 33px; }
.util-px-417 { padding-inline: 1px; }
.util-py-417 { padding-block: 1px; }
.util-gap-418 { gap: 2px; }
.util-gap-x-418 { column-gap: 2px; }
.util-gap-y-418 { row-gap: 2px; }

.util-text-419 { font-size: 13px; line-height: 1.5; }
.util-leading-419 { line-height: 1.19; }
.util-tracking-419 { letter-spacing: 0.090em; }

.util-w-420 { width: 20px; }
.util-h-420 { height: 20px; }
.util-min-h-420 { min-height: 20px; }
.util-max-w-420 { max-width: 420px; }
.util-rounded-421 { border-radius: 13px; }
.util-border-421 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-421 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-422 { opacity: 0.22; }
.util-blur-422 { backdrop-filter: blur(6px); }
.util-z-422 { z-index: 22; }

.util-flex-423 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-423 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-423 { transform: translateY(3px); }

.util-m-424 { margin: 40px; }
.util-mt-424 { margin-top: 40px; }
.util-mb-424 { margin-bottom: 40px; }
.util-mx-424 { margin-inline: 40px; }
.util-p-425 { padding: 41px; }
.util-pt-425 { padding-top: 41px; }
.util-px-425 { padding-inline: 9px; }
.util-py-425 { padding-block: 9px; }
.util-gap-426 { gap: 10px; }
.util-gap-x-426 { column-gap: 10px; }
.util-gap-y-426 { row-gap: 10px; }

.util-text-427 { font-size: 21px; line-height: 1.5; }
.util-leading-427 { line-height: 1.27; }
.util-tracking-427 { letter-spacing: 0.070em; }

.util-w-428 { width: 28px; }
.util-h-428 { height: 28px; }
.util-min-h-428 { min-height: 28px; }
.util-max-w-428 { max-width: 428px; }
.util-rounded-429 { border-radius: 21px; }
.util-border-429 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-429 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-430 { opacity: 0.30; }
.util-blur-430 { backdrop-filter: blur(14px); }
.util-z-430 { z-index: 30; }

.util-flex-431 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-431 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-431 { transform: translateY(11px); }

.util-m-432 { margin: 0px; }
.util-mt-432 { margin-top: 0px; }
.util-mb-432 { margin-bottom: 0px; }
.util-mx-432 { margin-inline: 0px; }
.util-p-433 { padding: 1px; }
.util-pt-433 { padding-top: 1px; }
.util-px-433 { padding-inline: 17px; }
.util-py-433 { padding-block: 17px; }
.util-gap-434 { gap: 18px; }
.util-gap-x-434 { column-gap: 18px; }
.util-gap-y-434 { row-gap: 18px; }

.util-text-435 { font-size: 29px; line-height: 1.5; }
.util-leading-435 { line-height: 1.35; }
.util-tracking-435 { letter-spacing: 0.050em; }

.util-w-436 { width: 36px; }
.util-h-436 { height: 36px; }
.util-min-h-436 { min-height: 36px; }
.util-max-w-436 { max-width: 436px; }
.util-rounded-437 { border-radius: 5px; }
.util-border-437 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-437 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-438 { opacity: 0.38; }
.util-blur-438 { backdrop-filter: blur(6px); }
.util-z-438 { z-index: 38; }

.util-flex-439 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-439 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-439 { transform: translateY(7px); }

.util-m-440 { margin: 8px; }
.util-mt-440 { margin-top: 8px; }
.util-mb-440 { margin-bottom: 8px; }
.util-mx-440 { margin-inline: 8px; }
.util-p-441 { padding: 9px; }
.util-pt-441 { padding-top: 9px; }
.util-px-441 { padding-inline: 25px; }
.util-py-441 { padding-block: 25px; }
.util-gap-442 { gap: 26px; }
.util-gap-x-442 { column-gap: 26px; }
.util-gap-y-442 { row-gap: 26px; }

.util-text-443 { font-size: 15px; line-height: 1.5; }
.util-leading-443 { line-height: 1.43; }
.util-tracking-443 { letter-spacing: 0.030em; }

.util-w-444 { width: 44px; }
.util-h-444 { height: 44px; }
.util-min-h-444 { min-height: 44px; }
.util-max-w-444 { max-width: 444px; }
.util-rounded-445 { border-radius: 13px; }
.util-border-445 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-445 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-446 { opacity: 0.46; }
.util-blur-446 { backdrop-filter: blur(14px); }
.util-z-446 { z-index: 46; }

.util-flex-447 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-447 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-447 { transform: translateY(3px); }

.util-m-448 { margin: 16px; }
.util-mt-448 { margin-top: 16px; }
.util-mb-448 { margin-bottom: 16px; }
.util-mx-448 { margin-inline: 16px; }
.util-p-449 { padding: 17px; }
.util-pt-449 { padding-top: 17px; }
.util-px-449 { padding-inline: 1px; }
.util-py-449 { padding-block: 1px; }
.util-gap-450 { gap: 2px; }
.util-gap-x-450 { column-gap: 2px; }
.util-gap-y-450 { row-gap: 2px; }

.util-text-451 { font-size: 23px; line-height: 1.5; }
.util-leading-451 { line-height: 1.51; }
.util-tracking-451 { letter-spacing: 0.010em; }

.util-w-452 { width: 52px; }
.util-h-452 { height: 52px; }
.util-min-h-452 { min-height: 52px; }
.util-max-w-452 { max-width: 452px; }
.util-rounded-453 { border-radius: 21px; }
.util-border-453 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-453 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-454 { opacity: 0.54; }
.util-blur-454 { backdrop-filter: blur(6px); }
.util-z-454 { z-index: 4; }

.util-flex-455 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-455 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-455 { transform: translateY(11px); }

.util-m-456 { margin: 24px; }
.util-mt-456 { margin-top: 24px; }
.util-mb-456 { margin-bottom: 24px; }
.util-mx-456 { margin-inline: 24px; }
.util-p-457 { padding: 25px; }
.util-pt-457 { padding-top: 25px; }
.util-px-457 { padding-inline: 9px; }
.util-py-457 { padding-block: 9px; }
.util-gap-458 { gap: 10px; }
.util-gap-x-458 { column-gap: 10px; }
.util-gap-y-458 { row-gap: 10px; }

.util-text-459 { font-size: 31px; line-height: 1.5; }
.util-leading-459 { line-height: 1.59; }
.util-tracking-459 { letter-spacing: 0.090em; }

.util-w-460 { width: 60px; }
.util-h-460 { height: 60px; }
.util-min-h-460 { min-height: 60px; }
.util-max-w-460 { max-width: 460px; }
.util-rounded-461 { border-radius: 5px; }
.util-border-461 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-461 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-462 { opacity: 0.62; }
.util-blur-462 { backdrop-filter: blur(14px); }
.util-z-462 { z-index: 12; }

.util-flex-463 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-463 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-463 { transform: translateY(7px); }

.util-m-464 { margin: 32px; }
.util-mt-464 { margin-top: 32px; }
.util-mb-464 { margin-bottom: 32px; }
.util-mx-464 { margin-inline: 32px; }
.util-p-465 { padding: 33px; }
.util-pt-465 { padding-top: 33px; }
.util-px-465 { padding-inline: 17px; }
.util-py-465 { padding-block: 17px; }
.util-gap-466 { gap: 18px; }
.util-gap-x-466 { column-gap: 18px; }
.util-gap-y-466 { row-gap: 18px; }

.util-text-467 { font-size: 17px; line-height: 1.5; }
.util-leading-467 { line-height: 1.67; }
.util-tracking-467 { letter-spacing: 0.070em; }

.util-w-468 { width: 68px; }
.util-h-468 { height: 68px; }
.util-min-h-468 { min-height: 68px; }
.util-max-w-468 { max-width: 468px; }
.util-rounded-469 { border-radius: 13px; }
.util-border-469 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-469 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-470 { opacity: 0.70; }
.util-blur-470 { backdrop-filter: blur(6px); }
.util-z-470 { z-index: 20; }

.util-flex-471 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-471 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-471 { transform: translateY(3px); }

.util-m-472 { margin: 40px; }
.util-mt-472 { margin-top: 40px; }
.util-mb-472 { margin-bottom: 40px; }
.util-mx-472 { margin-inline: 40px; }
.util-p-473 { padding: 41px; }
.util-pt-473 { padding-top: 41px; }
.util-px-473 { padding-inline: 25px; }
.util-py-473 { padding-block: 25px; }
.util-gap-474 { gap: 26px; }
.util-gap-x-474 { column-gap: 26px; }
.util-gap-y-474 { row-gap: 26px; }

.util-text-475 { font-size: 25px; line-height: 1.5; }
.util-leading-475 { line-height: 1.75; }
.util-tracking-475 { letter-spacing: 0.050em; }

.util-w-476 { width: 76px; }
.util-h-476 { height: 76px; }
.util-min-h-476 { min-height: 76px; }
.util-max-w-476 { max-width: 476px; }
.util-rounded-477 { border-radius: 21px; }
.util-border-477 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-477 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-478 { opacity: 0.78; }
.util-blur-478 { backdrop-filter: blur(14px); }
.util-z-478 { z-index: 28; }

.util-flex-479 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-479 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-479 { transform: translateY(11px); }

.util-m-480 { margin: 0px; }
.util-mt-480 { margin-top: 0px; }
.util-mb-480 { margin-bottom: 0px; }
.util-mx-480 { margin-inline: 0px; }
.util-p-481 { padding: 1px; }
.util-pt-481 { padding-top: 1px; }
.util-px-481 { padding-inline: 1px; }
.util-py-481 { padding-block: 1px; }
.util-gap-482 { gap: 2px; }
.util-gap-x-482 { column-gap: 2px; }
.util-gap-y-482 { row-gap: 2px; }

.util-text-483 { font-size: 33px; line-height: 1.5; }
.util-leading-483 { line-height: 1.03; }
.util-tracking-483 { letter-spacing: 0.030em; }

.util-w-484 { width: 84px; }
.util-h-484 { height: 84px; }
.util-min-h-484 { min-height: 84px; }
.util-max-w-484 { max-width: 484px; }
.util-rounded-485 { border-radius: 5px; }
.util-border-485 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-485 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-486 { opacity: 0.86; }
.util-blur-486 { backdrop-filter: blur(6px); }
.util-z-486 { z-index: 36; }

.util-flex-487 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-487 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-487 { transform: translateY(7px); }

.util-m-488 { margin: 8px; }
.util-mt-488 { margin-top: 8px; }
.util-mb-488 { margin-bottom: 8px; }
.util-mx-488 { margin-inline: 8px; }
.util-p-489 { padding: 9px; }
.util-pt-489 { padding-top: 9px; }
.util-px-489 { padding-inline: 9px; }
.util-py-489 { padding-block: 9px; }
.util-gap-490 { gap: 10px; }
.util-gap-x-490 { column-gap: 10px; }
.util-gap-y-490 { row-gap: 10px; }

.util-text-491 { font-size: 19px; line-height: 1.5; }
.util-leading-491 { line-height: 1.11; }
.util-tracking-491 { letter-spacing: 0.010em; }

.util-w-492 { width: 92px; }
.util-h-492 { height: 92px; }
.util-min-h-492 { min-height: 92px; }
.util-max-w-492 { max-width: 492px; }
.util-rounded-493 { border-radius: 13px; }
.util-border-493 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-493 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-494 { opacity: 0.94; }
.util-blur-494 { backdrop-filter: blur(14px); }
.util-z-494 { z-index: 44; }

.util-flex-495 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-495 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-495 { transform: translateY(3px); }

.util-m-496 { margin: 16px; }
.util-mt-496 { margin-top: 16px; }
.util-mb-496 { margin-bottom: 16px; }
.util-mx-496 { margin-inline: 16px; }
.util-p-497 { padding: 17px; }
.util-pt-497 { padding-top: 17px; }
.util-px-497 { padding-inline: 17px; }
.util-py-497 { padding-block: 17px; }
.util-gap-498 { gap: 18px; }
.util-gap-x-498 { column-gap: 18px; }
.util-gap-y-498 { row-gap: 18px; }

.util-text-499 { font-size: 27px; line-height: 1.5; }
.util-leading-499 { line-height: 1.19; }
.util-tracking-499 { letter-spacing: 0.090em; }

.util-w-500 { width: 100px; }
.util-h-500 { height: 100px; }
.util-min-h-500 { min-height: 100px; }
.util-max-w-500 { max-width: 500px; }
.util-rounded-501 { border-radius: 21px; }
.util-border-501 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-501 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-502 { opacity: 0.02; }
.util-blur-502 { backdrop-filter: blur(6px); }
.util-z-502 { z-index: 2; }

.util-flex-503 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-503 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-503 { transform: translateY(11px); }

.util-m-504 { margin: 24px; }
.util-mt-504 { margin-top: 24px; }
.util-mb-504 { margin-bottom: 24px; }
.util-mx-504 { margin-inline: 24px; }
.util-p-505 { padding: 25px; }
.util-pt-505 { padding-top: 25px; }
.util-px-505 { padding-inline: 25px; }
.util-py-505 { padding-block: 25px; }
.util-gap-506 { gap: 26px; }
.util-gap-x-506 { column-gap: 26px; }
.util-gap-y-506 { row-gap: 26px; }

.util-text-507 { font-size: 13px; line-height: 1.5; }
.util-leading-507 { line-height: 1.27; }
.util-tracking-507 { letter-spacing: 0.070em; }

.util-w-508 { width: 108px; }
.util-h-508 { height: 108px; }
.util-min-h-508 { min-height: 108px; }
.util-max-w-508 { max-width: 508px; }
.util-rounded-509 { border-radius: 5px; }
.util-border-509 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-509 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-510 { opacity: 0.10; }
.util-blur-510 { backdrop-filter: blur(14px); }
.util-z-510 { z-index: 10; }

.util-flex-511 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-511 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-511 { transform: translateY(7px); }

.util-m-512 { margin: 32px; }
.util-mt-512 { margin-top: 32px; }
.util-mb-512 { margin-bottom: 32px; }
.util-mx-512 { margin-inline: 32px; }
.util-p-513 { padding: 33px; }
.util-pt-513 { padding-top: 33px; }
.util-px-513 { padding-inline: 1px; }
.util-py-513 { padding-block: 1px; }
.util-gap-514 { gap: 2px; }
.util-gap-x-514 { column-gap: 2px; }
.util-gap-y-514 { row-gap: 2px; }

.util-text-515 { font-size: 21px; line-height: 1.5; }
.util-leading-515 { line-height: 1.35; }
.util-tracking-515 { letter-spacing: 0.050em; }

.util-w-516 { width: 116px; }
.util-h-516 { height: 116px; }
.util-min-h-516 { min-height: 116px; }
.util-max-w-516 { max-width: 516px; }
.util-rounded-517 { border-radius: 13px; }
.util-border-517 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-517 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-518 { opacity: 0.18; }
.util-blur-518 { backdrop-filter: blur(6px); }
.util-z-518 { z-index: 18; }

.util-flex-519 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-519 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-519 { transform: translateY(3px); }

.util-m-520 { margin: 40px; }
.util-mt-520 { margin-top: 40px; }
.util-mb-520 { margin-bottom: 40px; }
.util-mx-520 { margin-inline: 40px; }
.util-p-521 { padding: 41px; }
.util-pt-521 { padding-top: 41px; }
.util-px-521 { padding-inline: 9px; }
.util-py-521 { padding-block: 9px; }
.util-gap-522 { gap: 10px; }
.util-gap-x-522 { column-gap: 10px; }
.util-gap-y-522 { row-gap: 10px; }

.util-text-523 { font-size: 29px; line-height: 1.5; }
.util-leading-523 { line-height: 1.43; }
.util-tracking-523 { letter-spacing: 0.030em; }

.util-w-524 { width: 124px; }
.util-h-524 { height: 124px; }
.util-min-h-524 { min-height: 124px; }
.util-max-w-524 { max-width: 524px; }
.util-rounded-525 { border-radius: 21px; }
.util-border-525 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-525 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-526 { opacity: 0.26; }
.util-blur-526 { backdrop-filter: blur(14px); }
.util-z-526 { z-index: 26; }

.util-flex-527 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-527 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-527 { transform: translateY(11px); }

.util-m-528 { margin: 0px; }
.util-mt-528 { margin-top: 0px; }
.util-mb-528 { margin-bottom: 0px; }
.util-mx-528 { margin-inline: 0px; }
.util-p-529 { padding: 1px; }
.util-pt-529 { padding-top: 1px; }
.util-px-529 { padding-inline: 17px; }
.util-py-529 { padding-block: 17px; }
.util-gap-530 { gap: 18px; }
.util-gap-x-530 { column-gap: 18px; }
.util-gap-y-530 { row-gap: 18px; }

.util-text-531 { font-size: 15px; line-height: 1.5; }
.util-leading-531 { line-height: 1.51; }
.util-tracking-531 { letter-spacing: 0.010em; }

.util-w-532 { width: 132px; }
.util-h-532 { height: 132px; }
.util-min-h-532 { min-height: 132px; }
.util-max-w-532 { max-width: 532px; }
.util-rounded-533 { border-radius: 5px; }
.util-border-533 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-533 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-534 { opacity: 0.34; }
.util-blur-534 { backdrop-filter: blur(6px); }
.util-z-534 { z-index: 34; }

.util-flex-535 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-535 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-535 { transform: translateY(7px); }

.util-m-536 { margin: 8px; }
.util-mt-536 { margin-top: 8px; }
.util-mb-536 { margin-bottom: 8px; }
.util-mx-536 { margin-inline: 8px; }
.util-p-537 { padding: 9px; }
.util-pt-537 { padding-top: 9px; }
.util-px-537 { padding-inline: 25px; }
.util-py-537 { padding-block: 25px; }
.util-gap-538 { gap: 26px; }
.util-gap-x-538 { column-gap: 26px; }
.util-gap-y-538 { row-gap: 26px; }

.util-text-539 { font-size: 23px; line-height: 1.5; }
.util-leading-539 { line-height: 1.59; }
.util-tracking-539 { letter-spacing: 0.090em; }

.util-w-540 { width: 140px; }
.util-h-540 { height: 140px; }
.util-min-h-540 { min-height: 140px; }
.util-max-w-540 { max-width: 540px; }
.util-rounded-541 { border-radius: 13px; }
.util-border-541 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-541 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-542 { opacity: 0.42; }
.util-blur-542 { backdrop-filter: blur(14px); }
.util-z-542 { z-index: 42; }

.util-flex-543 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-543 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-543 { transform: translateY(3px); }

.util-m-544 { margin: 16px; }
.util-mt-544 { margin-top: 16px; }
.util-mb-544 { margin-bottom: 16px; }
.util-mx-544 { margin-inline: 16px; }
.util-p-545 { padding: 17px; }
.util-pt-545 { padding-top: 17px; }
.util-px-545 { padding-inline: 1px; }
.util-py-545 { padding-block: 1px; }
.util-gap-546 { gap: 2px; }
.util-gap-x-546 { column-gap: 2px; }
.util-gap-y-546 { row-gap: 2px; }

.util-text-547 { font-size: 31px; line-height: 1.5; }
.util-leading-547 { line-height: 1.67; }
.util-tracking-547 { letter-spacing: 0.070em; }

.util-w-548 { width: 148px; }
.util-h-548 { height: 148px; }
.util-min-h-548 { min-height: 148px; }
.util-max-w-548 { max-width: 548px; }
.util-rounded-549 { border-radius: 21px; }
.util-border-549 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-549 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-550 { opacity: 0.50; }
.util-blur-550 { backdrop-filter: blur(6px); }
.util-z-550 { z-index: 0; }

.util-flex-551 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-551 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-551 { transform: translateY(11px); }

.util-m-552 { margin: 24px; }
.util-mt-552 { margin-top: 24px; }
.util-mb-552 { margin-bottom: 24px; }
.util-mx-552 { margin-inline: 24px; }
.util-p-553 { padding: 25px; }
.util-pt-553 { padding-top: 25px; }
.util-px-553 { padding-inline: 9px; }
.util-py-553 { padding-block: 9px; }
.util-gap-554 { gap: 10px; }
.util-gap-x-554 { column-gap: 10px; }
.util-gap-y-554 { row-gap: 10px; }

.util-text-555 { font-size: 17px; line-height: 1.5; }
.util-leading-555 { line-height: 1.75; }
.util-tracking-555 { letter-spacing: 0.050em; }

.util-w-556 { width: 156px; }
.util-h-556 { height: 156px; }
.util-min-h-556 { min-height: 156px; }
.util-max-w-556 { max-width: 556px; }
.util-rounded-557 { border-radius: 5px; }
.util-border-557 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-557 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-558 { opacity: 0.58; }
.util-blur-558 { backdrop-filter: blur(14px); }
.util-z-558 { z-index: 8; }

.util-flex-559 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-559 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-559 { transform: translateY(7px); }

.util-m-560 { margin: 32px; }
.util-mt-560 { margin-top: 32px; }
.util-mb-560 { margin-bottom: 32px; }
.util-mx-560 { margin-inline: 32px; }
.util-p-561 { padding: 33px; }
.util-pt-561 { padding-top: 33px; }
.util-px-561 { padding-inline: 17px; }
.util-py-561 { padding-block: 17px; }
.util-gap-562 { gap: 18px; }
.util-gap-x-562 { column-gap: 18px; }
.util-gap-y-562 { row-gap: 18px; }

.util-text-563 { font-size: 25px; line-height: 1.5; }
.util-leading-563 { line-height: 1.03; }
.util-tracking-563 { letter-spacing: 0.030em; }

.util-w-564 { width: 164px; }
.util-h-564 { height: 164px; }
.util-min-h-564 { min-height: 164px; }
.util-max-w-564 { max-width: 564px; }
.util-rounded-565 { border-radius: 13px; }
.util-border-565 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-565 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-566 { opacity: 0.66; }
.util-blur-566 { backdrop-filter: blur(6px); }
.util-z-566 { z-index: 16; }

.util-flex-567 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-567 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-567 { transform: translateY(3px); }

.util-m-568 { margin: 40px; }
.util-mt-568 { margin-top: 40px; }
.util-mb-568 { margin-bottom: 40px; }
.util-mx-568 { margin-inline: 40px; }
.util-p-569 { padding: 41px; }
.util-pt-569 { padding-top: 41px; }
.util-px-569 { padding-inline: 25px; }
.util-py-569 { padding-block: 25px; }
.util-gap-570 { gap: 26px; }
.util-gap-x-570 { column-gap: 26px; }
.util-gap-y-570 { row-gap: 26px; }

.util-text-571 { font-size: 33px; line-height: 1.5; }
.util-leading-571 { line-height: 1.11; }
.util-tracking-571 { letter-spacing: 0.010em; }

.util-w-572 { width: 172px; }
.util-h-572 { height: 172px; }
.util-min-h-572 { min-height: 172px; }
.util-max-w-572 { max-width: 572px; }
.util-rounded-573 { border-radius: 21px; }
.util-border-573 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-573 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-574 { opacity: 0.74; }
.util-blur-574 { backdrop-filter: blur(14px); }
.util-z-574 { z-index: 24; }

.util-flex-575 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-575 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-575 { transform: translateY(11px); }

.util-m-576 { margin: 0px; }
.util-mt-576 { margin-top: 0px; }
.util-mb-576 { margin-bottom: 0px; }
.util-mx-576 { margin-inline: 0px; }
.util-p-577 { padding: 1px; }
.util-pt-577 { padding-top: 1px; }
.util-px-577 { padding-inline: 1px; }
.util-py-577 { padding-block: 1px; }
.util-gap-578 { gap: 2px; }
.util-gap-x-578 { column-gap: 2px; }
.util-gap-y-578 { row-gap: 2px; }

.util-text-579 { font-size: 19px; line-height: 1.5; }
.util-leading-579 { line-height: 1.19; }
.util-tracking-579 { letter-spacing: 0.090em; }

.util-w-580 { width: 180px; }
.util-h-580 { height: 180px; }
.util-min-h-580 { min-height: 180px; }
.util-max-w-580 { max-width: 580px; }
.util-rounded-581 { border-radius: 5px; }
.util-border-581 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-581 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-582 { opacity: 0.82; }
.util-blur-582 { backdrop-filter: blur(6px); }
.util-z-582 { z-index: 32; }

.util-flex-583 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-583 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-583 { transform: translateY(7px); }

.util-m-584 { margin: 8px; }
.util-mt-584 { margin-top: 8px; }
.util-mb-584 { margin-bottom: 8px; }
.util-mx-584 { margin-inline: 8px; }
.util-p-585 { padding: 9px; }
.util-pt-585 { padding-top: 9px; }
.util-px-585 { padding-inline: 9px; }
.util-py-585 { padding-block: 9px; }
.util-gap-586 { gap: 10px; }
.util-gap-x-586 { column-gap: 10px; }
.util-gap-y-586 { row-gap: 10px; }

.util-text-587 { font-size: 27px; line-height: 1.5; }
.util-leading-587 { line-height: 1.27; }
.util-tracking-587 { letter-spacing: 0.070em; }

.util-w-588 { width: 188px; }
.util-h-588 { height: 188px; }
.util-min-h-588 { min-height: 188px; }
.util-max-w-588 { max-width: 588px; }
.util-rounded-589 { border-radius: 13px; }
.util-border-589 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-589 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-590 { opacity: 0.90; }
.util-blur-590 { backdrop-filter: blur(14px); }
.util-z-590 { z-index: 40; }

.util-flex-591 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-591 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-591 { transform: translateY(3px); }

.util-m-592 { margin: 16px; }
.util-mt-592 { margin-top: 16px; }
.util-mb-592 { margin-bottom: 16px; }
.util-mx-592 { margin-inline: 16px; }
.util-p-593 { padding: 17px; }
.util-pt-593 { padding-top: 17px; }
.util-px-593 { padding-inline: 17px; }
.util-py-593 { padding-block: 17px; }
.util-gap-594 { gap: 18px; }
.util-gap-x-594 { column-gap: 18px; }
.util-gap-y-594 { row-gap: 18px; }

.util-text-595 { font-size: 13px; line-height: 1.5; }
.util-leading-595 { line-height: 1.35; }
.util-tracking-595 { letter-spacing: 0.050em; }

.util-w-596 { width: 196px; }
.util-h-596 { height: 196px; }
.util-min-h-596 { min-height: 196px; }
.util-max-w-596 { max-width: 596px; }
.util-rounded-597 { border-radius: 21px; }
.util-border-597 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-597 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-598 { opacity: 0.98; }
.util-blur-598 { backdrop-filter: blur(6px); }
.util-z-598 { z-index: 48; }

.util-flex-599 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-599 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-599 { transform: translateY(11px); }

.util-m-600 { margin: 24px; }
.util-mt-600 { margin-top: 24px; }
.util-mb-600 { margin-bottom: 24px; }
.util-mx-600 { margin-inline: 24px; }
.util-p-601 { padding: 25px; }
.util-pt-601 { padding-top: 25px; }
.util-px-601 { padding-inline: 25px; }
.util-py-601 { padding-block: 25px; }
.util-gap-602 { gap: 26px; }
.util-gap-x-602 { column-gap: 26px; }
.util-gap-y-602 { row-gap: 26px; }

.util-text-603 { font-size: 21px; line-height: 1.5; }
.util-leading-603 { line-height: 1.43; }
.util-tracking-603 { letter-spacing: 0.030em; }

.util-w-604 { width: 204px; }
.util-h-604 { height: 204px; }
.util-min-h-604 { min-height: 204px; }
.util-max-w-604 { max-width: 604px; }
.util-rounded-605 { border-radius: 5px; }
.util-border-605 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-605 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-606 { opacity: 0.06; }
.util-blur-606 { backdrop-filter: blur(14px); }
.util-z-606 { z-index: 6; }

.util-flex-607 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-607 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-607 { transform: translateY(7px); }

.util-m-608 { margin: 32px; }
.util-mt-608 { margin-top: 32px; }
.util-mb-608 { margin-bottom: 32px; }
.util-mx-608 { margin-inline: 32px; }
.util-p-609 { padding: 33px; }
.util-pt-609 { padding-top: 33px; }
.util-px-609 { padding-inline: 1px; }
.util-py-609 { padding-block: 1px; }
.util-gap-610 { gap: 2px; }
.util-gap-x-610 { column-gap: 2px; }
.util-gap-y-610 { row-gap: 2px; }

.util-text-611 { font-size: 29px; line-height: 1.5; }
.util-leading-611 { line-height: 1.51; }
.util-tracking-611 { letter-spacing: 0.010em; }

.util-w-612 { width: 212px; }
.util-h-612 { height: 212px; }
.util-min-h-612 { min-height: 212px; }
.util-max-w-612 { max-width: 612px; }
.util-rounded-613 { border-radius: 13px; }
.util-border-613 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-613 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-614 { opacity: 0.14; }
.util-blur-614 { backdrop-filter: blur(6px); }
.util-z-614 { z-index: 14; }

.util-flex-615 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-615 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-615 { transform: translateY(3px); }

.util-m-616 { margin: 40px; }
.util-mt-616 { margin-top: 40px; }
.util-mb-616 { margin-bottom: 40px; }
.util-mx-616 { margin-inline: 40px; }
.util-p-617 { padding: 41px; }
.util-pt-617 { padding-top: 41px; }
.util-px-617 { padding-inline: 9px; }
.util-py-617 { padding-block: 9px; }
.util-gap-618 { gap: 10px; }
.util-gap-x-618 { column-gap: 10px; }
.util-gap-y-618 { row-gap: 10px; }

.util-text-619 { font-size: 15px; line-height: 1.5; }
.util-leading-619 { line-height: 1.59; }
.util-tracking-619 { letter-spacing: 0.090em; }

.util-w-620 { width: 220px; }
.util-h-620 { height: 220px; }
.util-min-h-620 { min-height: 220px; }
.util-max-w-620 { max-width: 620px; }
.util-rounded-621 { border-radius: 21px; }
.util-border-621 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-621 { box-shadow: 0 5px 13px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-622 { opacity: 0.22; }
.util-blur-622 { backdrop-filter: blur(14px); }
.util-z-622 { z-index: 22; }

.util-flex-623 { display: flex; align-items: center; justify-content: center; gap: 15px; }
.util-grid-623 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; }
.util-translate-623 { transform: translateY(11px); }

.util-m-624 { margin: 0px; }
.util-mt-624 { margin-top: 0px; }
.util-mb-624 { margin-bottom: 0px; }
.util-mx-624 { margin-inline: 0px; }
.util-p-625 { padding: 1px; }
.util-pt-625 { padding-top: 1px; }
.util-px-625 { padding-inline: 17px; }
.util-py-625 { padding-block: 17px; }
.util-gap-626 { gap: 18px; }
.util-gap-x-626 { column-gap: 18px; }
.util-gap-y-626 { row-gap: 18px; }

.util-text-627 { font-size: 23px; line-height: 1.5; }
.util-leading-627 { line-height: 1.67; }
.util-tracking-627 { letter-spacing: 0.070em; }

.util-w-628 { width: 228px; }
.util-h-628 { height: 228px; }
.util-min-h-628 { min-height: 228px; }
.util-max-w-628 { max-width: 628px; }
.util-rounded-629 { border-radius: 5px; }
.util-border-629 { border: 1px solid oklch(0.92 0.01 255); }
.util-shadow-629 { box-shadow: 0 5px 5px oklch(0.20 0.02 265 / 0.08); }

.util-opacity-630 { opacity: 0.30; }
.util-blur-630 { backdrop-filter: blur(6px); }
.util-z-630 { z-index: 30; }

.util-flex-631 { display: flex; align-items: center; justify-content: center; gap: 7px; }
.util-grid-631 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.util-translate-631 { transform: translateY(7px); }