@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
:root{
/* Base palette (verbatim from omnidesign site) */
--silver:#A6A6AA;
--dark-grey:#2B2B2F;
--black:#0E0E10;
--purple:#7D5CFF;
--lavender:#B89CFF;
--white:#F7F7FA;
--muted:rgba(247,247,250,0.68);
--line:rgba(166,166,170,0.16);
--glass:rgba(255,255,255,0.055);
/* Semantic aliases */
--bg-page:#0E0E10;
--bg-page-gradient:radial-gradient(circle at 18% 12%, rgba(125,92,255,0.2), transparent 30rem),radial-gradient(circle at 82% 18%, rgba(184,156,255,0.12), transparent 26rem),linear-gradient(135deg,#050506 0%,#0E0E10 52%,#18181b 100%);
--surface-card:var(--glass);
--surface-card-hover:rgba(255,255,255,0.075);
--surface-header:rgba(14,14,16,0.76);
--border-default:var(--line);
--border-accent:rgba(184,156,255,0.34);
--border-accent-strong:rgba(184,156,255,0.42);
--text-primary:var(--white);
--text-body:var(--muted);
--text-accent:var(--lavender);
--text-faint:rgba(247,247,250,0.48);
--accent:var(--purple);
--accent-soft:rgba(125,92,255,0.1);
--accent-tint:rgba(125,92,255,0.08);
--gradient-primary:linear-gradient(135deg,var(--purple),var(--lavender));
--gradient-text:linear-gradient(90deg,var(--silver),var(--white),var(--lavender));
}
:root{
--font-sans:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
/* Display / headings */
--text-h1-size:clamp(3.4rem,7.6vw,7rem);
--text-h1-line:0.96;
--text-h1-tracking:-0.075em;
--text-h1-weight:600;
--text-h2-size:clamp(2.1rem,4.6vw,3.8rem);
--text-h2-line:1.05;
--text-h2-tracking:-0.055em;
--text-h2-weight:600;
--text-h3-size:1.35rem;
/* Body */
--text-body-size:0.94rem;
--text-body-line:1.75;
--text-intro-size:1.05rem;
--text-intro-line:1.85;
/* Labels */
--text-kicker-size:0.72rem;
--text-kicker-tracking:0.26em;
--text-kicker-weight:600;
--text-cardtitle-size:1.02rem;
--text-cardtitle-tracking:0.08em;
--text-brand-tracking:0.34em;
--text-nav-size:0.86rem;
}
:root{
--space-1:12px;
--space-2:18px;
--space-3:28px;
--space-4:38px;
--space-5:44px;
--space-6:80px;
--space-hero-top:112px;
--container-max:1160px;
--container-gutter:40px;
--nav-height:78px;
--grid-gap:18px;
--section-gap:38px;
}
:root{
/* Radii */
--radius-pill:999px;
--radius-card:26px;
--radius-process:28px;
--radius-hero:34px;
--radius-icon:14px;
/* Shadows */
--shadow-card:0 20px 55px rgba(0,0,0,0.18);
--shadow-hero:0 26px 80px rgba(0,0,0,0.42);
--shadow-button:0 18px 48px rgba(125,92,255,0.3);
--shadow-logo-glow:drop-shadow(0 18px 38px rgba(125,92,255,0.36));
/* Motion */
--transition-ui:180ms ease; /* @kind other */
/* Blur */
--blur-header:blur(18px); /* @kind other */
/* Grid texture overlay */
--texture-grid:linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); /* @kind other */
--texture-grid-size:52px 52px;
}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-sans);background:#0A0A0C;color:var(--white);overflow-x:hidden}
a{color:var(--muted);text-decoration:none;transition:color var(--transition-ui)}a:hover{color:var(--white)}
.container{width:min(1160px,calc(100% - 48px));margin:0 auto}
.kicker{color:var(--lavender);text-transform:uppercase;letter-spacing:.26em;font-size:.72rem;font-weight:600}
.grad{color:transparent;background:var(--gradient-text);background-clip:text;-webkit-background-clip:text}
h2{margin:0;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.05em;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-weight:500;font-family:inherit;min-height:52px;padding:0 26px;font-size:.94rem;cursor:pointer;border:none;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}.btn:focus-visible,a:focus-visible{outline:2px solid var(--lavender);outline-offset:3px}
.btn-primary{color:#fff;background:var(--gradient-primary);box-shadow:var(--shadow-button)}.btn-primary:hover{box-shadow:0 22px 60px rgba(125,92,255,.42)}
.btn-ghost{color:var(--white);background:rgba(255,255,255,.03);border:1px solid var(--line)}.btn-ghost:hover{border-color:var(--border-accent-strong)}
.btn-nav{min-height:42px;padding:0 18px;font-size:.86rem;color:var(--white);background:var(--accent-soft);border:1px solid var(--border-accent-strong)}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,10,12,.72);border-bottom-color:var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-links{display:flex;align-items:center;gap:30px;font-size:.86rem}
.brand{display:flex;align-items:center;gap:14px;color:var(--white)}
.brand img{width:40px;height:auto;display:block}
.brand strong{font-size:.92rem;font-weight:400;letter-spacing:.3em}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:999px;color:var(--white);min-height:42px;padding:0 16px;font-family:inherit;font-size:.82rem;cursor:pointer}
/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(166,166,170,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(166,166,170,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 70% 40%,black,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,black,transparent 72%)}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(10,10,12,.9),transparent 60%);pointer-events:none}
.hero-inner{position:relative;z-index:2}
.hero h1{margin:26px 0 0;max-width:900px;font-size:clamp(3rem,7.2vw,6.4rem);line-height:.98;letter-spacing:-.07em;font-weight:600}
.hero p{max-width:560px;margin:28px 0 0;color:var(--muted);font-size:1.06rem;line-height:1.8}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.scroll-hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-faint);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase}
.scroll-hint span{display:block;width:1px;height:44px;background:linear-gradient(to bottom,var(--lavender),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* reveals */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
section{padding:110px 0;position:relative}
.sec-head{display:grid;grid-template-columns:.85fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.sec-head .kicker{display:block;margin-bottom:16px}
.sec-head p{margin:0;color:var(--muted);line-height:1.85;font-size:1rem}
/* problems */
.problems{border-top:1px solid var(--line)}
.prob-lines{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.prob{display:grid;grid-template-columns:70px 1fr auto;gap:28px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.prob i{font-style:normal;font-weight:300;font-size:1rem;color:var(--text-faint);font-variant-numeric:tabular-nums}
.prob b{font-weight:500;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-.03em}
.prob small{color:var(--text-faint);font-size:.8rem;text-align:right}
.prob-note{margin-top:34px;color:var(--muted);max-width:640px;line-height:1.85}
/* services accordion */
.svc{border-top:1px solid var(--line)}
.svc-item{border-bottom:1px solid var(--line)}
.svc-btn{width:100%;display:grid;grid-template-columns:70px 1fr auto;gap:28px;align-items:center;background:none;border:none;color:var(--white);font-family:inherit;text-align:left;padding:30px 0;cursor:pointer}
.svc-btn i{font-style:normal;font-weight:300;color:rgba(184,156,255,.7);font-size:1rem;font-variant-numeric:tabular-nums}
.svc-btn b{font-weight:500;font-size:clamp(1.15rem,2.2vw,1.55rem);letter-spacing:-.03em;transition:color .2s ease}
.svc-btn .x{width:34px;height:34px;border:1px solid var(--line);border-radius:999px;display:grid;place-items:center;color:var(--lavender);font-weight:300;font-size:1.1rem;transition:transform .35s ease,border-color .2s ease}
.svc-item:hover .x{border-color:var(--border-accent-strong)}
.svc-item.open .x{transform:rotate(45deg)}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1)}
.svc-item.open .svc-body{grid-template-rows:1fr}
.svc-body>div{overflow:hidden}
.svc-detail{display:grid;grid-template-columns:1fr 300px;gap:44px;padding:0 0 36px 98px;align-items:center}
.svc-detail p{margin:0;color:var(--muted);line-height:1.85;max-width:560px}
.svc-vis{height:150px;border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden;background:rgba(255,255,255,.02)}
.svc-vis::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(125,92,255,.18),transparent 60%)}
.vis-grid{background-image:linear-gradient(rgba(184,156,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(184,156,255,.14) 1px,transparent 1px);background-size:22px 22px}
.vis-cols{background-image:repeating-linear-gradient(90deg,rgba(184,156,255,.16) 0 1px,transparent 1px 34px)}
.vis-rings{background-image:repeating-radial-gradient(circle at 50% 50%,transparent 0 17px,rgba(184,156,255,.16) 17px 18px)}
.vis-diag{background-image:repeating-linear-gradient(45deg,rgba(184,156,255,.13) 0 1px,transparent 1px 26px)}
.vis-dots{background-image:radial-gradient(rgba(184,156,255,.3) 1px,transparent 1.5px);background-size:24px 24px}
.vis-rows{background-image:repeating-linear-gradient(0deg,rgba(184,156,255,.14) 0 1px,transparent 1px 22px)}
/* work */
.work-item{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px 0;border-top:1px solid var(--line)}
.work-item:last-of-type{border-bottom:1px solid var(--line)}
.work-item.flip .work-copy{order:2}
.work-item.wide{grid-template-columns:1fr}
.work-vis{position:relative;min-height:320px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.work-item.wide .work-vis{min-height:380px}
.work-vis .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-faint);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;text-align:center;line-height:2}
.work-vis::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 15%,rgba(125,92,255,.16),transparent 55%)}
.work-vis .frame{position:absolute;inset:20px;border:1px solid rgba(184,156,255,.18);border-radius:14px;transition:transform .6s ease}
.work-item:hover .frame{transform:translateY(-6px)}
.work-cat{color:var(--lavender);text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;font-weight:600}
.work-copy h3{margin:14px 0 0;font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.04em;font-weight:600}
.work-copy p{color:var(--muted);line-height:1.8;margin:16px 0 0;max-width:480px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.work-cta{display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:var(--lavender);font-size:.86rem;font-weight:500}
.work-cta:hover{color:var(--white)}
/* process */
.timeline{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:10px}
.timeline::before{content:"";position:absolute;top:11px;left:0;right:0;height:1px;background:var(--line)}
.timeline .prog{position:absolute;top:11px;left:0;height:1px;background:var(--gradient-primary);width:0;transition:width .2s linear}
.step{position:relative;padding-top:40px}
.step::before{content:"";position:absolute;top:6px;left:0;width:11px;height:11px;border-radius:50%;border:1px solid var(--line);background:#0A0A0C;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.step.lit::before{border-color:var(--lavender);background:var(--purple);box-shadow:0 0 14px rgba(125,92,255,.7)}
.step b{display:block;font-weight:500;font-size:1.05rem;letter-spacing:-.02em}
.step p{margin:10px 0 0;color:var(--muted);font-size:.82rem;line-height:1.7}
/* why */
.why-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.why-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline}
.why-row b{font-weight:500;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.03em}
.why-row p{margin:0;color:var(--muted);line-height:1.8;font-size:.92rem}
/* about */
.about-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.about-photo{aspect-ratio:4/5;border:1px solid var(--line);border-radius:22px;display:grid;place-items:center;color:var(--text-faint);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));text-align:center;line-height:2}
.about-copy p{color:var(--muted);line-height:1.9;margin:0 0 18px;max-width:600px}
.about-copy .edit{border:1px dashed rgba(184,156,255,.3);border-radius:12px;padding:14px 18px;color:var(--text-faint);font-size:.84rem}
/* cta */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line)}
#ctaCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}
.cta-inner{position:relative;z-index:2;text-align:center;padding:40px 0}
.cta h2{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.06em}
.cta p{color:var(--muted);margin:22px auto 0;max-width:520px;line-height:1.85}
.cta-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:38px}
.cta-meta{margin-top:44px;color:var(--text-faint);font-size:.8rem;letter-spacing:.08em}
.cta-meta a{color:var(--muted)}
/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:.84rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.foot-grid .tag{margin-top:14px;color:var(--text-faint);max-width:280px;line-height:1.7}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col span{color:var(--text-faint);text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;margin-bottom:4px}
.foot-base{display:flex;justify-content:space-between;gap:20px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--text-faint);font-size:.78rem;flex-wrap:wrap}
.foot-base nav{display:flex;gap:22px}
/* responsive */
@media (max-width:1024px){.sec-head{grid-template-columns:1fr;gap:18px}.svc-detail{grid-template-columns:1fr;padding-left:98px}.about-grid{grid-template-columns:280px 1fr;gap:36px}}
@media (max-width:768px){
.nav-links{display:none}.nav-links.openm{display:flex;position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:rgba(10,10,12,.97);border-bottom:1px solid var(--line);padding:10px 24px 24px}
.nav-links.openm a{padding:14px 0;font-size:1.05rem;width:100%}.nav-links.openm .btn{margin-top:12px}
.menu-btn{display:block}
section{padding:80px 0}.hero{padding-top:110px}
.timeline{grid-template-columns:1fr;gap:0}.timeline::before,.timeline .prog{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}.timeline .prog{transition:height .2s linear}
.step{padding:0 0 34px 34px}.step::before{top:4px}
.work-item,.work-item.flip{grid-template-columns:1fr}.work-item.flip .work-copy{order:0}
.why-row{grid-template-columns:1fr;gap:10px}
.about-grid{grid-template-columns:1fr}.about-photo{max-width:300px}
.svc-detail{padding-left:0}
.prob{grid-template-columns:44px 1fr}.prob small{display:none}
.foot-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:480px){.svc-btn{grid-template-columns:34px 1fr auto;gap:12px}.svc-detail{padding-left:0}.prob{grid-template-columns:34px 1fr;gap:14px}.hero h1{font-size:2.8rem}.hero-ctas .btn{width:100%}.cta-actions{flex-direction:column;align-items:stretch}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}.scroll-hint span{animation:none}*{transition-duration:.01ms !important}}

/* hero entrance */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .kicker,.hero h1,.hero p,.hero-ctas{animation:rise .7s cubic-bezier(.2,.6,.2,1) both}
.hero h1{animation-delay:.08s}.hero p{animation-delay:.16s}.hero-ctas{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.hero .kicker,.hero h1,.hero p,.hero-ctas{animation:none}}
/* logo fallback */
.brand img[hidden]{display:none}