/* ======================================================================
   VanillaDev Global Shell · 0.9.1 · 2026-09-07
   Global header / mobile navigation / footer aligned to the new frontpage.
   Applies to all templates that use the VanillaDev shell.
   ====================================================================== */

:root{
  --vd-shell-bg:#061611;
  --vd-shell-bg-2:#091d17;
  --vd-shell-bg-3:#0c261e;
  --vd-shell-paper:#f8faf9;
  --vd-shell-white:#ffffff;
  --vd-shell-text:#d7e2dd;
  --vd-shell-muted:#91a79e;
  --vd-shell-muted-2:#6f8b80;
  --vd-shell-line:rgba(255,255,255,.09);
  --vd-shell-line-soft:rgba(255,255,255,.06);
  --vd-shell-aqua:#6fe0d0;
  --vd-shell-blue:#5eb6ff;
  --vd-shell-mint:#7be5a1;
  --vd-shell-warm:#d7c89f;
  --vd-shell-ink:#071813;
}

.vd-shell-header,
.vd-shell-footer,
.vd-mobile-panel,
.vd-focus-header,
.vd-focus-footer{
  box-sizing:border-box;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ----------------------------------------------------------------------
   Brand
   ---------------------------------------------------------------------- */
.vd-brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  width:max-content;
  max-width:100%;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}
.vd-brand-mark{
  display:block;
  flex:none;
  width:27px;
  height:27px;
  background:url('../brand/vanilladev-v-beige.png') center/contain no-repeat;
}
.vd-brand-name{
  color:#fff;
  font-size:18px;
  font-weight:690;
  line-height:1;
  letter-spacing:-.04em;
}
.vd-brand-name span{
  color:#fff;
  font-weight:560;
}

/* ----------------------------------------------------------------------
   Shared arrow language
   ---------------------------------------------------------------------- */
.vd-nav-arrow,
.vd-action-arrow,
.ui-arrow{
  --vd-arrow-rotation:0deg;
  position:relative;
  display:inline-block;
  flex:none;
  width:13px;
  height:9px;
  color:currentColor;
  opacity:.72;
  transform:rotate(var(--vd-arrow-rotation));
  transition:transform .18s ease,opacity .18s ease;
  background:none!important;
}
.vd-nav-arrow:before,
.vd-action-arrow:before,
.ui-arrow:before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:4px!important;
  width:10px!important;
  height:1px!important;
  border:0!important;
  background:currentColor!important;
}
.vd-nav-arrow:after,
.vd-action-arrow:after,
.ui-arrow:after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:1px!important;
  width:5px!important;
  height:5px!important;
  border:0!important;
  border-top:1px solid currentColor!important;
  border-right:1px solid currentColor!important;
  background:none!important;
  transform:rotate(45deg)!important;
}
.vd-action-arrow--up,
.ui-arrow-up-right{--vd-arrow-rotation:-45deg}
.ui-arrow-down-right{--vd-arrow-rotation:45deg}
.ui-arrow-right{--vd-arrow-rotation:0deg}
.ui-arrow-up{--vd-arrow-rotation:-90deg}
.ui-arrow-down{--vd-arrow-rotation:90deg}

/* ----------------------------------------------------------------------
   Global desktop header
   ---------------------------------------------------------------------- */
.vd-shell-header{
  position:sticky;
  top:0;
  z-index:1000;
  min-height:78px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(24px,3vw,44px);
  padding:0 clamp(24px,4.2vw,68px);
  border-bottom:1px solid var(--vd-shell-line);
  background:rgba(6,22,17,.94);
  color:#fff;
  box-shadow:0 14px 36px rgba(1,11,8,.16);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
}
.vd-shell-header:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(111,224,208,.18) 28%,rgba(94,182,255,.16) 72%,transparent 100%);
}
.vd-shell-header .vd-brand{
  position:relative;
  z-index:2;
}
.vd-shell-header .vd-brand:after{
  content:"";
  position:absolute;
  left:38px;
  bottom:-11px;
  width:34px;
  height:1px;
  opacity:0;
  background:linear-gradient(90deg,var(--vd-shell-aqua),var(--vd-shell-blue));
  transition:opacity .18s ease,transform .18s ease;
  transform:scaleX(.7);
  transform-origin:left;
}
.vd-shell-header .vd-brand:hover:after,
.vd-shell-header .vd-brand:focus-visible:after{
  opacity:.9;
  transform:scaleX(1);
}

