@font-face{font-family:Manrope;src:url('assets/manrope.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}

/* Design: variation 7 / motion 4 / density 3. Soft 24px panels, pill controls.
   Layers: skip link 10, greeting 2, duck 1. No other stacking contexts needed. */
:root{color-scheme:light;--page:#f4f5ef;--ink:#24392e;--muted:#626c60;--line:#d8ddd1;--accent:#365943;--accent-ink:#f5f7ee;--mint:#dcebbf;--disc:#e3e9d8;--panel:#e9eddf;--panel-alt:#eef0e8;--feature:#294a38;--feature-ink:#f1f4e9;--feature-muted:#d0dacb;--greeting:#fbfcf7;--shadow:rgba(53,79,40,.15);--focus:#466434}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--page:#19231e;--ink:#eef2e6;--muted:#bbc5b6;--line:#3b4a3e;--accent:#dcebbf;--accent-ink:#24392e;--mint:#dcebbf;--disc:#303f31;--panel:#2c3d30;--panel-alt:#24342a;--feature:#dcebbf;--feature-ink:#253d2e;--feature-muted:#49603f;--greeting:#e6eddc;--shadow:rgba(4,13,5,.3);--focus:#c7e4a3}}
:root[data-theme="dark"]{color-scheme:dark;--page:#19231e;--ink:#eef2e6;--muted:#bbc5b6;--line:#3b4a3e;--accent:#dcebbf;--accent-ink:#24392e;--mint:#dcebbf;--disc:#303f31;--panel:#2c3d30;--panel-alt:#24342a;--feature:#dcebbf;--feature-ink:#253d2e;--feature-muted:#49603f;--greeting:#e6eddc;--shadow:rgba(4,13,5,.3);--focus:#c7e4a3}
*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;background:var(--page);color:var(--ink);font-family:Manrope,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-width:280px}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
button[hidden]{display:none}
::selection{background:var(--mint);color:#24392e}
.site-shell{width:min(100% - 112px,1200px);margin-inline:auto}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.wordmark{font-size:19px;font-weight:800;letter-spacing:-.06em;text-decoration:none;white-space:nowrap}
.wordmark span{font-size:11px;letter-spacing:.07em;font-weight:600;color:var(--muted);margin-left:8px}
.theme-toggle{display:flex;align-items:center;gap:9px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);padding:0 16px;font-size:11px;font-weight:650;cursor:pointer}
.theme-symbol{width:13px;height:13px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:32px;min-height:590px;padding:56px 0 52px}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--muted);margin:0 0 25px}
h1{font-size:clamp(70px,7.6vw,104px);line-height:1.01;font-weight:750;letter-spacing:-.075em;margin:0}
h1 span{color:var(--accent)}
.intro{font-size:15px;line-height:1.85;color:var(--muted);margin:25px 0 29px;max-width:39ch}
.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border-radius:999px;background:var(--accent);color:var(--accent-ink);padding:16px 23px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;min-height:49px}
.primary-link span{font-size:20px;line-height:1}
.mascot-stage{height:450px;position:relative;display:grid;grid-template-rows:64px minmax(0,1fr) 32px;gap:10px;justify-items:center;align-items:center;isolation:isolate}
.mascot-disc{width:min(85%,350px);aspect-ratio:1;border-radius:50%;background:var(--disc);position:absolute;top:50%;left:50%;transform:translate(-50%,-48%);z-index:-1}
.mascot-ring{width:min(96%,392px);aspect-ratio:1;position:absolute;top:50%;left:50%;border:1px solid var(--line);border-radius:50%;transform:translate(-50%,-48%);z-index:-1}
.mascot-composition{position:relative;width:100%;height:100%;min-height:0;max-width:400px;padding:0;overflow:clip}
.mascot-button{display:block;position:relative;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;border-radius:42%;transform:rotate(-4deg);transform-origin:50% 80%}
.mascot-button:disabled{cursor:default}
.mascot-button:focus-visible{outline-offset:-5px}
.mascot-button img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;filter:drop-shadow(0 10px 5px rgba(51,67,37,.07))}
.duck-greeting{position:relative;z-index:2;transform:rotate(3deg);background:var(--greeting);color:#2d4431;border:1px solid #d0d8c4;border-radius:20px 20px 20px 4px;padding:12px 18px;font-size:13px;line-height:1.4;font-weight:750;width:max-content;max-width:min(90%,285px);text-align:center;margin:0;box-shadow:0 6px 20px var(--shadow);pointer-events:none}
.mascot-caption{position:relative;z-index:2;align-self:end;text-align:center;font-size:12px;font-weight:650;color:var(--muted);line-height:1.7;margin:0;max-width:90%}
.links-section{padding:25px 0 62px;scroll-margin-top:24px}
.section-heading{margin:0 0 23px}
h2{font-size:26px;font-weight:700;letter-spacing:-.045em;line-height:1.25;margin:0}
.section-heading p{font-size:12px;color:var(--muted);margin:7px 0 0}
.link-grid{display:grid;grid-template-columns:1.13fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
.destination{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-width:0;min-height:176px;padding:25px 28px;border-radius:24px;text-decoration:none;border:1px solid transparent}
.destination-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.platform-label{font-size:11px;font-weight:650}
.destination-arrow{display:grid;place-items:center;flex-shrink:0;width:31px;height:31px;border:1px solid currentColor;border-radius:50%;font-size:18px;line-height:1}
.destination-featured{grid-row:span 2;background:var(--feature);color:var(--feature-ink);min-height:368px}
.destination-business{background:var(--panel);color:var(--ink)}
.destination-linkedin{background:var(--panel-alt);color:var(--ink);border-color:var(--line)}
.destination h3{font-size:26px;letter-spacing:-.045em;font-weight:650;line-height:1.2;margin:0 0 8px;position:relative}
.destination p{font-size:12px;color:var(--muted);margin:0;line-height:1.6;position:relative}
.destination-featured h3{font-size:34px;max-width:9ch}
.destination-featured p{color:var(--feature-muted)}
/* A simple CSS play glyph, not an imitation video player or screenshot. */
.video-art{position:absolute;right:9%;top:32%;width:117px;height:83px;border-radius:26px;background:color-mix(in srgb,var(--feature-ink) 9%,transparent);transform:rotate(-13deg);display:grid;place-items:center}
.play-symbol{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:23px solid currentColor;margin-left:5px;opacity:.9}
.site-footer{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);padding:20px 0}
.footer-smile{font-size:16px;font-weight:600;color:var(--ink);margin-left:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:10;top:12px;left:12px;padding:12px 18px;background:var(--accent);color:var(--accent-ink);border-radius:12px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
@media(hover:hover){
  .destination:hover{transform:translateY(-4px);box-shadow:0 14px 28px var(--shadow)}
  .destination:hover .destination-arrow{transform:rotate(45deg)}
  .destination-featured:hover .video-art{transform:rotate(0deg) scale(1.06)}
  .primary-link:hover{transform:translateY(-2px);box-shadow:0 7px 18px var(--shadow)}
  .theme-toggle:hover{background:var(--panel)}
  .mascot-button:not(:disabled):hover{transform:rotate(-3deg) translateY(-6px)}
}
.destination:active,.primary-link:active,.theme-toggle:active{transform:scale(.98)}
.mascot-button:not(:disabled):active{transform:rotate(3deg) scale(.96)}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .destination,.destination-arrow,.primary-link,.theme-toggle,.video-art,.mascot-button{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,background-color .2s ease}
  .hero-copy{animation:enter .75s both}
  .mascot-stage{animation:enter .85s .12s both}
  .links-section{animation:enter .85s .22s both}
  .mascot-button.is-greeting{animation:hello .65s cubic-bezier(.34,1.56,.64,1)}
  .duck-greeting.is-changing{animation:bubble .3s ease-out}
  @keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes hello{0%,100%{transform:rotate(-4deg)}30%{transform:rotate(3deg) translateY(-6px)}65%{transform:rotate(-7deg) translateY(-2px)}}
  @keyframes bubble{from{transform:rotate(3deg) scale(.9);opacity:.4}to{transform:rotate(3deg) scale(1);opacity:1}}
}
@media(min-width:1600px){.hero{min-height:650px}}
@media(max-width:1100px){
  .site-shell{width:calc(100% - 72px)}
  .hero{min-height:550px;gap:15px}
  .mascot-stage{height:390px}
  h1{font-size:82px}
  .intro{font-size:14px}
  .destination h3{font-size:24px}
  .destination-featured h3{font-size:32px}
}
/* Each multi-column section explicitly collapses below 768px. */
@media(max-width:767px){
  .site-shell{width:calc(100% - 40px);max-width:560px}
  .site-header{height:72px}
  .hero{grid-template-columns:1fr;gap:28px;padding:42px 0 30px;min-height:auto}
  .hero-copy{position:relative}
  .eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:20px}
  h1{font-size:clamp(60px,14vw,86px);line-height:1.02}
  .intro{font-size:14px;line-height:1.75;margin:20px 0 24px;max-width:38ch}
  .desktop-break{display:none}
  .primary-link{padding:14px 21px;min-height:48px}
  .mascot-stage{height:340px;width:min(100%,390px);justify-self:center}
  .mascot-stage{grid-template-rows:58px minmax(0,1fr) 28px;gap:8px}
  .mascot-disc{width:min(79%,265px)}
  .mascot-ring{width:min(90%,300px)}
  .mascot-composition{width:100%;max-width:320px;padding:0}
  .duck-greeting{padding:10px 14px;font-size:12px}
  .mascot-caption{font-size:12px}
  .links-section{padding:22px 0 38px}
  h2{font-size:25px}
  .link-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:12px}
  .destination-featured{grid-row:auto;min-height:250px}
  .destination{padding:23px;min-height:170px;border-radius:24px}
  .destination-featured h3{font-size:32px}
  .video-art{right:10%;top:40%;width:100px;height:72px}
  .site-footer{font-size:10px;min-height:79px;gap:12px}
}
@media(max-width:359px){
  .site-shell{width:calc(100% - 32px)}
  .wordmark{font-size:17px}
  .wordmark span{font-size:9px;margin-left:5px}
  .theme-toggle{padding:0 11px;font-size:10px}
  .hero{padding-top:34px}
  h1{font-size:62px}
  .mascot-stage{height:285px}
  .duck-greeting{font-size:11px;max-width:90%}
  .video-art{right:8%;width:75px;height:58px}
  .destination-featured h3{font-size:29px}
  .site-footer{align-items:flex-start;flex-direction:column;gap:7px}
}
/* Compact wide screens keep the complete introduction and its action visible. */
@media(min-width:768px) and (max-height:740px){
  .site-header{height:72px}
  .hero{min-height:480px;padding:32px 0}
  h1{font-size:80px}
  .mascot-stage{height:370px;max-width:420px;justify-self:end;width:100%}
  .mascot-composition{max-width:300px}
  .mascot-disc{width:min(80%,295px)}
  .mascot-ring{width:min(90%,330px)}
}
@media(min-width:768px) and (max-height:500px){
  .site-header{height:64px}
  .hero{min-height:310px;padding:22px 0;gap:24px}
  h1{font-size:60px}
  .eyebrow{margin-bottom:12px}
  .intro{font-size:13px;line-height:1.65;margin:14px 0 17px}
  .primary-link{min-height:44px;padding:12px 20px}
  .mascot-stage{height:280px;max-width:300px;grid-template-rows:48px minmax(0,1fr) 26px;gap:6px}
  .mascot-composition{max-width:240px}
  .mascot-disc{width:210px}
  .mascot-ring{width:236px}
  .duck-greeting{font-size:11px;padding:9px 12px}
}
@media(max-width:767px) and (max-height:500px){
  .site-header{height:64px}
  .hero{padding-top:24px}
  h1{font-size:52px}
  .eyebrow{margin-bottom:14px}
  .intro{margin:14px 0 18px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.destination{border:1px solid ButtonText}.theme-symbol{forced-color-adjust:none}.mascot-disc,.mascot-ring,.duck-shadow{display:none}.primary-link{border:1px solid ButtonText}}