/* Natlig Dot hero animation — palette from the Natlig brand sheet */
.nd-root{
  --nd-day-bg:#F2EEE4;   --nd-day-ink:#241A15;   --nd-day-acc:#A84E26;   --nd-day-alarm:#9B2C1F;   --nd-day-muted:#6B5D4F;   --nd-day-fill:#D9C2A0; --nd-day-face:#ECE1CF;
  --nd-night-bg:#2E201A; --nd-night-ink:#F8F6F0; --nd-night-acc:#E0864F; --nd-night-alarm:#F2A48C; --nd-night-muted:#D9C2A0; --nd-night-fill:#453026; --nd-night-face:#453026;
  --nd-text:#241A15; --nd-text-soft:#6B5D4F; --nd-line:rgba(107,93,79,.3); --nd-focus:#BF5B2E;
  position:relative; width:100%; font-family:Manrope,"Helvetica Neue",Arial,sans-serif; color:var(--nd-text);
}
#nd-stage{--bg-s:var(--nd-day-bg);--ink-s:var(--nd-day-ink);--acc-s:var(--nd-day-acc);--alarm-s:var(--nd-day-alarm);--muted-s:var(--nd-day-muted);--fill-s:var(--nd-day-fill);--face-s:var(--nd-day-face)}
.nd-root .nd-stage{position:relative;border-radius:22px;overflow:hidden;background:var(--nd-day-bg)}
.nd-root .nd-stage svg{display:block;width:100%;height:auto}
.nd-root .nd-stage.nd-idle{cursor:pointer}
.nd-root .nd-under{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:14px;min-height:52px}
.nd-root .nd-captions{display:grid;flex:1;min-height:52px}
.nd-root .nd-cap{grid-area:1/1;opacity:0}
.nd-root .nd-cap strong{display:block;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:19px;line-height:1.2;color:var(--nd-text)}
.nd-root .nd-cap span{font-size:14px;color:var(--nd-text-soft)}
.nd-root .nd-ctls{display:flex;gap:6px;flex-shrink:0}
.nd-root .nd-ctl{font:500 13px/1 Manrope,Arial,sans-serif;color:var(--nd-text-soft);background:none;border:1px solid var(--nd-line);border-radius:999px;padding:9px 14px;cursor:pointer}
.nd-root .nd-ctl:hover{color:var(--nd-text);border-color:var(--nd-text-soft)}
.nd-root .nd-ctl:focus-visible{outline:2px solid var(--nd-focus);outline-offset:3px}
.nd-root .nd-ctl[hidden]{display:none}

/* Hover comment from Dot. Anchored above his head (stage x≈48%, top of head y≈26%). */
.nd-root .nd-hint{position:absolute;left:48%;top:17.5%;z-index:2;transform:translate(-50%,-100%) translateY(6px);padding:9px 14px;border-radius:14px;background:#241A15;color:#F8F6F0;font:600 13px/1.2 Manrope,Arial,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease}
.nd-root .nd-hint::after{content:"";position:absolute;left:50%;top:100%;width:10px;height:10px;background:inherit;transform:translate(-50%,-50%) rotate(45deg);border-radius:2px}
.nd-root .nd-hint.nd-show{opacity:1;transform:translate(-50%,-100%)}

/* In-stage speech bubbles are too small to read on phones; the captions below carry the explanation there. */
@media (max-width:640px){ .nd-root #nd-says{display:none} }

/* Hero layout: give the animation room in the visual column */
.hero .hero-emblem.nd-slot{width:100%;max-width:none;margin-left:0;justify-self:stretch;display:block}
@media (min-width:992px){
  .hero .hero-copy{grid-column:1 / span 6}
  .hero .hero-emblem.nd-slot{grid-column:7 / span 6}
}
@media (max-width:991px){
  .hero .hero-emblem.nd-slot{width:100%}
}
@media (max-width:480px){
  .hero .hero-emblem.nd-slot{width:100%}
  .nd-root .nd-under{flex-direction:column;gap:10px}
  .nd-root .nd-hint{font-size:12px;padding:8px 12px}
}

/* Hero headline: "Secure • Build • Grow" on one line */
.hero h1.hero-title{max-width:none;font-size:clamp(2.1rem,.9rem + 3.6vw,3.9rem);white-space:nowrap}
.hero h1.hero-title .hero-dot{font-style:normal;color:var(--copper-deep);padding-inline:.12em}
@media (max-width:420px){.hero h1.hero-title{white-space:normal}}

/* Nat (corner helper) hands over to the big robot while it is on screen. */
html .nbot{transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .45s ease,translate 1s cubic-bezier(.25,.8,.25,1),scale 1s cubic-bezier(.25,.8,.25,1)}
html .nbot.nbot--away{opacity:0;visibility:hidden;pointer-events:none;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .45s ease,translate .6s ease-in,scale .6s ease-in,visibility 0s .6s}
@media (prefers-reduced-motion:reduce){ html .nbot,html .nbot.nbot--away{transition:opacity .3s ease} }

/* Soft sand-coloured semicircle rising from the far left edge of the screen, centred on the headline.
   --disc, --disc-x and --disc-y (set in dot.js) size and centre it on the headline block. */
.hero h1.hero-title{position:relative;--disc:clamp(420px,52vw,760px)}
.hero h1.hero-title::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:var(--disc);height:var(--disc);border-radius:50%;
  left:var(--disc-x,50%);top:var(--disc-y,50%);transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 45%,rgba(229,210,183,.9) 0%,rgba(236,218,196,.78) 50%,rgba(243,229,214,.6) 100%);
  border:1px solid rgba(222,196,170,.35);
}
@media (max-width:991px){ .hero h1.hero-title{--disc:clamp(300px,90vw,520px)} }