.vd-shell-nav{
  justify-self:center;
  display:flex;
  align-items:stretch;
  gap:clamp(20px,2.35vw,38px);
  min-width:0;
  height:78px;
  color:#c9d7d1;
}
.vd-shell-nav>a,
.vd-nav-group>a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:78px;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
  font-size:13px;
  font-weight:530;
  letter-spacing:-.01em;
  transition:color .18s ease;
}
.vd-shell-nav>a:after,
.vd-nav-group>a:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:15px;
  width:18px;
  height:1px;
  border-radius:999px;
  opacity:0;
  background:linear-gradient(90deg,var(--vd-shell-aqua),var(--vd-shell-blue));
  transform:translateX(-50%) scaleX(.25);
  transition:opacity .18s ease,transform .18s ease;
}
.vd-shell-nav>a:hover,
.vd-shell-nav>a:focus-visible,
.vd-shell-nav>a[aria-current="page"],
.vd-nav-group>a:hover,
.vd-nav-group>a:focus-visible,
.vd-nav-group:focus-within>a{
  color:#fff;
}
.vd-shell-nav>a:hover:after,
.vd-shell-nav>a:focus-visible:after,
.vd-shell-nav>a[aria-current="page"]:after,
.vd-nav-group:hover>a:after,
.vd-nav-group:focus-within>a:after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

.vd-nav-group{
  position:relative;
  display:flex;
  align-items:stretch;
}
.vd-nav-submenu{
  position:absolute;
  top:calc(100% - 8px);
  left:-24px;
  z-index:20;
  display:grid;
  min-width:282px;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(7,25,20,.985);
  box-shadow:0 26px 72px rgba(0,0,0,.34);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .16s ease,visibility .16s ease,transform .16s ease;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.vd-nav-submenu:before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,var(--vd-shell-aqua),rgba(94,182,255,.35),transparent);
}
.vd-nav-group:hover .vd-nav-submenu,
.vd-nav-group:focus-within .vd-nav-submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.vd-shell-nav .vd-nav-submenu a{
  display:flex;
  align-items:center;
  min-height:0;
  padding:12px 13px;
  border-radius:11px;
  color:#bdcec7;
  text-decoration:none;
  font-size:13px;
  line-height:1.35;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.vd-shell-nav .vd-nav-submenu a:after{display:none}
.vd-shell-nav .vd-nav-submenu a:hover,
.vd-shell-nav .vd-nav-submenu a:focus-visible{
  color:#fff;
  outline:none;
  background:linear-gradient(90deg,rgba(111,224,208,.10),rgba(94,182,255,.05));
  transform:translateX(2px);
}

.vd-shell-cta{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:46px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.80);
  border-radius:13px;
  background:#fff;
  color:var(--vd-shell-ink)!important;
  text-decoration:none;
  font-size:13px;
  font-weight:690;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.vd-shell-cta:hover,
.vd-shell-cta:focus-visible{
  border-color:#fff;
  background:#f8fbfa;
  color:var(--vd-shell-ink)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.22),0 0 0 1px rgba(111,224,208,.12);
  transform:translateY(-1px);
}
.vd-shell-cta:hover .vd-action-arrow,
.vd-shell-cta:focus-visible .vd-action-arrow{
  color:#157d71;
  opacity:1;
  transform:translateX(2px);
}

.vd-shell-header a:focus-visible,
.vd-shell-header button:focus-visible,
.vd-mobile-panel a:focus-visible,
.vd-focus-header a:focus-visible,
.vd-shell-footer a:focus-visible{
  outline:2px solid rgba(111,224,208,.78);
  outline-offset:4px;
}

