/* ========================================================== INTELLORA TECH — DESIGN SYSTEM Multipage, short pages, blog-grade reading typography. ========================================================== */ :root{ /* type */ --f-dsp:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --f-body:'Source Serif 4',Georgia,'Times New Roman',serif; --f-ui:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --t-xs:.75rem; --t-sm:.9375rem; --t-bd:1.0625rem; --t-md:1.1875rem; --t-lg:1.4375rem; /* neutrals */ --paper:#FBF9F5; --surface:#FFFFFF; --surface-2:#F5F1EA; --surface-3:#EDE8DF; --ink:#14212E; --ink-soft:#495A6B; --ink-dim:#7B8896; --line:#E5DFD4; --line-2:#D3CBBD; --inv:#F4F1EB; --inv-soft:#A9B6C2; /* brand */ --brand:#0E6E5E; --brand-2:#13907A; --brand-ink:#0B4F44; --coral:#DC5B3C; --gold:#D9982B; --indigo:#4C5BD4; --plum:#8B4A9C; --deep:#0F1D2B; /* per-section accent, overridden on */ --accent:var(--brand); --accent-soft:#E7F2EE; /* shape */ --r:10px; --r-lg:16px; --r-xl:24px; --shadow:0 1px 2px rgba(20,33,46,.05),0 8px 24px -12px rgba(20,33,46,.14); --shadow-lg:0 2px 4px rgba(20,33,46,.05),0 20px 48px -20px rgba(20,33,46,.24); /* space */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem; --gut:clamp(1.125rem,4vw,2.5rem); --maxw:74rem; --measure:68ch; --d:.2s; --e:cubic-bezier(.22,.61,.36,1); color-scheme:light; } body[data-accent="emerald"]{--accent:#0E6E5E;--accent-soft:#E6F2EE} body[data-accent="indigo"] {--accent:#4C5BD4;--accent-soft:#ECEEFB} body[data-accent="gold"] {--accent:#B8801E;--accent-soft:#FAF1DF} body[data-accent="coral"] {--accent:#C94F31;--accent-soft:#FCEDE8} body[data-accent="plum"] {--accent:#7E4290;--accent-soft:#F5EBF8} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#0B1521; --surface:#111E2C; --surface-2:#16243380; --surface-3:#1B2B3B; --ink:#E9EEF3; --ink-soft:#AEBECC; --ink-dim:#8394A4; --line:#22323F; --line-2:#2D404F; --inv:#F4F1EB; --inv-soft:#A9B6C2; --brand:#3FB49C; --brand-2:#57CDB3; --brand-ink:#8FE0CD; --coral:#F0805F; --gold:#EDB94F; --indigo:#8B96EE; --plum:#C085D3; --deep:#08111B; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 20px 48px -20px rgba(0,0,0,.7); color-scheme:dark; } :root:not([data-theme="light"]) body[data-accent="emerald"]{--accent:#3FB49C;--accent-soft:#12312C} :root:not([data-theme="light"]) body[data-accent="indigo"] {--accent:#8B96EE;--accent-soft:#1C2340} :root:not([data-theme="light"]) body[data-accent="gold"] {--accent:#EDB94F;--accent-soft:#332811} :root:not([data-theme="light"]) body[data-accent="coral"] {--accent:#F0805F;--accent-soft:#361C15} :root:not([data-theme="light"]) body[data-accent="plum"] {--accent:#C085D3;--accent-soft:#2C1A33} } :root[data-theme="dark"]{ --paper:#0B1521; --surface:#111E2C; --surface-2:#16243380; --surface-3:#1B2B3B; --ink:#E9EEF3; --ink-soft:#AEBECC; --ink-dim:#8394A4; --line:#22323F; --line-2:#2D404F; --brand:#3FB49C; --brand-2:#57CDB3; --brand-ink:#8FE0CD; --coral:#F0805F; --gold:#EDB94F; --indigo:#8B96EE; --plum:#C085D3; --deep:#08111B; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 20px 48px -20px rgba(0,0,0,.7); color-scheme:dark; } :root[data-theme="dark"] body[data-accent="emerald"]{--accent:#3FB49C;--accent-soft:#12312C} :root[data-theme="dark"] body[data-accent="indigo"] {--accent:#8B96EE;--accent-soft:#1C2340} :root[data-theme="dark"] body[data-accent="gold"] {--accent:#EDB94F;--accent-soft:#332811} :root[data-theme="dark"] body[data-accent="coral"] {--accent:#F0805F;--accent-soft:#361C15} :root[data-theme="dark"] body[data-accent="plum"] {--accent:#C085D3;--accent-soft:#2C1A33} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; font-family:var(--f-body); font-size:var(--t-bd); line-height:1.75; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; display:flex; flex-direction:column; min-height:100vh; } /* living background: soft colour fields behind the page */ body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(58rem 32rem at 8% -6%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 60%), radial-gradient(46rem 28rem at 98% 4%, color-mix(in srgb,var(--gold) 20%,transparent), transparent 58%), radial-gradient(50rem 32rem at 74% 92%, color-mix(in srgb,var(--indigo) 16%,transparent), transparent 60%), radial-gradient(38rem 26rem at 24% 62%, color-mix(in srgb,var(--coral) 11%,transparent), transparent 62%); } h1,h2,h3,h4{font-family:var(--f-dsp);font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--ink)} h1{font-size:clamp(2.125rem,1.4rem + 3vw,3.375rem);letter-spacing:-.03em} h2{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.25rem)} h3{font-size:var(--t-lg)} h4{font-size:var(--t-md)} p{margin:0} a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px} a:hover{text-decoration-color:currentColor} img{max-width:100%;height:auto;display:block} ul,ol{margin:0;padding:0} :focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px} ::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)} hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .narrow{max-width:46rem} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:var(--s3) var(--s4);border-radius:0 0 var(--r) 0} .skip:focus{left:0} /* ---------- header ---------- */ .hdr{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid var(--line); } .hdr-in{display:flex;align-items:center;gap:var(--s5);min-height:4.25rem} .brand{display:flex;align-items:center;gap:.625rem;font-family:var(--f-dsp);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;flex-shrink:0} .brand-mark{width:2rem;height:2rem;border-radius:9px;background:linear-gradient(140deg,var(--brand),var(--brand-2));display:grid;place-items:center;flex-shrink:0;box-shadow:0 2px 8px -2px color-mix(in srgb,var(--brand) 60%,transparent)} .nav{display:flex;align-items:center;gap:var(--s5);margin-left:auto;font-family:var(--f-ui)} .nav a{font-size:.9375rem;font-weight:500;color:var(--ink-soft);text-decoration:none;padding:.375rem 0;position:relative} .nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transition:transform var(--d) var(--e)} .nav a:hover{color:var(--ink)} .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)} .nav a[aria-current="page"]{color:var(--ink)} .hdr-act{display:flex;align-items:center;gap:var(--s3);margin-left:var(--s4)} .icon-btn{background:none;border:1px solid var(--line-2);border-radius:9px;padding:.4375rem;cursor:pointer;color:var(--ink-soft);display:grid;place-items:center;transition:border-color var(--d),color var(--d)} .icon-btn:hover{border-color:var(--accent);color:var(--accent)} .burger{display:none;background:none;border:1px solid var(--line-2);border-radius:9px;padding:.5rem .5625rem;cursor:pointer;flex-direction:column;gap:4px} .burger i{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--d) var(--e),opacity .15s} .burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger.on i:nth-child(2){opacity:0} .burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mobile{display:none;border-top:1px solid var(--line);background:var(--paper);padding:var(--s3) var(--gut) var(--s5);font-family:var(--f-ui)} .mobile.open{display:block} .mobile a{display:block;padding:.75rem 0;font-size:1.0625rem;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)} .mobile .btn{margin-top:var(--s4);width:100%;justify-content:center;border-bottom:0} @media(max-width:1140px){ .nav{display:none} .burger{display:flex} .hdr-act{margin-left:auto} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--f-ui);font-size:.9375rem;font-weight:600;line-height:1; padding:.8125rem 1.25rem;border-radius:var(--r);border:1px solid transparent; cursor:pointer;text-decoration:none;transition:transform var(--d) var(--e),background var(--d),border-color var(--d),box-shadow var(--d); } .btn:hover{transform:translateY(-1px)} .btn-p{background:var(--accent);color:#fff;box-shadow:0 4px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent)} .btn-p:hover{background:color-mix(in srgb,var(--accent) 86%,#000);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent)} :root[data-theme="dark"] .btn-p,.btn-p{color:#fff} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-p{color:#08151A}} :root[data-theme="dark"] .btn-p{color:#08151A} .btn-s{background:var(--surface);color:var(--ink);border-color:var(--line-2)} .btn-s:hover{border-color:var(--accent);color:var(--accent)} .btn-g{background:transparent;color:var(--ink-soft);padding-inline:.25rem} .btn-g:hover{color:var(--accent)} .btn .ar{transition:transform var(--d) var(--e)} .btn:hover .ar{transform:translateX(3px)} .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none} /* ---------- page furniture ---------- */ .crumb{font-family:var(--f-ui);font-size:.8125rem;color:var(--ink-dim);padding:var(--s5) 0 0;display:flex;gap:.5rem;flex-wrap:wrap} .crumb a{color:var(--ink-dim);text-decoration:none} .crumb a:hover{color:var(--accent)} main{flex:1 0 auto;padding-bottom:var(--s8)} .eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);background:var(--accent-soft); border-radius:100px;padding:.375rem .75rem;margin-bottom:var(--s4); } .page-head{padding:var(--s6) 0 var(--s6)} .page-head h1{max-width:20ch} .lead{font-size:var(--t-md);line-height:1.7;color:var(--ink-soft);max-width:var(--measure);margin-top:var(--s4)} .row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center} .mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}.mt6{margin-top:var(--s6)}.mt7{margin-top:var(--s7)} .mb3{margin-bottom:var(--s3)}.mb4{margin-bottom:var(--s4)}.mb5{margin-bottom:var(--s5)}.mb6{margin-bottom:var(--s6)} .mono{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.05em;color:var(--ink-dim)} .ui{font-family:var(--f-ui)} .soft{color:var(--ink-soft)} .dim{color:var(--ink-dim)} .ctr{text-align:center} .section{padding:var(--s7) 0} .section-tint{background:var(--accent-soft);border-block:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s7) var(--s5);margin-block:var(--s6)} /* ---------- grids & cards ---------- */ .grid{display:grid;gap:var(--s5);grid-template-columns:1fr} @media(min-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}} @media(min-width:960px){.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--s5);display:flex;flex-direction:column;gap:.625rem; box-shadow:var(--shadow);transition:transform var(--d) var(--e),box-shadow var(--d),border-color var(--d); text-decoration:none;color:inherit;position:relative;overflow:hidden; } a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--card-accent,var(--accent)) 45%,var(--line))} .card-accent::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--card-accent,var(--accent))} .card h3{font-size:var(--t-md)} .card p{font-size:var(--t-sm);color:var(--ink-soft);line-height:1.65} .card .go{margin-top:auto;font-family:var(--f-ui);font-size:.875rem;font-weight:600;color:var(--card-accent,var(--accent));padding-top:var(--s3)} .k-emerald{--card-accent:var(--brand)} .k-indigo{--card-accent:var(--indigo)} .k-gold{--card-accent:var(--gold)} .k-coral{--card-accent:var(--coral)} .k-plum{--card-accent:var(--plum)} .k-deep{--card-accent:var(--deep)} .chip{ display:inline-flex;align-items:center;gap:.375rem; font-family:var(--f-ui);font-size:.8125rem;font-weight:500; color:var(--ink-soft);background:var(--surface);border:1px solid var(--line-2); border-radius:100px;padding:.3125rem .6875rem;text-decoration:none; } a.chip:hover{border-color:var(--accent);color:var(--accent)} .chips{display:flex;flex-wrap:wrap;gap:.5rem} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)} .stat .v{font-family:var(--f-dsp);font-size:2.25rem;font-weight:700;line-height:1;color:var(--accent);letter-spacing:-.03em} .stat .k{font-family:var(--f-ui);font-size:.875rem;color:var(--ink-soft);margin-top:.5rem} /* definition rows */ .rows{border-top:1px solid var(--line)} .rows > div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .rows .n{font-family:var(--f-ui);font-weight:600;font-size:var(--t-sm)} .rows .m{font-size:var(--t-sm);color:var(--ink-soft)} .rows .d{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-dim);text-align:right} /* service list */ .svc{list-style:none;display:grid;gap:var(--s4)} .svc li{padding-left:var(--s5);position:relative} .svc li::before{content:'';position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--accent);border-radius:2px} .svc b{font-family:var(--f-ui);font-weight:600;display:block;font-size:var(--t-sm)} .svc span{font-size:var(--t-sm);color:var(--ink-soft);line-height:1.6} /* ========================================================== PIPELINE GRAPHIC — animated hero diagram ========================================================== */ .pgfx{--cyc:9s;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .pgfx-hd{position:relative;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:.6875rem 1rem;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;color:var(--ink-dim)} .pgfx-hd .lv{display:inline-flex;align-items:center;gap:.4375rem;color:var(--brand)} .dot-live{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:pl 2.2s ease-in-out infinite} @keyframes pl{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}50%{opacity:.6;box-shadow:0 0 0 6px transparent}} .sweep{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);transform-origin:left;animation:swp var(--cyc) cubic-bezier(.4,0,.2,1) infinite} @keyframes swp{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}88%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}} .pgfx-bd{position:relative;display:grid;grid-template-columns:1fr;gap:var(--s5);padding:var(--s5)} @media(min-width:900px){.pgfx-bd{grid-template-columns:1fr 13rem 1fr;gap:var(--s4)}} .pcol-l{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink-dim);margin-bottom:.625rem} .pcol-l em{font-style:normal;color:var(--coral)} .pcol-l em.ok{color:var(--brand)} .src{display:flex;align-items:center;gap:.5625rem;padding:.5rem 0;border-top:1px solid var(--line);font-size:.875rem;font-family:var(--f-ui);animation:jit var(--cyc) ease-in-out infinite} .src:first-of-type{border-top:none;padding-top:0} .src:nth-of-type(2){animation-delay:-.6s}.src:nth-of-type(3){animation-delay:-1.2s}.src:nth-of-type(4){animation-delay:-1.8s} @keyframes jit{0%,100%{transform:translateX(0);opacity:1}6%{transform:translateX(-2px);opacity:.55}10%{transform:translateX(2px);opacity:1}14%{transform:translateX(0)}} .src .sd{width:7px;height:7px;border-radius:2px;background:var(--coral);flex-shrink:0} .src .sn{flex:1} .src .sm{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-dim)} .pipe{display:flex;flex-direction:column;justify-content:center;height:100%} .pipe-n{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;color:var(--brand);text-align:center;margin-bottom:.75rem} .pipe-rail{position:relative;height:4px;background:var(--surface-3);border-radius:3px;margin-bottom:.875rem;overflow:hidden} .pipe-rail u{position:absolute;inset:0;background:linear-gradient(90deg,var(--brand),var(--gold));transform-origin:left;animation:fill var(--cyc) cubic-bezier(.4,0,.2,1) infinite} @keyframes fill{0%{transform:scaleX(0)}62%{transform:scaleX(1)}86%{transform:scaleX(1);opacity:1}92%{opacity:0}100%{transform:scaleX(0);opacity:0}} .pipe-rail i{position:absolute;top:-3px;left:-12px;width:10px;height:10px;border-radius:50%;background:var(--gold);animation:fl 2.2s linear infinite} .pipe-rail i:nth-of-type(2){animation-delay:.7s}.pipe-rail i:nth-of-type(3){animation-delay:1.4s} @keyframes fl{from{left:-12px}to{left:100%}} .pipe-st{display:flex;justify-content:space-between;gap:4px;margin-bottom:.875rem} .pipe-st b{flex:1;text-align:center;font-family:var(--f-mono);font-size:9px;font-weight:500;color:var(--ink-dim);padding:.3125rem .125rem;border-radius:4px;background:var(--surface);border:1px solid var(--line);animation:ign var(--cyc) ease-out infinite} .pipe-st b:nth-of-type(1){animation-delay:.3s}.pipe-st b:nth-of-type(2){animation-delay:1.4s} .pipe-st b:nth-of-type(3){animation-delay:2.5s}.pipe-st b:nth-of-type(4){animation-delay:3.6s} @keyframes ign{0%,2%{color:var(--ink-dim);background:var(--surface);border-color:var(--line)}6%{color:#14212E;background:var(--gold);border-color:var(--gold)}14%,80%{color:#fff;background:var(--brand);border-color:var(--brand)}92%,100%{color:var(--ink-dim);background:var(--surface);border-color:var(--line)}} .pipe-tag{text-align:center;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:.375rem .75rem} .flow{display:none} @media(min-width:900px){.flow{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}} .flow span{position:absolute;width:9px;height:9px;border-radius:50%;margin:-4.5px 0 0 -4.5px;animation:pk var(--cyc) cubic-bezier(.45,.05,.55,.95) infinite} @keyframes pk{0%{left:27%;top:var(--y0);background:var(--coral);opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1)}40%{left:46%;top:50%;background:var(--coral)}52%{left:54%;top:50%;background:var(--gold);transform:scale(1.35)}64%{transform:scale(1)}88%{left:73%;top:var(--y1);background:var(--brand);opacity:1}100%{left:75%;top:var(--y1);background:var(--brand);opacity:0;transform:scale(.4)}} .out{display:flex;align-items:baseline;justify-content:space-between;gap:.625rem;padding:.5rem 0;border-top:1px solid var(--line);animation:res var(--cyc) ease-out infinite} .out:first-of-type{border-top:none;padding-top:0} .out:nth-of-type(1){animation-delay:.2s}.out:nth-of-type(2){animation-delay:.7s}.out:nth-of-type(3){animation-delay:1.2s} @keyframes res{0%,52%{opacity:.28;transform:translateX(9px)}62%,88%{opacity:1;transform:translateX(0)}100%{opacity:.28;transform:translateX(9px)}} .out .ol{font-family:var(--f-ui);font-size:.875rem;color:var(--ink-soft)} .out .ov{font-family:var(--f-mono);font-size:.875rem;color:var(--brand);font-weight:500} /* ========================================================== ORBIT — six pillars rotating around the practice ========================================================== */ .orbit-w{display:flex;flex-direction:column;align-items:center} .orbit{--size:clamp(19rem,74vw,33rem);--r1:calc(var(--size)*.252);--r2:calc(var(--size)*.42);position:relative;width:var(--size);height:var(--size)} .orb-halo{position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%);animation:halo 7s ease-in-out infinite} @keyframes halo{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}50%{transform:translate(-50%,-50%) scale(1.13);opacity:.45}} .ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed var(--line-2)} .ring1{width:calc(var(--r1)*2);height:calc(var(--r1)*2);animation:sp1 54s linear infinite} .ring2{width:calc(var(--r2)*2);height:calc(var(--r2)*2);border-color:var(--line);animation:sp2 84s linear infinite} @keyframes sp1{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}} @keyframes sp2{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}} .onode{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--rr)*-1)) rotate(calc(var(--a)*-1))} .ring1 .onode{--rr:var(--r1)} .ring2 .onode{--rr:var(--r2)} .ospin{position:absolute;left:0;top:0;width:0;height:0} .ring1 .ospin{animation:cs1 54s linear infinite} .ring2 .ospin{animation:cs2 84s linear infinite} @keyframes cs1{from{transform:rotate(0)}to{transform:rotate(-360deg)}} @keyframes cs2{from{transform:rotate(0)}to{transform:rotate(360deg)}} .opill{position:absolute;left:0;top:0;transform:translate(-50%,-50%);max-width:calc(var(--size)*.27);text-align:center;line-height:1.25;border-radius:100px;white-space:nowrap} .ring1 .opill{background:var(--pc,var(--brand));color:#fff;border:1px solid var(--pc,var(--brand));font-family:var(--f-ui);font-weight:600;font-size:clamp(9px,1.6vw,12px);padding:.5rem .8125rem;box-shadow:var(--shadow)} .ring2 .opill{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-family:var(--f-mono);font-size:clamp(8px,1.4vw,10.5px);padding:.4375rem .6875rem} .p-analytics{--pc:#0E6E5E}.p-governance{--pc:#4C5BD4}.p-security{--pc:#1F4E6B} .p-ai{--pc:#7E4290}.p-database{--pc:#C94F31}.p-cloud{--pc:#B8801E} .orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;height:30%;border-radius:50%;background:var(--deep);color:var(--inv);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.375rem;z-index:5;animation:cpul 4.5s ease-out infinite} @keyframes cpul{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 45%,transparent)}72%{box-shadow:0 0 0 clamp(1rem,4vw,1.875rem) transparent}100%{box-shadow:0 0 0 0 transparent}} .orb-core b{font-family:var(--f-dsp);font-size:clamp(11px,2vw,16px);font-weight:600;line-height:1.15} .orb-core i{font-style:normal;font-family:var(--f-mono);font-size:clamp(7px,1.2vw,9px);letter-spacing:.1em;color:var(--gold);margin-top:.25rem} .orb-cap{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.05em;color:var(--ink-dim);margin-top:var(--s5);text-align:center;max-width:36rem} @media(prefers-reduced-motion:reduce){ .sweep,.src,.pipe-rail u,.pipe-rail i,.pipe-st b,.flow span,.out,.dot-live, .ring,.ospin,.orb-core,.orb-halo{animation:none!important} .pipe-rail u{transform:scaleX(1)} .pipe-st b{color:#fff;background:var(--brand);border-color:var(--brand)} .out{opacity:1;transform:none} .flow{display:none} } /* ---------- organisation logo wall ---------- */ .logo-band{background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s6) var(--s5)} .logo-wall{display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr)} /* auto-fit so the row stays balanced whatever the number of organisations */ @media(min-width:760px){.logo-wall{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}} .logo-tile{ display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center; padding:var(--s5) var(--s3);background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg); transition:border-color var(--d),transform var(--d) var(--e); } .logo-tile:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-2px)} .logo-badge{ width:4rem;height:4rem;border-radius:14px;overflow:hidden;flex-shrink:0; background:#fff;border:1px solid var(--line); display:grid;place-items:center; } .logo-badge img{width:100%;height:100%;object-fit:cover;display:block} /* no logo file yet — read as a placeholder, not as a white brand block */ .logo-badge.is-empty{ background:var(--surface-3);border-style:dashed;border-color:var(--line-2); font-family:var(--f-dsp);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink-dim); } .logo-name{font-family:var(--f-ui);font-size:.8125rem;font-weight:600;line-height:1.35;color:var(--ink-soft)} .logo-tile:hover .logo-name{color:var(--ink)} /* ---------- capacity / limited scope ---------- */ .capacity{ background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),color-mix(in srgb,var(--gold) 8%,var(--surface))); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:var(--r-xl);padding:var(--s7) var(--s6); } .slots{display:flex;gap:.5rem;margin-top:var(--s4)} .slots i{width:2.75rem;height:.5rem;border-radius:100px;background:var(--accent);display:block} .slots i.open{background:color-mix(in srgb,var(--accent) 22%,transparent)} /* ---------- hero panel ---------- */ .hero{display:grid;gap:var(--s6);align-items:center;grid-template-columns:1fr} @media(min-width:960px){.hero{grid-template-columns:1.35fr .85fr;gap:var(--s7)}} .panel{ background:color-mix(in srgb,var(--surface) 86%,transparent); border:1px solid var(--line);border-radius:var(--r-xl); padding:var(--s6);box-shadow:var(--shadow-lg); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .panel .rows{border-top:0} .panel .rows > div:last-child{border-bottom:0;padding-bottom:0} /* ---------- prose (blog) ---------- */ .article{max-width:46rem;margin-inline:auto} .prose{max-width:var(--measure)} .prose p,.prose li{font-size:1.125rem;line-height:1.8} .prose > * + *{margin-top:var(--s5)} .prose h2{margin-top:var(--s7);font-size:1.625rem} .prose h3{margin-top:var(--s6);font-size:1.25rem} .prose ul,.prose ol{padding-left:1.25rem;display:grid;gap:.625rem} .prose li{padding-left:.25rem} .prose blockquote{ margin-inline:0;padding:var(--s4) var(--s5); border-left:3px solid var(--accent);background:var(--accent-soft); border-radius:0 var(--r) var(--r) 0;font-style:italic;color:var(--ink-soft); } .prose code{font-family:var(--f-mono);font-size:.9em;background:var(--surface-3);padding:.15em .4em;border-radius:5px} .prose strong{font-weight:600;color:var(--ink)} .post-meta{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;font-family:var(--f-ui);font-size:.875rem;color:var(--ink-dim);margin-top:var(--s4)} .proj-org{font-family:var(--f-ui);font-size:.875rem;font-weight:600;color:var(--card-accent,var(--accent))} .post-card{display:flex;flex-direction:column;gap:.5rem} .post-card .t{font-family:var(--f-dsp);font-weight:600;font-size:var(--t-md);line-height:1.3;letter-spacing:-.015em} .post-card .x{font-size:var(--t-sm);color:var(--ink-soft);line-height:1.6} /* ---------- forms ---------- */ .field{display:block;margin-bottom:var(--s5)} .field > label{display:block;font-family:var(--f-ui);font-size:.875rem;font-weight:600;margin-bottom:.4375rem} .field .hint{display:block;font-size:.8125rem;color:var(--ink-dim);margin-top:.375rem;font-family:var(--f-ui)} input[type=text],input[type=email],input[type=number],select{ font-family:var(--f-ui);font-size:1rem;width:100%; padding:.75rem .875rem;border:1px solid var(--line-2);border-radius:var(--r); background:var(--surface);color:var(--ink);transition:border-color var(--d),box-shadow var(--d); } input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none} .opt{ background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r); padding:.875rem 1rem;cursor:pointer;text-align:left;font-family:var(--f-ui);width:100%; display:flex;flex-direction:column;gap:.25rem;transition:border-color var(--d),background var(--d); } .opt:hover{border-color:var(--accent)} .opt b{font-weight:600;font-size:.9375rem} .opt span{font-size:.8125rem;color:var(--ink-soft);line-height:1.5} .opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)} .opt[aria-pressed="true"] b{color:var(--accent)} .opt-grid{display:grid;gap:.75rem;grid-template-columns:1fr} @media(min-width:560px){.opt-grid.g2{grid-template-columns:repeat(2,1fr)}} @media(min-width:860px){.opt-grid.g3{grid-template-columns:repeat(3,1fr)}} .callout{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-left:3px solid var(--accent);border-radius:var(--r);padding:var(--s4) var(--s5);font-size:var(--t-sm);line-height:1.65;color:var(--ink-soft)} .callout b{color:var(--ink)} .alert{background:color-mix(in srgb,#C0392B 10%,var(--surface));border:1px solid color-mix(in srgb,#C0392B 35%,var(--surface));border-left:3px solid #C0392B;border-radius:var(--r);padding:var(--s4);font-size:var(--t-sm);margin-bottom:var(--s5)} .trust{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5);font-family:var(--f-ui);font-size:.8125rem;color:var(--ink-dim)} .trust span{display:flex;align-items:center;gap:.375rem} /* estimator */ .q-h{font-family:var(--f-dsp);font-size:1.125rem;font-weight:600;letter-spacing:-.01em;margin:0 0 var(--s4)} .steps{display:flex;gap:var(--s4);font-family:var(--f-ui);font-size:.8125rem;font-weight:600;flex-wrap:wrap;margin-bottom:var(--s5)} .steps span{color:var(--ink-dim)} .steps span[aria-current="step"]{color:var(--accent)} .track{height:4px;background:var(--surface-3);border-radius:4px;overflow:hidden;margin-bottom:var(--s6)} .track i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .45s var(--e);width:33.34%} .bar{height:8px;background:var(--surface-3);border-radius:5px;overflow:hidden} .bar i{display:block;height:100%;background:var(--accent);border-radius:5px} .result-price{font-family:var(--f-dsp);font-size:clamp(1.875rem,1.2rem + 2.4vw,2.75rem);font-weight:700;letter-spacing:-.03em;color:var(--accent);line-height:1.1} /* ---------- footer ---------- */ .ft{background:var(--deep);color:var(--inv-soft);margin-top:auto;padding:var(--s7) 0 var(--s5);font-family:var(--f-ui);font-size:.9375rem} .ft-g{display:grid;gap:var(--s6);grid-template-columns:1fr;padding-bottom:var(--s6)} @media(min-width:640px){.ft-g{grid-template-columns:repeat(2,1fr)}} @media(min-width:960px){.ft-g{grid-template-columns:1.6fr 1fr 1fr 1fr}} .ft h2{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:var(--s4);font-weight:500} .ft ul{list-style:none;display:grid;gap:.625rem} .ft a{color:var(--inv-soft);text-decoration:none} .ft a:hover{color:#fff} .ft .brand{color:#fff;margin-bottom:var(--s4)} .ft-about{max-width:34ch;line-height:1.6;font-size:.9375rem} .ft-b{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:.8125rem;color:#8496A6} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--e),transform .55s var(--e)} .rv.on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .btn:hover,a.card:hover{transform:none} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }