/* octisai.com, light: Kalk #f2efe8 with graphite #33322e for the knot and text, brass #bf9e56 (saas/BRAND.md).
   The knot stays a single flat colour: no circle, gradient or shadow on the mark. */
:root{--kalk:#f2efe8;--surface:#f9f7f2;--veil:246,243,236;--graphite:#33322e;--muted:#5e5b54;--brass:#bf9e56;--brass-deep:#9a7a38;color-scheme:light}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{min-height:100vh;min-height:100dvh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse 90% 70% at 50% 45%,var(--surface) 0%,var(--kalk) 70%);color:var(--graphite);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

/* The neural network (network.js) with a faint technical grid behind it and a vignette in front. */
.field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(191,158,86,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(191,158,86,.06) 1px,transparent 1px);background-size:64px 64px;-webkit-mask:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 80%);mask:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 80%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 75% at 50% 50%,transparent 55%,rgba(120,100,60,.1))}
.grain{position:fixed;inset:-50%;background:url(/grain.svg);opacity:.05;pointer-events:none;mix-blend-mode:multiply;animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}

/* Content: a light veil keeps the network from competing with the mark and the text. */
main{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
main::before{content:"";position:absolute;inset:-35% -30%;z-index:-1;background:radial-gradient(closest-side,rgba(var(--veil),.82) 30%,rgba(var(--veil),.45) 60%,transparent);pointer-events:none}
.knot{width:clamp(72px,14vw,112px);height:auto;fill:var(--graphite);animation:rise 1.8s cubic-bezier(.16,1,.3,1) both}
h1{margin-top:clamp(22px,4vw,34px);font-weight:300;font-size:clamp(48px,12vw,104px);line-height:1;letter-spacing:-.035em;
  background:linear-gradient(100deg,var(--graphite) 0 40%,var(--brass-deep) 50%,var(--graphite) 60% 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rise 1.8s .12s cubic-bezier(.16,1,.3,1) both,shine 7s 2s ease-in-out infinite}
p{margin-top:clamp(18px,3vw,26px);font-weight:400;font-size:clamp(11px,2.4vw,13px);letter-spacing:.42em;text-transform:uppercase;color:var(--muted);padding:.7em 1.3em .7em 1.72em;border:1px solid rgba(154,122,56,.45);border-radius:999px;background:rgba(var(--veil),.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rise 1.8s .25s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes shine{0%,30%{background-position:100% 0}70%,100%{background-position:0 0}}

@media (prefers-reduced-motion:reduce){
  .grain,.knot,h1,p{animation:none!important}
  h1{color:var(--graphite);background:none}
}