/* ----------------------------------------------------------------------
   Mobile navigation
   ---------------------------------------------------------------------- */
.vd-menu-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  place-content:center;
  gap:6px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.vd-menu-toggle:hover,
.vd-menu-toggle:focus-visible{
  border-color:rgba(111,224,208,.34);
  background:rgba(111,224,208,.07);
}
.vd-menu-toggle span{
  display:block;
  width:18px;
  height:1px;
  background:#fff;
  transition:transform .2s ease;
}
.vd-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.vd-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.vd-mobile-panel{
  display:none;
  position:fixed;
  z-index:999;
  inset:70px 0 0;
  padding:24px 20px 36px;
  overflow:auto;
  color:#fff;
  background:
    radial-gradient(circle at 88% 0%,rgba(94,182,255,.12),transparent 24%),
    radial-gradient(circle at 12% 92%,rgba(111,224,208,.10),transparent 24%),
    rgba(6,22,17,.995);
}
.vd-mobile-panel.is-open{display:block}
.vd-mobile-panel>nav{
  display:grid;
  border-top:1px solid var(--vd-shell-line);
}
.vd-mobile-panel>nav>a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:19px 2px;
  border-bottom:1px solid var(--vd-shell-line);
  color:#e0e9e5;
  text-decoration:none;
  font-size:18px;
  font-weight:590;
}
.vd-mobile-panel>nav>a:hover,
.vd-mobile-panel>nav>a:focus-visible,
.vd-mobile-panel>nav>a[aria-current="page"]{color:#fff}
.vd-mobile-panel>nav>a[aria-current="page"] .vd-nav-arrow{color:var(--vd-shell-aqua)}
.vd-mobile-subnav{
  display:grid;
  padding:7px 0 12px 18px;
  border-bottom:1px solid var(--vd-shell-line);
}
.vd-mobile-panel .vd-mobile-subnav a{
  padding:10px 0;
  color:#91a99f;
  text-decoration:none;
  font-size:14px;
  line-height:1.4;
}
.vd-mobile-panel .vd-mobile-subnav a:hover,
.vd-mobile-panel .vd-mobile-subnav a:focus-visible{color:#fff}
.vd-mobile-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px;
}
.vd-mobile-cta,
.vd-mobile-secondary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:52px;
  padding:0 16px;
  border-radius:13px;
  text-decoration:none;
  font-size:14px;
  font-weight:670;
}
.vd-mobile-cta{
  border:1px solid #fff;
  background:#fff;
  color:var(--vd-shell-ink);
}
.vd-mobile-secondary{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.035);
  color:#fff;
}

/* ----------------------------------------------------------------------
   Global footer
   ---------------------------------------------------------------------- */
