:root{
  --ark-cyan: oklch(0.70 0.108 215);
  --ark-cyan-soft: oklch(0.93 0.035 215);
  --ark-violet: oklch(0.60 0.095 300);
  --ark-violet-soft: oklch(0.94 0.030 300);
  --ark-amber: oklch(0.74 0.115 75);
  --ark-amber-soft: oklch(0.95 0.035 75);
}

body{
  margin:0;
  background-color:var(--color-bg);
  color:var(--color-text);
  background-image:linear-gradient(to right, rgba(29,31,32,0.045) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(29,31,32,0.045) 1px, transparent 1px);
  background-size:56px 56px;
  overflow-x:hidden;
}
a{ color:var(--color-accent); text-decoration:none; }
a:hover{ color:var(--color-accent-700); }
::selection{ background: color-mix(in srgb, var(--ark-cyan) 32%, transparent); }

@keyframes ark-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes ark-dash{ to{ stroke-dashoffset:-240; } }
@keyframes ark-pulse{ 0%,100%{ opacity:.25; transform:scale(1); } 50%{ opacity:1; transform:scale(1.35); } }
@keyframes ark-scan{ 0%{ transform:translateY(-40px); opacity:0; } 12%,88%{ opacity:.9; } 100%{ transform:translateY(360px); opacity:0; } }
@keyframes ark-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes ark-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes ark-glow{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.55; } 50%{ transform:translate(4%,-6%) scale(1.18); opacity:.85; } }
@keyframes ark-grid-drift{ from{ background-position:0 0; } to{ background-position:44px 44px; } }
@keyframes ark-trace{ 0%{ left:0%; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@keyframes ark-sheen{ 0%{ transform:translateX(-120%) skewX(-18deg); } 55%,100%{ transform:translateX(320%) skewX(-18deg); } }
@keyframes ark-spin{ to{ transform:rotate(360deg); } }
@keyframes ark-ticker{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .85s cubic-bezier(.16,.7,.2,1), transform .85s cubic-bezier(.16,.7,.2,1); }
[data-reveal="left"]{ transform:translateX(-36px); }
[data-reveal="scale"]{ transform:scale(.94); }

.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cols-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ position:relative; color:var(--color-text); font-size:15px; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; transform:scaleX(0);
  transform-origin:left; transition:transform .32s cubic-bezier(.16,.7,.2,1);
  background:linear-gradient(90deg, var(--ark-cyan), var(--color-accent)); }
.nav-links a:hover{ color:var(--color-accent-700); }
.nav-links a:hover::after{ transform:scaleX(1); }

.marquee:hover .marquee-track{ animation-play-state:paused; }
.hide-desktop{ display:none !important; }

/* — hover treatments (replace design-canvas-only `style-hover` attributes) — */
.ark-btn-nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 22px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.ark-btn-hero-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 28px color-mix(in srgb, var(--color-accent) 42%, transparent); }
.ark-btn-hero-secondary:hover{ border-color:var(--ark-cyan); color:var(--color-accent-800); transform:translateY(-3px); }

.ark-card-hover-cyan:hover{ transform:translateY(-8px); box-shadow:0 18px 40px color-mix(in srgb, var(--ark-cyan) 26%, transparent); border-color:var(--ark-cyan); }
.ark-card-hover-violet:hover{ transform:translateY(-8px); box-shadow:0 18px 40px color-mix(in srgb, var(--ark-violet) 26%, transparent); border-color:var(--ark-violet); }
.ark-card-hover-amber:hover{ transform:translateY(-8px); box-shadow:0 18px 40px color-mix(in srgb, var(--ark-amber) 30%, transparent); border-color:var(--ark-amber); }
.ark-card-hover-accent:hover{ transform:translateY(-8px); box-shadow:0 18px 40px color-mix(in srgb, var(--color-accent) 28%, transparent); border-color:var(--color-accent); }

.ark-step-hover-cyan:hover{ background:color-mix(in srgb, var(--ark-cyan) 9%, transparent); }
.ark-step-hover-accent:hover{ background:color-mix(in srgb, var(--color-accent) 9%, transparent); }
.ark-step-hover-violet:hover{ background:color-mix(in srgb, var(--ark-violet) 9%, transparent); }
.ark-step-hover-amber:hover{ background:color-mix(in srgb, var(--ark-amber) 11%, transparent); }

.ark-btn-cta-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.ark-btn-cta-secondary:hover{ background:color-mix(in srgb, var(--ark-cyan) 18%, transparent); transform:translateY(-3px); }

@media(max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .cols-3,.cols-4{ grid-template-columns:1fr 1fr; }
  .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:18px; padding:24px 32px; background:var(--color-bg); border-bottom:1px solid var(--color-divider); display:none; }
  .nav-links.open{ display:flex; }
  .hide-desktop{ display:inline-flex !important; }
  .hide-mobile{ display:none !important; }
}
@media(max-width:560px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } .wrap{ padding:0 20px; } }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; }
}