
.df{--df-accent:#0069b4;background:var(--bg);color:var(--fg);border-top:1px solid var(--line);
  overflow:hidden;font-size:14px;line-height:1.85}
:root[data-theme="dark"] .df{--df-accent:#d97757}

.df-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;padding-block:64px}
.df-brandcol{grid-column:1/-1}
@media(min-width:768px){
  .df-grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));column-gap:40px}
  .df-brandcol{grid-column:auto}
}
.df-brand{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--fg);text-decoration:none;border-radius:2px}
.df-tag{margin:12px 0 0;max-width:320px;font-size:14px;color:var(--fg-2);text-wrap:pretty}
.df-consult{margin-top:32px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;
  border-radius:6px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:600;text-decoration:none;
  transition:opacity var(--t),transform 120ms ease}
.df-consult:hover{opacity:.9}
.df-consult:active{transform:scale(.97)}
.df-consult svg{width:16px;height:16px;flex:none}

.df-grid .df-social{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0}
.df-grid .df-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);color:var(--fg-2);
  background:var(--surface);transition:color var(--t),border-color var(--t),background var(--t),transform 120ms ease}
.df-grid .df-social a:hover{color:var(--df-accent);border-color:var(--df-accent);background:color-mix(in srgb,var(--df-accent) 8%,var(--surface))}
.df-grid .df-social a:active{transform:scale(.95)}
.df-grid .df-social svg{width:20px;height:20px}

.df-h{margin:0;font-size:14px;font-weight:600;color:var(--fg)}
.df-grid ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.df-grid ul a{font-size:14px;color:var(--fg-2);text-decoration:none;border-radius:2px;transition:color var(--t)}
.df-grid ul a:hover{color:var(--fg)}
.df a:focus-visible,.df button:focus-visible{outline:2px solid var(--df-accent);outline-offset:2px}
@media(pointer:coarse){
  .df-grid ul{gap:0}
  .df-grid ul a{display:inline-flex;align-items:center;min-height:44px}
  .df-consult{min-height:44px}
  .df-brand{display:inline-block;padding-block:10px;margin-block:-10px}
}

.df-disc{position:relative;z-index:1;padding-block:24px 0;border-top:1px solid var(--line)}
.df-disc p{margin:0 0 10px;font-size:12.5px;line-height:2.05;color:var(--fg-2)}
.df-disc p:first-child{color:var(--fg);font-weight:700;font-size:13.5px}
.df-disc p:last-child{margin-bottom:0}

.df-band{--df-empty:78px;--df-gap:8px;position:relative;height:380px;overflow:hidden;
  margin-top:calc(var(--df-gap) - var(--df-empty))}
.df-field{position:absolute;inset:0}
.df-field.df-lit{
  -webkit-mask-image:radial-gradient(circle 190px at var(--df-x,50%) var(--df-y,50%),#000 35%,rgb(0 0 0 / .22) 100%);
          mask-image:radial-gradient(circle 190px at var(--df-x,50%) var(--df-y,50%),#000 35%,rgb(0 0 0 / .22) 100%)}
.df-dots{position:absolute;top:0;bottom:0;left:0;width:calc(100% + 360px);background:var(--df-accent);
  -webkit-mask-image:radial-gradient(circle,#000 .9px,transparent 1.3px),url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27360%27%20height%3D%27380%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.04%27%20stop-color%3D%27%23000%27%2F%3E%3Cstop%20offset%3D%270.96%27%20stop-color%3D%27%23fff%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.45%27%20numOctaves%3D%272%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27matrix%27%20values%3D%271%200%200%200%200%201%200%200%200%200%201%200%200%200%200%200%200%200%200%201%27%20result%3D%27ng%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27ng%27%20operator%3D%27arithmetic%27%20k2%3D%270.5%27%20k3%3D%270.5%27%20result%3D%27s%27%2F%3E%3CfeComponentTransfer%20in%3D%27s%27%20result%3D%27t%27%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%200%200%200%200%200.5%200%200%200%200%200%201%200%200%200%200%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url%28%23g%29%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E');
          mask-image:radial-gradient(circle,#000 .9px,transparent 1.3px),url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27360%27%20height%3D%27380%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270.04%27%20stop-color%3D%27%23000%27%2F%3E%3Cstop%20offset%3D%270.96%27%20stop-color%3D%27%23fff%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.45%27%20numOctaves%3D%272%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27matrix%27%20values%3D%271%200%200%200%200%201%200%200%200%200%201%200%200%200%200%200%200%200%200%201%27%20result%3D%27ng%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27ng%27%20operator%3D%27arithmetic%27%20k2%3D%270.5%27%20k3%3D%270.5%27%20result%3D%27s%27%2F%3E%3CfeComponentTransfer%20in%3D%27s%27%20result%3D%27t%27%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%200%200%200%200%200.5%200%200%200%200%200%201%200%200%200%200%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27url%28%23g%29%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E');
  -webkit-mask-size:4px 4px,360px 380px;mask-size:4px 4px,360px 380px;
  -webkit-mask-repeat:repeat,repeat-x;mask-repeat:repeat,repeat-x;
  -webkit-mask-position:0 0,left bottom;mask-position:0 0,left bottom;
  -webkit-mask-composite:source-in;mask-composite:intersect}

.df-markwrap{position:absolute;inset:0;height:100%;pointer-events:none}
.df-markin{position:relative;height:100%;container-type:inline-size}
.df-mark{--df-em:3.95;position:absolute;bottom:-.01em;right:0;margin:0;
  font-size:min(13rem,calc(100cqi / var(--df-em)));font-weight:700;line-height:.8;letter-spacing:-.06em;
  text-box:trim-both cap alphabetic;
  color:var(--bg);white-space:nowrap;user-select:none;-webkit-user-select:none}

.df-bar{border-top:1px solid var(--line)}
.df-barin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding-block:20px;font-size:14px;color:var(--fg-2)}
.df-barin p{margin:0}
.df-totop{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:6px;
  background:transparent;color:var(--fg-2);cursor:pointer;transition:background var(--t),color var(--t)}
.df-totop:hover{background:var(--bg-2);color:var(--fg)}
.df-totop svg{width:15px;height:15px}
@media(pointer:coarse){.df-totop{width:44px;height:44px}}

@media (prefers-reduced-motion:no-preference){
  .df-dots{animation:df-drift 40s linear infinite;animation-play-state:paused}
  .df-band.df-run .df-dots{animation-play-state:running}
  @supports (animation-timeline:view()){
    .df-band{view-timeline:--df-band}
    .df-mark{animation:df-rise linear both;animation-timeline:--df-band;animation-range:entry 20% entry 100%}
  }
}
@keyframes df-drift{to{translate:-360px 0}}
@keyframes df-rise{from{translate:0 30%}}