.vd-shell-footer{
  position:relative;
  overflow:hidden;
  padding:0 clamp(24px,4.2vw,68px) 24px;
  border-top:1px solid var(--vd-shell-line);
  color:#dce7e2;
  background:
    radial-gradient(circle at 8% 0%,rgba(111,224,208,.08),transparent 22%),
    radial-gradient(circle at 92% 10%,rgba(94,182,255,.07),transparent 19%),
    linear-gradient(180deg,#061611 0%,#05130f 100%);
}
.vd-shell-footer:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(111,224,208,.34) 30%,rgba(94,182,255,.22) 70%,transparent 100%);
  pointer-events:none;
}
.vd-footer-primary{
  display:grid;
  grid-template-columns:minmax(250px,1.15fr) minmax(400px,1.2fr) minmax(180px,.65fr);
  align-items:center;
  gap:clamp(28px,4vw,68px);
  min-height:148px;
  padding:32px 0 28px;
}
.vd-footer-intro p{
  margin:16px 0 0;
  color:#94aaa1;
  font-size:13px;
  line-height:1.45;
  letter-spacing:.01em;
}
.vd-footer-nav{
  justify-self:center;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px clamp(20px,2.4vw,34px);
}
.vd-footer-nav a{
  position:relative;
  color:#c4d3cd;
  text-decoration:none;
  font-size:13px;
  font-weight:540;
  transition:color .18s ease;
}
.vd-footer-nav a:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:1px;
  background:linear-gradient(90deg,var(--vd-shell-aqua),var(--vd-shell-blue));
  transition:right .18s ease;
}
.vd-footer-nav a:hover,
.vd-footer-nav a:focus-visible{color:#fff}
.vd-footer-nav a:hover:after,
.vd-footer-nav a:focus-visible:after{right:0}
.vd-footer-signature{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:13px;
  color:#b4c7bf;
  font-size:12px;
  white-space:nowrap;
}
.vd-footer-signature i{
  display:block;
  width:34px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--vd-shell-aqua),var(--vd-shell-blue));
  box-shadow:0 0 18px rgba(111,224,208,.22);
}
.vd-footer-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:28px;
  padding-top:22px;
  border-top:1px solid var(--vd-shell-line-soft);
  color:#738e83;
  font-size:11px;
}
.vd-footer-legal{
  display:flex;
  align-items:center;
  gap:20px;
}
.vd-footer-legal a,
.vd-footer-top{
  color:#8ea49a!important;
  text-decoration:none;
  transition:color .18s ease;
}
.vd-footer-legal a:hover,
.vd-footer-legal a:focus-visible,
.vd-footer-top:hover,
.vd-footer-top:focus-visible{color:#fff!important}
.vd-footer-top{
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
}
.vd-footer-top:hover .vd-action-arrow,
.vd-footer-top:focus-visible .vd-action-arrow{color:var(--vd-shell-aqua)}

/* ----------------------------------------------------------------------
   Focus / landing shell
   ---------------------------------------------------------------------- */
.vd-focus-header{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 clamp(24px,4.2vw,68px);
  border-bottom:1px solid var(--vd-shell-line);
  background:rgba(6,22,17,.985);
  color:#fff;
}
.vd-focus-header-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.vd-focus-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#bfd0c9;
  text-decoration:none;
  font-size:13px;
}
.vd-focus-back:hover,
.vd-focus-back:focus-visible{color:#fff}
.vd-focus-footer{
  padding:18px clamp(24px,4.2vw,68px);
  border-top:1px solid var(--vd-shell-line);
  background:#061611;
  color:#789187;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.vd-focus-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  font-size:11px;
}
.vd-focus-footer-inner nav{display:flex;gap:18px}
.vd-focus-footer-inner a{color:#91a79e;text-decoration:none}
.vd-focus-footer-inner a:hover,
.vd-focus-footer-inner a:focus-visible{color:#fff}

/* ----------------------------------------------------------------------
   Layout compatibility with migrated/native pages
   ---------------------------------------------------------------------- */
body.static-home .hero{
  min-height:calc(100svh - 78px)!important;
  padding-top:34px!important;
}
body.vd-legal-page .legal-document{padding-top:78px!important}

/* ----------------------------------------------------------------------
   Responsive shell
   ---------------------------------------------------------------------- */
@media(max-width:1180px){
  .vd-shell-header{gap:22px;padding-inline:24px}
  .vd-shell-nav{gap:18px}
  .vd-shell-nav>a,.vd-nav-group>a{font-size:12px}
  .vd-shell-cta{padding-inline:16px}
  .vd-footer-primary{grid-template-columns:1fr auto}
  .vd-footer-nav{grid-column:1/-1;grid-row:2;justify-self:start;justify-content:flex-start}
  .vd-footer-signature{grid-column:2;grid-row:1}
}

@media(max-width:920px){
  .vd-shell-header{
    min-height:70px;
    grid-template-columns:auto 1fr auto auto;
    gap:12px;
    padding:0 16px;
  }
  .vd-shell-nav{display:none}
  .vd-shell-cta{margin-left:auto}
  .vd-menu-toggle{display:grid}
  .vd-mobile-panel{inset-top:70px}
  .vd-brand-name{font-size:17px}
  body.static-home .hero{min-height:calc(100svh - 70px)!important;padding-top:28px!important}
  body.vd-legal-page .legal-document{padding-top:70px!important}
  .vd-footer-primary{grid-template-columns:1fr;gap:26px;padding-top:30px}
  .vd-footer-nav{grid-column:auto;grid-row:auto;justify-self:start}
  .vd-footer-signature{grid-column:auto;grid-row:auto;justify-self:start}
  .vd-footer-bottom{grid-template-columns:1fr auto;row-gap:16px}
  .vd-footer-legal{grid-column:1/-1;grid-row:2}
}

@media(max-width:640px){
  .vd-shell-header{grid-template-columns:auto 1fr auto}
  .vd-shell-cta{display:none}
  .vd-menu-toggle{grid-column:3}
  .vd-mobile-panel{padding-inline:18px}
  .vd-mobile-actions{grid-template-columns:1fr}
  .vd-shell-footer{padding-inline:20px}
  .vd-footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:14px 20px}
  .vd-footer-bottom{display:flex;align-items:flex-start;flex-direction:column;gap:14px}
  .vd-footer-legal{flex-wrap:wrap;gap:12px 18px}
  .vd-focus-header,.vd-focus-footer{padding-inline:18px}
  .vd-focus-footer-inner{align-items:flex-start;flex-direction:column}
}


/* ======================================================================
   Homepage header · split dark/light mockup
   Other pages keep the global shell unchanged.
   ====================================================================== */
body.static-home .vd-shell-header{
  min-height:82px;
  padding:0 clamp(32px,4.8vw,82px);
  gap:clamp(28px,3vw,46px);
  background:#061611;
  border-bottom:1px solid rgba(9,37,29,.16);
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
}
body.static-home .vd-shell-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,#f4f1ea,#efede7);
  clip-path:polygon(68% 0,100% 0,100% 100%,65% 100%);
}
body.static-home .vd-shell-header::after{
  z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.05) 62%,rgba(10,40,31,.08) 68%,transparent 100%);
}
body.static-home .vd-shell-header>.vd-brand,
body.static-home .vd-shell-header>.vd-shell-nav,
body.static-home .vd-shell-header>.vd-shell-cta,
body.static-home .vd-shell-header>.vd-menu-toggle{position:relative;z-index:2}
body.static-home .vd-shell-nav{height:82px;color:#d7e0dc}
body.static-home .vd-shell-nav>a,
body.static-home .vd-nav-group>a{min-height:82px;font-size:13px;font-weight:560}
body.static-home .vd-shell-nav>a:after,
body.static-home .vd-nav-group>a:after{bottom:17px}
body.static-home .vd-shell-cta{
  min-height:50px;
  padding-inline:24px;
  border-radius:14px;
  border-color:rgba(10,36,28,.08);
  box-shadow:0 12px 28px rgba(20,42,34,.10);
}
body.static-home .vd-shell-header .vd-brand-mark{width:29px;height:29px}
body.static-home .vd-shell-header .vd-brand-name{font-size:18px}
@media(max-width:1180px){
  body.static-home .vd-shell-header::before{display:none}
  body.static-home .vd-shell-header{background:rgba(6,22,17,.97)}
}
@media(max-width:900px){
  body.static-home .vd-shell-header{min-height:72px;padding-inline:18px}
  body.static-home .vd-shell-nav{height:72px}
  body.static-home .vd-menu-toggle{display:grid}
}


/* ======================================================================
   Homepage header M4.1 · match the approved diagonal split more closely
   ====================================================================== */
@media (min-width:1181px){
  body.static-home .vd-shell-header{
    padding-inline:clamp(46px,5.15vw,86px);
  }
  body.static-home .vd-shell-header::before{
    background:linear-gradient(180deg,#f5f2eb,#efede6);
    clip-path:polygon(66% 0,100% 0,100% 100%,63% 100%);
  }
  body.static-home .vd-shell-nav{
    gap:clamp(26px,2.45vw,42px);
  }
  body.static-home .vd-shell-cta{
    min-height:52px;
    padding-inline:25px;
    border-radius:14px;
    background:rgba(255,255,255,.92);
    color:#0b1b15;
    box-shadow:0 12px 30px rgba(25,42,35,.10);
  }
}